UI: Dark mode toggle button on Management Server (#5052)

* add button toggle dark mode

* switch components corresponding to dark mode

* restructure the style dark mode file

* fix collapse & login page

* fix test failed

* fix dark mode styles by refer antd pro

* fix disabled colors of button, input,... & refactor file dark mode styles

* add setting drawer and save it into local storage

* add an alert for save the setting

* add `cursor: pointer`

* hide drawer when init

* change id name of svg icon

* fix after merged 4.15

* edit active color menu item

* fix plaholder color, project chart color & reset setting

* fix event change color picker & error input focus color

* fix empty data color

Author: Hoang Nguyen

ui/public/locales/en.json

@@ -595,6 +595,7 @@
 "label.copy": "Copy",
 "label.copy.clipboard": "Copy to clipboard",
 "label.copy.text": "Copy Text",
+"label.copy.setting.success": "Copy success, Please replace theme setting in public/config.js",
 "label.copyid": "Copy ID",
 "label.copying.iso": "Copying ISO",
 "label.corrections.saved": "Corrections saved",
@@ -646,6 +647,7 @@
 "label.daily": "Daily",
 "label.dashboard": "Dashboard",
 "label.dashboard.endpoint": "Dashboard endpoint",
+"label.dark.mode": "Dark mode",
 "label.data.disk": "Data Disk",
 "label.data.disk.offering": "Data Disk Offering",
 "label.date": "Date",
@@ -1788,6 +1790,7 @@
 "label.reservedsystemnetmask": "Reserved system netmask",
 "label.reservedsystemstartip": "Start Reserved system IP",
 "label.reset": "Reset",
+"label.reset.to.default": "Reset to default",
 "label.reset.ssh.key.pair": "Reset SSH Key Pair",
 "label.reset.ssh.key.pair.on.vm": "Reset SSH Key Pair on VM",
 "label.reset.vpn.connection": "Reset VPN connection",
@@ -1856,6 +1859,7 @@
 "label.save.and.continue": "Save and continue",
 "label.save.changes": "Save changes",
 "label.save.new.rule": "Save new Rule",
+"label.save.setting": "Save setting",
 "label.saving.processing": "Saving....",
 "label.scale.vm": "Scale VM",
 "label.scale.up.policy": "SCALE UP POLICY",
@@ -2102,9 +2106,28 @@
 "label.templatetype": "Template Type",
 "label.tftp.dir": "TFTP Directory",
 "label.tftpdir": "Tftp root directory",
+"label.theme.alert": "The settings panel is only visible in the development environment, please save for the changes to take effect.",
+"label.theme.color": "Theme Color",
+"label.theme.cyan": "Cyan",
+"label.theme.dark": "Dark Style",
+"label.theme.daybreak.blue": "Daybreak Blue",
 "label.theme.default": "Default Theme",
+"label.theme.dust.red": "Dust Red",
+"label.theme.geek.blue": "Geek Blue",
+"label.theme.golden.purple": "Golden Purple",
 "label.theme.grey": "Custom - Grey",
+"label.theme.light": "Light Style",
 "label.theme.lightblue": "Custom - Light Blue",
+"label.theme.navigation.bgColor": "Background Color",
+"label.theme.navigation.setting": "Navigation setting",
+"label.theme.navigation.txtColor": "Text Color",
+"label.theme.page.style.setting": "Page style setting",
+"label.theme.polar.green": "Polar Green",
+"label.theme.project": "Project Style",
+"label.theme.project.navigation.setting": "Project Navigation setting",
+"label.theme.sunset.orange": "Sunset Orange",
+"label.theme.volcano": "Volcano",
+"label.theme.white": "White",
 "label.threshold": "Threshold",
 "label.thursday": "Thursday",
 "label.tier.details": "Tier details",

ui/src/App.vue

@@ -36,7 +36,12 @@ export default {
     }
   },
   created () {
-    window.less.modifyVars(this.$config.theme)
+    const userThemeSetting = this.$store.getters.themeSetting || {}
+    if (Object.keys(userThemeSetting).length === 0) {
+      window.less.modifyVars(this.$config.theme)
+    } else {
+      window.less.modifyVars(userThemeSetting)
+    }
     console.log('config and theme applied')
   }
 }

ui/src/assets/icons/dark.svg

@@ -49,18 +49,8 @@ export default {
 
     .line {
       margin-bottom: 8px;
-
-      a {
-        color: rgba(0, 0, 0, .45);
-
-        &:hover {
-          color: rgba(0, 0, 0, .65);
-        }
-
-      }
     }
     .copyright {
-      color: rgba(0, 0, 0, .45);
       font-size: 14px;
     }
   }

ui/src/assets/icons/light.svg

@@ -63,6 +63,17 @@
       </a-drawer>
     </template>
 
+    <template>
+      <drawer :visible="showSetting" placement="right">
+        <div slot="handler">
+          <a-button type="primary" size="large">
+            <a-icon :type="showSetting ? 'close' : 'setting'"/>
+          </a-button>
+        </div>
+        <setting slot="drawer" :visible="showSetting" />
+      </drawer>
+    </template>
+
     <a-layout :class="[layoutMode, `content-width-${contentWidth}`]" :style="{ paddingLeft: contentPaddingLeft, minHeight: '100vh' }">
       <!-- layout header -->
       <global-header
