Use Vuetify Themes #898

grolu · 2020-12-03T20:27:47Z

What this PR does / why we need it:
This PR is a big step to make the dashboard customizable. By using vuetify themes it is possible to centrally configure the colors used by the dashboard. This also allows us to introduce dark mode.

Which issue(s) this PR fixes:
Fixes #873 Fixes #714

Special notes for your reviewer:

Release note:

Use Vuetify Themes to define Dashboard color scheme. This makes it easier to change colors and adaptions will not be overwritten by future code changes. See [Themes](https://github.com/gardener/dashboard/blob/master/docs/Theming.md) documentation for instructions on how to apply a custom theme to the Dashboard

Added Dark Mode support

Redesigned, cleaner Login Page

Added Secret Background SVG Component

# Conflicts: # frontend/src/utils/index.js # frontend/src/views/Members.vue

Make all infrastructure icons colorizable svg components

Added switch to enable dark mode dark mode support for snotify

# Conflicts: # frontend/src/components/ShootListRow.vue # frontend/src/views/ShootList.vue Changed hard coded color values to theme colors

frontend/src/app.js

holgerkoser · 2021-01-07T14:29:10Z

frontend/src/components/MainToolbar.vue

              <v-icon class="mr-3">mdi-account-circle</v-icon>
              My Account
            </v-btn>
          </v-card-actions>
          <v-divider></v-divider>
+          <v-card-actions class="px-3">
+            <v-icon color="primary" class="ml-2 mr-3">mdi-brightness-6</v-icon>
+            <v-switch v-model="darkModeValue" dense hide-details class="ma-0" color="primary" @click.native.stop></v-switch>


Suggested change

<v-switch v-model="darkModeValue" dense hide-details class="ma-0" color="primary" @click.native.stop></v-switch>

<v-switch v-model="darkMode" dense hide-details class="ma-0" color="primary" @click.native.stop></v-switch>

holgerkoser · 2021-01-07T14:29:53Z

frontend/src/components/MainToolbar.vue

+      'setError',
+      'setDarkMode'


Suggested change

'setError',

'setDarkMode'

'setError'

holgerkoser · 2021-01-07T14:30:13Z

frontend/src/components/MainToolbar.vue

+      'cfg',
+      'darkMode'


Suggested change

'cfg',

'darkMode'

'cfg'

holgerkoser · 2021-01-07T14:31:28Z

frontend/src/components/MainToolbar.vue

+    darkModeValue: {
+      get () {
+        return this.darkMode
+      },
+      set (value) {
+        this.setDarkMode(value)
+      }


Suggested change

darkModeValue: {

get () {

return this.darkMode

},

set (value) {

this.setDarkMode(value)

}

darkMode: {

get () {

return this.$store.state.darkMode

},

set (value) {

this.$store.commit('SET_DARK_MODE', value)

}

holgerkoser · 2021-01-07T14:32:44Z

frontend/src/store/index.js

@@ -122,7 +127,8 @@ const state = {
      shortName: 'SC',
      description: 'Indicates whether all system components in the kube-system namespace are up and running. Gardener manages these system components and should automatically take care that the components become healthy again.'
    }
-  }
+  },
+  darkMode: false


Suggested change

darkMode: false

darkMode: (Vuetify.framework.theme.dark = localStorage.getItem('global/dark-mode') === 'true')

holgerkoser · 2021-01-07T14:33:10Z

frontend/src/store/index.js

+  },
+  setDarkMode ({ commit }, darkMode) {
+    commit('SET_DARK_MODE', darkMode)
+    return state.darkMode
+  },
+  initStore ({ commit }) {
+    const darkMode = localStorage.getItem('global/dark-mode') || false
+    commit('SET_DARK_MODE', darkMode)
+    return state


Suggested change

},

setDarkMode ({ commit }, darkMode) {

commit('SET_DARK_MODE', darkMode)

return state.darkMode

},

initStore ({ commit }) {

const darkMode = localStorage.getItem('global/dark-mode') || false

commit('SET_DARK_MODE', darkMode)

return state

holgerkoser · 2021-01-11T09:17:56Z

frontend/src/app.js

@@ -20,22 +20,23 @@ const App = Vue.extend({
        this.$bus.$emit('esc-pressed')
      }
    })
+
+    const darkMode = Vue.localStorage.getItem('global/dark-mode') === 'true'


Suggested change

const darkMode = Vue.localStorage.getItem('global/dark-mode') === 'true'

const darkMode = this.$localStorage.getItem('global/dark-mode') === 'true'

holgerkoser · 2021-01-11T09:21:30Z

frontend/src/store/index.js

+  },
+  getDarkMode (state) {
+    return state.darkMode


Suggested change

},

