styling, locale in local storage

szczepanmasny · szczepanmasny · commit a68c610d16dc · 2018-12-01T18:05:07.000+01:00
diff --git a/index.html b/index.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
-    <title>Vue.js based CRUD</title>
+    <title>Vue CRUD</title>
     <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons" rel="stylesheet" type="text/css">
   </head>
   <body>
diff --git a/src/crud/components/ChildrenTable.vue b/src/crud/components/ChildrenTable.vue
@@ -24,7 +24,7 @@
 
           <!-- Search by fields -->
           <v-menu offset-y :close-on-content-click="false">
-            <v-btn small fab dark slot="activator" :style="'background-color: ' + $store.state.primaryColor">
+            <v-btn small fab dark slot="activator" class="primary">
               <v-icon>filter_list</v-icon>
             </v-btn>
             <v-list style="overflow-y:false;">
@@ -112,7 +112,7 @@
     </v-data-table>
     <div class="details-loader-container">
       <v-layout v-if="loader" class="details-loader" justify-center align-center>
-        <v-progress-circular indeterminate :size="100" :width="3" :color="$store.state.primaryColor"></v-progress-circular>
+        <v-progress-circular indeterminate :size="100" :width="3" color="primary"></v-progress-circular>
       </v-layout>
     </div>
   </v-card>
diff --git a/src/crud/components/Crud.vue b/src/crud/components/Crud.vue
@@ -19,7 +19,7 @@
     </div>
     <div class="details-loader-container">
       <v-layout v-if="detailsLoading" class="details-loader" justify-center align-center>
-        <v-progress-circular indeterminate :size="100" :width="3" :class="$store.state.primaryColor"></v-progress-circular>
+        <v-progress-circular indeterminate :size="100" :width="3" color="primary"></v-progress-circular>
       </v-layout>
     </div>
   </div>
diff --git a/src/crud/components/DataTableClientSide.vue b/src/crud/components/DataTableClientSide.vue
@@ -68,7 +68,7 @@
         <v-flex xs12 lg8 text-xs-left text-lg-right>
           <!-- Search by fields -->
           <v-menu offset-y :close-on-content-click="false">
-            <v-btn small fab dark slot="activator" :style="'background-color: ' + $store.state.primaryColor">
+            <v-btn small fab dark slot="activator" class="primary">
               <v-icon>filter_list</v-icon>
             </v-btn>
             <v-list style="overflow-y:false;">
diff --git a/src/crud/components/DataTableServerSide.vue b/src/crud/components/DataTableServerSide.vue
@@ -48,7 +48,7 @@
 
           <!-- Search by fields -->
           <v-menu offset-y :close-on-content-click="false">
-            <v-btn small fab dark slot="activator" :style="'background-color: ' + $store.state.primaryColor">
+            <v-btn small fab dark slot="activator" class="primary">
               <v-icon>filter_list</v-icon>
             </v-btn>
             <v-list style="overflow-y:false;">
diff --git a/src/crud/components/ItemDetailsContainer.vue b/src/crud/components/ItemDetailsContainer.vue
@@ -1,7 +1,7 @@
 <template>
   <v-dialog v-model="detailsDialog" fullscreen transition="dialog-bottom-transition" :overlay=true>
     <v-card class="dialog-content">
-      <v-toolbar style="flex: 0 0 auto;" dark :class="$store.state.primaryColor">
+      <v-toolbar style="flex: 0 0 auto;" dark class="primary">
         <v-toolbar-title>{{ title }}</v-toolbar-title>
         <v-spacer></v-spacer>
         <v-btn icon @click.native="close()" dark>
@@ -15,7 +15,7 @@
           </v-flex>
           <v-flex xs12 lg7 pa-3>
             <v-card class="children-tabs">
-              <v-tabs :color="$store.state.secondaryColor" dark :slider-color="$store.state.primaryColor">
+              <v-tabs color="secondary" dark slider-color="primary">
                 <slot></slot>
               </v-tabs>
             </v-card>
