updates

2018-11-13 16:30:01 +03:00 · 2018-11-13 16:30:01 +03:00 · 1723f427f5
commit 1723f427f5
parent 7b657fcccd
21 changed files with 145 additions and 113 deletions
--- a/src/App.scss
+++ b/src/App.scss
@ -479,8 +479,8 @@ nav {
  line-height: 28px;

  &.error {
-    background-color: $fallback--cAlertRed;
-    background-color: var(--cAlertRed, $fallback--cAlertRed);
+    background-color: $fallback--alertError;
+    background-color: var(--alertError, $fallback--alertError);
  }
 }

--- a/src/_variables.scss
+++ b/src/_variables.scss
@ -16,7 +16,7 @@ $fallback--cBlue: #0095ff;
 $fallback--cGreen: #0fa00f;
 $fallback--cOrange: orange;

-$fallback--cAlertRed: rgba(211,16,20,.5);
+$fallback--alertError: rgba(211,16,20,.5);

 $fallback--panelRadius: 10px;
 $fallback--checkBoxRadius: 2px;
--- a/src/components/contrast_ratio/contrast_ratio.vue
+++ b/src/components/contrast_ratio/contrast_ratio.vue
@ -1,41 +1,28 @@
 <template>
-<div class="contrast-ratio">
-  <span class="label">
-    Contrast:
-  </span>
-  <span>
-    <span>
-      {{contrast.text}}
+<span class="contrast-ratio">
+  <span :title="`Contrast is ${contrast.text}`" class="rating">
+    <span v-if="contrast.aaa">
+      <i class="icon-thumbs-up-alt"/>
    </span>
-    <span class="rating">
-      <span v-if="contrast.aaa">
-        AAA
-      </span>
-      <span v-if="!contrast.aaa && contrast.aa">
-        AA
-      </span>
-      <span v-if="!contrast.aaa && !contrast.aa">
-        bad
-      </span>
+    <span v-if="!contrast.aaa && contrast.aa">
+      <i class="icon-adjust"/>
+    </span>
+    <span v-if="!contrast.aaa && !contrast.aa">
+      <i class="icon-attention"/>
    </span>
  </span>
-  <span v-if="large">
-    <span>
-      18pt+:
+  <span class="rating" v-if="large" :title="`Contrast is ${contrast.text} (18pt+)`">
+    <span v-if="contrast.aaa">
+      <i class="icon-thumbs-up-alt"/>
    </span>
-    <span class="rating">
-      <span v-if="contrast.aaa">
-        AAA
-      </span>
-      <span v-if="!contrast.aaa && contrast.aa">
-        AA
-      </span>
-      <span v-if="!contrast.aaa && !contrast.aa">
-        bad
-      </span>
+    <span v-if="!contrast.aaa && contrast.aa">
+      <i class="icon-adjust"/>
+    </span>
+    <span v-if="!contrast.aaa && !contrast.aa">
+      <i class="icon-attention"/>
    </span>
  </span>
-</div>
+</span>
 </template>

 <script>
@ -57,7 +44,6 @@ export default {

  .rating {
    display: inline-block;
-    min-width: 3em;
    text-align: center;
  }
 }
--- a/src/components/notifications/notifications.scss
+++ b/src/components/notifications/notifications.scss
@ -7,7 +7,7 @@
  .unseen-count {
    display: inline-block;
    background-color: $fallback--cRed;
-    background-color: var(--cRed, $fallback--cRed);
+    background-color: var(--badgeNotification, $fallback--cRed);
    text-shadow: 0px 0px 3px rgba(0, 0, 0, 0.5);
    border-radius: 99px;
    min-width: 22px;
@ -27,7 +27,7 @@
  }

  .unseen {
-    box-shadow: inset 4px 0 0 var(--cRed, $fallback--cRed);
+    box-shadow: inset 4px 0 0 var(--badgeNotification, $fallback--cRed);
    padding-left: 0;
  }
 }
