(core) Implementing row conditional formatting

Summary:
Conditional formatting can now be used for whole rows.
Related fix:
- Font styles weren't applicable for summary columns.
- Checkbox and slider weren't using colors properly

Test Plan: Existing and new tests

Reviewers: paulfitz, georgegevoian

Reviewed By: georgegevoian

Differential Revision: https://phab.getgrist.com/D3547

app/client/ui/CustomSectionConfig.ts

@@ -4,11 +4,12 @@ import * as kf from 'app/client/lib/koForm';
 import {ColumnToMapImpl} from 'app/client/models/ColumnToMap';
 import {ColumnRec, ViewSectionRec} from 'app/client/models/DocModel';
 import {reportError} from 'app/client/models/errors';
-import {cssLabel, cssRow, cssSeparator, cssSubLabel, cssTextInput} from 'app/client/ui/RightPanel';
+import {cssLabel, cssRow, cssSeparator} from 'app/client/ui/RightPanelStyles';
 import {cssDragRow, cssFieldEntry, cssFieldLabel} from 'app/client/ui/VisibleFieldsConfig';
 import {basicButton, primaryButton, textButton} from 'app/client/ui2018/buttons';
-import {colors} from 'app/client/ui2018/cssVars';
+import {colors, vars} from 'app/client/ui2018/cssVars';
 import {cssDragger} from 'app/client/ui2018/draggableList';
+import {textInput} from 'app/client/ui2018/editableLabel';
 import {IconName} from 'app/client/ui2018/IconList';
 import {icon} from 'app/client/ui2018/icons';
 import {cssLink} from 'app/client/ui2018/links';
@@ -534,6 +535,13 @@ const cssRemoveIcon = styled(icon, `
   }
 `);
 
+// Additional text in label (greyed out)
+const cssSubLabel = styled('span', `
+  text-transform: none;
+  font-size: ${vars.xsmallFontSize};
+  color: ${colors.slate};
+`);
+
 const cssAddMapping = styled('div', `
   display: flex;
   cursor: pointer;
@@ -548,3 +556,13 @@ const cssAddMapping = styled('div', `
     --icon-color: ${colors.darkGreen};
   }
 `);
+
+const cssTextInput = styled(textInput, `
+  flex: 1 0 auto;
+
+  &:disabled {
+    color: ${colors.slate};
+    background-color: ${colors.lightGrey};
+    pointer-events: none;
+  }
+`);

app/client/ui/FieldConfig.ts

@@ -2,7 +2,7 @@ import {CursorPos} from 'app/client/components/Cursor';
 import {GristDoc} from 'app/client/components/GristDoc';
 import {ColumnRec} from 'app/client/models/entities/ColumnRec';
 import {buildHighlightedCode, cssCodeBlock} from 'app/client/ui/CodeHighlight';
-import {cssBlockedCursor, cssEmptySeparator, cssLabel, cssRow} from 'app/client/ui/RightPanel';
+import {cssBlockedCursor, cssLabel, cssRow} from 'app/client/ui/RightPanelStyles';
 import {buildFormulaTriggers} from 'app/client/ui/TriggerFormulas';
 import {textButton} from 'app/client/ui2018/buttons';
 import {colors, testId} from 'app/client/ui2018/cssVars';
@@ -382,3 +382,7 @@ const cssColTieConnectors = styled('div', `
   border-left: none;
   z-index: -1;
 `);
+
+const cssEmptySeparator = styled('div', `
+  margin-top: 16px;
+`);

app/client/ui/GridOptions.ts

@@ -1,6 +1,6 @@
 import { ViewSectionRec } from "app/client/models/DocModel";
 import { KoSaveableObservable, setSaveValue } from "app/client/models/modelUtil";
-import { cssLabel, cssRow } from "app/client/ui/RightPanel";
+import { cssLabel, cssRow } from "app/client/ui/RightPanelStyles";
 import { squareCheckbox } from "app/client/ui2018/checkbox";
 import { testId } from "app/client/ui2018/cssVars";
 import { Computed, Disposable, dom, IDisposableOwner, styled } from "grainjs";

app/client/ui/RightPanel.ts

@@ -335,6 +335,17 @@ export class RightPanel extends Disposable {
         return dom.create(GridOptions, activeSection);
       }),
 
+      domComputed((use) => {
+        if (use(this._pageWidgetType) !== 'record') { return null; }
+        return [
+          cssSeparator(),
+          cssLabel('ROW STYLE'),
+          domAsync(imports.loadViewPane().then(ViewPane =>
+            dom.create(ViewPane.ConditionalStyle, "Row Style", activeSection, this._gristDoc)
+          ))
+        ];
+      }),
+
       dom.maybe((use) => use(this._pageWidgetType) === 'chart', () => [
         cssLabel('CHART TYPE'),
         vct._buildChartConfigDom(),
@@ -572,20 +583,14 @@ const cssBottomText = styled('span', `
   padding: 4px 16px;
 `);
 
-export const cssLabel = styled('div', `
+const cssLabel = styled('div', `
   text-transform: uppercase;
   margin: 16px 16px 12px 16px;
   font-size: ${vars.xsmallFontSize};
 `);
 
