fixed and updated roundness tab

3 files changed, 29 insertions, 48 deletions

diff --git a/src/components/style_switcher/style_switcher.js b/src/components/style_switcher/style_switcher.js
index acb1764d..d0f72427 100644
--- a/src/components/style_switcher/style_switcher.js
+++ b/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.inputRadiusLocal = radii.inputRadius || 4
-      this.panelRadiusLocal = radii.panelRadius || 10
-      this.avatarRadiusLocal = radii.avatarRadius || 5
-      this.avatarAltRadiusLocal = radii.avatarAltRadius || 50
-      this.tooltipRadiusLocal = radii.tooltipRadius || 2
-      this.attachmentRadiusLocal = radii.attachmentRadius || 5
+      this.btnRadiusLocal = radii.btn
+      this.inputRadiusLocal = radii.input
+      this.panelRadiusLocal = radii.panel
+      this.avatarRadiusLocal = radii.avatar
+      this.avatarAltRadiusLocal = radii.avatarAlt
+      this.tooltipRadiusLocal = radii.tooltip
+      this.attachmentRadiusLocal = radii.attachment
 
       this.shadowsLocal = shadows
 
diff --git a/src/components/style_switcher/style_switcher.scss b/src/components/style_switcher/style_switcher.scss
index 6e34a0f7..6c6e913a 100644
--- a/src/components/style_switcher/style_switcher.scss
+++ b/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
-      }
     }
   }
 
diff --git a/src/components/style_switcher/style_switcher.vue b/src/components/style_switcher/style_switcher.vue
index 5cf75636..54ea072f 100644
--- a/src/components/style_switcher/style_switcher.vue
+++ b/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">
-          <label for="btnradius" class="theme-radius-lb">{{$t('settings.btnRadius')}}</label>
-          <input id="btnradius" class="theme-radius-rn" type="range" v-model="btnRadiusLocal" max="16">
-          <input id="btnradius-t" class="theme-radius-in" type="text" v-model="btnRadiusLocal">
-        </div>
-        <div class="radius-item">
-          <label for="inputradius" class="theme-radius-lb">{{$t('settings.inputRadius')}}</label>
-          <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>
+        <RangeInput name="btnRadius" :label="$t('settings.btnRadius')" v-model="btnRadiusLocal" :fallback="previewTheme.radii.btn" max="16" hardMin="0"/>
+        <RangeInput name="inputRadius" :label="$t('settings.inputRadius')" v-model="inputRadiusLocal" :fallback="previewTheme.radii.input" max="16" hardMin="0"/>
+        <RangeInput name="panelRadius" :label="$t('settings.panelRadius')" v-model="panelRadiusLocal" :fallback="previewTheme.radii.panel" max="50" hardMin="0"/>
+        <RangeInput name="avatarRadius" :label="$t('settings.avatarRadius')" v-model="avatarRadiusLocal" :fallback="previewTheme.radii.avatar" max="28" hardMin="0"/>
+        <RangeInput name="avatarAltRadius" :label="$t('settings.avatarAltRadius')" v-model="avatarAltRadiusLocal" :fallback="previewTheme.radii.avatarAlt" max="28" hardMin="0"/>
+        <RangeInput name="attachmentRadius" :label="$t('settings.attachmentRadius')" v-model="attachmentRadiusLocal" :fallback="previewTheme.radii.attachment" max="50" hardMin="0"/>
+        <RangeInput name="tooltipRadius" :label="$t('settings.tooltipRadius')" v-model="tooltipRadiusLocal" :fallback="previewTheme.radii.tooltip" max="50" hardMin="0"/>
       </div>
       <div :label="$t('settings.style.shadows._tab_label')" class="shadow-container">
         <div class="shadow-selector">