From 73a9370710f46c0594eda01ac8fe016e87c7e18c Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Wed, 21 Nov 2018 03:14:59 +0300 Subject: [PATCH] fixed and updated roundness tab --- src/components/range_input/range_input.vue | 48 +++++++++++++++++++ .../style_switcher/style_switcher.js | 23 +++++---- .../style_switcher/style_switcher.scss | 12 +++-- .../style_switcher/style_switcher.vue | 42 +++------------- src/services/style_setter/style_setter.js | 25 +++------- 5 files changed, 84 insertions(+), 66 deletions(-) create mode 100644 src/components/range_input/range_input.vue 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 @@ + + + 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 @@

{{$t('settings.radii_help')}}

-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
+ + + + + + +
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: {