@ -44,8 +44,8 @@
    border-radius: var(--tooltipRadius, $fallback--tooltipRadius);
    color: $fallback--faint;
    color: var(--faint, $fallback--faint);
-    background-color: $fallback--cAlertRed;
-    background-color: var(--cAlertRed, $fallback--cAlertRed);
+    background-color: $fallback--alertError;
+    background-color: var(--alertError, $fallback--alertError);
    padding: 2px .5em
  }

--- a/src/components/opacity_input/opacity_input.vue
+++ b/src/components/opacity_input/opacity_input.vue
@ -12,16 +12,6 @@
           @input="$emit('input', !present ? fallback : undefined)"
           >
  <label v-if="typeof fallback !== 'undefined'" class="opt-l" :for="name + '-o'"></label>
-  <input
-    :id="name"
-    class="input-range"
-    type="range"
-    :value="value || fallback"
-    :disabled="!present"
-    @input="$emit('input', $event.target.value)"
-    max="1"
-    min="0"
-    step=".05">
  <input
    :id="name"
    class="input-number"
--- 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()
--- 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 {
--- a/src/services/color_convert/color_convert.js
+++ b/src/services/color_convert/color_convert.js
@ -81,29 +81,27 @@ const getContrastRatio = (a, b) => {

 /**
 * This generates what "worst case" color would look like for transparent
- * segments. I.e. black with .2 alpha and pure-white background image
- * could make white text unreadable
+ * segments. I.e. transparent black with yellow text over yellow background.
 *
 * @param {Object} srgb - transparent color
 * @param {Number} alpha - color's opacity/alpha channel
- * @param {Boolean} white - use white "background" if true, black otherwise
+ * @param {Object} textSrgb - text color (considered as worst case scenario for transparent background)
 * @returns {Object} sRGB of resulting color
 */
-const transparentWorstCase = (srgb, alpha, white = false) => {
-  const bg = 'rgb'.split('').reduce((acc, c) => { acc[c] = Number(white) * 255; return acc }, {})
+const transparentWorstCase = (srgb, alpha, textSrgb) => {
  return 'rgb'.split('').reduce((acc, c) => {
    // Simplified https://en.wikipedia.org/wiki/Alpha_compositing#Alpha_blending
    // for opaque bg and transparent fg
-    acc[c] = (srgb[c] * alpha + bg[c] * (1 - alpha))
+    acc[c] = (srgb[c] * alpha + textSrgb[c] * (1 - alpha))
    return acc
  }, {})
 }

 const worstCase = (bg, bga, text) => {
+  console.log(bg)
+  console.log(text)
  if (bga === 1 || typeof bga === 'undefined') return bg
-  // taken from https://github.com/toish/chromatism/blob/master/src/operations/contrastRatio.js
-  const blackWorse = ((text.r * 299) + (text.g * 587) + (text.b * 114)) / 1000 <= 128
-  return transparentWorstCase(bg, bga, !blackWorse)
+  return transparentWorstCase(bg, bga, text)
 }

 const hex2rgb = (hex) => {
--- a/src/services/style_setter/style_setter.js
+++ b/src/services/style_setter/style_setter.js
@ -155,12 +155,14 @@ const generatePreset = (input) => {
  colors.cGreen = col.cGreen
  colors.cOrange = col.cOrange

-  colors.cAlertRed = col.cAlertRed || Object.assign({}, col.cRed)
+  colors.alertError = col.alertError || Object.assign({}, col.cRed)
+  colors.badgeNotification = col.badgeNotification || Object.assign({}, col.cRed)
+  colors.badgeNotificationText = col.badgeNotification || Object.assign({}, col.cRed)

  Object.entries(opacity).forEach(([ k, v ]) => {
    if (typeof v === 'undefined') return
    if (k === 'alert') {
-      colors.cAlertRed.a = v
+      colors.alertError.a = v
      return
    }
    if (k === 'faint') {