mirror of https://github.com/Fabio286/antares.git
feat(UI): footer color based on folder color
This commit is contained in:
parent
7af178a1e4
commit
4fe9dfc4d7
|
@ -393,6 +393,9 @@ watch(() => dummyNested.value.length, () => {
|
||||||
.folder-element-icon {
|
.folder-element-icon {
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
font-size: 36px;
|
font-size: 36px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
&.badge::after {
|
&.badge::after {
|
||||||
top: 5px;
|
top: 5px;
|
||||||
|
|
|
@ -1,5 +1,9 @@
|
||||||
<template>
|
<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">
|
<div class="footer-left-elements">
|
||||||
<ul class="footer-elements">
|
<ul class="footer-elements">
|
||||||
<li class="footer-element">
|
<li class="footer-element">
|
||||||
|
@ -50,6 +54,7 @@ import { useApplicationStore } from '@/stores/application';
|
||||||
import { useWorkspacesStore } from '@/stores/workspaces';
|
import { useWorkspacesStore } from '@/stores/workspaces';
|
||||||
import { computed, ComputedRef } from 'vue';
|
import { computed, ComputedRef } from 'vue';
|
||||||
import { useConsoleStore } from '@/stores/console';
|
import { useConsoleStore } from '@/stores/console';
|
||||||
|
import { useConnectionsStore } from '@/stores/connections';
|
||||||
|
|
||||||
const { t } = useI18n();
|
const { t } = useI18n();
|
||||||
|
|
||||||
|
@ -62,14 +67,19 @@ interface DatabaseInfos {// TODO: temp
|
||||||
|
|
||||||
const applicationStore = useApplicationStore();
|
const applicationStore = useApplicationStore();
|
||||||
const workspacesStore = useWorkspacesStore();
|
const workspacesStore = useWorkspacesStore();
|
||||||
|
const connectionsStore = useConnectionsStore();
|
||||||
|
|
||||||
|
const lightColors = ['#FFCE54', '#FDA50F', '#BEBDB8', '#48CFAD'];
|
||||||
|
|
||||||
const { getSelected: workspaceUid } = storeToRefs(workspacesStore);
|
const { getSelected: workspaceUid } = storeToRefs(workspacesStore);
|
||||||
const { toggleConsole } = useConsoleStore();
|
const { toggleConsole } = useConsoleStore();
|
||||||
|
|
||||||
const { showSettingModal } = applicationStore;
|
const { showSettingModal } = applicationStore;
|
||||||
const { getWorkspace } = workspacesStore;
|
const { getWorkspace } = workspacesStore;
|
||||||
|
const { getConnectionFolder } = connectionsStore;
|
||||||
|
|
||||||
const workspace = computed(() => getWorkspace(workspaceUid.value));
|
const workspace = computed(() => getWorkspace(workspaceUid.value));
|
||||||
|
const footerColor = computed(() => getConnectionFolder(workspaceUid.value)?.color || '#E36929');
|
||||||
const version: ComputedRef<DatabaseInfos> = computed(() => {
|
const version: ComputedRef<DatabaseInfos> = computed(() => {
|
||||||
return getWorkspace(workspaceUid.value) ? workspace.value.version : null;
|
return getWorkspace(workspaceUid.value) ? workspace.value.version : null;
|
||||||
});
|
});
|
||||||
|
|
|
@ -0,0 +1,4 @@
|
||||||
|
export const getContrast = (hexcolor: string) => {
|
||||||
|
if (!hexcolor) return '';
|
||||||
|
return (parseInt(hexcolor.replace('#', ''), 16) > 0xffffff / 2) ? 'dark' : 'light';
|
||||||
|
};
|
|
@ -71,8 +71,11 @@ export const useConnectionsStore = defineStore('connections', {
|
||||||
return connectionsOrder;
|
return connectionsOrder;
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
getConnectionOrderByUid: state => (uid:string) => state.connectionsOrder.find(connection => connection.uid === uid),
|
getConnectionOrderByUid: state => (uid:string) => state.connectionsOrder
|
||||||
getFolders: state => state.connectionsOrder.filter(conn => conn.isFolder)
|
.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: {
|
actions: {
|
||||||
addConnection (connection: ConnectionParams) {
|
addConnection (connection: ConnectionParams) {
|
||||||
|
|
Loading…
Reference in New Issue