From 72accb7b0e62977dde2c82312aee5b9d025e5182 Mon Sep 17 00:00:00 2001 From: Fabio Di Stasio Date: Sat, 26 Nov 2022 11:21:47 +0100 Subject: [PATCH] feat(UI): folders customization --- src/common/libs/uidGen.ts | 2 +- .../components/ModalFolderAppearence.vue | 152 ++++++++++++++++++ .../SettingBarConnectionsFolder.vue | 3 + src/renderer/components/SettingBarContext.vue | 24 +++ src/renderer/components/TheSettingBar.vue | 1 + src/renderer/components/TheTitleBar.vue | 4 +- src/renderer/i18n/en-US.ts | 6 +- src/renderer/stores/connections.ts | 30 +++- 8 files changed, 215 insertions(+), 7 deletions(-) create mode 100644 src/renderer/components/ModalFolderAppearence.vue diff --git a/src/common/libs/uidGen.ts b/src/common/libs/uidGen.ts index a9ee9042..d8eb869d 100644 --- a/src/common/libs/uidGen.ts +++ b/src/common/libs/uidGen.ts @@ -1,3 +1,3 @@ export function uidGen (prefix?: string) { - return (prefix ? `${prefix}:` : '') + Math.random().toString(36).substr(2, 9).toUpperCase(); + return (prefix ? `${prefix}:` : '') + Math.random().toString(36).substring(2, 11).toUpperCase(); } diff --git a/src/renderer/components/ModalFolderAppearence.vue b/src/renderer/components/ModalFolderAppearence.vue new file mode 100644 index 00000000..5733e18b --- /dev/null +++ b/src/renderer/components/ModalFolderAppearence.vue @@ -0,0 +1,152 @@ + + + + + diff --git a/src/renderer/components/SettingBarConnectionsFolder.vue b/src/renderer/components/SettingBarConnectionsFolder.vue index ca1c5ec1..418bd881 100644 --- a/src/renderer/components/SettingBarConnectionsFolder.vue +++ b/src/renderer/components/SettingBarConnectionsFolder.vue @@ -241,6 +241,7 @@ watch(() => dummyNested.value.length, () => { .folder-element { opacity: .6; height: 2.5rem; + background: transparent; &.selected { opacity: 1; @@ -325,6 +326,8 @@ watch(() => dummyNested.value.length, () => { margin-bottom: 3px; position: relative; transition: opacity .2s; + background: $bg-color-light-dark; + border-radius: 8px; &.ghost { margin:0 ; diff --git a/src/renderer/components/SettingBarContext.vue b/src/renderer/components/SettingBarContext.vue index 85a59144..f3c66652 100644 --- a/src/renderer/components/SettingBarContext.vue +++ b/src/renderer/components/SettingBarContext.vue @@ -17,6 +17,9 @@ > {{ t('word.duplicate') }} +
+ {{ t('word.appearence') }} +
{{ t('word.delete') }}
@@ -37,6 +40,11 @@ + @@ -49,6 +57,7 @@ import { SidebarElement, useConnectionsStore } from '@/stores/connections'; import { useWorkspacesStore } from '@/stores/workspaces'; import BaseContextMenu from '@/components/BaseContextMenu.vue'; import ConfirmModal from '@/components/BaseConfirmModal.vue'; +import ModalFolderAppearence from '@/components/ModalFolderAppearence.vue'; const { t } = useI18n(); @@ -78,6 +87,8 @@ const props = defineProps({ const emit = defineEmits(['close-context']); const isConfirmModal = ref(false); +const isFolderEdit = ref(false); +const isConnectionEdit = ref(false); const connectionName = computed(() => props.contextConnection.name || getConnectionName(props.contextConnection.uid) || t('word.folder', 1)); const isConnected = computed(() => getWorkspace(props.contextConnection.uid)?.connectionStatus === 'connected'); @@ -101,6 +112,19 @@ const duplicateConnection = () => { closeContext(); }; +const showAppearenceModal = () => { + if (props.contextConnection.isFolder) + isFolderEdit.value = true; + else + isFolderEdit.value = true; +}; + +const hideAppearenceModal = () => { + isConnectionEdit.value = false; + isFolderEdit.value = false; + closeContext(); +}; + const showConfirmModal = () => { isConfirmModal.value = true; }; diff --git a/src/renderer/components/TheSettingBar.vue b/src/renderer/components/TheSettingBar.vue index 41375c32..dfd6bc59 100644 --- a/src/renderer/components/TheSettingBar.vue +++ b/src/renderer/components/TheSettingBar.vue @@ -78,6 +78,7 @@ import { useElementBounding } from '@vueuse/core'; import { useI18n } from 'vue-i18n'; const { t } = useI18n(); +localStorage.setItem('opened-folders', '[]'); const applicationStore = useApplicationStore(); const connectionsStore = useConnectionsStore(); diff --git a/src/renderer/components/TheTitleBar.vue b/src/renderer/components/TheTitleBar.vue index 355e76c1..92b400ee 100644 --- a/src/renderer/components/TheTitleBar.vue +++ b/src/renderer/components/TheTitleBar.vue @@ -30,7 +30,7 @@ > -
+
@@ -67,7 +67,7 @@ const windowTitle = computed(() => { const connectionName = getConnectionName(selectedWorkspace.value); const workspace = getWorkspace(selectedWorkspace.value); - const breadcrumbs = Object.values(workspace.breadcrumbs).filter(breadcrumb => breadcrumb) || [workspace.client]; + const breadcrumbs = workspace ? Object.values(workspace.breadcrumbs).filter(breadcrumb => breadcrumb) || [workspace.client] : []; return [connectionName, ...breadcrumbs].join(' • '); }); diff --git a/src/renderer/i18n/en-US.ts b/src/renderer/i18n/en-US.ts index e99747f1..bdc68ad3 100644 --- a/src/renderer/i18n/en-US.ts +++ b/src/renderer/i18n/en-US.ts @@ -144,7 +144,9 @@ export const enUS = { unpin: 'Unpin', console: 'Console', shortcuts: 'Shortcuts', - folder: 'Folder | Folders' + folder: 'Folder | Folders', + appearence: 'Appearence', + color: 'Color' }, message: { appWelcome: 'Welcome to Antares SQL Client!', @@ -325,6 +327,8 @@ export const enUS = { nextResultsPage: 'Next results page', previousResultsPage: 'Previous results page', fillCell: 'Fill cell', + editFolder: 'Edit folder', + folderName: 'Folder name', deleteFolder: 'Delete folder' }, faker: { diff --git a/src/renderer/stores/connections.ts b/src/renderer/stores/connections.ts index 63b40953..9f38afd4 100644 --- a/src/renderer/stores/connections.ts +++ b/src/renderer/stores/connections.ts @@ -12,6 +12,7 @@ export interface SidebarElement { connections?: string[]; color?: string; name?: string; + icon?: null | string; } if (!key) @@ -80,7 +81,8 @@ export const useConnectionsStore = defineStore('connections', { this.connectionsOrder.push({ isFolder: false, uid: connection.uid, - client: connection.client + client: connection.client, + icon: null }); persistentStore.set('connectionsOrder', this.connectionsOrder); }, @@ -90,7 +92,7 @@ export const useConnectionsStore = defineStore('connections', { isFolder: true, uid: uidGen('F'), name: '', - color: '#e36929', + color: '#E36929', connections: params.connections }); persistentStore.set('connectionsOrder', this.connectionsOrder); @@ -109,6 +111,22 @@ export const useConnectionsStore = defineStore('connections', { persistentStore.set('connections', this.connections); this.connectionsOrder = (this.connectionsOrder as SidebarElement[]).filter(el => el.uid !== connection.uid); + this.connectionsOrder = (this.connectionsOrder as SidebarElement[]).map(el => { // Removes connection from folders + if (el.isFolder && el.connections.includes(connection.uid)) + el.connections = el.connections.filter(uid => uid !== connection.uid); + + return el; + }); + + // Clear empty folders + const emptyFolders = (this.connectionsOrder as SidebarElement[]).reduce((acc, curr) => { + if (curr.connections && curr.connections.length === 0) + acc.push(curr.uid); + return acc; + }, []); + + this.connectionsOrder = (this.connectionsOrder as SidebarElement[]).filter(el => !emptyFolders.includes(el.uid)); + persistentStore.set('connectionsOrder', this.connectionsOrder); }, editConnection (connection: ConnectionParams) { @@ -117,7 +135,6 @@ export const useConnectionsStore = defineStore('connections', { return conn; }); this.connections = editedConnections; - this.selected_conection = {}; persistentStore.set('connections', this.connections); }, updateConnections (connections: ConnectionParams[]) { @@ -162,6 +179,13 @@ export const useConnectionsStore = defineStore('connections', { this.connectionsOrder = connections; persistentStore.set('connectionsOrder', this.connectionsOrder); }, + updateConnectionOrder (element: SidebarElement) { + this.connectionsOrder = (this.connectionsOrder as SidebarElement[]).map(el => { + if (el.uid === element.uid) + el = element; + return el; + }); + }, updateLastConnection (uid: string) { const cIndex = (this.lastConnections as {uid: string; time: number}[]).findIndex((c) => c.uid === uid);