aboutsummaryrefslogtreecommitdiff
path: root/src/components/shadow_control
diff options
context:
space:
mode:
Diffstat (limited to 'src/components/shadow_control')
-rw-r--r--src/components/shadow_control/shadow_control.js87
-rw-r--r--src/components/shadow_control/shadow_control.vue243
2 files changed, 330 insertions, 0 deletions
diff --git a/src/components/shadow_control/shadow_control.js b/src/components/shadow_control/shadow_control.js
new file mode 100644
index 00000000..44e4a22f
--- /dev/null
+++ b/src/components/shadow_control/shadow_control.js
@@ -0,0 +1,87 @@
+import ColorInput from '../color_input/color_input.vue'
+import OpacityInput from '../opacity_input/opacity_input.vue'
+import { getCssShadow } from '../../services/style_setter/style_setter.js'
+import { hex2rgb } from '../../services/color_convert/color_convert.js'
+
+export default {
+ // 'Value' and 'Fallback' can be undefined, but if they are
+ // initially vue won't detect it when they become something else
+ // therefore i'm using "ready" which should be passed as true when
+ // data becomes available
+ props: [
+ 'value', 'fallback', 'ready'
+ ],
+ data () {
+ return {
+ selectedId: 0,
+ // TODO there are some bugs regarding display of array (it's not getting updated when deleting for some reason)
+ 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
+ }
+ },
+ beforeUpdate () {
+ this.cValue = this.value || this.fallback
+ },
+ computed: {
+ selected () {
+ if (this.ready && this.cValue.length > 0) {
+ return this.cValue[this.selectedId]
+ } else {
+ return {
+ x: 0,
+ y: 0,
+ blur: 0,
+ spread: 0,
+ inset: false,
+ color: '#000000',
+ alpha: 1
+ }
+ }
+ },
+ moveUpValid () {
+ return this.ready && this.selectedId > 0
+ },
+ moveDnValid () {
+ return this.ready && this.selectedId < this.cValue.length - 1
+ },
+ present () {
+ return this.ready &&
+ typeof this.cValue[this.selectedId] !== 'undefined' &&
+ !this.usingFallback
+ },
+ usingFallback () {
+ return typeof this.value === 'undefined'
+ },
+ rgb () {
+ return hex2rgb(this.selected.color)
+ },
+ style () {
+ return this.ready ? {
+ boxShadow: getCssShadow(this.cValue)
+ } : {}
+ }
+ }
+}
diff --git a/src/components/shadow_control/shadow_control.vue b/src/components/shadow_control/shadow_control.vue
new file mode 100644
index 00000000..744925d4
--- /dev/null
+++ b/src/components/shadow_control/shadow_control.vue
@@ -0,0 +1,243 @@
+<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 style-control">
+ <label for="shadow-switcher" class="select" :disabled="!ready || usingFallback">
+ <select
+ v-model="selectedId" class="shadow-switcher"
+ :disabled="!ready || usingFallback"
+ id="shadow-switcher">
+ <option v-for="(shadow, index) in cValue" :value="index">
+ {{$t('settings.style.shadows.shadow_id', { value: index })}}
+ </option>
+ </select>
+ <i class="icon-down-open"/>
+ </label>
+ <button class="btn btn-default" :disabled="!ready || !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" :disabled="usingFallback" @click="add">
+ <i class="icon-plus"/>
+ </button>
+ </div>
+ <div :disabled="!present" class="inset-control style-control">
+ <label for="inset" class="label">
+ {{$t('settings.style.shadows.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 style-control">
+ <label for="spread" class="label">
+ {{$t('settings.style.shadows.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 style-control">
+ <label for="spread" class="label">
+ {{$t('settings.style.shadows.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="$t('settings.style.common.color')"
+ name="shadow"/>
+ <OpacityInput
+ v-model="selected.alpha"
+ :disabled="!present"/>
+ <p>
+ {{$t('settings.style.shadows.hint')}}
+ </p>
+ </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;
+ margin-bottom: 1em;
+
+ .shadow-preview-container,
+ .shadow-tweak {
+ margin: 5px 6px 0 0;
+ }
+ .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: #999999;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ background-image:
+ linear-gradient(45deg, #666666 25%, transparent 25%),
+ linear-gradient(-45deg, #666666 25%, transparent 25%),
+ linear-gradient(45deg, transparent 75%, #666666 75%),
+ linear-gradient(-45deg, transparent 75%, #666666 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 {
+ flex: 1;
+ min-width: 280px;
+
+ .id-control {
+ align-items: stretch;
+ .select, .btn {
+ min-width: 1px;
+ margin-right: 5px;
+ }
+ .btn {
+ padding: 0 .4em;
+ margin: 0 .1em;
+ }
+ .select {
+ flex: 1;
+ select {
+ align-self: initial;
+ }
+ }
+ }
+ }
+}
+</style>
generated by cgit v1.2.3-70-g09d2 (git 2.49.0) at 2025-11-11 23:06:37 +0000