mirrors/misskey
1
0
Fork 1
mirror of https://github.com/misskey-dev/misskey.git synced 2026-05-23 09:54:06 +02:00
Code Releases Activity

refactor(frontend): MkRadiosの指定をpropsから行うように (#16597)

Browse Source 
* refactor(frontend): MkRadiosの指定をpropsから行うように

* spdx

* fix lint

* fix: mkradiosを動的slotsに対応させる

* fix: remove comment [ci skip]

* fix lint

* fix lint

* migrate

* rename

* fix

* fix

* fix types

* remove unused imports

* fix

* wip

---------

Co-authored-by: syuilo <4439005+syuilo@users.noreply.github.com>
This commit is contained in:
かっこかり
2026-01-14 14:02:50 +09:00
committed by GitHub
parent 153ebd4392
commit b941c896aa
34 changed files with 505 additions and 284 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
packages/frontend/src/pages/settings/deck.vue
View File

@@ -40,31 +40,43 @@ SPDX-License-Identifier: AGPL-3.0-only
<SearchMarker :keywords="['column', 'align']">
<MkPreferenceContainer k="deck.columnAlign">
<MkRadios v-model="columnAlign">
<MkRadios
v-model="columnAlign"
:options="[
{ value: 'left', label: i18n.ts.left },
{ value: 'center', label: i18n.ts.center },
]"
>
<template #label><SearchLabel>{{ i18n.ts._deck.columnAlign }}</SearchLabel></template>
<option value="left">{{ i18n.ts.left }}</option>
<option value="center">{{ i18n.ts.center }}</option>
</MkRadios>
</MkPreferenceContainer>
</SearchMarker>
<SearchMarker :keywords="['menu', 'position']">
<MkPreferenceContainer k="deck.menuPosition">
<MkRadios v-model="menuPosition">
<MkRadios
v-model="menuPosition"
:options="[
{ value: 'right', label: i18n.ts.right },
{ value: 'bottom', label: i18n.ts.bottom },
]"
>
<template #label><SearchLabel>{{ i18n.ts._deck.deckMenuPosition }}</SearchLabel></template>
<option value="right">{{ i18n.ts.right }}</option>
<option value="bottom">{{ i18n.ts.bottom }}</option>
</MkRadios>
</MkPreferenceContainer>
</SearchMarker>
<SearchMarker :keywords="['navbar', 'position']">
<MkPreferenceContainer k="deck.navbarPosition">
<MkRadios v-model="navbarPosition">
<MkRadios
v-model="navbarPosition"
:options="[
{ value: 'left', label: i18n.ts.left },
{ value: 'top', label: i18n.ts.top },
{ value: 'bottom', label: i18n.ts.bottom },
]"
>
<template #label><SearchLabel>{{ i18n.ts._deck.navbarPosition }}</SearchLabel></template>
<option value="left">{{ i18n.ts.left }}</option>
<option value="top">{{ i18n.ts.top }}</option>
<option value="bottom">{{ i18n.ts.bottom }}</option>
</MkRadios>
</MkPreferenceContainer>
</SearchMarker>

53
packages/frontend/src/pages/settings/emoji-palette.vue
View File

