From 1723f427f59bb6bf62bb35de93c7226aef2e8727 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Tue, 13 Nov 2018 16:30:01 +0300
Subject: updates

---
 src/components/style_switcher/style_switcher.js  | 24 +++++++++++++++++++++-
 src/components/style_switcher/style_switcher.vue | 26 ++++++++++++++----------
 2 files changed, 38 insertions(+), 12 deletions(-)

(limited to 'src/components/style_switcher')

diff --git a/src/components/style_switcher/style_switcher.js b/src/components/style_switcher/style_switcher.js
index 7f794608..8953dc49 100644
--- a/src/components/style_switcher/style_switcher.js
+++ b/src/components/style_switcher/style_switcher.js
@@ -39,6 +39,10 @@ export default {
       topBarLinkColorLocal: undefined,
 
       alertOpacityLocal: undefined,
+      alertErrorColorLocal: undefined,
+
+      badgeOpacityLocal: undefined,
+      badgeNotificationColorLocal: undefined,
 
       borderColorLocal: undefined,
       borderOpacityLocal: undefined,
@@ -102,6 +106,9 @@ export default {
           btn: this.btnColorLocal,
           btnText: this.btnTextColorLocal,
 
+          alertError: this.alertErrorColorLocal,
+          badgeNotification: this.badgeNotificationColorLocal,
+
           faint: this.faintColorLocal,
           faintLink: this.faintLinkColorLocal,
           border: this.borderColorLocal,
@@ -116,6 +123,8 @@ export default {
           btn: this.btnOpacityLocal,
           input: this.inputOpacityLocal,
           panel: this.panelOpacityLocal,
+          alert: this.alertOpacityLocal,
+          badge: this.badgeOpacityLocal,
           topBar: this.topBarOpacityLocal,
           border: this.borderOpacityLocal,
           faint: this.faintOpacityLocal
@@ -167,6 +176,7 @@ export default {
         panelText: hex2rgb(colors.panelText),
         btnText: hex2rgb(colors.btnText),
         topBarText: hex2rgb(colors.topBarText),
+        inputText: hex2rgb(colors.inputText),
 
         link: hex2rgb(colors.link),
         topBarLink: hex2rgb(colors.topBarLink),
@@ -181,7 +191,10 @@ export default {
         bg: hex2rgb(colors.bg),
         btn: hex2rgb(colors.btn),
         panel: hex2rgb(colors.panel),
-        topBar: hex2rgb(colors.topBar)
+        topBar: hex2rgb(colors.topBar),
+        input: hex2rgb(colors.input),
+        alertError: hex2rgb(colors.alertError),
+        badgeNotification: hex2rgb(colors.badgeNotification)
       }
 
       const ratios = {
@@ -198,6 +211,10 @@ export default {
 
         btnText: getContrastRatio(worstCase(bgs.btn, opacity.btn, fgs.btnText), fgs.btnText),
 
+        inputText: getContrastRatio(worstCase(bgs.input, opacity.input, fgs.inputText), fgs.inputText),
+
+        badgeNotification: getContrastRatio(worstCase(bgs.badgeNotification, opacity.badge, fgs.text), fgs.text),
+
         topBarText: getContrastRatio(worstCase(bgs.topBar, opacity.topBar, fgs.topBarText), fgs.topBarText),
         topBarLink: getContrastRatio(worstCase(bgs.topBar, opacity.topBar, fgs.topBarLink), fgs.topBarLink)
       }
@@ -317,6 +334,10 @@ export default {
       this.faintColorLocal = undefined
       this.faintOpacityLocal = undefined
       this.faintLinkColorLocal = undefined
+
+      this.alertErrorColorLocal = undefined
+
+      this.badgeNotificationColorLocal = undefined
     },
 
     /**
@@ -348,6 +369,7 @@ export default {
       }
 
       const keys = new Set(version !== 1 ? Object.keys(colors) : [])
+      console.log(keys)
       if (version === 1) {
         // V1 ignores the rest
         this.clearV1()
diff --git a/src/components/style_switcher/style_switcher.vue b/src/components/style_switcher/style_switcher.vue
index cecd6bc0..f4b4e88f 100644
--- a/src/components/style_switcher/style_switcher.vue
+++ b/src/components/style_switcher/style_switcher.vue
@@ -74,21 +74,27 @@
         <ColorInput name="cOrangeColor" v-model="cOrangeColorLocal" :label="$t('settings.cOrange')"/>
         <ContrastRatio :contrast="previewContrast.bgOrange"/>
       </div>
-      <div class="color-item wide">
-        <h4>Alert opacity</h4>
-        <OpacityInput name="alertOpacity" v-model="alertOpacityLocal" fallback="previewTheme.opacity.alert || 1"/>
-      </div>
     </div>
 
     <h3>More customs!</h3>
     <div>
+      <div class="color-item">
+        <h4>Alerts</h4>
+        <ColorInput name="alertError" v-model="alertErrorColorLocal" :label="$t('settings.error')" :fallback="previewTheme.colors.alertError"/>
+        <OpacityInput name="alertOpacity" v-model="alertOpacityLocal" :fallback="previewTheme.opacity.alert || 1"/>
+      </div>
+      <div class="color-item">
+        <h4>Alerts</h4>
+        <ColorInput name="badgeNotification" v-model="badgeNotificationColorLocal" :label="$t('settings.notification')" :fallback="previewTheme.colors.badgeNotification"/>
+        <ContrastRatio :contrast="previewContrast.badgeNotification"/>
+        <OpacityInput name="badgeOpacity" v-model="badgeOpacityLocal" :fallback="previewTheme.opacity.badge || 1"/>
+      </div>
       <div class="color-item">
         <h4>Panel header</h4>
         <ColorInput name="panelColor" v-model="panelColorLocal" :fallback="fgColorLocal" :label="$t('settings.background')"/>
         <OpacityInput name="panelOpacity" v-model="panelOpacityLocal" :fallback="previewTheme.opacity.panel || 1"/>
         <ColorInput name="panelTextColor" v-model="panelTextColorLocal" :fallback="previewTheme.colors.panelText" :label="$t('settings.links')"/>
         <ContrastRatio :contrast="previewContrast.panelText" large="1"/>
-        <ColorInput name="panelFaintColor" v-model="panelFaintColorLocal" :fallback="previewTheme.colors.panelFaint" :label="$t('settings.faint')"/>
       </div>
       <div class="color-item">
         <h4>Top bar</h4>
@@ -99,10 +105,11 @@
         <ContrastRatio :contrast="previewContrast.topBarLink"/>
       </div>
       <div class="color-item">
-        <h4>Inputs</h4>
+        <h4>Text fields</h4>
         <ColorInput name="inputColor" v-model="inputColorLocal" :fallback="fgColorLocal" :label="$t('settings.background')"/>
         <OpacityInput name="inputOpacity" v-model="inputOpacityLocal" :fallback="previewTheme.opacity.input || 1"/>
         <ColorInput name="inputTextColor" v-model="inputTextColorLocal" :fallback="previewTheme.colors.inputText" :label="$t('settings.text')"/>
+        <ContrastRatio :contrast="previewContrast.inputText"/>
       </div>
       <div class="color-item">
         <h4>Buttons</h4>
@@ -120,7 +127,8 @@
         <h4>Faint text</h4>
         <ColorInput name="faintColor" v-model="faintColorLocal" :fallback="previewTheme.colors.faint || 1" :label="$t('settings.text')"/>
         <ColorInput name="faintLinkColor" v-model="faintLinkColorLocal" :fallback="previewTheme.colors.faintLink" :label="$t('settings.links')"/>
-        <OpacityInput name="faintOpacity" v-model="faintOpacityLocal" fallback="previewTheme.opacity.faint"/>
+        <ColorInput name="panelFaintColor" v-model="panelFaintColorLocal" :fallback="previewTheme.colors.panelFaint" :label="$t('settings.panel')"/>
+        <OpacityInput name="faintOpacity" v-model="faintOpacityLocal" :fallback="previewTheme.opacity.faint || 0.5"/>
       </div>
     </div>
   </div>
@@ -259,10 +267,6 @@
   h4 {
     margin-top: 1em;
   }
-
-  label {
-    color: var(--faint, $fallback--faint);
-  }
 }
 
 .radius-item {
-- 
cgit v1.2.3-70-g09d2