Improve client

This commit is contained in:
syuilo 2021-08-08 12:19:10 +09:00
parent c968633d15
commit 65858dab3e
39 changed files with 286 additions and 83 deletions

View File

@ -114,7 +114,7 @@ export default defineComponent({
if (this.selectMode) {
this.$emit('chosen', this.file);
} else {
os.modalMenu(this.getMenu(), ev.currentTarget || ev.target);
os.popupMenu(this.getMenu(), ev.currentTarget || ev.target);
}
},

View File

@ -629,7 +629,7 @@ export default defineComponent({
},
showMenu(ev) {
os.modalMenu(this.getMenu(), ev.currentTarget || ev.target);
os.popupMenu(this.getMenu(), ev.currentTarget || ev.target);
},
onContextmenu(ev) {

View File

@ -1,17 +1,17 @@
<template>
<MkModal ref="modal" :manual-showing="manualShowing" :src="src" :front="true" @click="$refs.modal.close()" @opening="opening" @close="$emit('close')" @closed="$emit('closed')">
<MkEmojiPicker :show-pinned="showPinned" :as-reaction-picker="asReactionPicker" @chosen="chosen" ref="picker"/>
</MkModal>
<MkPopup ref="popup" :manual-showing="manualShowing" :src="src" :front="true" @click="$refs.popup.close()" @opening="opening" @close="$emit('close')" @closed="$emit('closed')">
<MkEmojiPicker :show-pinned="showPinned" :as-reaction-picker="asReactionPicker" @chosen="chosen" ref="picker" style="box-shadow: 0 8px 32px rgb(0 0 0 / 30%);"/>
</MkPopup>
</template>
<script lang="ts">
import { defineComponent, markRaw } from 'vue';
import MkModal from '@client/components/ui/modal.vue';
import MkPopup from '@client/components/ui/popup.vue';
import MkEmojiPicker from '@client/components/emoji-picker.vue';
export default defineComponent({
components: {
MkModal,
MkPopup,
MkEmojiPicker,
},
@ -33,7 +33,7 @@ export default defineComponent({
},
},
emits: ['done', 'closed'],
emits: ['done', 'close', 'closed'],
data() {
return {
@ -44,7 +44,7 @@ export default defineComponent({
methods: {
chosen(emoji: any) {
this.$emit('done', emoji);
this.$refs.modal.close();
this.$refs.popup.close();
},
opening() {

View File

@ -454,7 +454,7 @@ export default defineComponent({
renote(viaKeyboard = false) {
pleaseLogin();
this.blur();
os.modalMenu([{
os.popupMenu([{
text: this.$ts.renote,
icon: 'fas fa-retweet',
action: () => {
@ -743,14 +743,14 @@ export default defineComponent({
},
menu(viaKeyboard = false) {
os.modalMenu(this.getMenu(), this.$refs.menuButton, {
os.popupMenu(this.getMenu(), this.$refs.menuButton, {
viaKeyboard
}).then(this.focus);
},
showRenoteMenu(viaKeyboard = false) {
if (!this.isMyRenote) return;
os.modalMenu([{
os.popupMenu([{
text: this.$ts.unrenote,
icon: 'fas fa-trash-alt',
danger: true,
@ -794,7 +794,7 @@ export default defineComponent({
async clip() {
const clips = await os.api('clips/list');
os.modalMenu([{
os.popupMenu([{
icon: 'fas fa-plus',
text: this.$ts.createNew,
action: async () => {

View File

@ -429,7 +429,7 @@ export default defineComponent({
renote(viaKeyboard = false) {
pleaseLogin();
this.blur();
os.modalMenu([{
os.popupMenu([{
text: this.$ts.renote,
icon: 'fas fa-retweet',
action: () => {
@ -718,14 +718,14 @@ export default defineComponent({
},
menu(viaKeyboard = false) {
os.modalMenu(this.getMenu(), this.$refs.menuButton, {
os.popupMenu(this.getMenu(), this.$refs.menuButton, {
viaKeyboard
}).then(this.focus);
},
showRenoteMenu(viaKeyboard = false) {
if (!this.isMyRenote) return;
os.modalMenu([{
os.popupMenu([{
text: this.$ts.unrenote,
icon: 'fas fa-trash-alt',
danger: true,
@ -769,7 +769,7 @@ export default defineComponent({
async clip() {
const clips = await os.api('clips/list');
os.modalMenu([{
os.popupMenu([{
icon: 'fas fa-plus',
text: this.$ts.createNew,
action: async () => {

View File

@ -112,7 +112,7 @@ export default defineComponent({
showFileMenu(file, ev: MouseEvent) {
if (this.menu) return;
this.menu = os.modalMenu([{
this.menu = os.popupMenu([{
text: this.$ts.renameFile,
icon: 'fas fa-i-cursor',
action: () => { this.rename(file) }

View File

@ -664,7 +664,7 @@ export default defineComponent({
},
showActions(ev) {
os.modalMenu(postFormActions.map(action => ({
os.popupMenu(postFormActions.map(action => ({
text: action.title,
action: () => {
action.handler({

View File

@ -93,7 +93,7 @@ export default defineComponent({
},
async openMenu(ev) {
os.modalMenu([{
os.popupMenu([{
type: 'label',
text: 'Fruits'
}, {

View File

@ -115,7 +115,7 @@ export default defineComponent({
z-index: 1; // box-shadow
display: block;
min-width: 100px;
width: min-content;
width: max-content;
padding: 8px 14px;
text-align: center;
font-weight: normal;

View File

@ -210,8 +210,7 @@ export default defineComponent({
> .label {
font-size: 0.85em;
padding: 0 0 6px 6px;
font-weight: bold;
padding: 0 0 8px 12px;
user-select: none;
&:empty {
@ -221,7 +220,7 @@ export default defineComponent({
> .caption {
font-size: 0.8em;
padding: 6px 0 0 6px;
padding: 8px 0 0 12px;
color: var(--fgTransparentWeak);
&:empty {
@ -251,6 +250,7 @@ export default defineComponent({
outline: none;
box-shadow: none;
box-sizing: border-box;
transition: border-color 0.1s ease-out;
&:hover {
border-color: var(--inputBorderHover);

View File

@ -1,20 +1,25 @@
<template>
<MkModal ref="modal" :src="src" @click="$refs.modal.close()" @closed="$emit('closed')">
<MkMenu :items="items" :align="align" @close="$refs.modal.close()" class="_popup"/>
</MkModal>
<MkPopup ref="popup" :src="src" @closed="$emit('closed')">
<MkMenu :items="items" :align="align" @close="$refs.popup.close()" class="_popup" style="box-shadow: 0 8px 32px rgb(0 0 0 / 30%);"/>
</MkPopup>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import MkModal from './modal.vue';
import MkPopup from './popup.vue';
import MkMenu from './menu.vue';
export default defineComponent({
components: {
MkModal,
MkPopup,
MkMenu,
},
props: {
showing: {
type: Boolean,
required: true,
},
items: {
type: Array,
required: true
@ -31,17 +36,7 @@ export default defineComponent({
required: false
},
},
emits: ['closed'],
computed: {
keymap(): any {
return {
'esc': () => this.$refs.modal.close(),
};
},
},
emits: ['close', 'closed'],
});
</script>
<style lang="scss" scoped>
</style>

View File

@ -0,0 +1,208 @@
<template>
<transition :name="$store.state.animation ? 'popup-menu' : ''" :duration="$store.state.animation ? 300 : 0" appear @after-leave="onClosed" @enter="$emit('opening')" @after-enter="childRendered">
<div v-show="manualShowing != null ? manualShowing : showing" class="ccczpooj" :class="{ front, fixed, top: position === 'top' }" ref="content" :style="{ pointerEvents: (manualShowing != null ? manualShowing : showing) ? 'auto' : 'none', '--transformOrigin': transformOrigin }">
<slot></slot>
</div>
</transition>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
function getFixedContainer(el: Element | null): Element | null {
if (el == null || el.tagName === 'BODY') return null;
const position = window.getComputedStyle(el).getPropertyValue('position');
if (position === 'fixed') {
return el;
} else {
return getFixedContainer(el.parentElement);
}
}
export default defineComponent({
props: {
manualShowing: {
type: Boolean,
required: false,
default: null,
},
srcCenter: {
type: Boolean,
required: false
},
src: {
required: false,
},
position: {
required: false
},
front: {
type: Boolean,
required: false,
default: false,
}
},
emits: ['opening', 'click', 'esc', 'close', 'closed'],
data() {
return {
showing: true,
fixed: false,
transformOrigin: 'center',
contentClicking: false,
};
},
mounted() {
this.$watch('src', () => {
this.fixed = getFixedContainer(this.src) != null;
this.$nextTick(() => {
this.align();
});
}, { immediate: true });
this.$nextTick(() => {
const popover = this.$refs.content as any;
new ResizeObserver((entries, observer) => {
this.align();
}).observe(popover);
});
document.addEventListener('mousedown', this.onDocumentClick);
},
beforeUnmount() {
document.removeEventListener('mousedown', this.onDocumentClick);
},
methods: {
align() {
if (this.src == null) return;
const popover = this.$refs.content as any;
if (popover == null) return;
const rect = this.src.getBoundingClientRect();
const width = popover.offsetWidth;
const height = popover.offsetHeight;
let left;
let top;
if (this.srcCenter) {
const x = rect.left + (this.fixed ? 0 : window.pageXOffset) + (this.src.offsetWidth / 2);
const y = rect.top + (this.fixed ? 0 : window.pageYOffset) + (this.src.offsetHeight / 2);
left = (x - (width / 2));
top = (y - (height / 2));
} else {
const x = rect.left + (this.fixed ? 0 : window.pageXOffset) + (this.src.offsetWidth / 2);
const y = rect.top + (this.fixed ? 0 : window.pageYOffset) + this.src.offsetHeight;
left = (x - (width / 2));
top = y;
}
if (this.fixed) {
if (left + width > window.innerWidth) {
left = window.innerWidth - width;
}
if (top + height > window.innerHeight) {
top = window.innerHeight - height;
}
} else {
if (left + width - window.pageXOffset > window.innerWidth) {
left = window.innerWidth - width + window.pageXOffset - 1;
}
if (top + height - window.pageYOffset > window.innerHeight) {
top = window.innerHeight - height + window.pageYOffset - 1;
}
}
if (top < 0) {
top = 0;
}
if (left < 0) {
left = 0;
}
if (top > rect.top + (this.fixed ? 0 : window.pageYOffset)) {
this.transformOrigin = 'center top';
} else {
this.transformOrigin = 'center';
}
popover.style.left = left + 'px';
popover.style.top = top + 'px';
},
childRendered() {
//
const content = this.$refs.content.children[0];
content.addEventListener('mousedown', e => {
this.contentClicking = true;
window.addEventListener('mouseup', e => {
// click mouseup
setTimeout(() => {
this.contentClicking = false;
}, 100);
}, { passive: true, once: true });
}, { passive: true });
},
close() {
this.showing = false;
this.$emit('close');
},
onClosed() {
this.$emit('closed');
},
onDocumentClick(ev) {
const flyoutElement = this.$refs.content;
let targetElement = ev.target;
do {
if (targetElement === flyoutElement) {
return;
}
targetElement = targetElement.parentNode;
} while (targetElement);
this.close();
}
}
});
</script>
<style lang="scss" scoped>
.popup-menu-enter-active {
transform-origin: var(--transformOrigin);
transition: opacity 0.2s cubic-bezier(0, 0, 0.2, 1), transform 0.2s cubic-bezier(0, 0, 0.2, 1) !important;
}
.popup-menu-leave-active {
transform-origin: var(--transformOrigin);
transition: opacity 0.2s cubic-bezier(0.4, 0, 1, 1), transform 0.2s cubic-bezier(0.4, 0, 1, 1) !important;
}
.popup-menu-enter-from, .popup-menu-leave-to {
pointer-events: none;
opacity: 0;
transform: scale(0.9);
}
.ccczpooj {
position: absolute;
z-index: 10000;
&.fixed {
position: fixed;
}
&.front {
z-index: 20000;
}
}
</style>

View File

@ -155,8 +155,7 @@ export default defineComponent({
> .label {
font-size: 0.85em;
padding: 0 0 6px 6px;
font-weight: bold;
padding: 0 0 8px 12px;
user-select: none;
&:empty {
@ -166,7 +165,7 @@ export default defineComponent({
> .caption {
font-size: 0.8em;
padding: 6px 0 0 6px;
padding: 8px 0 0 12px;
color: var(--fgTransparentWeak);
&:empty {
@ -197,6 +196,7 @@ export default defineComponent({
box-shadow: none;
box-sizing: border-box;
cursor: pointer;
transition: border-color 0.1s ease-out;
&:hover {
border-color: var(--inputBorderHover);

View File

@ -176,8 +176,7 @@ export default defineComponent({
> .label {
font-size: 0.85em;
padding: 0 0 6px 6px;
font-weight: bold;
padding: 0 0 8px 12px;
user-select: none;
&:empty {
@ -187,7 +186,7 @@ export default defineComponent({
> .caption {
font-size: 0.8em;
padding: 6px 0 0 6px;
padding: 8px 0 0 12px;
color: var(--fgTransparentWeak);
&:empty {
@ -218,6 +217,7 @@ export default defineComponent({
outline: none;
box-shadow: none;
box-sizing: border-box;
transition: border-color 0.1s ease-out;
&:hover {
border-color: var(--inputBorderHover);

View File

@ -143,7 +143,7 @@ export const menuDef = {
title: 'switchUi',
icon: 'fas fa-columns',
action: (ev) => {
os.modalMenu([{
os.popupMenu([{
text: i18n.locale.default,
action: () => {
localStorage.setItem('ui', 'default');

View File

@ -368,10 +368,10 @@ export async function openEmojiPicker(src?: HTMLElement, opts, initialTextarea:
});
}
export function modalMenu(items: any[], src?: HTMLElement, options?: { align?: string; viaKeyboard?: boolean }) {
export function popupMenu(items: any[], src?: HTMLElement, options?: { align?: string; viaKeyboard?: boolean }) {
return new Promise((resolve, reject) => {
let dispose;
popup(import('@client/components/ui/modal-menu.vue'), {
popup(import('@client/components/ui/popup-menu.vue'), {
items,
src,
align: options?.align,

View File

@ -272,7 +272,7 @@ export default defineComponent({
showTypeMenu(e: MouseEvent) {
return new Promise<ThemeValue>((resolve) => {
os.modalMenu([{
os.popupMenu([{
text: this.$ts._theme.defaultValue,
action: () => resolve(null),
}, {

View File

@ -79,7 +79,7 @@ export default defineComponent({
methods: {
menu(ev) {
os.modalMenu([this.isOwned ? {
os.popupMenu([this.isOwned ? {
icon: 'fas fa-pencil-alt',
text: this.$ts.edit,
action: async () => {

View File

@ -80,7 +80,7 @@ export default defineComponent({
methods: {
menu(emoji, ev) {
os.modalMenu([{
os.popupMenu([{
type: 'label',
text: ':' + emoji.name + ':',
}, {

View File

@ -146,7 +146,7 @@ export default defineComponent({
},
remoteMenu(emoji, ev) {
os.modalMenu([{
os.popupMenu([{
type: 'label',
text: ':' + emoji.name + ':',
}, {

View File

@ -167,7 +167,7 @@ export default defineComponent({
};
const lookup = (ev) => {
os.modalMenu([{
os.popupMenu([{
text: i18n.locale.user,
icon: 'fas fa-user',
action: () => {

View File

@ -116,7 +116,7 @@ export default defineComponent({
},
start(ev) {
os.modalMenu([{
os.popupMenu([{
text: this.$ts.messagingWithUser,
icon: 'fas fa-user',
action: () => { this.startUser() }

View File

@ -320,7 +320,7 @@ const Component = defineComponent({
menu(ev) {
const path = this.groupId ? `/my/messaging/group/${this.groupId}` : `/my/messaging/${this.userAcct}`;
os.modalMenu([this.inWindow ? undefined : {
os.popupMenu([this.inWindow ? undefined : {
text: this.$ts.openInWindow,
icon: 'fas fa-window-maximize',
action: () => {

View File

@ -64,7 +64,7 @@ export default defineComponent({
methods: {
menu(account, ev) {
os.modalMenu([{
os.popupMenu([{
text: this.$ts.switch,
icon: 'fas fa-exchange-alt',
action: () => this.switchAccount(account),
@ -77,7 +77,7 @@ export default defineComponent({
},
addAccount(ev) {
os.modalMenu([{
os.popupMenu([{
text: this.$ts.existingAccount,
action: () => { this.addExistingAccount(); },
}, {

View File

@ -94,7 +94,7 @@ export default defineComponent({
},
remove(reaction, ev) {
os.modalMenu([{
os.popupMenu([{
text: this.$ts.remove,
action: () => {
this.reactions = this.reactions.filter(x => x !== reaction)

View File

@ -147,7 +147,7 @@ export default defineComponent({
this.saveSrc();
}
}));
os.modalMenu(items, ev.currentTarget || ev.target);
os.popupMenu(items, ev.currentTarget || ev.target);
},
async chooseAntenna(ev) {
@ -161,7 +161,7 @@ export default defineComponent({
this.saveSrc();
}
}));
os.modalMenu(items, ev.currentTarget || ev.target);
os.popupMenu(items, ev.currentTarget || ev.target);
},
async chooseChannel(ev) {
@ -177,7 +177,7 @@ export default defineComponent({
this.$router.push(`/channels/${channel.id}`);
}
}));
os.modalMenu(items, ev.currentTarget || ev.target);
os.popupMenu(items, ev.currentTarget || ev.target);
},
saveSrc() {

View File

@ -338,7 +338,7 @@ export default defineComponent({
},
menu(ev) {
os.modalMenu(getUserMenu(this.user), ev.currentTarget || ev.target);
os.popupMenu(getUserMenu(this.user), ev.currentTarget || ev.target);
},
parallaxLoop() {

View File

@ -117,7 +117,7 @@ export default defineComponent({
},
showMenu(ev) {
os.modalMenu([{
os.popupMenu([{
text: this.$t('aboutX', { x: instanceName }),
icon: 'fas fa-info-circle',
action: () => {

View File

@ -101,7 +101,7 @@ export default defineComponent({
},
showMenu(ev) {
os.modalMenu([{
os.popupMenu([{
text: this.$t('aboutX', { x: instanceName }),
icon: 'fas fa-info-circle',
action: () => {

View File

@ -121,7 +121,7 @@ export default defineComponent({
},
showMenu(ev) {
os.modalMenu([{
os.popupMenu([{
text: this.$t('aboutX', { x: instanceName }),
icon: 'fas fa-info-circle',
action: () => {

View File

@ -69,7 +69,7 @@ export function selectFile(src: any, label: string | null, multiple = false) {
});
};
os.modalMenu([label ? {
os.popupMenu([label ? {
text: label,
type: 'label'
} : undefined, {

View File

@ -31,7 +31,7 @@
<script lang="ts">
import { defineComponent } from 'vue';
import { modalMenu } from '@client/os';
import { popupMenu } from '@client/os';
import { url } from '@client/config';
export default defineComponent({
@ -121,7 +121,7 @@ export default defineComponent({
if (menu.length > 0) menu.push(null);
menu = menu.concat(this.menu);
}
modalMenu(menu, ev.currentTarget || ev.target);
popupMenu(menu, ev.currentTarget || ev.target);
}
}
});

View File

@ -150,7 +150,7 @@ export default defineComponent({
});
}));
os.modalMenu([...[{
os.popupMenu([...[{
type: 'link',
text: this.$ts.profile,
to: `/@${ this.$i.username }`,
@ -159,7 +159,7 @@ export default defineComponent({
icon: 'fas fa-plus',
text: this.$ts.addAccount,
action: () => {
os.modalMenu([{
os.popupMenu([{
text: this.$ts.existingAccount,
action: () => { this.addAccount(); },
}, {

View File

@ -432,7 +432,7 @@ export default defineComponent({
pleaseLogin();
this.operating = true;
this.blur();
os.modalMenu([{
os.popupMenu([{
text: this.$ts.renote,
icon: 'fas fa-retweet',
action: () => {
@ -726,7 +726,7 @@ export default defineComponent({
menu(viaKeyboard = false) {
this.operating = true;
os.modalMenu(this.getMenu(), this.$refs.menuButton, {
os.popupMenu(this.getMenu(), this.$refs.menuButton, {
viaKeyboard
}).then(() => {
this.operating = false;
@ -736,7 +736,7 @@ export default defineComponent({
showRenoteMenu(viaKeyboard = false) {
if (!this.isMyRenote) return;
os.modalMenu([{
os.popupMenu([{
text: this.$ts.unrenote,
icon: 'fas fa-trash-alt',
danger: true,
@ -780,7 +780,7 @@ export default defineComponent({
async clip() {
const clips = await os.api('clips/list');
os.modalMenu([{
os.popupMenu([{
icon: 'fas fa-plus',
text: this.$ts.createNew,
action: async () => {

View File

@ -178,7 +178,7 @@ export default defineComponent({
},
openChannelMenu(ev) {
os.modalMenu([{
os.popupMenu([{
text: this.$ts.copyUrl,
icon: 'fas fa-link',
action: () => {

View File

@ -594,7 +594,7 @@ export default defineComponent({
},
showActions(ev) {
os.modalMenu(postFormActions.map(action => ({
os.popupMenu(postFormActions.map(action => ({
text: action.title,
action: () => {
action.handler({

View File

@ -116,7 +116,7 @@ export default defineComponent({
});
}));
os.modalMenu([...[{
os.popupMenu([...[{
type: 'link',
text: this.$ts.profile,
to: `/@${ this.$i.username }`,
@ -125,7 +125,7 @@ export default defineComponent({
icon: 'fas fa-plus',
text: this.$ts.addAccount,
action: () => {
os.modalMenu([{
os.popupMenu([{
text: this.$ts.existingAccount,
action: () => { this.addAccount(); },
}, {

View File

@ -136,7 +136,7 @@ export default defineComponent({
});
}));
os.modalMenu([...[{
os.popupMenu([...[{
type: 'link',
text: this.$ts.profile,
to: `/@${ this.$i.username }`,
@ -145,7 +145,7 @@ export default defineComponent({
icon: 'fas fa-plus',
text: this.$ts.addAccount,
action: () => {
os.modalMenu([{
os.popupMenu([{
text: this.$ts.existingAccount,
action: () => { this.addAccount(); },
}, {

View File

@ -86,7 +86,7 @@ export default defineComponent({
this.setSrc('list');
}
}));
os.modalMenu([{
os.popupMenu([{
text: this.$ts._timelines.home,
icon: 'fas fa-home',
action: () => { this.setSrc('home') }