fabio286/antares
1
1
Fork 0
mirror of https://github.com/Fabio286/antares.git synced 2025-02-16 19:50:37 +01:00
Code Issues Releases Wiki Activity

feat(UI): footer color based on folder color

Browse Source
This commit is contained in:
Fabio Di Stasio 2022-11-28 11:56:02 +01:00
parent 7af178a1e4
commit 4fe9dfc4d7
4 changed files with 23 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/renderer/components/SettingBarConnectionsFolder.vue
View File

@ -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;

12
src/renderer/components/TheFooter.vue
View File

@ -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;
});

4
src/renderer/libs/getContrast.ts Normal file
View File

@ -0,0 +1,4 @@
export const getContrast = (hexcolor: string) => {
if (!hexcolor) return '';
return (parseInt(hexcolor.replace('#', ''), 16) > 0xffffff / 2) ? 'dark' : 'light';
};

7
src/renderer/stores/connections.ts
View File

@ -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) {