Data view coloring (every second row) #1014

packages/web/src/datagrid/DataGridCore.svelte

@@ -425,12 +425,11 @@
   import { createGeoJsonFromSelection, selectionCouldBeShownOnMap } from '../elements/SelectionMapView.svelte';
   import ErrorMessageModal from '../modals/ErrorMessageModal.svelte';
   import EditCellDataModal from '../modals/EditCellDataModal.svelte';
-  import { getDatabaseInfo, useDatabaseStatus } from '../utility/metadataLoaders';
+  import { getDatabaseInfo, useDatabaseStatus, useSettings } from '../utility/metadataLoaders';
   import { showSnackbarSuccess } from '../utility/snackbar';
   import { openJsonLinesData } from '../utility/openJsonLinesData';
   import contextMenuActivator from '../utility/contextMenuActivator';
   import InputTextModal from '../modals/InputTextModal.svelte';
-  import hasPermission from '../utility/hasPermission';
 
   export let onLoadNextData = undefined;
   export let grider = undefined;
@@ -517,6 +516,10 @@
     }
   }
 
+  const settingsValue = useSettings();
+
+  $: gridColoringMode = $settingsValue?.['dataGrid.coloringMode'];
+
   export function refresh() {
     if (onCustomGridRefresh) onCustomGridRefresh();
     else display.reload();
@@ -2018,6 +2021,7 @@
             {frameSelection}
             onSetFormView={formViewAvailable && display?.baseTable?.primaryKey ? handleSetFormView : null}
             {dataEditorTypesBehaviourOverride}
+            {gridColoringMode}
           />
         {/each}
       </tbody>

packages/web/src/datagrid/DataGridRow.svelte

@@ -26,6 +26,7 @@
   export let conid;
   export let database;
   export let driver;
+  export let gridColoringMode = '36';
 
   export let dataEditorTypesBehaviourOverride = null;
 
@@ -52,7 +53,7 @@
   }
 </script>
 
-<tr style={`height: ${rowHeight}px`}>
+<tr style={`height: ${rowHeight}px`} class={`coloring-mode-${gridColoringMode}`}>
   <RowHeaderCell {rowIndex} onShowForm={onSetFormView ? () => onSetFormView(rowData, null) : null} />
   {#each visibleRealColumns as col (col.uniqueName)}
     {#if inplaceEditorState.cell && rowIndex == inplaceEditorState.cell[0] && col.colIndex == inplaceEditorState.cell[1]}
@@ -66,7 +67,7 @@
         onSetValue={value => grider.setCellValue(rowIndex, col.uniqueName, value)}
         {driver}
         {dataEditorTypesBehaviourOverride}
-        />
+      />
     {:else}
       <DataGridCell
         {rowIndex}
@@ -106,10 +107,18 @@
     background-color: var(--theme-bg-0);
   }
 
-  tr:nth-child(6n + 3) {
+  tr.coloring-mode-36:nth-child(6n + 3) {
     background-color: var(--theme-bg-1);
   }
-  tr:nth-child(6n + 6) {
+  tr.coloring-mode-36:nth-child(6n + 6) {
+    background-color: var(--theme-bg-alt);
+  }
+
+  tr.coloring-mode-2-primary:nth-child(2n + 1) {
+    background-color: var(--theme-bg-1);
+  }
+
+  tr.coloring-mode-2-secondary:nth-child(2n + 1) {
     background-color: var(--theme-bg-alt);
   }
 </style>

packages/web/src/formview/FormView.svelte

@@ -196,6 +196,7 @@
   import keycodes from '../utility/keycodes';
   import resizeObserver from '../utility/resizeObserver';
   import openReferenceForm from './openReferenceForm';
+  import { useSettings } from '../utility/metadataLoaders';
 
   export let conid;
   export let database;
@@ -236,6 +237,9 @@
 
   $: rowCountInfo = getRowCountInfo(allRowCount, display);
 
+  const settingsValue = useSettings();
+  $: gridColoringMode = $settingsValue?.['dataGrid.coloringMode'];
+
   function getRowCountInfo(allRowCount) {
     if (rowCountNotAvailable) {
       return `Row: ${((display.config.formViewRecordNumber || 0) + 1).toLocaleString()} / ???`;
@@ -620,7 +624,7 @@
     {#each columnChunks as chunk, chunkIndex}
       <table on:mousedown={handleTableMouseDown}>
         {#each chunk as col, rowIndex}
-          <tr>
+          <tr class={`coloring-mode-${gridColoringMode}`}>
             <td
               class="header-cell"
               data-row={rowIndex}
@@ -746,10 +750,18 @@
   tr {
     background-color: var(--theme-bg-0);
   }
-  tr:nth-child(6n + 3) {
+  tr.coloring-mode-36:nth-child(6n + 3) {
     background-color: var(--theme-bg-1);
   }
-  tr:nth-child(6n + 6) {
+  tr.coloring-mode-36:nth-child(6n + 6) {
+    background-color: var(--theme-bg-alt);
+  }
+
+  tr.coloring-mode-2-primary:nth-child(2n + 1) {
+    background-color: var(--theme-bg-1);
+  }
+
+  tr.coloring-mode-2-secondary:nth-child(2n + 1) {
     background-color: var(--theme-bg-alt);
   }
 

packages/web/src/settings/SettingsModal.svelte

@@ -146,6 +146,19 @@ ORDER BY
             defaultValue="50"
           />
 
+          <FormSelectField
+            label="Row coloring mode"
+            name="dataGrid.coloringMode"
+            isNative
+            defaultValue="36"
+            options={[
+              { value: '36', label: 'Every 3rd and 6th row' },
+              { value: '2-primary', label: 'Every 2-nd row, primary color' },
+              { value: '2-secondary', label: 'Every 2-nd row, secondary color' },
+              { value: 'none', label: 'None' },
+            ]}
+          />
+
           <div class="heading">SQL editor</div>
 
           <div class="flex">