From 20aee2deed6ed43420deedb371710984cd91fab6 Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Sat, 10 Sep 2022 16:28:59 +0900
Subject: [PATCH] chore(client): :art:

---
 packages/client/src/components/form/range.vue | 22 ++++++++++++++++---
 .../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 c0fc8c651..db21c3571 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 2710a41ec..9072bcefc 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>