Typography

slanatech · Apr 23, 2020 · e0ffeed · e0ffeed
1 parent 7c4c086
commit e0ffeed
Show file tree

Hide file tree

Showing 9 changed files with 196 additions and 48 deletions.
diff --git a/src/components/menu/menudrawer.vue b/src/components/menu/menudrawer.vue
@@ -66,6 +66,9 @@ export default {
     shown: function(val) {
       this.$emit('input', val);
     },
+    mini: function(val) {
+      this.miniState = val;
+    },
     miniState: function(val) {
       this.$emit('update:mini', val);
     }

diff --git a/src/components/settings/settings.vue b/src/components/settings/settings.vue
@@ -61,8 +61,18 @@
 
       <q-item tag="label" v-ripple>
         <q-item-section>
-          <q-item-label>Expand Menu</q-item-label>
-          <q-item-label caption>Auto expand menu when hovering</q-item-label>
+          <q-item-label>Minimize Menu</q-item-label>
+          <q-item-label caption>Minimize menu sidebar</q-item-label>
+        </q-item-section>
+        <q-item-section side top>
+          <q-toggle v-model="menuMini" icon="menu" />
+        </q-item-section>
+      </q-item>
+
+      <q-item tag="label" v-ripple>
+        <q-item-section>
+          <q-item-label>Auto-Expand Menu</q-item-label>
+          <q-item-label caption>Auto-expand menu when hovering</q-item-label>
         </q-item-section>
         <q-item-section side top>
           <q-toggle v-model="menuAutoExpand" icon="menu" />
@@ -147,13 +157,22 @@ export default {
       set(value) {
         this.setMenuAutoExpand({ menuAutoExpand: value });
       }
+    },
+    menuMini: {
+      get() {
+        return this.$store.state.layout.menuMini;
+      },
+      set(value) {
+        this.setMenuMini({ menuMini: value });
+      }
     }
   },
   watch: {},
   methods: {
     ...mapActions({
       setDark: 'layout/setDark',
-      setMenuAutoExpand: 'layout/setMenuAutoExpand'
+      setMenuAutoExpand: 'layout/setMenuAutoExpand',
+      setMenuMini: 'layout/setMenuMini'
     }),
     onClose() {
       this.$emit('close');

diff --git a/src/layouts/Default.vue b/src/layouts/Default.vue
@@ -16,15 +16,15 @@
           </template>
         </q-input>
 
-        <q-btn-dropdown dense unelevated v-model="messagesOpen">
-          <template v-slot:label>
-            <div class="row items-center no-wrap">
-              <q-avatar size="sm" icon="mdi-bell">
-                <q-badge color="red" floating>4</q-badge>
-              </q-avatar>
-            </div>
-          </template>
-          <messages @close="messagesOpen = false"></messages>
+        <q-btn dense unelevated icon="mdi-bell" class="q-ma-sm">
+          <q-badge color="red" floating>4</q-badge>
+          <q-menu v-model="messagesOpen">
+            <messages @close="messagesOpen = false"></messages>
+          </q-menu>
+        </q-btn>
+
+        <q-btn-dropdown dense unelevated v-model="settingsOpen" dropdown-icon="settings" class="ub-btn-dropdown-bare q-ma-sm">
+          <settings @close="settingsOpen = false"></settings>
         </q-btn-dropdown>
 
         <q-btn-dropdown unelevated dense v-model="userInfoOpen" no-caps>
@@ -41,10 +41,6 @@
           <user-info></user-info>
         </q-btn-dropdown>
 
-        <q-btn-dropdown dense unelevated v-model="settingsOpen" dropdown-icon="settings" class="ub-btn-dropdown-bare">
-          <settings @close="settingsOpen = false"></settings>
-        </q-btn-dropdown>
-
         <!--
         <q-btn dense flat size="md" round icon="refresh" @click="performRefresh" />
         <q-btn-toggle
@@ -60,7 +56,7 @@
       </q-toolbar>
     </q-header>
 
-    <menu-drawer v-model="leftShown" :mini.sync="leftMini" :auto-expand="menuAutoExpand">
+    <menu-drawer v-model="leftShown" :mini.sync="menuMini" :auto-expand="menuAutoExpand">
       <template v-slot:menu>
         <menu-list :menu-items="menuItems"></menu-list>
       </template>
@@ -98,7 +94,6 @@ export default {
   },
   data() {
     return {
-      leftMini: true,
       leftShown: true,
       rightShown: false,
       settingsOpen: false,
@@ -108,7 +103,7 @@ export default {
       transitionName: '',
       testColors: null,
       menuItems: [
-        { id: '1', title: 'Dashboard', link: '/', icon: 'trending_up' },
+        { id: '1', title: 'Dashboard', link: '/', icon: 'dashboard' },
         { id: '2', title: 'Typography', link: '/typography', icon: 'mdi-format-text' },
         { id: '3', title: 'Forms', link: '/forms', icon: 'mdi-playlist-edit' },
         { id: '4', title: 'Tables', link: '/tables', icon: 'mdi-table' },
@@ -126,38 +121,27 @@ export default {
         { title: 'Last Errors', link: '/lasterrors', icon: 'error_outline' },
         { title: 'Longest Requests', link: '/longestrequests', icon: 'hourglass_empty' }
         */
-      ],
-      refreshOptions: [
-        { icon: 'pause', value: 0 },
-        { label: '1s', value: 1000 },
-        { label: '5s', value: 5000 },
-        { label: '15s', value: 15000 },
-        { label: '30s', value: 30000 },
-        { label: '1m', value: 60000 }
-      ],
-      rotateEnabled: false,
-      rotateCurrent: -1,
-      rotateOptions: ['/', '/requests', '/errors', '/api', '/apiresponses', '/rates', '/payload']
+      ]
     };
   },
   computed: {
     ...mapState({
       menuAutoExpand: state => state.layout.menuAutoExpand
     }),
-    refreshTimeout: {
+    dark: {
       get() {
-        return this.$store.state.refreshTimeout;
+        return this.$store.state.layout.dark;
       },
       set(value) {
-        this.setRefreshTimeout({ timeout: value });
+        this.setDark({ dark: value });
       }
     },
-    dark: {
+    menuMini: {
       get() {
-        return this.$store.state.layout.dark;
+        return this.$store.state.layout.menuMini;
       },
       set(value) {
-        this.setDark({ dark: value });
+        this.setMenuMini({ menuMini: value });
       }
     }
   },
@@ -200,7 +184,8 @@ export default {
   },
   methods: {
     ...mapActions({
-      setDark: 'layout/setDark'
+      setDark: 'layout/setDark',
+      setMenuMini: 'layout/setMenuMini'
     })
   }
 };

diff --git a/src/quasar.js b/src/quasar.js
@@ -70,7 +70,8 @@ import {
   QDialog,
   QVirtualScroll,
   QSkeleton,
-  QImg
+  QImg,
+  QMenu
 } from 'quasar';
 
 Vue.use(Quasar, {
@@ -128,7 +129,8 @@ Vue.use(Quasar, {
     QDialog,
     QVirtualScroll,
     QSkeleton,
-    QImg
+    QImg,
+    QMenu
   },
   directives: {
     Ripple,

diff --git a/src/router.js b/src/router.js
@@ -4,6 +4,7 @@ import DefaultLayout from './layouts/Default.vue';
 import Home from './views/Home.vue';
 import About from './views/About.vue';
 import DashblocksShowcase from './views/DashblocksShowcase.vue';
+import Typography from './views/typography.vue';
 
 Vue.use(Router);
 
@@ -19,9 +20,9 @@ export default new Router({
           component: DashblocksShowcase
         },
         {
-          path: '/about',
-          name: 'about',
-          component: About
+          path: '/typography',
+          name: 'typography',
+          component: Typography
         }
       ]
     }

diff --git a/src/store/modules/layout.js b/src/store/modules/layout.js
@@ -4,7 +4,8 @@
 
 const state = {
   dark: (localStorage['ub-dark-mode'] || 'false') === 'true',
-  menuAutoExpand: (localStorage['ub-menu-auto-expand'] || 'false') === 'true'
+  menuAutoExpand: (localStorage['ub-menu-auto-expand'] || 'false') === 'true',
+  menuMini: (localStorage['ub-menu-mini'] || 'false') === 'true'
 };
 
 const getters = {};
@@ -17,6 +18,10 @@ const mutations = {
   SET_MENU_AUTO_EXPAND(state, { menuAutoExpand }) {
     localStorage['ub-menu-auto-expand'] = menuAutoExpand;
     state.menuAutoExpand = menuAutoExpand;
+  },
+  SET_MENU_MINI(state, { menuMini }) {
+    localStorage['ub-menu-mini'] = menuMini;
+    state.menuMini = menuMini;
   }
 };
 
@@ -26,6 +31,9 @@ const actions = {
   },
   setMenuAutoExpand({ commit }, { menuAutoExpand }) {
     commit('SET_MENU_AUTO_EXPAND', { menuAutoExpand: menuAutoExpand });
+  },
+  setMenuMini({ commit }, { menuMini }) {
+    commit('SET_MENU_MINI', { menuMini: menuMini });
   }
 };
 

diff --git a/src/styles/quasar.scss b/src/styles/quasar.scss
@@ -60,7 +60,7 @@ a:hover {
   background: linear-gradient(to right, #2c5364, #203a43, #0f2027); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
 }
 
-.db-page {
+.ub-page {
   @media (max-width: $breakpoint-xs-max) {
     padding: 4px 8px 8px 8px;
   }

diff --git a/src/views/DashblocksShowcase.vue b/src/views/DashblocksShowcase.vue
@@ -1,5 +1,5 @@
 <template>
-  <q-page class="db-page">
+  <q-page class="ub-page">
     <db-dashboard v-if="ready" :dbspec="dbspec" :dbdata="dbdata" :dark="isDark"> </db-dashboard>
   </q-page>
 </template>
@@ -58,8 +58,18 @@ export default {
               ]
             }
           },
-          { id: 'w53', type: 'DbNumber', cspan: 4, properties: { title: 'Current Req Rate', subtitle: 'Requests per second', format: '%.2f', icon: 'fa fa-exchange-alt' } },
-          { id: 'w54', type: 'DbNumber', cspan: 4, properties: { title: 'Current Err Rate', subtitle: 'Errors per second', format: '%.2f', icon: 'fa fa-exclamation' } },
+          {
+            id: 'w53',
+            type: 'DbNumber',
+            cspan: 4,
+            properties: { title: 'Current Req Rate', subtitle: 'Requests per second', format: '%.2f', icon: 'fa fa-exchange-alt' }
+          },
+          {
+            id: 'w54',
+            type: 'DbNumber',
+            cspan: 4,
+            properties: { title: 'Current Err Rate', subtitle: 'Errors per second', format: '%.2f', icon: 'fa fa-exclamation' }
+          },
 
           {
             id: 'w8',