SYNC: Merge pull request #47 from dbgate/feature/color-refactor-2

packages/web/package.json

@@ -17,7 +17,6 @@
     "public"
   ],
   "devDependencies": {
-    "@ant-design/colors": "^5.0.0",
     "@energiency/chartjs-plugin-piechart-outlabels": "^1.3.4",
     "@mdi/font": "^7.1.96",
     "@rollup/plugin-commonjs": "^20.0.0",

packages/web/src/designer/Designer.svelte

@@ -453,6 +453,7 @@
 
   const handleChangeTableColor = table => {
     showModal(ChooseColorModal, {
+      header: _t('designer.chooseTableColor', { defaultMessage: 'Choose table color' }),
       onChange: color => {
         callChange(current => {
           return {
@@ -848,17 +849,26 @@
           text: _t('designer.columnProperties', { defaultMessage: 'Column properties' }),
           submenu: [
             {
-              text: _t('designer.nullabilityYesNo', { defaultMessage: 'Nullability: {show}', values: { show: value?.style?.showNullability ? 'YES' : 'NO' } }),
+              text: _t('designer.nullabilityYesNo', {
+                defaultMessage: 'Nullability: {show}',
+                values: { show: value?.style?.showNullability ? 'YES' : 'NO' },
+              }),
               onClick: changeStyleFunc('showNullability', !value?.style?.showNullability),
             },
             {
-              text: _t('designer.dataTypeYesNo', { defaultMessage: 'Data type: {show}', values: { show: value?.style?.showDataType ? 'YES' : 'NO' } }),
+              text: _t('designer.dataTypeYesNo', {
+                defaultMessage: 'Data type: {show}',
+                values: { show: value?.style?.showDataType ? 'YES' : 'NO' },
+              }),
               onClick: changeStyleFunc('showDataType', !value?.style?.showDataType),
             },
           ],
         },
         isProApp() && {
-          text: _t('designer.columns', { defaultMessage: 'Columns - { filterColumns }', values: { filterColumns: _.startCase(value?.style?.filterColumns || 'all') } }),
+          text: _t('designer.columns', {
+            defaultMessage: 'Columns - { filterColumns }',
+            values: { filterColumns: _.startCase(value?.style?.filterColumns || 'all') },
+          }),
           submenu: [
             {
               text: _t('designer.all', { defaultMessage: 'All' }),
@@ -883,7 +893,10 @@
           ],
         },
         {
-          text: _t('designer.zoom', { defaultMessage: 'Zoom - {zoom}%', values: { zoom: ((value?.style?.zoomKoef || 1) * 100) } }),
+          text: _t('designer.zoom', {
+            defaultMessage: 'Zoom - {zoom}%',
+            values: { zoom: (value?.style?.zoomKoef || 1) * 100 },
+          }),
           submenu: DIAGRAM_ZOOMS.map(koef => ({
             text: `${koef * 100} %`,
             onClick: changeStyleFunc('zoomKoef', koef.toString()),
@@ -1012,11 +1025,16 @@
   use:dragScroll={handleDragScroll}
 >
   {#if !(tables?.length > 0)}
-    <div class="empty">{_t('designer.dragDropTables', { defaultMessage: 'Drag & drop tables or views from left panel here' })}</div>
+    <div class="empty">
+      {_t('designer.dragDropTables', { defaultMessage: 'Drag & drop tables or views from left panel here' })}
+    </div>
 
     {#if allowAddTablesButton}
       <div class="addAllTables">
-        <FormStyledButton value={_t('designer.addAllTables', { defaultMessage: 'Add all tables' })} on:click={handleAddAllTables} />
+        <FormStyledButton
+          value={_t('designer.addAllTables', { defaultMessage: 'Add all tables' })}
+          on:click={handleAddAllTables}
+        />
       </div>
     {/if}
   {/if}
@@ -1115,7 +1133,10 @@
     <div class="panel">
       <DragColumnMemory {settings} {sourceDragColumn$} {targetDragColumn$} />
       <div class="searchbox">
-        <SearchInput bind:value={columnFilter} placeholder={_t('designer.filterColumns', { defaultMessage: 'Filter columns' })} />
+        <SearchInput
+          bind:value={columnFilter}
+          placeholder={_t('designer.filterColumns', { defaultMessage: 'Filter columns' })}
+        />
         <CloseSearchButton bind:filter={columnFilter} />
       </div>
     </div>

packages/web/src/designer/DesignerTable.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-  import { presetDarkPalettes, presetPalettes } from '@ant-design/colors';
   import { filterName, stringFilterBehaviour } from 'dbgate-tools';
 
   import { tick } from 'svelte';
@@ -10,7 +9,6 @@
   import FontIcon from '../icons/FontIcon.svelte';
   import InputTextModal from '../modals/InputTextModal.svelte';
   import { showModal } from '../modals/modalTools';
-  import { currentThemeDefinition } from '../plugins/themes';
   import VirtualForeignKeyEditorModal from '../tableeditor/VirtualForeignKeyEditorModal.svelte';
   import { isCtrlOrCommandKey } from '../utility/common';
   import contextMenu from '../utility/contextMenu';
@@ -18,6 +16,7 @@
   import ColumnLine from './ColumnLine.svelte';
   import DomTableRef from './DomTableRef';
   import { _t } from '../translations';
+  import { getNormalizedUserColorName } from '../utility/userColors';
 
   export let conid;
   export let database;
@@ -169,12 +168,9 @@
     }
   }
 
-  function getTableColorStyle(themeDef, table, colorIndex = 3) {
+  function getTableColorStyle(table) {
     if (!table?.tableColor) return null;
-    const palettes = themeDef?.themeType == 'dark' ? presetDarkPalettes : presetPalettes;
-    const palette = palettes[table?.tableColor];
-    if (!palette) return null;
-    return `background: ${palette[colorIndex]}`;
+    return `background: var(--theme-usercolor-background-${getNormalizedUserColorName(table?.tableColor)})`;
   }
 
   export function getDomTable() {
@@ -215,7 +211,10 @@
       { divider: true },
       settings?.allowTableAlias &&
         !isMultipleTableSelection && [
-          { text: _t('designerTable.setTableAlias', { defaultMessage: 'Set table alias' }), onClick: handleSetTableAlias },
+          {
+            text: _t('designerTable.setTableAlias', { defaultMessage: 'Set table alias' }),
+            onClick: handleSetTableAlias,
+          },
           alias && {
             text: _t('designerTable.removeTableAlias', { defaultMessage: 'Remove table alias' }),
             onClick: () =>
@@ -226,8 +225,14 @@
           },
         ],
       settings?.allowAddAllReferences &&
-        !isMultipleTableSelection && { text: _t('designerTable.addReferences', { defaultMessage: 'Add references' }), onClick: () => onAddAllReferences(table) },
-      settings?.allowChangeColor && { text: _t('designerTable.changeColor', { defaultMessage: 'Change color' }), onClick: () => onChangeTableColor(table) },
+        !isMultipleTableSelection && {
+          text: _t('designerTable.addReferences', { defaultMessage: 'Add references' }),
+          onClick: () => onAddAllReferences(table),
+        },
+      settings?.allowChangeColor && {
+        text: _t('designerTable.changeColor', { defaultMessage: 'Change color' }),
+        onClick: () => onChangeTableColor(table),
+      },
       settings?.allowDefineVirtualReferences &&
         !isMultipleTableSelection && {
           text: _t('designerTable.defineVirtualForeignKey', { defaultMessage: 'Define virtual foreign key' }),
@@ -267,7 +272,7 @@
     class:isCollection={objectTypeField == 'collections'}
     use:moveDrag={settings?.canSelectColumns ? [handleMoveStart, handleMove, handleMoveEnd] : null}
     use:contextMenu={settings?.canSelectColumns ? createMenu : '__no_menu'}
-    style={getTableColorStyle($currentThemeDefinition, table)}
+    style={getTableColorStyle(table)}
     on:click={settings?.onClickTableHeader ? () => settings?.onClickTableHeader(designerId) : null}
   >
     <div>

packages/web/src/forms/ColorSelector.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
   import _ from 'lodash';
-  import { presetPrimaryColors } from '@ant-design/colors';
   import FontIcon from '../icons/FontIcon.svelte';
   import { createEventDispatcher } from 'svelte';
+  import { USER_COLOR_NAMES } from '../utility/userColors';
 
   export let value;
   export let disabled = false;
@@ -21,7 +21,7 @@
   >
     <FontIcon icon={value ? 'icon palette' : 'icon no-color'} />
   </div>
-  {#each _.keys(presetPrimaryColors) as color}
+  {#each USER_COLOR_NAMES as color}
     <div
       style={`background: var(--theme-usercolor-background-${color})`}
       class="item"

packages/web/src/forms/FormColorField.svelte

@@ -3,8 +3,8 @@
 
   import FormSelectField from './FormSelectField.svelte';
   import ColorSelector from './ColorSelector.svelte';
-  import { presetPrimaryColors } from '@ant-design/colors';
   import { getFormContext } from './FormProviderCore.svelte';
+  import { USER_COLOR_NAMES } from '../utility/userColors';
 
   export let emptyLabel;
   export let useSelector = false;
@@ -37,7 +37,7 @@
     {name}
     options={[
       { value: '', label: emptyLabel },
-      ..._.keys(presetPrimaryColors).map(color => ({ value: color, label: _.startCase(color) })),
+      ...USER_COLOR_NAMES.map(color => ({ value: color, label: _.startCase(color) })),
     ]}
   />
 {/if}

packages/web/src/modals/ChooseColorModal.svelte

@@ -4,7 +4,6 @@
 
   export let color;
   export let header;
-  export let text;
   export let onChange;
 
   $: value = color;
@@ -13,10 +12,6 @@
 <ModalBase {...$$restProps}>
   <svelte:fragment slot="header">{header}</svelte:fragment>
 
-  <div class="m-2">
-    {text}
-  </div>
-
   <ColorSelector
     {value}
     on:change={e => {

packages/web/src/modals/ChooseConnectionColorModal.svelte

@@ -9,7 +9,7 @@
   export let header;
   export let text;
 
-  const initialColor = useConnectionColor({ conid, database }, 'foreground', '', false);
+  const initialColor = useConnectionColor({ conid, database }, 'foreground', '@rawColorWithoutVariable', false);
 
   $: value = $initialColor;
 </script>

packages/web/src/plugins/themeDarkColors.ts

@@ -252,46 +252,37 @@ export const themeDarkColors = {
   '--theme-icon-yellow': 'var(--tw-color-yellow-400)',
   '--theme-icon-magenta': 'var(--tw-color-pink-500)',
 
-  '--theme-usercolor-foreground-red': 'var(--tw-color-red-600)',
-  '--theme-usercolor-foreground-volcano': '#d4380d',
-  '--theme-usercolor-foreground-gold': 'var(--tw-color-amber-600)',
+  '--theme-usercolor-foreground-red': 'var(--tw-color-rose-600)',
   '--theme-usercolor-foreground-orange': 'var(--tw-color-orange-600)',
   '--theme-usercolor-foreground-yellow': 'var(--tw-color-yellow-600)',
   '--theme-usercolor-foreground-lime': 'var(--tw-color-lime-600)',
-  '--theme-usercolor-foreground-green': 'var(--tw-color-green-600)',
-  '--theme-usercolor-foreground-cyan': 'var(--tw-color-teal-600)',
+  '--theme-usercolor-foreground-green': 'var(--tw-color-emerald-600)',
+  '--theme-usercolor-foreground-cyan': 'var(--tw-color-cyan-600)',
   '--theme-usercolor-foreground-blue': 'var(--tw-color-sky-600)',
-  '--theme-usercolor-foreground-geekblue': 'var(--tw-color-indigo-600)',
-  '--theme-usercolor-foreground-purple': 'var(--tw-color-purple-600)',
-  '--theme-usercolor-foreground-magenta': 'var(--tw-color-pink-600)',
+  '--theme-usercolor-foreground-purple': 'var(--tw-color-violet-600)',
+  '--theme-usercolor-foreground-magenta': 'var(--tw-color-fuchsia-600)',
   '--theme-usercolor-foreground-grey': 'var(--tw-color-gray-600)',
 
-  '--theme-usercolor-background-red': 'var(--tw-color-red-800)',
-  '--theme-usercolor-background-volcano': '#871400',
-  '--theme-usercolor-background-gold': 'var(--tw-color-amber-800)',
+  '--theme-usercolor-background-red': 'var(--tw-color-rose-800)',
   '--theme-usercolor-background-orange': 'var(--tw-color-orange-800)',
   '--theme-usercolor-background-yellow': 'var(--tw-color-yellow-800)',
   '--theme-usercolor-background-lime': 'var(--tw-color-lime-800)',
-  '--theme-usercolor-background-green': 'var(--tw-color-green-800)',
-  '--theme-usercolor-background-cyan': 'var(--tw-color-teal-800)',
+  '--theme-usercolor-background-green': 'var(--tw-color-emerald-800)',
+  '--theme-usercolor-background-cyan': 'var(--tw-color-cyan-800)',
   '--theme-usercolor-background-blue': 'var(--tw-color-sky-800)',
-  '--theme-usercolor-background-geekblue': 'var(--tw-color-indigo-800)',
-  '--theme-usercolor-background-purple': 'var(--tw-color-purple-800)',
-  '--theme-usercolor-background-magenta': 'var(--tw-color-pink-800)',
+  '--theme-usercolor-background-purple': 'var(--tw-color-violet-800)',
+  '--theme-usercolor-background-magenta': 'var(--tw-color-fuchsia-800)',
   '--theme-usercolor-background-grey': 'var(--tw-color-gray-800)',
   
-  '--theme-usercolor-statusbar-red': 'var(--tw-color-red-700)',
-  '--theme-usercolor-statusbar-volcano': '#ad2102',
-  '--theme-usercolor-statusbar-gold': 'var(--tw-color-amber-700)',
+  '--theme-usercolor-statusbar-red': 'var(--tw-color-rose-700)',
   '--theme-usercolor-statusbar-orange': 'var(--tw-color-orange-700)',
   '--theme-usercolor-statusbar-yellow': 'var(--tw-color-yellow-700)',
   '--theme-usercolor-statusbar-lime': 'var(--tw-color-lime-700)',
-  '--theme-usercolor-statusbar-green': 'var(--tw-color-green-700)',
-  '--theme-usercolor-statusbar-cyan': 'var(--tw-color-teal-700)',
+  '--theme-usercolor-statusbar-green': 'var(--tw-color-emerald-700)',
+  '--theme-usercolor-statusbar-cyan': 'var(--tw-color-cyan-700)',
   '--theme-usercolor-statusbar-blue': 'var(--tw-color-sky-700)',
-  '--theme-usercolor-statusbar-geekblue': 'var(--tw-color-indigo-700)',
-  '--theme-usercolor-statusbar-purple': 'var(--tw-color-purple-700)',
-  '--theme-usercolor-statusbar-magenta': 'var(--tw-color-pink-700)',
+  '--theme-usercolor-statusbar-purple': 'var(--tw-color-violet-700)',
+  '--theme-usercolor-statusbar-magenta': 'var(--tw-color-fuchsia-700)',
   '--theme-usercolor-statusbar-grey': 'var(--tw-color-gray-700)',
 
   '--token-base': '#303030',

packages/web/src/plugins/themeLightColors.ts

@@ -251,46 +251,37 @@ export const themeLightColors = {
   '--theme-icon-yellow': 'var(--tw-color-yellow-700)',
   '--theme-icon-magenta': 'var(--tw-color-pink-700)',
 
-  '--theme-usercolor-foreground-red': 'var(--tw-color-red-600)',
-  '--theme-usercolor-foreground-volcano': '#d4380d',
-  '--theme-usercolor-foreground-gold': 'var(--tw-color-amber-600)',
+  '--theme-usercolor-foreground-red': 'var(--tw-color-rose-600)',
   '--theme-usercolor-foreground-orange': 'var(--tw-color-orange-600)',
   '--theme-usercolor-foreground-yellow': 'var(--tw-color-yellow-600)',
   '--theme-usercolor-foreground-lime': 'var(--tw-color-lime-600)',
-  '--theme-usercolor-foreground-green': 'var(--tw-color-green-600)',
-  '--theme-usercolor-foreground-cyan': 'var(--tw-color-teal-600)',
+  '--theme-usercolor-foreground-green': 'var(--tw-color-emerald-600)',
+  '--theme-usercolor-foreground-cyan': 'var(--tw-color-cyan-600)',
   '--theme-usercolor-foreground-blue': 'var(--tw-color-sky-600)',
-  '--theme-usercolor-foreground-geekblue': 'var(--tw-color-indigo-600)',
-  '--theme-usercolor-foreground-purple': 'var(--tw-color-purple-600)',
-  '--theme-usercolor-foreground-magenta': 'var(--tw-color-pink-600)',
+  '--theme-usercolor-foreground-purple': 'var(--tw-color-violet-600)',
+  '--theme-usercolor-foreground-magenta': 'var(--tw-color-fuchsia-600)',
   '--theme-usercolor-foreground-grey': 'var(--tw-color-gray-600)',
 
-  '--theme-usercolor-background-red': 'var(--tw-color-red-200)',
-  '--theme-usercolor-background-volcano': '#ffbb96',
-  '--theme-usercolor-background-gold': 'var(--tw-color-amber-200)',
+  '--theme-usercolor-background-red': 'var(--tw-color-rose-200)',
   '--theme-usercolor-background-orange': 'var(--tw-color-orange-200)',
   '--theme-usercolor-background-yellow': 'var(--tw-color-yellow-200)',
   '--theme-usercolor-background-lime': 'var(--tw-color-lime-200)',
-  '--theme-usercolor-background-green': 'var(--tw-color-green-200)',
-  '--theme-usercolor-background-cyan': 'var(--tw-color-teal-200)',
+  '--theme-usercolor-background-green': 'var(--tw-color-emerald-200)',
+  '--theme-usercolor-background-cyan': 'var(--tw-color-cyan-200)',
   '--theme-usercolor-background-blue': 'var(--tw-color-sky-200)',
-  '--theme-usercolor-background-geekblue': 'var(--tw-color-indigo-200)',
-  '--theme-usercolor-background-purple': 'var(--tw-color-purple-200)',
-  '--theme-usercolor-background-magenta': 'var(--tw-color-pink-200)',
+  '--theme-usercolor-background-purple': 'var(--tw-color-violet-200)',
+  '--theme-usercolor-background-magenta': 'var(--tw-color-fuchsia-200)',
   '--theme-usercolor-background-grey': 'var(--tw-color-gray-200)',
 
-  '--theme-usercolor-statusbar-red': 'var(--tw-color-red-700)',
-  '--theme-usercolor-statusbar-volcano': '#ad2102',
-  '--theme-usercolor-statusbar-gold': 'var(--tw-color-amber-700)',
+  '--theme-usercolor-statusbar-red': 'var(--tw-color-rose-700)',
   '--theme-usercolor-statusbar-orange': 'var(--tw-color-orange-700)',
   '--theme-usercolor-statusbar-yellow': 'var(--tw-color-yellow-700)',
   '--theme-usercolor-statusbar-lime': 'var(--tw-color-lime-700)',
-  '--theme-usercolor-statusbar-green': 'var(--tw-color-green-700)',
-  '--theme-usercolor-statusbar-cyan': 'var(--tw-color-teal-700)',
+  '--theme-usercolor-statusbar-green': 'var(--tw-color-emerald-700)',
+  '--theme-usercolor-statusbar-cyan': 'var(--tw-color-cyan-700)',
   '--theme-usercolor-statusbar-blue': 'var(--tw-color-sky-700)',
-  '--theme-usercolor-statusbar-geekblue': 'var(--tw-color-indigo-700)',
-  '--theme-usercolor-statusbar-purple': 'var(--tw-color-purple-700)',
-  '--theme-usercolor-statusbar-magenta': 'var(--tw-color-pink-700)',
+  '--theme-usercolor-statusbar-purple': 'var(--tw-color-violet-700)',
+  '--theme-usercolor-statusbar-magenta': 'var(--tw-color-fuchsia-700)',
   '--theme-usercolor-statusbar-grey': 'var(--tw-color-gray-700)',
 
   '--token-base': 'white',

packages/web/src/utility/useConnectionColor.ts

@@ -1,6 +1,7 @@
 import { derived } from 'svelte/store';
 import { cloudConnectionsStore } from '../stores';
 import { useCloudContentList, useConnectionList } from '../utility/metadataLoaders';
+import { getNormalizedUserColorName } from './userColors';
 
 export function getConnectionColor(
   connections,
@@ -18,15 +19,23 @@ export function getConnectionColor(
   if (dbConfig?.connectionColor) {
     colorName = dbConfig.connectionColor;
   }
+  colorName = getNormalizedUserColorName(colorName);
   if (!colorName) return undefined;
+  if (cssStylePrefix === '@rawColorWithoutVariable') {
+    return colorName;
+  }
   return `${cssStylePrefix}var(--theme-usercolor-${userColorTarget}-${colorName})`;
 }
 
 export function getCloudContentColor(cloudContent, { cntid, folid }, cssStylePrefix = '') {
   if (!cntid || !folid || !cloudContent) return undefined;
   const current = cloudContent.flatMap(x => x.items).find(x => x.cntid == cntid && x.folid == folid);
-  const colorName = current?.contentAttributes?.connectionColor;
+  let colorName = current?.contentAttributes?.connectionColor;
+  colorName = getNormalizedUserColorName(colorName);
   if (!colorName) return undefined;
+  if (cssStylePrefix === '@rawColorWithoutVariable') {
+    return colorName;
+  }
   return `${cssStylePrefix}var(--theme-usercolor-foreground-${colorName})`;
 }
 

packages/web/src/utility/userColors.ts

@@ -0,0 +1,30 @@
+export const USER_COLOR_NAMES: string[] = [
+  'red',
+  'orange',
+  'yellow',
+  'lime',
+  'green',
+  'cyan',
+  'blue',
+  'purple',
+  'magenta',
+  'grey',
+];
+
+export function getNormalizedUserColorName(color: string): string | null {
+  if (!color) return null;
+  color = color.toLowerCase();
+  if (USER_COLOR_NAMES.includes(color)) {
+    return color;
+  }
+  if (color == 'volcano') {
+    return 'red';
+  }
+  if (color == 'geekblue') {
+    return 'blue';
+  }
+  if (color == 'gold') {
+    return 'yellow';
+  }
+  return null;
+}

yarn.lock

@@ -15,13 +15,6 @@
     "@jridgewell/gen-mapping" "^0.3.5"
     "@jridgewell/trace-mapping" "^0.3.24"
 
-"@ant-design/colors@^5.0.0":
-  version "5.1.1"
-  resolved "https://registry.yarnpkg.com/@ant-design/colors/-/colors-5.1.1.tgz#800b2186b1e27e66432e67d03ed96af3e21d8940"
-  integrity sha512-Txy4KpHrp3q4XZdfgOBqLl+lkQIc3tEvHXOimRN1giX1AEC7mGtyrO9p8iRGJ3FLuVMGa2gNEzQyghVymLttKQ==
-  dependencies:
-    "@ctrl/tinycolor" "^3.3.1"
-
 "@aws-crypto/sha256-browser@5.2.0":
   version "5.2.0"
   resolved "https://registry.yarnpkg.com/@aws-crypto/sha256-browser/-/sha256-browser-5.2.0.tgz#153895ef1dba6f9fce38af550e0ef58988eb649e"
@@ -1791,11 +1784,6 @@
   dependencies:
     "@clickhouse/client-common" "1.5.0"
 
-"@ctrl/tinycolor@^3.3.1":
-  version "3.6.1"
-  resolved "https://registry.yarnpkg.com/@ctrl/tinycolor/-/tinycolor-3.6.1.tgz#b6c75a56a1947cc916ea058772d666a2c8932f31"
-  integrity sha512-SITSV6aIXsuVNV3f3O0f2n/cgyEDWoSqtZMYiAmcsYHydcKrOz3gUxB/iXd/Qf08+IZX4KpgNbvUdMBmWz+kcA==
-
 "@discoveryjs/json-ext@^0.5.0":
   version "0.5.7"
   resolved "https://registry.yarnpkg.com/@discoveryjs/json-ext/-/json-ext-0.5.7.tgz#1d572bfbbe14b7704e0ba0f39b74815b84870d70"