@@ -94,19 +105,24 @@ import GlobalFooter from '@/components/page/GlobalFooter'
 import { triggerWindowResizeEvent } from '@/utils/util'
 import { mapState, mapActions } from 'vuex'
 import { mixin, mixinDevice } from '@/utils/mixin.js'
+import Drawer from '@/components/widgets/Drawer'
+import Setting from '@/components/view/Setting.vue'
 
 export default {
   name: 'GlobalLayout',
   components: {
     SideMenu,
     GlobalHeader,
-    GlobalFooter
+    GlobalFooter,
+    Drawer,
+    Setting
   },
   mixins: [mixin, mixinDevice],
   data () {
     return {
       collapsed: false,
-      menus: []
+      menus: [],
+      showSetting: false
     }
   },
   computed: {
@@ -129,13 +145,28 @@ export default {
     },
     mainMenu (newMenu) {
       this.menus = newMenu.find((item) => item.path === '/').children
+    },
+    '$store.getters.darkMode' (darkMode) {
+      if (darkMode) {
+        document.body.classList.add('dark-mode')
+      } else {
+        document.body.classList.remove('dark-mode')
+      }
+    }
+  },
+  provide: function () {
+    return {
+      parentToggleSetting: this.toggleSetting
     }
   },
   created () {
     this.menus = this.mainMenu.find((item) => item.path === '/').children
     this.collapsed = !this.sidebarOpened
   },
   mounted () {
+    if (this.$store.getters.darkMode) {
+      document.body.classList.add('dark-mode')
+    }
     const userAgent = navigator.userAgent
     if (userAgent.indexOf('Edge') > -1) {
       this.$nextTick(() => {
@@ -146,6 +177,9 @@ export default {
       })
     }
   },
+  beforeDestroy () {
+    document.body.classList.remove('dark')
+  },
   methods: {
     ...mapActions(['setSidebar']),
     toggle () {
@@ -166,6 +200,9 @@ export default {
       if (!this.isDesktop()) {
         this.collapsed = false
       }
+    },
+    toggleSetting (showSetting) {
+      this.showSetting = showSetting
     }
   }
 }

ui/src/components/page/GlobalFooter.vue

@@ -44,7 +44,11 @@
             :dataSource="Object.keys(detailOptions)"
             :placeholder="$t('label.name')"
             @change="e => onAddInputChange(e, 'newKey')" />
-          <a-input style=" width: 30px; border-left: 0; pointer-events: none; backgroundColor: #fff" placeholder="=" disabled />
+          <a-input
+            class="tag-disabled-input"
+            style=" width: 30px; border-left: 0; pointer-events: none; text-align: center"
+            placeholder="="
+            disabled />
           <a-auto-complete
             class="detail-input"
             :filterOption="filterOption"

ui/src/components/page/GlobalLayout.vue

@@ -620,13 +620,21 @@
                 @keyup.enter="handleInputConfirm"
                 compact>
                 <a-input ref="input" :value="inputKey" @change="handleKeyChange" style="width: 30%; text-align: center" :placeholder="$t('label.key')" />
-                <a-input style=" width: 30px; border-left: 0; pointer-events: none; backgroundColor: #fff" placeholder="=" disabled />
+                <a-input
+                  class="tag-disabled-input"
+                  style="width: 30px; border-left: 0; pointer-events: none; text-align: center"
+                  placeholder="="
+                  disabled />
                 <a-input :value="inputValue" @change="handleValueChange" style="width: 30%; text-align: center; border-left: 0" :placeholder="$t('label.value')" />
                 <tooltip-button :tooltip="$t('label.ok')" icon="check" size="small" @click="handleInputConfirm" />
                 <tooltip-button :tooltip="$t('label.cancel')" icon="close" size="small" @click="inputVisible=false" />
               </a-input-group>
             </div>
-            <a-tag @click="showInput" style="background: #fff; borderStyle: dashed;" v-else-if="isAdminOrOwner() && 'createTags' in $store.getters.apis">
+            <a-tag
+              @click="showInput"
+              class="btn-add-tag"
+              style="borderStyle: dashed;"
+              v-else-if="isAdminOrOwner() && 'createTags' in $store.getters.apis">
               <a-icon type="plus" /> {{ $t('label.new.tag') }}
             </a-tag>
           </div>

ui/src/components/view/DetailSettings.vue

@@ -598,14 +598,6 @@ export default {
 /deep/ .ant-table-small > .ant-table-content > .ant-table-body {
   margin: 0;
 }
-
-/deep/ .light-row {
-  background-color: #fff;
-}
-
-/deep/ .dark-row {
-  background-color: #f9f9f9;
-}
 </style>
 
 <style scoped lang="scss">

ui/src/components/view/InfoCard.vue

@@ -74,7 +74,11 @@
                       size="small"
                       compact>
                       <a-input ref="input" :value="inputKey" @change="e => inputKey = e.target.value" style="width: 50px; text-align: center" :placeholder="$t('label.key')" />
-                      <a-input style=" width: 20px; border-left: 0; pointer-events: none; backgroundColor: #fff" placeholder="=" disabled />
+                      <a-input
+                        class="tag-disabled-input"
+                        style=" width: 20px; border-left: 0; pointer-events: none; text-align: center"
+                        placeholder="="
+                        disabled />
                       <a-input :value="inputValue" @change="handleValueChange" style="width: 50px; text-align: center; border-left: 0" :placeholder="$t('label.value')" />
                       <tooltip-button :tooltip="$t('label.clear')" icon="close" size="small" @click="inputKey = inputValue = ''" />
                     </a-input-group>