getDarkMode (state) {

return state.darkMode

holgerkoser · 2021-01-11T09:22:45Z

frontend/src/components/MainToolbar.vue

      get () {
-        return this.darkMode
+        return this.getDarkMode


Suggested change

return this.getDarkMode

return this.$store.state.darkMode

holgerkoser · 2021-01-11T09:23:30Z

frontend/src/components/MainToolbar.vue

    ]),
    ...mapGetters([
      'username',
      'displayName',
      'avatarUrl',
-      'isAdmin'
+      'isAdmin',
+      'getDarkMode'


Suggested change

'getDarkMode'

holgerkoser

/lgtm

valentinvieriu · 2021-01-11T12:21:01Z

Dark mode looks awesome!!!!! Can't wait to enable it!

rfranzke · 2021-01-11T12:57:11Z

Is this synced automatically based on the system settings on MacOS? :)

grolu · 2021-01-11T14:00:30Z

Is this synced automatically based on the system settings on MacOS? :)

Currently not. Maybe we can think about something like this when we introduce user settings.

rfranzke · 2021-01-11T14:05:12Z

Yeah, thanks @grolu, would be great!

grolu added 14 commits November 16, 2020 21:21

Use theme colors for primary, error, warning colors

d5182d9

Theme color for secrets, administration and member page

cf275d3

New, clean login page

2087aaa

Added Secret Background SVG Component

Merge branch 'master' into enh/vue-themes

e214180

# Conflicts: # frontend/src/utils/index.js # frontend/src/views/Members.vue

no message

5ff9562

support dark mode

5dc715d

theme in own js file

7fb7f46

removed unnecessary color properties and fixed secrets background

e51eb5e

Replaced all svg backgrounds with colorizable svg components

40c069e

adjusted unit tests to HintColorizer changes

fb26af1

rm svg sizes

464738f

Introduced dedicated colors for title bars

6e0d6ac

Make all infrastructure icons colorizable svg components

some last fixes

a670b43

Added switch to enable dark mode dark mode support for snotify

Merge branch 'master' into enh/vue-themes

3127a22

grolu requested review from holgerkoser and petersutter as code owners December 3, 2020 20:27

gardener-robot added needs/review Needs review size/xl Size of pull request is huge (see gardener-robot robot/bots/size.py) needs/second-opinion Needs second review by someone else labels Dec 3, 2020

Fixed tests

34bfa05

gardener-robot-ci-3 added the reviewed/ok-to-test Has approval for testing (check PR in detail before setting this label because PR is run on CI/CD) label Dec 4, 2020

gardener-robot-ci-1 removed the reviewed/ok-to-test Has approval for testing (check PR in detail before setting this label because PR is run on CI/CD) label Dec 4, 2020

Some layout changes to login page

1f95037

gardener-robot-ci-2 added the reviewed/ok-to-test Has approval for testing (check PR in detail before setting this label because PR is run on CI/CD) label Dec 4, 2020

gardener-robot-ci-1 removed the reviewed/ok-to-test Has approval for testing (check PR in detail before setting this label because PR is run on CI/CD) label Dec 4, 2020

Merge branch 'master' into enh/vue-themes

3886386

# Conflicts: # frontend/src/components/ShootListRow.vue # frontend/src/views/ShootList.vue Changed hard coded color values to theme colors

gardener-robot-ci-3 added the reviewed/ok-to-test Has approval for testing (check PR in detail before setting this label because PR is run on CI/CD) label Dec 4, 2020

