oscar-surf/misskey
oscar-surf/misskey
0
0
Fork 0
Code Issues Activity

feat(frontend): allow cropping images on drive (#11092)

Browse source 
* feat(frontend): allow cropping images on drive

* nanka iroiro

* folder

---------

Co-authored-by: tamaina <tamaina@hotmail.co.jp>
This commit is contained in:
Kagami Sascha Rosylight 2023-07-05 06:54:40 +02:00 • committed by GitHub
parent 1ab9f096c3
commit ac4245dce1
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
7 changed files with 55 additions and 18 deletions
Download patch file Download diff file Expand all files Collapse all files

21
packages/frontend/src/components/MkPostFormAttaches.vue
View file

@ -16,6 +16,7 @@
<script lang="ts" setup>
import { defineAsyncComponent } from 'vue';
import * as misskey from 'misskey-js';
import MkDriveFileThumbnail from '@/components/MkDriveFileThumbnail.vue';
import * as os from '@/os';
import { i18n } from '@/i18n';
@ -30,8 +31,9 @@ const props = defineProps<{
const emit = defineEmits<{
(ev: 'update:modelValue', value: any[]): void;
(ev: 'detach', id: string): void;
(ev: 'changeSensitive'): void;
(ev: 'changeName'): void;
(ev: 'changeSensitive', file: misskey.entities.DriveFile, isSensitive: boolean): void;
(ev: 'changeName', file: misskey.entities.DriveFile, newName: string): void;
(ev: 'replaceFile', file: misskey.entities.DriveFile, newFile: misskey.entities.DriveFile): void;
}>();
let menuShowing = false;
@ -85,8 +87,15 @@ async function describe(file) {
}, 'closed');
}
function showFileMenu(file, ev: MouseEvent) {
async function crop(file: misskey.entities.DriveFile): Promise<void> {
const newFile = await os.cropImage(file, { aspectRatio: NaN });
emit('replaceFile', file, newFile);
}
function showFileMenu(file: misskey.entities.DriveFile, ev: MouseEvent): void {
if (menuShowing) return;
const isImage = file.type.startsWith('image/');
os.popupMenu([{
text: i18n.ts.renameFile,
icon: 'ti ti-forms',
@ -99,7 +108,11 @@ function showFileMenu(file, ev: MouseEvent) {
text: i18n.ts.describeFile,
icon: 'ti ti-text-caption',
action: () => { describe(file); },
}, {
}, ...isImage ? [{
text: i18n.ts.cropImage,
icon: 'ti ti-crop',
action: () : void => { crop(file); },
}] : [], {
text: i18n.ts.attachCancel,
icon: 'ti ti-circle-x',
action: () => { detachMedia(file.id); },