connection color change from statusbar

packages/api/src/controllers/connections.js

@@ -162,6 +162,14 @@ module.exports = {
     return res;
   },
 
+  update_meta: 'post',
+  async update({ _id, values }) {
+    if (portalConnections) return;
+    const res = await this.datastore.update({ _id }, { $set: values });
+    socket.emitChanged('connection-list-changed');
+    return res;
+  },
+
   delete_meta: 'post',
   async delete(connection) {
     if (portalConnections) return;

packages/web/src/modals/ChooseConnectionColorModal.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+  import ColorSelector from '../forms/ColorSelector.svelte';
+  import axiosInstance from '../utility/axiosInstance';
+  import { useConnectionColor } from '../utility/useConnectionColor';
+  import ModalBase from './ModalBase.svelte';
+
+  export let conid;
+  export let database;
+
+  const initialColor = useConnectionColor({ conid, database }, null);
+
+  $: value = $initialColor;
+</script>
+
+<ModalBase {...$$restProps}>
+  <ColorSelector
+    {value}
+    on:change={e => {
+      value = e.detail;
+
+      axiosInstance.post('connections/update', {
+        _id: conid,
+        values: { connectionColor: e.detail },
+      });
+    }}
+  />
+</ModalBase>

packages/web/src/plugins/ThemeDark.svelte

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

packages/web/src/plugins/ThemeLight.svelte

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

packages/web/src/utility/useConnectionColor.ts

@@ -8,6 +8,7 @@ export function getConnectionColor(connections, dbid, themeType, colorIndex, bac
   const current = connections.find(x => x._id == dbid.conid);
   if (!current?.connectionColor) return undefined;
   const palettes = themeType == 'dark' ? presetDarkPalettes : presetPalettes;
+  if (colorIndex == null) return current?.connectionColor;
   const color = palettes[current?.connectionColor][colorIndex];
   if (backgroundStyle) return `background:${color}`;
   return color;

packages/web/src/widgets/StatusBar.svelte

@@ -31,6 +31,8 @@
   import _ from 'lodash';
   import { writable } from 'svelte/store';
   import moment from 'moment';
+  import { showModal } from '../modals/modalTools';
+  import ChooseConnectionColorModal from '../modals/ChooseConnectionColorModal.svelte';
 
   import FontIcon from '../icons/FontIcon.svelte';
 
@@ -52,6 +54,7 @@
   $: connectionLabel = getConnectionLabel(connection, { allowExplicitDatabase: false });
 
   $: connectionBackground = useConnectionColor(dbid, 3, 'dark', true);
+  $: connectionButtonBackground = useConnectionColor(dbid, 6, 'dark', true);
 
   let timerValue = 1;
 
@@ -74,11 +77,22 @@
         {databaseName}
       </div>
     {/if}
-    {#if connectionLabel}
+    {#if connectionLabel && dbid}
       <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" />
+        </div>
+      </div>
     {/if}
     {#if connection && connection.user}
       <div class="item">
@@ -173,4 +187,10 @@
   .clickable:hover {
     background-color: var(--theme-bg-statusbar-inv-hover);
   }
+
+  .colorbox {
+    padding: 0px 3px;
+    border-radius: 2px;
+    color: var(--theme-bg-statusbar-inv-font);
+  }
 </style>