fixed and updated roundness tab

src/components/range_input/range_input.vue

@@ -0,0 +1,48 @@
+<template>
+<div class="range-control style-control" :class="{ disabled: !present || disabled }">
+  <label :for="name" class="label">
+    {{label}}
+  </label>
+  <input
+    v-if="typeof fallback !== 'undefined'"
+    class="opt exclude-disabled"
+    :id="name + '-o'"
+    type="checkbox"
+    :checked="present"
+    @input="$emit('input', !present ? fallback : undefined)">
+  <label v-if="typeof fallback !== 'undefined'" class="opt-l" :for="name + '-o'"></label>
+  <input
+    :id="name"
+    class="input-number"
+    type="range"
+    :value="value || fallback"
+    :disabled="!present || disabled"
+    @input="$emit('input', $event.target.value)"
+    :max="max || hardMax || 100"
+    :min="min || hardMin || 0"
+    :step="step || 1">
+  <input
+    :id="name"
+    class="input-number"
+    type="number"
+    :value="value || fallback"
+    :disabled="!present || disabled"
+    @input="$emit('input', $event.target.value)"
+    :max="hardMax"
+    :min="hardMin"
+    :step="step || 1">
+</div>
+</template>
+
+<script>
+export default {
+  props: [
+    'name', 'value', 'fallback', 'disabled', 'label', 'max', 'min', 'step', 'hardMin', 'hardMax'
+  ],
+  computed: {
+    present () {
+      return typeof this.value !== 'undefined'
+    }
+  }
+}
+</script>

src/components/style_switcher/style_switcher.js

@@ -2,9 +2,10 @@ import { rgb2hex, hex2rgb, getContrastRatio, alphaBlend } from '../../services/c
 import { set, delete as del } from 'vue'
 import { generateColors, generateShadows, generateRadii, composePreset } from '../../services/style_setter/style_setter.js'
 import ColorInput from '../color_input/color_input.vue'
+import RangeInput from '../range_input/range_input.vue'
+import OpacityInput from '../opacity_input/opacity_input.vue'
 import ShadowControl from '../shadow_control/shadow_control.vue'
 import ContrastRatio from '../contrast_ratio/contrast_ratio.vue'
-import OpacityInput from '../opacity_input/opacity_input.vue'
 import TabSwitcher from '../tab_switcher/tab_switcher.jsx'
 
 // List of color values used in v1
