From 2cc7f0ac39fccc28909694fae883fbad87df7658 Mon Sep 17 00:00:00 2001 From: Esurio/1673beta <60435625+1673beta@users.noreply.github.com> Date: Thu, 27 Jun 2024 14:13:32 +0900 Subject: [PATCH] Feat: QRCode Note Sharing (#45) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * feat: Get Note QRCode * fix: ボタンの間隔がないのを修正 --------- Co-authored-by: Esurio --- locales/en-US.yml | 1 + locales/index.d.ts | 38 ++++--- locales/ja-JP.yml | 1 + packages/frontend/package.json | 3 + packages/frontend/src/components/MkQrcode.vue | 88 +++++++++++++++ packages/frontend/src/os.ts | 20 ++++ .../frontend/src/scripts/get-note-menu.ts | 7 ++ pnpm-lock.yaml | 101 +++++++++++------- 8 files changed, 204 insertions(+), 55 deletions(-) create mode 100644 packages/frontend/src/components/MkQrcode.vue diff --git a/locales/en-US.yml b/locales/en-US.yml index fc71375e93..4cc370c777 100644 --- a/locales/en-US.yml +++ b/locales/en-US.yml @@ -1358,6 +1358,7 @@ additionalPermissionsForFlash: "Allow to add permission to Play" thisFlashRequiresTheFollowingPermissions: "This Play requires the following permissions" doYouWantToAllowThisPlayToAccessYourAccount: "Do you want to allow this Play to access your account?" translateProfile: "Translate profile" +getQrCode: "Get QR code" _nsfwOpenBehavior: click: "Click to open" doubleClick: "Double click to open" diff --git a/locales/index.d.ts b/locales/index.d.ts index 5446eb957d..e751df1a6a 100644 --- a/locales/index.d.ts +++ b/locales/index.d.ts @@ -4776,7 +4776,7 @@ export interface Locale extends ILocale { */ "events": string; /** - * 倒叙 + * 終了済み */ "reverseChronological": string; /** @@ -5448,7 +5448,7 @@ export interface Locale extends ILocale { */ "showUnreadNotificationsCount": string; /** - * キャット付きのみ + * ネコミミ付きのみ */ "showCatOnly": string; /** @@ -5467,6 +5467,10 @@ export interface Locale extends ILocale { * プロフィールを翻訳する */ "translateProfile": string; + /** + * QRコードを取得 + */ + "getQrCode": string; "_nsfwOpenBehavior": { /** * タップして開く @@ -6252,7 +6256,7 @@ export interface Locale extends ILocale { */ "price": string; /** - * 可用性 + * 予約可能 */ "availability": string; /** @@ -6264,11 +6268,11 @@ export interface Locale extends ILocale { */ "until": string; /** - * アベイラビリティ開始 + * 予約開始 */ "availabilityStart": string; /** - * アベイラビリティ終了 + * 予約終了 */ "availabilityEnd": string; /** @@ -7142,7 +7146,7 @@ export interface Locale extends ILocale { */ "title": string; /** - * 名前を 幼女 に設定した + * 名前を 幼女 に設定した */ "description": string; /** @@ -7296,7 +7300,7 @@ export interface Locale extends ILocale { */ "title": string; /** - * おはようようじょー！と7回投稿した + * おはようようじょー！と7日投稿した */ "description": string; /** @@ -7306,11 +7310,11 @@ export interface Locale extends ILocale { }; "_ohayoujo30": { /** - * 元気いっぱい + * 笑顔満点 */ "title": string; /** - * おはようようじょー！と30回投稿した + * おはようようじょー！と30日投稿した */ "description": string; /** @@ -7324,7 +7328,7 @@ export interface Locale extends ILocale { */ "title": string; /** - * おはようようじょー！と365回投稿した + * おはようようじょー！と365日投稿した */ "description": string; /** @@ -7524,10 +7528,10 @@ export interface Locale extends ILocale { * ドライブ容量 */ "driveCapacity": string; - /** - * ファイルサイズ上限 - */ - "fileSizeLimit": string; + /** + * ファイルサイズ上限 + */ + "fileSizeLimit": string; /** * ファイルにNSFWを常に付与 */ @@ -7580,6 +7584,10 @@ export interface Locale extends ILocale { * ノート検索の利用 */ "canSearchNotes": string; + /** + * 高度な検索の利用 + */ + "canAdvancedSearchNotes": string; /** * 翻訳機能の利用 */ @@ -8158,7 +8166,7 @@ export interface Locale extends ILocale { */ "blockCode": string; /** - * 複数行のプログラムなどのコードをブロックでシンタックスハイライトします。 + * 複数行のプログラムなどのコードをブロックでシンタックスハイライトします。いくつかの言語を指定するとその言語に合わせたシンタックスハイライトになります。 */ "blockCodeDescription": string; /** diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml index f1565658dc..ed25772295 100644 --- a/locales/ja-JP.yml +++ b/locales/ja-JP.yml @@ -1361,6 +1361,7 @@ additionalPermissionsForFlash: "Playへの追加許可" thisFlashRequiresTheFollowingPermissions: "このPlayは以下の権限を要求しています" doYouWantToAllowThisPlayToAccessYourAccount: "このPlayによるアカウントへのアクセスを許可しますか？" translateProfile: "プロフィールを翻訳する" +getQrCode: "QRコードを取得" _nsfwOpenBehavior: click: "タップして開く" diff --git a/packages/frontend/package.json b/packages/frontend/package.json index 6cbb32e519..49e30b67ff 100644 --- a/packages/frontend/package.json +++ b/packages/frontend/package.json @@ -59,6 +59,8 @@ "photoswipe": "5.4.3", "prismjs": "1.29.0", "punycode": "2.3.1", + "qrcode": "1.5.3", + "qrcode-vue3": "^1.6.8", "rollup": "4.17.2", "sanitize-html": "2.13.0", "sass": "1.76.0", @@ -110,6 +112,7 @@ "@types/node": "20.12.7", "@types/prismjs": "^1.26.0", "@types/punycode": "2.1.4", + "@types/qrcode": "1.5.5", "@types/sanitize-html": "2.11.0", "@types/seedrandom": "3.0.8", "@types/throttle-debounce": "5.0.2", diff --git a/packages/frontend/src/components/MkQrcode.vue b/packages/frontend/src/components/MkQrcode.vue new file mode 100644 index 0000000000..77a198a218 --- /dev/null +++ b/packages/frontend/src/components/MkQrcode.vue @@ -0,0 +1,88 @@ + + + + + diff --git a/packages/frontend/src/os.ts b/packages/frontend/src/os.ts index 555e8fb274..edf285932d 100644 --- a/packages/frontend/src/os.ts +++ b/packages/frontend/src/os.ts @@ -22,6 +22,7 @@ import MkPasswordDialog from '@/components/MkPasswordDialog.vue'; import MkEmojiPickerDialog from '@/components/MkEmojiPickerDialog.vue'; import MkPopupMenu from '@/components/MkPopupMenu.vue'; import MkContextMenu from '@/components/MkContextMenu.vue'; +import MkQrcode from '@/components/MkQrcode.vue'; import { MenuItem } from '@/types/menu.js'; import copyToClipboard from '@/scripts/copy-to-clipboard.js'; import { showMovedDialog } from '@/scripts/show-moved-dialog.js'; @@ -692,3 +693,22 @@ export function checkExistence(fileData: ArrayBuffer): Promise { }); }); }*/ + +export async function displayQrCode(qrCode: string) { + ( + await new Promise<(() => void ) | undefined>((resolve) => { + let dispose: (() => void ) | undefined; + popup( + MkQrcode, + { qrCode }, + { + closed: () => { + resolve(dispose); + }, + }, + ).then((res) =>{ + dispose = res.dispose; + }); + }) + )?.(); +} diff --git a/packages/frontend/src/scripts/get-note-menu.ts b/packages/frontend/src/scripts/get-note-menu.ts index 225f5ede73..2e42bd1935 100644 --- a/packages/frontend/src/scripts/get-note-menu.ts +++ b/packages/frontend/src/scripts/get-note-menu.ts @@ -434,6 +434,13 @@ export function getNoteMenu(props: { text: i18n.ts.pin, action: () => togglePin(true), } : undefined, + { + icon: 'ti ti-qrcode', + text: i18n.ts.getQrCode, + action: () => { + os.displayQrCode(`${url}/notes/${appearNote.id}`); + } + }, { type: 'parent' as const, icon: 'ti ti-note', diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 1f777aa306..766852f415 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -935,6 +935,12 @@ importers: punycode: specifier: 2.3.1 version: 2.3.1 + qrcode: + specifier: 1.5.3 + version: 1.5.3 + qrcode-vue3: + specifier: ^1.6.8 + version: 1.6.8 rollup: specifier: 4.17.2 version: 4.17.2 @@ -1083,6 +1089,9 @@ importers: '@types/punycode': specifier: 2.1.4 version: 2.1.4 + '@types/qrcode': + specifier: 1.5.5 + version: 1.5.5 '@types/sanitize-html': specifier: 2.11.0 version: 2.11.0 @@ -9967,6 +9976,12 @@ packages: resolution: {integrity: sha512-pMpnA0qRdFp32b1sJl1wOJNxZLQ2cbQx+k6tjNtZ8CpvVhNqEPRgivZ2WOUev2YMajecdH7ctUPDvEe87nariQ==} engines: {node: '>=6.0.0'} + qrcode-generator@1.4.4: + resolution: {integrity: sha512-HM7yY8O2ilqhmULxGMpcHSF1EhJJ9yBj8gvDEuZ6M+KGJ0YY2hKpnXvRD+hZPLrDVck3ExIGhmPtSdcjC+guuw==} + + qrcode-vue3@1.6.8: + resolution: {integrity: sha512-LtMnwKWi58ZqHbXBcsTF/VxDYhI6RrBIrDQw8fbDVlO8p5tJBZa7TaIaVYLY937vKO2WCEBmOKksGlpm5ccEIg==} + qrcode@1.5.3: resolution: {integrity: sha512-puyri6ApkEHYiVl4CFzo1tDkAZ+ATcnbJrJ6RiBM1Fhctdn/ix9MTE3hRph33omisEbC/2fcfemsseiKgBPKZg==} engines: {node: '>=10.13.0'} @@ -12360,7 +12375,7 @@ snapshots: '@babel/traverse': 7.24.7 '@babel/types': 7.24.7 convert-source-map: 2.0.0 - debug: 4.3.5(supports-color@8.1.1) + debug: 4.3.5(supports-color@5.5.0) gensync: 1.0.0-beta.2 json5: 2.2.3 semver: 6.3.1 @@ -12420,7 +12435,7 @@ snapshots: '@babel/core': 7.24.7 '@babel/helper-compilation-targets': 7.24.7 '@babel/helper-plugin-utils': 7.24.7 - debug: 4.3.5(supports-color@8.1.1) + debug: 4.3.5(supports-color@5.5.0) lodash.debounce: 4.0.8 resolve: 1.22.8 transitivePeerDependencies: @@ -13164,7 +13179,7 @@ snapshots: '@babel/helper-split-export-declaration': 7.24.7 '@babel/parser': 7.24.7 '@babel/types': 7.24.7 - debug: 4.3.5(supports-color@8.1.1) + debug: 4.3.5(supports-color@5.5.0) globals: 11.12.0 transitivePeerDependencies: - supports-color @@ -13548,7 +13563,7 @@ snapshots: '@eslint/eslintrc@2.1.4': dependencies: ajv: 6.12.6 - debug: 4.3.5(supports-color@8.1.1) + debug: 4.3.5(supports-color@5.5.0) espree: 9.6.1 globals: 13.24.0 ignore: 5.3.1 @@ -13772,7 +13787,7 @@ snapshots: '@humanwhocodes/config-array@0.11.14': dependencies: '@humanwhocodes/object-schema': 2.0.3 - debug: 4.3.5(supports-color@8.1.1) + debug: 4.3.5(supports-color@5.5.0) minimatch: 3.1.2 transitivePeerDependencies: - supports-color @@ -14422,7 +14437,7 @@ snapshots: '@opensearch-project/opensearch@2.10.0': dependencies: aws4: 1.13.0 - debug: 4.3.5(supports-color@8.1.1) + debug: 4.3.5(supports-color@5.5.0) hpagent: 1.2.0 json11: 1.1.2 ms: 2.1.3 @@ -16716,7 +16731,7 @@ snapshots: '@typescript-eslint/type-utils': 6.11.0(eslint@8.53.0)(typescript@5.3.3) '@typescript-eslint/utils': 6.11.0(eslint@8.53.0)(typescript@5.3.3) '@typescript-eslint/visitor-keys': 6.11.0 - debug: 4.3.5(supports-color@8.1.1) + debug: 4.3.5(supports-color@5.5.0) eslint: 8.53.0 graphemer: 1.4.0 ignore: 5.3.1 @@ -16736,7 +16751,7 @@ snapshots: '@typescript-eslint/type-utils': 7.1.0(eslint@8.57.0)(typescript@5.3.3) '@typescript-eslint/utils': 7.1.0(eslint@8.57.0)(typescript@5.3.3) '@typescript-eslint/visitor-keys': 7.1.0 - debug: 4.3.5(supports-color@8.1.1) + debug: 4.3.5(supports-color@5.5.0) eslint: 8.57.0 graphemer: 1.4.0 ignore: 5.3.1 @@ -16756,7 +16771,7 @@ snapshots: '@typescript-eslint/type-utils': 7.7.1(eslint@8.57.0)(typescript@5.4.5) '@typescript-eslint/utils': 7.7.1(eslint@8.57.0)(typescript@5.4.5) '@typescript-eslint/visitor-keys': 7.7.1 - debug: 4.3.5(supports-color@8.1.1) + debug: 4.3.5(supports-color@5.5.0) eslint: 8.57.0 graphemer: 1.4.0 ignore: 5.3.1 @@ -16774,7 +16789,7 @@ snapshots: '@typescript-eslint/types': 6.11.0 '@typescript-eslint/typescript-estree': 6.11.0(typescript@5.3.3) '@typescript-eslint/visitor-keys': 6.11.0 - debug: 4.3.5(supports-color@8.1.1) + debug: 4.3.5(supports-color@5.5.0) eslint: 8.53.0 optionalDependencies: typescript: 5.3.3 @@ -16787,7 +16802,7 @@ snapshots: '@typescript-eslint/types': 7.1.0 '@typescript-eslint/typescript-estree': 7.1.0(typescript@5.3.3) '@typescript-eslint/visitor-keys': 7.1.0 - debug: 4.3.5(supports-color@8.1.1) + debug: 4.3.5(supports-color@5.5.0) eslint: 8.57.0 optionalDependencies: typescript: 5.3.3 @@ -16800,7 +16815,7 @@ snapshots: '@typescript-eslint/types': 7.7.1 '@typescript-eslint/typescript-estree': 7.7.1(typescript@5.4.5) '@typescript-eslint/visitor-keys': 7.7.1 - debug: 4.3.5(supports-color@8.1.1) + debug: 4.3.5(supports-color@5.5.0) eslint: 8.57.0 optionalDependencies: typescript: 5.4.5 @@ -16831,7 +16846,7 @@ snapshots: dependencies: '@typescript-eslint/typescript-estree': 6.11.0(typescript@5.3.3) '@typescript-eslint/utils': 6.11.0(eslint@8.53.0)(typescript@5.3.3) - debug: 4.3.5(supports-color@8.1.1) + debug: 4.3.5(supports-color@5.5.0) eslint: 8.53.0 ts-api-utils: 1.3.0(typescript@5.3.3) optionalDependencies: @@ -16843,7 +16858,7 @@ snapshots: dependencies: '@typescript-eslint/typescript-estree': 7.1.0(typescript@5.3.3) '@typescript-eslint/utils': 7.1.0(eslint@8.57.0)(typescript@5.3.3) - debug: 4.3.5(supports-color@8.1.1) + debug: 4.3.5(supports-color@5.5.0) eslint: 8.57.0 ts-api-utils: 1.3.0(typescript@5.3.3) optionalDependencies: @@ -16855,7 +16870,7 @@ snapshots: dependencies: '@typescript-eslint/typescript-estree': 7.7.1(typescript@5.4.5) '@typescript-eslint/utils': 7.7.1(eslint@8.57.0)(typescript@5.4.5) - debug: 4.3.5(supports-color@8.1.1) + debug: 4.3.5(supports-color@5.5.0) eslint: 8.57.0 ts-api-utils: 1.3.0(typescript@5.4.5) optionalDependencies: @@ -16875,7 +16890,7 @@ snapshots: dependencies: '@typescript-eslint/types': 5.62.0 '@typescript-eslint/visitor-keys': 5.62.0 - debug: 4.3.5(supports-color@8.1.1) + debug: 4.3.5(supports-color@5.5.0) globby: 11.1.0 is-glob: 4.0.3 semver: 7.6.2 @@ -16889,7 +16904,7 @@ snapshots: dependencies: '@typescript-eslint/types': 6.11.0 '@typescript-eslint/visitor-keys': 6.11.0 - debug: 4.3.5(supports-color@8.1.1) + debug: 4.3.5(supports-color@5.5.0) globby: 11.1.0 is-glob: 4.0.3 semver: 7.6.2 @@ -16903,7 +16918,7 @@ snapshots: dependencies: '@typescript-eslint/types': 7.1.0 '@typescript-eslint/visitor-keys': 7.1.0 - debug: 4.3.5(supports-color@8.1.1) + debug: 4.3.5(supports-color@5.5.0) globby: 11.1.0 is-glob: 4.0.3 minimatch: 9.0.3 @@ -16918,7 +16933,7 @@ snapshots: dependencies: '@typescript-eslint/types': 7.7.1 '@typescript-eslint/visitor-keys': 7.7.1 - debug: 4.3.5(supports-color@8.1.1) + debug: 4.3.5(supports-color@5.5.0) globby: 11.1.0 is-glob: 4.0.3 minimatch: 9.0.4 @@ -17291,13 +17306,13 @@ snapshots: agent-base@6.0.2: dependencies: - debug: 4.3.5(supports-color@8.1.1) + debug: 4.3.5(supports-color@5.5.0) transitivePeerDependencies: - supports-color agent-base@7.1.1: dependencies: - debug: 4.3.5(supports-color@8.1.1) + debug: 4.3.5(supports-color@5.5.0) transitivePeerDependencies: - supports-color @@ -18670,7 +18685,7 @@ snapshots: detect-port@1.6.1: dependencies: address: 1.2.2 - debug: 4.3.5(supports-color@8.1.1) + debug: 4.3.5(supports-color@5.5.0) transitivePeerDependencies: - supports-color @@ -18917,7 +18932,7 @@ snapshots: esbuild-register@3.5.0(esbuild@0.20.2): dependencies: - debug: 4.3.5(supports-color@8.1.1) + debug: 4.3.5(supports-color@5.5.0) esbuild: 0.20.2 transitivePeerDependencies: - supports-color @@ -19212,7 +19227,7 @@ snapshots: ajv: 6.12.6 chalk: 4.1.2 cross-spawn: 7.0.3 - debug: 4.3.5(supports-color@8.1.1) + debug: 4.3.5(supports-color@5.5.0) doctrine: 3.0.0 escape-string-regexp: 4.0.0 eslint-scope: 7.2.2 @@ -19255,7 +19270,7 @@ snapshots: ajv: 6.12.6 chalk: 4.1.2 cross-spawn: 7.0.3 - debug: 4.3.5(supports-color@8.1.1) + debug: 4.3.5(supports-color@5.5.0) doctrine: 3.0.0 escape-string-regexp: 4.0.0 eslint-scope: 7.2.2 @@ -20233,14 +20248,14 @@ snapshots: dependencies: '@tootallnate/once': 2.0.0 agent-base: 6.0.2 - debug: 4.3.5(supports-color@8.1.1) + debug: 4.3.5(supports-color@5.5.0) transitivePeerDependencies: - supports-color http-proxy-agent@7.0.2: dependencies: agent-base: 7.1.1 - debug: 4.3.5(supports-color@8.1.1) + debug: 4.3.5(supports-color@5.5.0) transitivePeerDependencies: - supports-color @@ -20279,14 +20294,14 @@ snapshots: https-proxy-agent@5.0.1: dependencies: agent-base: 6.0.2 - debug: 4.3.5(supports-color@8.1.1) + debug: 4.3.5(supports-color@5.5.0) transitivePeerDependencies: - supports-color https-proxy-agent@7.0.4: dependencies: agent-base: 7.1.1 - debug: 4.3.5(supports-color@8.1.1) + debug: 4.3.5(supports-color@5.5.0) transitivePeerDependencies: - supports-color @@ -20394,7 +20409,7 @@ snapshots: dependencies: '@ioredis/commands': 1.2.0 cluster-key-slot: 1.1.2 - debug: 4.3.5(supports-color@8.1.1) + debug: 4.3.5(supports-color@5.5.0) denque: 2.1.0 lodash.defaults: 4.2.0 lodash.isarguments: 3.1.0 @@ -20659,7 +20674,7 @@ snapshots: istanbul-lib-source-maps@4.0.1: dependencies: - debug: 4.3.5(supports-color@8.1.1) + debug: 4.3.5(supports-color@5.5.0) istanbul-lib-coverage: 3.2.2 source-map: 0.6.1 transitivePeerDependencies: @@ -21782,7 +21797,7 @@ snapshots: micromark@4.0.0: dependencies: '@types/debug': 4.1.12 - debug: 4.3.5(supports-color@8.1.1) + debug: 4.3.5(supports-color@5.5.0) decode-named-character-reference: 1.0.2 devlop: 1.1.0 micromark-core-commonmark: 2.0.1 @@ -23084,6 +23099,12 @@ snapshots: pvutils@1.1.3: {} + qrcode-generator@1.4.4: {} + + qrcode-vue3@1.6.8: + dependencies: + qrcode-generator: 1.4.4 + qrcode@1.5.3: dependencies: dijkstrajs: 1.0.3 @@ -23401,7 +23422,7 @@ snapshots: require-in-the-middle@7.3.0: dependencies: - debug: 4.3.5(supports-color@8.1.1) + debug: 4.3.5(supports-color@5.5.0) module-details-from-path: 1.0.3 resolve: 1.22.8 transitivePeerDependencies: @@ -23459,7 +23480,7 @@ snapshots: retry-request@5.0.2: dependencies: - debug: 4.3.5(supports-color@8.1.1) + debug: 4.3.5(supports-color@5.5.0) extend: 3.0.2 transitivePeerDependencies: - supports-color @@ -23711,7 +23732,7 @@ snapshots: dependencies: '@hapi/hoek': 10.0.1 '@hapi/wreck': 18.1.0 - debug: 4.3.5(supports-color@8.1.1) + debug: 4.3.5(supports-color@5.5.0) joi: 17.13.3 transitivePeerDependencies: - supports-color @@ -23809,7 +23830,7 @@ snapshots: socks-proxy-agent@8.0.3: dependencies: agent-base: 7.1.1 - debug: 4.3.5(supports-color@8.1.1) + debug: 4.3.5(supports-color@5.5.0) socks: 2.8.3 transitivePeerDependencies: - supports-color @@ -24456,7 +24477,7 @@ snapshots: chalk: 4.1.2 cli-highlight: 2.1.11 dayjs: 1.11.11 - debug: 4.3.5(supports-color@8.1.1) + debug: 4.3.5(supports-color@5.5.0) dotenv: 16.4.5 glob: 10.3.12 mkdirp: 2.1.6 @@ -24663,7 +24684,7 @@ snapshots: vite-node@0.34.6(@types/node@20.12.7)(sass@1.76.0)(terser@5.30.3): dependencies: cac: 6.7.14 - debug: 4.3.5(supports-color@8.1.1) + debug: 4.3.5(supports-color@5.5.0) mlly: 1.7.1 pathe: 1.1.2 picocolors: 1.0.1 @@ -24712,7 +24733,7 @@ snapshots: acorn-walk: 8.3.3 cac: 6.7.14 chai: 4.4.1 - debug: 4.3.5(supports-color@8.1.1) + debug: 4.3.5(supports-color@5.5.0) local-pkg: 0.4.3 magic-string: 0.30.10 pathe: 1.1.2 @@ -24796,7 +24817,7 @@ snapshots: vue-eslint-parser@9.4.2(eslint@8.57.0): dependencies: - debug: 4.3.5(supports-color@8.1.1) + debug: 4.3.5(supports-color@5.5.0) eslint: 8.57.0 eslint-scope: 7.2.2 eslint-visitor-keys: 3.4.3