mirror of
https://github.com/misskey-dev/misskey.git
synced 2026-05-14 01:45:36 +02:00
fix(frontend): MenuRadioの指定方法変更 (#17345)
* fix(frontend): MenuRadioの指定方法変更 * fix indent --------- Co-authored-by: syuilo <4439005+syuilo@users.noreply.github.com>
This commit is contained in:
@@ -182,15 +182,28 @@ function showMenu(ev: MouseEvent) {
|
||||
text: i18n.ts._mediaControls.playbackRate,
|
||||
icon: 'ti ti-clock-play',
|
||||
ref: speed,
|
||||
options: {
|
||||
'0.25x': 0.25,
|
||||
'0.5x': 0.5,
|
||||
'0.75x': 0.75,
|
||||
'1.0x': 1,
|
||||
'1.25x': 1.25,
|
||||
'1.5x': 1.5,
|
||||
'2.0x': 2,
|
||||
},
|
||||
options: [{
|
||||
label: '0.25x',
|
||||
value: 0.25,
|
||||
}, {
|
||||
label: '0.5x',
|
||||
value: 0.5,
|
||||
}, {
|
||||
label: '0.75x',
|
||||
value: 0.75,
|
||||
}, {
|
||||
label: '1.0x',
|
||||
value: 1,
|
||||
}, {
|
||||
label: '1.25x',
|
||||
value: 1.25,
|
||||
}, {
|
||||
label: '1.5x',
|
||||
value: 1.5,
|
||||
}, {
|
||||
label: '2.0x',
|
||||
value: 2,
|
||||
}],
|
||||
},
|
||||
{
|
||||
type: 'divider',
|
||||
|
||||
@@ -204,15 +204,28 @@ function showMenu(ev: PointerEvent) {
|
||||
text: i18n.ts._mediaControls.playbackRate,
|
||||
icon: 'ti ti-clock-play',
|
||||
ref: speed,
|
||||
options: {
|
||||
'0.25x': 0.25,
|
||||
'0.5x': 0.5,
|
||||
'0.75x': 0.75,
|
||||
'1.0x': 1,
|
||||
'1.25x': 1.25,
|
||||
'1.5x': 1.5,
|
||||
'2.0x': 2,
|
||||
},
|
||||
options: [{
|
||||
label: '0.25x',
|
||||
value: 0.25,
|
||||
}, {
|
||||
label: '0.5x',
|
||||
value: 0.5,
|
||||
}, {
|
||||
label: '0.75x',
|
||||
value: 0.75,
|
||||
}, {
|
||||
label: '1.0x',
|
||||
value: 1,
|
||||
}, {
|
||||
label: '1.25x',
|
||||
value: 1.25,
|
||||
}, {
|
||||
label: '1.5x',
|
||||
value: 1.5,
|
||||
}, {
|
||||
label: '2.0x',
|
||||
value: 2,
|
||||
}],
|
||||
},
|
||||
...(window.document.pictureInPictureEnabled ? [{
|
||||
text: i18n.ts._mediaControls.pip,
|
||||
|
||||
@@ -339,24 +339,23 @@ function onItemMouseLeave() {
|
||||
}
|
||||
|
||||
async function showRadioOptions(item: MenuRadio, ev: MouseEvent | PointerEvent | KeyboardEvent) {
|
||||
const children: MenuItem[] = Object.keys(item.options).map<MenuRadioOption>(key => {
|
||||
const value = item.options[key];
|
||||
const children: MenuItem[] = item.options.map<MenuRadioOption>(def => {
|
||||
return {
|
||||
type: 'radioOption',
|
||||
text: key,
|
||||
text: def.label,
|
||||
action: () => {
|
||||
if (isRef(item.ref)) {
|
||||
item.ref.value = value;
|
||||
item.ref.value = def.value;
|
||||
} else {
|
||||
// @ts-expect-error リアクティビティは保たれる
|
||||
item.ref = value;
|
||||
item.ref = def.value;
|
||||
}
|
||||
},
|
||||
active: computed(() => {
|
||||
if (isRef(item.ref)) {
|
||||
return item.ref.value === value;
|
||||
return item.ref.value === def.value;
|
||||
} else {
|
||||
return item.ref === value;
|
||||
return item.ref === def.value;
|
||||
}
|
||||
}),
|
||||
};
|
||||
@@ -421,9 +420,14 @@ function close(actioned = false) {
|
||||
});
|
||||
}
|
||||
|
||||
function switchItem(item: MenuSwitch & { ref: any }) {
|
||||
function switchItem(item: MenuSwitch) {
|
||||
if (item.disabled !== undefined && (typeof item.disabled === 'boolean' ? item.disabled : item.disabled.value)) return;
|
||||
item.ref = !item.ref;
|
||||
if (isRef(item.ref)) {
|
||||
item.ref.value = !item.ref.value;
|
||||
} else {
|
||||
// @ts-expect-error リアクティビティは保たれる
|
||||
item.ref = !item.ref;
|
||||
}
|
||||
}
|
||||
|
||||
function focusUp() {
|
||||
|
||||
@@ -10,8 +10,6 @@ import type { OptionValue } from '@/types/option-value.js';
|
||||
|
||||
type ComponentProps<T extends Component> = { [K in keyof CP<T>]: MaybeRef<CP<T>[K]> };
|
||||
|
||||
type MenuRadioOptionsDef = Record<string, OptionValue>;
|
||||
|
||||
type Text = string | ComputedRef<string>;
|
||||
|
||||
export type MenuAction = (ev: PointerEvent) => void;
|
||||
@@ -32,6 +30,12 @@ interface MenuBase {
|
||||
type: string;
|
||||
}
|
||||
|
||||
interface TextMenuBase extends MenuBase {
|
||||
text: Text;
|
||||
caption?: Text | null | undefined | ComputedRef<null | undefined>;
|
||||
icon?: string;
|
||||
}
|
||||
|
||||
export interface MenuDivider extends MenuBase {
|
||||
type: 'divider';
|
||||
}
|
||||
@@ -42,24 +46,18 @@ export interface MenuLabel extends MenuBase {
|
||||
caption?: Text | null | undefined | ComputedRef<null | undefined>;
|
||||
}
|
||||
|
||||
export interface MenuLink extends MenuBase {
|
||||
export interface MenuLink extends TextMenuBase {
|
||||
type: 'link';
|
||||
to: string;
|
||||
text: Text;
|
||||
caption?: Text | null | undefined | ComputedRef<null | undefined>;
|
||||
icon?: string;
|
||||
indicate?: boolean;
|
||||
avatar?: Misskey.entities.User;
|
||||
}
|
||||
|
||||
export interface MenuA extends MenuBase {
|
||||
export interface MenuA extends TextMenuBase {
|
||||
type: 'a';
|
||||
href: string;
|
||||
target?: string;
|
||||
download?: string;
|
||||
text: Text;
|
||||
caption?: Text | null | undefined | ComputedRef<null | undefined>;
|
||||
icon?: string;
|
||||
indicate?: boolean;
|
||||
}
|
||||
|
||||
@@ -71,22 +69,19 @@ export interface MenuUser extends MenuBase {
|
||||
action: MenuAction;
|
||||
}
|
||||
|
||||
export interface MenuSwitch extends MenuBase {
|
||||
export interface MenuSwitch extends TextMenuBase {
|
||||
type: 'switch';
|
||||
ref: Ref<boolean>;
|
||||
text: Text;
|
||||
caption?: Text | null | undefined | ComputedRef<null | undefined>;
|
||||
icon?: string;
|
||||
disabled?: boolean | Ref<boolean>;
|
||||
}
|
||||
|
||||
export interface MenuRadio extends MenuBase {
|
||||
export interface MenuRadio extends TextMenuBase {
|
||||
type: 'radio';
|
||||
text: Text;
|
||||
caption?: Text | null | undefined | ComputedRef<null | undefined>;
|
||||
icon?: string;
|
||||
ref: Ref<MenuRadioOptionsDef[keyof MenuRadioOptionsDef]>;
|
||||
options: MenuRadioOptionsDef;
|
||||
ref: Ref<OptionValue>;
|
||||
options: {
|
||||
label: string;
|
||||
value: OptionValue;
|
||||
}[];
|
||||
disabled?: boolean | Ref<boolean>;
|
||||
}
|
||||
|
||||
@@ -104,11 +99,8 @@ export interface MenuComponent<T extends Component = any> extends MenuBase {
|
||||
props?: ComponentProps<T>;
|
||||
}
|
||||
|
||||
export interface MenuParent extends MenuBase {
|
||||
export interface MenuParent extends TextMenuBase {
|
||||
type: 'parent';
|
||||
text: Text;
|
||||
caption?: Text | null | undefined | ComputedRef<null | undefined>;
|
||||
icon?: string;
|
||||
children: MenuItem[] | (() => Promise<MenuItem[]> | MenuItem[]);
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user