@@ -63,38 +63,33 @@ SPDX-License-Identifier: AGPL-3.0-only
<div class="_gaps_m">
<SearchMarker :keywords="['emoji', 'picker', 'scale', 'size']">
<MkPreferenceContainer k="emojiPickerScale">
<MkRadios v-model="emojiPickerScale">
<MkRadios
v-model="emojiPickerScale"
:options="emojiPickerScaleDef"
>
<template #label><SearchLabel>{{ i18n.ts.size }}</SearchLabel></template>
<option :value="1">{{ i18n.ts.small }}</option>
<option :value="2">{{ i18n.ts.medium }}</option>
<option :value="3">{{ i18n.ts.large }}</option>
<option :value="4">{{ i18n.ts.large }}+</option>
<option :value="5">{{ i18n.ts.large }}++</option>
</MkRadios>
</MkPreferenceContainer>
</SearchMarker>
<SearchMarker :keywords="['emoji', 'picker', 'width', 'column', 'size']">
<MkPreferenceContainer k="emojiPickerWidth">
<MkRadios v-model="emojiPickerWidth">
<MkRadios
v-model="emojiPickerWidth"
:options="emojiPickerWidthDef"
>
<template #label><SearchLabel>{{ i18n.ts.numberOfColumn }}</SearchLabel></template>
<option :value="1">5</option>
<option :value="2">6</option>
<option :value="3">7</option>
<option :value="4">8</option>
<option :value="5">9</option>
</MkRadios>
</MkPreferenceContainer>
</SearchMarker>
<SearchMarker :keywords="['emoji', 'picker', 'height', 'size']">
<MkPreferenceContainer k="emojiPickerHeight">
<MkRadios v-model="emojiPickerHeight">
<MkRadios
v-model="emojiPickerHeight"
:options="emojiPickerHeightDef"
>
<template #label><SearchLabel>{{ i18n.ts.height }}</SearchLabel></template>
<option :value="1">{{ i18n.ts.small }}</option>
<option :value="2">{{ i18n.ts.medium }}</option>
<option :value="3">{{ i18n.ts.large }}</option>
<option :value="4">{{ i18n.ts.large }}+</option>
</MkRadios>
</MkPreferenceContainer>
</SearchMarker>
@@ -126,6 +121,7 @@ SPDX-License-Identifier: AGPL-3.0-only
import { computed, ref, watch } from 'vue';
import XPalette from './emoji-palette.palette.vue';
import type { MkSelectItem } from '@/components/MkSelect.vue';
import type { MkRadiosOption } from '@/components/MkRadios.vue';
import { genId } from '@/utility/id.js';
import MkFeatureBanner from '@/components/MkFeatureBanner.vue';
import MkRadios from '@/components/MkRadios.vue';
@@ -158,8 +154,31 @@ const emojiPaletteForMainDef = computed<MkSelectItem[]>(() => [
})),
]);
const emojiPickerScale = prefer.model('emojiPickerScale');
const emojiPickerScaleDef = [
{ label: i18n.ts.small, value: 1 },
{ label: i18n.ts.medium, value: 2 },
{ label: i18n.ts.large, value: 3 },
{ label: i18n.ts.large + '+', value: 4 },
{ label: i18n.ts.large + '++', value: 5 },
] as MkRadiosOption<number>[];
const emojiPickerWidth = prefer.model('emojiPickerWidth');
const emojiPickerWidthDef = [
{ label: '5', value: 1 },
{ label: '6', value: 2 },
{ label: '7', value: 3 },
{ label: '8', value: 4 },
{ label: '9', value: 5 },
] as MkRadiosOption<number>[];
const emojiPickerHeight = prefer.model('emojiPickerHeight');
const emojiPickerHeightDef = [
{ label: i18n.ts.small, value: 1 },
{ label: i18n.ts.medium, value: 2 },
{ label: i18n.ts.large, value: 3 },
{ label: i18n.ts.large + '+', value: 4 },
] as MkRadiosOption<number>[];
const emojiPickerStyle = prefer.model('emojiPickerStyle');
const palettesSyncEnabled = ref(prefer.isSyncEnabled('emojiPalettes'));

10
packages/frontend/src/pages/settings/navbar.vue
View File

@@ -32,10 +32,14 @@ SPDX-License-Identifier: AGPL-3.0-only
<MkButton primary class="save" @click="save"><i class="ti ti-device-floppy"></i> {{ i18n.ts.save }}</MkButton>
</div>
<MkRadios v-model="menuDisplay">
<MkRadios
v-model="menuDisplay"
:options="[
{ value: 'sideFull', label: i18n.ts._menuDisplay.sideFull },
{ value: 'sideIcon', label: i18n.ts._menuDisplay.sideIcon },
]"
>
<template #label>{{ i18n.ts.display }}</template>
<option value="sideFull">{{ i18n.ts._menuDisplay.sideFull }}</option>
<option value="sideIcon">{{ i18n.ts._menuDisplay.sideIcon }}</option>
</MkRadios>
<SearchMarker :keywords="['navbar', 'sidebar', 'toggle', 'button', 'sub']">

102
packages/frontend/src/pages/settings/preferences.vue
View File

