forked from AkkomaGang/akkoma-fe
fixed and updated roundness tab
This commit is contained in:
Henry Jameson
parent
0184d5fff0
commit
73a9370710
5 changed files with 84 additions and 66 deletions
48
src/components/range_input/range_input.vue
Normal file
48
src/components/range_input/range_input.vue
Normal 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>
|
||||
|
|
@ -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
|
||||
|
||||
|
|
|
|||
|
|
@ -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
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -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: {
|
||||
|
|
|
|||
Loading…
Reference in a new issue