Feat/update toned theme (epicmaxco#693)

* feature/toned-down-theme: update color dropdown * feature/toned-down-theme: minor changes * fix color-dropdown styles * update dropdown with toned-color-theme * update tonned colors * update multitheme in app-navbar * update sidebar styles * update topbar styles with toned theme * add shadow to navbar * add tonned vuestic icon to app * fix navbar colors * add theme-config-service * fix billing-adress-tab * remove unnecessary va-select import * update imports in component colors * update dashboard-map component rerender on theme change * update navbar icons for toned theme * update imports in service vuestic-ui * add params to redirect on corporate themes * add color-presentation and spacing playground from vuestic-ui * fix settings dropdown title color * fix blank details tab title color * a bunch of fixes Co-authored-by: Sanya Boriskin <[email protected]> Co-authored-by: Yauheni Prakopchyk <[email protected]>
anumber8 · Dec 31, 2019 · 7e737a9 · 7e737a9
1 parent 94cb2e4
commit 7e737a9
Show file tree

Hide file tree

Showing 33 changed files with 1,039 additions and 163 deletions.
diff --git a/src/app/App.vue b/src/app/App.vue
@@ -5,8 +5,20 @@
 </template>
 
 <script>
+import Vue from 'vue'
+
 export default {
   name: 'app',
+  // Temporary config for 2.1.
+  provide () {
+    return {
+      contextConfig: Vue.observable({
+        gradient: true,
+        shadow: 'lg', // 3 states: 'sm', 'lg', undefined (no shadow).
+        invertedColor: false,
+      }),
+    }
+  },
 }
 </script>
 

diff --git a/src/app/main.js b/src/app/main.js
@@ -17,8 +17,11 @@ import '../metrics'
 import '../registerServiceWorker'
 
 if (process.env.VUE_APP_BUILD_VERSION) {
-  console.info( // eslint-disable-next-line no-undef
-    `%c${'Build_information:'}\n %c${'Version'}: %c${VERSION},\n %c${'Timestamp'}: %c${TIMESTAMP},\n %c${'Commit'}: %c${COMMIT}`,
+  // eslint-disable-next-line
+  const message = `%c${'Build_information:'}\n %c${'Version'}: %c${VERSION},\n %c${'Timestamp'}: %c${TIMESTAMP},\n %c${'Commit'}: %c${COMMIT}`
+  // eslint-disable-next-line
+  console.info(
+    message,
     'color: blue;', 'color: red;', 'color: blue;', 'color: red;', 'color: blue;', 'color: red;', 'color: blue;',
   )
 }
@@ -27,14 +30,9 @@ Vue.use(VuesticPlugin)
 Vue.use(YmapPlugin)
 Vue.use(VueClipboard)
 
-Vue.use(ColorThemePlugin,
-  {
-    // Add or change theme colors here
-    themes: {
-      // primary: '#f06595',
-      // blurple: '#7289DA',
-    },
-  })
+Vue.use(ColorThemePlugin, {
+  // override colors here.
+})
 
 router.beforeEach((to, from, next) => {
   store.commit('setLoading', true)

diff --git a/src/components/admin/AppLayout.vue b/src/components/admin/AppLayout.vue
@@ -76,10 +76,12 @@ export default {
     display: flex;
     flex-wrap: nowrap;
     align-items: stretch;
-    height: 100%;
-  }
+    // TODO Probably there is a better way to achieve this.
+    height: calc(100% - 65px);
 
-  &__sidebar {
+    @include media-breakpoint-down(sm) {
+      height: calc(100% - 110px);
+    }
   }
 
   &__main {
@@ -104,8 +106,5 @@ export default {
       margin: 0;
     }
   }
-
-  &__topbar {
-  }
 }
 </style>
diff --git a/src/components/admin/app-navbar/AppNavbar.vue b/src/components/admin/app-navbar/AppNavbar.vue
@@ -5,22 +5,33 @@
   >
     <div class="app-navbar__content row">
       <div class="app-navbar__menu-container">
-        <span
+        <va-icon-menu
+          class="app-navbar__menu"
+          v-if="!minimized && !isTopBar"
+          @click.native="$emit('update:minimized', !minimized)"
+          :color="contextConfig.invertedColor ? $themes.gray : 'white'"
+        ></va-icon-menu>
+
+        <va-icon-menu-collapsed
           class="app-navbar__menu"
-          v-if="!isTopBar"
-          :class="`i-menu-${minimized ? 'collapsed' : 'expanded'}`"
-          @click="$emit('update:minimized', !minimized)"
-        ></span>
+          v-if="minimized && !isTopBar"
+          @click.native="$emit('update:minimized', !minimized)"
+          :color="contextConfig.invertedColor ? $themes.gray : 'white'"
+        ></va-icon-menu-collapsed>
 
         <router-link
           class="app-navbar__logo mr-3"
           to="/"
         >
-          <va-icon-vuestic/>
+          <va-icon-vuestic-toned v-if="contextConfig.invertedColor"/>
+          <va-icon-vuestic v-else/>
         </router-link>
       </div>
       <div class="app-navbar__center lg5 md4">
-        <span class="app-navbar__text">
+        <span
+          class="app-navbar__text"
+          :style="{color: this.$themes.gray}"
+        >
           {{$t('navbar.messageUs')}}&nbsp;
           <a
             href="mailto:[email protected]"
@@ -56,13 +67,21 @@
 
 <script>
 import VaIconVuestic from '../../../iconset/VaIconVuestic'
+import VaIconVuesticToned from '../../../iconset/VaIconVuesticToned'
+import VaIconMenu from '../../../iconset/VaIconMenu'
+import VaIconMenuCollapsed from '../../../iconset/VaIconMenuCollapsed'
 import AppNavbarActions from './components/AppNavbarActions'
-import { colorShiftHsl } from '../../../services/vuestic-ui'
+import { colorShiftHsl, ColorThemeMixin } from '../../../services/vuestic-ui'
 
 export default {
   name: 'app-navbar',
+  mixins: [ColorThemeMixin],
+  inject: ['contextConfig'],
   components: {
     VaIconVuestic,
+    VaIconVuesticToned,
+    VaIconMenu,
+    VaIconMenuCollapsed,
     AppNavbarActions,
   },
   props: {
@@ -98,14 +117,30 @@ export default {
       },
     },
     navbarStyle () {
-      return {
-        backgroundColor: colorShiftHsl(this.$themes.secondary, { s: -13, l: 15 }).css,
+      const style = {
+        backgroundColor: 'white',
+      }
+
+      if (this.contextConfig.gradient) {
+        style.backgroundColor = colorShiftHsl(this.$themes.secondary, {
+          s: -13,
+          l: 15,
+        }).css
+      }
+
+      if (this.contextConfig.shadow === 'sm') {
+        style.boxShadow = !this.isTopBar ? '0 2px 3px 0 rgba(52, 56, 85, 0.25)' : null
       }
+      return style
     },
 
     shapeStyle () {
       return {
-        borderTopColor: colorShiftHsl(this.$themes.secondary, { h: -1, s: -11, l: 10 }).css,
+        borderTopColor: this.contextConfig.gradient ? colorShiftHsl(this.$themes.secondary, {
+          h: -1,
+          s: -11,
+          l: 10,
+        }).css : 'transparent',
       }
     },
   },
@@ -119,6 +154,7 @@ $nav-border-side-width: 3.1875rem;
   transition: background-color 0.3s ease; /* sidebar's bg color transitions as well -> consistency */
   display: flex;
   padding: 1rem 1rem;
+  z-index: 1;
 
   &__content {
     z-index: 1;
@@ -156,8 +192,7 @@ $nav-border-side-width: 3.1875rem;
     display: flex;
     justify-content: center;
     align-items: center;
-    font-size: 1 rem;
-    padding: 0.3rem 0;
+    font-size: 1rem;
     margin-right: 1.5rem;
   }
 
@@ -222,6 +257,7 @@ $nav-border-side-width: 3.1875rem;
     }
 
     &__actions {
+      margin-top: 1.25rem;
       justify-content: space-between;
       width: 100%;
     }

diff --git a/src/components/admin/app-navbar/components/AppNavbarActions.vue b/src/components/admin/app-navbar/components/AppNavbarActions.vue
@@ -1,5 +1,8 @@
 <template>
-  <div class="app-navbar-actions">
+  <div
+    class="app-navbar-actions"
+    :style="computedActionsStyles"
+  >
     <color-dropdown class="app-navbar-actions__item"/>
     <message-dropdown class="app-navbar-actions__item"/>
     <notification-dropdown class="app-navbar-actions__item"/>
@@ -21,9 +24,12 @@ import NotificationDropdown from './dropdowns/NotificationDropdown'
 import MessageDropdown from './dropdowns/MessageDropdown'
 import ColorDropdown from './dropdowns/ColorDropdown'
 import SettingsDropdown from './dropdowns/SettingsDropdown'
+import { ColorThemeMixin } from '../../../../services/vuestic-ui'
 
 export default {
   name: 'app-navbar-actions',
+  mixins: [ColorThemeMixin],
+  inject: ['contextConfig'],
   components: {
     SettingsDropdown,
     ColorDropdown,
@@ -51,6 +57,11 @@ export default {
         this.$emit('update:isTopBar', isTopBar)
       },
     },
+    computedActionsStyles () {
+      return {
+        color: this.contextConfig.invertedColor ? this.$themes.primary : 'white',
+      }
+    },
   },
 }
 </script>