moon
/
pleroma-fe
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fixed and updated roundness tab

This commit is contained in:
Henry Jameson 2018-11-21 03:14:59 +03:00
parent 0184d5fff0
commit 73a9370710
5 changed files with 84 additions and 66 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
src/components/range_input/range_input.vue Normal file
View File

@ -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>

23
src/components/style_switcher/style_switcher.js
View File

@ -2,9 +2,10 @@ import { rgb2hex, hex2rgb, getContrastRatio, alphaBlend } from '../../services/c
import { set, delete as del } from 'vue' import { set, delete as del } from 'vue'
import { generateColors, generateShadows, generateRadii, composePreset } from '../../services/style_setter/style_setter.js' import { generateColors, generateShadows, generateRadii, composePreset } from '../../services/style_setter/style_setter.js'
import ColorInput from '../color_input/color_input.vue' 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 ShadowControl from '../shadow_control/shadow_control.vue'
import ContrastRatio from '../contrast_ratio/contrast_ratio.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' import TabSwitcher from '../tab_switcher/tab_switcher.jsx'
// List of color values used in v1 // List of color values used in v1
@ -171,7 +172,7 @@ export default {
} }
}, },
previewRadii () { previewRadii () {
return generateRadii(this.currentRadii) return generateRadii({ radii: this.currentRadii })
}, },
previewShadows () { previewShadows () {
return generateShadows({ shadows: this.shadowsLocal }) return generateShadows({ shadows: this.shadowsLocal })
@ -181,6 +182,7 @@ export default {
}, },
previewTheme () { previewTheme () {
if (!this.preview.theme.colors) return { colors: {}, opacity: {}, radii: {}, shadows: {} } if (!this.preview.theme.colors) return { colors: {}, opacity: {}, radii: {}, shadows: {} }
console.log(this.preview.theme.radii)
return this.preview.theme return this.preview.theme
}, },
// This needs optimization maybe // This needs optimization maybe
@ -286,6 +288,7 @@ export default {
components: { components: {
ColorInput, ColorInput,
OpacityInput, OpacityInput,
RangeInput,
ContrastRatio, ContrastRatio,
ShadowControl, ShadowControl,
TabSwitcher TabSwitcher
@ -379,6 +382,8 @@ export default {
normalizeLocalState (input, version = 0) { normalizeLocalState (input, version = 0) {
const colors = input.colors || input const colors = input.colors || input
const radii = input.radii || input const radii = input.radii || input
console.log('Benis')
console.log(JSON.stringify(radii, null, 2))
const opacity = input.opacity || input const opacity = input.opacity || input
const shadows = input.shadows || {} const shadows = input.shadows || {}
@ -417,13 +422,13 @@ export default {
}) })
// TODO optimize this // 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 this.shadowsLocal = shadows

12
src/components/style_switcher/style_switcher.scss
View File

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

42
src/components/style_switcher/style_switcher.vue
View File

@ -135,41 +135,13 @@
</div> </div>
<div :label="$t('settings.style.radii._tab_label')" class="radius-container"> <div :label="$t('settings.style.radii._tab_label')" class="radius-container">
<p>{{$t('settings.radii_help')}}</p> <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>
<div :label="$t('settings.style.shadows._tab_label')" class="shadow-container"> <div :label="$t('settings.style.shadows._tab_label')" class="shadow-container">
<div class="shadow-selector"> <div class="shadow-selector">

25
src/services/style_setter/style_setter.js
View File

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