dashboard: fix styling and enhancements (#8)

M. Weber · yadvr · commit 33df072505a2 · 2021-01-20T07:06:12.000+05:30
Refactoring, visual enhancements and extend readme.

Signed-off-by: Rohit Yadav &lt;rohit.yadav@shapeblue.com&gt;
diff --git a/ui/README.md b/ui/README.md
@@ -12,6 +12,8 @@ Install tools and dependencies:
 
 Build and run:
 
+    npm start
+    or
     npm run serve
 
 Production Build:
diff --git a/ui/src/components/page/GlobalLayout.vue b/ui/src/components/page/GlobalLayout.vue
@@ -152,3 +152,30 @@ export default {
   }
 }
 </script>
+
+<style lang="less">
+// Todo try to get this rules scoped
+.ant-drawer.drawer-sider {
+  .sider {
+    box-shadow: none;
+  }
+
+  &.dark {
+    .ant-drawer-content {
+      background-color: rgb(0, 21, 41);
+    }
+  }
+
+  &.light {
+    box-shadow: none;
+
+    .ant-drawer-content {
+      background-color: #fff;
+    }
+  }
+
+  .ant-drawer-body {
+    padding: 0
+  }
+}
+</style>
diff --git a/ui/src/components/page/SHeaderNotice.vue b/ui/src/components/page/SHeaderNotice.vue
@@ -48,9 +48,10 @@ export default {
 </script>
 
 <style lang="less" scoped>
-  .header-notice{
+  .header-notice {
     display: inline-block;
     transition: all 0.3s;
+
     span {
       vertical-align: initial;
     }
diff --git a/ui/src/components/tools/Breadcrumb.vue b/ui/src/components/tools/Breadcrumb.vue
@@ -42,6 +42,10 @@ export default {
 }
 </script>
 
-<style scoped>
-
+<style lang="less" scoped>
+  .breadcrumb {
+    .mobile & {
+      display: none;
+    }
+  }
 </style>
diff --git a/ui/src/components/tools/HeaderNotice.vue b/ui/src/components/tools/HeaderNotice.vue
@@ -5,7 +5,7 @@
     placement="bottomRight"
     :autoAdjustOverflow="true"
     :arrowPointAtCenter="true"
-    overlayClassName="header-notice-wrapper"
+    overlayClassName="ant-pro-header-notice__popover"
     :overlayStyle="{ width: '300px', top: '50px' }">
     <template slot="content">
       <a-spin :spinning="loadding">
@@ -38,9 +38,9 @@
         </a-tabs>
       </a-spin>
     </template>
-    <span @click="fetchNotice" class="header-notice">
+    <span @click="fetchNotice" class="ant-pro-header-notice__opener">
       <a-badge count="12">
-        <a-icon style="font-size: 16px; padding: 4px" type="bell" />
+        <a-icon class="ant-pro-header-notice__icon" type="bell" />
       </a-badge>
     </span>
   </a-popover>
@@ -71,18 +71,34 @@ export default {
 }
 </script>
 
-<style lang="css">
-  .header-notice-wrapper {
-    top: 50px !important;
-  }
-</style>
 <style lang="less" scoped>
-  .header-notice{
+  .header-notice {
     display: inline-block;
     transition: all 0.3s;
 
     span {
       vertical-align: initial;
     }
   }
+
+  .ant-pro-header-notice {
+
+    &__popover {
+      top: 50px !important;
+    }
+
+    &__opener {
+      display: inline-block;
+      transition: all 0.3s;
+
+      span {
+        vertical-align: initial;
+      }
+    }
+
+    &__icon {
+      font-size: 18px;
+      padding: 4px;
+    }
+  }
 </style>
diff --git a/ui/src/components/tools/TranslationMenu.vue b/ui/src/components/tools/TranslationMenu.vue
@@ -1,7 +1,7 @@
 <template>
 
   <a-dropdown>
-    <span class="action ant-dropdown-link">
+    <span class="action ant-dropdown-link ant-pro-translation-menu">
       <a-icon type="global"></a-icon>
     </span>
     <a-menu slot="overlay" @click="onClick">
diff --git a/ui/src/components/tools/UserMenu.vue b/ui/src/components/tools/UserMenu.vue
@@ -76,3 +76,27 @@ export default {
   }
 }
 </script>
+
+<style lang="less" scoped>
+  .user-dropdown-menu {
+    span {
+      user-select: none;
+    }
+  }
+
+  .user-dropdown-menu-wrapper.ant-dropdown-menu {
+    padding: 4px 0;
+
+    .ant-dropdown-menu-item {
+      width: 160px;
+    }
+
+    .ant-dropdown-menu-item > .anticon:first-child,
+    .ant-dropdown-menu-item > a > .anticon:first-child,
+    .ant-dropdown-menu-submenu-title > .anticon:first-child .ant-dropdown-menu-submenu-title > a > .anticon:first-child {
+      min-width: 12px;
+      margin-right: 8px;
+    }
+
+  }
+</style>
diff --git a/ui/src/components/tools/setting.js b/ui/src/components/tools/setting.js
@@ -87,9 +87,10 @@ const updateTheme = primaryColor => {
   }
 }
 
-const updateColorWeak = colorWeak => {
-  // document.body.className = colorWeak ? 'colorWeak' : '';
-  colorWeak ? document.body.classList.add('colorWeak') : document.body.classList.remove('colorWeak')
+const updateInvertedMode = invertedMode => {
+  invertedMode = true;
+  console.log(invertedMode);
+  invertedMode ? document.body.classList.add('layout-inverted-mode') : document.body.classList.remove('layout-inverted-mode')
 }
 
-export { updateTheme, colorList, updateColorWeak }
+export { updateTheme, colorList, updateInvertedMode }
diff --git a/ui/src/config/defaultSettings.js b/ui/src/config/defaultSettings.js
@@ -6,7 +6,7 @@ export default {
   fixedHeader: true, // sticky header
   fixSiderbar: true, // sticky siderbar
   autoHideHeader: false, //  auto hide header
-  colorWeak: false,
+  invertedMode: true,
   multiTab: false, // enable to have tab/route history stuff
   // CloudStack options
   apiBase: '/client/api',
diff --git a/ui/src/core/bootstrap.js b/ui/src/core/bootstrap.js
@@ -6,7 +6,7 @@ import {
   DEFAULT_COLOR,
   DEFAULT_THEME,
   DEFAULT_LAYOUT_MODE,
-  DEFAULT_COLOR_WEAK,
+  DEFAULT_COLOR_INVERTED,
   SIDEBAR_TYPE,
   DEFAULT_FIXED_HEADER,
   DEFAULT_FIXED_HEADER_HIDDEN,
@@ -24,7 +24,7 @@ export default function Initializer () {
   store.commit('TOGGLE_FIXED_SIDERBAR', Vue.ls.get(DEFAULT_FIXED_SIDEMENU, config.fixSiderbar))
   store.commit('TOGGLE_CONTENT_WIDTH', Vue.ls.get(DEFAULT_CONTENT_WIDTH_TYPE, config.contentWidth))
   store.commit('TOGGLE_FIXED_HEADER_HIDDEN', Vue.ls.get(DEFAULT_FIXED_HEADER_HIDDEN, config.autoHideHeader))
-  store.commit('TOGGLE_WEAK', Vue.ls.get(DEFAULT_COLOR_WEAK, config.colorWeak))
+  store.commit('TOGGLE_INVERTED', Vue.ls.get(DEFAULT_COLOR_INVERTED, config.invertedMode))
   store.commit('TOGGLE_COLOR', Vue.ls.get(DEFAULT_COLOR, config.primaryColor))
   store.commit('TOGGLE_MULTI_TAB', Vue.ls.get(DEFAULT_MULTI_TAB, config.multiTab))
   store.commit('SET_TOKEN', Vue.ls.get(ACCESS_TOKEN))
diff --git a/ui/src/store/modules/app.js b/ui/src/store/modules/app.js
@@ -4,7 +4,7 @@ import {
   DEFAULT_THEME,
   DEFAULT_LAYOUT_MODE,
   DEFAULT_COLOR,
-  DEFAULT_COLOR_WEAK,
+  DEFAULT_COLOR_INVERTED,
   DEFAULT_FIXED_HEADER,
   DEFAULT_FIXED_SIDEMENU,
   DEFAULT_FIXED_HEADER_HIDDEN,
@@ -23,7 +23,7 @@ const app = {
     fixSiderbar: false,
     autoHideHeader: false,
     color: null,
-    weak: false,
+    inverted: true,
     multiTab: true
   },
   mutations: {
@@ -67,9 +67,9 @@ const app = {
       Vue.ls.set(DEFAULT_COLOR, color)
       state.color = color
     },
-    TOGGLE_WEAK: (state, flag) => {
-      Vue.ls.set(DEFAULT_COLOR_WEAK, flag)
-      state.weak = flag
+    TOGGLE_INVERTED: (state, flag) => {
+      Vue.ls.set(DEFAULT_COLOR_INVERTED, flag)
+      state.inverted = flag
     },
     TOGGLE_MULTI_TAB: (state, bool) => {
       Vue.ls.set(DEFAULT_MULTI_TAB, bool)
@@ -110,8 +110,8 @@ const app = {
     ToggleColor ({ commit }, color) {
       commit('TOGGLE_COLOR', color)
     },
-    ToggleWeak ({ commit }, weakFlag) {
-      commit('TOGGLE_WEAK', weakFlag)
+    ToggleInverted ({ commit }, invertedFlag) {
+      commit('TOGGLE_INVERTED', invertedFlag)
     },
     ToggleMultiTab ({ commit }, bool) {
       commit('TOGGLE_MULTI_TAB', bool)
diff --git a/ui/src/store/mutation-types.js b/ui/src/store/mutation-types.js
@@ -4,7 +4,7 @@ export const SIDEBAR_TYPE = 'SIDEBAR_TYPE'
 export const DEFAULT_THEME = 'DEFAULT_THEME'
 export const DEFAULT_LAYOUT_MODE = 'DEFAULT_LAYOUT_MODE'
 export const DEFAULT_COLOR = 'DEFAULT_COLOR'
-export const DEFAULT_COLOR_WEAK = 'DEFAULT_COLOR_WEAK'
+export const DEFAULT_COLOR_INVERTED = 'DEFAULT_COLOR_INVERTED'
 export const DEFAULT_FIXED_HEADER = 'DEFAULT_FIXED_HEADER'
 export const DEFAULT_FIXED_SIDEMENU = 'DEFAULT_FIXED_SIDEMENU'
 export const DEFAULT_FIXED_HEADER_HIDDEN = 'DEFAULT_FIXED_HEADER_HIDDEN'
diff --git a/ui/src/style/README.md b/ui/src/style/README.md
@@ -24,13 +24,16 @@
 2. common
     - include all rules that reset styles, define global stuffs without classes at all
     - e.g. body {} p, ul, li {} h1, h2, h3 {}
-3. frame
+3. ant-overwrite
+    - any styles that overwrites the existin ant rules by any reason
+    - e.g. classes like .ant-layout-header .anticon {}
+4. frame
     - everything that belongs to the frame
     - e.g. header, footer, nav, sider, content (just the actual content frame, not every component in it)
-4. layout
+5. layout
     - rules that modify the page at all if new layout class is set.
     - e.g. #html class="layout-ant-black"#
-5. objects
-    - repeatly used elements like buttons, inputs,
-6. components
+6. objects
+    - repeatly used elements like buttons, inputs
+7. components
     - complex elements like dropdown, forms, table, search (usualy include this to components/FooterToolbar/ folder)
diff --git a/ui/src/style/ant-overwrite/ant-layout-header.less b/ui/src/style/ant-overwrite/ant-layout-header.less
@@ -0,0 +1,33 @@
+.ant-layout-header {
+  .anticon-menu-fold {
+    font-size: 18px;
+    line-height: 1;
+  }
+
+  .ant-breadcrumb .anticon {
+    margin-top: -3px;
+    margin-left: 12px;
+  }
+
+  .anticon-home {
+    font-size: 18px;
+  }
+
+  .anticon {
+    vertical-align: middle;
+  }
+}
+
+.ant-menu {
+
+  .ant-menu-item .anticon,
+  .ant-menu-submenu-title .anticon {
+    font-size: 18px!important; // overwrite ant-menu collaped defaults
+    margin-right: 12px;
+    vertical-align: sub;
+  }
+}
+
+.ant-badge-count {
+  top: -15px;
+}
diff --git a/ui/src/style/ant-overwrite/ant-progress.less b/ui/src/style/ant-overwrite/ant-progress.less
@@ -0,0 +1,4 @@
+.ant-progress-circle .ant-progress-text {
+  font-size: 16px;
+  transform: translateY(-67%); // position text centered to down cut off progress circle
+}
diff --git a/ui/src/style/common/common.less b/ui/src/style/common/common.less
@@ -1,7 +1,3 @@
 body {
   overflow-y: scroll;
-
-  &.colorWeak {
-    filter: invert(80%);
-  }
 }
diff --git a/ui/src/style/component/ant-drawer.less b/ui/src/style/component/ant-drawer.less
diff --git a/ui/src/style/component/dashboard.less b/ui/src/style/component/dashboard.less
@@ -0,0 +1,36 @@
+.ant-pro-capacity-dashboard {
+  &__wrapper {
+    display: flex;
+    margin-bottom: 24px;
+    flex-wrap: nowrap;
+
+    .mobile & {
+      flex-wrap: wrap;
+    }
+  }
+
+  &__select {
+    width: 100%;
+    padding: 0 12px;
+
+    .mobile & {
+      margin-bottom: 12px;
+    }
+  }
+
+  &__button {
+    width: auto;
+    padding: 0 12px;
+  }
+
+  &__tile-wrapper:after {
+    content: "";
+    clear: both;
+    display: table;
+  }
+
+  &__alert-wrapper {
+    clear: both;
+    padding: 0 12px;
+  }
+}
diff --git a/ui/src/style/frame/header/header-notice.less b/ui/src/style/frame/header/header-notice.less
diff --git a/ui/src/style/frame/header/translation-menu.less b/ui/src/style/frame/header/translation-menu.less
@@ -0,0 +1,4 @@
+.ant-pro-translation-menu {
+  font-size: 18px;
+  line-height: 1;
+}
diff --git a/ui/src/style/frame/user-dropdown.less b/ui/src/style/frame/user-dropdown.less
diff --git a/ui/src/style/index.less b/ui/src/style/index.less
diff --git a/ui/src/style/layout/ant.less b/ui/src/style/layout/ant.less
diff --git a/ui/src/style/layout/inverted-mode.less b/ui/src/style/layout/inverted-mode.less
diff --git a/ui/src/utils/mixin.js b/ui/src/utils/mixin.js
diff --git a/ui/src/views/dashboard/CapacityDashboard.vue b/ui/src/views/dashboard/CapacityDashboard.vue

Original file line number	Diff line number	Diff line change
`@@ -87,9 +87,10 @@ const updateTheme = primaryColor => {`
`87`	`87`	`}`
`88`	`88`	`}`
`89`	`89`
`90`		`-const updateColorWeak = colorWeak => {`
`91`		`- // document.body.className = colorWeak ? 'colorWeak' : '';`
`92`		`- colorWeak ? document.body.classList.add('colorWeak') : document.body.classList.remove('colorWeak')`
	`90`	`+const updateInvertedMode = invertedMode => {`
	`91`	`+ invertedMode = true;`
	`92`	`+ console.log(invertedMode);`
	`93`	`+ invertedMode ? document.body.classList.add('layout-inverted-mode') : document.body.classList.remove('layout-inverted-mode')`
`93`	`94`	`}`
`94`	`95`
`95`		`-export { updateTheme, colorList, updateColorWeak }`
	`96`	`+export { updateTheme, colorList, updateInvertedMode }`