:art:

2 files changed, 66 insertions, 17 deletions

diff --git a/packages/frontend/src/components/form/folder.vue b/packages/frontend/src/components/form/folder.vue
index 1256dfcbb4..d7603e58d1 100644
--- a/packages/frontend/src/components/form/folder.vue
+++ b/packages/frontend/src/components/form/folder.vue
@@ -1,5 +1,5 @@
 <template>
-<div class="dwzlatin" :class="{ opened }">
+<div class="dwzlatin" :class="{ opened }" ref="root">
 	<div class="header _button" @click="toggle">
 		<span class="icon"><slot name="icon"></slot></span>
 		<span class="text"><slot name="label"></slot></span>
@@ -9,17 +9,29 @@
 			<i v-else class="ti ti-chevron-down icon"></i>
 		</span>
 	</div>
-	<KeepAlive>
-		<div v-if="openedAtLeastOnce" v-show="opened" class="body">
-			<MkSpacer :margin-min="14" :margin-max="22">
-				<slot></slot>
-			</MkSpacer>
-		</div>
-	</KeepAlive>
+	<div v-if="openedAtLeastOnce" class="body">
+		<Transition
+			:name="$store.state.animation ? 'folder-toggle' : ''"
+			@enter="enter"
+			@after-enter="afterEnter"
+			@leave="leave"
+			@after-leave="afterLeave"
+		>
+			<KeepAlive>
+				<div v-show="opened">
+					<MkSpacer :margin-min="14" :margin-max="22" :container="root">
+						<slot></slot>
+					</MkSpacer>
+				</div>
+			</KeepAlive>
+		</Transition>
+	</div>
 </div>
 </template>
 
 <script lang="ts" setup>
+import { nextTick } from 'vue';
+
 const props = withDefaults(defineProps<{
 	defaultOpen: boolean;
 }>(), {
@@ -28,16 +40,50 @@ const props = withDefaults(defineProps<{
 
 let opened = $ref(props.defaultOpen);
 let openedAtLeastOnce = $ref(props.defaultOpen);
+let root = $ref<HTMLElement>();
+
+function enter(el) {
+	const elementHeight = el.getBoundingClientRect().height;
+	el.style.height = 0;
+	el.offsetHeight; // reflow
+	el.style.height = elementHeight + 'px';
+}
+
+function afterEnter(el) {
+	el.style.height = null;
+}
+
+function leave(el) {
+	const elementHeight = el.getBoundingClientRect().height;
+	el.style.height = elementHeight + 'px';
+	el.offsetHeight; // reflow
+	el.style.height = 0;
+}
 
-const toggle = () => {
-	opened = !opened;
-	if (opened) {
+function afterLeave(el) {
+	el.style.height = null;
+}
+
+function toggle() {
+	if (!opened) {
 		openedAtLeastOnce = true;
 	}
-};
+
+	nextTick(() => {
+		opened = !opened;
+	});
+}
 </script>
 
 <style lang="scss" scoped>
+.folder-toggle-enter-active, .folder-toggle-leave-active {
+	overflow-y: clip;
+	transition: opacity 0.3s, height 0.3s, transform 0.3s !important;
+}
+.folder-toggle-enter-from, .folder-toggle-leave-to {
+	opacity: 0;
+}
+
 .dwzlatin {
 	display: block;
 
diff --git a/packages/frontend/src/components/form/range.vue b/packages/frontend/src/components/form/range.vue
index db21c35717..cdaecb84c8 100644
--- a/packages/frontend/src/components/form/range.vue
+++ b/packages/frontend/src/components/form/range.vue
@@ -59,16 +59,17 @@ const finalValue = computed(() => {
 	}
 });
 
-const thumbWidth = computed(() => {
+const getThumbWidth = () => {
 	if (thumbEl.value == null) return 0;
 	return thumbEl.value!.offsetWidth;
-});
+};
 const thumbPosition = ref(0);
 const calcThumbPosition = () => {
 	if (containerEl.value == null) {
 		thumbPosition.value = 0;
 	} else {
-		thumbPosition.value = (containerEl.value.offsetWidth - thumbWidth.value) * steppedRawValue.value;
+		thumbPosition.value = (containerEl.value.offsetWidth - getThumbWidth()) * steppedRawValue.value;
+		console.log(containerEl.value.offsetWidth, getThumbWidth());
 	}
 };
 watch([steppedRawValue, containerEl], calcThumbPosition);
@@ -110,12 +111,14 @@ const onMousedown = (ev: MouseEvent | TouchEvent) => {
 	style.appendChild(document.createTextNode('* { cursor: grabbing !important; } body * { pointer-events: none !important; }'));
 	document.head.appendChild(style);
 
+	const thumbWidth = getThumbWidth();
+
 	const onDrag = (ev: MouseEvent | TouchEvent) => {
 		ev.preventDefault();
 		const containerRect = containerEl.value!.getBoundingClientRect();
 		const pointerX = ev.touches && ev.touches.length > 0 ? ev.touches[0].clientX : ev.clientX;
-		const pointerPositionOnContainer = pointerX - (containerRect.left + (thumbWidth.value / 2));
-		rawValue.value = Math.min(1, Math.max(0, pointerPositionOnContainer / (containerEl.value!.offsetWidth - thumbWidth.value)));
+		const pointerPositionOnContainer = pointerX - (containerRect.left + (thumbWidth / 2));
+		rawValue.value = Math.min(1, Math.max(0, pointerPositionOnContainer / (containerEl.value!.offsetWidth - thumbWidth)));
 	};
 
 	let beforeValue = finalValue.value;