From f149e37d612f690ca3bada2134430be7f68dfdac Mon Sep 17 00:00:00 2001 From: Braks <78412429+bcakmakoglu@users.noreply.github.com> Date: Mon, 11 Jul 2022 21:30:20 +0200 Subject: [PATCH] feat(gui-v2): add dark mode to state and some styles Signed-off-by: Braks <78412429+bcakmakoglu@users.noreply.github.com> --- packages/nc-gui-v2/app.vue | 2 ++ packages/nc-gui-v2/assets/style-v2.css | 17 +++++++++------- .../components/general/ColorModeSwitcher.vue | 20 +++++++++++++++++++ .../nc-gui-v2/components/general/Sponsors.vue | 6 +++--- packages/nc-gui-v2/composables/useColors.ts | 4 ++-- .../nc-gui-v2/composables/useGlobalState.ts | 5 +++-- packages/nc-gui-v2/pages/projects/index.vue | 6 +++--- .../nc-gui-v2/pages/projects/index/list.vue | 2 +- packages/nc-gui-v2/plugins/state.ts | 11 ++++++++++ 9 files changed, 55 insertions(+), 18 deletions(-) create mode 100644 packages/nc-gui-v2/components/general/ColorModeSwitcher.vue diff --git a/packages/nc-gui-v2/app.vue b/packages/nc-gui-v2/app.vue index b1bfa2bd5a..8fffa96dad 100644 --- a/packages/nc-gui-v2/app.vue +++ b/packages/nc-gui-v2/app.vue @@ -43,6 +43,8 @@ const signOut = () => { --> + + diff --git a/packages/nc-gui-v2/assets/style-v2.css b/packages/nc-gui-v2/assets/style-v2.css index 3106098b2a..473ab73867 100644 --- a/packages/nc-gui-v2/assets/style-v2.css +++ b/packages/nc-gui-v2/assets/style-v2.css @@ -2,25 +2,28 @@ html, body, #__nuxt, .v-application__wrap { - margin: 0 !important; - height: 100vh; - width: 100vw; + @apply m-0 h-[100vh] w-[100vw] bg-white dark:(bg-black text-white); } -html, body { - @apply scrollbar-thin-primary; +nav, +nav .v-list { + @apply dark:(bg-gray-900 text-white) +} + +.v-divider { + @apply dark:bg-white } .page-enter-active, .page-leave-active, .layout-enter-active, .layout-leave-active { - transition: opacity .5s + @apply transition-opacity duration-300 ease-in-out; } .page-enter, .page-leave-active, .layout-enter, .layout-leave-active { - opacity: 0 + @apply opacity-0; } diff --git a/packages/nc-gui-v2/components/general/ColorModeSwitcher.vue b/packages/nc-gui-v2/components/general/ColorModeSwitcher.vue new file mode 100644 index 0000000000..0fb6bfd30c --- /dev/null +++ b/packages/nc-gui-v2/components/general/ColorModeSwitcher.vue @@ -0,0 +1,20 @@ + + + + + + diff --git a/packages/nc-gui-v2/components/general/Sponsors.vue b/packages/nc-gui-v2/components/general/Sponsors.vue index 1371e4c074..ee48e10b3e 100644 --- a/packages/nc-gui-v2/components/general/Sponsors.vue +++ b/packages/nc-gui-v2/components/general/Sponsors.vue @@ -9,8 +9,8 @@ const { nav = false } = defineProps() - - + + {{ $t('msg.info.sponsor.header') }} @@ -21,7 +21,7 @@ const { nav = false } = defineProps() - + {{ $t('activity.sponsorUs') }} diff --git a/packages/nc-gui-v2/composables/useColors.ts b/packages/nc-gui-v2/composables/useColors.ts index aa6d605fa4..7448ad7c1c 100644 --- a/packages/nc-gui-v2/composables/useColors.ts +++ b/packages/nc-gui-v2/composables/useColors.ts @@ -9,11 +9,11 @@ export default function useColors(darkMode?: MaybeRef) { let mode = $ref(unref(darkMode)) const { $state } = useNuxtApp() - if (!mode) mode = $state.darkMode.value + if (typeof mode === 'undefined') mode = $state.darkMode.value scope.run(() => { watch($state.darkMode, (newMode) => { - mode = newMode + if (typeof mode === 'undefined') mode = newMode }) watchEffect(() => { diff --git a/packages/nc-gui-v2/composables/useGlobalState.ts b/packages/nc-gui-v2/composables/useGlobalState.ts index d8bbfaae10..ec937f8d83 100644 --- a/packages/nc-gui-v2/composables/useGlobalState.ts +++ b/packages/nc-gui-v2/composables/useGlobalState.ts @@ -26,7 +26,8 @@ export const useGlobalState = (): GlobalState => { /** get the preferred languages of a user, according to browser settings */ const preferredLanguages = $(usePreferredLanguages()) /** get the preferred dark mode setting, according to browser settings */ - const darkMode = $(usePreferredDark()) + const prefersDarkMode = $(usePreferredDark()) + /** reactive timestamp to check token expiry against */ const timestamp = $(useTimestamp({ immediate: true, interval: 100 })) @@ -62,7 +63,7 @@ export const useGlobalState = (): GlobalState => { }, 'en' /** fallback locale */) /** State */ - const initialState: State = { token: null, user: null, lang: preferredLanguage, darkMode } + const initialState: State = { token: null, user: null, lang: preferredLanguage, darkMode: prefersDarkMode } /** saves a reactive state, any change to these values will write/delete to localStorage */ const storage = $(useStorage(storageKey, initialState)) diff --git a/packages/nc-gui-v2/pages/projects/index.vue b/packages/nc-gui-v2/pages/projects/index.vue index 49e76cbc88..886688f3a6 100644 --- a/packages/nc-gui-v2/pages/projects/index.vue +++ b/packages/nc-gui-v2/pages/projects/index.vue @@ -30,7 +30,7 @@ const navDrawerOptions = [ const route = useRoute() -const { $api } = useNuxtApp() +const { $api, $state } = useNuxtApp() const response = await $api.project.list({}) const projects = $ref(response.list) @@ -46,7 +46,7 @@ const activePage = $ref(navDrawerOptions[0].title) @@ -73,7 +73,7 @@ const activePage = $ref(navDrawerOptions[0].title) - + { {{ project.title || 'Untitled' }} diff --git a/packages/nc-gui-v2/plugins/state.ts b/packages/nc-gui-v2/plugins/state.ts index 15eb2d79f1..36b60df19c 100644 --- a/packages/nc-gui-v2/plugins/state.ts +++ b/packages/nc-gui-v2/plugins/state.ts @@ -1,4 +1,5 @@ import { defineNuxtPlugin } from '#app' +import { useDark, watch } from '#imports' import { useGlobalState } from '~/composables/useGlobalState' /** @@ -15,9 +16,19 @@ import { useGlobalState } from '~/composables/useGlobalState' */ export default defineNuxtPlugin((nuxtApp) => { const storage = useGlobalState() + const darkMode = useDark() /** set i18n locale to stored language */ nuxtApp.vueApp.i18n.locale.value = storage.lang.value + /** set current dark mode from storage */ + watch( + storage.darkMode, + (newMode) => { + darkMode.value = newMode + }, + { immediate: true }, + ) + nuxtApp.provide('state', storage) })