natty
/
calckey
1
0
Fork 0
Code Issues 1 Pull Requests Packages Projects Releases Wiki Activity

chore(client): 🎨

This commit is contained in:
syuilo 2022-09-10 16:28:59 +09:00
parent 255f19bd23
commit 20aee2deed
2 changed files with 20 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
packages/client/src/components/form/range.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<div class="timctyfi" :class="{ disabled }"> <div class="timctyfi" :class="{ disabled, easing }">
<div class="label"><slot name="label"></slot></div> <div class="label"><slot name="label"></slot></div>
<div v-adaptive-border class="body"> <div v-adaptive-border class="body">
<div ref="containerEl" class="container"> <div ref="containerEl" class="container">
@ -28,9 +28,11 @@ const props = withDefaults(defineProps<{
step?: number; step?: number;
textConverter?: (value: number) => string, textConverter?: (value: number) => string,
showTicks?: boolean; showTicks?: boolean;
easing?: boolean;
}>(), { }>(), {
step: 1, step: 1,
textConverter: (v) => v.toString(), textConverter: (v) => v.toString(),
easing: false,
}); });
const emit = defineEmits<{ const emit = defineEmits<{
@ -198,7 +200,6 @@ const onMousedown = (ev: MouseEvent | TouchEvent) => {
height: 100%; height: 100%;
background: var(--accent); background: var(--accent);
opacity: 0.5; opacity: 0.5;
//transition: width 0.2s cubic-bezier(0,0,0,1);
} }
} }
@ -231,7 +232,6 @@ const onMousedown = (ev: MouseEvent | TouchEvent) => {
cursor: grab; cursor: grab;
background: var(--accent); background: var(--accent);
border-radius: 999px; border-radius: 999px;
//transition: left 0.2s cubic-bezier(0,0,0,1);
&:hover { &:hover {
background: var(--accentLighten); 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> </style>

2
packages/client/src/pages/settings/general.vue
View File

@ -81,7 +81,7 @@
<option value="force">{{ i18n.ts._nsfw.force }}</option> <option value="force">{{ i18n.ts._nsfw.force }}</option>
</FormSelect> </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 #label>{{ i18n.ts.numberOfPageCache }}</template>
<template #caption>{{ i18n.ts.numberOfPageCacheDescription }}</template> <template #caption>{{ i18n.ts.numberOfPageCacheDescription }}</template>
</FormRange> </FormRange>