From c31f31bab382bf03a869ac54dc373382457b05d2 Mon Sep 17 00:00:00 2001
From: Thilo Wischmeyer <thwischm@gmail.com>
Date: Sat, 17 Apr 2021 14:59:28 +0200
Subject: [PATCH] Moved the dark mode switch to the user options menu and
removed the need to unlock dark mode.
---
frontend/src/components/BaseLayout.vue | 31 -------------------------
frontend/src/components/UserOptions.vue | 10 ++++++++
frontend/src/store/modules/ui.ts | 6 -----
3 files changed, 10 insertions(+), 37 deletions(-)
diff --git a/frontend/src/components/BaseLayout.vue b/frontend/src/components/BaseLayout.vue
index 011bd8bf..086a4049 100644
--- a/frontend/src/components/BaseLayout.vue
+++ b/frontend/src/components/BaseLayout.vue
@@ -37,23 +37,6 @@
</v-toolbar>
<slot name="sidebar-content" />
<div class="sidebar-footer">
- <v-tooltip
- top
- style="min-width: 150px"
- >
- <template #activator="{ on }">
- <div v-on="on">
- <v-switch
- v-model="$vuetify.theme.dark"
- class="dark-mode-switch"
- :disabled="!darkModeUnlocked"
- :label="mini ? '' : 'dark mode'"
- />
- </div>
- </template>
- <span v-if="darkModeUnlocked">Experimental: styling issues may occur!</span>
- <span v-else>You need to visit the feedback site below first!</span>
- </v-tooltip>
<v-btn
id="feedback-btn"
href="https://gitlab.gwdg.de/j.michal/grady/issues"
@@ -64,7 +47,6 @@
:tile="!mini"
depressed
:class="{ 'fab-button': mini, 'fab-button-white': !darkMode }"
- @click.native="logFeedbackClick"
>
<v-icon :left="!mini">
feedback
@@ -112,10 +94,6 @@ export default {
...mapStateToComputedGetterSetter({
pathPrefix: 'UI',
items: [
- {
- name: 'darkModeUnlocked',
- mutation: UI.SET_DARK_MODE_UNLOCKED
- },
{
name: 'mini',
path: 'sideBarCollapsed',
@@ -124,11 +102,6 @@ export default {
]
})
},
- methods: {
- logFeedbackClick () {
- this.darkModeUnlocked = true
- }
- }
}
</script>
@@ -154,10 +127,6 @@ export default {
.fab-button-white {
color: grey !important;
}
-
- .dark-mode-switch {
- margin-left: 22px;
- }
</style>
<style>
diff --git a/frontend/src/components/UserOptions.vue b/frontend/src/components/UserOptions.vue
index 7b61d0f7..5fffef87 100644
--- a/frontend/src/components/UserOptions.vue
+++ b/frontend/src/components/UserOptions.vue
@@ -24,6 +24,16 @@
>
Change password
</v-list-item>
+ <v-list-item @click.capture.stop="$vuetify.theme.dark = !$vuetify.theme.dark">
+ <v-list-item-content>
+ <v-list-item-title>
+ Dark mode (experimental)
+ </v-list-item-title>
+ </v-list-item-content>
+ <v-list-item-action>
+ <v-switch v-model="$vuetify.theme.dark" />
+ </v-list-item-action>
+ </v-list-item>
<v-divider class="my-2" />
<v-list-item @click="logout">
<v-icon left>
diff --git a/frontend/src/store/modules/ui.ts b/frontend/src/store/modules/ui.ts
index c200c0e8..7e3849be 100644
--- a/frontend/src/store/modules/ui.ts
+++ b/frontend/src/store/modules/ui.ts
@@ -3,7 +3,6 @@ import { RootState } from '@/store/store'
export interface UIState {
sideBarCollapsed: boolean
- darkModeUnlocked: boolean
showJumbotron: boolean,
showSubmissionType: boolean,
}
@@ -11,7 +10,6 @@ export interface UIState {
function initialState (): UIState {
return {
sideBarCollapsed: false,
- darkModeUnlocked: false,
showJumbotron: true,
showSubmissionType: true,
}
@@ -24,9 +22,6 @@ const stateGetter = mb.state()
function SET_SIDEBAR_COLLAPSED (state: UIState, collapsed: boolean) {
state.sideBarCollapsed = collapsed
}
-function SET_DARK_MODE_UNLOCKED (state: UIState, val: boolean) {
- state.darkModeUnlocked = val
-}
function SET_SHOW_JUMBOTRON (state: UIState, val: boolean) {
state.showJumbotron = val
}
@@ -38,7 +33,6 @@ export const UI = {
get state () { return stateGetter() },
SET_SIDEBAR_COLLAPSED: mb.commit(SET_SIDEBAR_COLLAPSED),
- SET_DARK_MODE_UNLOCKED: mb.commit(SET_DARK_MODE_UNLOCKED),
SET_SHOW_JUMBOTRON: mb.commit(SET_SHOW_JUMBOTRON),
SET_SHOW_SUBMISSIONTYPE: mb.commit(SET_SHOW_SUBMISSIONTYPE),
}
--
GitLab