mirror of
https://github.com/misskey-dev/misskey.git
synced 2026-05-03 11:26:14 +02:00
feat: 新カスタム絵文字管理画面（β）の追加 (#13473)
* wip * wip * wip * wip * wip * wip * wip * wip * fix * fix * fix * fix size * fix register logs * fix img autosize * fix row selection * support delete * fix border rendering * fix display:none * tweak comments * support choose pc file and drive file * support directory drag-drop * fix * fix comment * support context menu on data area * fix autogen * wip イベント整理 * イベントの整理 * refactor grid * fix cell re-render bugs * fix row remove * fix comment * fix validation * fix utils * list maximum * add mimetype check * fix * fix number cell focus * fix over 100 file drop * remove log * fix patchData * fix performance * fix * support update and delete * support remote import * fix layout * heightやめる * fix performance * add list v2 endpoint * support pagination * fix api call * fix no clickable input text * fix limit * fix paging * fix * fix * support search * tweak logs * tweak cell selection * fix range select * block delete * add comment * fix * support import log * fix dialog * refactor * add confirm dialog * fix name * fix autogen * wip * support image change and highlight row * add columns * wip * support sort * add role name * add index to emoji * refine context menu setting * support role select * remove unused buttons * fix url * fix MkRoleSelectDialog.vue * add route * refine remote page * enter key search * fix paste bugs * fix copy/paste * fix keyEvent * fix copy/paste and delete * fix comment * fix MkRoleSelectDialog.vue and storybook scenario * fix MkRoleSelectDialog.vue and storybook scenario * add MkGrid.stories.impl.ts * fix * [wip] add custom-emojis-manager2.stories.impl.ts * [wip] add custom-emojis-manager2.stories.impl.ts * wip * 課題はまだ残っているが、ひとまず完了 * fix validation and register roles * fix upload * optimize import * patch from dev * i18n * revert excess fixes * separate sort order component * add SPDX * revert excess fixes * fix pre test * fix bugs * add type column * fix types * fix CHANGELOG.md * fix lit * lint * tweak style * refactor * fix ci * autogen * Update types.ts * CSS Module化 * fix log * 縦スクロールを無効化 * MkStickyContainer化 * regenerate locales index.d.ts * fix * fix * テスト * ランダム値によるUI変更の抑制 * テスト * tableタグやめる * fix last-child css * fix overflow css * fix endpoint.ts * tweak css * 最新への追従とレイアウト微調整 * ソートキーの指定方法を他と合わせた * fix focus * fix layout * v2エンドポイントのルールに対応 * 表示条件などを微調整 * fix MkDataCell.vue * fix error code * fix error * add comment to MkModal.vue * Update index.d.ts * fix CHANGELOG.md * fix color theme * fix CHANGELOG.md * fix CHANGELOG.md * fix center * fix: テーブルにフォーカスがあり、通常状態であるときはキーイベントの伝搬を止める * fix: ロール選択用のダイアログにてコンディショナルロールを×ボタンで除外できなかったのを修正 * fix remote list folder * sticky footers * chore: fix ci error(just single line-break diff) * fix loading * fix like * comma to space * fix ci * fix ci * removed align-center --------- Co-authored-by: osamu <46447427+sam-osamu@users.noreply.github.com> Co-authored-by: syuilo <4439005+syuilo@users.noreply.github.com> Co-authored-by: Sayamame-beans <61457993+Sayamame-beans@users.noreply.github.com>
This commit is contained in:
おさむのひと
GitHub
124
packages/frontend/src/components/MkPagingButtons.vue
Normal file
124
packages/frontend/src/components/MkPagingButtons.vue
Normal file
@@ -0,0 +1,124 @@
|
||||
<!--
|
||||
SPDX-FileCopyrightText: syuilo and other misskey contributors
|
||||
SPDX-License-Identifier: AGPL-3.0-only
|
||||
-->
|
||||
|
||||
<template>
|
||||
<div :class="$style.root">
|
||||
<MkButton primary :disabled="min === current" @click="onToPrevButtonClicked"><</MkButton>
|
||||
|
||||
<div :class="$style.buttons">
|
||||
<div v-if="prevDotVisible" :class="$style.headTailButtons">
|
||||
<MkButton @click="onToHeadButtonClicked">{{ min }}</MkButton>
|
||||
<span class="ti ti-dots"/>
|
||||
</div>
|
||||
|
||||
<MkButton
|
||||
v-for="i in buttonRanges" :key="i"
|
||||
:disabled="current === i"
|
||||
@click="onNumberButtonClicked(i)"
|
||||
>
|
||||
{{ i }}
|
||||
</MkButton>
|
||||
|
||||
<div v-if="nextDotVisible" :class="$style.headTailButtons">
|
||||
<span class="ti ti-dots"/>
|
||||
<MkButton @click="onToTailButtonClicked">{{ max }}</MkButton>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<MkButton primary :disabled="max === current" @click="onToNextButtonClicked">></MkButton>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
|
||||
import { computed, toRefs } from 'vue';
|
||||
import MkButton from '@/components/MkButton.vue';
|
||||
|
||||
const min = 1;
|
||||
|
||||
const emit = defineEmits<{
|
||||
(ev: 'pageChanged', pageNumber: number): void;
|
||||
}>();
|
||||
|
||||
const props = defineProps<{
|
||||
current: number;
|
||||
max: number;
|
||||
buttonCount: number;
|
||||
}>();
|
||||
|
||||
const { current, max } = toRefs(props);
|
||||
|
||||
const buttonCount = computed(() => Math.min(max.value, props.buttonCount));
|
||||
const buttonCountHalf = computed(() => Math.floor(buttonCount.value / 2));
|
||||
const buttonCountStart = computed(() => Math.min(Math.max(min, current.value - buttonCountHalf.value), max.value - buttonCount.value + 1));
|
||||
const buttonRanges = computed(() => Array.from({ length: buttonCount.value }, (_, i) => buttonCountStart.value + i));
|
||||
|
||||
const prevDotVisible = computed(() => (current.value - 1 > buttonCountHalf.value) && (max.value > buttonCount.value));
|
||||
const nextDotVisible = computed(() => (current.value < max.value - buttonCountHalf.value) && (max.value > buttonCount.value));
|
||||
|
||||
if (_DEV_) {
|
||||
console.log('[MkPagingButtons]', current.value, max.value, buttonCount.value, buttonCountHalf.value);
|
||||
console.log('[MkPagingButtons]', current.value < max.value - buttonCountHalf.value);
|
||||
console.log('[MkPagingButtons]', max.value > buttonCount.value);
|
||||
}
|
||||
|
||||
function onNumberButtonClicked(pageNumber: number) {
|
||||
emit('pageChanged', pageNumber);
|
||||
}
|
||||
|
||||
function onToHeadButtonClicked() {
|
||||
emit('pageChanged', min);
|
||||
}
|
||||
|
||||
function onToPrevButtonClicked() {
|
||||
const newPageNumber = current.value <= min ? min : current.value - 1;
|
||||
emit('pageChanged', newPageNumber);
|
||||
}
|
||||
|
||||
function onToNextButtonClicked() {
|
||||
const newPageNumber = current.value >= max.value ? max.value : current.value + 1;
|
||||
emit('pageChanged', newPageNumber);
|
||||
}
|
||||
|
||||
function onToTailButtonClicked() {
|
||||
emit('pageChanged', max.value);
|
||||
}
|
||||
</script>
|
||||
|
||||
<style module lang="scss">
|
||||
.root {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 24px;
|
||||
|
||||
button {
|
||||
border-radius: 9999px;
|
||||
min-width: 2.5em;
|
||||
min-height: 2.5em;
|
||||
max-width: 2.5em;
|
||||
max-height: 2.5em;
|
||||
padding: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
.buttons {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.headTailButtons {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
|
||||
span {
|
||||
font-size: 0.75em;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user