From ecb3c43520e1f47447a86f4cac8b25aef039f229 Mon Sep 17 00:00:00 2001 From: syuilo Date: Sat, 11 Jun 2022 15:45:44 +0900 Subject: [PATCH] feat: image cropping (#8808) * wip * wip * wip --- CHANGELOG.md | 1 + locales/ja-JP.yml | 2 + packages/client/package.json | 19 +- .../client/src/components/cropper-dialog.vue | 171 ++++++++++++++++++ .../client/src/components/ui/modal-window.vue | 128 ++++++------- packages/client/src/components/ui/modal.vue | 9 +- packages/client/src/os.ts | 45 +++-- .../client/src/pages/settings/profile.vue | 32 +++- packages/client/yarn.lock | 107 +++++++++++ 9 files changed, 420 insertions(+), 94 deletions(-) create mode 100644 packages/client/src/components/cropper-dialog.vue diff --git a/CHANGELOG.md b/CHANGELOG.md index 713251ff4..f8597f05d 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -16,6 +16,7 @@ You should also include the user name that made the change. - プッシュ通知にクリックやactionを設定 #7667 @tamaina - ドライブに画像ファイルをアップロードするときオリジナル画像を破棄してwebpublicのみ保持するオプション @tamaina - Server: always remove completed tasks of job queue @Johann150 +- Client: アバターの設定で画像をクロップできるように @syuilo - Client: make emoji stand out more on reaction button @Johann150 - Client: display URL of QR code for TOTP registration @tamaina - Client: render quote renote CWs as MFM @pixeldesu diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml index 9cd1d1eed..43ab7f2d6 100644 --- a/locales/ja-JP.yml +++ b/locales/ja-JP.yml @@ -843,6 +843,8 @@ oneWeek: "1週間" reflectMayTakeTime: "反映されるまで時間がかかる場合があります。" failedToFetchAccountInformation: "アカウント情報の取得に失敗しました" rateLimitExceeded: "レート制限を超えました" +cropImage: "画像のクロップ" +cropImageAsk: "画像をクロップしますか?" _emailUnavailable: used: "既に使用されています" diff --git a/packages/client/package.json b/packages/client/package.json index 689cd81b2..83c8086e2 100644 --- a/packages/client/package.json +++ b/packages/client/package.json @@ -12,7 +12,11 @@ "dependencies": { "@discordapp/twemoji": "14.0.2", "@fortawesome/fontawesome-free": "6.1.1", + "@rollup/plugin-alias": "3.1.9", + "@rollup/plugin-json": "4.1.0", "@syuilo/aiscript": "0.11.1", + "@vitejs/plugin-vue": "2.3.3", + "@vue/compiler-sfc": "3.2.37", "abort-controller": "3.0.0", "autobind-decorator": "2.4.0", "autosize": "5.0.1", @@ -26,6 +30,7 @@ "chartjs-plugin-zoom": "1.2.1", "compare-versions": "4.1.3", "content-disposition": "0.5.4", + "cropperjs": "2.0.0-beta", "date-fns": "2.28.0", "escape-regexp": "0.0.1", "eventemitter3": "4.0.7", @@ -51,6 +56,7 @@ "random-seed": "0.3.0", "reflect-metadata": "0.1.13", "rndstr": "1.0.0", + "rollup": "2.75.6", "s-age": "1.1.2", "sass": "1.52.3", "seedrandom": "3.0.5", @@ -64,21 +70,16 @@ "tsc-alias": "1.6.9", "tsconfig-paths": "4.0.0", "twemoji-parser": "14.0.0", + "typescript": "4.7.3", "uuid": "8.3.2", "v-debounce": "0.1.2", "vanilla-tilt": "1.7.2", + "vite": "2.9.10", "vue": "3.2.37", "vue-prism-editor": "2.0.0-alpha.2", "vue-router": "4.0.16", "vuedraggable": "4.0.1", "websocket": "1.0.34", - "@vitejs/plugin-vue": "2.3.3", - "@vue/compiler-sfc": "3.2.37", - "@rollup/plugin-alias": "3.1.9", - "@rollup/plugin-json": "4.1.0", - "rollup": "2.75.6", - "typescript": "4.7.3", - "vite": "2.9.10", "ws": "8.8.0" }, "devDependencies": { @@ -102,11 +103,11 @@ "@types/ws": "8.5.3", "@typescript-eslint/eslint-plugin": "5.27.1", "@typescript-eslint/parser": "5.27.1", - "eslint": "8.17.0", - "eslint-plugin-vue": "9.1.0", "cross-env": "7.0.3", "cypress": "10.0.3", + "eslint": "8.17.0", "eslint-plugin-import": "2.26.0", + "eslint-plugin-vue": "9.1.0", "start-server-and-test": "1.14.0" } } diff --git a/packages/client/src/components/cropper-dialog.vue b/packages/client/src/components/cropper-dialog.vue new file mode 100644 index 000000000..24ae4e87a --- /dev/null +++ b/packages/client/src/components/cropper-dialog.vue @@ -0,0 +1,171 @@ + + + + + diff --git a/packages/client/src/components/ui/modal-window.vue b/packages/client/src/components/ui/modal-window.vue index 6de29c83f..d2b2ccff7 100644 --- a/packages/client/src/components/ui/modal-window.vue +++ b/packages/client/src/components/ui/modal-window.vue @@ -1,7 +1,7 @@ - diff --git a/packages/client/src/components/ui/modal.vue b/packages/client/src/components/ui/modal.vue index 010262da2..d6a29ec4b 100644 --- a/packages/client/src/components/ui/modal.vue +++ b/packages/client/src/components/ui/modal.vue @@ -1,5 +1,5 @@