diff --git a/src/components/range_input/range_input.vue b/src/components/range_input/range_input.vue
new file mode 100644
index 00000000..3e50664b
--- /dev/null
+++ b/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>
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">
diff --git a/src/services/style_setter/style_setter.js b/src/services/style_setter/style_setter.js
index e7d8252c..69a1b899 100644
--- a/src/services/style_setter/style_setter.js
+++ b/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 || {
- btn: input.btnRadius,
- input: input.inputRadius,
- panel: input.panelRadius,
- avatar: input.avatarRadius,
- avatarAlt: input.avatarAltRadius,
- tooltip: input.tooltipRadius,
- attachment: input.attachmentRadius
- }
-
- const radii = {
+ console.log(input)
+ const radii = Object.entries(input.radii).filter(([k, v]) => v).reduce((acc, [k, v]) => {
+ acc[k] = v
+ return acc
+ }, {
btn: 4,
input: 4,
panel: 10,
avatar: 5,
avatarAlt: 50,
tooltip: 2,
- attachment: 5,
- ...inputRadii
- }
+ attachment: 5
+ })
return {
rules: {
@@ -259,7 +249,6 @@ const generateShadows = (input) => {
}],
...(input.shadows || {})
}
- console.log('benis')
return {
rules: {