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

feat: image cropping (#8808)

Browse source 
* wip

* wip

* wip
This commit is contained in:
syuilo 2022-06-11 15:45:44 +09:00 • committed by GitHub
parent 1838511766
commit ecb3c43520
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
9 changed files with 420 additions and 94 deletions
Download patch file Download diff file Expand all files Collapse all files

9
packages/client/src/components/ui/modal.vue
View file

@ -1,5 +1,5 @@
<template>
<transition :name="$store.state.animation ? (type === 'drawer') ? 'modal-drawer' : (type === 'popup') ? 'modal-popup' : 'modal' : ''" :duration="$store.state.animation ? 200 : 0" appear @after-leave="emit('closed')" @enter="emit('opening')" @after-enter="childRendered">
<transition :name="$store.state.animation ? (type === 'drawer') ? 'modal-drawer' : (type === 'popup') ? 'modal-popup' : 'modal' : ''" :duration="$store.state.animation ? 200 : 0" appear @after-leave="emit('closed')" @enter="emit('opening')" @after-enter="onOpened">
<div v-show="manualShowing != null ? manualShowing : showing" v-hotkey.global="keymap" class="qzhlnise" :class="{ drawer: type === 'drawer', dialog: type === 'dialog' || type === 'dialog:top', popup: type === 'popup' }" :style="{ zIndex, pointerEvents: (manualShowing != null ? manualShowing : showing) ? 'auto' : 'none', '--transformOrigin': transformOrigin }">
<div class="bg _modalBg" :class="{ transparent: transparentBg && (type === 'popup') }" :style="{ zIndex }" @click="onBgClick" @contextmenu.prevent.stop="() => {}"></div>
<div ref="content" class="content" :class="{ fixed, top: type === 'dialog:top' }" :style="{ zIndex }" @click.self="onBgClick">
@ -48,6 +48,7 @@ const props = withDefaults(defineProps<{
const emit = defineEmits<{
(ev: 'opening'): void;
(ev: 'opened'): void;
(ev: 'click'): void;
(ev: 'esc'): void;
(ev: 'close'): void;
@ -212,7 +213,9 @@ const align = () => {
popover.style.top = top + 'px';
};
const childRendered = () => {
const onOpened = () => {
emit('opened');
// モーダルコンテンツにマウスボタンが押され、コンテンツ外でマウスボタンが離されたときにモーダルバックグラウンドクリックと判定させないためにマウスイベントを監視しフラグ管理する
const el = content.value!.children[0];
el.addEventListener('mousedown', ev => {
@ -237,7 +240,7 @@ onMounted(() => {
await nextTick();
align();
}, { immediate: true, });
}, { immediate: true });
nextTick(() => {
const popover = content.value;