From 3ac64779288c09db9ba7ff677a265b3a0c4a3984 Mon Sep 17 00:00:00 2001 From: Dhruv Bhanushali Date: Thu, 19 Sep 2024 00:57:38 +0530 Subject: [PATCH] Add new feature notice for dark mode (#4922) --- .../VFeatureNotice/VDarkModeFeatureNotice.vue | 21 ++++++++++ .../VFeatureNotice/VFeatureNotice.vue | 37 ++++++++++++++++++ frontend/src/components/VHomepageContent.vue | 2 +- .../components/VSelectField/VSelectField.vue | 35 ++++++++++++++++- .../components/VThemeSelect/VThemeSelect.vue | 7 ++++ frontend/src/layouts/content-layout.vue | 2 + frontend/src/layouts/default.vue | 2 + frontend/src/layouts/search-layout.vue | 2 + frontend/src/locales/scripts/en.json5 | 5 +++ frontend/src/pages/index.vue | 30 ++++++++++---- frontend/src/stores/ui.ts | 37 ++++++++++++++++-- frontend/src/styles/tailwind.css | 12 ++++++ frontend/tailwind.config.ts | 12 ++++++ frontend/test/playwright/utils/navigation.ts | 1 + ...tent-switcher-open-ltr-2xl-light-linux.png | Bin 76717 -> 76623 bytes ...ntent-switcher-open-ltr-xl-light-linux.png | Bin 73212 -> 74647 bytes ...tent-switcher-open-rtl-2xl-light-linux.png | Bin 65219 -> 65057 bytes ...ntent-switcher-open-rtl-xl-light-linux.png | Bin 60521 -> 61987 bytes ...ernal-sources-open-ltr-2xl-light-linux.png | Bin 72830 -> 73037 bytes ...ternal-sources-open-ltr-xl-light-linux.png | Bin 68500 -> 69981 bytes ...ernal-sources-open-rtl-2xl-light-linux.png | Bin 62903 -> 63862 bytes ...ternal-sources-open-rtl-xl-light-linux.png | Bin 59812 -> 59657 bytes .../focused-search-ltr-2xl-light-linux.png | Bin 3940 -> 3432 bytes .../focused-search-ltr-xl-light-linux.png | Bin 3937 -> 3432 bytes .../focused-search-rtl-2xl-light-linux.png | Bin 3196 -> 2844 bytes .../focused-search-rtl-xl-light-linux.png | Bin 3194 -> 2844 bytes .../index-ltr-2xl-light-linux.png | Bin 72784 -> 74168 bytes .../index-ltr-xl-light-linux.png | Bin 67566 -> 69632 bytes .../index-rtl-2xl-light-linux.png | Bin 63108 -> 61766 bytes .../index-rtl-xl-light-linux.png | Bin 56455 -> 57768 bytes .../unfocused-search-ltr-2xl-light-linux.png | Bin 3913 -> 3421 bytes .../unfocused-search-ltr-xl-light-linux.png | Bin 3907 -> 3421 bytes .../unfocused-search-rtl-2xl-light-linux.png | Bin 3166 -> 2825 bytes .../unfocused-search-rtl-xl-light-linux.png | Bin 3165 -> 2817 bytes .../visual-regression/v-footer.spec.ts | 10 +++++ .../test/unit/specs/stores/ui-store.spec.ts | 1 + 36 files changed, 203 insertions(+), 13 deletions(-) create mode 100644 frontend/src/components/VFeatureNotice/VDarkModeFeatureNotice.vue create mode 100644 frontend/src/components/VFeatureNotice/VFeatureNotice.vue diff --git a/frontend/src/components/VFeatureNotice/VDarkModeFeatureNotice.vue b/frontend/src/components/VFeatureNotice/VDarkModeFeatureNotice.vue new file mode 100644 index 00000000000..782cd02e6bb --- /dev/null +++ b/frontend/src/components/VFeatureNotice/VDarkModeFeatureNotice.vue @@ -0,0 +1,21 @@ + + + diff --git a/frontend/src/components/VFeatureNotice/VFeatureNotice.vue b/frontend/src/components/VFeatureNotice/VFeatureNotice.vue new file mode 100644 index 00000000000..2e5dccb41c6 --- /dev/null +++ b/frontend/src/components/VFeatureNotice/VFeatureNotice.vue @@ -0,0 +1,37 @@ + + + diff --git a/frontend/src/components/VHomepageContent.vue b/frontend/src/components/VHomepageContent.vue index 8166f34e119..0ca18366711 100644 --- a/frontend/src/components/VHomepageContent.vue +++ b/frontend/src/components/VHomepageContent.vue @@ -88,7 +88,7 @@ const { diff --git a/frontend/src/components/VSelectField/VSelectField.vue b/frontend/src/components/VSelectField/VSelectField.vue index fee04c1ea7c..2572e1e0c80 100644 --- a/frontend/src/components/VSelectField/VSelectField.vue +++ b/frontend/src/components/VSelectField/VSelectField.vue @@ -34,11 +34,14 @@ const props = withDefaults( labelText: string choices: Choice[] showSelected?: boolean + /** whether to show a glowing pink outline, indicating a new feature */ + showNewHighlight?: boolean }>(), { modelValue: "", blankText: "", showSelected: true, + showHighlight: false, } ) @@ -72,9 +75,17 @@ const splitAttrs = computed(() => { + + diff --git a/frontend/src/components/VThemeSelect/VThemeSelect.vue b/frontend/src/components/VThemeSelect/VThemeSelect.vue index 6cc4320aba6..136f0bb5193 100644 --- a/frontend/src/components/VThemeSelect/VThemeSelect.vue +++ b/frontend/src/components/VThemeSelect/VThemeSelect.vue @@ -35,6 +35,11 @@ const colorMode = computed({ }, }) +const isDarkModeSeen = computed(() => uiStore.isDarkModeSeen) +const setIsDarkModeSeen = () => { + uiStore.setIsDarkModeSeen(true) +} + const darkMode = useDarkMode() /** @@ -68,6 +73,8 @@ const choices: ComputedRef = computed(() => { :blank-text="$t('theme.theme')" :label-text="$t('theme.theme')" :show-selected="false" + :show-new-highlight="!isDarkModeSeen" + @click="setIsDarkModeSeen" >