From 4fe9dfc4d7ca19a798b8a8a74d979ab88aebeaac Mon Sep 17 00:00:00 2001
From: Fabio Di Stasio <fabio286@gmail.com>
Date: Mon, 28 Nov 2022 11:56:02 +0100
Subject: [PATCH] feat(UI): footer color based on folder color

---
 .../components/SettingBarConnectionsFolder.vue       |  3 +++
 src/renderer/components/TheFooter.vue                | 12 +++++++++++-
 src/renderer/libs/getContrast.ts                     |  4 ++++
 src/renderer/stores/connections.ts                   |  7 +++++--
 4 files changed, 23 insertions(+), 3 deletions(-)
 create mode 100644 src/renderer/libs/getContrast.ts

diff --git a/src/renderer/components/SettingBarConnectionsFolder.vue b/src/renderer/components/SettingBarConnectionsFolder.vue
index e02306e4..103abe85 100644
--- a/src/renderer/components/SettingBarConnectionsFolder.vue
+++ b/src/renderer/components/SettingBarConnectionsFolder.vue
@@ -393,6 +393,9 @@ watch(() => dummyNested.value.length, () => {
       .folder-element-icon {
          margin: 0 auto;
          font-size: 36px;
+         display: flex;
+         align-items: center;
+         justify-content: center;
 
          &.badge::after {
             top: 5px;
diff --git a/src/renderer/components/TheFooter.vue b/src/renderer/components/TheFooter.vue
index a5329d81..76d9bbc1 100644
--- a/src/renderer/components/TheFooter.vue
+++ b/src/renderer/components/TheFooter.vue
@@ -1,5 +1,9 @@
 <template>
-   <div id="footer" class="text-light">
+   <div
+      id="footer"
+      :class="[lightColors.includes(footerColor) ? 'text-dark' : 'text-light']"
+      :style="`background-color: ${footerColor};`"
+   >
       <div class="footer-left-elements">
          <ul class="footer-elements">
             <li class="footer-element">
@@ -50,6 +54,7 @@ import { useApplicationStore } from '@/stores/application';
 import { useWorkspacesStore } from '@/stores/workspaces';
 import { computed, ComputedRef } from 'vue';
 import { useConsoleStore } from '@/stores/console';
+import { useConnectionsStore } from '@/stores/connections';
 
 const { t } = useI18n();
 
@@ -62,14 +67,19 @@ interface DatabaseInfos {// TODO: temp
 
 const applicationStore = useApplicationStore();
 const workspacesStore = useWorkspacesStore();
+const connectionsStore = useConnectionsStore();
+
+const lightColors = ['#FFCE54', '#FDA50F', '#BEBDB8', '#48CFAD'];
 
 const { getSelected: workspaceUid } = storeToRefs(workspacesStore);
 const { toggleConsole } = useConsoleStore();
 
 const { showSettingModal } = applicationStore;
 const { getWorkspace } = workspacesStore;
+const { getConnectionFolder } = connectionsStore;
 
 const workspace = computed(() => getWorkspace(workspaceUid.value));
+const footerColor = computed(() => getConnectionFolder(workspaceUid.value)?.color || '#E36929');
 const version: ComputedRef<DatabaseInfos> = computed(() => {
    return getWorkspace(workspaceUid.value) ? workspace.value.version : null;
 });
diff --git a/src/renderer/libs/getContrast.ts b/src/renderer/libs/getContrast.ts
new file mode 100644
index 00000000..a78f4113
--- /dev/null
+++ b/src/renderer/libs/getContrast.ts
@@ -0,0 +1,4 @@
+export const getContrast = (hexcolor: string) => {
+   if (!hexcolor) return '';
+   return (parseInt(hexcolor.replace('#', ''), 16) > 0xffffff / 2) ? 'dark' : 'light';
+};
diff --git a/src/renderer/stores/connections.ts b/src/renderer/stores/connections.ts
index 75f70a56..8c2e040d 100644
--- a/src/renderer/stores/connections.ts
+++ b/src/renderer/stores/connections.ts
@@ -71,8 +71,11 @@ export const useConnectionsStore = defineStore('connections', {
             return connectionsOrder;
          }
       },
-      getConnectionOrderByUid: state => (uid:string) => state.connectionsOrder.find(connection => connection.uid === uid),
-      getFolders: state => state.connectionsOrder.filter(conn => conn.isFolder)
+      getConnectionOrderByUid: state => (uid:string) => state.connectionsOrder
+         .find(connection => connection.uid === uid),
+      getFolders: state => state.connectionsOrder.filter(conn => conn.isFolder),
+      getConnectionFolder: state => (uid:string) => state.connectionsOrder
+         .find(folder => folder.isFolder && folder.connections.includes(uid))
    },
    actions: {
       addConnection (connection: ConnectionParams) {