shadow control initial stuff. not done yet tho
This commit is contained in:
Henry Jameson
parent
edb429e307
commit
a5b4f31c12
19 changed files with 424 additions and 30 deletions
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div class="color-control" :class="{ disabled: !present }">
|
||||
<div class="color-control" :class="{ disabled: !present || disabled }">
|
||||
<label :for="name" class="label">
|
||||
{{label}}
|
||||
</label>
|
||||
|
|
@ -17,7 +17,7 @@
|
|||
class="color-input"
|
||||
type="color"
|
||||
:value="value || fallback"
|
||||
:disabled="!present"
|
||||
:disabled="!present || disabled"
|
||||
@input="$emit('input', $event.target.value)"
|
||||
>
|
||||
<input
|
||||
|
|
@ -25,7 +25,7 @@
|
|||
class="text-input"
|
||||
type="text"
|
||||
:value="value || fallback"
|
||||
:disabled="!present"
|
||||
:disabled="!present || disabled"
|
||||
@input="$emit('input', $event.target.value)"
|
||||
>
|
||||
</div>
|
||||
|
|
@ -34,7 +34,7 @@
|
|||
<script>
|
||||
export default {
|
||||
props: [
|
||||
'name', 'label', 'value', 'fallback'
|
||||
'name', 'label', 'value', 'fallback', 'disabled'
|
||||
],
|
||||
computed: {
|
||||
present () {
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div class="opacity-control" :class="{ disabled: !present }">
|
||||
<div class="opacity-control" :class="{ disabled: !present || disabled }">
|
||||
<label :for="name" class="label">
|
||||
{{$t('settings.opacity')}}
|
||||
</label>
|
||||
|
|
@ -17,7 +17,7 @@
|
|||
class="input-number"
|
||||
type="number"
|
||||
:value="value || fallback"
|
||||
:disabled="!present"
|
||||
:disabled="!present || disabled"
|
||||
@input="$emit('input', $event.target.value)"
|
||||
max="1"
|
||||
min="0"
|
||||
|
|
@ -28,7 +28,7 @@
|
|||
<script>
|
||||
export default {
|
||||
props: [
|
||||
'name', 'value', 'fallback'
|
||||
'name', 'value', 'fallback', 'disabled'
|
||||
],
|
||||
computed: {
|
||||
present () {
|
||||
|
|
|
|||
76
src/components/shadow_control/shadow_control.js
Normal file
76
src/components/shadow_control/shadow_control.js
Normal file
|
|
@ -0,0 +1,76 @@
|
|||
import ColorInput from '../color_input/color_input.vue'
|
||||
import OpacityInput from '../opacity_input/opacity_input.vue'
|
||||
import StyleSetter from '../../services/style_setter/style_setter.js'
|
||||
import { hex2rgb } from '../../services/color_convert/color_convert.js'
|
||||
import { set } from 'vue'
|
||||
|
||||
export default {
|
||||
props: [
|
||||
'value', 'fallback'
|
||||
],
|
||||
data () {
|
||||
return {
|
||||
selectedId: 0,
|
||||
cValue: this.value || this.fallback
|
||||
}
|
||||
},
|
||||
components: {
|
||||
ColorInput,
|
||||
OpacityInput
|
||||
},
|
||||
methods: {
|
||||
add () {
|
||||
this.cValue.push(Object.assign({}, this.selected))
|
||||
this.selectedId = this.cValue.length - 1
|
||||
},
|
||||
del () {
|
||||
this.cValue.splice(this.selectedId, 1)
|
||||
this.selectedId = this.cValue.length === 0 ? undefined : this.selectedId - 1
|
||||
},
|
||||
moveUp () {
|
||||
const movable = this.cValue.splice(this.selectedId, 1)[0]
|
||||
this.cValue.splice(this.selectedId - 1, 0, movable)
|
||||
this.selectedId -= 1
|
||||
},
|
||||
moveDn () {
|
||||
const movable = this.cValue.splice(this.selectedId, 1)[0]
|
||||
this.cValue.splice(this.selectedId + 1, 0, movable)
|
||||
this.selectedId += 1
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
selected () {
|
||||
return this.cValue[this.selectedId] || {
|
||||
x: 0,
|
||||
y: 0,
|
||||
blur: 0,
|
||||
spread: 0,
|
||||
inset: false,
|
||||
color: '#000000',
|
||||
alpha: 1
|
||||
}
|
||||
},
|
||||
moveUpValid () {
|
||||
return this.selectedId > 0
|
||||
},
|
||||
moveDnValid () {
|
||||
return this.selectedId < this.cValue.length - 1
|
||||
},
|
||||
present () {
|
||||
return typeof this.cValue[this.selectedId] !== 'undefined' &&
|
||||
!this.usingFallback
|
||||
},
|
||||
usingFallback () {
|
||||
return typeof this.value === 'undefined'
|
||||
},
|
||||
rgb () {
|
||||
return hex2rgb(this.selected.color)
|
||||
},
|
||||
style () {
|
||||
console.log(StyleSetter.generateShadow(this.cValue))
|
||||
return {
|
||||
boxShadow: StyleSetter.generateShadow(this.cValue)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
249
src/components/shadow_control/shadow_control.vue
Normal file
249
src/components/shadow_control/shadow_control.vue
Normal file
|
|
@ -0,0 +1,249 @@
|
|||
<template>
|
||||
<div class="shadow-control" :class="{ disabled: !present }">
|
||||
<div class="shadow-preview-container">
|
||||
<div :disabled="!present" class="y-shift-control">
|
||||
<input
|
||||
v-model="selected.y"
|
||||
:disabled="!present"
|
||||
class="input-number"
|
||||
type="number">
|
||||
<div class="wrap">
|
||||
<input
|
||||
v-model="selected.y"
|
||||
:disabled="!present"
|
||||
class="input-range"
|
||||
type="range"
|
||||
max="20"
|
||||
min="-20">
|
||||
</div>
|
||||
</div>
|
||||
<div class="preview-window">
|
||||
<div class="preview-block" :style="style"></div>
|
||||
</div>
|
||||
<div :disabled="!present" class="x-shift-control">
|
||||
<input
|
||||
v-model="selected.x"
|
||||
:disabled="!present"
|
||||
class="input-number"
|
||||
type="number">
|
||||
<div class="wrap">
|
||||
<input
|
||||
v-model="selected.x"
|
||||
:disabled="!present"
|
||||
class="input-range"
|
||||
type="range"
|
||||
max="20"
|
||||
min="-20">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="shadow-tweak">
|
||||
<div :disabled="usingFallback" class="id-control">
|
||||
<label for="id" class="label">
|
||||
Shadow id
|
||||
</label>
|
||||
<input
|
||||
v-model="selectedId"
|
||||
:disabled="usingFallback"
|
||||
class="input-number"
|
||||
type="number"
|
||||
min="0"
|
||||
:max="cValue.length - 1">
|
||||
<button class="btn btn-default" :disabled="!present" @click="del">
|
||||
<i class="icon-cancel"/>
|
||||
</button>
|
||||
<button class="btn btn-default" :disabled="!moveUpValid" @click="moveUp">
|
||||
<i class="icon-up-open"/>
|
||||
</button>
|
||||
<button class="btn btn-default" :disabled="!moveDnValid" @click="moveDn">
|
||||
<i class="icon-down-open"/>
|
||||
</button>
|
||||
<button class="btn btn-default" @click="add">
|
||||
<i class="icon-plus"/>
|
||||
</button>
|
||||
</div>
|
||||
<div :disabled="!present" class="inset-control">
|
||||
<label for="inset" class="label">
|
||||
Inset
|
||||
</label>
|
||||
<input
|
||||
v-model="selected.inset"
|
||||
:disabled="!present"
|
||||
name="inset"
|
||||
id="inset"
|
||||
class="input-inset"
|
||||
type="checkbox">
|
||||
<label class="checkbox-label" for="inset"></label>
|
||||
</div>
|
||||
<div :disabled="!present" class="blur-control">
|
||||
<label for="spread" class="label">
|
||||
Blur
|
||||
</label>
|
||||
<input
|
||||
v-model="selected.blur"
|
||||
:disabled="!present"
|
||||
name="blur"
|
||||
id="blur"
|
||||
class="input-range"
|
||||
type="range"
|
||||
max="20"
|
||||
min="0">
|
||||
<input
|
||||
v-model="selected.blur"
|
||||
:disabled="!present"
|
||||
class="input-number"
|
||||
type="number"
|
||||
min="0">
|
||||
</div>
|
||||
<div :disabled="!present" class="spread-control">
|
||||
<label for="spread" class="label">
|
||||
Spread
|
||||
</label>
|
||||
<input
|
||||
v-model="selected.spread"
|
||||
:disabled="!present"
|
||||
name="spread"
|
||||
id="spread"
|
||||
class="input-range"
|
||||
type="range"
|
||||
max="20"
|
||||
min="-20">
|
||||
<input
|
||||
v-model="selected.spread"
|
||||
:disabled="!present"
|
||||
class="input-number"
|
||||
type="number">
|
||||
</div>
|
||||
<ColorInput
|
||||
v-model="selected.color"
|
||||
:disabled="!present"
|
||||
label="Color"
|
||||
name="shadow"/>
|
||||
<OpacityInput
|
||||
v-model="selected.alpha"
|
||||
:disabled="!present"/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script src="./shadow_control.js" ></script>
|
||||
|
||||
<style lang="scss">
|
||||
@import '../../_variables.scss';
|
||||
.shadow-control {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
|
||||
.shadow-preview-container {
|
||||
flex: 0;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
$side: 15em;
|
||||
|
||||
input[type=number] {
|
||||
width: 5em;
|
||||
min-width: 2em;
|
||||
}
|
||||
.x-shift-control,
|
||||
.y-shift-control {
|
||||
display: flex;
|
||||
flex: 0;
|
||||
|
||||
&[disabled=disabled] *{
|
||||
opacity: .5
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.x-shift-control {
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.x-shift-control .wrap,
|
||||
input[type=range] {
|
||||
margin: 0;
|
||||
width: $side;
|
||||
height: 2em;
|
||||
}
|
||||
.y-shift-control {
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
.wrap {
|
||||
width: 2em;
|
||||
height: $side;
|
||||
}
|
||||
input[type=range] {
|
||||
transform-origin: 1em 1em;
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
}
|
||||
.preview-window {
|
||||
flex: 1;
|
||||
background-color: white;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-image:
|
||||
linear-gradient(45deg, #808080 25%, transparent 25%),
|
||||
linear-gradient(-45deg, #808080 25%, transparent 25%),
|
||||
linear-gradient(45deg, transparent 75%, #808080 75%),
|
||||
linear-gradient(-45deg, transparent 75%, #808080 75%);
|
||||
background-size: 20px 20px;
|
||||
background-position:0 0, 0 10px, 10px -10px, -10px 0;
|
||||
|
||||
border-radius: $fallback--inputRadius;
|
||||
border-radius: var(--inputRadius, $fallback--inputRadius);
|
||||
|
||||
.preview-block {
|
||||
width: 33%;
|
||||
height: 33%;
|
||||
background-color: $fallback--bg;
|
||||
background-color: var(--bg, $fallback--bg);
|
||||
border-radius: $fallback--panelRadius;
|
||||
border-radius: var(--panelRadius, $fallback--panelRadius);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.shadow-tweak {
|
||||
.label {
|
||||
flex: 1;
|
||||
min-width: 3em;
|
||||
}
|
||||
|
||||
.inset-control {
|
||||
justify-content: flex-end;
|
||||
label {
|
||||
flex: 0
|
||||
}
|
||||
}
|
||||
|
||||
.blur-control,
|
||||
.id-control,
|
||||
.inset-control,
|
||||
.spread-control {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
max-width: 100%;
|
||||
|
||||
&[disabled=disabled] *{
|
||||
opacity: .5
|
||||
}
|
||||
|
||||
.input-range {
|
||||
flex: 1;
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
.input-number {
|
||||
width: 4em;
|
||||
min-width: 4em;
|
||||
flex: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,5 +1,6 @@
|
|||
import { rgb2hex, hex2rgb, getContrastRatio, alphaBlend } from '../../services/color_convert/color_convert.js'
|
||||
import ColorInput from '../color_input/color_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 StyleSetter from '../../services/style_setter/style_setter.js'
|
||||
|
|
@ -51,6 +52,9 @@ export default {
|
|||
faintOpacityLocal: undefined,
|
||||
faintLinkColorLocal: undefined,
|
||||
|
||||
shadowSelected: undefined,
|
||||
shadowsLocal: {},
|
||||
|
||||
cRedColorLocal: '',
|
||||
cBlueColorLocal: '',
|
||||
cGreenColorLocal: '',
|
||||
|
|
@ -225,12 +229,23 @@ export default {
|
|||
previewRules () {
|
||||
if (!this.preview.colorRules) return ''
|
||||
return [this.preview.colorRules, this.preview.radiiRules, 'color: var(--text)'].join(';')
|
||||
},
|
||||
shadowsAvailable () {
|
||||
return Object.keys(this.preview.theme.shadows)
|
||||
},
|
||||
currentShadow () {
|
||||
const fallback = this.preview.theme.shadows[this.shadowSelected];
|
||||
return fallback ? {
|
||||
fallback,
|
||||
value: this.shadowsLocal[this.shadowSelected]
|
||||
} : undefined
|
||||
}
|
||||
},
|
||||
components: {
|
||||
ColorInput,
|
||||
OpacityInput,
|
||||
ContrastRatio,
|
||||
ShadowControl,
|
||||
TabSwitcher
|
||||
},
|
||||
methods: {
|
||||
|
|
@ -340,6 +355,7 @@ export default {
|
|||
const colors = input.colors || input
|
||||
const radii = input.radii || input
|
||||
const opacity = input.opacity || input
|
||||
const shadows = input.shadows || {}
|
||||
|
||||
if (version === 0) {
|
||||
if (input.version) version = input.version
|
||||
|
|
@ -384,6 +400,8 @@ export default {
|
|||
this.tooltipRadiusLocal = radii.tooltipRadius || 2
|
||||
this.attachmentRadiusLocal = radii.attachmentRadius || 5
|
||||
|
||||
this.shadowsLocal = shadows
|
||||
|
||||
Object.entries(opacity).forEach(([k, v]) => {
|
||||
if (typeof v === 'undefined' || v === null || Number.isNaN(v)) return
|
||||
this[k + 'OpacityLocal'] = v
|
||||
|
|
|
|||
|
|
@ -170,6 +170,17 @@
|
|||
<input id="tooltipradius-t" class="theme-radius-in" type="text" v-model="tooltipRadiusLocal">
|
||||
</div>
|
||||
</div>
|
||||
<div label="Shadow Realm" class="shadow-container">
|
||||
<div class="shadow-selector">
|
||||
<select id="style-switcher" v-model="shadowSelected" class="style-switcher">
|
||||
<option v-for="shadow in shadowsAvailable"
|
||||
:value="shadow">
|
||||
{{shadow}}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
<shadow-control v-if="currentShadow" :value="currentShadow.value" :fallback="currentShadow.fallback"/>
|
||||
</div>
|
||||
</tab-switcher>
|
||||
|
||||
<div class="apply-container">
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue