diff options
Diffstat (limited to '')
| -rw-r--r-- | packages/client/src/components/form/range.vue | 22 | ||||
| -rw-r--r-- | packages/client/src/pages/settings/general.vue | 2 |
2 files changed, 20 insertions, 4 deletions
diff --git a/packages/client/src/components/form/range.vue b/packages/client/src/components/form/range.vue index c0fc8c6510..db21c35717 100644 --- a/packages/client/src/components/form/range.vue +++ b/packages/client/src/components/form/range.vue @@ -1,5 +1,5 @@ <template> -<div class="timctyfi" :class="{ disabled }"> +<div class="timctyfi" :class="{ disabled, easing }"> <div class="label"><slot name="label"></slot></div> <div v-adaptive-border class="body"> <div ref="containerEl" class="container"> @@ -28,9 +28,11 @@ const props = withDefaults(defineProps<{ step?: number; textConverter?: (value: number) => string, showTicks?: boolean; + easing?: boolean; }>(), { step: 1, textConverter: (v) => v.toString(), + easing: false, }); const emit = defineEmits<{ @@ -198,7 +200,6 @@ const onMousedown = (ev: MouseEvent | TouchEvent) => { height: 100%; background: var(--accent); opacity: 0.5; - //transition: width 0.2s cubic-bezier(0,0,0,1); } } @@ -231,7 +232,6 @@ const onMousedown = (ev: MouseEvent | TouchEvent) => { cursor: grab; background: var(--accent); border-radius: 999px; - //transition: left 0.2s cubic-bezier(0,0,0,1); &:hover { background: var(--accentLighten); @@ -239,5 +239,21 @@ const onMousedown = (ev: MouseEvent | TouchEvent) => { } } } + + &.easing { + > .body { + > .container { + > .track { + > .highlight { + transition: width 0.2s cubic-bezier(0,0,0,1); + } + } + + > .thumb { + transition: left 0.2s cubic-bezier(0,0,0,1); + } + } + } + } } </style> diff --git a/packages/client/src/pages/settings/general.vue b/packages/client/src/pages/settings/general.vue index 2710a41ecc..9072bcefc9 100644 --- a/packages/client/src/pages/settings/general.vue +++ b/packages/client/src/pages/settings/general.vue @@ -81,7 +81,7 @@ <option value="force">{{ i18n.ts._nsfw.force }}</option> </FormSelect> - <FormRange v-model="numberOfPageCache" :min="1" :max="10" :step="1" class="_formBlock"> + <FormRange v-model="numberOfPageCache" :min="1" :max="10" :step="1" easing class="_formBlock"> <template #label>{{ i18n.ts.numberOfPageCache }}</template> <template #caption>{{ i18n.ts.numberOfPageCacheDescription }}</template> </FormRange> |