enhance(frontend): ブラウザのコンテキストメニューを使用できるように (#14076)

* enhance(frontend): ブラウザのコンテキストメニューを使用できるように

* Update Changelog

* shiftにした

* change keys

* fix

* fix

* fix

* update translation keys

---------

Co-authored-by: tamaina <tamaina@hotmail.co.jp>
This commit is contained in:
かっこかり 2024-07-30 14:45:53 +09:00 committed by GitHub
parent 45f909ef33
commit 866abff54d
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
6 changed files with 45 additions and 0 deletions

View File

@ -28,6 +28,7 @@
- Enhance: ドライブのファイル・フォルダをドラッグしなくても移動できるように - Enhance: ドライブのファイル・フォルダをドラッグしなくても移動できるように
(Cherry-picked from https://github.com/nafu-at/misskey/commit/b89c2af6945c6a9f9f10e83f54d2bcf0f240b0b4, https://github.com/nafu-at/misskey/commit/8a7d710c6acb83f50c83f050bd1423c764d60a99) (Cherry-picked from https://github.com/nafu-at/misskey/commit/b89c2af6945c6a9f9f10e83f54d2bcf0f240b0b4, https://github.com/nafu-at/misskey/commit/8a7d710c6acb83f50c83f050bd1423c764d60a99)
- Enhance: デッキのアンテナ・リスト選択画面からそれぞれを新規作成できるように - Enhance: デッキのアンテナ・リスト選択画面からそれぞれを新規作成できるように
- Enhance: ブラウザのコンテキストメニューを使用できるように
- Fix: `/about#federation` ページなどで各インスタンスのチャートが表示されなくなっていた問題を修正 - Fix: `/about#federation` ページなどで各インスタンスのチャートが表示されなくなっていた問題を修正
- Fix: ユーザーページの追加情報のラベルを投稿者のサーバーの絵文字で表示する (#13968) - Fix: ユーザーページの追加情報のラベルを投稿者のサーバーの絵文字で表示する (#13968)
- Fix: リバーシの対局を正しく共有できないことがある問題を修正 - Fix: リバーシの対局を正しく共有できないことがある問題を修正

18
locales/index.d.ts vendored
View File

@ -10118,6 +10118,24 @@ export interface Locale extends ILocale {
*/ */
"loop": string; "loop": string;
}; };
"_contextMenu": {
/**
*
*/
"title": string;
/**
*
*/
"app": string;
/**
* Shiftキーでアプリケーション
*/
"appWithShift": string;
/**
* UI
*/
"native": string;
};
} }
declare const locales: { declare const locales: {
[lang: string]: Locale; [lang: string]: Locale;

View File

@ -2697,3 +2697,9 @@ _mediaControls:
pip: "ピクチャインピクチャ" pip: "ピクチャインピクチャ"
playbackRate: "再生速度" playbackRate: "再生速度"
loop: "ループ再生" loop: "ループ再生"
_contextMenu:
title: "コンテキストメニュー"
app: "アプリケーション"
appWithShift: "Shiftキーでアプリケーション"
native: "ブラウザのUI"

View File

@ -11,6 +11,7 @@ import * as Misskey from 'misskey-js';
import type { ComponentProps as CP } from 'vue-component-type-helpers'; import type { ComponentProps as CP } from 'vue-component-type-helpers';
import type { Form, GetFormResultType } from '@/scripts/form.js'; import type { Form, GetFormResultType } from '@/scripts/form.js';
import { misskeyApi } from '@/scripts/misskey-api.js'; import { misskeyApi } from '@/scripts/misskey-api.js';
import { defaultStore } from '@/store.js';
import { i18n } from '@/i18n.js'; import { i18n } from '@/i18n.js';
import MkPostFormDialog from '@/components/MkPostFormDialog.vue'; import MkPostFormDialog from '@/components/MkPostFormDialog.vue';
import MkWaitingDialog from '@/components/MkWaitingDialog.vue'; import MkWaitingDialog from '@/components/MkWaitingDialog.vue';
@ -654,6 +655,13 @@ export function popupMenu(items: MenuItem[], src?: HTMLElement | EventTarget | n
} }
export function contextMenu(items: MenuItem[], ev: MouseEvent): Promise<void> { export function contextMenu(items: MenuItem[], ev: MouseEvent): Promise<void> {
if (
defaultStore.state.contextMenu === 'native' ||
(defaultStore.state.contextMenu === 'appWithShift' && !ev.shiftKey)
) {
return Promise.resolve();
}
let returnFocusTo = getHTMLElementOrNull(ev.currentTarget ?? ev.target) ?? getHTMLElementOrNull(document.activeElement); let returnFocusTo = getHTMLElementOrNull(ev.currentTarget ?? ev.target) ?? getHTMLElementOrNull(document.activeElement);
ev.preventDefault(); ev.preventDefault();
return new Promise(resolve => nextTick(() => { return new Promise(resolve => nextTick(() => {

View File

@ -177,6 +177,12 @@ SPDX-License-Identifier: AGPL-3.0-only
<option value="dialog">{{ i18n.ts._serverDisconnectedBehavior.dialog }}</option> <option value="dialog">{{ i18n.ts._serverDisconnectedBehavior.dialog }}</option>
<option value="quiet">{{ i18n.ts._serverDisconnectedBehavior.quiet }}</option> <option value="quiet">{{ i18n.ts._serverDisconnectedBehavior.quiet }}</option>
</MkSelect> </MkSelect>
<MkSelect v-model="contextMenu">
<template #label>{{ i18n.ts._contextMenu.title }}</template>
<option value="app">{{ i18n.ts._contextMenu.app }}</option>
<option value="appWithShift">{{ i18n.ts._contextMenu.appWithShift }}</option>
<option value="native">{{ i18n.ts._contextMenu.native }}</option>
</MkSelect>
<MkRange v-model="numberOfPageCache" :min="1" :max="10" :step="1" easing> <MkRange v-model="numberOfPageCache" :min="1" :max="10" :step="1" easing>
<template #label>{{ i18n.ts.numberOfPageCache }}</template> <template #label>{{ i18n.ts.numberOfPageCache }}</template>
<template #caption>{{ i18n.ts.numberOfPageCacheDescription }}</template> <template #caption>{{ i18n.ts.numberOfPageCacheDescription }}</template>
@ -317,6 +323,7 @@ const enableHorizontalSwipe = computed(defaultStore.makeGetterSetter('enableHori
const useNativeUIForVideoAudioPlayer = computed(defaultStore.makeGetterSetter('useNativeUIForVideoAudioPlayer')); const useNativeUIForVideoAudioPlayer = computed(defaultStore.makeGetterSetter('useNativeUIForVideoAudioPlayer'));
const alwaysConfirmFollow = computed(defaultStore.makeGetterSetter('alwaysConfirmFollow')); const alwaysConfirmFollow = computed(defaultStore.makeGetterSetter('alwaysConfirmFollow'));
const confirmWhenRevealingSensitiveMedia = computed(defaultStore.makeGetterSetter('confirmWhenRevealingSensitiveMedia')); const confirmWhenRevealingSensitiveMedia = computed(defaultStore.makeGetterSetter('confirmWhenRevealingSensitiveMedia'));
const contextMenu = computed(defaultStore.makeGetterSetter('contextMenu'));
watch(lang, () => { watch(lang, () => {
miLocalStorage.setItem('lang', lang.value as string); miLocalStorage.setItem('lang', lang.value as string);
@ -360,6 +367,7 @@ watch([
enableSeasonalScreenEffect, enableSeasonalScreenEffect,
alwaysConfirmFollow, alwaysConfirmFollow,
confirmWhenRevealingSensitiveMedia, confirmWhenRevealingSensitiveMedia,
contextMenu,
], async () => { ], async () => {
await reloadAsk(); await reloadAsk();
}); });

View File

@ -458,6 +458,10 @@ export const defaultStore = markRaw(new Storage('base', {
where: 'device', where: 'device',
default: false, default: false,
}, },
contextMenu: {
where: 'device',
default: 'app' as 'app' | 'appWithShift' | 'native',
},
sound_masterVolume: { sound_masterVolume: {
where: 'device', where: 'device',