Add theme and fix UI

frontend/src/App.vue

@@ -33,15 +33,18 @@ export default {
 </script>
 
 <style lang="stylus">
+@import '~style/variables';
+@import '../style/main';
+@import url('https://fonts.googleapis.com/css?family=Merriweather+Sans:400,700');
+
 #app {
-  font-family: 'Avenir', Helvetica, Arial, sans-serif;
+  font-family: 'Merriweather Sans', Helvetica, Arial, sans-serif;
+  font-weight: 700;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
+  color: $-content-text-color;
 }
 
-@import './style/variables';
 +prefix-classes('visual-dl-page-')
     .container
         padding-right 250px
@@ -50,8 +53,8 @@ export default {
         .left
             width 100%
             overflow scroll
-            border solid 1px $-left-border-clor
-            background $-left-border-clor
+            border solid 1px $-left-border-color
+            background $-left-border-color
             min-height 300px
             padding 2%
             box-sizing border-box
@@ -63,6 +66,7 @@ export default {
             right 0
             top 0
             box-sizing border-box
+            font-size 13px
             .config-com
                 color $-right-font-color
 

frontend/src/common/component/AppMenu.vue

@@ -1,13 +1,14 @@
 <template>
     <div>
         <div class="visual-dl-app-menu">
-            <v-toolbar dark color="teal">
+            <v-toolbar color="primary" dark>
                 <v-toolbar-title class="appbar-menu-title"></v-toolbar-title>
-                <v-spacer></v-spacer>
-                <v-btn v-for="item in items" :key="item.name"
-                :class="[selected === item.name ? 'menu-item-selected': '', 'menu-item']"
-                @click="handleItemClick(item)"
-                >{{ item.title}}</v-btn>
+                <v-toolbar-items>
+                    <v-btn v-for="item in items" :key="item.name"
+                    flat dark :class="selected === item.name ? 'menu-item-selected': 'menu-item'"
+                    @click="handleItemClick(item)"
+                    >{{ item.title}}</v-btn>
+                </v-toolbar-items>
             </v-toolbar>
         </div>
     </div>
@@ -54,30 +55,31 @@ export default {
 </script>
 
 <style scoped lang="stylus">
+@import '~style/variables';
 
 .visual-dl-app-menu
     .appbar-menu-title
-        font-size 24px
         flex none
         margin-right 50px
-    .appbar-menu-title
         background url('./visualdl-logo.png') no-repeat
         background-size cover
         width 120px
         height 50px
 
     .menu-item
-        padding 0 30px
+        font-size 16px
+        background none
+        padding 0 10px
         color #fff
         opacity 0.6
         display flex
         flex-direction row
+        font-weight bold
 
     .menu-item:hover
-        background none
         opacity 1
 
     .menu-item-selected
-        color #fff
+        @extends .visual-dl-app-menu .menu-item
         opacity 1
 </style>

frontend/src/common/component/ExpandPanel.vue

@@ -46,7 +46,6 @@ export default {
 </script>
 <style lang="stylus">
     .visual-dl-expand-panel
-        text-align left
         .visual-dl-expand-head
             border solid 1px #ccc
             line-height 50px

frontend/src/histogram/ui/Chart.vue

@@ -3,7 +3,7 @@
         <div class="visual-dl-chart-box" ref="visual_dl_chart_box">
         </div>
         <div class="visual-dl-chart-actions">
-            <v-btn class="sm-button" @click="expandArea">
+            <v-btn flat class="sm-button" @click="expandArea">
                 <v-icon size="20">settings_overscan</v-icon>
             </v-btn>
         </div>

frontend/src/images/ui/ChartPage.vue

@@ -67,7 +67,7 @@ export default {
 };
 </script>
 <style lang="stylus">
-@import '../../style/variables';
+@import '~style/variables';
 
 +prefix-classes('visual-dl-')
     .chart-page

frontend/src/index.js

@@ -28,16 +28,20 @@ import Vue from 'vue'
 import App from './App'
 import Vuetify from 'vuetify'
 import('vuetify/dist/vuetify.min.css')
-import AppMenu from '@/common/component/AppMenu'
 import router from '@/router'
 Vue.config.productionTip = false
 
-Vue.use(Vuetify)
+Vue.use(Vuetify, {
+    theme: {
+        primary: '#008c99',
+        accent: '#008c99'
+    }
+})
 
 /* eslint-disable no-new */
 new Vue({
-  el: '#root',
-  router,
-  components: { App },
-  template: '<App/>',
+    el: '#root',
+    router,
+    components: {App},
+    template: '<App/>',
 })

frontend/src/scalars/ui/Chart.vue

@@ -3,7 +3,7 @@
         <div ref="chartBox" class="visual-dl-chart-box" :style="computedStyle">
         </div>
         <div class="visual-dl-chart-actions">
-            <v-btn @click="expandArea">
+            <v-btn flat @click="expandArea">
                 <v-icon size="20">settings_overscan</v-icon>
             </v-btn>
             <v-select
@@ -191,7 +191,8 @@ export default {
                 title: {
                     text: tag,
                     textStyle: {
-                        fontSize: '12'
+                        fontSize: '12',
+                        fontFamily: 'Merriweather Sans'
                     }
                 },
                 tooltip: {
@@ -554,7 +555,7 @@ export default {
 
             let headerHtml = '<tr style="font-size:14px;">';
             headerHtml += Object.keys(transformedData[0]).map(key => {
-                return '<td style="padding: 0 4px; font-weight: bold; width:' + widthPropMap[key] + 'px;">' + key + '</td>';
+                return '<td style="padding: 0 4px; font-family: \'Merriweather Sans\'; font-weight: bold; width:' + widthPropMap[key] + 'px;">' + key + '</td>';
             }).join('');
             headerHtml += '</tr>';
 

frontend/src/scalars/ui/ChartPage.vue

@@ -72,7 +72,7 @@ export default {
 };
 </script>
 <style lang="stylus">
-@import '../../style/variables';
+@import '~style/variables';
 
 +prefix-classes('visual-dl-')
     .chart-page

frontend/src/style/main.styl

@@ -0,0 +1,3 @@
+$input-font-size = 12px
+
+@import '../../node_modules/vuetify/src/stylus/main'

frontend/src/style/variables.styl

@@ -8,6 +8,6 @@ $-left-background-color = #303a3a
 
 $-content-text-color = #303a3a
 
-$-left-border-clor = #e9e9e9
+$-left-border-color = #e9e9e9
 
-$-right-font-color = #ccc
+$-right-font-color = #e9e9e9

frontend/tool/webpack.config.js

@@ -49,6 +49,7 @@ const config = {
             axios: 'axios/dist/axios.min.js',
             'vue$': 'vue/dist/vue.esm.js',
             '@': path.resolve(projectPath, 'src'),
+            style: path.resolve(__dirname, '../src/style')
         },
 
         extensions: ['.js', '.json', '.styl', '.css', '.html', '.vue']