sim1222/nca10.net
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Merge tag '12.103.1' into Ncat

Browse Source
This commit is contained in:
nullnyat
2022-02-03 14:12:24 +09:00
parent 9d1e4b9014 1fd6c97532
commit 22c0d5cb4e
139 changed files with 2643 additions and 2103 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
packages/client/src/components/abuse-report-window.vue
View File

@ -2,7 +2,7 @@
<XWindow ref="window" :initial-width="400" :initial-height="500" :can-resize="true" @closed="emit('closed')">
<template #header>
<i class="fas fa-exclamation-circle" style="margin-right: 0.5em;"></i>
<I18n :src="i18n.locale.reportAbuseOf" tag="span">
<I18n :src="i18n.ts.reportAbuseOf" tag="span">
<template #name>
<b><MkAcct :user="user"/></b>
</template>
@ -11,12 +11,12 @@
<div class="dpvffvvy _monolithic_">
<div class="_section">
<MkTextarea v-model="comment">
<template #label>{{ i18n.locale.details }}</template>
<template #caption>{{ i18n.locale.fillAbuseReportDescription }}</template>
<template #label>{{ i18n.ts.details }}</template>
<template #caption>{{ i18n.ts.fillAbuseReportDescription }}</template>
</MkTextarea>
</div>
<div class="_section">
<MkButton primary full :disabled="comment.length === 0" @click="send">{{ i18n.locale.send }}</MkButton>
<MkButton primary full :disabled="comment.length === 0" @click="send">{{ i18n.ts.send }}</MkButton>
</div>
</div>
</XWindow>
@ -50,7 +50,7 @@ function send() {
}, undefined).then(res => {
os.alert({
type: 'success',
text: i18n.locale.abuseReported
text: i18n.ts.abuseReported
});
window.value?.close();
emit('closed');

2
packages/client/src/components/autocomplete.vue
View File

@ -8,7 +8,7 @@
</span>
<span class="username">@{{ acct(user) }}</span>
</li>
<li tabindex="-1" class="choose" @click="chooseUser()" @keydown="onKeydown">{{ i18n.locale.selectUser }}</li>
<li tabindex="-1" class="choose" @click="chooseUser()" @keydown="onKeydown">{{ i18n.ts.selectUser }}</li>
</ol>
<ol v-else-if="hashtags.length > 0" ref="suggests" class="hashtags">
<li v-for="hashtag in hashtags" tabindex="-1" @click="complete(type, hashtag)" @keydown="onKeydown">

2
packages/client/src/components/captcha.vue
View File

@ -1,6 +1,6 @@
<template>
<div>
<span v-if="!available">{{ i18n.locale.waiting }}<MkEllipsis/></span>
<span v-if="!available">{{ i18n.ts.waiting }}<MkEllipsis/></span>
<div ref="captchaEl"></div>
</div>
</template>

6
packages/client/src/components/channel-follow-button.vue
View File

@ -6,14 +6,14 @@
>
<template v-if="!wait">
<template v-if="isFollowing">
<span v-if="full">{{ i18n.locale.unfollow }}</span><i class="fas fa-minus"></i>
<span v-if="full">{{ i18n.ts.unfollow }}</span><i class="fas fa-minus"></i>
</template>
<template v-else>
<span v-if="full">{{ i18n.locale.follow }}</span><i class="fas fa-plus"></i>
<span v-if="full">{{ i18n.ts.follow }}</span><i class="fas fa-plus"></i>
</template>
</template>
<template v-else>
<span v-if="full">{{ i18n.locale.processing }}</span><i class="fas fa-spinner fa-pulse fa-fw"></i>
<span v-if="full">{{ i18n.ts.processing }}</span><i class="fas fa-spinner fa-pulse fa-fw"></i>
</template>
</button>
</template>

6
packages/client/src/components/channel-preview.vue
View File

@ -6,7 +6,7 @@
<div class="status">
<div>
<i class="fas fa-users fa-fw"></i>
<I18n :src="i18n.locale._channel.usersCount" tag="span" style="margin-left: 4px;">
<I18n :src="i18n.ts._channel.usersCount" tag="span" style="margin-left: 4px;">
<template #n>
<b>{{ channel.usersCount }}</b>
</template>
@ -14,7 +14,7 @@
</div>
<div>
<i class="fas fa-pencil-alt fa-fw"></i>
<I18n :src="i18n.locale._channel.notesCount" tag="span" style="margin-left: 4px;">
<I18n :src="i18n.ts._channel.notesCount" tag="span" style="margin-left: 4px;">
<template #n>
<b>{{ channel.notesCount }}</b>
</template>
@ -27,7 +27,7 @@
</article>
<footer>
<span v-if="channel.lastNotedAt">
{{ i18n.locale.updatedAt }}: <MkTime :time="channel.lastNotedAt"/>
{{ i18n.ts.updatedAt }}: <MkTime :time="channel.lastNotedAt"/>
</span>
</footer>
</MkA>

51
packages/client/src/components/chart-tooltip.vue Normal file
View File

@ -0,0 +1,51 @@
<template>
<MkTooltip ref="tooltip" :showing="showing" :x="x" :y="y" :max-width="340" @closed="emit('closed')">
<div v-if="title" class="qpcyisrl">
<div class="title">{{ title }}</div>
<div v-for="x in series" class="series">
<span class="color" :style="{ background: x.backgroundColor, borderColor: x.borderColor }"></span>
<span>{{ x.text }}</span>
</div>
</div>
</MkTooltip>
</template>
<script lang="ts" setup>
import { } from 'vue';
import MkTooltip from './ui/tooltip.vue';
const props = defineProps<{
showing: boolean;
x: number;
y: number;
title: string;
series: {
backgroundColor: string;
borderColor: string;
text: string;
}[];
}>();
const emit = defineEmits<{
(ev: 'closed'): void;
}>();
</script>
<style lang="scss" scoped>
.qpcyisrl {
> .title {
margin-bottom: 4px;
}
> .series {
> .color {
display: inline-block;
width: 8px;
height: 8px;
border-width: 1px;
border-style: solid;
margin-right: 8px;
}
}
}
</style>

68
packages/client/src/components/chart.vue
View File

@ -8,7 +8,7 @@
</template>
<script lang="ts">
import { defineComponent, onMounted, ref, watch, PropType } from 'vue';
import { defineComponent, onMounted, ref, watch, PropType, onUnmounted, shallowRef } from 'vue';
import {
Chart,
ArcElement,
@ -31,6 +31,7 @@ import { enUS } from 'date-fns/locale';
import zoomPlugin from 'chartjs-plugin-zoom';
import * as os from '@/os';
import { defaultStore } from '@/store';
import MkChartTooltip from '@/components/chart-tooltip.vue';
Chart.register(
ArcElement,
@ -137,12 +138,50 @@ export default defineComponent({
}));
};
const tooltipShowing = ref(false);
const tooltipX = ref(0);
const tooltipY = ref(0);
const tooltipTitle = ref(null);
const tooltipSeries = ref(null);
let disposeTooltipComponent;
os.popup(MkChartTooltip, {
showing: tooltipShowing,
x: tooltipX,
y: tooltipY,
title: tooltipTitle,
series: tooltipSeries,
}, {}).then(({ dispose }) => {
disposeTooltipComponent = dispose;
});
function externalTooltipHandler(context) {
if (context.tooltip.opacity === 0) {
tooltipShowing.value = false;
return;
}
tooltipTitle.value = context.tooltip.title[0];
tooltipSeries.value = context.tooltip.body.map((b, i) => ({
backgroundColor: context.tooltip.labelColors[i].backgroundColor,
borderColor: context.tooltip.labelColors[i].borderColor,
text: b.lines[0],
}));
const rect = context.chart.canvas.getBoundingClientRect();
tooltipShowing.value = true;
tooltipX.value = rect.left + window.pageXOffset + context.tooltip.caretX;
tooltipY.value = rect.top + window.pageYOffset + context.tooltip.caretY;
}
const render = () => {
if (chartInstance) {
chartInstance.destroy();
}
const gridColor = defaultStore.state.darkMode ? 'rgba(255, 255, 255, 0.1)' : 'rgba(0, 0, 0, 0.1)';
const vLineColor = defaultStore.state.darkMode ? 'rgba(255, 255, 255, 0.2)' : 'rgba(0, 0, 0, 0.2)';
// フォントカラー
Chart.defaults.color = getComputedStyle(document.documentElement).getPropertyValue('--fg');
@ -221,10 +260,12 @@ export default defineComponent({
},
},
tooltip: {
enabled: false,
mode: 'index',
animation: {
duration: 0,
},
external: externalTooltipHandler,
},
zoom: {
pan: {
@ -255,6 +296,27 @@ export default defineComponent({
},
},
},
plugins: [{
id: 'vLine',
beforeDraw(chart, args, options) {
if (chart.tooltip._active && chart.tooltip._active.length) {
const activePoint = chart.tooltip._active[0];
const ctx = chart.ctx;
const x = activePoint.element.x;
const topY = chart.scales.y.top;
const bottomY = chart.scales.y.bottom;
ctx.save();
ctx.beginPath();
ctx.moveTo(x, bottomY);
ctx.lineTo(x, topY);
ctx.lineWidth = 1;
ctx.strokeStyle = vLineColor;
ctx.stroke();
ctx.restore();
}
}
}]
});
};
@ -662,6 +724,10 @@ export default defineComponent({
fetchAndRender();
});
onUnmounted(() => {
if (disposeTooltipComponent) disposeTooltipComponent();
});
return {
chartEl,
fetching,

4
packages/client/src/components/cw-button.vue
View File

@ -1,6 +1,6 @@
<template>
<button class="nrvgflfu _button" @click="toggle">
<b>{{ modelValue ? i18n.locale._cw.hide : i18n.locale._cw.show }}</b>
<b>{{ modelValue ? i18n.ts._cw.hide : i18n.ts._cw.show }}</b>
<span v-if="!modelValue">{{ label }}</span>
</button>
</template>
@ -25,7 +25,7 @@ const label = computed(() => {
return concat([
props.note.text ? [i18n.t('_cw.chars', { count: length(props.note.text) })] : [],
props.note.files && props.note.files.length !== 0 ? [i18n.t('_cw.files', { count: props.note.files.length }) ] : [],
props.note.poll != null ? [i18n.locale.poll] : []
props.note.poll != null ? [i18n.ts.poll] : []
] as string[][]).join(' / ');
});

4
packages/client/src/components/dialog.vue
View File

@ -28,8 +28,8 @@
</template>
</MkSelect>
<div v-if="(showOkButton || showCancelButton) && !actions" class="buttons">
<MkButton v-if="showOkButton" inline primary :autofocus="!input && !select" @click="ok">{{ (showCancelButton || input || select) ? i18n.locale.ok : i18n.locale.gotIt }}</MkButton>
<MkButton v-if="showCancelButton || input || select" inline @click="cancel">{{ i18n.locale.cancel }}</MkButton>
<MkButton v-if="showOkButton" inline primary :autofocus="!input && !select" @click="ok">{{ (showCancelButton || input || select) ? i18n.ts.ok : i18n.ts.gotIt }}</MkButton>
<MkButton v-if="showCancelButton || input || select" inline @click="cancel">{{ i18n.ts.cancel }}</MkButton>
</div>
<div v-if="actions" class="buttons">
<MkButton v-for="action in actions" :key="action.text" inline :primary="action.primary" @click="() => { action.callback(); close(); }">{{ action.text }}</MkButton>

2
packages/client/src/components/drive-select-dialog.vue
View File

@ -10,7 +10,7 @@
@closed="emit('closed')"
>
<template #header>
{{ multiple ? ((type === 'file') ? i18n.locale.selectFiles : i18n.locale.selectFolders) : ((type === 'file') ? i18n.locale.selectFile : i18n.locale.selectFolder) }}
{{ multiple ? ((type === 'file') ? i18n.ts.selectFiles : i18n.ts.selectFolders) : ((type === 'file') ? i18n.ts.selectFile : i18n.ts.selectFolder) }}
<span v-if="selected.length > 0" style="margin-left: 8px; opacity: 0.5;">({{ number(selected.length) }})</span>
</template>
<XDrive :multiple="multiple" :select="type" @changeSelection="onChangeSelection" @selected="ok()"/>

2
packages/client/src/components/drive-window.vue
View File

@ -6,7 +6,7 @@
@closed="emit('closed')"
>
<template #header>
{{ i18n.locale.drive }}
{{ i18n.ts.drive }}
</template>
<XDrive :initial-folder="initialFolder"/>
</XWindow>

28
packages/client/src/components/drive.file.vue
View File

@ -10,15 +10,15 @@
>
<div v-if="$i?.avatarId == file.id" class="label">
<img src="/client-assets/label.svg"/>
<p>{{ i18n.locale.avatar }}</p>
<p>{{ i18n.ts.avatar }}</p>
</div>
<div v-if="$i?.bannerId == file.id" class="label">
<img src="/client-assets/label.svg"/>
<p>{{ i18n.locale.banner }}</p>
<p>{{ i18n.ts.banner }}</p>
</div>
<div v-if="file.isSensitive" class="label red">
<img src="/client-assets/label-red.svg"/>
<p>{{ i18n.locale.nsfw }}</p>
<p>{{ i18n.ts.nsfw }}</p>
</div>
<MkDriveFileThumbnail class="thumbnail" :file="file" fit="contain"/>
@ -61,30 +61,30 @@ const title = computed(() => `${props.file.name}\n${props.file.type} ${bytes(pro
function getMenu() {
return [{
text: i18n.locale.rename,
text: i18n.ts.rename,
icon: 'fas fa-i-cursor',
action: rename
}, {
text: props.file.isSensitive ? i18n.locale.unmarkAsSensitive : i18n.locale.markAsSensitive,
text: props.file.isSensitive ? i18n.ts.unmarkAsSensitive : i18n.ts.markAsSensitive,
icon: props.file.isSensitive ? 'fas fa-eye' : 'fas fa-eye-slash',
action: toggleSensitive
}, {
text: i18n.locale.describeFile,
text: i18n.ts.describeFile,
icon: 'fas fa-i-cursor',
action: describe
}, null, {
text: i18n.locale.copyUrl,
text: i18n.ts.copyUrl,
icon: 'fas fa-link',
action: copyUrl
}, {
type: 'a',
href: props.file.url,
target: '_blank',
text: i18n.locale.download,
text: i18n.ts.download,
icon: 'fas fa-download',
download: props.file.name
}, null, {
text: i18n.locale.delete,
text: i18n.ts.delete,
icon: 'fas fa-trash-alt',
danger: true,
action: deleteFile
@ -95,7 +95,7 @@ function onClick(ev: MouseEvent) {
if (props.selectMode) {
emit('chosen', props.file);
} else {
os.popupMenu(getMenu(), (ev.currentTarget || ev.target || undefined) as HTMLElement | undefined);
os.popupMenu(getMenu(), (ev.currentTarget ?? ev.target ?? undefined) as HTMLElement | undefined);
}
}
@ -120,8 +120,8 @@ function onDragend() {
function rename() {
os.inputText({
title: i18n.locale.renameFile,
placeholder: i18n.locale.inputNewFileName,
title: i18n.ts.renameFile,
placeholder: i18n.ts.inputNewFileName,
default: props.file.name,
}).then(({ canceled, result: name }) => {
if (canceled) return;
@ -134,9 +134,9 @@ function rename() {
function describe() {
os.popup(import('@/components/media-caption.vue'), {
title: i18n.locale.describeFile,
title: i18n.ts.describeFile,
input: {
placeholder: i18n.locale.inputNewDescription,
placeholder: i18n.ts.inputNewDescription,
default: props.file.comment !== null ? props.file.comment : '',
},
image: props.file

24
packages/client/src/components/drive.folder.vue
View File

@ -20,7 +20,7 @@
{{ folder.name }}
</p>
<p v-if="defaultStore.state.uploadFolder == folder.id" class="upload">
{{ i18n.locale.uploadFolder }}
{{ i18n.ts.uploadFolder }}
</p>
<button v-if="selectMode" class="checkbox _button" :class="{ checked: isSelected }" @click.prevent.stop="checkboxClicked"></button>
</div>
@ -146,14 +146,14 @@ function onDrop(ev: DragEvent) {
switch (err) {
case 'detected-circular-definition':
os.alert({
title: i18n.locale.unableToProcess,
text: i18n.locale.circularReferenceFolder
title: i18n.ts.unableToProcess,
text: i18n.ts.circularReferenceFolder
});
break;
default:
os.alert({
type: 'error',
text: i18n.locale.somethingHappened
text: i18n.ts.somethingHappened
});
}
});
@ -184,8 +184,8 @@ function go() {
function rename() {
os.inputText({
title: i18n.locale.renameFolder,
placeholder: i18n.locale.inputNewFolderName,
title: i18n.ts.renameFolder,
placeholder: i18n.ts.inputNewFolderName,
default: props.folder.name
}).then(({ canceled, result: name }) => {
if (canceled) return;
@ -208,14 +208,14 @@ function deleteFolder() {
case 'b0fc8a17-963c-405d-bfbc-859a487295e1':
os.alert({
type: 'error',
title: i18n.locale.unableToDelete,
text: i18n.locale.hasChildFilesOrFolders
title: i18n.ts.unableToDelete,
text: i18n.ts.hasChildFilesOrFolders
});
break;
default:
os.alert({
type: 'error',
text: i18n.locale.unableToDelete
text: i18n.ts.unableToDelete
});
}
});
@ -227,7 +227,7 @@ function setAsUploadFolder() {
function onContextmenu(ev: MouseEvent) {
os.contextMenu([{
text: i18n.locale.openInWindow,
text: i18n.ts.openInWindow,
icon: 'fas fa-window-restore',
action: () => {
os.popup(import('./drive-window.vue'), {
@ -236,11 +236,11 @@ function onContextmenu(ev: MouseEvent) {
}, 'closed');
}
}, null, {
text: i18n.locale.rename,
text: i18n.ts.rename,
icon: 'fas fa-i-cursor',
action: rename,
}, null, {
text: i18n.locale.delete,
text: i18n.ts.delete,
icon: 'fas fa-trash-alt',
danger: true,
action: deleteFolder,

2
packages/client/src/components/drive.nav-folder.vue
View File

@ -8,7 +8,7 @@
@drop.stop="onDrop"
>
<i v-if="folder == null" class="fas fa-cloud"></i>
<span>{{ folder == null ? i18n.locale.drive : folder.name }}</span>
<span>{{ folder == null ? i18n.ts.drive : folder.name }}</span>
</div>
</template>

52
packages/client/src/components/drive.vue
View File

@ -54,7 +54,7 @@
/>
<!-- SEE: https://stackoverflow.com/questions/18744164/flex-box-align-last-row-to-grid -->
<div v-for="(n, i) in 16" :key="i" class="padding"></div>
<MkButton v-if="moreFolders" ref="moreFolders">{{ i18n.locale.loadMore }}</MkButton>
<MkButton v-if="moreFolders" ref="moreFolders">{{ i18n.ts.loadMore }}</MkButton>
</div>
<div v-show="files.length > 0" ref="filesContainer" class="files">
<XFile
@ -71,12 +71,12 @@
/>
<!-- SEE: https://stackoverflow.com/questions/18744164/flex-box-align-last-row-to-grid -->
<div v-for="(n, i) in 16" :key="i" class="padding"></div>
<MkButton v-show="moreFiles" ref="loadMoreFiles" @click="fetchMoreFiles">{{ i18n.locale.loadMore }}</MkButton>
<MkButton v-show="moreFiles" ref="loadMoreFiles" @click="fetchMoreFiles">{{ i18n.ts.loadMore }}</MkButton>
</div>
<div v-if="files.length == 0 && folders.length == 0 && !fetching" class="empty">
<p v-if="draghover">{{ i18n.t('empty-draghover') }}</p>
<p v-if="!draghover && folder == null"><strong>{{ i18n.locale.emptyDrive }}</strong><br/>{{ i18n.t('empty-drive-description') }}</p>
<p v-if="!draghover && folder != null">{{ i18n.locale.emptyFolder }}</p>
<p v-if="!draghover && folder == null"><strong>{{ i18n.ts.emptyDrive }}</strong><br/>{{ i18n.t('empty-drive-description') }}</p>
<p v-if="!draghover && folder != null">{{ i18n.ts.emptyFolder }}</p>
</div>
</div>
<MkLoading v-if="fetching"/>
@ -253,14 +253,14 @@ function onDrop(e: DragEvent): any {
switch (err) {
case 'detected-circular-definition':
os.alert({
title: i18n.locale.unableToProcess,
text: i18n.locale.circularReferenceFolder
title: i18n.ts.unableToProcess,
text: i18n.ts.circularReferenceFolder
});
break;
default:
os.alert({
type: 'error',
text: i18n.locale.somethingHappened
text: i18n.ts.somethingHappened
});
}
});
@ -274,9 +274,9 @@ function selectLocalFile() {
function urlUpload() {
os.inputText({
title: i18n.locale.uploadFromUrl,
title: i18n.ts.uploadFromUrl,
type: 'url',
placeholder: i18n.locale.uploadFromUrlDescription
placeholder: i18n.ts.uploadFromUrlDescription
}).then(({ canceled, result: url }) => {
if (canceled || !url) return;
os.api('drive/files/upload-from-url', {
@ -285,16 +285,16 @@ function urlUpload() {
});
os.alert({
title: i18n.locale.uploadFromUrlRequested,
text: i18n.locale.uploadFromUrlMayTakeTime
title: i18n.ts.uploadFromUrlRequested,
text: i18n.ts.uploadFromUrlMayTakeTime
});
});
}
function createFolder() {
os.inputText({
title: i18n.locale.createFolder,
placeholder: i18n.locale.folderName
title: i18n.ts.createFolder,
placeholder: i18n.ts.folderName
}).then(({ canceled, result: name }) => {
if (canceled) return;
os.api('drive/folders/create', {
@ -308,8 +308,8 @@ function createFolder() {
function renameFolder(folderToRename: Misskey.entities.DriveFolder) {
os.inputText({
title: i18n.locale.renameFolder,
placeholder: i18n.locale.inputNewFolderName,
title: i18n.ts.renameFolder,
placeholder: i18n.ts.inputNewFolderName,
default: folderToRename.name
}).then(({ canceled, result: name }) => {
if (canceled) return;
@ -334,14 +334,14 @@ function deleteFolder(folderToDelete: Misskey.entities.DriveFolder) {
case 'b0fc8a17-963c-405d-bfbc-859a487295e1':
os.alert({
type: 'error',
title: i18n.locale.unableToDelete,
text: i18n.locale.hasChildFilesOrFolders
title: i18n.ts.unableToDelete,
text: i18n.ts.hasChildFilesOrFolders
});
break;
default:
os.alert({
type: 'error',
text: i18n.locale.unableToDelete
text: i18n.ts.unableToDelete
});
}
});
@ -562,36 +562,36 @@ function fetchMoreFiles() {
function getMenu() {
return [{
text: i18n.locale.addFile,
text: i18n.ts.addFile,
type: 'label'
}, {
text: i18n.locale.upload,
text: i18n.ts.upload,
icon: 'fas fa-upload',
action: () => { selectLocalFile(); }
}, {
text: i18n.locale.fromUrl,
text: i18n.ts.fromUrl,
icon: 'fas fa-link',
action: () => { urlUpload(); }
}, null, {
text: folder.value ? folder.value.name : i18n.locale.drive,
text: folder.value ? folder.value.name : i18n.ts.drive,
type: 'label'
}, folder.value ? {
text: i18n.locale.renameFolder,
text: i18n.ts.renameFolder,
icon: 'fas fa-i-cursor',
action: () => { renameFolder(folder.value); }
} : undefined, folder.value ? {
text: i18n.locale.deleteFolder,
text: i18n.ts.deleteFolder,
icon: 'fas fa-trash-alt',
action: () => { deleteFolder(folder.value as Misskey.entities.DriveFolder); }
} : undefined, {
text: i18n.locale.createFolder,
text: i18n.ts.createFolder,
icon: 'fas fa-folder-plus',
action: () => { createFolder(); }
}];
}
function showMenu(ev: MouseEvent) {
os.popupMenu(getMenu(), (ev.currentTarget || ev.target || undefined) as HTMLElement | undefined);
os.popupMenu(getMenu(), (ev.currentTarget ?? ev.target ?? undefined) as HTMLElement | undefined);
}
function onContextmenu(ev: MouseEvent) {

10
packages/client/src/components/emoji-picker-dialog.vue
View File

@ -32,20 +32,20 @@ import MkEmojiPicker from '@/components/emoji-picker.vue';
import { defaultStore } from '@/store';
withDefaults(defineProps<{
manualShowing?: boolean;
manualShowing?: boolean | null;
src?: HTMLElement;
showPinned?: boolean;
asReactionPicker?: boolean;
}>(), {
manualShowing: false,
manualShowing: null,
showPinned: true,
asReactionPicker: false,
});
const emit = defineEmits<{
(e: 'done', v: any): void;
(e: 'close'): void;
(e: 'closed'): void;
(ev: 'done', v: any): void;
(ev: 'close'): void;
(ev: 'closed'): void;
}>();
const modal = ref<InstanceType<typeof MkModal>>();

12
packages/client/src/components/emoji-picker.vue
View File

@ -1,6 +1,6 @@
<template>
<div class="omfetrab" :class="['w' + width, 'h' + height, { big, asDrawer }]" :style="{ maxHeight: maxHeight ? maxHeight + 'px' : undefined }">
<input ref="search" v-model.trim="q" class="search" data-prevent-emoji-insert :class="{ filled: q != null && q != '' }" :placeholder="i18n.locale.search" @paste.stop="paste" @keyup.enter="done()">
<input ref="search" v-model.trim="q" class="search" data-prevent-emoji-insert :class="{ filled: q != null && q != '' }" :placeholder="i18n.ts.search" @paste.stop="paste" @keyup.enter="done()">
<div ref="emojis" class="emojis">
<section class="result">
<div v-if="searchResultCustom.length > 0">
@ -43,7 +43,7 @@
</section>
<section>
<header class="_acrylic"><i class="far fa-clock fa-fw"></i> {{ i18n.locale.recentUsed }}</header>
<header class="_acrylic"><i class="far fa-clock fa-fw"></i> {{ i18n.ts.recentUsed }}</header>
<div>
<button v-for="emoji in recentlyUsedEmojis"
:key="emoji"
@ -56,11 +56,11 @@
</section>
</div>
<div>
<header class="_acrylic">{{ i18n.locale.customEmojis }}</header>
<XSection v-for="category in customEmojiCategories" :key="'custom:' + category" :initial-shown="false" :emojis="customEmojis.filter(e => e.category === category).map(e => ':' + e.name + ':')" @chosen="chosen">{{ category || i18n.locale.other }}</XSection>
<header class="_acrylic">{{ i18n.ts.customEmojis }}</header>
<XSection v-for="category in customEmojiCategories" :key="'custom:' + category" :initial-shown="false" :emojis="customEmojis.filter(e => e.category === category).map(e => ':' + e.name + ':')" @chosen="chosen">{{ category || i18n.ts.other }}</XSection>
</div>
<div>
<header class="_acrylic">{{ i18n.locale.emoji }}</header>
<header class="_acrylic">{{ i18n.ts.emoji }}</header>
<XSection v-for="category in categories" :emojis="emojilist.filter(e => e.category === category).map(e => e.char)" @chosen="chosen">{{ category }}</XSection>
</div>
</div>
@ -280,7 +280,7 @@ function getKey(emoji: string | Misskey.entities.CustomEmoji | UnicodeEmojiDef):
}
function chosen(emoji: any, ev?: MouseEvent) {
const el = ev && (ev.currentTarget || ev.target) as HTMLElement | null | undefined;
const el = ev && (ev.currentTarget ?? ev.target) as HTMLElement | null | undefined;
if (el) {
const rect = el.getBoundingClientRect();
const x = rect.left + (el.offsetWidth / 2);

12
packages/client/src/components/follow-button.vue
View File

@ -6,23 +6,23 @@
>
<template v-if="!wait">
<template v-if="hasPendingFollowRequestFromYou && user.isLocked">
<span v-if="full">{{ i18n.locale.followRequestPending }}</span><i class="fas fa-hourglass-half"></i>
<span v-if="full">{{ i18n.ts.followRequestPending }}</span><i class="fas fa-hourglass-half"></i>
</template>
<template v-else-if="hasPendingFollowRequestFromYou && !user.isLocked"> <!-- つまりリモートフォローの場合。 -->
<span v-if="full">{{ i18n.locale.processing }}</span><i class="fas fa-spinner fa-pulse"></i>
<span v-if="full">{{ i18n.ts.processing }}</span><i class="fas fa-spinner fa-pulse"></i>
</template>
<template v-else-if="isFollowing">
<span v-if="full">{{ i18n.locale.unfollow }}</span><i class="fas fa-minus"></i>
<span v-if="full">{{ i18n.ts.unfollow }}</span><i class="fas fa-minus"></i>
</template>
<template v-else-if="!isFollowing && user.isLocked">
<span v-if="full">{{ i18n.locale.followRequest }}</span><i class="fas fa-plus"></i>
<span v-if="full">{{ i18n.ts.followRequest }}</span><i class="fas fa-plus"></i>
</template>
<template v-else-if="!isFollowing && !user.isLocked">
<span v-if="full">{{ i18n.locale.follow }}</span><i class="fas fa-plus"></i>
<span v-if="full">{{ i18n.ts.follow }}</span><i class="fas fa-plus"></i>
</template>
</template>
<template v-else>
<span v-if="full">{{ i18n.locale.processing }}</span><i class="fas fa-spinner fa-pulse fa-fw"></i>
<span v-if="full">{{ i18n.ts.processing }}</span><i class="fas fa-spinner fa-pulse fa-fw"></i>
</template>
</button>
</template>

14
packages/client/src/components/forgot-password.vue
View File

@ -5,28 +5,28 @@
@close="dialog.close()"
@closed="emit('closed')"
>
<template #header>{{ i18n.locale.forgotPassword }}</template>
<template #header>{{ i18n.ts.forgotPassword }}</template>
<form v-if="instance.enableEmail" class="bafeceda" @submit.prevent="onSubmit">
<div class="main _formRoot">
<MkInput v-model="username" class="_formBlock" type="text" pattern="^[a-zA-Z0-9_]+$" spellcheck="false" autofocus required>
<template #label>{{ i18n.locale.username }}</template>
<template #label>{{ i18n.ts.username }}</template>
<template #prefix>@</template>
</MkInput>
<MkInput v-model="email" class="_formBlock" type="email" spellcheck="false" required>
<template #label>{{ i18n.locale.emailAddress }}</template>
<template #caption>{{ i18n.locale._forgotPassword.enterEmail }}</template>
<template #label>{{ i18n.ts.emailAddress }}</template>
<template #caption>{{ i18n.ts._forgotPassword.enterEmail }}</template>
</MkInput>
<MkButton class="_formBlock" type="submit" :disabled="processing" primary style="margin: 0 auto;">{{ i18n.locale.send }}</MkButton>
<MkButton class="_formBlock" type="submit" :disabled="processing" primary style="margin: 0 auto;">{{ i18n.ts.send }}</MkButton>
</div>
<div class="sub">
<MkA to="/about" class="_link">{{ i18n.locale._forgotPassword.ifNoEmail }}</MkA>
<MkA to="/about" class="_link">{{ i18n.ts._forgotPassword.ifNoEmail }}</MkA>
</div>
</form>
<div v-else class="bafecedb">
{{ i18n.locale._forgotPassword.contactAdmin }}
{{ i18n.ts._forgotPassword.contactAdmin }}
</div>
</XModalWindow>
</template>

2
packages/client/src/components/form/range.vue
View File

@ -117,7 +117,7 @@ export default defineComponent({
text: computed(() => {
return props.textConverter(finalValue.value);
}),
source: thumbEl,
targetElement: thumbEl,
}, {}, 'closed');
const style = document.createElement('style');

54
packages/client/src/components/form/switch.vue
View File

@ -20,45 +20,33 @@
</div>
</template>
<script lang="ts">
import { defineComponent, ref, toRefs } from 'vue';
<script lang="ts" setup>
import { toRefs, Ref } from 'vue';
import * as os from '@/os';
import Ripple from '@/components/ripple.vue';
export default defineComponent({
props: {
modelValue: {
type: Boolean,
default: false
},
disabled: {
type: Boolean,
default: false
}
},
const props = defineProps<{
modelValue: boolean | Ref<boolean>;
disabled?: boolean;
}>();
setup(props, context) {
const button = ref<HTMLElement>();
const checked = toRefs(props).modelValue;
const toggle = () => {
if (props.disabled) return;
context.emit('update:modelValue', !checked.value);
const emit = defineEmits<{
(e: 'update:modelValue', v: boolean): void;
}>();
if (!checked.value) {
const rect = button.value.getBoundingClientRect();
const x = rect.left + (button.value.offsetWidth / 2);
const y = rect.top + (button.value.offsetHeight / 2);
os.popup(Ripple, { x, y, particle: false }, {}, 'end');
}
};
let button = $ref<HTMLElement>();
const checked = toRefs(props).modelValue;
const toggle = () => {
if (props.disabled) return;
emit('update:modelValue', !checked.value);
return {
button,
checked,
toggle,
};
},
});
if (!checked.value) {
const rect = button.getBoundingClientRect();
const x = rect.left + (button.offsetWidth / 2);
const y = rect.top + (button.offsetHeight / 2);
os.popup(Ripple, { x, y, particle: false }, {}, 'end');
}
};
</script>
<style lang="scss" scoped>

15
packages/client/src/components/global/a.vue
View File

@ -23,8 +23,9 @@ const props = withDefaults(defineProps<{
behavior: null,
});
const navHook = inject('navHook', null);
const sideViewHook = inject('sideViewHook', null);
type Navigate = (path: string, record?: boolean) => void;
const navHook = inject<null | Navigate>('navHook', null);
const sideViewHook = inject<null | Navigate>('sideViewHook', null);
const active = $computed(() => {
if (props.activeClass == null) return false;
@ -43,31 +44,31 @@ function onContextmenu(ev) {
text: props.to,
}, {
icon: 'fas fa-window-maximize',
text: i18n.locale.openInWindow,
text: i18n.ts.openInWindow,
action: () => {
os.pageWindow(props.to);
}
}, sideViewHook ? {
icon: 'fas fa-columns',
text: i18n.locale.openInSideView,
text: i18n.ts.openInSideView,
action: () => {
sideViewHook(props.to);
}
} : undefined, {
icon: 'fas fa-expand-alt',
text: i18n.locale.showInPage,
text: i18n.ts.showInPage,
action: () => {
router.push(props.to);
}
}, null, {
icon: 'fas fa-external-link-alt',
text: i18n.locale.openInNewTab,
text: i18n.ts.openInNewTab,
action: () => {
window.open(props.to, '_blank');
}
}, {
icon: 'fas fa-link',
text: i18n.locale.copyLink,
text: i18n.ts.copyLink,
action: () => {
copyToClipboard(`${url}${props.to}`);
}

6
packages/client/src/components/global/header.vue
View File

@ -104,7 +104,7 @@ export default defineComponent({
if (props.info.share) {
if (menu.length > 0) menu.push(null);
menu.push({
text: i18n.locale.share,
text: i18n.ts.share,
icon: 'fas fa-share-alt',
action: share
});
@ -113,7 +113,7 @@ export default defineComponent({
if (menu.length > 0) menu.push(null);
menu = menu.concat(props.menu);
}
popupMenu(menu, ev.currentTarget || ev.target);
popupMenu(menu, ev.currentTarget ?? ev.target);
};
const showTabsPopup = (ev: MouseEvent) => {
@ -126,7 +126,7 @@ export default defineComponent({
icon: tab.icon,
action: tab.onClick,
}));
popupMenu(menu, ev.currentTarget || ev.target);
popupMenu(menu, ev.currentTarget ?? ev.target);
};
const preventDrag = (ev: TouchEvent) => {

16
packages/client/src/components/global/time.vue
View File

@ -24,16 +24,16 @@ let now = $ref(new Date());
const relative = $computed(() => {
const ago = (now.getTime() - _time.getTime()) / 1000/*ms*/;
return (
ago >= 31536000 ? i18n.t('_ago.yearsAgo', { n: (~~(ago / 31536000)).toString() }) :
ago >= 2592000 ? i18n.t('_ago.monthsAgo', { n: (~~(ago / 2592000)).toString() }) :
ago >= 604800 ? i18n.t('_ago.weeksAgo', { n: (~~(ago / 604800)).toString() }) :
ago >= 86400 ? i18n.t('_ago.daysAgo', { n: (~~(ago / 86400)).toString() }) :
ago >= 3600 ? i18n.t('_ago.hoursAgo', { n: (~~(ago / 3600)).toString() }) :
ago >= 31536000 ? i18n.t('_ago.yearsAgo', { n: Math.round(ago / 31536000).toString() }) :
ago >= 2592000 ? i18n.t('_ago.monthsAgo', { n: Math.round(ago / 2592000).toString() }) :
ago >= 604800 ? i18n.t('_ago.weeksAgo', { n: Math.round(ago / 604800).toString() }) :
ago >= 86400 ? i18n.t('_ago.daysAgo', { n: Math.round(ago / 86400).toString() }) :
ago >= 3600 ? i18n.t('_ago.hoursAgo', { n: Math.round(ago / 3600).toString() }) :
ago >= 60 ? i18n.t('_ago.minutesAgo', { n: (~~(ago / 60)).toString() }) :
ago >= 10 ? i18n.t('_ago.secondsAgo', { n: (~~(ago % 60)).toString() }) :
ago >= -1 ? i18n.locale._ago.justNow :
ago < -1 ? i18n.locale._ago.future :
i18n.locale._ago.unknown);
ago >= -1 ? i18n.ts._ago.justNow :
ago < -1 ? i18n.ts._ago.future :
i18n.ts._ago.unknown);
});
function tick() {

62
packages/client/src/components/media-image.vue
View File

@ -20,52 +20,32 @@
</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
<script lang="ts" setup>
import { watch } from 'vue';
import * as misskey from 'misskey-js';
import { getStaticImageUrl } from '@/scripts/get-static-image-url';
import ImgWithBlurhash from '@/components/img-with-blurhash.vue';
import * as os from '@/os';
import { defaultStore } from '@/store';
export default defineComponent({
components: {
ImgWithBlurhash
},
props: {
image: {
type: Object,
required: true
},
raw: {
default: false
}
},
data() {
return {
hide: true,
};
},
computed: {
url(): any {
let url = this.$store.state.disableShowingAnimatedImages
? getStaticImageUrl(this.image.thumbnailUrl)
: this.image.thumbnailUrl;
const props = defineProps<{
image: misskey.entities.DriveFile;
raw?: boolean;
}>();
if (this.raw || this.$store.state.loadRawImages) {
url = this.image.url;
}
let hide = $ref(true);
return url;
}
},
created() {
// Plugin:register_note_view_interruptor を使って書き換えられる可能性があるためwatchする
this.$watch('image', () => {
this.hide = (this.$store.state.nsfw === 'force') ? true : this.image.isSensitive && (this.$store.state.nsfw !== 'ignore');
}, {
deep: true,
immediate: true,
});
},
const url = (props.raw || defaultStore.state.loadRawImages)
? props.image.url
: defaultStore.state.disableShowingAnimatedImages
? getStaticImageUrl(props.image.thumbnailUrl)
: props.image.thumbnailUrl;
// Plugin:register_note_view_interruptor を使って書き換えられる可能性があるためwatchする
watch(() => props.image, () => {
hide = (defaultStore.state.nsfw === 'force') ? true : props.image.isSensitive && (defaultStore.state.nsfw !== 'ignore');
}, {
deep: true,
immediate: true,
});
</script>

156
packages/client/src/components/media-list.vue
View File

@ -12,8 +12,8 @@
</div>
</template>
<script lang="ts">
import { defineComponent, onMounted, PropType, ref } from 'vue';
<script lang="ts" setup>
import { onMounted, ref } from 'vue';
import * as misskey from 'misskey-js';
import PhotoSwipeLightbox from 'photoswipe/dist/photoswipe-lightbox.esm.js';
import PhotoSwipe from 'photoswipe/dist/photoswipe.esm.js';
@ -25,98 +25,80 @@ import * as os from '@/os';
import { FILE_TYPE_BROWSERSAFE } from '@/const';
import { defaultStore } from '@/store';
export default defineComponent({
components: {
XBanner,
XImage,
XVideo,
},
props: {
mediaList: {
type: Array as PropType<misskey.entities.DriveFile[]>,
required: true,
},
raw: {
default: false
},
},
setup(props) {
const gallery = ref(null);
const props = defineProps<{
mediaList: misskey.entities.DriveFile[];
raw?: boolean;
}>();
onMounted(() => {
const lightbox = new PhotoSwipeLightbox({
dataSource: props.mediaList
.filter(media => {
if (media.type === 'image/svg+xml') return true; // svgのwebpublicはpngなのでtrue
return media.type.startsWith('image') && FILE_TYPE_BROWSERSAFE.includes(media.type);
})
.map(media => {
const item = {
src: media.url,
w: media.properties.width,
h: media.properties.height,
alt: media.name,
};
if (media.properties.orientation != null && media.properties.orientation >= 5) {
[item.w, item.h] = [item.h, item.w];
}
return item;
}),
gallery: gallery.value,
children: '.image',
thumbSelector: '.image',
loop: false,
padding: window.innerWidth > 500 ? {
top: 32,
bottom: 32,
left: 32,
right: 32,
} : {
top: 0,
bottom: 0,
left: 0,
right: 0,
},
imageClickAction: 'close',
tapAction: 'toggle-controls',
pswpModule: PhotoSwipe,
});
const gallery = ref(null);
const pswpZIndex = os.claimZIndex('middle');
lightbox.on('itemData', (e) => {
const { itemData } = e;
// element is children
const { element } = itemData;
const id = element.dataset.id;
const file = props.mediaList.find(media => media.id === id);
itemData.src = file.url;
itemData.w = Number(file.properties.width);
itemData.h = Number(file.properties.height);
if (file.properties.orientation != null && file.properties.orientation >= 5) {
[itemData.w, itemData.h] = [itemData.h, itemData.w];
onMounted(() => {
const lightbox = new PhotoSwipeLightbox({
dataSource: props.mediaList
.filter(media => {
if (media.type === 'image/svg+xml') return true; // svgのwebpublicはpngなのでtrue
return media.type.startsWith('image') && FILE_TYPE_BROWSERSAFE.includes(media.type);
})
.map(media => {
const item = {
src: media.url,
w: media.properties.width,
h: media.properties.height,
alt: media.name,
};
if (media.properties.orientation != null && media.properties.orientation >= 5) {
[item.w, item.h] = [item.h, item.w];
}
itemData.msrc = file.thumbnailUrl;
itemData.thumbCropped = true;
});
return item;
}),
gallery: gallery.value,
children: '.image',
thumbSelector: '.image',
loop: false,
padding: window.innerWidth > 500 ? {
top: 32,
bottom: 32,
left: 32,
right: 32,
} : {
top: 0,
bottom: 0,
left: 0,
right: 0,
},
imageClickAction: 'close',
tapAction: 'toggle-controls',
pswpModule: PhotoSwipe,
});
lightbox.init();
});
lightbox.on('itemData', (ev) => {
const { itemData } = ev;
const previewable = (file: misskey.entities.DriveFile): boolean => {
if (file.type === 'image/svg+xml') return true; // svgのwebpublic/thumbnailはpngなのでtrue
// FILE_TYPE_BROWSERSAFEに適合しないものはブラウザで表示するのに不適切
return (file.type.startsWith('video') || file.type.startsWith('image')) && FILE_TYPE_BROWSERSAFE.includes(file.type);
};
// element is children
const { element } = itemData;
return {
previewable,
gallery,
pswpZIndex: os.claimZIndex('middle'),
};
},
const id = element.dataset.id;
const file = props.mediaList.find(media => media.id === id);
itemData.src = file.url;
itemData.w = Number(file.properties.width);
itemData.h = Number(file.properties.height);
if (file.properties.orientation != null && file.properties.orientation >= 5) {
[itemData.w, itemData.h] = [itemData.h, itemData.w];
}
itemData.msrc = file.thumbnailUrl;
itemData.thumbCropped = true;
});
lightbox.init();
});
const previewable = (file: misskey.entities.DriveFile): boolean => {
if (file.type === 'image/svg+xml') return true; // svgのwebpublic/thumbnailはpngなのでtrue
// FILE_TYPE_BROWSERSAFEに適合しないものはブラウザで表示するのに不適切
return (file.type.startsWith('video') || file.type.startsWith('image')) && FILE_TYPE_BROWSERSAFE.includes(file.type);
};
</script>
<style lang="scss" scoped>

2
packages/client/src/components/note-detailed.vue
View File

@ -250,7 +250,7 @@ function menu(viaKeyboard = false): void {
function showRenoteMenu(viaKeyboard = false): void {
if (!isMyRenote) return;
os.popupMenu([{
text: i18n.locale.unrenote,
text: i18n.ts.unrenote,
icon: 'fas fa-trash-alt',
danger: true,
action: () => {

16
packages/client/src/components/note.vue
View File

@ -10,13 +10,13 @@
:class="{ renote: isRenote }"
>
<MkNoteSub v-if="appearNote.reply" :note="appearNote.reply" class="reply-to"/>
<div v-if="pinned" class="info"><i class="fas fa-thumbtack"></i> {{ i18n.locale.pinnedNote }}</div>
<div v-if="appearNote._prId_" class="info"><i class="fas fa-bullhorn"></i> {{ i18n.locale.promotion }}<button class="_textButton hide" @click="readPromo()">{{ i18n.locale.hideThisNote }} <i class="fas fa-times"></i></button></div>
<div v-if="appearNote._featuredId_" class="info"><i class="fas fa-bolt"></i> {{ i18n.locale.featured }}</div>
<div v-if="pinned" class="info"><i class="fas fa-thumbtack"></i> {{ i18n.ts.pinnedNote }}</div>
<div v-if="appearNote._prId_" class="info"><i class="fas fa-bullhorn"></i> {{ i18n.ts.promotion }}<button class="_textButton hide" @click="readPromo()">{{ i18n.ts.hideThisNote }} <i class="fas fa-times"></i></button></div>
<div v-if="appearNote._featuredId_" class="info"><i class="fas fa-bolt"></i> {{ i18n.ts.featured }}</div>
<div v-if="isRenote" class="renote">
<MkAvatar class="avatar" :user="note.user"/>
<i class="fas fa-retweet"></i>
<I18n :src="i18n.locale.renotedBy" tag="span">
<I18n :src="i18n.ts.renotedBy" tag="span">
<template #user>
<MkA v-user-preview="note.userId" class="name" :to="userPage(note.user)">
<MkUserName :user="note.user"/>
@ -48,7 +48,7 @@
</p>
<div v-show="appearNote.cw == null || showContent" class="content" :class="{ collapsed }">
<div class="text">
<span v-if="appearNote.isHidden" style="opacity: 0.5">({{ i18n.locale.private }})</span>
<span v-if="appearNote.isHidden" style="opacity: 0.5">({{ i18n.ts.private }})</span>
<MkA v-if="appearNote.replyId" class="reply" :to="`/notes/${appearNote.replyId}`"><i class="fas fa-reply"></i></MkA>
<Mfm v-if="appearNote.text" :text="appearNote.text" :author="appearNote.user" :i="$i" :custom-emojis="appearNote.emojis"/>
<a v-if="appearNote.renote != null" class="rp">RN:</a>
@ -67,7 +67,7 @@
<MkUrlPreview v-for="url in urls" :key="url" :url="url" :compact="true" :detail="false" class="url-preview"/>
<div v-if="appearNote.renote" class="renote"><XNoteSimple :note="appearNote.renote"/></div>
<button v-if="collapsed" class="fade _button" @click="collapsed = false">
<span>{{ i18n.locale.showMore }}</span>
<span>{{ i18n.ts.showMore }}</span>
</button>
</div>
<MkA v-if="appearNote.channel && !inChannel" class="channel" :to="`/channels/${appearNote.channel.id}`"><i class="fas fa-satellite-dish"></i> {{ appearNote.channel.name }}</MkA>
@ -94,7 +94,7 @@
</article>
</div>
<div v-else class="muted" @click="muted = false">
<I18n :src="i18n.locale.userSaysSomething" tag="small">
<I18n :src="i18n.ts.userSaysSomething" tag="small">
<template #name>
<MkA v-user-preview="appearNote.userId" class="name" :to="userPage(appearNote.user)">
<MkUserName :user="appearNote.user"/>
@ -238,7 +238,7 @@ function menu(viaKeyboard = false): void {
function showRenoteMenu(viaKeyboard = false): void {
if (!isMyRenote) return;
os.popupMenu([{
text: i18n.locale.unrenote,
text: i18n.ts.unrenote,
icon: 'fas fa-trash-alt',
danger: true,
action: () => {

2
packages/client/src/components/notification.vue
View File

@ -153,7 +153,7 @@ export default defineComponent({
showing,
reaction: props.notification.reaction ? props.notification.reaction.replace(/^:(\w+):$/, ':$1@.:') : props.notification.reaction,
emojis: props.notification.note.emojis,
source: reactionRef.value.$el,
targetElement: reactionRef.value.$el,
}, {}, 'closed');
});

2
packages/client/src/components/page-window.vue
View File

@ -160,7 +160,7 @@ export default defineComponent({
action: () => {
copyToClipboard(this.url);
}
}], ev.currentTarget || ev.target);
}], ev.currentTarget ?? ev.target);
},
back() {

2
packages/client/src/components/post-form-attaches.vue
View File

@ -127,7 +127,7 @@ export default defineComponent({
text: this.$ts.attachCancel,
icon: 'fas fa-times-circle',
action: () => { this.detachMedia(file.id) }
}], ev.currentTarget || ev.target).then(() => this.menu = null);
}], ev.currentTarget ?? ev.target).then(() => this.menu = null);
}
}
});

87
packages/client/src/components/post-form.vue
View File

@ -11,22 +11,22 @@
<div>
<span class="text-count" :class="{ over: textLength > maxTextLength }">{{ maxTextLength - textLength }}</span>
<span v-if="localOnly" class="local-only"><i class="fas fa-biohazard"></i></span>
<button ref="visibilityButton" v-tooltip="i18n.locale.visibility" class="_button visibility" :disabled="channel != null" @click="setVisibility">
<button ref="visibilityButton" v-tooltip="i18n.ts.visibility" class="_button visibility" :disabled="channel != null" @click="setVisibility">
<span v-if="visibility === 'public'"><i class="fas fa-globe"></i></span>
<span v-if="visibility === 'home'"><i class="fas fa-home"></i></span>
<span v-if="visibility === 'followers'"><i class="fas fa-unlock"></i></span>
<span v-if="visibility === 'specified'"><i class="fas fa-envelope"></i></span>
</button>
<button v-tooltip="i18n.locale.previewNoteText" class="_button preview" :class="{ active: showPreview }" @click="showPreview = !showPreview"><i class="fas fa-file-code"></i></button>
<button v-tooltip="i18n.ts.previewNoteText" class="_button preview" :class="{ active: showPreview }" @click="showPreview = !showPreview"><i class="fas fa-file-code"></i></button>
<button class="submit _buttonGradate" :disabled="!canPost" data-cy-open-post-form-submit @click="post">{{ submitText }}<i :class="reply ? 'fas fa-reply' : renote ? 'fas fa-quote-right' : 'fas fa-paper-plane'"></i></button>
</div>
</header>
<div class="form" :class="{ fixed }">
<XNoteSimple v-if="reply" class="preview" :note="reply"/>
<XNoteSimple v-if="renote" class="preview" :note="renote"/>
<div v-if="quoteId" class="with-quote"><i class="fas fa-quote-left"></i> {{ i18n.locale.quoteAttached }}<button @click="quoteId = null"><i class="fas fa-times"></i></button></div>
<div v-if="quoteId" class="with-quote"><i class="fas fa-quote-left"></i> {{ i18n.ts.quoteAttached }}<button @click="quoteId = null"><i class="fas fa-times"></i></button></div>
<div v-if="visibility === 'specified'" class="to-specified">
<span style="margin-right: 8px;">{{ i18n.locale.recipient }}</span>
<span style="margin-right: 8px;">{{ i18n.ts.recipient }}</span>
<div class="visibleUsers">
<span v-for="u in visibleUsers" :key="u.id">
<MkAcct :user="u"/>
@ -35,21 +35,21 @@
<button class="_buttonPrimary" @click="addVisibleUser"><i class="fas fa-plus fa-fw"></i></button>
</div>
</div>
<MkInfo v-if="hasNotSpecifiedMentions" warn class="hasNotSpecifiedMentions">{{ i18n.locale.notSpecifiedMentionWarning }} - <button class="_textButton" @click="addMissingMention()">{{ i18n.locale.add }}</button></MkInfo>
<input v-show="useCw" ref="cwInputEl" v-model="cw" class="cw" :placeholder="i18n.locale.annotation" @keydown="onKeydown">
<MkInfo v-if="hasNotSpecifiedMentions" warn class="hasNotSpecifiedMentions">{{ i18n.ts.notSpecifiedMentionWarning }} - <button class="_textButton" @click="addMissingMention()">{{ i18n.ts.add }}</button></MkInfo>
<input v-show="useCw" ref="cwInputEl" v-model="cw" class="cw" :placeholder="i18n.ts.annotation" @keydown="onKeydown">
<textarea ref="textareaEl" v-model="text" class="text" :class="{ withCw: useCw }" :disabled="posting" :placeholder="placeholder" data-cy-post-form-text @keydown="onKeydown" @paste="onPaste" @compositionupdate="onCompositionUpdate" @compositionend="onCompositionEnd"/>
<input v-show="withHashtags" ref="hashtagsInputEl" v-model="hashtags" class="hashtags" :placeholder="i18n.locale.hashtags" list="hashtags">
<input v-show="withHashtags" ref="hashtagsInputEl" v-model="hashtags" class="hashtags" :placeholder="i18n.ts.hashtags" list="hashtags">
<XPostFormAttaches class="attaches" :files="files" @updated="updateFiles" @detach="detachFile" @changeSensitive="updateFileSensitive" @changeName="updateFileName"/>
<XPollEditor v-if="poll" v-model="poll" @destroyed="poll = null"/>
<XNotePreview v-if="showPreview" class="preview" :text="text"/>
<footer>
<button v-tooltip="i18n.locale.attachFile" class="_button" @click="chooseFileFrom"><i class="fas fa-photo-video"></i></button>
<button v-tooltip="i18n.locale.poll" class="_button" :class="{ active: poll }" @click="togglePoll"><i class="fas fa-poll-h"></i></button>
<button v-tooltip="i18n.locale.useCw" class="_button" :class="{ active: useCw }" @click="useCw = !useCw"><i class="fas fa-eye-slash"></i></button>
<button v-tooltip="i18n.locale.mention" class="_button" @click="insertMention"><i class="fas fa-at"></i></button>
<button v-tooltip="i18n.locale.hashtags" class="_button" :class="{ active: withHashtags }" @click="withHashtags = !withHashtags"><i class="fas fa-hashtag"></i></button>
<button v-tooltip="i18n.locale.emoji" class="_button" @click="insertEmoji"><i class="fas fa-laugh-squint"></i></button>
<button v-if="postFormActions.length > 0" v-tooltip="i18n.locale.plugin" class="_button" @click="showActions"><i class="fas fa-plug"></i></button>
<button v-tooltip="i18n.ts.attachFile" class="_button" @click="chooseFileFrom"><i class="fas fa-photo-video"></i></button>
<button v-tooltip="i18n.ts.poll" class="_button" :class="{ active: poll }" @click="togglePoll"><i class="fas fa-poll-h"></i></button>
<button v-tooltip="i18n.ts.useCw" class="_button" :class="{ active: useCw }" @click="useCw = !useCw"><i class="fas fa-eye-slash"></i></button>
<button v-tooltip="i18n.ts.mention" class="_button" @click="insertMention"><i class="fas fa-at"></i></button>
<button v-tooltip="i18n.ts.hashtags" class="_button" :class="{ active: withHashtags }" @click="withHashtags = !withHashtags"><i class="fas fa-hashtag"></i></button>
<button v-tooltip="i18n.ts.emoji" class="_button" @click="insertEmoji"><i class="fas fa-laugh-squint"></i></button>
<button v-if="postFormActions.length > 0" v-tooltip="i18n.ts.plugin" class="_button" @click="showActions"><i class="fas fa-plug"></i></button>
</footer>
<datalist id="hashtags">
<option v-for="hashtag in recentHashtags" :key="hashtag" :value="hashtag"/>
@ -132,7 +132,10 @@ let showPreview = $ref(false);
let cw = $ref<string | null>(null);
let localOnly = $ref<boolean>(props.initialLocalOnly ?? defaultStore.state.rememberNoteVisibility ? defaultStore.state.localOnly : defaultStore.state.defaultNoteLocalOnly);
let visibility = $ref(props.initialVisibility ?? (defaultStore.state.rememberNoteVisibility ? defaultStore.state.visibility : defaultStore.state.defaultNoteVisibility) as typeof misskey.noteVisibilities[number]);
let visibleUsers = $ref(props.initialVisibleUsers ?? []);
let visibleUsers = $ref([]);
if (props.initialVisibleUsers) {
props.initialVisibleUsers.forEach(pushVisibleUser);
}
let autocomplete = $ref(null);
let draghover = $ref(false);
let quoteId = $ref(null);
@ -162,19 +165,19 @@ const draftKey = $computed((): string => {
const placeholder = $computed((): string => {
if (props.renote) {
return i18n.locale._postForm.quotePlaceholder;
return i18n.ts._postForm.quotePlaceholder;
} else if (props.reply) {
return i18n.locale._postForm.replyPlaceholder;
return i18n.ts._postForm.replyPlaceholder;
} else if (props.channel) {
return i18n.locale._postForm.channelPlaceholder;
return i18n.ts._postForm.channelPlaceholder;
} else {
const xs = [
i18n.locale._postForm._placeholders.a,
i18n.locale._postForm._placeholders.b,
i18n.locale._postForm._placeholders.c,
i18n.locale._postForm._placeholders.d,
i18n.locale._postForm._placeholders.e,
i18n.locale._postForm._placeholders.f
i18n.ts._postForm._placeholders.a,
i18n.ts._postForm._placeholders.b,
i18n.ts._postForm._placeholders.c,
i18n.ts._postForm._placeholders.d,
i18n.ts._postForm._placeholders.e,
i18n.ts._postForm._placeholders.f
];
return xs[Math.floor(Math.random() * xs.length)];
}
@ -182,10 +185,10 @@ const placeholder = $computed((): string => {
const submitText = $computed((): string => {
return props.renote
? i18n.locale.quote
? i18n.ts.quote
: props.reply
? i18n.locale.reply
: i18n.locale.note;
? i18n.ts.reply
: i18n.ts.note;
});
const textLength = $computed((): number => {
@ -259,12 +262,12 @@ if (props.reply && ['home', 'followers', 'specified'].includes(props.reply.visib
os.api('users/show', {
userIds: props.reply.visibleUserIds.filter(uid => uid !== $i.id && uid !== props.reply.userId)
}).then(users => {
visibleUsers.push(...users);
users.forEach(pushVisibleUser);
});
if (props.reply.userId !== $i.id) {
os.api('users/show', { userId: props.reply.userId }).then(user => {
visibleUsers.push(user);
pushVisibleUser(user);
});
}
}
@ -272,7 +275,7 @@ if (props.reply && ['home', 'followers', 'specified'].includes(props.reply.visib
if (props.specified) {
visibility = 'specified';
visibleUsers.push(props.specified);
pushVisibleUser(props.specified);
}
// keep cw when reply
@ -339,7 +342,7 @@ function focus() {
}
function chooseFileFrom(ev) {
selectFiles(ev.currentTarget || ev.target, i18n.locale.attachFile).then(files_ => {
selectFiles(ev.currentTarget ?? ev.target, i18n.ts.attachFile).then(files_ => {
for (const file of files_) {
files.push(file);
}
@ -394,9 +397,15 @@ function setVisibility() {
}, 'closed');
}
function pushVisibleUser(user) {
if (!visibleUsers.some(u => u.username === user.username && u.host === user.host)) {
visibleUsers.push(user);
}
}
function addVisibleUser() {
os.selectUser().then(user => {
visibleUsers.push(user);
pushVisibleUser(user);
});
}
@ -444,7 +453,7 @@ async function onPaste(e: ClipboardEvent) {
os.confirm({
type: 'info',
text: i18n.locale.quoteQuestion,
text: i18n.ts.quoteQuestion,
}).then(({ canceled }) => {
if (canceled) {
insertTextAtCursor(textareaEl, paste);
@ -537,8 +546,8 @@ async function post() {
};
if (withHashtags && hashtags && hashtags.trim() !== '') {
const hashtags = hashtags.trim().split(' ').map(x => x.startsWith('#') ? x : '#' + x).join(' ');
data.text = data.text ? `${data.text} ${hashtags}` : hashtags;
const hashtags_ = hashtags.trim().split(' ').map(x => x.startsWith('#') ? x : '#' + x).join(' ');
data.text = data.text ? `${data.text} ${hashtags_}` : hashtags_;
}
// plugin
@ -562,9 +571,9 @@ async function post() {
deleteDraft();
emit('posted');
if (data.text && data.text != '') {
const hashtags = mfm.parse(data.text).filter(x => x.type === 'hashtag').map(x => x.props.hashtag);
const hashtags_ = mfm.parse(data.text).filter(x => x.type === 'hashtag').map(x => x.props.hashtag);
const history = JSON.parse(localStorage.getItem('hashtags') || '[]') as string[];
localStorage.setItem('hashtags', JSON.stringify(unique(hashtags.concat(history))));
localStorage.setItem('hashtags', JSON.stringify(unique(hashtags_.concat(history))));
}
posting = false;
postAccount = null;
@ -589,7 +598,7 @@ function insertMention() {
}
async function insertEmoji(ev: MouseEvent) {
os.openEmojiPicker(ev.currentTarget || ev.target, {}, textareaEl);
os.openEmojiPicker(ev.currentTarget ?? ev.target, {}, textareaEl);
}
function showActions(ev) {
@ -602,7 +611,7 @@ function showActions(ev) {
if (key === 'text') { text = value; }
});
}
})), ev.currentTarget || ev.target);
})), ev.currentTarget ?? ev.target);
}
let postAccount = $ref<misskey.entities.UserDetailed | null>(null);

6
packages/client/src/components/reaction-tooltip.vue
View File

@ -1,5 +1,5 @@
<template>
<MkTooltip ref="tooltip" :source="source" :max-width="340" @closed="emit('closed')">
<MkTooltip ref="tooltip" :target-element="targetElement" :max-width="340" @closed="emit('closed')">
<div class="beeadbfb">
<XReactionIcon :reaction="reaction" :custom-emojis="emojis" class="icon" :no-style="true"/>
<div class="name">{{ reaction.replace('@.', '') }}</div>
@ -15,11 +15,11 @@ import XReactionIcon from './reaction-icon.vue';
const props = defineProps<{
reaction: string;
emojis: any[]; // TODO
source: any; // TODO
targetElement: HTMLElement;
}>();
const emit = defineEmits<{
(e: 'closed'): void;
(ev: 'closed'): void;
}>();
</script>

6
packages/client/src/components/reactions-viewer.details.vue
View File

@ -1,5 +1,5 @@
<template>
<MkTooltip ref="tooltip" :source="source" :max-width="340" @closed="emit('closed')">
<MkTooltip ref="tooltip" :target-element="targetElement" :max-width="340" @closed="emit('closed')">
<div class="bqxuuuey">
<div class="reaction">
<XReactionIcon :reaction="reaction" :custom-emojis="emojis" class="icon" :no-style="true"/>
@ -26,11 +26,11 @@ const props = defineProps<{
users: any[]; // TODO
count: number;
emojis: any[]; // TODO
source: any; // TODO
targetElement: HTMLElement;
}>();
const emit = defineEmits<{
(e: 'closed'): void;
(ev: 'closed'): void;
}>();
</script>

2
packages/client/src/components/reactions-viewer.reaction.vue
View File

@ -101,7 +101,7 @@ export default defineComponent({
emojis: props.note.emojis,
users,
count: props.count,
source: buttonRef.value
targetElement: buttonRef.value,
}, {}, 'closed');
});

6
packages/client/src/components/renote-button.vue
View File

@ -52,14 +52,14 @@ export default defineComponent({
showing,
users,
count: props.count,
source: buttonRef.value
targetElement: buttonRef.value
}, {}, 'closed');
});
const renote = (viaKeyboard = false) => {
pleaseLogin();
os.popupMenu([{
text: i18n.locale.renote,
text: i18n.ts.renote,
icon: 'fas fa-retweet',
action: () => {
os.api('notes/create', {
@ -67,7 +67,7 @@ export default defineComponent({
});
}
}, {
text: i18n.locale.quote,
text: i18n.ts.quote,
icon: 'fas fa-quote-right',
action: () => {
os.post({

6
packages/client/src/components/renote.details.vue
View File

@ -1,5 +1,5 @@
<template>
<MkTooltip ref="tooltip" :source="source" :max-width="250" @closed="emit('closed')">
<MkTooltip ref="tooltip" :target-element="targetElement" :max-width="250" @closed="emit('closed')">
<div class="beaffaef">
<div v-for="u in users" :key="u.id" class="user">
<MkAvatar class="avatar" :user="u"/>
@ -17,11 +17,11 @@ import MkTooltip from './ui/tooltip.vue';
const props = defineProps<{
users: any[]; // TODO
count: number;
source: any; // TODO
targetElement: HTMLElement;
}>();
const emit = defineEmits<{
(e: 'closed'): void;
(ev: 'closed'): void;
}>();
</script>

2
packages/client/src/components/sample.vue
View File

@ -109,7 +109,7 @@ export default defineComponent({
text: 'Delete some bananas',
danger: true,
action: () => {},
}], ev.currentTarget || ev.target);
}], ev.currentTarget ?? ev.target);
},
}
});

113
packages/client/src/components/ui/context-menu.vue
View File

@ -1,88 +1,71 @@
<template>
<transition :name="$store.state.animation ? 'fade' : ''" appear>
<div class="nvlagfpb" :style="{ zIndex }" @contextmenu.prevent.stop="() => {}">
<div ref="rootEl" class="nvlagfpb" :style="{ zIndex }" @contextmenu.prevent.stop="() => {}">
<MkMenu :items="items" class="_popup _shadow" :align="'left'" @close="$emit('closed')"/>
</div>
</transition>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
<script lang="ts" setup>
import { onMounted, onBeforeUnmount } from 'vue';
import contains from '@/scripts/contains';
import MkMenu from './menu.vue';
import { MenuItem } from './types/menu.vue';
import * as os from '@/os';
export default defineComponent({
components: {
MkMenu,
},
props: {
items: {
type: Array,
required: true
},
ev: {
required: true
},
viaKeyboard: {
type: Boolean,
required: false
},
},
emits: ['closed'],
data() {
return {
zIndex: os.claimZIndex('high'),
};
},
computed: {
keymap(): any {
return {
'esc': () => this.$emit('closed'),
};
},
},
mounted() {
let left = this.ev.pageX + 1; // 間違って右ダブルクリックした場合に意図せずアイテムがクリックされるのを防ぐため + 1
let top = this.ev.pageY + 1; // 間違って右ダブルクリックした場合に意図せずアイテムがクリックされるのを防ぐため + 1
const props = defineProps<{
items: MenuItem[];
ev: MouseEvent;
}>();
const width = this.$el.offsetWidth;
const height = this.$el.offsetHeight;
const emit = defineEmits<{
(e: 'closed'): void;
}>();
if (left + width - window.pageXOffset > window.innerWidth) {
left = window.innerWidth - width + window.pageXOffset;
}
let rootEl = $ref<HTMLDivElement>();
if (top + height - window.pageYOffset > window.innerHeight) {
top = window.innerHeight - height + window.pageYOffset;
}
let zIndex = $ref<number>(os.claimZIndex('high'));
if (top < 0) {
top = 0;
}
onMounted(() => {
let left = props.ev.pageX + 1; // 間違って右ダブルクリックした場合に意図せずアイテムがクリックされるのを防ぐため + 1
let top = props.ev.pageY + 1; // 間違って右ダブルクリックした場合に意図せずアイテムがクリックされるのを防ぐため + 1
if (left < 0) {
left = 0;
}
const width = rootEl.offsetWidth;
const height = rootEl.offsetHeight;
this.$el.style.top = top + 'px';
this.$el.style.left = left + 'px';
if (left + width - window.pageXOffset > window.innerWidth) {
left = window.innerWidth - width + window.pageXOffset;
}
for (const el of Array.from(document.querySelectorAll('body *'))) {
el.addEventListener('mousedown', this.onMousedown);
}
},
beforeUnmount() {
for (const el of Array.from(document.querySelectorAll('body *'))) {
el.removeEventListener('mousedown', this.onMousedown);
}
},
methods: {
onMousedown(e) {
if (!contains(this.$el, e.target) && (this.$el != e.target)) this.$emit('closed');
},
if (top + height - window.pageYOffset > window.innerHeight) {
top = window.innerHeight - height + window.pageYOffset;
}
if (top < 0) {
top = 0;
}
if (left < 0) {
left = 0;
}
rootEl.style.top = `${top}px`;
rootEl.style.left = `${left}px`;
for (const el of Array.from(document.querySelectorAll('body *'))) {
el.addEventListener('mousedown', onMousedown);
}
});
onBeforeUnmount(() => {
for (const el of Array.from(document.querySelectorAll('body *'))) {
el.removeEventListener('mousedown', onMousedown);
}
});
function onMousedown(e: Event) {
if (!contains(rootEl, e.target) && (rootEl != e.target)) emit('closed');
}
</script>
<style lang="scss" scoped>

167
packages/client/src/components/ui/menu.vue
View File

@ -1,8 +1,8 @@
<template>
<div ref="items" v-hotkey="keymap"
<div ref="itemsEl" v-hotkey="keymap"
class="rrevdjwt"
:class="{ center: align === 'center', asDrawer }"
:style="{ width: (width && !asDrawer) ? width + 'px' : null, maxHeight: maxHeight ? maxHeight + 'px' : null }"
:style="{ width: (width && !asDrawer) ? width + 'px' : '', maxHeight: maxHeight ? maxHeight + 'px' : '' }"
@contextmenu.self="e => e.preventDefault()"
>
<template v-for="(item, i) in items2">
@ -28,6 +28,9 @@
<MkAvatar :user="item.user" class="avatar"/><MkUserName :user="item.user"/>
<span v-if="item.indicate" class="indicator"><i class="fas fa-circle"></i></span>
</button>
<span v-else-if="item.type === 'switch'" :tabindex="i" class="item">
<FormSwitch v-model="item.ref" :disabled="item.disabled" class="form-switch">{{ item.text }}</FormSwitch>
</span>
<button v-else :tabindex="i" class="_button item" :class="{ danger: item.danger, active: item.active }" :disabled="item.active" @click="clicked(item.action, $event)">
<i v-if="item.icon" class="fa-fw" :class="item.icon"></i>
<MkAvatar v-if="item.avatar" :user="item.avatar" class="avatar"/>
@ -41,114 +44,78 @@
</div>
</template>
<script lang="ts">
import { defineComponent, ref, unref } from 'vue';
<script lang="ts" setup>
import { nextTick, onMounted, watch } from 'vue';
import { focusPrev, focusNext } from '@/scripts/focus';
import contains from '@/scripts/contains';
import FormSwitch from '@/components/form/switch.vue';
import { MenuItem, InnerMenuItem, MenuPending, MenuAction } from '@/types/menu';
export default defineComponent({
props: {
items: {
type: Array,
required: true
},
viaKeyboard: {
type: Boolean,
required: false
},
asDrawer: {
type: Boolean,
required: false
},
align: {
type: String,
requried: false
},
width: {
type: Number,
required: false
},
maxHeight: {
type: Number,
required: false
},
},
emits: ['close'],
data() {
return {
items2: [],
};
},
computed: {
keymap(): any {
return {
'up|k|shift+tab': this.focusUp,
'down|j|tab': this.focusDown,
'esc': this.close,
};
},
},
watch: {
items: {
handler() {
const items = ref(unref(this.items).filter(item => item !== undefined));
const props = defineProps<{
items: MenuItem[];
viaKeyboard?: boolean;
asDrawer?: boolean;
align?: 'center' | string;
width?: number;
maxHeight?: number;
}>();
for (let i = 0; i < items.value.length; i++) {
const item = items.value[i];
if (item && item.then) { // if item is Promise
items.value[i] = { type: 'pending' };
item.then(actualItem => {
items.value[i] = actualItem;
});
}
}
const emit = defineEmits<{
(e: 'close'): void;
}>();
this.items2 = items;
},
immediate: true
}
},
mounted() {
if (this.viaKeyboard) {
this.$nextTick(() => {
focusNext(this.$refs.items.children[0], true, false);
let itemsEl = $ref<HTMLDivElement>();
let items2: InnerMenuItem[] = $ref([]);
let keymap = $computed(() => ({
'up|k|shift+tab': focusUp,
'down|j|tab': focusDown,
'esc': close,
}));
watch(() => props.items, () => {
const items: (MenuItem | MenuPending)[] = [...props.items].filter(item => item !== undefined);
for (let i = 0; i < items.length; i++) {
const item = items[i];
if (item && 'then' in item) { // if item is Promise
items[i] = { type: 'pending' };
item.then(actualItem => {
items2[i] = actualItem;
});
}
}
if (this.contextmenuEvent) {
this.$el.style.top = this.contextmenuEvent.pageY + 'px';
this.$el.style.left = this.contextmenuEvent.pageX + 'px';
items2 = items as InnerMenuItem[];
}, {
immediate: true,
});
for (const el of Array.from(document.querySelectorAll('body *'))) {
el.addEventListener('mousedown', this.onMousedown);
}
}
},
beforeUnmount() {
for (const el of Array.from(document.querySelectorAll('body *'))) {
el.removeEventListener('mousedown', this.onMousedown);
}
},
methods: {
clicked(fn, ev) {
fn(ev);
this.close();
},
close() {
this.$emit('close');
},
focusUp() {
focusPrev(document.activeElement);
},
focusDown() {
focusNext(document.activeElement);
},
onMousedown(e) {
if (!contains(this.$el, e.target) && (this.$el != e.target)) this.close();
},
onMounted(() => {
if (props.viaKeyboard) {
nextTick(() => {
focusNext(itemsEl.children[0], true, false);
});
}
});
function clicked(fn: MenuAction, ev: MouseEvent) {
fn(ev);
close();
}
function close() {
emit('close');
}
function focusUp() {
focusPrev(document.activeElement);
}
function focusDown() {
focusNext(document.activeElement);
}
</script>
<style lang="scss" scoped>

396
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="childRendered">
<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">
@ -9,8 +9,8 @@
</transition>
</template>
<script lang="ts">
import { defineComponent, nextTick, onMounted, computed, PropType, ref, watch } from 'vue';
<script lang="ts" setup>
import { nextTick, onMounted, computed, ref, watch, provide } from 'vue';
import * as os from '@/os';
import { isTouchUsing } from '@/scripts/touch';
import { defaultStore } from '@/store';
@ -25,234 +25,206 @@ function getFixedContainer(el: Element | null): Element | null {
}
}
export default defineComponent({
provide: {
modal: true
},
type ModalTypes = 'popup' | 'dialog' | 'dialog:top' | 'drawer';
props: {
manualShowing: {
type: Boolean,
required: false,
default: null,
},
srcCenter: {
type: Boolean,
required: false
},
src: {
type: Object as PropType<HTMLElement>,
required: false,
default: null,
},
preferType: {
required: false,
type: String,
default: 'auto',
},
zPriority: {
type: String as PropType<'low' | 'middle' | 'high'>,
required: false,
default: 'low',
},
noOverlap: {
type: Boolean,
required: false,
default: true,
},
transparentBg: {
type: Boolean,
required: false,
default: false,
},
},
const props = withDefaults(defineProps<{
manualShowing?: boolean | null;
srcCenter?: boolean;
src?: HTMLElement;
preferType?: ModalTypes | 'auto';
zPriority?: 'low' | 'middle' | 'high';
noOverlap?: boolean;
transparentBg?: boolean;
}>(), {
manualShowing: null,
src: null,
preferType: 'auto',
zPriority: 'low',
noOverlap: true,
transparentBg: false,
});
emits: ['opening', 'click', 'esc', 'close', 'closed'],
const emit = defineEmits<{
(ev: 'opening'): void;
(ev: 'click'): void;
(ev: 'esc'): void;
(ev: 'close'): void;
(ev: 'closed'): void;
}>();
setup(props, context) {
const maxHeight = ref<number>();
const fixed = ref(false);
const transformOrigin = ref('center');
const showing = ref(true);
const content = ref<HTMLElement>();
const zIndex = os.claimZIndex(props.zPriority);
const type = computed(() => {
if (props.preferType === 'auto') {
if (!defaultStore.state.disableDrawer && isTouchUsing && window.innerWidth < 500 && window.innerHeight < 1000) {
return 'drawer';
} else {
return props.src != null ? 'popup' : 'dialog';
}
} else {
return props.preferType;
}
});
let contentClicking = false;
provide('modal', true);
const close = () => {
// eslint-disable-next-line vue/no-mutating-props
if (props.src) props.src.style.pointerEvents = 'auto';
showing.value = false;
context.emit('close');
};
const maxHeight = ref<number>();
const fixed = ref(false);
const transformOrigin = ref('center');
const showing = ref(true);
const content = ref<HTMLElement>();
const zIndex = os.claimZIndex(props.zPriority);
const type = computed(() => {
if (props.preferType === 'auto') {
if (!defaultStore.state.disableDrawer && isTouchUsing && window.innerWidth < 500 && window.innerHeight < 1000) {
return 'drawer';
} else {
return props.src != null ? 'popup' : 'dialog';
}
} else {
return props.preferType!;
}
});
const onBgClick = () => {
if (contentClicking) return;
context.emit('click');
};
let contentClicking = false;
if (type.value === 'drawer') {
maxHeight.value = window.innerHeight / 2;
const close = () => {
// eslint-disable-next-line vue/no-mutating-props
if (props.src) props.src.style.pointerEvents = 'auto';
showing.value = false;
emit('close');
};
const onBgClick = () => {
if (contentClicking) return;
emit('click');
};
if (type.value === 'drawer') {
maxHeight.value = window.innerHeight / 2;
}
const keymap = {
'esc': () => emit('esc'),
};
const MARGIN = 16;
const align = () => {
if (props.src == null) return;
if (type.value === 'drawer') return;
const popover = content.value!;
if (popover == null) return;
const rect = props.src.getBoundingClientRect();
const width = popover.offsetWidth;
const height = popover.offsetHeight;
let left;
let top;
if (props.srcCenter) {
const x = rect.left + (fixed.value ? 0 : window.pageXOffset) + (props.src.offsetWidth / 2);
const y = rect.top + (fixed.value ? 0 : window.pageYOffset) + (props.src.offsetHeight / 2);
left = (x - (width / 2));
top = (y - (height / 2));
} else {
const x = rect.left + (fixed.value ? 0 : window.pageXOffset) + (props.src.offsetWidth / 2);
const y = rect.top + (fixed.value ? 0 : window.pageYOffset) + props.src.offsetHeight;
left = (x - (width / 2));
top = y;
}
if (fixed.value) {
// 画面から横にはみ出る場合
if (left + width > window.innerWidth) {
left = window.innerWidth - width;
}
const keymap = {
'esc': () => context.emit('esc'),
};
const MARGIN = 16;
const align = () => {
if (props.src == null) return;
if (type.value === 'drawer') return;
const popover = content.value!;
if (popover == null) return;
const rect = props.src.getBoundingClientRect();
const width = popover.offsetWidth;
const height = popover.offsetHeight;
let left;
let top;
if (props.srcCenter) {
const x = rect.left + (fixed.value ? 0 : window.pageXOffset) + (props.src.offsetWidth / 2);
const y = rect.top + (fixed.value ? 0 : window.pageYOffset) + (props.src.offsetHeight / 2);
left = (x - (width / 2));
top = (y - (height / 2));
} else {
const x = rect.left + (fixed.value ? 0 : window.pageXOffset) + (props.src.offsetWidth / 2);
const y = rect.top + (fixed.value ? 0 : window.pageYOffset) + props.src.offsetHeight;
left = (x - (width / 2));
top = y;
}
if (fixed.value) {
// 画面から横にはみ出る場合
if (left + width > window.innerWidth) {
left = window.innerWidth - width;
}
// 画面から縦にはみ出る場合
if (top + height > (window.innerHeight - MARGIN)) {
if (props.noOverlap) {
const underSpace = (window.innerHeight - MARGIN) - top;
const upperSpace = (rect.top - MARGIN);
if (underSpace >= (upperSpace / 3)) {
maxHeight.value = underSpace;
} else {
maxHeight.value = upperSpace;
top = (upperSpace + MARGIN) - height;
}
} else {
top = (window.innerHeight - MARGIN) - height;
}
// 画面から縦にはみ出る場合
if (top + height > (window.innerHeight - MARGIN)) {
if (props.noOverlap) {
const underSpace = (window.innerHeight - MARGIN) - top;
const upperSpace = (rect.top - MARGIN);
if (underSpace >= (upperSpace / 3)) {
maxHeight.value = underSpace;
} else {
maxHeight.value = upperSpace;
top = (upperSpace + MARGIN) - height;
}
} else {
// 画面から横にはみ出る場合
if (left + width - window.pageXOffset > window.innerWidth) {
left = window.innerWidth - width + window.pageXOffset - 1;
top = (window.innerHeight - MARGIN) - height;
}
}
} else {
// 画面から横にはみ出る場合
if (left + width - window.pageXOffset > window.innerWidth) {
left = window.innerWidth - width + window.pageXOffset - 1;
}
// 画面から縦にはみ出る場合
if (top + height - window.pageYOffset > (window.innerHeight - MARGIN)) {
if (props.noOverlap) {
const underSpace = (window.innerHeight - MARGIN) - (top - window.pageYOffset);
const upperSpace = (rect.top - MARGIN);
if (underSpace >= (upperSpace / 3)) {
maxHeight.value = underSpace;
} else {
maxHeight.value = upperSpace;
top = window.pageYOffset + ((upperSpace + MARGIN) - height);
}
// 画面から縦にはみ出る場合
if (top + height - window.pageYOffset > (window.innerHeight - MARGIN)) {
if (props.noOverlap) {
const underSpace = (window.innerHeight - MARGIN) - (top - window.pageYOffset);
const upperSpace = (rect.top - MARGIN);
if (underSpace >= (upperSpace / 3)) {
maxHeight.value = underSpace;
} else {
maxHeight.value = upperSpace;
top = window.pageYOffset + ((upperSpace + MARGIN) - height);
}
} else {
top = (window.innerHeight - MARGIN) - height + window.pageYOffset - 1;
}
}
}
if (top < 0) {
top = MARGIN;
}
if (left < 0) {
left = 0;
}
if (top > rect.top + (fixed.value ? 0 : window.pageYOffset)) {
transformOrigin.value = 'center top';
} else if ((top + height) <= rect.top + (fixed.value ? 0 : window.pageYOffset)) {
transformOrigin.value = 'center bottom';
} else {
transformOrigin.value = 'center';
top = (window.innerHeight - MARGIN) - height + window.pageYOffset - 1;
}
}
}
popover.style.left = left + 'px';
popover.style.top = top + 'px';
};
if (top < 0) {
top = MARGIN;
}
const childRendered = () => {
// モーダルコンテンツにマウスボタンが押され、コンテンツ外でマウスボタンが離されたときにモーダルバックグラウンドクリックと判定させないためにマウスイベントを監視しフラグ管理する
const el = content.value!.children[0];
el.addEventListener('mousedown', e => {
contentClicking = true;
window.addEventListener('mouseup', e => {
// click イベントより先に mouseup イベントが発生するかもしれないのでちょっと待つ
window.setTimeout(() => {
contentClicking = false;
}, 100);
}, { passive: true, once: true });
}, { passive: true });
};
if (left < 0) {
left = 0;
}
onMounted(() => {
watch(() => props.src, async () => {
if (props.src) {
// eslint-disable-next-line vue/no-mutating-props
props.src.style.pointerEvents = 'none';
}
fixed.value = (type.value === 'drawer') || (getFixedContainer(props.src) != null);
if (top > rect.top + (fixed.value ? 0 : window.pageYOffset)) {
transformOrigin.value = 'center top';
} else if ((top + height) <= rect.top + (fixed.value ? 0 : window.pageYOffset)) {
transformOrigin.value = 'center bottom';
} else {
transformOrigin.value = 'center';
}
await nextTick()
align();
}, { immediate: true, });
popover.style.left = left + 'px';
popover.style.top = top + 'px';
};
nextTick(() => {
const popover = content.value;
new ResizeObserver((entries, observer) => {
align();
}).observe(popover!);
});
});
const childRendered = () => {
// モーダルコンテンツにマウスボタンが押され、コンテンツ外でマウスボタンが離されたときにモーダルバックグラウンドクリックと判定させないためにマウスイベントを監視しフラグ管理する
const el = content.value!.children[0];
el.addEventListener('mousedown', ev => {
contentClicking = true;
window.addEventListener('mouseup', ev => {
// click イベントより先に mouseup イベントが発生するかもしれないのでちょっと待つ
window.setTimeout(() => {
contentClicking = false;
}, 100);
}, { passive: true, once: true });
}, { passive: true });
};
return {
showing,
type,
fixed,
content,
transformOrigin,
maxHeight,
close,
zIndex,
keymap,
onBgClick,
childRendered,
};
},
onMounted(() => {
watch(() => props.src, async () => {
if (props.src) {
// eslint-disable-next-line vue/no-mutating-props
props.src.style.pointerEvents = 'none';
}
fixed.value = (type.value === 'drawer') || (getFixedContainer(props.src) != null);
await nextTick()
align();
}, { immediate: true, });
nextTick(() => {
const popover = content.value;
new ResizeObserver((entries, observer) => {
align();
}).observe(popover!);
});
});
defineExpose({
close,
});
</script>

48
packages/client/src/components/ui/popup-menu.vue
View File

@ -1,44 +1,28 @@
<template>
<MkModal ref="modal" v-slot="{ type, maxHeight }" :z-priority="'high'" :src="src" :transparent-bg="true" @click="$refs.modal.close()" @closed="$emit('closed')">
<MkMenu :items="items" :align="align" :width="width" :max-height="maxHeight" :as-drawer="type === 'drawer'" class="sfhdhdhq _popup _shadow" :class="{ drawer: type === 'drawer' }" @close="$refs.modal.close()"/>
<MkModal ref="modal" v-slot="{ type, maxHeight }" :z-priority="'high'" :src="src" :transparent-bg="true" @click="modal.close()" @closed="emit('closed')">
<MkMenu :items="items" :align="align" :width="width" :max-height="maxHeight" :as-drawer="type === 'drawer'" class="sfhdhdhq _popup _shadow" :class="{ drawer: type === 'drawer' }" @close="modal.close()"/>
</MkModal>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
<script lang="ts" setup>
import { } from 'vue';
import MkModal from './modal.vue';
import MkMenu from './menu.vue';
import { MenuItem } from '@/types/menu';
export default defineComponent({
components: {
MkModal,
MkMenu,
},
defineProps<{
items: MenuItem[];
align?: 'center' | string;
width?: number;
viaKeyboard?: boolean;
src?: any;
}>();
props: {
items: {
type: Array,
required: true
},
align: {
type: String,
required: false
},
width: {
type: Number,
required: false
},
viaKeyboard: {
type: Boolean,
required: false
},
src: {
required: false
},
},
const emit = defineEmits<{
(e: 'closed'): void;
}>();
emits: ['close', 'closed'],
});
let modal = $ref<InstanceType<typeof MkModal>>();
</script>
<style lang="scss" scoped>

141
packages/client/src/components/ui/tooltip.vue
View File

@ -1,99 +1,96 @@
<template>
<transition :name="$store.state.animation ? 'tooltip' : ''" appear @after-leave="$emit('closed')">
<transition :name="$store.state.animation ? 'tooltip' : ''" appear @after-leave="emit('closed')">
<div v-show="showing" ref="el" class="buebdbiu _acrylic _shadow" :style="{ zIndex, maxWidth: maxWidth + 'px' }">
<slot>{{ text }}</slot>
</div>
</transition>
</template>
<script lang="ts">
import { defineComponent, nextTick, onMounted, onUnmounted, ref } from 'vue';
<script lang="ts" setup>
import { nextTick, onMounted, onUnmounted, ref } from 'vue';
import * as os from '@/os';
export default defineComponent({
props: {
showing: {
type: Boolean,
required: true,
},
source: {
required: true,
},
text: {
type: String,
required: false
},
maxWidth: {
type: Number,
required: false,
default: 250,
},
},
const props = withDefaults(defineProps<{
showing: boolean;
targetElement?: HTMLElement;
x?: number;
y?: number;
text?: string;
maxWidth?: number;
}>(), {
maxWidth: 250,
});
emits: ['closed'],
const emit = defineEmits<{
(ev: 'closed'): void;
}>();
setup(props, context) {
const el = ref<HTMLElement>();
const zIndex = os.claimZIndex('high');
const el = ref<HTMLElement>();
const zIndex = os.claimZIndex('high');
const setPosition = () => {
if (el.value == null) return;
const setPosition = () => {
if (el.value == null) return;
const rect = props.source.getBoundingClientRect();
const contentWidth = el.value.offsetWidth;
const contentHeight = el.value.offsetHeight;
const contentWidth = el.value.offsetWidth;
const contentHeight = el.value.offsetHeight;
let left: number;
let top: number;
let left = rect.left + window.pageXOffset + (props.source.offsetWidth / 2);
let top = rect.top + window.pageYOffset - contentHeight;
let rect: DOMRect;
left -= (el.value.offsetWidth / 2);
if (props.targetElement) {
rect = props.targetElement.getBoundingClientRect();
if (left + contentWidth - window.pageXOffset > window.innerWidth) {
left = window.innerWidth - contentWidth + window.pageXOffset - 1;
}
left = rect.left + window.pageXOffset + (props.targetElement.offsetWidth / 2);
top = rect.top + window.pageYOffset - contentHeight;
if (top - window.pageYOffset < 0) {
top = rect.top + window.pageYOffset + props.source.offsetHeight;
el.value.style.transformOrigin = 'center top';
}
el.value.style.transformOrigin = 'center bottom';
} else {
left = props.x;
top = props.y - contentHeight;
}
el.value.style.left = left + 'px';
el.value.style.top = top + 'px';
};
left -= (el.value.offsetWidth / 2);
onMounted(() => {
nextTick(() => {
if (props.source == null) {
context.emit('closed');
return;
}
if (left + contentWidth - window.pageXOffset > window.innerWidth) {
left = window.innerWidth - contentWidth + window.pageXOffset - 1;
}
// ツールチップを上に向かって表示するスペースがなければ下に向かって出す
if (top - window.pageYOffset < 0) {
if (props.targetElement) {
top = rect.top + window.pageYOffset + props.targetElement.offsetHeight;
el.value.style.transformOrigin = 'center top';
} else {
top = props.y;
}
}
el.value.style.left = left + 'px';
el.value.style.top = top + 'px';
};
onMounted(() => {
nextTick(() => {
setPosition();
let loopHandler;
const loop = () => {
loopHandler = window.requestAnimationFrame(() => {
setPosition();
let loopHandler;
const loop = () => {
loopHandler = window.requestAnimationFrame(() => {
setPosition();
loop();
});
};
loop();
onUnmounted(() => {
window.cancelAnimationFrame(loopHandler);
});
});
});
return {
el,
zIndex,
};
},
})
loop();
onUnmounted(() => {
window.cancelAnimationFrame(loopHandler);
});
});
});
</script>
<style lang="scss" scoped>
@ -118,6 +115,6 @@ export default defineComponent({
border-radius: 4px;
border: solid 0.5px var(--divider);
pointer-events: none;
transform-origin: center bottom;
transform-origin: center center;
}
</style>

8
packages/client/src/components/user-online-indicator.vue
View File

@ -13,10 +13,10 @@ const props = defineProps<{
const text = $computed(() => {
switch (props.user.onlineStatus) {
case 'online': return i18n.locale.online;
case 'active': return i18n.locale.active;
case 'offline': return i18n.locale.offline;
case 'unknown': return i18n.locale.unknown;
case 'online': return i18n.ts.online;
case 'active': return i18n.ts.active;
case 'offline': return i18n.ts.offline;
case 'unknown': return i18n.ts.unknown;
}
});
</script>