database & connection color overrides

packages/web/src/appobj/AppObjectListItem.svelte

@@ -56,7 +56,7 @@
 
   {#if (isExpanded || isExpandedBySearch) && subItemsComponent}
     <div class="subitems">
-      <svelte:component this={subItemsComponent} {data} {filter} />
+      <svelte:component this={subItemsComponent} {data} {filter} {passProps} />
     </div>
   {/if}
 {/if}

packages/web/src/appobj/DatabaseAppObject.svelte

@@ -171,8 +171,10 @@
   import { findEngineDriver } from 'dbgate-tools';
   import InputTextModal from '../modals/InputTextModal.svelte';
   import { getDatabaseInfo } from '../utility/metadataLoaders';
-import { openJsonDocument } from '../tabs/JsonTab.svelte';
+  import { openJsonDocument } from '../tabs/JsonTab.svelte';
+
   export let data;
+  export let passProps;
 
   function createMenu() {
     return getDatabaseMenuItems(data.connection, data.name, $extensions, $currentDatabase);
@@ -184,6 +186,12 @@ import { openJsonDocument } from '../tabs/JsonTab.svelte';
   {data}
   title={data.name}
   icon="img database"
+  colorMark={passProps?.connectionColorFactory(
+    { conid: _.get(data.connection, '_id'), database: data.name },
+    null,
+    null,
+    false
+  )}
   isBold={_.get($currentDatabase, 'connection._id') == _.get(data.connection, '_id') &&
     _.get($currentDatabase, 'name') == data.name}
   on:click={() => ($currentDatabase = data)}

packages/web/src/appobj/SubDatabaseList.svelte

@@ -7,6 +7,7 @@
 
   export let filter;
   export let data;
+  export let passProps;
 
   $: databases = useDatabaseList({ conid: data._id });
 </script>
@@ -17,4 +18,5 @@
     'name'
   ).map(db => ({ ...db, connection: data }))}
   module={databaseAppObject}
+  {passProps}
 />

packages/web/src/modals/ChooseConnectionColorModal.svelte

@@ -6,22 +6,33 @@
 
   export let conid;
   export let database;
+  export let header;
 
-  const initialColor = useConnectionColor({ conid, database }, null);
+  const initialColor = useConnectionColor({ conid, database }, null, null, false, false);
 
   $: value = $initialColor;
 </script>
 
 <ModalBase {...$$restProps}>
+  <svelte:fragment slot="header">{header}</svelte:fragment>
+
   <ColorSelector
     {value}
     on:change={e => {
       value = e.detail;
 
-      axiosInstance.post('connections/update', {
-        _id: conid,
-        values: { connectionColor: e.detail },
-      });
+      if (database) {
+        axiosInstance.post('connections/update-database', {
+          conid,
+          database,
+          values: { databaseColor: e.detail },
+        });
+      } else {
+        axiosInstance.post('connections/update', {
+          _id: conid,
+          values: { connectionColor: e.detail },
+        });
+      }
     }}
   />
 </ModalBase>

packages/web/src/plugins/ThemeDark.svelte

@@ -56,6 +56,7 @@
     --theme-bg-statusbar-inv: #0050b3;
     --theme-bg-statusbar-inv-hover: #096dd9;
     --theme-bg-statusbar-inv-font: #222;
+    --theme-bg-statusbar-inv-bg: #ccc;
     --theme-bg-modalheader: rgb(43, 60, 61);
 
     --theme-bg-button-inv: #004488;

packages/web/src/plugins/ThemeLight.svelte

@@ -50,6 +50,7 @@
     --theme-bg-statusbar-inv: #0050b3;
     --theme-bg-statusbar-inv-hover: #096dd9;
     --theme-bg-statusbar-inv-font: #222;
+    --theme-bg-statusbar-inv-bg: #ccc;
     --theme-bg-modalheader: #eff;
 
     --theme-bg-button-inv: #337ab7;

packages/web/src/utility/useConnectionColor.ts

@@ -3,35 +3,76 @@ import { derived } from 'svelte/store';
 import { currentThemeDefinition } from '../stores';
 import { useConnectionList } from '../utility/metadataLoaders';
 
