parent
edb429e307
commit
a5b4f31c12
@ -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)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
@ -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>
|
File diff suppressed because one or more lines are too long
Binary file not shown.
Before Width: | Height: | Size: 16 KiB After Width: | Height: | Size: 17 KiB |
Binary file not shown.
Binary file not shown.
Binary file not shown.
Loading…
Reference in new issue