From dfd3cc85c1a95737689a9d0c365c15430e5cca87 Mon Sep 17 00:00:00 2001 From: Davide Di Modica Date: Fri, 28 Jun 2024 11:51:37 +0200 Subject: [PATCH] update: app theme store --- .../src/components/common/CardStatsIcon.vue | 2 +- .../src/components/common/ListPercentage.vue | 6 +- .../graylog/Metrics/UncommittedEntries.vue | 4 +- frontend/src/components/indices/Marquee.vue | 2 +- .../src/components/indices/TopIndices.vue | 18 +- .../components/overview/HealthcheckCard.vue | 2 +- frontend/src/layouts/common/FooterEL.vue | 2 +- frontend/src/layouts/common/Provider.vue | 2 +- frontend/src/stores/theme.ts | 180 +++++++++--------- 9 files changed, 109 insertions(+), 109 deletions(-) diff --git a/frontend/src/components/common/CardStatsIcon.vue b/frontend/src/components/common/CardStatsIcon.vue index bc12e0dd..48be4da6 100644 --- a/frontend/src/components/common/CardStatsIcon.vue +++ b/frontend/src/components/common/CardStatsIcon.vue @@ -27,7 +27,7 @@ const { boxed, boxSize, iconSize, iconName, color } = toRefs(props) const style = computed(() => useThemeStore().style) -const iconColor = computed(() => color?.value || style.value["--primary-color"]) +const iconColor = computed(() => color?.value || style.value["primary-color"]) const iconBoxedSize = computed(() => (boxSize.value / 100) * 45) const iconFinalSize = computed(() => (boxed?.value ? iconBoxedSize.value : iconSize.value)) diff --git a/frontend/src/components/common/ListPercentage.vue b/frontend/src/components/common/ListPercentage.vue index f5edf49f..73c385dd 100644 --- a/frontend/src/components/common/ListPercentage.vue +++ b/frontend/src/components/common/ListPercentage.vue @@ -17,9 +17,9 @@ type="line" :percentage="parseInt(item[percentageKey as keyof typeof item], 10)" :indicator-placement="'inside'" - :indicator-text-color="style['--bg-color']" - :color="style['--fg-color']" - :rail-color="style['--divider-020-color']" + :indicator-text-color="style['bg-color']" + :color="style['fg-color']" + :rail-color="style['divider-020-color']" class="font-mono font-bold" /> diff --git a/frontend/src/components/graylog/Metrics/UncommittedEntries.vue b/frontend/src/components/graylog/Metrics/UncommittedEntries.vue index 739b7fa5..9a1e9253 100644 --- a/frontend/src/components/graylog/Metrics/UncommittedEntries.vue +++ b/frontend/src/components/graylog/Metrics/UncommittedEntries.vue @@ -94,7 +94,7 @@ function getOptions() { xaxis: { type: "datetime" }, - colors: [style.value["--primary-color"]], + colors: [style.value["primary-color"]], tooltip: { x: { formatter: (time: number) => { @@ -107,7 +107,7 @@ function getOptions() { } }, style: { - fontFamily: style.value["--font-family-mono"] + fontFamily: style.value["font-family-mono"] }, theme: isThemeDark.value ? "dark" : "light" } diff --git a/frontend/src/components/indices/Marquee.vue b/frontend/src/components/indices/Marquee.vue index 8fe1af3a..bd39b2a2 100644 --- a/frontend/src/components/indices/Marquee.vue +++ b/frontend/src/components/indices/Marquee.vue @@ -58,7 +58,7 @@ watch(indices, val => { const message = useMessage() const style = computed(() => useThemeStore().style) -const gradientColor = computed(() => style.value["--bg-color-rgb"].split(", ")) +const gradientColor = computed(() => style.value["bg-color-rgb"].split(", ")) const loading = computed(() => !list?.value || list.value === null) function getIndices() { diff --git a/frontend/src/components/indices/TopIndices.vue b/frontend/src/components/indices/TopIndices.vue index c1c2eef9..13baece1 100644 --- a/frontend/src/components/indices/TopIndices.vue +++ b/frontend/src/components/indices/TopIndices.vue @@ -63,10 +63,10 @@ function getOptions() { left: "left", type: "scroll", textStyle: { - color: style.value["--fg-color"] + color: style.value["fg-color"] }, pageTextStyle: { - color: style.value["--fg-color"] + color: style.value["fg-color"] } }, grid: { @@ -86,13 +86,13 @@ function getOptions() { show: false }, itemStyle: { - borderColor: style.value["--bg-color"], + borderColor: style.value["bg-color"], borderWidth: 2 }, data: [ - { value: green, name: "Green", itemStyle: { color: style.value["--success-color"] } }, - { value: yellow, name: "Yellow", itemStyle: { color: style.value["--warning-color"] } }, - { value: red, name: "Red", itemStyle: { color: style.value["--error-color"] } } + { value: green, name: "Green", itemStyle: { color: style.value["success-color"] } }, + { value: yellow, name: "Yellow", itemStyle: { color: style.value["warning-color"] } }, + { value: red, name: "Red", itemStyle: { color: style.value["error-color"] } } ] }, { @@ -139,13 +139,13 @@ function getOptions() { //alignTo: "edge", rich: { name: { - color: style.value["--fg-color"], + color: style.value["fg-color"], fontSize: window.innerWidth > 1000 ? 13 : 11 }, per: { fontSize: window.innerWidth > 1000 ? 13 : 11, fontWeight: "bold", - color: style.value["--fg-color"] + color: style.value["fg-color"] } } }, @@ -165,7 +165,7 @@ function getOptions() { } }, itemStyle: { - borderColor: style.value["--bg-color"], + borderColor: style.value["bg-color"], borderWidth: 1 }, data: sizeData diff --git a/frontend/src/components/overview/HealthcheckCard.vue b/frontend/src/components/overview/HealthcheckCard.vue index 8557ed7a..8c413077 100644 --- a/frontend/src/components/overview/HealthcheckCard.vue +++ b/frontend/src/components/overview/HealthcheckCard.vue @@ -16,7 +16,7 @@ :iconName="HealthcheckIcon" boxed :boxSize="30" - :color="criticalTotal ? style['--warning-color'] : undefined" + :color="criticalTotal ? style['warning-color'] : undefined" > diff --git a/frontend/src/layouts/common/FooterEL.vue b/frontend/src/layouts/common/FooterEL.vue index 84dae0bd..131558f9 100644 --- a/frontend/src/layouts/common/FooterEL.vue +++ b/frontend/src/layouts/common/FooterEL.vue @@ -3,7 +3,7 @@
Made with - + By diff --git a/frontend/src/layouts/common/Provider.vue b/frontend/src/layouts/common/Provider.vue index 5039206e..8b644c22 100644 --- a/frontend/src/layouts/common/Provider.vue +++ b/frontend/src/layouts/common/Provider.vue @@ -66,7 +66,7 @@ function setGlobalVars() { const html = document.children[0] as HTMLElement const { style: htmlStyle } = html for (const key in style.value) { - htmlStyle.setProperty(key, style.value[key]) + htmlStyle.setProperty("--" + key, style.value[key]) } } diff --git a/frontend/src/stores/theme.ts b/frontend/src/stores/theme.ts index c2402bb6..81e1efe3 100644 --- a/frontend/src/stores/theme.ts +++ b/frontend/src/stores/theme.ts @@ -362,96 +362,96 @@ export const useThemeStore = defineStore("theme", { const secondary4RGB = hex2rgb(secondary4).join(", ") return { - "--bg-sidebar": `${bgSidebar}`, - "--bg-body": `${bgBody}`, - "--bg-body-rgb": `${bgBodyRGB}`, - - "--fg-color": `${fgColor}`, - "--fg-secondary-color": `${fgSecondaryColor}`, - "--bg-color": `${bgColor}`, - "--bg-secondary-color": `${bgSecondaryColor}`, - "--bg-color-rgb": `${bgColorRGB}`, - - "--border-color": `${borderColor}`, - "--bezier-ease": `${bezierEase}`, - "--router-transition-duration": `${routerTransitionDuration}s`, - "--sidebar-anim-ease": `${sidebarAnimEase}`, - "--sidebar-anim-duration": `${sidebarAnimDuration}s`, - "--sidebar-open-width": `${sidebarOpenWidth}px`, - "--sidebar-close-width": `${sidebarCloseWidth}px`, - "--boxed-width": `${boxedWidth}px`, - "--toolbar-height": `${toolbarHeight}px`, - "--header-bar-height": `${headerBarHeight}px`, - "--view-padding": `${viewPadding}px`, - "--border-radius": `${borderRadius}`, - "--border-radius-small": `${borderRadiusSmall}`, - "--font-family": `${fontFamily}`, - "--font-family-display": `${fontFamilyDisplay}`, - "--font-family-mono": `${fontFamilyMono}`, - "--code-color": `${codeColor}`, - "--primary-color": `${primaryColor}`, - "--tab-color": `${tabColor}`, - "--tab-color-active": `${tabColorActive}`, - "--tab-fg-color-active": `${tabFgColorActive}`, - "--modal-color": `${modalColor}`, - "--modal-color-rgb": `${modalColorRGB}`, - - "--button-color-secondary": `${buttonColorSecondary}`, - "--button-color-secondary-hover": `${buttonColorSecondaryHover}`, - "--button-color-secondary-pressed": `${buttonColorSecondaryPressed}`, - - "--primary-005-color": `${primary005}`, - "--primary-010-color": `${primary010}`, - "--primary-015-color": `${primary015}`, - "--primary-020-color": `${primary020}`, - "--primary-030-color": `${primary030}`, - "--primary-040-color": `${primary040}`, - "--primary-050-color": `${primary050}`, - "--primary-060-color": `${primary060}`, - - "--hover-005-color": `${hover005}`, - "--hover-010-color": `${hover010}`, - "--hover-050-color": `${hover050}`, - - "--divider-005-color": `${divider005}`, - "--divider-010-color": `${divider010}`, - "--divider-020-color": `${divider020}`, - "--divider-030-color": `${divider030}`, - - "--success-color": `${successColor}`, - "--error-color": `${errorColor}`, - "--warning-color": `${warningColor}`, - "--info-color": `${infoColor}`, - "--success-005-color": `${success005}`, - "--error-005-color": `${error005}`, - "--warning-005-color": `${warning005}`, - "--info-005-color": `${info005}`, - - "--secondary1-color": `${secondary1}`, - "--secondary1-color-rgb": `${secondary1RGB}`, - "--secondary2-color": `${secondary2}`, - "--secondary2-color-rgb": `${secondary2RGB}`, - "--secondary3-color": `${secondary3}`, - "--secondary3-color-rgb": `${secondary3RGB}`, - "--secondary4-color": `${secondary4}`, - "--secondary4-color-rgb": `${secondary4RGB}`, - - "--secondary1-opacity-005-color": `${secondary1Opacity005}`, - "--secondary1-opacity-010-color": `${secondary1Opacity010}`, - "--secondary1-opacity-020-color": `${secondary1Opacity020}`, - "--secondary1-opacity-030-color": `${secondary1Opacity030}`, - "--secondary2-opacity-005-color": `${secondary2Opacity005}`, - "--secondary2-opacity-010-color": `${secondary2Opacity010}`, - "--secondary2-opacity-020-color": `${secondary2Opacity020}`, - "--secondary2-opacity-030-color": `${secondary2Opacity030}`, - "--secondary3-opacity-005-color": `${secondary3Opacity005}`, - "--secondary3-opacity-010-color": `${secondary3Opacity010}`, - "--secondary3-opacity-020-color": `${secondary3Opacity020}`, - "--secondary3-opacity-030-color": `${secondary3Opacity030}`, - "--secondary4-opacity-005-color": `${secondary4Opacity005}`, - "--secondary4-opacity-010-color": `${secondary4Opacity010}`, - "--secondary4-opacity-020-color": `${secondary4Opacity020}`, - "--secondary4-opacity-030-color": `${secondary4Opacity030}` + "bg-sidebar": `${bgSidebar}`, + "bg-body": `${bgBody}`, + "bg-body-rgb": `${bgBodyRGB}`, + + "fg-color": `${fgColor}`, + "fg-secondary-color": `${fgSecondaryColor}`, + "bg-color": `${bgColor}`, + "bg-secondary-color": `${bgSecondaryColor}`, + "bg-color-rgb": `${bgColorRGB}`, + + "border-color": `${borderColor}`, + "bezier-ease": `${bezierEase}`, + "router-transition-duration": `${routerTransitionDuration}s`, + "sidebar-anim-ease": `${sidebarAnimEase}`, + "sidebar-anim-duration": `${sidebarAnimDuration}s`, + "sidebar-open-width": `${sidebarOpenWidth}px`, + "sidebar-close-width": `${sidebarCloseWidth}px`, + "boxed-width": `${boxedWidth}px`, + "toolbar-height": `${toolbarHeight}px`, + "header-bar-height": `${headerBarHeight}px`, + "view-padding": `${viewPadding}px`, + "border-radius": `${borderRadius}`, + "border-radius-small": `${borderRadiusSmall}`, + "font-family": `${fontFamily}`, + "font-family-display": `${fontFamilyDisplay}`, + "font-family-mono": `${fontFamilyMono}`, + "code-color": `${codeColor}`, + "primary-color": `${primaryColor}`, + "tab-color": `${tabColor}`, + "tab-color-active": `${tabColorActive}`, + "tab-fg-color-active": `${tabFgColorActive}`, + "modal-color": `${modalColor}`, + "modal-color-rgb": `${modalColorRGB}`, + + "button-color-secondary": `${buttonColorSecondary}`, + "button-color-secondary-hover": `${buttonColorSecondaryHover}`, + "button-color-secondary-pressed": `${buttonColorSecondaryPressed}`, + + "primary-005-color": `${primary005}`, + "primary-010-color": `${primary010}`, + "primary-015-color": `${primary015}`, + "primary-020-color": `${primary020}`, + "primary-030-color": `${primary030}`, + "primary-040-color": `${primary040}`, + "primary-050-color": `${primary050}`, + "primary-060-color": `${primary060}`, + + "hover-005-color": `${hover005}`, + "hover-010-color": `${hover010}`, + "hover-050-color": `${hover050}`, + + "divider-005-color": `${divider005}`, + "divider-010-color": `${divider010}`, + "divider-020-color": `${divider020}`, + "divider-030-color": `${divider030}`, + + "success-color": `${successColor}`, + "error-color": `${errorColor}`, + "warning-color": `${warningColor}`, + "info-color": `${infoColor}`, + "success-005-color": `${success005}`, + "error-005-color": `${error005}`, + "warning-005-color": `${warning005}`, + "info-005-color": `${info005}`, + + "secondary1-color": `${secondary1}`, + "secondary1-color-rgb": `${secondary1RGB}`, + "secondary2-color": `${secondary2}`, + "secondary2-color-rgb": `${secondary2RGB}`, + "secondary3-color": `${secondary3}`, + "secondary3-color-rgb": `${secondary3RGB}`, + "secondary4-color": `${secondary4}`, + "secondary4-color-rgb": `${secondary4RGB}`, + + "secondary1-opacity-005-color": `${secondary1Opacity005}`, + "secondary1-opacity-010-color": `${secondary1Opacity010}`, + "secondary1-opacity-020-color": `${secondary1Opacity020}`, + "secondary1-opacity-030-color": `${secondary1Opacity030}`, + "secondary2-opacity-005-color": `${secondary2Opacity005}`, + "secondary2-opacity-010-color": `${secondary2Opacity010}`, + "secondary2-opacity-020-color": `${secondary2Opacity020}`, + "secondary2-opacity-030-color": `${secondary2Opacity030}`, + "secondary3-opacity-005-color": `${secondary3Opacity005}`, + "secondary3-opacity-010-color": `${secondary3Opacity010}`, + "secondary3-opacity-020-color": `${secondary3Opacity020}`, + "secondary3-opacity-030-color": `${secondary3Opacity030}`, + "secondary4-opacity-005-color": `${secondary4Opacity005}`, + "secondary4-opacity-010-color": `${secondary4Opacity010}`, + "secondary4-opacity-020-color": `${secondary4Opacity020}`, + "secondary4-opacity-030-color": `${secondary4Opacity030}` } }, isThemeDark(state): boolean {