From 212b2bdba933db1af22967a057d64f41c96b9930 Mon Sep 17 00:00:00 2001 From: Fabio Di Stasio Date: Sun, 27 Nov 2022 17:52:32 +0100 Subject: [PATCH] feat(UI): connections customization --- .../components/ModalConnectionAppearence.vue | 183 ++++++++++++++++++ .../components/ModalFolderAppearence.vue | 10 +- .../components/SettingBarConnections.vue | 8 +- .../SettingBarConnectionsFolder.vue | 12 +- src/renderer/components/SettingBarContext.vue | 8 +- src/renderer/i18n/en-US.ts | 7 +- src/renderer/stores/connections.ts | 6 +- 7 files changed, 219 insertions(+), 15 deletions(-) create mode 100644 src/renderer/components/ModalConnectionAppearence.vue diff --git a/src/renderer/components/ModalConnectionAppearence.vue b/src/renderer/components/ModalConnectionAppearence.vue new file mode 100644 index 00000000..6f5d402c --- /dev/null +++ b/src/renderer/components/ModalConnectionAppearence.vue @@ -0,0 +1,183 @@ + + + + + diff --git a/src/renderer/components/ModalFolderAppearence.vue b/src/renderer/components/ModalFolderAppearence.vue index 5733e18b..2893c9e4 100644 --- a/src/renderer/components/ModalFolderAppearence.vue +++ b/src/renderer/components/ModalFolderAppearence.vue @@ -87,20 +87,20 @@ const { updateConnectionOrder } = connectionsStore; const colorPalette = [ { name: 'default', hex: '#E36929' }, - { name: 'grapefruit', hex: '#ED5565' }, + { name: 'grape-fruit', hex: '#ED5565' }, { name: 'rose', hex: '#E3242B' }, { name: 'fire', hex: '#FDA50F' }, { name: 'sunflower', hex: '#FFCE54' }, { name: 'moss', hex: '#8A985E' }, - { name: 'grass', hex: '#A0D468' }, + { name: 'grass', hex: '#6DCD05' }, { name: 'emerald', hex: '#038835' }, { name: 'mint', hex: '#48CFAD' }, { name: 'aqua', hex: '#4FC1E9' }, - { name: 'royalblue', hex: '#4169E1' }, - { name: 'bluejeans', hex: '#5D9CEC' }, + { name: 'roya-lblue', hex: '#4169E1' }, + { name: 'blue-jeans', hex: '#5D9CEC' }, { name: 'stone', hex: '#59788E' }, { name: 'lavander', hex: '#AC92EC' }, - { name: 'pinkrose', hex: '#EC87C0' }, + { name: 'pink-rose', hex: '#EC87C0' }, { name: 'smoke', hex: '#BEBDB8' }, { name: 'slate', hex: '#757C88' } ]; diff --git a/src/renderer/components/SettingBarConnections.vue b/src/renderer/components/SettingBarConnections.vue index c3c5ee30..7b8cc493 100644 --- a/src/renderer/components/SettingBarConnections.vue +++ b/src/renderer/components/SettingBarConnections.vue @@ -40,9 +40,9 @@
- {{ getConnectionName(element.uid) }} + {{ element.name || getConnectionName(element.uid) }}
@@ -204,4 +204,8 @@ watch(() => props.modelValue, (value) => { } } } + +.settingbar-element-icon { + display: flex; +} diff --git a/src/renderer/components/SettingBarConnectionsFolder.vue b/src/renderer/components/SettingBarConnectionsFolder.vue index 418bd881..e02306e4 100644 --- a/src/renderer/components/SettingBarConnectionsFolder.vue +++ b/src/renderer/components/SettingBarConnectionsFolder.vue @@ -43,13 +43,13 @@ class="folder-element" :class="{ 'selected': element === selectedWorkspace }" @click="emit('select-workspace', element)" - @contextmenu.stop="emit('context', {event: $event, content: getConnectionByUid(element)})" + @contextmenu.stop="emit('context', {event: $event, content: getConnectionOrderByUid(element)})" > - {{ getConnectionName(element) }} + {{ getConnectionOrderByUid(element).name || getConnectionName(element) }} @@ -80,7 +80,7 @@ const { getFolders: folders } = storeToRefs(connectionsStore); const { getSelected: selectedWorkspace } = storeToRefs(workspacesStore); const { getWorkspace } = workspacesStore; -const { getConnectionByUid, getConnectionName, addToFolder } = connectionsStore; +const { getConnectionOrderByUid, getConnectionName, addToFolder } = connectionsStore; const foldersOpened = JSON.parse(localStorage.getItem('opened-folders')) || []; @@ -265,6 +265,8 @@ watch(() => dummyNested.value.length, () => { .folder-element-icon { margin: 0 auto; + font-size: 36px; + display: flex; &.badge::after { top: 14px; @@ -364,6 +366,7 @@ watch(() => dummyNested.value.length, () => { .folder-element-icon { width: 21px; height: 21px; + font-size: 16px; } } } @@ -389,6 +392,7 @@ watch(() => dummyNested.value.length, () => { .folder-element-icon { margin: 0 auto; + font-size: 36px; &.badge::after { top: 5px; diff --git a/src/renderer/components/SettingBarContext.vue b/src/renderer/components/SettingBarContext.vue index f3c66652..b86b975a 100644 --- a/src/renderer/components/SettingBarContext.vue +++ b/src/renderer/components/SettingBarContext.vue @@ -45,6 +45,11 @@ :folder="contextConnection" @close="hideAppearenceModal" /> + @@ -58,6 +63,7 @@ import { useWorkspacesStore } from '@/stores/workspaces'; import BaseContextMenu from '@/components/BaseContextMenu.vue'; import ConfirmModal from '@/components/BaseConfirmModal.vue'; import ModalFolderAppearence from '@/components/ModalFolderAppearence.vue'; +import ModalConnectionAppearence from '@/components/ModalConnectionAppearence.vue'; const { t } = useI18n(); @@ -116,7 +122,7 @@ const showAppearenceModal = () => { if (props.contextConnection.isFolder) isFolderEdit.value = true; else - isFolderEdit.value = true; + isConnectionEdit.value = true; }; const hideAppearenceModal = () => { diff --git a/src/renderer/i18n/en-US.ts b/src/renderer/i18n/en-US.ts index bdc68ad3..2136cc1d 100644 --- a/src/renderer/i18n/en-US.ts +++ b/src/renderer/i18n/en-US.ts @@ -146,7 +146,9 @@ export const enUS = { shortcuts: 'Shortcuts', folder: 'Folder | Folders', appearence: 'Appearence', - color: 'Color' + color: 'Color', + label: 'Label', + icon: 'Icon' }, message: { appWelcome: 'Welcome to Antares SQL Client!', @@ -329,7 +331,8 @@ export const enUS = { fillCell: 'Fill cell', editFolder: 'Edit folder', folderName: 'Folder name', - deleteFolder: 'Delete folder' + deleteFolder: 'Delete folder', + editConnectionAppearence: 'Edit connection appearence' }, faker: { address: 'Address', diff --git a/src/renderer/stores/connections.ts b/src/renderer/stores/connections.ts index 9f38afd4..a3765387 100644 --- a/src/renderer/stores/connections.ts +++ b/src/renderer/stores/connections.ts @@ -71,6 +71,7 @@ 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) }, actions: { @@ -159,7 +160,9 @@ export const useConnectionsStore = defineStore('connections', { connections.splice(el.index, 1, { // Move to new position isFolder: false, client: conn.client, - uid: conn.uid + uid: conn.uid, + icon: conn.icon, + name: conn.name }); connIndex = connections.findIndex(conn => conn.uid === el.uid); @@ -185,6 +188,7 @@ export const useConnectionsStore = defineStore('connections', { el = element; return el; }); + persistentStore.set('connectionsOrder', this.connectionsOrder); }, updateLastConnection (uid: string) { const cIndex = (this.lastConnections as {uid: string; time: number}[]).findIndex((c) => c.uid === uid);