-export function getConnectionColor(connections, dbid, themeType, colorIndex, backgroundStyle = false) {
+export function getConnectionColor(
+  connections,
+  dbid,
+  themeType,
+  colorIndex,
+  backgroundStyle = false,
+  useConnectionFallback = true
+) {
   if (!dbid || !connections) return undefined;
   const current = connections.find(x => x._id == dbid.conid);
-  if (!current?.connectionColor) return undefined;
+  const { database } = dbid;
+  let colorName = useConnectionFallback || !database ? current?.connectionColor : null;
+  if (
+    database &&
+    current.databaseConfig &&
+    current.databaseConfig[database] &&
+    current.databaseConfig[database].databaseColor
+  ) {
+    colorName = current.databaseConfig[database].databaseColor;
+  }
+  if (!colorName) return undefined;
   const palettes = themeType == 'dark' ? presetDarkPalettes : presetPalettes;
-  if (colorIndex == null) return current?.connectionColor;
-  const color = palettes[current?.connectionColor][colorIndex];
+  if (colorIndex == null) return colorName;
+  const color = palettes[colorName][colorIndex];
   if (backgroundStyle) return `background:${color}`;
   return color;
 }
 
-export function useConnectionColor(dbid, colorIndex, themeType = null, backgroundStyle = false) {
+export function useConnectionColor(
+  dbid,
+  colorIndex,
+  themeType = null,
+  backgroundStyle = false,
+  useConnectionFallback = true
+) {
   const connections = useConnectionList();
   return derived([connections, currentThemeDefinition], ([$connections, $themeDef]) =>
-    getConnectionColor($connections, dbid, themeType ?? $themeDef?.themeType, colorIndex, backgroundStyle)
+    getConnectionColor(
+      $connections,
+      dbid,
+      themeType ?? $themeDef?.themeType,
+      colorIndex,
+      backgroundStyle,
+      useConnectionFallback
+    )
   );
 }
 
-export function useConnectionColorFactory(colorIndex, themeType = null, backgroundStyle = false) {
+export function useConnectionColorFactory(
+  colorIndex,
+  themeType = null,
+  backgroundStyle = false,
+  useConnectionFallback = true
+) {
   const connections = useConnectionList();
   return derived(
     [connections, currentThemeDefinition],
-    ([$connections, $themeDef]) => (dbid, colorIndexOverride = null) =>
+    ([$connections, $themeDef]) => (
+      dbid,
+      colorIndexOverride = null,
+      backgroundStyleOverride = null,
+      useConnectionFallbackOverride = null
+    ) =>
       getConnectionColor(
         $connections,
         dbid,
         themeType ?? $themeDef?.themeType,
-        colorIndexOverride || colorIndex,
-        backgroundStyle
+        colorIndexOverride ?? colorIndex,
+        backgroundStyleOverride ?? backgroundStyle,
+        useConnectionFallbackOverride ?? useConnectionFallback
       )
   );
 }

packages/web/src/widgets/StatusBar.svelte

@@ -48,13 +48,13 @@
   $: dbid = connection ? { conid: connection._id, database: databaseName } : null;
   $: status = useDatabaseStatus(dbid || {});
   $: serverVersion = useDatabaseServerVersion(dbid || {});
-  const connections = useConnectionList();
 
   $: contextItems = $statusBarTabInfo[$activeTabId] as any[];
   $: connectionLabel = getConnectionLabel(connection, { allowExplicitDatabase: false });
 
   $: connectionBackground = useConnectionColor(dbid, 3, 'dark', true);
-  $: connectionButtonBackground = useConnectionColor(dbid, 6, 'dark', true);
+  $: connectionButtonBackground = useConnectionColor(dbid ? { conid: dbid.conid } : null, 6, 'dark', true);
+  $: databaseButtonBackground = useConnectionColor(dbid, 6, 'dark', true, false);
 
   let timerValue = 1;
 
@@ -76,23 +76,38 @@
         <FontIcon icon="icon database" padRight />
         {databaseName}
       </div>
+      {#if dbid}
+        <div
+          class="item clickable"
+          title="Database color. Overrides connection color"
+          on:click={() => {
+            showModal(ChooseConnectionColorModal, { ...dbid, header: 'Choose database color' });
+          }}
+        >
+          <div style={$databaseButtonBackground} class="colorbox">
+            <FontIcon icon="icon palette" />
+          </div>
+        </div>
+      {/if}
     {/if}
-    {#if connectionLabel && dbid}
+    {#if connectionLabel}
       <div class="item">
         <FontIcon icon="icon server" padRight />
         {connectionLabel}
       </div>
-      <div
-        class="item clickable"
-        title="Connection color. Can be overriden by dataabse color"
-        on:click={() => {
-          showModal(ChooseConnectionColorModal, { conid: dbid.conid });
-        }}
-      >
-        <div style={$connectionButtonBackground} class="colorbox">
-          <FontIcon icon="icon palette" />
+      {#if dbid}
+        <div
+          class="item clickable"
+          title="Connection color. Can be overriden by database color"
+          on:click={() => {
+            showModal(ChooseConnectionColorModal, { conid: dbid.conid, header: 'Choose connection color' });
+          }}
+        >
+          <div style={$connectionButtonBackground} class="colorbox">
+            <FontIcon icon="icon palette" />
+          </div>
         </div>
-      </div>
+      {/if}
     {/if}
     {#if connection && connection.user}
       <div class="item">
@@ -192,5 +207,6 @@
     padding: 0px 3px;
     border-radius: 2px;
     color: var(--theme-bg-statusbar-inv-font);
+    background: var(--theme-bg-statusbar-inv-bg);
   }
 </style>