sim1222/misskey
1
0
Fork 0
mirror of https://github.com/sim1222/misskey.git synced 2025-08-04 07:26:29 +09:00
Code Issues Projects Releases Wiki Activity

🎨

Browse Source
This commit is contained in:
syuilo
2022-12-30 15:40:29 +09:00
parent 43fafc8d57
commit d147181a82
5 changed files with 83 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

70
packages/frontend/src/components/form/folder.vue
View File

@ -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>();
const toggle = () => {
opened = !opened;
if (opened) {
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;
}
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;

13
packages/frontend/src/components/form/range.vue
View File

@ -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;