@@ -171,7 +172,7 @@ export default {
       }
     },
     previewRadii () {
-      return generateRadii(this.currentRadii)
+      return generateRadii({ radii: this.currentRadii })
     },
     previewShadows () {
       return generateShadows({ shadows: this.shadowsLocal })
@@ -181,6 +182,7 @@ export default {
     },
     previewTheme () {
       if (!this.preview.theme.colors) return { colors: {}, opacity: {}, radii: {}, shadows: {} }
+      console.log(this.preview.theme.radii)
       return this.preview.theme
     },
     // This needs optimization maybe
@@ -286,6 +288,7 @@ export default {
   components: {
     ColorInput,
     OpacityInput,
+    RangeInput,
     ContrastRatio,
     ShadowControl,
     TabSwitcher
@@ -379,6 +382,8 @@ export default {
     normalizeLocalState (input, version = 0) {
       const colors = input.colors || input
       const radii = input.radii || input
+      console.log('Benis')
+      console.log(JSON.stringify(radii, null, 2))
       const opacity = input.opacity || input
       const shadows = input.shadows || {}
 
@@ -417,13 +422,13 @@ export default {
       })
 
       // TODO optimize this
-      this.btnRadiusLocal = radii.btnRadius || 4
+      this.btnRadiusLocal = radii.btn
-      this.inputRadiusLocal = radii.inputRadius || 4
+      this.inputRadiusLocal = radii.input
-      this.panelRadiusLocal = radii.panelRadius || 10
+      this.panelRadiusLocal = radii.panel
-      this.avatarRadiusLocal = radii.avatarRadius || 5
+      this.avatarRadiusLocal = radii.avatar
-      this.avatarAltRadiusLocal = radii.avatarAltRadius || 50
+      this.avatarAltRadiusLocal = radii.avatarAlt
-      this.tooltipRadiusLocal = radii.tooltipRadius || 2
+      this.tooltipRadiusLocal = radii.tooltip
-      this.attachmentRadiusLocal = radii.attachmentRadius || 5
+      this.attachmentRadiusLocal = radii.attachment
 
       this.shadowsLocal = shadows
 

src/components/style_switcher/style_switcher.scss

@@ -13,6 +13,14 @@
       flex: 1;
     }
 
+    &.disabled {
+      input, select {
+        &:not(.exclude-disabled) {
+          opacity: .5
+        }
+      }
+    }
+
     input, select {
       min-width: 3em;
       margin: 0;
@@ -43,10 +51,6 @@
       &:not([type=number]):not([type=text]) {
         align-self: center;
       }
-
-      &.disabled *:not(.exlcude-disabled) {
-        opacity: .5
-      }
     }
   }
 

src/components/style_switcher/style_switcher.vue

@@ -135,41 +135,13 @@
       </div>
       <div :label="$t('settings.style.radii._tab_label')" class="radius-container">
         <p>{{$t('settings.radii_help')}}</p>
-        <div class="radius-item">
+        <RangeInput name="btnRadius" :label="$t('settings.btnRadius')" v-model="btnRadiusLocal" :fallback="previewTheme.radii.btn" max="16" hardMin="0"/>
-          <label for="btnradius" class="theme-radius-lb">{{$t('settings.btnRadius')}}</label>
+        <RangeInput name="inputRadius" :label="$t('settings.inputRadius')" v-model="inputRadiusLocal" :fallback="previewTheme.radii.input" max="16" hardMin="0"/>
-          <input id="btnradius" class="theme-radius-rn" type="range" v-model="btnRadiusLocal" max="16">
+        <RangeInput name="panelRadius" :label="$t('settings.panelRadius')" v-model="panelRadiusLocal" :fallback="previewTheme.radii.panel" max="50" hardMin="0"/>
-          <input id="btnradius-t" class="theme-radius-in" type="text" v-model="btnRadiusLocal">
+        <RangeInput name="avatarRadius" :label="$t('settings.avatarRadius')" v-model="avatarRadiusLocal" :fallback="previewTheme.radii.avatar" max="28" hardMin="0"/>
-        </div>
+        <RangeInput name="avatarAltRadius" :label="$t('settings.avatarAltRadius')" v-model="avatarAltRadiusLocal" :fallback="previewTheme.radii.avatarAlt" max="28" hardMin="0"/>
-        <div class="radius-item">
+        <RangeInput name="attachmentRadius" :label="$t('settings.attachmentRadius')" v-model="attachmentRadiusLocal" :fallback="previewTheme.radii.attachment" max="50" hardMin="0"/>
-          <label for="inputradius" class="theme-radius-lb">{{$t('settings.inputRadius')}}</label>
+        <RangeInput name="tooltipRadius" :label="$t('settings.tooltipRadius')" v-model="tooltipRadiusLocal" :fallback="previewTheme.radii.tooltip" max="50" hardMin="0"/>
-          <input id="inputradius" class="theme-radius-rn" type="range" v-model="inputRadiusLocal" max="16">
-          <input id="inputradius-t" class="theme-radius-in" type="text" v-model="inputRadiusLocal">
-        </div>
-        <div class="radius-item">
-          <label for="panelradius" class="theme-radius-lb">{{$t('settings.panelRadius')}}</label>
-          <input id="panelradius" class="theme-radius-rn" type="range" v-model="panelRadiusLocal" max="50">
-          <input id="panelradius-t" class="theme-radius-in" type="text" v-model="panelRadiusLocal">
-        </div>
-        <div class="radius-item">
-          <label for="avatarradius" class="theme-radius-lb">{{$t('settings.avatarRadius')}}</label>
-          <input id="avatarradius" class="theme-radius-rn" type="range" v-model="avatarRadiusLocal" max="28">
-          <input id="avatarradius-t" class="theme-radius-in" type="green" v-model="avatarRadiusLocal">
-        </div>
-        <div class="radius-item">
-          <label for="avataraltradius" class="theme-radius-lb">{{$t('settings.avatarAltRadius')}}</label>
-          <input id="avataraltradius" class="theme-radius-rn" type="range" v-model="avatarAltRadiusLocal" max="28">
-          <input id="avataraltradius-t" class="theme-radius-in" type="text" v-model="avatarAltRadiusLocal">
-        </div>
-        <div class="radius-item">
-          <label for="attachmentradius" class="theme-radius-lb">{{$t('settings.attachmentRadius')}}</label>
-          <input id="attachmentrradius" class="theme-radius-rn" type="range" v-model="attachmentRadiusLocal" max="50">
-          <input id="attachmentradius-t" class="theme-radius-in" type="text" v-model="attachmentRadiusLocal">
-        </div>
-        <div class="radius-item">
-          <label for="tooltipradius" class="theme-radius-lb">{{$t('settings.tooltipRadius')}}</label>
-          <input id="tooltipradius" class="theme-radius-rn" type="range" v-model="tooltipRadiusLocal" max="20">
-          <input id="tooltipradius-t" class="theme-radius-in" type="text" v-model="tooltipRadiusLocal">
-        </div>
       </div>
       <div :label="$t('settings.style.shadows._tab_label')" class="shadow-container">
         <div class="shadow-selector">

src/services/style_setter/style_setter.js

@@ -81,7 +81,6 @@ const setColors = (input, commit) => {
   head.appendChild(styleEl)
   const styleSheet = styleEl.sheet
 
-  console.log(rules)
   styleSheet.toString()
   styleSheet.insertRule(`body { ${rules.radii} }`, 'index-max')
   styleSheet.insertRule(`body { ${rules.colors} }`, 'index-max')
@@ -108,7 +107,6 @@ const getCssShadow = (input) => {
 }
 
 const generateColors = (input) => {
-  console.log(input.opacity)
   const colors = {}
   const opacity = Object.assign({
     alert: 0.5,
@@ -120,7 +118,6 @@ const generateColors = (input) => {
     }
     return acc
   }, {}))
-  console.log(colors, opacity)
   const col = Object.entries(input.colors || input).reduce((acc, [k, v]) => {
     if (typeof v === 'object') {
       acc[k] = v
@@ -216,26 +213,19 @@ const generateColors = (input) => {
 }
 
 const generateRadii = (input) => {
-  const inputRadii = input.radii || {
+  console.log(input)
-    btn: input.btnRadius,
+  const radii = Object.entries(input.radii).filter(([k, v]) => v).reduce((acc, [k, v]) => {
-    input: input.inputRadius,
+    acc[k] = v
-    panel: input.panelRadius,
+    return acc
-    avatar: input.avatarRadius,
+  }, {
-    avatarAlt: input.avatarAltRadius,
-    tooltip: input.tooltipRadius,
-    attachment: input.attachmentRadius
-  }
-
-  const radii = {
     btn: 4,
     input: 4,
     panel: 10,
     avatar: 5,
     avatarAlt: 50,
     tooltip: 2,
-    attachment: 5,
+    attachment: 5
-    ...inputRadii
+  })
-  }
 
   return {
     rules: {
@@ -259,7 +249,6 @@ const generateShadows = (input) => {
     }],
     ...(input.shadows || {})
   }
-  console.log('benis')
 
   return {
     rules: {