From cc86ae760503cb3e543a3d31ea2aa5bc53555d5d Mon Sep 17 00:00:00 2001 From: Ben Haynes Date: Fri, 6 Nov 2020 10:06:10 -0500 Subject: [PATCH] Clean up slider component and interface --- app/src/components/v-slider/v-slider.vue | 93 +++++++++++++++--------- app/src/interfaces/slider/index.ts | 9 +++ app/src/interfaces/slider/slider.vue | 5 ++ app/src/lang/en-US/interfaces.json | 3 +- 4 files changed, 75 insertions(+), 35 deletions(-) diff --git a/app/src/components/v-slider/v-slider.vue b/app/src/components/v-slider/v-slider.vue index a3b8f5e246..14df93afd1 100644 --- a/app/src/components/v-slider/v-slider.vue +++ b/app/src/components/v-slider/v-slider.vue @@ -10,7 +10,7 @@
-
+
{{ value }} @@ -49,6 +49,10 @@ export default defineComponent({ type: Boolean, default: false, }, + alwaysShowValue: { + type: Boolean, + default: false, + }, value: { type: Number, default: 0, @@ -85,8 +89,8 @@ export default defineComponent({ @@ -106,59 +110,86 @@ body { input { width: 100%; - height: 2px; + height: 4px; -webkit-appearance: none; appearance: none; + cursor: pointer; + padding: 8px 0; + background-color: var(--background-page); &::-webkit-slider-runnable-track { - height: 2px; + height: 4px; background: var(--v-slider-color); border: none; - border-radius: 2px; + border-radius: 4px; box-shadow: none; } &::-moz-range-track { - height: 2px; + height: 4px; background: var(--v-slider-color); border: none; - border-radius: 2px; + border-radius: 4px; box-shadow: none; } &::-webkit-slider-thumb { + transition: all var(--fast) var(--transition); position: relative; z-index: 3; - width: 14px; - height: 14px; - margin-top: -6px; - background: var(--v-slider-thumb-color); + width: 8px; + height: 8px; + margin-top: -2px; + background: var(--background-page); border: none; border-radius: 50%; box-shadow: none; - box-shadow: 0 0 0 4px var(--background-page); + box-shadow: 0 0 0 4px var(--v-slider-thumb-color); cursor: ew-resize; -webkit-appearance: none; appearance: none; } &::-moz-range-thumb { + transition: all var(--fast) var(--transition); position: relative; z-index: 3; - width: 14px; - height: 14px; - margin-top: -6px; + width: 8px; + height: 8px; + margin-top: -2px; background: var(--v-slider-thumb-color); border: none; border-radius: 50%; box-shadow: none; - box-shadow: 0 0 0 4px var(--background-page); + box-shadow: 0 0 0 4px var(--v-slider-thumb-color); cursor: ew-resize; -webkit-appearance: none; appearance: none; } } + &:hover { + input { + height: 4px; + &::-webkit-slider-thumb { + width: 12px; + height: 12px; + margin-top: -4px; + box-shadow: 0 0 0 4px var(--v-slider-thumb-color); + } + + &::-moz-range-thumb { + width: 12px; + height: 12px; + margin-top: -4px; + box-shadow: 0 0 0 4px var(--v-slider-thumb-color); + } + } + .thumb-label { + opacity: 1; + } + } + .fill { position: absolute; top: 50%; @@ -166,16 +197,17 @@ body { left: 0; z-index: 2; width: 100%; - height: 2px; + height: 4px; + border-radius: 4px; background-color: var(--v-slider-fill-color); - transform: translateY(3px) scaleX(calc(var(--_v-slider-percentage) / 100)); + transform: translateY(-5px) scaleX(calc(var(--_v-slider-percentage) / 100)); transform-origin: left; pointer-events: none; } .ticks { position: absolute; - top: 13px; + top: 14px; left: 0; display: flex; align-items: center; @@ -186,12 +218,13 @@ body { opacity: 0; transition: opacity var(--fast) var(--transition); pointer-events: none; + z-index: 2; .tick { display: inline-block; width: 4px; height: 4px; - background-color: var(--v-slider-fill-color); + background-color: var(--v-slider-color); border-radius: 50%; } } @@ -202,14 +235,15 @@ body { left: 7px; width: calc(100% - 14px); overflow: visible; + pointer-events: none; } .thumb-label { position: absolute; - top: 10px; + top: 0px; left: calc(var(--_v-slider-percentage) * 1%); width: max-content; - padding: 4px 8px; + padding: 2px 6px; color: var(--foreground-inverted); font-weight: 600; background-color: var(--primary); @@ -217,17 +251,8 @@ body { transform: translateX(-50%); opacity: 0; transition: opacity var(--fast) var(--transition); - - &::before { - position: absolute; - top: -4px; - left: calc(50%); - width: 10px; - height: 10px; - background-color: var(--primary); - border-radius: 2px; - transform: translateX(-50%) rotate(45deg); - content: ''; + &.visible { + opacity: 1; } } diff --git a/app/src/interfaces/slider/index.ts b/app/src/interfaces/slider/index.ts index 3de9a0457b..90808357c2 100644 --- a/app/src/interfaces/slider/index.ts +++ b/app/src/interfaces/slider/index.ts @@ -36,5 +36,14 @@ export default defineInterface(({ i18n }) => ({ interface: 'numeric', }, }, + { + field: 'alwaysShowValue', + name: i18n.t('interfaces.slider.always_show_value'), + type: 'boolean', + meta: { + width: 'half', + interface: 'toggle', + }, + }, ], })); diff --git a/app/src/interfaces/slider/slider.vue b/app/src/interfaces/slider/slider.vue index 9a17765fc3..d3bfe3c2e1 100644 --- a/app/src/interfaces/slider/slider.vue +++ b/app/src/interfaces/slider/slider.vue @@ -5,6 +5,7 @@ :min="minValue" :max="maxValue" :step="stepInterval" + :alwaysShowValue="alwaysShowValue" show-thumb-label show-ticks @input="$listeners.input" @@ -36,6 +37,10 @@ export default defineComponent({ type: Number, default: 1, }, + alwaysShowValue: { + type: Boolean, + default: false, + }, }, }); diff --git a/app/src/lang/en-US/interfaces.json b/app/src/lang/en-US/interfaces.json index c65bdba6eb..c1a76d4424 100644 --- a/app/src/lang/en-US/interfaces.json +++ b/app/src/lang/en-US/interfaces.json @@ -151,7 +151,8 @@ }, "slider": { "slider": "Slider", - "description": "Select a number using a slider" + "description": "Select a number using a slider", + "always_show_value": "Always show value" }, "slug": { "slug": "Slug",