gardener-robot-ci-1 removed the reviewed/ok-to-test Has approval for testing (check PR in detail before setting this label because PR is run on CI/CD) label Jan 7, 2021

Moved dark mode state to store

3f0306c

gardener-robot-ci-2 added reviewed/ok-to-test Has approval for testing (check PR in detail before setting this label because PR is run on CI/CD) and removed reviewed/ok-to-test Has approval for testing (check PR in detail before setting this label because PR is run on CI/CD) labels Jan 7, 2021

react to theme change in yaml editor

81d6b66

gardener-robot-ci-1 added the reviewed/ok-to-test Has approval for testing (check PR in detail before setting this label because PR is run on CI/CD) label Jan 7, 2021

gardener-robot-ci-2 removed the reviewed/ok-to-test Has approval for testing (check PR in detail before setting this label because PR is run on CI/CD) label Jan 7, 2021

holgerkoser reviewed Jan 7, 2021

View reviewed changes

frontend/src/app.js Outdated Show resolved Hide resolved

holgerkoser reviewed Jan 7, 2021

View reviewed changes

changes as discussed

ff35a2f

gardener-robot-ci-1 added reviewed/ok-to-test Has approval for testing (check PR in detail before setting this label because PR is run on CI/CD) and removed reviewed/ok-to-test Has approval for testing (check PR in detail before setting this label because PR is run on CI/CD) labels Jan 7, 2021

holgerkoser reviewed Jan 11, 2021

View reviewed changes

PR Feedback

a2aff64

gardener-robot-ci-3 added reviewed/ok-to-test Has approval for testing (check PR in detail before setting this label because PR is run on CI/CD) and removed reviewed/ok-to-test Has approval for testing (check PR in detail before setting this label because PR is run on CI/CD) labels Jan 11, 2021

Fixed loading indicator style

2a6bb0f

gardener-robot-ci-2 added the reviewed/ok-to-test Has approval for testing (check PR in detail before setting this label because PR is run on CI/CD) label Jan 11, 2021

gardener-robot-ci-3 removed the reviewed/ok-to-test Has approval for testing (check PR in detail before setting this label because PR is run on CI/CD) label Jan 11, 2021

holgerkoser approved these changes Jan 11, 2021

View reviewed changes

gardener-robot added reviewed/lgtm Has approval for merging and removed needs/review Needs review needs/second-opinion Needs second review by someone else labels Jan 11, 2021

grolu merged commit c8de58f into master Jan 11, 2021

petersutter deleted the enh/vue-themes branch January 11, 2021 12:58

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Use Vuetify Themes #898

Use Vuetify Themes #898

grolu commented Dec 3, 2020 •

edited

holgerkoser Jan 7, 2021

holgerkoser Jan 7, 2021

holgerkoser Jan 7, 2021

holgerkoser Jan 7, 2021

holgerkoser Jan 7, 2021

holgerkoser Jan 7, 2021

holgerkoser Jan 11, 2021

holgerkoser Jan 11, 2021

holgerkoser Jan 11, 2021

holgerkoser Jan 11, 2021

holgerkoser left a comment

valentinvieriu commented Jan 11, 2021

rfranzke commented Jan 11, 2021

grolu commented Jan 11, 2021

rfranzke commented Jan 11, 2021

	<v-switch v-model="darkModeValue" dense hide-details class="ma-0" color="primary" @click.native.stop></v-switch>
	<v-switch v-model="darkMode" dense hide-details class="ma-0" color="primary" @click.native.stop></v-switch>

	darkMode: false
	darkMode: (Vuetify.framework.theme.dark = localStorage.getItem('global/dark-mode') === 'true')

	const darkMode = Vue.localStorage.getItem('global/dark-mode') === 'true'
	const darkMode = this.$localStorage.getItem('global/dark-mode') === 'true'

Use Vuetify Themes #898

Use Vuetify Themes #898

Conversation

grolu commented Dec 3, 2020 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

holgerkoser left a comment

Choose a reason for hiding this comment

valentinvieriu commented Jan 11, 2021

rfranzke commented Jan 11, 2021

grolu commented Jan 11, 2021

rfranzke commented Jan 11, 2021

grolu commented Dec 3, 2020 •

edited