diff --git a/src/crud/components/ItemDetailsExtended.vue b/src/crud/components/ItemDetailsExtended.vue
@@ -1,11 +1,11 @@
 <template>
   <v-card>
-    <v-card-text dark :class="$store.state.secondaryColor" class="white--text">
+    <v-card-text dark class="secondary white--text">
       <h4 style="text-transform:uppercase;">{{ title }}</h4>
     </v-card-text>
     <v-card-text class="details-container">
       <v-layout row wrap>
-        <v-flex :class="field.grid" v-for="(field, i) in fields" :key="i" pr-2>
+        <v-flex class="field" :class="field.grid" v-for="(field, i) in fields" :key="i" pr-2>
 
           <!-- divider -->
           <h3 v-if="field.type == 'divider'" class="text-xs-center section-header">{{ field.text }}</h3>
@@ -272,4 +272,9 @@ export default {
   color: rgba(0, 0, 0, 0.54);
   font-size: 16px;
 }
+.field {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
 </style>
diff --git a/src/locales/index.js b/src/locales/index.js
@@ -13,6 +13,6 @@ const messages = {
 }
 
 export default new VueI18n({
-  locale: store.state.locale,
+  locale: store.getters.lng,
   messages,
 })
diff --git a/src/main.js b/src/main.js
@@ -10,7 +10,17 @@ import { config } from '@/config.js'
 
 Vue.config.productionTip = false
 
-Vue.use(Vuetify)
+Vue.use(Vuetify, {
+  theme: {
+    primary: '#34495e',
+    secondary: '#41b883',
+    accent: '#82B1FF',
+    error: '#FF5252',
+    info: '#2196F3',
+    success: '#4CAF50',
+    warning: '#FFC107'
+  }
+})
 Vue.use(vueResource)
 
 Vue.http.options.emulateJSON = true;
diff --git a/src/routes/login/Index.vue b/src/routes/login/Index.vue
@@ -1,15 +1,15 @@
 <template>
   <v-layout v-if="loginWait" class="login-loader" justify-center align-center>
-    <v-progress-circular indeterminate v-bind:size="100" v-bind:width="5" :style="'color: ' + $store.state.primaryColor"></v-progress-circular>
+    <v-progress-circular indeterminate v-bind:size="100" v-bind:width="5" color="primary"></v-progress-circular>
   </v-layout>
-  <v-layout v-else row wrap class="white" :style="'color: ' + $store.state.primaryColor" ma-3>
+  <v-layout v-else row wrap class="white" color="primary" ma-3>
     <v-flex xs10 offset-xs1 sm8 offset-sm2 md6 offset-md3 lg4 offset-lg4 xl2 offset-xl5 class="parent text-xs-center">
       <img class="logo" :src="require(`@/assets/images/${$store.state.logoLg}`)">
       <h1 class="app-title">{{ $t('login.title') }}</h1>
       <template>
         <v-form v-model="valid" ref="form" lazy-validation v-on:submit.prevent>          
           <v-menu bottom left v-if="$store.state.localeSelectable">
-            <v-btn icon slot="activator" dark :style="'background-color: ' + $store.state.secondaryColor">
+            <v-btn icon slot="activator" dark class="secondary">
               <v-icon>translate</v-icon>
             </v-btn>
             <v-list>
@@ -21,7 +21,7 @@
           <v-text-field :label="$t('login.email')" v-model="email" :rules="emailRules" required></v-text-field>
           <v-text-field :label="$t('login.password')" v-model="password" :rules="passwordRules" :counter="30" required :append-icon="passAppendIcon"
             :append-icon-cb="() => (passwordHidden = !passwordHidden)" :type="passTextFieldType"></v-text-field>
-          <v-btn type="submit" @click="loginAttempt()" :disabled="!valid" :style="'background-color: ' + $store.state.primaryColor" class="white--text">
+          <v-btn type="submit" @click="loginAttempt()" :disabled="!valid" class="primary white--text">
               {{ $t('login.submit') }}
           </v-btn>
         </v-form>
diff --git a/src/routes/main/components/Sidebar.vue b/src/routes/main/components/Sidebar.vue
@@ -1,5 +1,5 @@
 <template>
-  <v-navigation-drawer dark clipped fixed app v-model="$store.state.drawer" :style="'background-color: ' + $store.state.secondaryColor" value="false">
+  <v-navigation-drawer dark clipped fixed app v-model="$store.state.drawer" class="secondary" value="false">
     <v-list dense>
       <template v-if="checkRole(item.guard)" v-for="(item) in items">
         <v-list-group v-model="item.model" :key="item.text" :prepend-icon="item.model ? item.icon : item['icon-alt']"
diff --git a/src/routes/main/components/Toolbar.vue b/src/routes/main/components/Toolbar.vue
@@ -1,5 +1,5 @@
 <template>
-  <v-toolbar clipped-left dark fixed app :style="'background-color: ' + $store.state.primaryColor">
+  <v-toolbar clipped-left dark fixed app color="primary">
     <v-toolbar-side-icon @click.stop="$store.state.drawer = !$store.state.drawer"></v-toolbar-side-icon>
     <v-toolbar-title class="title">
         <router-link to="/home">{{$store.state.title}}</router-link>
diff --git a/src/routes/main/routes/crm/routes/companies/mixins/fields.js b/src/routes/main/routes/crm/routes/companies/mixins/fields.js
@@ -8,13 +8,6 @@ export default {
           details: false,
           hidden: true
         },
-        {
-          type: 'input',
-          column: 'name',
-          text: this.$t('fields.name'),
-          grid: 'xs12 sm6 md4 lg6 xl4',
-          name: 'name',
-        },
         {
           type: 'input',
           column: 'common_name',
@@ -25,6 +18,13 @@ export default {
             name: 'common_name',
           },
         },
+        {
+          type: 'input',
+          column: 'name',
+          text: this.$t('fields.name'),
+          grid: 'xs12 sm6 md4 lg6 xl4',
+          name: 'name',
+        },
         {
           type: 'select',
           url: 'crm/company-types',
diff --git a/src/routes/main/routes/crm/routes/people/Index.vue b/src/routes/main/routes/crm/routes/people/Index.vue
@@ -11,6 +11,7 @@
       :watchForCreation="true"
       primaryKey="id"
       deleteMode="soft"
+      mode="ServerSide"
     ></crud>
     <item-details :fields="itemFields"></item-details>
   </div>
diff --git a/src/store/getters.js b/src/store/getters.js
@@ -1,5 +1,5 @@
 let getters = {
-  lng: state => state.locale,
+  lng: state => state.locale != null ? state.locale : 'en',
 }
 
 export default getters
diff --git a/src/store/mutations.js b/src/store/mutations.js
@@ -12,6 +12,7 @@ let mutations = {
     state.page = value
   },
   setLocale(state, locale) {
+    localStorage.setItem('locale', locale)
     state.locale = locale
   },
   // alerts
diff --git a/src/store/state.js b/src/store/state.js
@@ -2,14 +2,12 @@ import { config } from '@/config.js'
 
 let state = {
   title: "Vue CRUD",
-  locale: 'pl',
+  locale: localStorage.getItem('locale'),
   locales: [
+    {name: 'en', text: 'English'},
     {name: 'pl', text: 'Polski'},
-    {name: 'en', text: 'English'}
   ],
   localeSelectable: true,
-  primaryColor: 'rgb(52, 73, 94)',
-  secondaryColor: 'rgb(65, 184, 131)',
   primaryTheme: 'dark',
   secondaryTheme: 'dark',
   module: null,

Original file line number	Diff line number	Diff line change
`@@ -13,6 +13,6 @@ const messages = {`
`13`	`13`	`}`
`14`	`14`
`15`	`15`	`export default new VueI18n({`
`16`		`- locale: store.state.locale,`
	`16`	`+ locale: store.getters.lng,`
`17`	`17`	`messages,`
`18`	`18`	`})`