From 297186e492b20c3e54f8cbfe51ec2d7694ca7068 Mon Sep 17 00:00:00 2001 From: かっこかり <67428053+kakkokari-gtyih@users.noreply.github.com> Date: Sun, 26 Jan 2025 20:10:22 +0900 Subject: enhance(frontend): 絵文字管理画面β（ローカル）のUI・UX改善 (#15349) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * enhance(frontend): 絵文字管理画面β（ローカル）のUI・UX改善 * fix * :art: * 表示件数をメニューから変更するように * 確認ダイアログ * fix i18n * needWideArea: trueならwidgetの開閉ボタンを表示しないように * fix: 検索ウィンドウは一つしか開けないように --- .../frontend/src/components/MkSortOrderEditor.vue | 8 +++- packages/frontend/src/components/MkSuperMenu.vue | 2 +- packages/frontend/src/components/MkTagItem.vue | 4 +- .../src/components/global/MkPageHeader.vue | 12 +++-- .../frontend/src/components/grid/MkDataCell.vue | 35 ++++++++++++-- packages/frontend/src/components/grid/MkGrid.vue | 56 +++++++++++++++++----- .../frontend/src/components/grid/MkHeaderCell.vue | 6 +-- packages/frontend/src/components/grid/grid.ts | 5 ++ 8 files changed, 101 insertions(+), 27 deletions(-) (limited to 'packages/frontend/src/components') diff --git a/packages/frontend/src/components/MkSortOrderEditor.vue b/packages/frontend/src/components/MkSortOrderEditor.vue index da08f12297..9decacc5f5 100644 --- a/packages/frontend/src/components/MkSortOrderEditor.vue +++ b/packages/frontend/src/components/MkSortOrderEditor.vue @@ -12,12 +12,13 @@ SPDX-License-Identifier: AGPL-3.0-only :iconClass="order.direction === '+' ? 'ti ti-arrow-up' : 'ti ti-arrow-down'" :exButtonIconClass="'ti ti-x'" :content="order.key" + :class="$style.sortOrderTag" @click="onToggleSortOrderButtonClicked(order)" @exButtonClick="onRemoveSortOrderButtonClicked(order)" /> - + @@ -109,4 +110,9 @@ function emitOrder(sortOrders: SortOrder[]) { border-radius: 9999px; background-color: var(--MI_THEME-buttonBg); } + +.sortOrderTag { + user-select: none; + cursor: pointer; +} diff --git a/packages/frontend/src/components/MkSuperMenu.vue b/packages/frontend/src/components/MkSuperMenu.vue index 0caaed6f39..fa0e40d8f9 100644 --- a/packages/frontend/src/components/MkSuperMenu.vue +++ b/packages/frontend/src/components/MkSuperMenu.vue @@ -47,7 +47,7 @@ export type SuperMenuDef = { active?: boolean; action: (ev: MouseEvent) => void; } | { - type: 'link'; + type?: 'link'; to: string; icon?: string; text: string; diff --git a/packages/frontend/src/components/MkTagItem.vue b/packages/frontend/src/components/MkTagItem.vue index 98f2411392..8b7460f3a3 100644 --- a/packages/frontend/src/components/MkTagItem.vue +++ b/packages/frontend/src/components/MkTagItem.vue @@ -5,10 +5,10 @@ SPDX-License-Identifier: AGPL-3.0-only diff --git a/packages/frontend/src/components/global/MkPageHeader.vue b/packages/frontend/src/components/global/MkPageHeader.vue index aa4be69b2c..a2e70a5cad 100644 --- a/packages/frontend/src/components/global/MkPageHeader.vue +++ b/packages/frontend/src/components/global/MkPageHeader.vue @@ -48,13 +48,16 @@ import { scrollToTop } from '@@/js/scroll.js'; import { globalEvents } from '@/events.js'; import { injectReactiveMetadata } from '@/scripts/page-metadata.js'; import { $i, openAccountMenu as openAccountMenu_ } from '@/account.js'; -import { PageHeaderItem } from '@/types/page-header.js'; +import type { PageHeaderItem } from '@/types/page-header.js'; +import type { PageMetadata } from '@/scripts/page-metadata.js'; const props = withDefaults(defineProps<{ + overridePageMetadata?: PageMetadata; tabs?: Tab[]; tab?: string; actions?: PageHeaderItem[] | null; thin?: boolean; + hideTitle?: boolean; displayMyAvatar?: boolean; }>(), { tabs: () => ([] as Tab[]), @@ -64,9 +67,10 @@ const emit = defineEmits<{ (ev: 'update:tab', key: string); }>(); -const pageMetadata = injectReactiveMetadata(); +const injectedPageMetadata = injectReactiveMetadata(); +const pageMetadata = computed(() => props.overridePageMetadata ?? injectedPageMetadata.value); -const hideTitle = inject('shouldOmitHeaderTitle', false); +const hideTitle = computed(() => inject('shouldOmitHeaderTitle', false) || props.hideTitle); const thin_ = props.thin || inject('shouldHeaderThin', false); const el = shallowRef(undefined); @@ -75,7 +79,7 @@ const narrow = ref(false); const hasTabs = computed(() => props.tabs.length > 0); const hasActions = computed(() => props.actions && props.actions.length > 0); const show = computed(() => { - return !hideTitle || hasTabs.value || hasActions.value; + return !hideTitle.value || hasTabs.value || hasActions.value; }); const preventDrag = (ev: TouchEvent) => { diff --git a/packages/frontend/src/components/grid/MkDataCell.vue b/packages/frontend/src/components/grid/MkDataCell.vue index 0ffd42abda..e473b7c1af 100644 --- a/packages/frontend/src/components/grid/MkDataCell.vue +++ b/packages/frontend/src/components/grid/MkDataCell.vue @@ -39,13 +39,15 @@ SPDX-License-Identifier: AGPL-3.0-only {{ cell.value }}
- - +
@@ -375,6 +377,31 @@ $cellHeight: 28px; object-fit: cover; } +.bool { + position: relative; + width: 18px; + height: 18px; + background: var(--MI_THEME-panel); + border: solid 2px var(--MI_THEME-divider); + border-radius: 4px; + box-sizing: border-box; + + &.boolTrue { + border-color: var(--MI_THEME-accent); + background: var(--MI_THEME-accent); + + &::before { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + color: var(--MI_THEME-fgOnAccent); + font-size: 12px; + line-height: 18px; + } + } +} + .editingInput { padding: 0 8px; width: 100%; diff --git a/packages/frontend/src/components/grid/MkGrid.vue b/packages/frontend/src/components/grid/MkGrid.vue index 60738365fb..4dbd4ebcae 100644 --- a/packages/frontend/src/components/grid/MkGrid.vue +++ b/packages/frontend/src/components/grid/MkGrid.vue @@ -7,7 +7,11 @@ SPDX-License-Identifier: AGPL-3.0-only
(); const props = defineProps<{ - settings: GridSetting, - data: DataSource[] + settings: GridSetting; + data: DataSource[]; }>(); +const rootSetting: Required = { + noOverflowStyle: false, + rounded: true, + outerBorder: true, + ...props.settings.root, +}; + // non-reactive // eslint-disable-next-line vue/no-setup-props-reactivity-loss const rowSetting: Required = { @@ -1277,32 +1288,48 @@ onMounted(() => { overflow-x: scroll; // firefoxだとスクロールバーがセルに重なって見づらくなってしまうのでスペースを空けておく padding-bottom: 8px; + + &.noOverflowHandling { + overflow-x: revert; + padding-bottom: 0; + } }