-// Additional text in label (greyed out)
-export const cssSubLabel = styled('span', `
-  text-transform: none;
-  font-size: ${vars.xsmallFontSize};
-  color: ${colors.slate};
-`);
 
-export const cssRow = styled('div', `
+const cssRow = styled('div', `
   display: flex;
   margin: 8px 16px;
   align-items: center;
@@ -597,13 +602,8 @@ export const cssRow = styled('div', `
   }
 `);
 
-export const cssBlockedCursor = styled('span', `
-  &, & * {
-    cursor: not-allowed !important;
-  }
-`);
 
-export const cssButtonRow = styled(cssRow, `
+const cssButtonRow = styled(cssRow, `
   margin-left: 0;
   margin-right: 0;
   & > button {
@@ -611,7 +611,7 @@ export const cssButtonRow = styled(cssRow, `
   }
 `);
 
-export const cssIcon = styled(icon, `
+const cssIcon = styled(icon, `
   flex: 0 0 auto;
   --icon-color: ${colors.slate};
 `);
@@ -669,7 +669,7 @@ const cssHoverIcon = styled(icon, `
   background-color: vars(--icon-color);
 `);
 
-export const cssSubTabContainer = styled('div', `
+const cssSubTabContainer = styled('div', `
   height: 48px;
   flex: none;
   display: flex;
@@ -677,7 +677,7 @@ export const cssSubTabContainer = styled('div', `
   justify-content: space-between;
 `);
 
-export const cssSubTab = styled('div', `
+const cssSubTab = styled('div', `
   color: ${colors.lightGreen};
   flex: auto;
   height: 100%;
@@ -709,15 +709,11 @@ const cssTabContents = styled('div', `
   overflow: auto;
 `);
 
-export const cssSeparator = styled('div', `
+const cssSeparator = styled('div', `
   border-bottom: 1px solid ${colors.mediumGrey};
   margin-top: 16px;
 `);
 
-export const cssEmptySeparator = styled('div', `
-  margin-top: 16px;
-`);
-
 const cssConfigContainer = styled('div', `
   overflow: auto;
   --color-list-item: none;
@@ -765,7 +761,7 @@ const cssListItem = styled('li', `
   padding: 4px 8px;
 `);
 
-export const cssTextInput = styled(textInput, `
+const cssTextInput = styled(textInput, `
   flex: 1 0 auto;
 
   &:disabled {

app/client/ui/RightPanelStyles.ts

@@ -0,0 +1,45 @@
+import {colors, vars} from 'app/client/ui2018/cssVars';
+import {icon} from 'app/client/ui2018/icons';
+import {styled} from 'grainjs';
+
+export const cssIcon = styled(icon, `
+  flex: 0 0 auto;
+  --icon-color: ${colors.slate};
+`);
+
+export const cssLabel = styled('div', `
+  text-transform: uppercase;
+  margin: 16px 16px 12px 16px;
+  font-size: ${vars.xsmallFontSize};
+`);
+
+export const cssRow = styled('div', `
+  display: flex;
+  margin: 8px 16px;
+  align-items: center;
+  &-top-space {
+    margin-top: 24px;
+  }
+  &-disabled {
+    color: ${colors.slate};
+  }
+`);
+
+export const cssBlockedCursor = styled('span', `
+  &, & * {
+    cursor: not-allowed !important;
+  }
+`);
+
+export const cssButtonRow = styled(cssRow, `
+  margin-left: 0;
+  margin-right: 0;
+  & > button {
+    margin-left: 16px;
+  }
+`);
+
+export const cssSeparator = styled('div', `
+  border-bottom: 1px solid ${colors.mediumGrey};
+  margin-top: 16px;
+`);

app/client/ui/TriggerFormulas.ts

@@ -1,7 +1,7 @@
 import type {ColumnRec} from 'app/client/models/entities/ColumnRec';
 import type {TableRec} from 'app/client/models/entities/TableRec';
 import {reportError} from 'app/client/models/errors';
-import {cssRow} from 'app/client/ui/RightPanel';
+import {cssRow} from 'app/client/ui/RightPanelStyles';
 import {shadowScroll} from 'app/client/ui/shadowScroll';
 import {basicButton, primaryButton} from "app/client/ui2018/buttons";
 import {labeledSquareCheckbox} from "app/client/ui2018/checkbox";