@@ -31,12 +31,16 @@ SPDX-License-Identifier: AGPL-3.0-only
</SearchMarker>
<SearchMarker :keywords="['device', 'type', 'kind', 'smartphone', 'tablet', 'desktop']">
<MkRadios v-model="overridedDeviceKind">
<MkRadios
v-model="overridedDeviceKind"
:options="[
{ value: null, label: i18n.ts.auto },
{ value: 'smartphone', label: i18n.ts.smartphone, icon: 'ti ti-device-mobile' },
{ value: 'tablet', label: i18n.ts.tablet, icon: 'ti ti-device-tablet' },
{ value: 'desktop', label: i18n.ts.desktop, icon: 'ti ti-device-desktop' },
]"
>
<template #label><SearchLabel>{{ i18n.ts.overridedDeviceKind }}</SearchLabel></template>
<option :value="null">{{ i18n.ts.auto }}</option>
<option value="smartphone"><i class="ti ti-device-mobile"/> {{ i18n.ts.smartphone }}</option>
<option value="tablet"><i class="ti ti-device-tablet"/> {{ i18n.ts.tablet }}</option>
<option value="desktop"><i class="ti ti-device-desktop"/> {{ i18n.ts.desktop }}</option>
</MkRadios>
</SearchMarker>
@@ -121,11 +125,15 @@ SPDX-License-Identifier: AGPL-3.0-only
<SearchMarker :keywords="['emoji', 'style', 'native', 'system', 'fluent', 'twemoji']">
<MkPreferenceContainer k="emojiStyle">
<div>
<MkRadios v-model="emojiStyle">
<MkRadios
v-model="emojiStyle"
:options="[
{ value: 'native', label: i18n.ts.native },
{ value: 'fluentEmoji', label: 'Fluent Emoji' },
{ value: 'twemoji', label: 'Twemoji' },
]"
>
<template #label><SearchLabel>{{ i18n.ts.emojiStyle }}</SearchLabel></template>
<option value="native">{{ i18n.ts.native }}</option>
<option value="fluentEmoji">Fluent Emoji</option>
<option value="twemoji">Twemoji</option>
</MkRadios>
<div style="margin: 8px 0 0 0; font-size: 1.5em;"><Mfm :key="emojiStyle" text="🍮🍦🍭🍩🍰🍫🍬🥞🍪"/></div>
</div>
@@ -240,11 +248,15 @@ SPDX-License-Identifier: AGPL-3.0-only
<SearchMarker :keywords="['reaction', 'size', 'scale', 'display']">
<MkPreferenceContainer k="reactionsDisplaySize">
<MkRadios v-model="reactionsDisplaySize">
<MkRadios
v-model="reactionsDisplaySize"
:options="[
{ value: 'small', label: i18n.ts.small },
{ value: 'medium', label: i18n.ts.medium },
{ value: 'large', label: i18n.ts.large },
]"
>
<template #label><SearchLabel>{{ i18n.ts.reactionsDisplaySize }}</SearchLabel></template>
<option value="small">{{ i18n.ts.small }}</option>
<option value="medium">{{ i18n.ts.medium }}</option>
<option value="large">{{ i18n.ts.large }}</option>
</MkRadios>
</MkPreferenceContainer>
</SearchMarker>
@@ -259,12 +271,16 @@ SPDX-License-Identifier: AGPL-3.0-only
<SearchMarker :keywords="['attachment', 'image', 'photo', 'picture', 'media', 'thumbnail', 'list', 'size', 'height']">
<MkPreferenceContainer k="mediaListWithOneImageAppearance">
<MkRadios v-model="mediaListWithOneImageAppearance">
<MkRadios
v-model="mediaListWithOneImageAppearance"
:options="[
{ value: 'expand', label: i18n.ts.default },
{ value: '16_9', label: i18n.tsx.limitTo({ x: '16:9' }) },
{ value: '1_1', label: i18n.tsx.limitTo({ x: '1:1' }) },
{ value: '2_3', label: i18n.tsx.limitTo({ x: '2:3' }) },
]"
>
<template #label><SearchLabel>{{ i18n.ts.mediaListWithOneImageAppearance }}</SearchLabel></template>
<option value="expand">{{ i18n.ts.default }}</option>
<option value="16_9">{{ i18n.tsx.limitTo({ x: '16:9' }) }}</option>
<option value="1_1">{{ i18n.tsx.limitTo({ x: '1:1' }) }}</option>
<option value="2_3">{{ i18n.tsx.limitTo({ x: '2:3' }) }}</option>
</MkRadios>
</MkPreferenceContainer>
</SearchMarker>
@@ -394,22 +410,30 @@ SPDX-License-Identifier: AGPL-3.0-only
<SearchMarker :keywords="['position']">
<MkPreferenceContainer k="notificationPosition">
<MkRadios v-model="notificationPosition">
<MkRadios
v-model="notificationPosition"
:options="[
{ value: 'leftTop', label: i18n.ts.leftTop, icon: 'ti ti-align-box-left-top' },
{ value: 'rightTop', label: i18n.ts.rightTop, icon: 'ti ti-align-box-right-top' },
{ value: 'leftBottom', label: i18n.ts.leftBottom, icon: 'ti ti-align-box-left-bottom' },
{ value: 'rightBottom', label: i18n.ts.rightBottom, icon: 'ti ti-align-box-right-bottom' },
]"
>
<template #label><SearchLabel>{{ i18n.ts.position }}</SearchLabel></template>
<option value="leftTop"><i class="ti ti-align-box-left-top"></i> {{ i18n.ts.leftTop }}</option>
<option value="rightTop"><i class="ti ti-align-box-right-top"></i> {{ i18n.ts.rightTop }}</option>
<option value="leftBottom"><i class="ti ti-align-box-left-bottom"></i> {{ i18n.ts.leftBottom }}</option>
<option value="rightBottom"><i class="ti ti-align-box-right-bottom"></i> {{ i18n.ts.rightBottom }}</option>
</MkRadios>
</MkPreferenceContainer>
</SearchMarker>
<SearchMarker :keywords="['stack', 'axis', 'direction']">
<MkPreferenceContainer k="notificationStackAxis">
<MkRadios v-model="notificationStackAxis">
<MkRadios
v-model="notificationStackAxis"
:options="[
{ value: 'vertical', label: i18n.ts.vertical, icon: 'ti ti-carousel-vertical' },
{ value: 'horizontal', label: i18n.ts.horizontal, icon: 'ti ti-carousel-horizontal' },
]"
>
<template #label><SearchLabel>{{ i18n.ts.stackAxis }}</SearchLabel></template>
<option value="vertical"><i class="ti ti-carousel-vertical"></i> {{ i18n.ts.vertical }}</option>
<option value="horizontal"><i class="ti ti-carousel-horizontal"></i> {{ i18n.ts.horizontal }}</option>
</MkRadios>
</MkPreferenceContainer>
</SearchMarker>
@@ -578,12 +602,16 @@ SPDX-License-Identifier: AGPL-3.0-only
</SearchMarker>
<SearchMarker :keywords="['font', 'size']">
<MkRadios v-model="fontSize">
<MkRadios
v-model="fontSize"
:options="[
{ value: null, label: 'Aa', labelStyle: 'font-size: 14px;' },
{ value: '1', label: 'Aa', labelStyle: 'font-size: 15px;' },
{ value: '2', label: 'Aa', labelStyle: 'font-size: 16px;' },
{ value: '3', label: 'Aa', labelStyle: 'font-size: 17px;' },
]"
>
<template #label><SearchLabel>{{ i18n.ts.fontSize }}</SearchLabel></template>
<option :value="null"><span style="font-size: 14px;">Aa</span></option>
<option value="1"><span style="font-size: 15px;">Aa</span></option>
<option value="2"><span style="font-size: 16px;">Aa</span></option>
<option value="3"><span style="font-size: 17px;">Aa</span></option>
</MkRadios>
</SearchMarker>
@@ -792,10 +820,14 @@ SPDX-License-Identifier: AGPL-3.0-only
<SearchMarker>
<MkPreferenceContainer k="hemisphere">
<MkRadios v-model="hemisphere">
<MkRadios
v-model="hemisphere"
:options="[
{ value: 'N', label: i18n.ts._hemisphere.N },
{ value: 'S', label: i18n.ts._hemisphere.S },
]"
>
<template #label><SearchLabel>{{ i18n.ts.hemisphere }}</SearchLabel></template>
<option value="N">{{ i18n.ts._hemisphere.N }}</option>
<option value="S">{{ i18n.ts._hemisphere.S }}</option>
<template #caption>{{ i18n.ts._hemisphere.caption }}</template>
</MkRadios>
</MkPreferenceContainer>
@@ -925,7 +957,7 @@ const contextMenu = prefer.model('contextMenu');
const menuStyle = prefer.model('menuStyle');
const makeEveryTextElementsSelectable = prefer.model('makeEveryTextElementsSelectable');
const fontSize = ref(miLocalStorage.getItem('fontSize'));
const fontSize = ref(miLocalStorage.getItem('fontSize') as '1' | '2' | '3' | null);
const useSystemFont = ref(miLocalStorage.getItem('useSystemFont') != null);
watch(lang, () => {

16
packages/frontend/src/pages/settings/statusbar.statusbar.vue
View File

@@ -17,13 +17,17 @@ SPDX-License-Identifier: AGPL-3.0-only
<template #label>Black</template>
</MkSwitch>
<MkRadios v-model="statusbar.size">
<MkRadios
v-model="statusbar.size"
:options="[
{ value: 'verySmall', label: i18n.ts.small + '+' },
{ value: 'small', label: i18n.ts.small },
{ value: 'medium', label: i18n.ts.medium },
{ value: 'large', label: i18n.ts.large },
{ value: 'veryLarge', label: i18n.ts.large + '+' },
]"
>
<template #label>{{ i18n.ts.size }}</template>
<option value="verySmall">{{ i18n.ts.small }}+</option>
<option value="small">{{ i18n.ts.small }}</option>
<option value="medium">{{ i18n.ts.medium }}</option>
<option value="large">{{ i18n.ts.large }}</option>
<option value="veryLarge">{{ i18n.ts.large }}+</option>
</MkRadios>
<template v-if="statusbar.type === 'rss'">