apply the preference to colorize the app bar, throughout the UI

Serubin · Aug 26, 2018 · d17f8a8 · d17f8a8
1 parent d8e70dc
commit d17f8a8
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 7 deletions.
diff --git a/src/App.vue b/src/App.vue
@@ -325,6 +325,10 @@ export default {
          * @param color - rgb/hex color string.
          */
         updateTheme (color) {
+            // Ignore if toolbar theme is false
+            if (!this.$store.state.theme_apply_appbar_color)
+                return false;
+
             this.toolbar_color = color;
         },
 
@@ -419,10 +423,10 @@ export default {
     computed: {
         icon_class () {
             return {
-                'logo': false,
-                'logo_dark': this.full_theme,
-                'menu_toggle': false,
-                'menu_toggle_dark': !this.full_theme,
+                'logo': this.full_theme && !this.$store.state.theme_apply_appbar_color,
+                'logo_dark': this.full_theme && this.$store.state.theme_apply_appbar_color,
+                'menu_toggle': !this.full_theme && !this.$store.state.theme_apply_appbar_color,
+                'menu_toggle_dark': !this.full_theme && this.$store.state.theme_apply_appbar_color,
             }
         },
 
@@ -452,22 +456,34 @@ export default {
         },
 
         theme_toolbar () { // Determine toolbar color
+            if (!this.$store.state.theme_apply_appbar_color)  // If not color toolbar
+                return this.default_toolbar_color;
+
             if (this.$store.state.theme_use_global) // If use global
                 return this.$store.state.theme_global_default;
 
             return this.toolbar_color;
         },
 
         default_toolbar_color () { // Determine default colors
-            if (this.$store.state.theme_global_default) {
+            if (!this.$store.state.theme_apply_appbar_color) {
+                if (this.theme_str.indexOf('black') >= 0) {
+                    return "#000000";
+                } else if (this.theme_str.indexOf('dark') >= 0) {
+                    return "#202b30";
+                } else {
+                    return "#FFFFFF";
+                }
+            } else if (this.$store.state.theme_global_default) {
                 return this.$store.state.theme_global_default;
             } else {
                 return "#009688";
             }
         },
 
         text_color () { // Determines toolbar text color
-            return "#fff";
+            if (this.$store.state.theme_apply_appbar_color)
+                return "#fff";
         }
     },
     watch: {

diff --git a/src/components/Settings.vue b/src/components/Settings.vue
@@ -64,7 +64,7 @@
                 <label for="global-theme" class="mdl-switch mdl-js-switch mdl-js-ripple-effect mdl-js-ripple-effect--ignore-events">
                     <input id="global-theme" class="mdl-switch__input" type="checkbox" v-model="global_theme">
                     <span class="mdl-switch__label mdl-color-text--grey-900">
-                        Apply to all Conversations
+                        Apply Colors to all Conversations
                     </span>
                 </label>
             </div> <!-- End Global Theme -->
@@ -92,6 +92,9 @@
                     </span>
                 </label>
             </div>
+
+            <br />
+
             <div class="label-item">
                 <label for="enter-to-send" class="mdl-switch mdl-js-switch mdl-js-ripple-effect mdl-js-ripple-effect--ignore-events">
                     <input id="enter-to-send" class="mdl-switch__input" type="checkbox" v-model="enter_to_send">