This commit is contained in:
かっこかり 2024-09-15 22:04:24 +09:00 committed by GitHub
commit f134904bfb
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 47 additions and 9 deletions

View File

@ -11,6 +11,8 @@
- Enhance: コントロールパネル内のファイル一覧でセンシティブなファイルを区別しやすく - Enhance: コントロールパネル内のファイル一覧でセンシティブなファイルを区別しやすく
- Fix: サーバーメトリクスが2つ以上あるとリロード直後の表示がおかしくなる問題を修正 - Fix: サーバーメトリクスが2つ以上あるとリロード直後の表示がおかしくなる問題を修正
- Fix: 月の違う同じ日はセパレータが表示されないのを修正 - Fix: 月の違う同じ日はセパレータが表示されないのを修正
- Fix: タッチ画面でレンジスライダーを操作するとツールチップが複数表示される問題を修正
(Cherry-picked from https://github.com/taiyme/misskey/pull/265)
### Server ### Server
- Fix: アンテナの書き込み時にキーワードが与えられなかった場合のエラーをApiErrorとして投げるように - Fix: アンテナの書き込み時にキーワードが与えられなかった場合のエラーをApiErrorとして投げるように

View File

@ -5,7 +5,9 @@ SPDX-License-Identifier: AGPL-3.0-only
<template> <template>
<div class="timctyfi" :class="{ disabled, easing }"> <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">
<div class="track"> <div class="track">
@ -14,15 +16,25 @@ SPDX-License-Identifier: AGPL-3.0-only
<div v-if="steps && showTicks" class="ticks"> <div v-if="steps && showTicks" class="ticks">
<div v-for="i in (steps + 1)" class="tick" :style="{ left: (((i - 1) / steps) * 100) + '%' }"></div> <div v-for="i in (steps + 1)" class="tick" :style="{ left: (((i - 1) / steps) * 100) + '%' }"></div>
</div> </div>
<div ref="thumbEl" v-tooltip="textConverter(finalValue)" class="thumb" :style="{ left: thumbPosition + 'px' }" @mousedown="onMousedown" @touchstart="onMousedown"></div> <div
ref="thumbEl"
class="thumb"
:style="{ left: thumbPosition + 'px' }"
@mouseenter.passive="onMouseenter"
@mousedown="onMousedown"
@touchstart="onMousedown"
></div>
</div> </div>
</div> </div>
<div class="caption"><slot name="caption"></slot></div> <div class="caption">
<slot name="caption"></slot>
</div>
</div> </div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { computed, defineAsyncComponent, onMounted, onUnmounted, ref, watch, shallowRef } from 'vue'; import { computed, defineAsyncComponent, onMounted, onUnmounted, ref, shallowRef, watch } from 'vue';
import { isTouchUsing } from '@/scripts/touch.js';
import * as os from '@/os.js'; import * as os from '@/os.js';
const props = withDefaults(defineProps<{ const props = withDefaults(defineProps<{
@ -101,12 +113,36 @@ const steps = computed(() => {
} }
}); });
const tooltipForDragShowing = ref(false);
const tooltipForHoverShowing = ref(false);
function onMouseenter() {
if (isTouchUsing) return;
tooltipForHoverShowing.value = true;
const { dispose } = os.popup(defineAsyncComponent(() => import('@/components/MkTooltip.vue')), {
showing: computed(() => tooltipForHoverShowing.value && !tooltipForDragShowing.value),
text: computed(() => {
return props.textConverter(finalValue.value);
}),
targetElement: thumbEl,
}, {
closed: () => dispose(),
});
thumbEl.value!.addEventListener('mouseleave', () => {
tooltipForHoverShowing.value = false;
}, { once: true, passive: true });
}
function onMousedown(ev: MouseEvent | TouchEvent) { function onMousedown(ev: MouseEvent | TouchEvent) {
ev.preventDefault(); ev.preventDefault();
const tooltipShowing = ref(true); tooltipForDragShowing.value = true;
const { dispose } = os.popup(defineAsyncComponent(() => import('@/components/MkTooltip.vue')), { const { dispose } = os.popup(defineAsyncComponent(() => import('@/components/MkTooltip.vue')), {
showing: tooltipShowing, showing: tooltipForDragShowing,
text: computed(() => { text: computed(() => {
return props.textConverter(finalValue.value); return props.textConverter(finalValue.value);
}), }),
@ -137,7 +173,7 @@ function onMousedown(ev: MouseEvent | TouchEvent) {
const onMouseup = () => { const onMouseup = () => {
document.head.removeChild(style); document.head.removeChild(style);
tooltipShowing.value = false; tooltipForDragShowing.value = false;
window.removeEventListener('mousemove', onDrag); window.removeEventListener('mousemove', onDrag);
window.removeEventListener('touchmove', onDrag); window.removeEventListener('touchmove', onDrag);
window.removeEventListener('mouseup', onMouseup); window.removeEventListener('mouseup', onMouseup);
@ -261,12 +297,12 @@ function onMousedown(ev: MouseEvent | TouchEvent) {
> .container { > .container {
> .track { > .track {
> .highlight { > .highlight {
transition: width 0.2s cubic-bezier(0,0,0,1); transition: width 0.2s cubic-bezier(0, 0, 0, 1);
} }
} }
> .thumb { > .thumb {
transition: left 0.2s cubic-bezier(0,0,0,1); transition: left 0.2s cubic-bezier(0, 0, 0, 1);
} }
} }
} }