Merge branch 'develop' into pr/ThatOneCalculator/8764
This commit is contained in:
tamaina
commit
6fab21c6a7
233 changed files with 6639 additions and 18111 deletions
|
|
@ -13,7 +13,7 @@
|
|||
"@rollup/plugin-json": "4.1.0",
|
||||
"@rollup/pluginutils": "^4.2.1",
|
||||
"@syuilo/aiscript": "0.11.1",
|
||||
"@vitejs/plugin-vue": "3.0.0-beta.0",
|
||||
"@vitejs/plugin-vue": "3.0.1",
|
||||
"@vue/compiler-sfc": "3.2.37",
|
||||
"abort-controller": "3.0.0",
|
||||
"autobind-decorator": "2.4.0",
|
||||
|
|
@ -38,7 +38,7 @@
|
|||
"json5": "2.2.1",
|
||||
"katex": "0.15.6",
|
||||
"matter-js": "0.18.0",
|
||||
"mfm-js": "0.22.1",
|
||||
"mfm-js": "0.23.0-canary.1",
|
||||
"misskey-js": "0.0.14",
|
||||
"mocha": "10.0.0",
|
||||
"ms": "2.1.3",
|
||||
|
|
@ -54,7 +54,6 @@
|
|||
"random-seed": "0.3.0",
|
||||
"reflect-metadata": "0.1.13",
|
||||
"rndstr": "1.0.0",
|
||||
"rollup": "2.75.7",
|
||||
"s-age": "1.1.2",
|
||||
"sass": "1.53.0",
|
||||
"seedrandom": "3.0.5",
|
||||
|
|
@ -72,7 +71,7 @@
|
|||
"uuid": "8.3.2",
|
||||
"v-debounce": "0.1.2",
|
||||
"vanilla-tilt": "1.7.2",
|
||||
"vite": "3.0.0-beta.6",
|
||||
"vite": "3.0.2",
|
||||
"vue": "3.2.37",
|
||||
"vue-prism-editor": "2.0.0-alpha.2",
|
||||
"vuedraggable": "4.0.1",
|
||||
|
|
@ -98,13 +97,14 @@
|
|||
"@types/uuid": "8.3.4",
|
||||
"@types/websocket": "1.0.5",
|
||||
"@types/ws": "8.5.3",
|
||||
"@typescript-eslint/eslint-plugin": "5.30.0",
|
||||
"@typescript-eslint/parser": "5.30.0",
|
||||
"@typescript-eslint/eslint-plugin": "5.30.6",
|
||||
"@typescript-eslint/parser": "5.30.6",
|
||||
"rollup": "2.76.0",
|
||||
"cross-env": "7.0.3",
|
||||
"cypress": "10.3.0",
|
||||
"eslint": "8.18.0",
|
||||
"eslint": "8.19.0",
|
||||
"eslint-plugin-import": "2.26.0",
|
||||
"eslint-plugin-vue": "9.1.1",
|
||||
"eslint-plugin-vue": "9.2.0",
|
||||
"start-server-and-test": "1.14.0"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -206,17 +206,16 @@ export async function openAccountMenu(opts: {
|
|||
to: `/@${ $i.username }`,
|
||||
avatar: $i,
|
||||
}, null, ...(opts.includeCurrentAccount ? [createItem($i)] : []), ...accountItemPromises, {
|
||||
type: 'parent',
|
||||
icon: 'fas fa-plus',
|
||||
text: i18n.ts.addAccount,
|
||||
action: () => {
|
||||
popupMenu([{
|
||||
text: i18n.ts.existingAccount,
|
||||
action: () => { showSigninDialog(); },
|
||||
}, {
|
||||
text: i18n.ts.createAccount,
|
||||
action: () => { createAccount(); },
|
||||
}], ev.currentTarget ?? ev.target);
|
||||
},
|
||||
children: [{
|
||||
text: i18n.ts.existingAccount,
|
||||
action: () => { showSigninDialog(); },
|
||||
}, {
|
||||
text: i18n.ts.createAccount,
|
||||
action: () => { createAccount(); },
|
||||
}],
|
||||
}, {
|
||||
type: 'link',
|
||||
icon: 'fas fa-users',
|
||||
|
|
|
|||
|
|
@ -316,7 +316,7 @@ const render = () => {
|
|||
plugins: [{
|
||||
id: 'vLine',
|
||||
beforeDraw(chart, args, options) {
|
||||
if (chart.tooltip._active && chart.tooltip._active.length) {
|
||||
if (chart.tooltip?._active?.length) {
|
||||
const activePoint = chart.tooltip._active[0];
|
||||
const ctx = chart.ctx;
|
||||
const x = activePoint.element.x;
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
|
||||
<script lang="ts" setup>
|
||||
import { computed } from 'vue';
|
||||
import { Prism } from 'prismjs';
|
||||
import Prism from 'prismjs';
|
||||
import 'prismjs/themes/prism-okaidia.css';
|
||||
|
||||
const props = defineProps<{
|
||||
|
|
|
|||
|
|
@ -59,7 +59,7 @@ const isThumbnailAvailable = computed(() => {
|
|||
display: flex;
|
||||
background: var(--panel);
|
||||
border-radius: 8px;
|
||||
overflow: hidden; overflow: clip;
|
||||
overflow: clip;
|
||||
|
||||
> .icon-sub {
|
||||
position: absolute;
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@
|
|||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { } from 'vue';
|
||||
import { } from 'vue';
|
||||
import * as Misskey from 'misskey-js';
|
||||
import XDrive from './drive.vue';
|
||||
import XWindow from '@/components/ui/window.vue';
|
||||
|
|
|
|||
|
|
@ -26,7 +26,8 @@
|
|||
</div>
|
||||
<button class="menu _button" @click="showMenu"><i class="fas fa-ellipsis-h"></i></button>
|
||||
</nav>
|
||||
<div ref="main" class="main"
|
||||
<div
|
||||
ref="main" class="main"
|
||||
:class="{ uploading: uploadings.length > 0, fetching }"
|
||||
@dragover.prevent.stop="onDragover"
|
||||
@dragenter="onDragenter"
|
||||
|
|
@ -142,7 +143,7 @@ const isDragSource = ref(false);
|
|||
const fetching = ref(true);
|
||||
|
||||
const ilFilesObserver = new IntersectionObserver(
|
||||
(entries) => entries.some((entry) => entry.isIntersecting) && !fetching.value && moreFiles.value && fetchMoreFiles()
|
||||
(entries) => entries.some((entry) => entry.isIntersecting) && !fetching.value && moreFiles.value && fetchMoreFiles(),
|
||||
);
|
||||
|
||||
watch(folder, () => emit('cd', folder.value));
|
||||
|
|
@ -232,7 +233,7 @@ function onDrop(ev: DragEvent): any {
|
|||
removeFile(file.id);
|
||||
os.api('drive/files/update', {
|
||||
fileId: file.id,
|
||||
folderId: folder.value ? folder.value.id : null
|
||||
folderId: folder.value ? folder.value.id : null,
|
||||
});
|
||||
}
|
||||
//#endregion
|
||||
|
|
@ -248,7 +249,7 @@ function onDrop(ev: DragEvent): any {
|
|||
removeFolder(droppedFolder.id);
|
||||
os.api('drive/folders/update', {
|
||||
folderId: droppedFolder.id,
|
||||
parentId: folder.value ? folder.value.id : null
|
||||
parentId: folder.value ? folder.value.id : null,
|
||||
}).then(() => {
|
||||
// noop
|
||||
}).catch(err => {
|
||||
|
|
@ -256,13 +257,13 @@ function onDrop(ev: DragEvent): any {
|
|||
case 'detected-circular-definition':
|
||||
os.alert({
|
||||
title: i18n.ts.unableToProcess,
|
||||
text: i18n.ts.circularReferenceFolder
|
||||
text: i18n.ts.circularReferenceFolder,
|
||||
});
|
||||
break;
|
||||
default:
|
||||
os.alert({
|
||||
type: 'error',
|
||||
text: i18n.ts.somethingHappened
|
||||
text: i18n.ts.somethingHappened,
|
||||
});
|
||||
}
|
||||
});
|
||||
|
|
@ -278,17 +279,17 @@ function urlUpload() {
|
|||
os.inputText({
|
||||
title: i18n.ts.uploadFromUrl,
|
||||
type: 'url',
|
||||
placeholder: i18n.ts.uploadFromUrlDescription
|
||||
placeholder: i18n.ts.uploadFromUrlDescription,
|
||||
}).then(({ canceled, result: url }) => {
|
||||
if (canceled || !url) return;
|
||||
os.api('drive/files/upload-from-url', {
|
||||
url: url,
|
||||
folderId: folder.value ? folder.value.id : undefined
|
||||
folderId: folder.value ? folder.value.id : undefined,
|
||||
});
|
||||
|
||||
os.alert({
|
||||
title: i18n.ts.uploadFromUrlRequested,
|
||||
text: i18n.ts.uploadFromUrlMayTakeTime
|
||||
text: i18n.ts.uploadFromUrlMayTakeTime,
|
||||
});
|
||||
});
|
||||
}
|
||||
|
|
@ -296,12 +297,12 @@ function urlUpload() {
|
|||
function createFolder() {
|
||||
os.inputText({
|
||||
title: i18n.ts.createFolder,
|
||||
placeholder: i18n.ts.folderName
|
||||
placeholder: i18n.ts.folderName,
|
||||
}).then(({ canceled, result: name }) => {
|
||||
if (canceled) return;
|
||||
os.api('drive/folders/create', {
|
||||
name: name,
|
||||
parentId: folder.value ? folder.value.id : undefined
|
||||
parentId: folder.value ? folder.value.id : undefined,
|
||||
}).then(createdFolder => {
|
||||
addFolder(createdFolder, true);
|
||||
});
|
||||
|
|
@ -312,12 +313,12 @@ function renameFolder(folderToRename: Misskey.entities.DriveFolder) {
|
|||
os.inputText({
|
||||
title: i18n.ts.renameFolder,
|
||||
placeholder: i18n.ts.inputNewFolderName,
|
||||
default: folderToRename.name
|
||||
default: folderToRename.name,
|
||||
}).then(({ canceled, result: name }) => {
|
||||
if (canceled) return;
|
||||
os.api('drive/folders/update', {
|
||||
folderId: folderToRename.id,
|
||||
name: name
|
||||
name: name,
|
||||
}).then(updatedFolder => {
|
||||
// FIXME: 画面を更新するために自分自身に移動
|
||||
move(updatedFolder);
|
||||
|
|
@ -327,7 +328,7 @@ function renameFolder(folderToRename: Misskey.entities.DriveFolder) {
|
|||
|
||||
function deleteFolder(folderToDelete: Misskey.entities.DriveFolder) {
|
||||
os.api('drive/folders/delete', {
|
||||
folderId: folderToDelete.id
|
||||
folderId: folderToDelete.id,
|
||||
}).then(() => {
|
||||
// 削除時に親フォルダに移動
|
||||
move(folderToDelete.parentId);
|
||||
|
|
@ -337,15 +338,15 @@ function deleteFolder(folderToDelete: Misskey.entities.DriveFolder) {
|
|||
os.alert({
|
||||
type: 'error',
|
||||
title: i18n.ts.unableToDelete,
|
||||
text: i18n.ts.hasChildFilesOrFolders
|
||||
text: i18n.ts.hasChildFilesOrFolders,
|
||||
});
|
||||
break;
|
||||
default:
|
||||
os.alert({
|
||||
type: 'error',
|
||||
text: i18n.ts.unableToDelete
|
||||
text: i18n.ts.unableToDelete,
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
|
|
@ -411,7 +412,7 @@ function move(target?: Misskey.entities.DriveFolder) {
|
|||
fetching.value = true;
|
||||
|
||||
os.api('drive/folders/show', {
|
||||
folderId: target
|
||||
folderId: target,
|
||||
}).then(folderToMove => {
|
||||
folder.value = folderToMove;
|
||||
hierarchyFolders.value = [];
|
||||
|
|
@ -510,7 +511,7 @@ async function fetch() {
|
|||
|
||||
const foldersPromise = os.api('drive/folders', {
|
||||
folderId: folder.value ? folder.value.id : null,
|
||||
limit: foldersMax + 1
|
||||
limit: foldersMax + 1,
|
||||
}).then(fetchedFolders => {
|
||||
if (fetchedFolders.length === foldersMax + 1) {
|
||||
moreFolders.value = true;
|
||||
|
|
@ -522,7 +523,7 @@ async function fetch() {
|
|||
const filesPromise = os.api('drive/files', {
|
||||
folderId: folder.value ? folder.value.id : null,
|
||||
type: props.type,
|
||||
limit: filesMax + 1
|
||||
limit: filesMax + 1,
|
||||
}).then(fetchedFiles => {
|
||||
if (fetchedFiles.length === filesMax + 1) {
|
||||
moreFiles.value = true;
|
||||
|
|
@ -549,7 +550,7 @@ function fetchMoreFiles() {
|
|||
folderId: folder.value ? folder.value.id : null,
|
||||
type: props.type,
|
||||
untilId: files.value[files.value.length - 1].id,
|
||||
limit: max + 1
|
||||
limit: max + 1,
|
||||
}).then(files => {
|
||||
if (files.length === max + 1) {
|
||||
moreFiles.value = true;
|
||||
|
|
@ -569,30 +570,30 @@ function getMenu() {
|
|||
ref: keepOriginal,
|
||||
}, null, {
|
||||
text: i18n.ts.addFile,
|
||||
type: 'label'
|
||||
type: 'label',
|
||||
}, {
|
||||
text: i18n.ts.upload,
|
||||
icon: 'fas fa-upload',
|
||||
action: () => { selectLocalFile(); }
|
||||
action: () => { selectLocalFile(); },
|
||||
}, {
|
||||
text: i18n.ts.fromUrl,
|
||||
icon: 'fas fa-link',
|
||||
action: () => { urlUpload(); }
|
||||
action: () => { urlUpload(); },
|
||||
}, null, {
|
||||
text: folder.value ? folder.value.name : i18n.ts.drive,
|
||||
type: 'label'
|
||||
type: 'label',
|
||||
}, folder.value ? {
|
||||
text: i18n.ts.renameFolder,
|
||||
icon: 'fas fa-i-cursor',
|
||||
action: () => { renameFolder(folder.value); }
|
||||
action: () => { renameFolder(folder.value); },
|
||||
} : undefined, folder.value ? {
|
||||
text: i18n.ts.deleteFolder,
|
||||
icon: 'fas fa-trash-alt',
|
||||
action: () => { deleteFolder(folder.value as Misskey.entities.DriveFolder); }
|
||||
action: () => { deleteFolder(folder.value as Misskey.entities.DriveFolder); },
|
||||
} : undefined, {
|
||||
text: i18n.ts.createFolder,
|
||||
icon: 'fas fa-folder-plus',
|
||||
action: () => { createFolder(); }
|
||||
action: () => { createFolder(); },
|
||||
}];
|
||||
}
|
||||
|
||||
|
|
@ -662,14 +663,14 @@ onBeforeUnmount(() => {
|
|||
> .path {
|
||||
display: inline-block;
|
||||
vertical-align: bottom;
|
||||
line-height: 50px;
|
||||
line-height: 42px;
|
||||
white-space: nowrap;
|
||||
|
||||
> * {
|
||||
display: inline-block;
|
||||
margin: 0;
|
||||
padding: 0 8px;
|
||||
line-height: 50px;
|
||||
line-height: 42px;
|
||||
cursor: pointer;
|
||||
|
||||
* {
|
||||
|
|
|
|||
|
|
@ -1,15 +1,17 @@
|
|||
<template>
|
||||
<!-- このコンポーネントの要素のclassは親から利用されるのでむやみに弄らないこと -->
|
||||
<section>
|
||||
<header class="_acrylic" @click="shown = !shown">
|
||||
<i class="toggle fa-fw" :class="shown ? 'fas fa-chevron-down' : 'fas fa-chevron-up'"></i> <slot></slot> ({{ emojis.length }})
|
||||
</header>
|
||||
<div v-if="shown">
|
||||
<button v-for="emoji in emojis"
|
||||
<div v-if="shown" class="body">
|
||||
<button
|
||||
v-for="emoji in emojis"
|
||||
:key="emoji"
|
||||
class="_button"
|
||||
class="_button item"
|
||||
@click="emit('chosen', emoji, $event)"
|
||||
>
|
||||
<MkEmoji :emoji="emoji" :normal="true"/>
|
||||
<MkEmoji class="emoji" :emoji="emoji" :normal="true"/>
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
|
|
|
|||
|
|
@ -3,63 +3,67 @@
|
|||
<input ref="search" v-model.trim="q" class="search" data-prevent-emoji-insert :class="{ filled: q != null && q != '' }" :placeholder="i18n.ts.search" type="search" @paste.stop="paste" @keyup.enter="done()">
|
||||
<div ref="emojis" class="emojis">
|
||||
<section class="result">
|
||||
<div v-if="searchResultCustom.length > 0">
|
||||
<button v-for="emoji in searchResultCustom"
|
||||
<div v-if="searchResultCustom.length > 0" class="body">
|
||||
<button
|
||||
v-for="emoji in searchResultCustom"
|
||||
:key="emoji.id"
|
||||
class="_button"
|
||||
class="_button item"
|
||||
:title="emoji.name"
|
||||
tabindex="0"
|
||||
@click="chosen(emoji, $event)"
|
||||
>
|
||||
<!--<MkEmoji v-if="emoji.char != null" :emoji="emoji.char"/>-->
|
||||
<img :src="disableShowingAnimatedImages ? getStaticImageUrl(emoji.url) : emoji.url"/>
|
||||
<img class="emoji" :src="disableShowingAnimatedImages ? getStaticImageUrl(emoji.url) : emoji.url"/>
|
||||
</button>
|
||||
</div>
|
||||
<div v-if="searchResultUnicode.length > 0">
|
||||
<button v-for="emoji in searchResultUnicode"
|
||||
<div v-if="searchResultUnicode.length > 0" class="body">
|
||||
<button
|
||||
v-for="emoji in searchResultUnicode"
|
||||
:key="emoji.name"
|
||||
class="_button"
|
||||
class="_button item"
|
||||
:title="emoji.name"
|
||||
tabindex="0"
|
||||
@click="chosen(emoji, $event)"
|
||||
>
|
||||
<MkEmoji :emoji="emoji.char"/>
|
||||
<MkEmoji class="emoji" :emoji="emoji.char"/>
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div v-if="tab === 'index'" class="index">
|
||||
<div v-if="tab === 'index'" class="group index">
|
||||
<section v-if="showPinned">
|
||||
<div>
|
||||
<button v-for="emoji in pinned"
|
||||
<div class="body">
|
||||
<button
|
||||
v-for="emoji in pinned"
|
||||
:key="emoji"
|
||||
class="_button"
|
||||
class="_button item"
|
||||
tabindex="0"
|
||||
@click="chosen(emoji, $event)"
|
||||
>
|
||||
<MkEmoji :emoji="emoji" :normal="true"/>
|
||||
<MkEmoji class="emoji" :emoji="emoji" :normal="true"/>
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<header class="_acrylic"><i class="far fa-clock fa-fw"></i> {{ i18n.ts.recentUsed }}</header>
|
||||
<div>
|
||||
<button v-for="emoji in recentlyUsedEmojis"
|
||||
<div class="body">
|
||||
<button
|
||||
v-for="emoji in recentlyUsedEmojis"
|
||||
:key="emoji"
|
||||
class="_button"
|
||||
class="_button item"
|
||||
@click="chosen(emoji, $event)"
|
||||
>
|
||||
<MkEmoji :emoji="emoji" :normal="true"/>
|
||||
<MkEmoji class="emoji" :emoji="emoji" :normal="true"/>
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
<div>
|
||||
<div v-once class="group">
|
||||
<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>
|
||||
<div v-once class="group">
|
||||
<header class="_acrylic">{{ i18n.ts.emoji }}</header>
|
||||
<XSection v-for="category in categories" :key="category" :emojis="emojilist.filter(e => e.category === category).map(e => e.char)" @chosen="chosen">{{ category }}</XSection>
|
||||
</div>
|
||||
|
|
@ -76,6 +80,7 @@
|
|||
<script lang="ts" setup>
|
||||
import { ref, computed, watch, onMounted } from 'vue';
|
||||
import * as Misskey from 'misskey-js';
|
||||
import XSection from './emoji-picker.section.vue';
|
||||
import { emojilist, UnicodeEmojiDef, unicodeEmojiCategories as categories } from '@/scripts/emojilist';
|
||||
import { getStaticImageUrl } from '@/scripts/get-static-image-url';
|
||||
import Ripple from '@/components/ripple.vue';
|
||||
|
|
@ -83,7 +88,6 @@ import * as os from '@/os';
|
|||
import { isTouchUsing } from '@/scripts/touch';
|
||||
import { deviceKind } from '@/scripts/device-kind';
|
||||
import { emojiCategories, instance } from '@/instance';
|
||||
import XSection from './emoji-picker.section.vue';
|
||||
import { i18n } from '@/i18n';
|
||||
import { defaultStore } from '@/store';
|
||||
|
||||
|
|
@ -266,7 +270,7 @@ watch(q, () => {
|
|||
function focus() {
|
||||
if (!['smartphone', 'tablet'].includes(deviceKind) && !isTouchUsing) {
|
||||
search.value?.focus({
|
||||
preventScroll: true
|
||||
preventScroll: true,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
|
@ -415,19 +419,16 @@ defineExpose({
|
|||
font-size: 15px;
|
||||
}
|
||||
|
||||
> div {
|
||||
> .body {
|
||||
display: grid;
|
||||
grid-template-columns: var(--columns);
|
||||
font-size: 30px;
|
||||
|
||||
> button {
|
||||
> .item {
|
||||
aspect-ratio: 1 / 1;
|
||||
width: auto;
|
||||
height: auto;
|
||||
min-width: 0;
|
||||
|
||||
> * {
|
||||
font-size: 30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -478,7 +479,7 @@ defineExpose({
|
|||
display: none;
|
||||
}
|
||||
|
||||
> div {
|
||||
> .group {
|
||||
&:not(.index) {
|
||||
padding: 4px 0 8px 0;
|
||||
border-top: solid 0.5px var(--divider);
|
||||
|
|
@ -513,16 +514,18 @@ defineExpose({
|
|||
}
|
||||
}
|
||||
|
||||
> div {
|
||||
> .body {
|
||||
position: relative;
|
||||
padding: $pad;
|
||||
|
||||
> button {
|
||||
> .item {
|
||||
position: relative;
|
||||
padding: 0;
|
||||
width: var(--eachSize);
|
||||
height: var(--eachSize);
|
||||
contain: strict;
|
||||
border-radius: 4px;
|
||||
font-size: 24px;
|
||||
|
||||
&:focus-visible {
|
||||
outline: solid 2px var(--focus);
|
||||
|
|
@ -538,8 +541,7 @@ defineExpose({
|
|||
box-shadow: inset 0 0.15em 0.3em rgba(27, 31, 35, 0.15);
|
||||
}
|
||||
|
||||
> * {
|
||||
font-size: 24px;
|
||||
> .emoji {
|
||||
height: 1.25em;
|
||||
vertical-align: -.25em;
|
||||
pointer-events: none;
|
||||
|
|
|
|||
|
|
@ -41,7 +41,7 @@ import { useInterval } from '@/scripts/use-interval';
|
|||
|
||||
const props = defineProps<{
|
||||
modelValue: string | number;
|
||||
type?: 'text' | 'number' | 'password' | 'email' | 'url' | 'date' | 'time';
|
||||
type?: 'text' | 'number' | 'password' | 'email' | 'url' | 'date' | 'time' | 'search';
|
||||
required?: boolean;
|
||||
readonly?: boolean;
|
||||
disabled?: boolean;
|
||||
|
|
@ -77,9 +77,9 @@ const inputEl = ref<HTMLElement>();
|
|||
const prefixEl = ref<HTMLElement>();
|
||||
const suffixEl = ref<HTMLElement>();
|
||||
const height =
|
||||
props.small ? 38 :
|
||||
props.large ? 42 :
|
||||
40;
|
||||
props.small ? 36 :
|
||||
props.large ? 40 :
|
||||
38;
|
||||
|
||||
const focus = () => inputEl.value.focus();
|
||||
const onInput = (ev: KeyboardEvent) => {
|
||||
|
|
|
|||
|
|
@ -189,7 +189,7 @@ const onMousedown = (ev: MouseEvent | TouchEvent) => {
|
|||
height: 3px;
|
||||
background: rgba(0, 0, 0, 0.1);
|
||||
border-radius: 999px;
|
||||
overflow: hidden; overflow: clip;
|
||||
overflow: clip;
|
||||
|
||||
> .highlight {
|
||||
position: absolute;
|
||||
|
|
@ -198,7 +198,7 @@ const onMousedown = (ev: MouseEvent | TouchEvent) => {
|
|||
height: 100%;
|
||||
background: var(--accent);
|
||||
opacity: 0.5;
|
||||
transition: width 0.2s cubic-bezier(0,0,0,1);
|
||||
//transition: width 0.2s cubic-bezier(0,0,0,1);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -231,7 +231,7 @@ const onMousedown = (ev: MouseEvent | TouchEvent) => {
|
|||
cursor: grab;
|
||||
background: var(--accent);
|
||||
border-radius: 999px;
|
||||
transition: left 0.2s cubic-bezier(0,0,0,1);
|
||||
//transition: left 0.2s cubic-bezier(0,0,0,1);
|
||||
|
||||
&:hover {
|
||||
background: var(--accentLighten);
|
||||
|
|
|
|||
|
|
@ -63,9 +63,9 @@ const prefixEl = ref(null);
|
|||
const suffixEl = ref(null);
|
||||
const container = ref(null);
|
||||
const height =
|
||||
props.small ? 38 :
|
||||
props.large ? 42 :
|
||||
40;
|
||||
props.small ? 36 :
|
||||
props.large ? 40 :
|
||||
38;
|
||||
|
||||
const focus = () => inputEl.value.focus();
|
||||
const onInput = (ev) => {
|
||||
|
|
|
|||
|
|
@ -50,7 +50,7 @@ function onContextmenu(ev) {
|
|||
icon: 'fas fa-expand-alt',
|
||||
text: i18n.ts.showInPage,
|
||||
action: () => {
|
||||
router.push(props.to);
|
||||
router.push(props.to, 'forcePage');
|
||||
},
|
||||
}, null, {
|
||||
icon: 'fas fa-external-link-alt',
|
||||
|
|
@ -79,7 +79,7 @@ function popout() {
|
|||
popout_(props.to);
|
||||
}
|
||||
|
||||
function nav() {
|
||||
function nav(ev: MouseEvent) {
|
||||
if (props.behavior === 'browser') {
|
||||
location.href = props.to;
|
||||
return;
|
||||
|
|
@ -93,6 +93,10 @@ function nav() {
|
|||
}
|
||||
}
|
||||
|
||||
router.push(props.to);
|
||||
if (ev.shiftKey) {
|
||||
return openWindow();
|
||||
}
|
||||
|
||||
router.push(props.to, ev.ctrlKey ? 'forcePage' : null);
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
<div v-if="!showMenu" class="main" :class="ad.place">
|
||||
<a :href="ad.url" target="_blank">
|
||||
<img :src="ad.imageUrl">
|
||||
<button class="_button menu" @click.prevent.stop="toggleMenu"><span class="fas fa-info-circle"></span></button>
|
||||
<button class="_button menu" @click.prevent.stop="toggleMenu"><span class="fas fa-info-circle info-circle"></span></button>
|
||||
</a>
|
||||
</div>
|
||||
<div v-else class="menu">
|
||||
|
|
@ -135,13 +135,19 @@ export default defineComponent({
|
|||
display: block;
|
||||
object-fit: contain;
|
||||
margin: auto;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
> .menu {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
background: var(--panel);
|
||||
top: 1px;
|
||||
right: 1px;
|
||||
|
||||
> .info-circle {
|
||||
border: 3px solid var(--panel);
|
||||
border-radius: 50%;
|
||||
background: var(--panel);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,68 +1,41 @@
|
|||
char2filePath<template>
|
||||
<template>
|
||||
<img v-if="customEmoji" class="mk-emoji custom" :class="{ normal, noStyle }" :src="url" :alt="alt" :title="alt" decoding="async"/>
|
||||
<img v-else-if="char && !useOsNativeEmojis" class="mk-emoji" :src="url" :alt="alt" :title="alt" decoding="async"/>
|
||||
<span v-else-if="char && useOsNativeEmojis">{{ char }}</span>
|
||||
<span v-else>{{ emoji }}</span>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { computed, defineComponent, ref, watch } from 'vue';
|
||||
<script lang="ts" setup>
|
||||
import { computed, ref, watch } from 'vue';
|
||||
import { CustomEmoji } from 'misskey-js/built/entities';
|
||||
import { getStaticImageUrl } from '@/scripts/get-static-image-url';
|
||||
import { char2filePath } from '@/scripts/twemoji-base';
|
||||
import { defaultStore } from '@/store';
|
||||
import { instance } from '@/instance';
|
||||
|
||||
export default defineComponent({
|
||||
props: {
|
||||
emoji: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
normal: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
default: false
|
||||
},
|
||||
noStyle: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
default: false
|
||||
},
|
||||
customEmojis: {
|
||||
required: false
|
||||
},
|
||||
isReaction: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
},
|
||||
const props = defineProps<{
|
||||
emoji: string;
|
||||
normal?: boolean;
|
||||
noStyle?: boolean;
|
||||
customEmojis?: CustomEmoji[];
|
||||
isReaction?: boolean;
|
||||
}>();
|
||||
|
||||
setup(props) {
|
||||
const isCustom = computed(() => props.emoji.startsWith(':'));
|
||||
const char = computed(() => isCustom.value ? null : props.emoji);
|
||||
const useOsNativeEmojis = computed(() => defaultStore.state.useOsNativeEmojis && !props.isReaction);
|
||||
const ce = computed(() => props.customEmojis || instance.emojis || []);
|
||||
const customEmoji = computed(() => isCustom.value ? ce.value.find(x => x.name === props.emoji.substr(1, props.emoji.length - 2)) : null);
|
||||
const url = computed(() => {
|
||||
if (char.value) {
|
||||
return char2filePath(char.value);
|
||||
} else {
|
||||
return defaultStore.state.disableShowingAnimatedImages
|
||||
? getStaticImageUrl(customEmoji.value.url)
|
||||
: customEmoji.value.url;
|
||||
}
|
||||
});
|
||||
const alt = computed(() => customEmoji.value ? `:${customEmoji.value.name}:` : char.value);
|
||||
|
||||
return {
|
||||
url,
|
||||
char,
|
||||
alt,
|
||||
customEmoji,
|
||||
useOsNativeEmojis,
|
||||
};
|
||||
},
|
||||
const isCustom = computed(() => props.emoji.startsWith(':'));
|
||||
const char = computed(() => isCustom.value ? null : props.emoji);
|
||||
const useOsNativeEmojis = computed(() => defaultStore.state.useOsNativeEmojis && !props.isReaction);
|
||||
const ce = computed(() => props.customEmojis ?? instance.emojis ?? []);
|
||||
const customEmoji = computed(() => isCustom.value ? ce.value.find(x => x.name === props.emoji.substr(1, props.emoji.length - 2)) : null);
|
||||
const url = computed(() => {
|
||||
if (char.value) {
|
||||
return char2filePath(char.value);
|
||||
} else {
|
||||
return defaultStore.state.disableShowingAnimatedImages
|
||||
? getStaticImageUrl(customEmoji.value.url)
|
||||
: customEmoji.value.url;
|
||||
}
|
||||
});
|
||||
const alt = computed(() => customEmoji.value ? `:${customEmoji.value.name}:` : char.value);
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
|
|
|||
|
|
@ -16,9 +16,7 @@
|
|||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { useCssModule } from 'vue';
|
||||
|
||||
useCssModule();
|
||||
import { } from 'vue';
|
||||
|
||||
const props = withDefaults(defineProps<{
|
||||
inline?: boolean;
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@
|
|||
</div>
|
||||
</div>
|
||||
<div v-if="!narrow || hideTitle" class="tabs">
|
||||
<button v-for="tab in tabs" :ref="(el) => tabRefs[tab.key] = el" v-tooltip="tab.title" class="tab _button" :class="{ active: tab.key != null && tab.key === props.tab }" @mousedown="(ev) => onTabMousedown(tab, ev)" @click="(ev) => onTabClick(tab, ev)">
|
||||
<button v-for="tab in tabs" :ref="(el) => tabRefs[tab.key] = el" v-tooltip.noDelay="tab.title" class="tab _button" :class="{ active: tab.key != null && tab.key === props.tab }" @mousedown="(ev) => onTabMousedown(tab, ev)" @click="(ev) => onTabClick(tab, ev)">
|
||||
<i v-if="tab.icon" class="icon" :class="tab.icon"></i>
|
||||
<span v-if="!tab.iconOnly" class="title">{{ tab.title }}</span>
|
||||
</button>
|
||||
|
|
@ -27,7 +27,7 @@
|
|||
</template>
|
||||
<div class="buttons right">
|
||||
<template v-for="action in actions">
|
||||
<button v-tooltip="action.text" class="_button button" :class="{ highlighted: action.highlighted }" @click.stop="action.handler" @touchstart="preventDrag"><i :class="action.icon"></i></button>
|
||||
<button v-tooltip.noDelay="action.text" class="_button button" :class="{ highlighted: action.highlighted }" @click.stop="action.handler" @touchstart="preventDrag"><i :class="action.icon"></i></button>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -178,6 +178,8 @@ onUnmounted(() => {
|
|||
-webkit-backdrop-filter: var(--blur, blur(15px));
|
||||
backdrop-filter: var(--blur, blur(15px));
|
||||
border-bottom: solid 0.5px var(--divider);
|
||||
contain: strict;
|
||||
height: var(--height);
|
||||
|
||||
&.thin {
|
||||
--height: 45px;
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
<template>
|
||||
<component :is="self ? 'MkA' : 'a'" ref="el" class="ieqqeuvs _link" :[attr]="self ? url.substr(local.length) : url" :rel="rel" :target="target"
|
||||
<component
|
||||
:is="self ? 'MkA' : 'a'" ref="el" class="ieqqeuvs _link" :[attr]="self ? url.substr(local.length) : url" :rel="rel" :target="target"
|
||||
@contextmenu.stop="() => {}"
|
||||
>
|
||||
<template v-if="!self">
|
||||
|
|
@ -23,14 +24,7 @@ import { toUnicode as decodePunycode } from 'punycode/';
|
|||
import { url as local } from '@/config';
|
||||
import * as os from '@/os';
|
||||
import { useTooltip } from '@/scripts/use-tooltip';
|
||||
|
||||
function safeURIDecode(str: string) {
|
||||
try {
|
||||
return decodeURIComponent(str);
|
||||
} catch {
|
||||
return str;
|
||||
}
|
||||
}
|
||||
import { safeURIDecode } from '@/scripts/safe-uri-decode';
|
||||
|
||||
export default defineComponent({
|
||||
props: {
|
||||
|
|
@ -42,7 +36,7 @@ export default defineComponent({
|
|||
type: String,
|
||||
required: false,
|
||||
default: null,
|
||||
}
|
||||
},
|
||||
},
|
||||
setup(props) {
|
||||
const self = props.url.startsWith(local);
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@ import { decode } from 'blurhash';
|
|||
|
||||
const props = withDefaults(defineProps<{
|
||||
src?: string | null;
|
||||
hash: string;
|
||||
hash?: string;
|
||||
alt?: string;
|
||||
title?: string | null;
|
||||
size?: number;
|
||||
|
|
|
|||
|
|
@ -154,7 +154,7 @@ function createDoughnut(chartEl, tooltip, data) {
|
|||
}
|
||||
|
||||
onMounted(() => {
|
||||
os.apiGet('federation/stats', { limit: 15 }).then(fedStats => {
|
||||
os.apiGet('federation/stats', { limit: 30 }).then(fedStats => {
|
||||
createDoughnut(subDoughnutEl, externalTooltipHandler1, fedStats.topSubInstances.map(x => ({
|
||||
name: x.host,
|
||||
color: x.themeColor,
|
||||
|
|
|
|||
|
|
@ -8,6 +8,7 @@
|
|||
<script lang="ts" setup>
|
||||
import { } from 'vue';
|
||||
import { instanceName } from '@/config';
|
||||
import { instance as Instance } from '@/instance';
|
||||
|
||||
const props = defineProps<{
|
||||
instance?: {
|
||||
|
|
@ -19,7 +20,7 @@ const props = defineProps<{
|
|||
|
||||
// if no instance data is given, this is for the local instance
|
||||
const instance = props.instance ?? {
|
||||
faviconUrl: '/favicon.ico',
|
||||
faviconUrl: Instance.iconUrl || Instance.faviconUrl || '/favicon.ico',
|
||||
name: instanceName,
|
||||
themeColor: (document.querySelector('meta[name="theme-color-orig"]') as HTMLMetaElement)?.content
|
||||
};
|
||||
|
|
|
|||
|
|
@ -15,20 +15,6 @@
|
|||
</MkA>
|
||||
</template>
|
||||
</div>
|
||||
<div class="sub">
|
||||
<button v-click-anime class="_button" @click="help">
|
||||
<i class="fas fa-question-circle icon"></i>
|
||||
<div class="text">{{ $ts.help }}</div>
|
||||
</button>
|
||||
<MkA v-click-anime to="/about" @click.passive="close()">
|
||||
<i class="fas fa-info-circle icon"></i>
|
||||
<div class="text">{{ $ts.instanceInfo }}</div>
|
||||
</MkA>
|
||||
<MkA v-click-anime to="/about-misskey" @click.passive="close()">
|
||||
<img src="/static-assets/favicon.png" class="icon"/>
|
||||
<div class="text">{{ $ts.aboutMisskey }}</div>
|
||||
</MkA>
|
||||
</div>
|
||||
</div>
|
||||
</MkModal>
|
||||
</template>
|
||||
|
|
@ -36,7 +22,7 @@
|
|||
<script lang="ts" setup>
|
||||
import { } from 'vue';
|
||||
import MkModal from '@/components/ui/modal.vue';
|
||||
import { menuDef } from '@/menu';
|
||||
import { navbarItemDef } from '@/navbar';
|
||||
import { instanceName } from '@/config';
|
||||
import { defaultStore } from '@/store';
|
||||
import { i18n } from '@/i18n';
|
||||
|
|
@ -62,7 +48,7 @@ const modal = $ref<InstanceType<typeof MkModal>>();
|
|||
|
||||
const menu = defaultStore.state.menu;
|
||||
|
||||
const items = Object.keys(menuDef).filter(k => !menu.includes(k)).map(k => menuDef[k]).filter(def => def.show == null ? true : def.show).map(def => ({
|
||||
const items = Object.keys(navbarItemDef).filter(k => !menu.includes(k)).map(k => navbarItemDef[k]).filter(def => def.show == null ? true : def.show).map(def => ({
|
||||
type: def.to ? 'link' : 'button',
|
||||
text: i18n.ts[def.title],
|
||||
icon: def.icon,
|
||||
|
|
@ -74,28 +60,6 @@ const items = Object.keys(menuDef).filter(k => !menu.includes(k)).map(k => menuD
|
|||
function close() {
|
||||
modal.close();
|
||||
}
|
||||
|
||||
function help(ev: MouseEvent) {
|
||||
os.popupMenu([{
|
||||
type: 'link',
|
||||
to: '/mfm-cheat-sheet',
|
||||
text: i18n.ts._mfm.cheatSheet,
|
||||
icon: 'fas fa-code',
|
||||
}, {
|
||||
type: 'link',
|
||||
to: '/scratchpad',
|
||||
text: i18n.ts.scratchpad,
|
||||
icon: 'fas fa-terminal',
|
||||
}, null, {
|
||||
text: i18n.ts.document,
|
||||
icon: 'fas fa-question-circle',
|
||||
action: () => {
|
||||
window.open('https://misskey-hub.net/help.html', '_blank');
|
||||
},
|
||||
}], ev.currentTarget ?? ev.target);
|
||||
|
||||
close();
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
|
|
|||
|
|
@ -76,11 +76,17 @@ export default {
|
|||
|
||||
<style lang="scss" module>
|
||||
.wrap {
|
||||
overflow: hidden; overflow: clip;
|
||||
overflow: clip;
|
||||
animation-play-state: running;
|
||||
|
||||
&:hover {
|
||||
animation-play-state: paused;
|
||||
}
|
||||
}
|
||||
.content {
|
||||
display: inline-block;
|
||||
white-space: nowrap;
|
||||
animation-play-state: inherit;
|
||||
}
|
||||
.text {
|
||||
display: inline-block;
|
||||
|
|
@ -88,6 +94,7 @@ export default {
|
|||
animation-timing-function: linear;
|
||||
animation-iteration-count: infinite;
|
||||
animation-duration: inherit;
|
||||
animation-play-state: inherit;
|
||||
}
|
||||
.paused .text {
|
||||
animation-play-state: paused;
|
||||
|
|
|
|||
|
|
@ -2,9 +2,9 @@
|
|||
<div v-if="hide" class="qjewsnkg" @click="hide = false">
|
||||
<ImgWithBlurhash class="bg" :hash="image.blurhash" :title="image.comment" :alt="image.comment"/>
|
||||
<div class="text">
|
||||
<div>
|
||||
<b><i class="fas fa-exclamation-triangle"></i> {{ $ts.sensitive }}</b>
|
||||
<span>{{ $ts.clickToShow }}</span>
|
||||
<div class="wrapper">
|
||||
<b style="display: block;"><i class="fas fa-exclamation-triangle"></i> {{ $ts.sensitive }}</b>
|
||||
<span style="display: block;">{{ $ts.clickToShow }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -37,8 +37,8 @@ let hide = $ref(true);
|
|||
const url = (props.raw || defaultStore.state.loadRawImages)
|
||||
? props.image.url
|
||||
: defaultStore.state.disableShowingAnimatedImages
|
||||
? getStaticImageUrl(props.image.thumbnailUrl)
|
||||
: props.image.thumbnailUrl;
|
||||
? getStaticImageUrl(props.image.thumbnailUrl)
|
||||
: props.image.thumbnailUrl;
|
||||
|
||||
// Plugin:register_note_view_interruptor を使って書き換えられる可能性があるためwatchする
|
||||
watch(() => props.image, () => {
|
||||
|
|
@ -68,15 +68,11 @@ watch(() => props.image, () => {
|
|||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
> div {
|
||||
> .wrapper {
|
||||
display: table-cell;
|
||||
text-align: center;
|
||||
font-size: 0.8em;
|
||||
color: #fff;
|
||||
|
||||
> * {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,22 +1,22 @@
|
|||
<template>
|
||||
<MkA v-if="url.startsWith('/')" v-user-preview="canonical" :class="[$style.root, { isMe }]" :to="url" :style="{ background: bgCss }">
|
||||
<img :class="$style.icon" :src="`/avatar/@${username}@${host}`" alt="">
|
||||
<MkA v-if="url.startsWith('/')" v-user-preview="canonical" class="akbvjaqn" :class="{ isMe }" :to="url" :style="{ background: bgCss }">
|
||||
<img class="icon" :src="`/avatar/@${username}@${host}`" alt="">
|
||||
<span class="main">
|
||||
<span class="username">@{{ username }}</span>
|
||||
<span v-if="(host != localHost) || $store.state.showFullAcct" :class="$style.mainHost">@{{ toUnicode(host) }}</span>
|
||||
<span v-if="(host != localHost) || $store.state.showFullAcct" class="host">@{{ toUnicode(host) }}</span>
|
||||
</span>
|
||||
</MkA>
|
||||
<a v-else :class="$style.root" :href="url" target="_blank" rel="noopener" :style="{ background: bgCss }">
|
||||
<a v-else class="akbvjaqn" :href="url" target="_blank" rel="noopener" :style="{ background: bgCss }">
|
||||
<span class="main">
|
||||
<span class="username">@{{ username }}</span>
|
||||
<span :class="$style.mainHost">@{{ toUnicode(host) }}</span>
|
||||
<span class="host">@{{ toUnicode(host) }}</span>
|
||||
</span>
|
||||
</a>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { toUnicode } from 'punycode';
|
||||
import { useCssModule } from 'vue';
|
||||
import { } from 'vue';
|
||||
import tinycolor from 'tinycolor2';
|
||||
import { host as localHost } from '@/config';
|
||||
import { $i } from '@/account';
|
||||
|
|
@ -37,12 +37,10 @@ const isMe = $i && (
|
|||
const bg = tinycolor(getComputedStyle(document.documentElement).getPropertyValue(isMe ? '--mentionMe' : '--mention'));
|
||||
bg.setAlpha(0.1);
|
||||
const bgCss = bg.toRgbString();
|
||||
|
||||
useCssModule();
|
||||
</script>
|
||||
|
||||
<style lang="scss" module>
|
||||
.root {
|
||||
<style lang="scss" scoped>
|
||||
.akbvjaqn {
|
||||
display: inline-block;
|
||||
padding: 4px 8px 4px 4px;
|
||||
border-radius: 999px;
|
||||
|
|
@ -51,18 +49,18 @@ useCssModule();
|
|||
&.isMe {
|
||||
color: var(--mentionMe);
|
||||
}
|
||||
}
|
||||
|
||||
.icon {
|
||||
width: 1.5em;
|
||||
height: 1.5em;
|
||||
object-fit: cover;
|
||||
margin: 0 0.2em 0 0;
|
||||
vertical-align: bottom;
|
||||
border-radius: 100%;
|
||||
}
|
||||
> .icon {
|
||||
width: 1.5em;
|
||||
height: 1.5em;
|
||||
object-fit: cover;
|
||||
margin: 0 0.2em 0 0;
|
||||
vertical-align: bottom;
|
||||
border-radius: 100%;
|
||||
}
|
||||
|
||||
.mainHost {
|
||||
opacity: 0.5;
|
||||
> .main > .host {
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -47,7 +47,7 @@ export default defineComponent({
|
|||
render() {
|
||||
if (this.text == null || this.text === '') return;
|
||||
|
||||
const ast = (this.plain ? mfm.parsePlain : mfm.parse)(this.text, { fnNameList: MFM_TAGS });
|
||||
const ast = (this.plain ? mfm.parseSimple : mfm.parse)(this.text, { fnNameList: MFM_TAGS });
|
||||
|
||||
const validTime = (t: string | null | undefined) => {
|
||||
if (t == null) return null;
|
||||
|
|
@ -312,6 +312,10 @@ export default defineComponent({
|
|||
})];
|
||||
}
|
||||
|
||||
case 'plain': {
|
||||
return [h('span', genEl(token.children))];
|
||||
}
|
||||
|
||||
default: {
|
||||
console.error('unrecognized ast type:', token.type);
|
||||
|
||||
|
|
|
|||
|
|
@ -26,12 +26,7 @@
|
|||
<i v-if="isMyRenote" class="fas fa-ellipsis-h dropdownIcon"></i>
|
||||
<MkTime :time="note.createdAt"/>
|
||||
</button>
|
||||
<span v-if="note.visibility !== 'public'" class="visibility">
|
||||
<i v-if="note.visibility === 'home'" class="fas fa-home"></i>
|
||||
<i v-else-if="note.visibility === 'followers'" class="fas fa-unlock"></i>
|
||||
<i v-else-if="note.visibility === 'specified'" class="fas fa-envelope"></i>
|
||||
</span>
|
||||
<span v-if="note.localOnly" class="localOnly"><i class="fas fa-biohazard"></i></span>
|
||||
<MkVisibility :note="note"/>
|
||||
</div>
|
||||
</div>
|
||||
<article class="article" @contextmenu.stop="onContextmenu">
|
||||
|
|
@ -43,12 +38,9 @@
|
|||
<MkUserName :user="appearNote.user"/>
|
||||
</MkA>
|
||||
<span v-if="appearNote.user.isBot" class="is-bot">bot</span>
|
||||
<span v-if="appearNote.visibility !== 'public'" class="visibility">
|
||||
<i v-if="appearNote.visibility === 'home'" class="fas fa-home"></i>
|
||||
<i v-else-if="appearNote.visibility === 'followers'" class="fas fa-unlock"></i>
|
||||
<i v-else-if="appearNote.visibility === 'specified'" class="fas fa-envelope"></i>
|
||||
</span>
|
||||
<span v-if="appearNote.localOnly" class="localOnly"><i class="fas fa-biohazard"></i></span>
|
||||
<div class="info">
|
||||
<MkVisibility :note="appearNote"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="username"><MkAcct :user="appearNote.user"/></div>
|
||||
<MkInstanceTicker v-if="showTicker" class="ticker" :instance="appearNote.user.instance"/>
|
||||
|
|
@ -134,6 +126,7 @@ import XPoll from './poll.vue';
|
|||
import XRenoteButton from './renote-button.vue';
|
||||
import MkUrlPreview from '@/components/url-preview.vue';
|
||||
import MkInstanceTicker from '@/components/instance-ticker.vue';
|
||||
import MkVisibility from '@/components/visibility.vue';
|
||||
import { pleaseLogin } from '@/scripts/please-login';
|
||||
import { checkWordMute } from '@/scripts/check-word-mute';
|
||||
import { userPage } from '@/filters/user';
|
||||
|
|
@ -388,14 +381,6 @@ if (appearNote.replyId) {
|
|||
margin-right: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
> .visibility {
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
> .localOnly {
|
||||
margin-left: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -405,7 +390,7 @@ if (appearNote.replyId) {
|
|||
|
||||
> .article {
|
||||
padding: 32px;
|
||||
font-size: 1.1em;
|
||||
font-size: 1.2em;
|
||||
|
||||
> .header {
|
||||
display: flex;
|
||||
|
|
@ -441,6 +426,10 @@ if (appearNote.replyId) {
|
|||
border: solid 0.5px var(--divider);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
> .info {
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -9,12 +9,7 @@
|
|||
<MkA class="created-at" :to="notePage(note)">
|
||||
<MkTime :time="note.createdAt"/>
|
||||
</MkA>
|
||||
<span v-if="note.visibility !== 'public'" class="visibility">
|
||||
<i v-if="note.visibility === 'home'" class="fas fa-home"></i>
|
||||
<i v-else-if="note.visibility === 'followers'" class="fas fa-unlock"></i>
|
||||
<i v-else-if="note.visibility === 'specified'" class="fas fa-envelope"></i>
|
||||
</span>
|
||||
<span v-if="note.localOnly" class="localOnly"><i class="fas fa-biohazard"></i></span>
|
||||
<MkVisibility :note="note"/>
|
||||
</div>
|
||||
</header>
|
||||
</template>
|
||||
|
|
@ -22,6 +17,7 @@
|
|||
<script lang="ts" setup>
|
||||
import { } from 'vue';
|
||||
import * as misskey from 'misskey-js';
|
||||
import MkVisibility from '@/components/visibility.vue';
|
||||
import { notePage } from '@/filters/note';
|
||||
import { userPage } from '@/filters/user';
|
||||
|
||||
|
|
@ -74,14 +70,6 @@ defineProps<{
|
|||
flex-shrink: 0;
|
||||
margin-left: auto;
|
||||
font-size: 0.9em;
|
||||
|
||||
> .visibility {
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
> .localOnly {
|
||||
margin-left: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -27,7 +27,7 @@ const props = defineProps<{
|
|||
display: flex;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
overflow: hidden; overflow: clip;
|
||||
overflow: clip;
|
||||
font-size: 0.95em;
|
||||
|
||||
&.min-width_350px {
|
||||
|
|
|
|||
|
|
@ -36,7 +36,7 @@ const showContent = $ref(false);
|
|||
display: flex;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
overflow: hidden; overflow: clip;
|
||||
overflow: clip;
|
||||
font-size: 0.95em;
|
||||
|
||||
&.min-width_350px {
|
||||
|
|
|
|||
|
|
@ -28,12 +28,7 @@
|
|||
<i v-if="isMyRenote" class="fas fa-ellipsis-h dropdownIcon"></i>
|
||||
<MkTime :time="note.createdAt"/>
|
||||
</button>
|
||||
<span v-if="note.visibility !== 'public'" class="visibility">
|
||||
<i v-if="note.visibility === 'home'" class="fas fa-home"></i>
|
||||
<i v-else-if="note.visibility === 'followers'" class="fas fa-unlock"></i>
|
||||
<i v-else-if="note.visibility === 'specified'" class="fas fa-envelope"></i>
|
||||
</span>
|
||||
<span v-if="note.localOnly" class="localOnly"><i class="fas fa-biohazard"></i></span>
|
||||
<MkVisibility :note="note"/>
|
||||
</div>
|
||||
</div>
|
||||
<article class="article" @contextmenu.stop="onContextmenu">
|
||||
|
|
@ -118,6 +113,7 @@ import XPoll from './poll.vue';
|
|||
import XRenoteButton from './renote-button.vue';
|
||||
import MkUrlPreview from '@/components/url-preview.vue';
|
||||
import MkInstanceTicker from '@/components/instance-ticker.vue';
|
||||
import MkVisibility from '@/components/visibility.vue';
|
||||
import { pleaseLogin } from '@/scripts/please-login';
|
||||
import { focusPrev, focusNext } from '@/scripts/focus';
|
||||
import { checkWordMute } from '@/scripts/check-word-mute';
|
||||
|
|
@ -297,7 +293,7 @@ function readPromo() {
|
|||
position: relative;
|
||||
transition: box-shadow 0.1s ease;
|
||||
font-size: 1.05em;
|
||||
overflow: hidden; overflow: clip;
|
||||
overflow: clip;
|
||||
contain: content;
|
||||
|
||||
// これらの指定はパフォーマンス向上には有効だが、ノートの高さは一定でないため、
|
||||
|
|
@ -406,14 +402,6 @@ function readPromo() {
|
|||
margin-right: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
> .visibility {
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
> .localOnly {
|
||||
margin-left: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -566,6 +554,13 @@ function readPromo() {
|
|||
|
||||
&.max-width_500px {
|
||||
font-size: 0.9em;
|
||||
|
||||
> .article {
|
||||
> .avatar {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.max-width_450px {
|
||||
|
|
@ -582,8 +577,8 @@ function readPromo() {
|
|||
|
||||
> .avatar {
|
||||
margin: 0 10px 8px 0;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
width: 46px;
|
||||
height: 46px;
|
||||
top: calc(14px + var(--stickyTop, 0px));
|
||||
}
|
||||
}
|
||||
|
|
@ -604,8 +599,6 @@ function readPromo() {
|
|||
}
|
||||
|
||||
&.max-width_300px {
|
||||
font-size: 0.825em;
|
||||
|
||||
> .article {
|
||||
> .avatar {
|
||||
width: 44px;
|
||||
|
|
|
|||
|
|
@ -177,13 +177,7 @@ useTooltip(reactionRef, (showing) => {
|
|||
|
||||
&.max-width_500px {
|
||||
padding: 12px;
|
||||
font-size: 0.8em;
|
||||
}
|
||||
|
||||
&:after {
|
||||
content: "";
|
||||
display: block;
|
||||
clear: both;
|
||||
font-size: 0.85em;
|
||||
}
|
||||
|
||||
> .head {
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<MkA :to="`/@${page.user.username}/pages/${page.name}`" class="vhpxefrj _block _isolated" tabindex="-1">
|
||||
<MkA :to="`/@${page.user.username}/pages/${page.name}`" class="vhpxefrj _block" tabindex="-1">
|
||||
<div v-if="page.eyeCatchingImage" class="thumbnail" :style="`background-image: url('${page.eyeCatchingImage.thumbnailUrl}')`"></div>
|
||||
<article>
|
||||
<header>
|
||||
|
|
@ -23,12 +23,12 @@ export default defineComponent({
|
|||
props: {
|
||||
page: {
|
||||
type: Object,
|
||||
required: true
|
||||
required: true,
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
userName
|
||||
}
|
||||
userName,
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
|
|
|
|||
|
|
@ -122,7 +122,7 @@ function close() {
|
|||
}
|
||||
|
||||
function expand() {
|
||||
mainRouter.push(router.getCurrentPath());
|
||||
mainRouter.push(router.getCurrentPath(), 'forcePage');
|
||||
windowEl.close();
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
<div v-show="files.length != 0" class="skeikyzd">
|
||||
<XDraggable v-model="_files" class="files" item-key="id" animation="150" delay="100" delay-on-touch-only="true">
|
||||
<template #item="{element}">
|
||||
<div @click="showFileMenu(element, $event)" @contextmenu.prevent="showFileMenu(element, $event)">
|
||||
<div class="file" @click="showFileMenu(element, $event)" @contextmenu.prevent="showFileMenu(element, $event)">
|
||||
<MkDriveFileThumbnail :data-id="element.id" class="thumbnail" :file="element" fit="cover"/>
|
||||
<div v-if="element.isSensitive" class="sensitive">
|
||||
<i class="fas fa-exclamation-triangle icon"></i>
|
||||
|
|
@ -22,18 +22,18 @@ import * as os from '@/os';
|
|||
export default defineComponent({
|
||||
components: {
|
||||
XDraggable: defineAsyncComponent(() => import('vuedraggable').then(x => x.default)),
|
||||
MkDriveFileThumbnail
|
||||
MkDriveFileThumbnail,
|
||||
},
|
||||
|
||||
props: {
|
||||
files: {
|
||||
type: Array,
|
||||
required: true
|
||||
required: true,
|
||||
},
|
||||
detachMediaFn: {
|
||||
type: Function,
|
||||
required: false
|
||||
}
|
||||
required: false,
|
||||
},
|
||||
},
|
||||
|
||||
emits: ['updated', 'detach', 'changeSensitive', 'changeName'],
|
||||
|
|
@ -51,8 +51,8 @@ export default defineComponent({
|
|||
},
|
||||
set(value) {
|
||||
this.$emit('updated', value);
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
methods: {
|
||||
|
|
@ -66,7 +66,7 @@ export default defineComponent({
|
|||
toggleSensitive(file) {
|
||||
os.api('drive/files/update', {
|
||||
fileId: file.id,
|
||||
isSensitive: !file.isSensitive
|
||||
isSensitive: !file.isSensitive,
|
||||
}).then(() => {
|
||||
this.$emit('changeSensitive', file, !file.isSensitive);
|
||||
});
|
||||
|
|
@ -75,12 +75,12 @@ export default defineComponent({
|
|||
const { canceled, result } = await os.inputText({
|
||||
title: this.$ts.enterFileName,
|
||||
default: file.name,
|
||||
allowEmpty: false
|
||||
allowEmpty: false,
|
||||
});
|
||||
if (canceled) return;
|
||||
os.api('drive/files/update', {
|
||||
fileId: file.id,
|
||||
name: result
|
||||
name: result,
|
||||
}).then(() => {
|
||||
this.$emit('changeName', file, result);
|
||||
file.name = result;
|
||||
|
|
@ -88,13 +88,13 @@ export default defineComponent({
|
|||
},
|
||||
|
||||
async describe(file) {
|
||||
os.popup(defineAsyncComponent(() => import("@/components/media-caption.vue")), {
|
||||
os.popup(defineAsyncComponent(() => import('@/components/media-caption.vue')), {
|
||||
title: this.$ts.describeFile,
|
||||
input: {
|
||||
placeholder: this.$ts.inputNewDescription,
|
||||
default: file.comment !== null ? file.comment : "",
|
||||
default: file.comment !== null ? file.comment : '',
|
||||
},
|
||||
image: file
|
||||
image: file,
|
||||
}, {
|
||||
done: result => {
|
||||
if (!result || result.canceled) return;
|
||||
|
|
@ -105,7 +105,7 @@ export default defineComponent({
|
|||
}).then(() => {
|
||||
file.comment = comment;
|
||||
});
|
||||
}
|
||||
},
|
||||
}, 'closed');
|
||||
},
|
||||
|
||||
|
|
@ -114,22 +114,22 @@ export default defineComponent({
|
|||
this.menu = os.popupMenu([{
|
||||
text: this.$ts.renameFile,
|
||||
icon: 'fas fa-i-cursor',
|
||||
action: () => { this.rename(file); }
|
||||
action: () => { this.rename(file); },
|
||||
}, {
|
||||
text: file.isSensitive ? this.$ts.unmarkAsSensitive : this.$ts.markAsSensitive,
|
||||
icon: file.isSensitive ? 'fas fa-eye-slash' : 'fas fa-eye',
|
||||
action: () => { this.toggleSensitive(file); }
|
||||
action: () => { this.toggleSensitive(file); },
|
||||
}, {
|
||||
text: this.$ts.describeFile,
|
||||
icon: 'fas fa-i-cursor',
|
||||
action: () => { this.describe(file); }
|
||||
action: () => { this.describe(file); },
|
||||
}, {
|
||||
text: this.$ts.attachCancel,
|
||||
icon: 'fas fa-times-circle',
|
||||
action: () => { this.detachMedia(file.id); }
|
||||
action: () => { this.detachMedia(file.id); },
|
||||
}], ev.currentTarget ?? ev.target).then(() => this.menu = null);
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
|
|
@ -142,7 +142,7 @@ export default defineComponent({
|
|||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
> div {
|
||||
> .file {
|
||||
position: relative;
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
<template>
|
||||
<div v-size="{ max: [310, 500] }" class="gafaadew"
|
||||
<div
|
||||
v-size="{ max: [310, 500] }" class="gafaadew"
|
||||
:class="{ modal, _popup: modal }"
|
||||
@dragover.stop="onDragover"
|
||||
@dragenter="onDragenter"
|
||||
|
|
@ -11,7 +12,7 @@
|
|||
<button v-click-anime v-tooltip="i18n.ts.switchAccount" class="account _button" @click="openAccountMenu">
|
||||
<MkAvatar :user="postAccount ?? $i" class="avatar"/>
|
||||
</button>
|
||||
<div>
|
||||
<div class="right">
|
||||
<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.ts.visibility" class="_button visibility" :disabled="channel != null" @click="setVisibility">
|
||||
|
|
@ -68,6 +69,8 @@ import * as misskey from 'misskey-js';
|
|||
import insertTextAtCursor from 'insert-text-at-cursor';
|
||||
import { length } from 'stringz';
|
||||
import { toASCII } from 'punycode/';
|
||||
import * as Acct from 'misskey-js/built/acct';
|
||||
import { throttle } from 'throttle-debounce';
|
||||
import XNoteSimple from './note-simple.vue';
|
||||
import XNotePreview from './note-preview.vue';
|
||||
import XPostFormAttaches from './post-form-attaches.vue';
|
||||
|
|
@ -75,14 +78,12 @@ import XPollEditor from './poll-editor.vue';
|
|||
import { host, url } from '@/config';
|
||||
import { erase, unique } from '@/scripts/array';
|
||||
import { extractMentions } from '@/scripts/extract-mentions';
|
||||
import * as Acct from 'misskey-js/built/acct';
|
||||
import { formatTimeString } from '@/scripts/format-time-string';
|
||||
import { Autocomplete } from '@/scripts/autocomplete';
|
||||
import * as os from '@/os';
|
||||
import { stream } from '@/stream';
|
||||
import { selectFiles } from '@/scripts/select-file';
|
||||
import { defaultStore, notePostInterruptors, postFormActions } from '@/store';
|
||||
import { throttle } from 'throttle-debounce';
|
||||
import MkInfo from '@/components/ui/info.vue';
|
||||
import { i18n } from '@/i18n';
|
||||
import { instance } from '@/instance';
|
||||
|
|
@ -181,7 +182,7 @@ const placeholder = $computed((): string => {
|
|||
i18n.ts._postForm._placeholders.c,
|
||||
i18n.ts._postForm._placeholders.d,
|
||||
i18n.ts._postForm._placeholders.e,
|
||||
i18n.ts._postForm._placeholders.f
|
||||
i18n.ts._postForm._placeholders.f,
|
||||
];
|
||||
return xs[Math.floor(Math.random() * xs.length)];
|
||||
}
|
||||
|
|
@ -238,10 +239,10 @@ if (props.reply && props.reply.text != null) {
|
|||
|
||||
for (const x of extractMentions(ast)) {
|
||||
const mention = x.host ?
|
||||
`@${x.username}@${toASCII(x.host)}` :
|
||||
(otherHost == null || otherHost === host) ?
|
||||
`@${x.username}` :
|
||||
`@${x.username}@${toASCII(otherHost)}`;
|
||||
`@${x.username}@${toASCII(x.host)}` :
|
||||
(otherHost == null || otherHost === host) ?
|
||||
`@${x.username}` :
|
||||
`@${x.username}@${toASCII(otherHost)}`;
|
||||
|
||||
// 自分は除外
|
||||
if ($i.username === x.username && (x.host == null || x.host === host)) continue;
|
||||
|
|
@ -263,7 +264,7 @@ if (props.reply && ['home', 'followers', 'specified'].includes(props.reply.visib
|
|||
visibility = props.reply.visibility;
|
||||
if (props.reply.visibility === 'specified') {
|
||||
os.api('users/show', {
|
||||
userIds: props.reply.visibleUserIds.filter(uid => uid !== $i.id && uid !== props.reply.userId)
|
||||
userIds: props.reply.visibleUserIds.filter(uid => uid !== $i.id && uid !== props.reply.userId),
|
||||
}).then(users => {
|
||||
users.forEach(pushVisibleUser);
|
||||
});
|
||||
|
|
@ -399,7 +400,7 @@ function setVisibility() {
|
|||
if (defaultStore.state.rememberNoteVisibility) {
|
||||
defaultStore.set('localOnly', localOnly);
|
||||
}
|
||||
}
|
||||
},
|
||||
}, 'closed');
|
||||
}
|
||||
|
||||
|
|
@ -522,8 +523,8 @@ function saveDraft() {
|
|||
visibility: visibility,
|
||||
localOnly: localOnly,
|
||||
files: files,
|
||||
poll: poll
|
||||
}
|
||||
poll: poll,
|
||||
},
|
||||
};
|
||||
|
||||
localStorage.setItem('drafts', JSON.stringify(draftData));
|
||||
|
|
@ -612,11 +613,11 @@ function showActions(ev) {
|
|||
text: action.title,
|
||||
action: () => {
|
||||
action.handler({
|
||||
text: text
|
||||
text: text,
|
||||
}, (key, value) => {
|
||||
if (key === 'text') { text = value; }
|
||||
});
|
||||
}
|
||||
},
|
||||
})), ev.currentTarget ?? ev.target);
|
||||
}
|
||||
|
||||
|
|
@ -726,7 +727,7 @@ onMounted(() => {
|
|||
}
|
||||
}
|
||||
|
||||
> div {
|
||||
> .right {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
|
|
@ -924,7 +925,7 @@ onMounted(() => {
|
|||
line-height: 50px;
|
||||
}
|
||||
|
||||
> div {
|
||||
> .right {
|
||||
> .text-count {
|
||||
line-height: 50px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -50,14 +50,14 @@ const emit = defineEmits<{
|
|||
}
|
||||
|
||||
> .name {
|
||||
font-size: 0.9em;
|
||||
font-size: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
> .users {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
font-size: 0.9em;
|
||||
font-size: 0.95em;
|
||||
border-left: solid 0.5px var(--divider);
|
||||
padding-left: 10px;
|
||||
margin-left: 10px;
|
||||
|
|
|
|||
|
|
@ -70,10 +70,11 @@ onMounted(() => {
|
|||
});
|
||||
|
||||
useTooltip(buttonRef, async (showing) => {
|
||||
const reactions = await os.api('notes/reactions', {
|
||||
const reactions = await os.apiGet('notes/reactions', {
|
||||
noteId: props.note.id,
|
||||
type: props.reaction,
|
||||
limit: 11,
|
||||
_cacheKey_: props.count,
|
||||
});
|
||||
|
||||
const users = reactions.map(x => x.user);
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div class="jmgmzlwq _block"><i class="fas fa-exclamation-triangle" style="margin-right: 8px;"></i>{{ $ts.remoteUserCaution }}<a :href="href" rel="nofollow noopener" target="_blank">{{ $ts.showOnRemote }}</a></div>
|
||||
<div class="jmgmzlwq _block"><i class="fas fa-exclamation-triangle" style="margin-right: 8px;"></i>{{ $ts.remoteUserCaution }}<a class="link" :href="href" rel="nofollow noopener" target="_blank">{{ $ts.showOnRemote }}</a></div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
|
|
@ -15,7 +15,7 @@ defineProps<{
|
|||
background: var(--infoWarnBg);
|
||||
color: var(--infoWarnFg);
|
||||
|
||||
> a {
|
||||
> .link {
|
||||
margin-left: 4px;
|
||||
color: var(--accent);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@
|
|||
|
||||
<script lang="ts">
|
||||
import { computed, defineComponent, ref } from 'vue';
|
||||
import XDetails from '@/components/renote.details.vue';
|
||||
import XDetails from '@/components/users-tooltip.vue';
|
||||
import { pleaseLogin } from '@/scripts/please-login';
|
||||
import * as os from '@/os';
|
||||
import { $i } from '@/account';
|
||||
|
|
|
|||
|
|
@ -1,255 +1,234 @@
|
|||
<template>
|
||||
<form class="qlvuhzng _formRoot" autocomplete="new-password" @submit.prevent="onSubmit">
|
||||
<template v-if="meta">
|
||||
<MkInput v-if="meta.disableRegistration" v-model="invitationCode" class="_formBlock" type="text" :spellcheck="false" required>
|
||||
<template #label>{{ $ts.invitationCode }}</template>
|
||||
<template #prefix><i class="fas fa-key"></i></template>
|
||||
</MkInput>
|
||||
<MkInput v-model="username" class="_formBlock" type="text" pattern="^[a-zA-Z0-9_]{1,20}$" :spellcheck="false" required data-cy-signup-username @update:modelValue="onChangeUsername">
|
||||
<template #label>{{ $ts.username }} <div v-tooltip:dialog="$ts.usernameInfo" class="_button _help"><i class="far fa-question-circle"></i></div></template>
|
||||
<template #prefix>@</template>
|
||||
<template #suffix>@{{ host }}</template>
|
||||
<template #caption>
|
||||
<span v-if="usernameState === 'wait'" style="color:#999"><i class="fas fa-spinner fa-pulse fa-fw"></i> {{ $ts.checking }}</span>
|
||||
<span v-else-if="usernameState === 'ok'" style="color: var(--success)"><i class="fas fa-check fa-fw"></i> {{ $ts.available }}</span>
|
||||
<span v-else-if="usernameState === 'unavailable'" style="color: var(--error)"><i class="fas fa-exclamation-triangle fa-fw"></i> {{ $ts.unavailable }}</span>
|
||||
<span v-else-if="usernameState === 'error'" style="color: var(--error)"><i class="fas fa-exclamation-triangle fa-fw"></i> {{ $ts.error }}</span>
|
||||
<span v-else-if="usernameState === 'invalid-format'" style="color: var(--error)"><i class="fas fa-exclamation-triangle fa-fw"></i> {{ $ts.usernameInvalidFormat }}</span>
|
||||
<span v-else-if="usernameState === 'min-range'" style="color: var(--error)"><i class="fas fa-exclamation-triangle fa-fw"></i> {{ $ts.tooShort }}</span>
|
||||
<span v-else-if="usernameState === 'max-range'" style="color: var(--error)"><i class="fas fa-exclamation-triangle fa-fw"></i> {{ $ts.tooLong }}</span>
|
||||
<MkInput v-if="instance.disableRegistration" v-model="invitationCode" class="_formBlock" type="text" :spellcheck="false" required>
|
||||
<template #label>{{ $ts.invitationCode }}</template>
|
||||
<template #prefix><i class="fas fa-key"></i></template>
|
||||
</MkInput>
|
||||
<MkInput v-model="username" class="_formBlock" type="text" pattern="^[a-zA-Z0-9_]{1,20}$" :spellcheck="false" required data-cy-signup-username @update:modelValue="onChangeUsername">
|
||||
<template #label>{{ $ts.username }} <div v-tooltip:dialog="$ts.usernameInfo" class="_button _help"><i class="far fa-question-circle"></i></div></template>
|
||||
<template #prefix>@</template>
|
||||
<template #suffix>@{{ host }}</template>
|
||||
<template #caption>
|
||||
<span v-if="usernameState === 'wait'" style="color:#999"><i class="fas fa-spinner fa-pulse fa-fw"></i> {{ $ts.checking }}</span>
|
||||
<span v-else-if="usernameState === 'ok'" style="color: var(--success)"><i class="fas fa-check fa-fw"></i> {{ $ts.available }}</span>
|
||||
<span v-else-if="usernameState === 'unavailable'" style="color: var(--error)"><i class="fas fa-exclamation-triangle fa-fw"></i> {{ $ts.unavailable }}</span>
|
||||
<span v-else-if="usernameState === 'error'" style="color: var(--error)"><i class="fas fa-exclamation-triangle fa-fw"></i> {{ $ts.error }}</span>
|
||||
<span v-else-if="usernameState === 'invalid-format'" style="color: var(--error)"><i class="fas fa-exclamation-triangle fa-fw"></i> {{ $ts.usernameInvalidFormat }}</span>
|
||||
<span v-else-if="usernameState === 'min-range'" style="color: var(--error)"><i class="fas fa-exclamation-triangle fa-fw"></i> {{ $ts.tooShort }}</span>
|
||||
<span v-else-if="usernameState === 'max-range'" style="color: var(--error)"><i class="fas fa-exclamation-triangle fa-fw"></i> {{ $ts.tooLong }}</span>
|
||||
</template>
|
||||
</MkInput>
|
||||
<MkInput v-if="instance.emailRequiredForSignup" v-model="email" class="_formBlock" :debounce="true" type="email" :spellcheck="false" required data-cy-signup-email @update:modelValue="onChangeEmail">
|
||||
<template #label>{{ $ts.emailAddress }} <div v-tooltip:dialog="$ts._signup.emailAddressInfo" class="_button _help"><i class="far fa-question-circle"></i></div></template>
|
||||
<template #prefix><i class="fas fa-envelope"></i></template>
|
||||
<template #caption>
|
||||
<span v-if="emailState === 'wait'" style="color:#999"><i class="fas fa-spinner fa-pulse fa-fw"></i> {{ $ts.checking }}</span>
|
||||
<span v-else-if="emailState === 'ok'" style="color: var(--success)"><i class="fas fa-check fa-fw"></i> {{ $ts.available }}</span>
|
||||
<span v-else-if="emailState === 'unavailable:used'" style="color: var(--error)"><i class="fas fa-exclamation-triangle fa-fw"></i> {{ $ts._emailUnavailable.used }}</span>
|
||||
<span v-else-if="emailState === 'unavailable:format'" style="color: var(--error)"><i class="fas fa-exclamation-triangle fa-fw"></i> {{ $ts._emailUnavailable.format }}</span>
|
||||
<span v-else-if="emailState === 'unavailable:disposable'" style="color: var(--error)"><i class="fas fa-exclamation-triangle fa-fw"></i> {{ $ts._emailUnavailable.disposable }}</span>
|
||||
<span v-else-if="emailState === 'unavailable:mx'" style="color: var(--error)"><i class="fas fa-exclamation-triangle fa-fw"></i> {{ $ts._emailUnavailable.mx }}</span>
|
||||
<span v-else-if="emailState === 'unavailable:smtp'" style="color: var(--error)"><i class="fas fa-exclamation-triangle fa-fw"></i> {{ $ts._emailUnavailable.smtp }}</span>
|
||||
<span v-else-if="emailState === 'unavailable'" style="color: var(--error)"><i class="fas fa-exclamation-triangle fa-fw"></i> {{ $ts.unavailable }}</span>
|
||||
<span v-else-if="emailState === 'error'" style="color: var(--error)"><i class="fas fa-exclamation-triangle fa-fw"></i> {{ $ts.error }}</span>
|
||||
</template>
|
||||
</MkInput>
|
||||
<MkInput v-model="password" class="_formBlock" type="password" autocomplete="new-password" required data-cy-signup-password @update:modelValue="onChangePassword">
|
||||
<template #label>{{ $ts.password }}</template>
|
||||
<template #prefix><i class="fas fa-lock"></i></template>
|
||||
<template #caption>
|
||||
<span v-if="passwordStrength == 'low'" style="color: var(--error)"><i class="fas fa-exclamation-triangle fa-fw"></i> {{ $ts.weakPassword }}</span>
|
||||
<span v-if="passwordStrength == 'medium'" style="color: var(--warn)"><i class="fas fa-check fa-fw"></i> {{ $ts.normalPassword }}</span>
|
||||
<span v-if="passwordStrength == 'high'" style="color: var(--success)"><i class="fas fa-check fa-fw"></i> {{ $ts.strongPassword }}</span>
|
||||
</template>
|
||||
</MkInput>
|
||||
<MkInput v-model="retypedPassword" class="_formBlock" type="password" autocomplete="new-password" required data-cy-signup-password-retype @update:modelValue="onChangePasswordRetype">
|
||||
<template #label>{{ $ts.password }} ({{ $ts.retype }})</template>
|
||||
<template #prefix><i class="fas fa-lock"></i></template>
|
||||
<template #caption>
|
||||
<span v-if="passwordRetypeState == 'match'" style="color: var(--success)"><i class="fas fa-check fa-fw"></i> {{ $ts.passwordMatched }}</span>
|
||||
<span v-if="passwordRetypeState == 'not-match'" style="color: var(--error)"><i class="fas fa-exclamation-triangle fa-fw"></i> {{ $ts.passwordNotMatched }}</span>
|
||||
</template>
|
||||
</MkInput>
|
||||
<MkSwitch v-if="instance.tosUrl" v-model="ToSAgreement" class="_formBlock tou">
|
||||
<I18n :src="$ts.agreeTo">
|
||||
<template #0>
|
||||
<a :href="instance.tosUrl" class="_link" target="_blank">{{ $ts.tos }}</a>
|
||||
</template>
|
||||
</MkInput>
|
||||
<MkInput v-if="meta.emailRequiredForSignup" v-model="email" class="_formBlock" :debounce="true" type="email" :spellcheck="false" required data-cy-signup-email @update:modelValue="onChangeEmail">
|
||||
<template #label>{{ $ts.emailAddress }} <div v-tooltip:dialog="$ts._signup.emailAddressInfo" class="_button _help"><i class="far fa-question-circle"></i></div></template>
|
||||
<template #prefix><i class="fas fa-envelope"></i></template>
|
||||
<template #caption>
|
||||
<span v-if="emailState === 'wait'" style="color:#999"><i class="fas fa-spinner fa-pulse fa-fw"></i> {{ $ts.checking }}</span>
|
||||
<span v-else-if="emailState === 'ok'" style="color: var(--success)"><i class="fas fa-check fa-fw"></i> {{ $ts.available }}</span>
|
||||
<span v-else-if="emailState === 'unavailable:used'" style="color: var(--error)"><i class="fas fa-exclamation-triangle fa-fw"></i> {{ $ts._emailUnavailable.used }}</span>
|
||||
<span v-else-if="emailState === 'unavailable:format'" style="color: var(--error)"><i class="fas fa-exclamation-triangle fa-fw"></i> {{ $ts._emailUnavailable.format }}</span>
|
||||
<span v-else-if="emailState === 'unavailable:disposable'" style="color: var(--error)"><i class="fas fa-exclamation-triangle fa-fw"></i> {{ $ts._emailUnavailable.disposable }}</span>
|
||||
<span v-else-if="emailState === 'unavailable:mx'" style="color: var(--error)"><i class="fas fa-exclamation-triangle fa-fw"></i> {{ $ts._emailUnavailable.mx }}</span>
|
||||
<span v-else-if="emailState === 'unavailable:smtp'" style="color: var(--error)"><i class="fas fa-exclamation-triangle fa-fw"></i> {{ $ts._emailUnavailable.smtp }}</span>
|
||||
<span v-else-if="emailState === 'unavailable'" style="color: var(--error)"><i class="fas fa-exclamation-triangle fa-fw"></i> {{ $ts.unavailable }}</span>
|
||||
<span v-else-if="emailState === 'error'" style="color: var(--error)"><i class="fas fa-exclamation-triangle fa-fw"></i> {{ $ts.error }}</span>
|
||||
</template>
|
||||
</MkInput>
|
||||
<MkInput v-model="password" class="_formBlock" type="password" autocomplete="new-password" required data-cy-signup-password @update:modelValue="onChangePassword">
|
||||
<template #label>{{ $ts.password }}</template>
|
||||
<template #prefix><i class="fas fa-lock"></i></template>
|
||||
<template #caption>
|
||||
<span v-if="passwordStrength == 'low'" style="color: var(--error)"><i class="fas fa-exclamation-triangle fa-fw"></i> {{ $ts.weakPassword }}</span>
|
||||
<span v-if="passwordStrength == 'medium'" style="color: var(--warn)"><i class="fas fa-check fa-fw"></i> {{ $ts.normalPassword }}</span>
|
||||
<span v-if="passwordStrength == 'high'" style="color: var(--success)"><i class="fas fa-check fa-fw"></i> {{ $ts.strongPassword }}</span>
|
||||
</template>
|
||||
</MkInput>
|
||||
<MkInput v-model="retypedPassword" class="_formBlock" type="password" autocomplete="new-password" required data-cy-signup-password-retype @update:modelValue="onChangePasswordRetype">
|
||||
<template #label>{{ $ts.password }} ({{ $ts.retype }})</template>
|
||||
<template #prefix><i class="fas fa-lock"></i></template>
|
||||
<template #caption>
|
||||
<span v-if="passwordRetypeState == 'match'" style="color: var(--success)"><i class="fas fa-check fa-fw"></i> {{ $ts.passwordMatched }}</span>
|
||||
<span v-if="passwordRetypeState == 'not-match'" style="color: var(--error)"><i class="fas fa-exclamation-triangle fa-fw"></i> {{ $ts.passwordNotMatched }}</span>
|
||||
</template>
|
||||
</MkInput>
|
||||
<MkSwitch v-if="meta.tosUrl" v-model="ToSAgreement" class="_formBlock tou">
|
||||
<I18n :src="$ts.agreeTo">
|
||||
<template #0>
|
||||
<a :href="meta.tosUrl" class="_link" target="_blank">{{ $ts.tos }}</a>
|
||||
</template>
|
||||
</I18n>
|
||||
</MkSwitch>
|
||||
<MkCaptcha v-if="meta.enableHcaptcha" ref="hcaptcha" v-model="hCaptchaResponse" class="_formBlock captcha" provider="hcaptcha" :sitekey="meta.hcaptchaSiteKey"/>
|
||||
<MkCaptcha v-if="meta.enableRecaptcha" ref="recaptcha" v-model="reCaptchaResponse" class="_formBlock captcha" provider="recaptcha" :sitekey="meta.recaptchaSiteKey"/>
|
||||
<MkButton class="_formBlock" type="submit" :disabled="shouldDisableSubmitting" gradate data-cy-signup-submit>{{ $ts.start }}</MkButton>
|
||||
</template>
|
||||
</I18n>
|
||||
</MkSwitch>
|
||||
<MkCaptcha v-if="instance.enableHcaptcha" ref="hcaptcha" v-model="hCaptchaResponse" class="_formBlock captcha" provider="hcaptcha" :sitekey="instance.hcaptchaSiteKey"/>
|
||||
<MkCaptcha v-if="instance.enableRecaptcha" ref="recaptcha" v-model="reCaptchaResponse" class="_formBlock captcha" provider="recaptcha" :sitekey="instance.recaptchaSiteKey"/>
|
||||
<MkButton class="_formBlock" type="submit" :disabled="shouldDisableSubmitting" gradate data-cy-signup-submit>{{ $ts.start }}</MkButton>
|
||||
</form>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, defineAsyncComponent } from 'vue';
|
||||
<script lang="ts" setup>
|
||||
import { } from 'vue';
|
||||
import getPasswordStrength from 'syuilo-password-strength';
|
||||
import { toUnicode } from 'punycode/';
|
||||
import MkButton from './ui/button.vue';
|
||||
import MkCaptcha from './captcha.vue';
|
||||
import MkInput from './form/input.vue';
|
||||
import MkSwitch from './form/switch.vue';
|
||||
import { host, url } from '@/config';
|
||||
import * as config from '@/config';
|
||||
import * as os from '@/os';
|
||||
import { login } from '@/account';
|
||||
import { instance } from '@/instance';
|
||||
import { i18n } from '@/i18n';
|
||||
|
||||
export default defineComponent({
|
||||
components: {
|
||||
MkButton,
|
||||
MkInput,
|
||||
MkSwitch,
|
||||
MkCaptcha: defineAsyncComponent(() => import('./captcha.vue')),
|
||||
},
|
||||
|
||||
props: {
|
||||
autoSet: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
default: false,
|
||||
},
|
||||
},
|
||||
|
||||
emits: ['signup'],
|
||||
|
||||
data() {
|
||||
return {
|
||||
host: toUnicode(host),
|
||||
username: '',
|
||||
password: '',
|
||||
retypedPassword: '',
|
||||
invitationCode: '',
|
||||
email: '',
|
||||
url,
|
||||
usernameState: null,
|
||||
emailState: null,
|
||||
passwordStrength: '',
|
||||
passwordRetypeState: null,
|
||||
submitting: false,
|
||||
ToSAgreement: false,
|
||||
hCaptchaResponse: null,
|
||||
reCaptchaResponse: null,
|
||||
};
|
||||
},
|
||||
|
||||
computed: {
|
||||
meta() {
|
||||
return this.$instance;
|
||||
},
|
||||
|
||||
shouldDisableSubmitting(): boolean {
|
||||
return this.submitting ||
|
||||
this.meta.tosUrl && !this.ToSAgreement ||
|
||||
this.meta.enableHcaptcha && !this.hCaptchaResponse ||
|
||||
this.meta.enableRecaptcha && !this.reCaptchaResponse ||
|
||||
this.passwordRetypeState === 'not-match';
|
||||
},
|
||||
|
||||
shouldShowProfileUrl(): boolean {
|
||||
return (this.username !== '' &&
|
||||
this.usernameState !== 'invalid-format' &&
|
||||
this.usernameState !== 'min-range' &&
|
||||
this.usernameState !== 'max-range');
|
||||
},
|
||||
},
|
||||
|
||||
methods: {
|
||||
onChangeUsername() {
|
||||
if (this.username === '') {
|
||||
this.usernameState = null;
|
||||
return;
|
||||
}
|
||||
|
||||
const err =
|
||||
!this.username.match(/^[a-zA-Z0-9_]+$/) ? 'invalid-format' :
|
||||
this.username.length < 1 ? 'min-range' :
|
||||
this.username.length > 20 ? 'max-range' :
|
||||
null;
|
||||
|
||||
if (err) {
|
||||
this.usernameState = err;
|
||||
return;
|
||||
}
|
||||
|
||||
this.usernameState = 'wait';
|
||||
|
||||
os.api('username/available', {
|
||||
username: this.username,
|
||||
}).then(result => {
|
||||
this.usernameState = result.available ? 'ok' : 'unavailable';
|
||||
}).catch(err => {
|
||||
this.usernameState = 'error';
|
||||
});
|
||||
},
|
||||
|
||||
onChangeEmail() {
|
||||
if (this.email === '') {
|
||||
this.emailState = null;
|
||||
return;
|
||||
}
|
||||
|
||||
this.emailState = 'wait';
|
||||
|
||||
os.api('email-address/available', {
|
||||
emailAddress: this.email,
|
||||
}).then(result => {
|
||||
this.emailState = result.available ? 'ok' :
|
||||
result.reason === 'used' ? 'unavailable:used' :
|
||||
result.reason === 'format' ? 'unavailable:format' :
|
||||
result.reason === 'disposable' ? 'unavailable:disposable' :
|
||||
result.reason === 'mx' ? 'unavailable:mx' :
|
||||
result.reason === 'smtp' ? 'unavailable:smtp' :
|
||||
'unavailable';
|
||||
}).catch(err => {
|
||||
this.emailState = 'error';
|
||||
});
|
||||
},
|
||||
|
||||
onChangePassword() {
|
||||
if (this.password === '') {
|
||||
this.passwordStrength = '';
|
||||
return;
|
||||
}
|
||||
|
||||
const strength = getPasswordStrength(this.password);
|
||||
this.passwordStrength = strength > 0.7 ? 'high' : strength > 0.3 ? 'medium' : 'low';
|
||||
},
|
||||
|
||||
onChangePasswordRetype() {
|
||||
if (this.retypedPassword === '') {
|
||||
this.passwordRetypeState = null;
|
||||
return;
|
||||
}
|
||||
|
||||
this.passwordRetypeState = this.password === this.retypedPassword ? 'match' : 'not-match';
|
||||
},
|
||||
|
||||
onSubmit() {
|
||||
if (this.submitting) return;
|
||||
this.submitting = true;
|
||||
|
||||
os.api('signup', {
|
||||
username: this.username,
|
||||
password: this.password,
|
||||
emailAddress: this.email,
|
||||
invitationCode: this.invitationCode,
|
||||
'hcaptcha-response': this.hCaptchaResponse,
|
||||
'g-recaptcha-response': this.reCaptchaResponse,
|
||||
}).then(() => {
|
||||
if (this.meta.emailRequiredForSignup) {
|
||||
os.alert({
|
||||
type: 'success',
|
||||
title: this.$ts._signup.almostThere,
|
||||
text: this.$t('_signup.emailSent', { email: this.email }),
|
||||
});
|
||||
this.$emit('signupEmailPending');
|
||||
} else {
|
||||
os.api('signin', {
|
||||
username: this.username,
|
||||
password: this.password,
|
||||
}).then(res => {
|
||||
this.$emit('signup', res);
|
||||
|
||||
if (this.autoSet) {
|
||||
login(res.i);
|
||||
}
|
||||
});
|
||||
}
|
||||
}).catch(() => {
|
||||
this.submitting = false;
|
||||
this.$refs.hcaptcha?.reset?.();
|
||||
this.$refs.recaptcha?.reset?.();
|
||||
|
||||
os.alert({
|
||||
type: 'error',
|
||||
text: this.$ts.somethingHappened,
|
||||
});
|
||||
});
|
||||
},
|
||||
},
|
||||
const props = withDefaults(defineProps<{
|
||||
autoSet?: boolean;
|
||||
}>(), {
|
||||
autoSet: false,
|
||||
});
|
||||
|
||||
const emit = defineEmits<{
|
||||
(ev: 'signup', user: Record<string, any>): void;
|
||||
(ev: 'signupEmailPending'): void;
|
||||
}>();
|
||||
|
||||
const host = toUnicode(config.host);
|
||||
|
||||
let hcaptcha = $ref();
|
||||
let recaptcha = $ref();
|
||||
|
||||
let username: string = $ref('');
|
||||
let password: string = $ref('');
|
||||
let retypedPassword: string = $ref('');
|
||||
let invitationCode: string = $ref('');
|
||||
let email = $ref('');
|
||||
let usernameState: null | 'wait' | 'ok' | 'unavailable' | 'error' | 'invalid-format' | 'min-range' | 'max-range' = $ref(null);
|
||||
let emailState: null | 'wait' | 'ok' | 'unavailable:used' | 'unavailable:format' | 'unavailable:disposable' | 'unavailable:mx' | 'unavailable:smtp' | 'unavailable' | 'error' = $ref(null);
|
||||
let passwordStrength: '' | 'low' | 'medium' | 'high' = $ref('');
|
||||
let passwordRetypeState: null | 'match' | 'not-match' = $ref(null);
|
||||
let submitting: boolean = $ref(false);
|
||||
let ToSAgreement: boolean = $ref(false);
|
||||
let hCaptchaResponse = $ref(null);
|
||||
let reCaptchaResponse = $ref(null);
|
||||
|
||||
const shouldDisableSubmitting = $computed((): boolean => {
|
||||
return submitting ||
|
||||
instance.tosUrl && !ToSAgreement ||
|
||||
instance.enableHcaptcha && !hCaptchaResponse ||
|
||||
instance.enableRecaptcha && !reCaptchaResponse ||
|
||||
passwordRetypeState === 'not-match';
|
||||
});
|
||||
|
||||
function onChangeUsername(): void {
|
||||
if (username === '') {
|
||||
usernameState = null;
|
||||
return;
|
||||
}
|
||||
|
||||
{
|
||||
const err =
|
||||
!username.match(/^[a-zA-Z0-9_]+$/) ? 'invalid-format' :
|
||||
username.length < 1 ? 'min-range' :
|
||||
username.length > 20 ? 'max-range' :
|
||||
null;
|
||||
|
||||
if (err) {
|
||||
usernameState = err;
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
usernameState = 'wait';
|
||||
|
||||
os.api('username/available', {
|
||||
username,
|
||||
}).then(result => {
|
||||
usernameState = result.available ? 'ok' : 'unavailable';
|
||||
}).catch(() => {
|
||||
usernameState = 'error';
|
||||
});
|
||||
}
|
||||
|
||||
function onChangeEmail(): void {
|
||||
if (email === '') {
|
||||
emailState = null;
|
||||
return;
|
||||
}
|
||||
|
||||
emailState = 'wait';
|
||||
|
||||
os.api('email-address/available', {
|
||||
emailAddress: email,
|
||||
}).then(result => {
|
||||
emailState = result.available ? 'ok' :
|
||||
result.reason === 'used' ? 'unavailable:used' :
|
||||
result.reason === 'format' ? 'unavailable:format' :
|
||||
result.reason === 'disposable' ? 'unavailable:disposable' :
|
||||
result.reason === 'mx' ? 'unavailable:mx' :
|
||||
result.reason === 'smtp' ? 'unavailable:smtp' :
|
||||
'unavailable';
|
||||
}).catch(() => {
|
||||
emailState = 'error';
|
||||
});
|
||||
}
|
||||
|
||||
function onChangePassword(): void {
|
||||
if (password === '') {
|
||||
passwordStrength = '';
|
||||
return;
|
||||
}
|
||||
|
||||
const strength = getPasswordStrength(password);
|
||||
passwordStrength = strength > 0.7 ? 'high' : strength > 0.3 ? 'medium' : 'low';
|
||||
}
|
||||
|
||||
function onChangePasswordRetype(): void {
|
||||
if (retypedPassword === '') {
|
||||
passwordRetypeState = null;
|
||||
return;
|
||||
}
|
||||
|
||||
passwordRetypeState = password === retypedPassword ? 'match' : 'not-match';
|
||||
}
|
||||
|
||||
function onSubmit(): void {
|
||||
if (submitting) return;
|
||||
submitting = true;
|
||||
|
||||
os.api('signup', {
|
||||
username,
|
||||
password,
|
||||
emailAddress: email,
|
||||
invitationCode,
|
||||
'hcaptcha-response': hCaptchaResponse,
|
||||
'g-recaptcha-response': reCaptchaResponse,
|
||||
}).then(() => {
|
||||
if (instance.emailRequiredForSignup) {
|
||||
os.alert({
|
||||
type: 'success',
|
||||
title: i18n.ts._signup.almostThere,
|
||||
text: i18n.t('_signup.emailSent', { email }),
|
||||
});
|
||||
emit('signupEmailPending');
|
||||
} else {
|
||||
os.api('signin', {
|
||||
username,
|
||||
password,
|
||||
}).then(res => {
|
||||
emit('signup', res);
|
||||
|
||||
if (props.autoSet) {
|
||||
login(res.i);
|
||||
}
|
||||
});
|
||||
}
|
||||
}).catch(() => {
|
||||
submitting = false;
|
||||
hcaptcha.reset?.();
|
||||
recaptcha.reset?.();
|
||||
|
||||
os.alert({
|
||||
type: 'error',
|
||||
text: i18n.ts.somethingHappened,
|
||||
});
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
|
|
|||
|
|
@ -71,7 +71,7 @@ defineExpose({
|
|||
<style lang="scss" scoped>
|
||||
.meijqfqm {
|
||||
position: relative;
|
||||
overflow: hidden; overflow: clip;
|
||||
overflow: clip;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
|
||||
|
|
|
|||
|
|
@ -54,7 +54,7 @@ onMounted(() => {
|
|||
width: min-content;
|
||||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
|
||||
border-radius: 8px;
|
||||
overflow: hidden; overflow: clip;
|
||||
overflow: clip;
|
||||
text-align: center;
|
||||
pointer-events: none;
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
<template>
|
||||
<button v-if="!link" class="bghgjjyj _button"
|
||||
<button
|
||||
v-if="!link" class="bghgjjyj _button"
|
||||
:class="{ inline, primary, gradate, danger, rounded, full }"
|
||||
:type="type"
|
||||
@click="$emit('click', $event)"
|
||||
|
|
@ -10,7 +11,8 @@
|
|||
<slot></slot>
|
||||
</div>
|
||||
</button>
|
||||
<MkA v-else class="bghgjjyj _button"
|
||||
<MkA
|
||||
v-else class="bghgjjyj _button"
|
||||
:class="{ inline, primary, gradate, danger, rounded, full }"
|
||||
:to="to"
|
||||
@mousedown="onMousedown"
|
||||
|
|
@ -29,56 +31,56 @@ export default defineComponent({
|
|||
props: {
|
||||
type: {
|
||||
type: String,
|
||||
required: false
|
||||
required: false,
|
||||
},
|
||||
primary: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
default: false
|
||||
default: false,
|
||||
},
|
||||
gradate: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
default: false
|
||||
default: false,
|
||||
},
|
||||
rounded: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
default: false
|
||||
default: true,
|
||||
},
|
||||
inline: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
default: false
|
||||
default: false,
|
||||
},
|
||||
link: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
default: false
|
||||
default: false,
|
||||
},
|
||||
to: {
|
||||
type: String,
|
||||
required: false
|
||||
required: false,
|
||||
},
|
||||
autofocus: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
default: false
|
||||
default: false,
|
||||
},
|
||||
wait: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
default: false
|
||||
default: false,
|
||||
},
|
||||
danger: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
default: false
|
||||
default: false,
|
||||
},
|
||||
full: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
default: false
|
||||
default: false,
|
||||
},
|
||||
},
|
||||
emits: ['click'],
|
||||
|
|
@ -127,8 +129,8 @@ export default defineComponent({
|
|||
window.setTimeout(() => {
|
||||
if (this.$refs.ripples) this.$refs.ripples.removeChild(ripple);
|
||||
}, 2000);
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
|
|
@ -142,13 +144,12 @@ export default defineComponent({
|
|||
padding: 8px 14px;
|
||||
text-align: center;
|
||||
font-weight: normal;
|
||||
font-size: 0.9em;
|
||||
line-height: 22px;
|
||||
font-size: 1em;
|
||||
box-shadow: none;
|
||||
text-decoration: none;
|
||||
background: var(--buttonBg);
|
||||
border-radius: 5px;
|
||||
overflow: hidden; overflow: clip;
|
||||
overflow: clip;
|
||||
box-sizing: border-box;
|
||||
transition: background 0.1s ease;
|
||||
|
||||
|
|
|
|||
|
|
@ -143,7 +143,8 @@ export default defineComponent({
|
|||
|
||||
.ukygtjoj {
|
||||
position: relative;
|
||||
overflow: hidden; overflow: clip;
|
||||
overflow: clip;
|
||||
contain: content;
|
||||
|
||||
&.naked {
|
||||
background: transparent !important;
|
||||
|
|
|
|||
|
|
@ -1,16 +1,16 @@
|
|||
<template>
|
||||
<transition :name="$store.state.animation ? 'fade' : ''" appear>
|
||||
<div ref="rootEl" class="nvlagfpb" :style="{ zIndex }" @contextmenu.prevent.stop="() => {}">
|
||||
<MkMenu :items="items" class="_popup _shadow" :align="'left'" @close="$emit('closed')"/>
|
||||
<MkMenu :items="items" :align="'left'" @close="$emit('closed')"/>
|
||||
</div>
|
||||
</transition>
|
||||
</template>
|
||||
|
||||
<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 contains from '@/scripts/contains';
|
||||
import * as os from '@/os';
|
||||
|
||||
const props = defineProps<{
|
||||
|
|
|
|||
65
packages/client/src/components/ui/menu.child.vue
Normal file
65
packages/client/src/components/ui/menu.child.vue
Normal file
|
|
@ -0,0 +1,65 @@
|
|||
<template>
|
||||
<div ref="el" class="sfhdhdhr">
|
||||
<MkMenu ref="menu" :items="items" :align="align" :width="width" :as-drawer="false" @close="onChildClosed"/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { on } from 'events';
|
||||
import { nextTick, onBeforeUnmount, onMounted, onUnmounted, ref, watch } from 'vue';
|
||||
import MkMenu from './menu.vue';
|
||||
import { MenuItem } from '@/types/menu';
|
||||
import * as os from '@/os';
|
||||
|
||||
const props = defineProps<{
|
||||
items: MenuItem[];
|
||||
targetElement: HTMLElement;
|
||||
rootElement: HTMLElement;
|
||||
width?: number;
|
||||
viaKeyboard?: boolean;
|
||||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
(ev: 'closed'): void;
|
||||
(ev: 'actioned'): void;
|
||||
}>();
|
||||
|
||||
const el = ref<HTMLElement>();
|
||||
const align = 'left';
|
||||
|
||||
function setPosition() {
|
||||
const rootRect = props.rootElement.getBoundingClientRect();
|
||||
const rect = props.targetElement.getBoundingClientRect();
|
||||
const left = props.targetElement.offsetWidth;
|
||||
const top = (rect.top - rootRect.top) - 8;
|
||||
el.value.style.left = left + 'px';
|
||||
el.value.style.top = top + 'px';
|
||||
}
|
||||
|
||||
function onChildClosed(actioned?: boolean) {
|
||||
if (actioned) {
|
||||
emit('actioned');
|
||||
} else {
|
||||
emit('closed');
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
setPosition();
|
||||
nextTick(() => {
|
||||
setPosition();
|
||||
});
|
||||
});
|
||||
|
||||
defineExpose({
|
||||
checkHit: (ev: MouseEvent) => {
|
||||
return (ev.target === el.value || el.value.contains(ev.target));
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.sfhdhdhr {
|
||||
position: absolute;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,55 +1,67 @@
|
|||
<template>
|
||||
<div
|
||||
ref="itemsEl" v-hotkey="keymap"
|
||||
class="rrevdjwt"
|
||||
:class="{ center: align === 'center', asDrawer }"
|
||||
:style="{ width: (width && !asDrawer) ? width + 'px' : '', maxHeight: maxHeight ? maxHeight + 'px' : '' }"
|
||||
@contextmenu.self="e => e.preventDefault()"
|
||||
>
|
||||
<template v-for="(item, i) in items2">
|
||||
<div v-if="item === null" class="divider"></div>
|
||||
<span v-else-if="item.type === 'label'" class="label item">
|
||||
<span>{{ item.text }}</span>
|
||||
<div>
|
||||
<div
|
||||
ref="itemsEl" v-hotkey="keymap"
|
||||
class="rrevdjwt _popup _shadow"
|
||||
:class="{ center: align === 'center', asDrawer }"
|
||||
:style="{ width: (width && !asDrawer) ? width + 'px' : '', maxHeight: maxHeight ? maxHeight + 'px' : '' }"
|
||||
@contextmenu.self="e => e.preventDefault()"
|
||||
>
|
||||
<template v-for="(item, i) in items2">
|
||||
<div v-if="item === null" class="divider"></div>
|
||||
<span v-else-if="item.type === 'label'" class="label item">
|
||||
<span>{{ item.text }}</span>
|
||||
</span>
|
||||
<span v-else-if="item.type === 'pending'" :tabindex="i" class="pending item">
|
||||
<span><MkEllipsis/></span>
|
||||
</span>
|
||||
<MkA v-else-if="item.type === 'link'" :to="item.to" :tabindex="i" class="_button item" @click.passive="close(true)" @mouseenter.passive="onItemMouseEnter(item)" @mouseleave.passive="onItemMouseLeave(item)">
|
||||
<i v-if="item.icon" class="fa-fw" :class="item.icon"></i>
|
||||
<MkAvatar v-if="item.avatar" :user="item.avatar" class="avatar"/>
|
||||
<span>{{ item.text }}</span>
|
||||
<span v-if="item.indicate" class="indicator"><i class="fas fa-circle"></i></span>
|
||||
</MkA>
|
||||
<a v-else-if="item.type === 'a'" :href="item.href" :target="item.target" :download="item.download" :tabindex="i" class="_button item" @click="close(true)" @mouseenter.passive="onItemMouseEnter(item)" @mouseleave.passive="onItemMouseLeave(item)">
|
||||
<i v-if="item.icon" class="fa-fw" :class="item.icon"></i>
|
||||
<span>{{ item.text }}</span>
|
||||
<span v-if="item.indicate" class="indicator"><i class="fas fa-circle"></i></span>
|
||||
</a>
|
||||
<button v-else-if="item.type === 'user'" :tabindex="i" class="_button item" :class="{ active: item.active }" :disabled="item.active" @click="clicked(item.action, $event)" @mouseenter.passive="onItemMouseEnter(item)" @mouseleave.passive="onItemMouseLeave(item)">
|
||||
<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" @mouseenter.passive="onItemMouseEnter(item)" @mouseleave.passive="onItemMouseLeave(item)">
|
||||
<FormSwitch v-model="item.ref" :disabled="item.disabled" class="form-switch">{{ item.text }}</FormSwitch>
|
||||
</span>
|
||||
<button v-else-if="item.type === 'parent'" :tabindex="i" class="_button item parent" :class="{ childShowing: childShowingItem === item }" @mouseenter="showChildren(item, $event)">
|
||||
<i v-if="item.icon" class="fa-fw" :class="item.icon"></i>
|
||||
<span>{{ item.text }}</span>
|
||||
<span class="caret"><i class="fas fa-caret-right fa-fw"></i></span>
|
||||
</button>
|
||||
<button v-else :tabindex="i" class="_button item" :class="{ danger: item.danger, active: item.active }" :disabled="item.active" @click="clicked(item.action, $event)" @mouseenter.passive="onItemMouseEnter(item)" @mouseleave.passive="onItemMouseLeave(item)">
|
||||
<i v-if="item.icon" class="fa-fw" :class="item.icon"></i>
|
||||
<MkAvatar v-if="item.avatar" :user="item.avatar" class="avatar"/>
|
||||
<span>{{ item.text }}</span>
|
||||
<span v-if="item.indicate" class="indicator"><i class="fas fa-circle"></i></span>
|
||||
</button>
|
||||
</template>
|
||||
<span v-if="items2.length === 0" class="none item">
|
||||
<span>{{ $ts.none }}</span>
|
||||
</span>
|
||||
<span v-else-if="item.type === 'pending'" :tabindex="i" class="pending item">
|
||||
<span><MkEllipsis/></span>
|
||||
</span>
|
||||
<MkA v-else-if="item.type === 'link'" :to="item.to" :tabindex="i" class="_button item" @click.passive="close()">
|
||||
<i v-if="item.icon" class="fa-fw" :class="item.icon"></i>
|
||||
<MkAvatar v-if="item.avatar" :user="item.avatar" class="avatar"/>
|
||||
<span>{{ item.text }}</span>
|
||||
<span v-if="item.indicate" class="indicator"><i class="fas fa-circle"></i></span>
|
||||
</MkA>
|
||||
<a v-else-if="item.type === 'a'" :href="item.href" :target="item.target" :download="item.download" :tabindex="i" class="_button item" @click="close()">
|
||||
<i v-if="item.icon" class="fa-fw" :class="item.icon"></i>
|
||||
<span>{{ item.text }}</span>
|
||||
<span v-if="item.indicate" class="indicator"><i class="fas fa-circle"></i></span>
|
||||
</a>
|
||||
<button v-else-if="item.type === 'user'" :tabindex="i" class="_button item" :class="{ active: item.active }" :disabled="item.active" @click="clicked(item.action, $event)">
|
||||
<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"/>
|
||||
<span>{{ item.text }}</span>
|
||||
<span v-if="item.indicate" class="indicator"><i class="fas fa-circle"></i></span>
|
||||
</button>
|
||||
</template>
|
||||
<span v-if="items2.length === 0" class="none item">
|
||||
<span>{{ $ts.none }}</span>
|
||||
</span>
|
||||
</div>
|
||||
<div v-if="childMenu" class="child">
|
||||
<XChild ref="child" :items="childMenu" :target-element="childTarget" :root-element="itemsEl" showing @actioned="childActioned"/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { nextTick, onMounted, watch } from 'vue';
|
||||
import { defineAsyncComponent, nextTick, onBeforeUnmount, onMounted, onUnmounted, Ref, ref, watch } from 'vue';
|
||||
import { focusPrev, focusNext } from '@/scripts/focus';
|
||||
import FormSwitch from '@/components/form/switch.vue';
|
||||
import { MenuItem, InnerMenuItem, MenuPending, MenuAction } from '@/types/menu';
|
||||
import * as os from '@/os';
|
||||
const XChild = defineAsyncComponent(() => import('./menu.child.vue'));
|
||||
|
||||
const props = defineProps<{
|
||||
items: MenuItem[];
|
||||
|
|
@ -61,19 +73,23 @@ const props = defineProps<{
|
|||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
(ev: 'close'): void;
|
||||
(ev: 'close', actioned?: boolean): void;
|
||||
}>();
|
||||
|
||||
let itemsEl = $ref<HTMLDivElement>();
|
||||
|
||||
let items2: InnerMenuItem[] = $ref([]);
|
||||
|
||||
let child = $ref<InstanceType<typeof XChild>>();
|
||||
|
||||
let keymap = $computed(() => ({
|
||||
'up|k|shift+tab': focusUp,
|
||||
'down|j|tab': focusDown,
|
||||
'esc': close,
|
||||
}));
|
||||
|
||||
let childShowingItem = $ref<MenuItem | null>();
|
||||
|
||||
watch(() => props.items, () => {
|
||||
const items: (MenuItem | MenuPending)[] = [...props.items].filter(item => item !== undefined);
|
||||
|
||||
|
|
@ -93,21 +109,53 @@ watch(() => props.items, () => {
|
|||
immediate: true,
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
if (props.viaKeyboard) {
|
||||
nextTick(() => {
|
||||
focusNext(itemsEl.children[0], true, false);
|
||||
});
|
||||
let childMenu = $ref<MenuItem[] | null>();
|
||||
let childTarget = $ref<HTMLElement | null>();
|
||||
|
||||
function closeChild() {
|
||||
childMenu = null;
|
||||
childShowingItem = null;
|
||||
}
|
||||
|
||||
function childActioned() {
|
||||
closeChild();
|
||||
close(true);
|
||||
}
|
||||
|
||||
function onGlobalMousedown(event: MouseEvent) {
|
||||
if (childTarget && (event.target === childTarget || childTarget.contains(event.target))) return;
|
||||
if (child && child.checkHit(event)) return;
|
||||
closeChild();
|
||||
}
|
||||
|
||||
let childCloseTimer: null | number = null;
|
||||
function onItemMouseEnter(item) {
|
||||
childCloseTimer = window.setTimeout(() => {
|
||||
closeChild();
|
||||
}, 300);
|
||||
}
|
||||
function onItemMouseLeave(item) {
|
||||
if (childCloseTimer) window.clearTimeout(childCloseTimer);
|
||||
}
|
||||
|
||||
async function showChildren(item: MenuItem, ev: MouseEvent) {
|
||||
if (props.asDrawer) {
|
||||
os.popupMenu(item.children, ev.currentTarget ?? ev.target);
|
||||
close();
|
||||
} else {
|
||||
childTarget = ev.currentTarget ?? ev.target;
|
||||
childMenu = item.children;
|
||||
childShowingItem = item;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function clicked(fn: MenuAction, ev: MouseEvent) {
|
||||
fn(ev);
|
||||
close();
|
||||
close(true);
|
||||
}
|
||||
|
||||
function close() {
|
||||
emit('close');
|
||||
function close(actioned = false) {
|
||||
emit('close', actioned);
|
||||
}
|
||||
|
||||
function focusUp() {
|
||||
|
|
@ -117,6 +165,20 @@ function focusUp() {
|
|||
function focusDown() {
|
||||
focusNext(document.activeElement);
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
if (props.viaKeyboard) {
|
||||
nextTick(() => {
|
||||
focusNext(itemsEl.children[0], true, false);
|
||||
});
|
||||
}
|
||||
|
||||
document.addEventListener('mousedown', onGlobalMousedown, { passive: true });
|
||||
});
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
document.removeEventListener('mousedown', onGlobalMousedown);
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
|
@ -136,11 +198,11 @@ function focusDown() {
|
|||
> .item {
|
||||
display: block;
|
||||
position: relative;
|
||||
padding: 6px 18px;
|
||||
padding: 6px 16px;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
white-space: nowrap;
|
||||
font-size: 0.85em;
|
||||
font-size: 0.9em;
|
||||
line-height: 20px;
|
||||
text-align: left;
|
||||
overflow: hidden;
|
||||
|
|
@ -225,6 +287,25 @@ function focusDown() {
|
|||
opacity: 0.7;
|
||||
}
|
||||
|
||||
&.parent {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
cursor: default;
|
||||
|
||||
> .caret {
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
&.childShowing {
|
||||
color: var(--accent);
|
||||
text-decoration: none;
|
||||
|
||||
&:before {
|
||||
background: var(--accentedBg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> i {
|
||||
margin-right: 5px;
|
||||
width: 20px;
|
||||
|
|
|
|||
|
|
@ -98,7 +98,7 @@ defineExpose({
|
|||
}
|
||||
|
||||
> .header {
|
||||
$height: 58px;
|
||||
$height: 46px;
|
||||
$height-narrow: 42px;
|
||||
display: flex;
|
||||
flex-shrink: 0;
|
||||
|
|
@ -138,6 +138,7 @@ defineExpose({
|
|||
}
|
||||
|
||||
> .body {
|
||||
flex: 1;
|
||||
overflow: auto;
|
||||
background: var(--panel);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@
|
|||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { nextTick, onMounted, computed, ref, watch, provide } from 'vue';
|
||||
import { nextTick, onMounted, watch, provide } from 'vue';
|
||||
import * as os from '@/os';
|
||||
import { isTouchUsing } from '@/scripts/touch';
|
||||
import { defaultStore } from '@/store';
|
||||
|
|
@ -57,13 +57,13 @@ const emit = defineEmits<{
|
|||
|
||||
provide('modal', true);
|
||||
|
||||
const maxHeight = ref<number>();
|
||||
const fixed = ref(false);
|
||||
const transformOrigin = ref('center');
|
||||
const showing = ref(true);
|
||||
const content = ref<HTMLElement>();
|
||||
let maxHeight = $ref<number>();
|
||||
let fixed = $ref(false);
|
||||
let transformOrigin = $ref('center');
|
||||
let showing = $ref(true);
|
||||
let content = $ref<HTMLElement>();
|
||||
const zIndex = os.claimZIndex(props.zPriority);
|
||||
const type = computed(() => {
|
||||
const type = $computed(() => {
|
||||
if (props.preferType === 'auto') {
|
||||
if (!defaultStore.state.disableDrawer && isTouchUsing && deviceKind === 'smartphone') {
|
||||
return 'drawer';
|
||||
|
|
@ -80,7 +80,7 @@ let contentClicking = false;
|
|||
const close = () => {
|
||||
// eslint-disable-next-line vue/no-mutating-props
|
||||
if (props.src) props.src.style.pointerEvents = 'auto';
|
||||
showing.value = false;
|
||||
showing = false;
|
||||
emit('close');
|
||||
};
|
||||
|
||||
|
|
@ -89,8 +89,8 @@ const onBgClick = () => {
|
|||
emit('click');
|
||||
};
|
||||
|
||||
if (type.value === 'drawer') {
|
||||
maxHeight.value = window.innerHeight / 1.5;
|
||||
if (type === 'drawer') {
|
||||
maxHeight = window.innerHeight / 1.5;
|
||||
}
|
||||
|
||||
const keymap = {
|
||||
|
|
@ -101,22 +101,21 @@ const MARGIN = 16;
|
|||
|
||||
const align = () => {
|
||||
if (props.src == null) return;
|
||||
if (type.value === 'drawer') return;
|
||||
if (type.value === 'dialog') return;
|
||||
if (type === 'drawer') return;
|
||||
if (type === 'dialog') return;
|
||||
|
||||
const popover = content.value!;
|
||||
if (popover == null) return;
|
||||
if (content == null) return;
|
||||
|
||||
const srcRect = props.src.getBoundingClientRect();
|
||||
|
||||
const width = popover.offsetWidth;
|
||||
const height = popover.offsetHeight;
|
||||
|
||||
const width = content!.offsetWidth;
|
||||
const height = content!.offsetHeight;
|
||||
|
||||
let left;
|
||||
let top;
|
||||
|
||||
const x = srcRect.left + (fixed.value ? 0 : window.pageXOffset);
|
||||
const y = srcRect.top + (fixed.value ? 0 : window.pageYOffset);
|
||||
const x = srcRect.left + (fixed ? 0 : window.pageXOffset);
|
||||
const y = srcRect.top + (fixed ? 0 : window.pageYOffset);
|
||||
|
||||
if (props.anchor.x === 'center') {
|
||||
left = x + (props.src.offsetWidth / 2) - (width / 2);
|
||||
|
|
@ -134,7 +133,7 @@ const align = () => {
|
|||
top = y + props.src.offsetHeight;
|
||||
}
|
||||
|
||||
if (fixed.value) {
|
||||
if (fixed) {
|
||||
// 画面から横にはみ出る場合
|
||||
if (left + width > window.innerWidth) {
|
||||
left = window.innerWidth - width;
|
||||
|
|
@ -147,16 +146,16 @@ const align = () => {
|
|||
if (top + height > (window.innerHeight - MARGIN)) {
|
||||
if (props.noOverlap && props.anchor.x === 'center') {
|
||||
if (underSpace >= (upperSpace / 3)) {
|
||||
maxHeight.value = underSpace;
|
||||
maxHeight = underSpace;
|
||||
} else {
|
||||
maxHeight.value = upperSpace;
|
||||
maxHeight = upperSpace;
|
||||
top = (upperSpace + MARGIN) - height;
|
||||
}
|
||||
} else {
|
||||
top = (window.innerHeight - MARGIN) - height;
|
||||
}
|
||||
} else {
|
||||
maxHeight.value = underSpace;
|
||||
maxHeight = underSpace;
|
||||
}
|
||||
} else {
|
||||
// 画面から横にはみ出る場合
|
||||
|
|
@ -171,16 +170,16 @@ const align = () => {
|
|||
if (top + height - window.pageYOffset > (window.innerHeight - MARGIN)) {
|
||||
if (props.noOverlap && props.anchor.x === 'center') {
|
||||
if (underSpace >= (upperSpace / 3)) {
|
||||
maxHeight.value = underSpace;
|
||||
maxHeight = underSpace;
|
||||
} else {
|
||||
maxHeight.value = upperSpace;
|
||||
maxHeight = upperSpace;
|
||||
top = window.pageYOffset + ((upperSpace + MARGIN) - height);
|
||||
}
|
||||
} else {
|
||||
top = (window.innerHeight - MARGIN) - height + window.pageYOffset - 1;
|
||||
}
|
||||
} else {
|
||||
maxHeight.value = underSpace;
|
||||
maxHeight = underSpace;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -195,29 +194,29 @@ const align = () => {
|
|||
let transformOriginX = 'center';
|
||||
let transformOriginY = 'center';
|
||||
|
||||
if (top >= srcRect.top + props.src.offsetHeight + (fixed.value ? 0 : window.pageYOffset)) {
|
||||
if (top >= srcRect.top + props.src.offsetHeight + (fixed ? 0 : window.pageYOffset)) {
|
||||
transformOriginY = 'top';
|
||||
} else if ((top + height) <= srcRect.top + (fixed.value ? 0 : window.pageYOffset)) {
|
||||
} else if ((top + height) <= srcRect.top + (fixed ? 0 : window.pageYOffset)) {
|
||||
transformOriginY = 'bottom';
|
||||
}
|
||||
|
||||
if (left >= srcRect.left + props.src.offsetWidth + (fixed.value ? 0 : window.pageXOffset)) {
|
||||
if (left >= srcRect.left + props.src.offsetWidth + (fixed ? 0 : window.pageXOffset)) {
|
||||
transformOriginX = 'left';
|
||||
} else if ((left + width) <= srcRect.left + (fixed.value ? 0 : window.pageXOffset)) {
|
||||
} else if ((left + width) <= srcRect.left + (fixed ? 0 : window.pageXOffset)) {
|
||||
transformOriginX = 'right';
|
||||
}
|
||||
|
||||
transformOrigin.value = `${transformOriginX} ${transformOriginY}`;
|
||||
transformOrigin = `${transformOriginX} ${transformOriginY}`;
|
||||
|
||||
popover.style.left = left + 'px';
|
||||
popover.style.top = top + 'px';
|
||||
content.style.left = left + 'px';
|
||||
content.style.top = top + 'px';
|
||||
};
|
||||
|
||||
const onOpened = () => {
|
||||
emit('opened');
|
||||
|
||||
// モーダルコンテンツにマウスボタンが押され、コンテンツ外でマウスボタンが離されたときにモーダルバックグラウンドクリックと判定させないためにマウスイベントを監視しフラグ管理する
|
||||
const el = content.value!.children[0];
|
||||
const el = content!.children[0];
|
||||
el.addEventListener('mousedown', ev => {
|
||||
contentClicking = true;
|
||||
window.addEventListener('mouseup', ev => {
|
||||
|
|
@ -235,7 +234,7 @@ onMounted(() => {
|
|||
// eslint-disable-next-line vue/no-mutating-props
|
||||
props.src.style.pointerEvents = 'none';
|
||||
}
|
||||
fixed.value = (type.value === 'drawer') || (getFixedContainer(props.src) != null);
|
||||
fixed = (type === 'drawer') || (getFixedContainer(props.src) != null);
|
||||
|
||||
await nextTick();
|
||||
|
||||
|
|
@ -243,10 +242,9 @@ onMounted(() => {
|
|||
}, { immediate: true });
|
||||
|
||||
nextTick(() => {
|
||||
const popover = content.value;
|
||||
new ResizeObserver((entries, observer) => {
|
||||
align();
|
||||
}).observe(popover!);
|
||||
}).observe(content!);
|
||||
});
|
||||
});
|
||||
|
||||
|
|
@ -389,7 +387,7 @@ defineExpose({
|
|||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden; overflow: clip;
|
||||
overflow: clip;
|
||||
|
||||
> .content {
|
||||
position: fixed;
|
||||
|
|
|
|||
|
|
@ -133,8 +133,10 @@ const fetchMore = async (): Promise<void> => {
|
|||
limit: SECOND_FETCH_LIMIT + 1,
|
||||
...(props.pagination.offsetMode ? {
|
||||
offset: offset.value,
|
||||
} : props.pagination.reversed ? {
|
||||
sinceId: items.value[0].id,
|
||||
} : {
|
||||
untilId: props.pagination.reversed ? items.value[0].id : items.value[items.value.length - 1].id,
|
||||
untilId: items.value[items.value.length - 1].id,
|
||||
}),
|
||||
}).then(res => {
|
||||
for (let i = 0; i < res.length; i++) {
|
||||
|
|
@ -169,8 +171,10 @@ const fetchMoreAhead = async (): Promise<void> => {
|
|||
limit: SECOND_FETCH_LIMIT + 1,
|
||||
...(props.pagination.offsetMode ? {
|
||||
offset: offset.value,
|
||||
} : props.pagination.reversed ? {
|
||||
untilId: items.value[0].id,
|
||||
} : {
|
||||
sinceId: props.pagination.reversed ? items.value[0].id : items.value[items.value.length - 1].id,
|
||||
sinceId: items.value[items.value.length - 1].id,
|
||||
}),
|
||||
}).then(res => {
|
||||
if (res.length > SECOND_FETCH_LIMIT) {
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<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()"/>
|
||||
<MkMenu :items="items" :align="align" :width="width" :max-height="maxHeight" :as-drawer="type === 'drawer'" class="sfhdhdhq" :class="{ drawer: type === 'drawer' }" @close="modal.close()"/>
|
||||
</MkModal>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
|
|
@ -30,7 +30,7 @@ export default defineComponent({
|
|||
props: {
|
||||
def: {
|
||||
type: Array,
|
||||
required: true
|
||||
required: true,
|
||||
},
|
||||
grid: {
|
||||
type: Boolean,
|
||||
|
|
@ -64,7 +64,7 @@ export default defineComponent({
|
|||
box-sizing: border-box;
|
||||
padding: 10px 16px 10px 8px;
|
||||
border-radius: 9px;
|
||||
font-size: 0.95em;
|
||||
font-size: 0.9em;
|
||||
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
|
|
|
|||
|
|
@ -12,6 +12,7 @@
|
|||
<script lang="ts" setup>
|
||||
import { nextTick, onMounted, onUnmounted, ref } from 'vue';
|
||||
import * as os from '@/os';
|
||||
import { calcPopupPosition } from '@/scripts/popup-position';
|
||||
|
||||
const props = withDefaults(defineProps<{
|
||||
showing: boolean;
|
||||
|
|
@ -36,151 +37,20 @@ const emit = defineEmits<{
|
|||
const el = ref<HTMLElement>();
|
||||
const zIndex = os.claimZIndex('high');
|
||||
|
||||
const setPosition = () => {
|
||||
if (el.value == null) return;
|
||||
function setPosition() {
|
||||
const data = calcPopupPosition(el.value, {
|
||||
anchorElement: props.targetElement,
|
||||
direction: props.direction,
|
||||
align: 'center',
|
||||
innerMargin: props.innerMargin,
|
||||
x: props.x,
|
||||
y: props.y,
|
||||
});
|
||||
|
||||
const contentWidth = el.value.offsetWidth;
|
||||
const contentHeight = el.value.offsetHeight;
|
||||
|
||||
let rect: DOMRect;
|
||||
|
||||
if (props.targetElement) {
|
||||
rect = props.targetElement.getBoundingClientRect();
|
||||
}
|
||||
|
||||
const calcPosWhenTop = () => {
|
||||
let left: number;
|
||||
let top: number;
|
||||
|
||||
if (props.targetElement) {
|
||||
left = rect.left + window.pageXOffset + (props.targetElement.offsetWidth / 2);
|
||||
top = (rect.top + window.pageYOffset - contentHeight) - props.innerMargin;
|
||||
} else {
|
||||
left = props.x;
|
||||
top = (props.y - contentHeight) - props.innerMargin;
|
||||
}
|
||||
|
||||
left -= (el.value.offsetWidth / 2);
|
||||
|
||||
if (left + contentWidth - window.pageXOffset > window.innerWidth) {
|
||||
left = window.innerWidth - contentWidth + window.pageXOffset - 1;
|
||||
}
|
||||
|
||||
return [left, top];
|
||||
};
|
||||
|
||||
const calcPosWhenBottom = () => {
|
||||
let left: number;
|
||||
let top: number;
|
||||
|
||||
if (props.targetElement) {
|
||||
left = rect.left + window.pageXOffset + (props.targetElement.offsetWidth / 2);
|
||||
top = (rect.top + window.pageYOffset + props.targetElement.offsetHeight) + props.innerMargin;
|
||||
} else {
|
||||
left = props.x;
|
||||
top = (props.y) + props.innerMargin;
|
||||
}
|
||||
|
||||
left -= (el.value.offsetWidth / 2);
|
||||
|
||||
if (left + contentWidth - window.pageXOffset > window.innerWidth) {
|
||||
left = window.innerWidth - contentWidth + window.pageXOffset - 1;
|
||||
}
|
||||
|
||||
return [left, top];
|
||||
};
|
||||
|
||||
const calcPosWhenLeft = () => {
|
||||
let left: number;
|
||||
let top: number;
|
||||
|
||||
if (props.targetElement) {
|
||||
left = (rect.left + window.pageXOffset - contentWidth) - props.innerMargin;
|
||||
top = rect.top + window.pageYOffset + (props.targetElement.offsetHeight / 2);
|
||||
} else {
|
||||
left = (props.x - contentWidth) - props.innerMargin;
|
||||
top = props.y;
|
||||
}
|
||||
|
||||
top -= (el.value.offsetHeight / 2);
|
||||
|
||||
if (top + contentHeight - window.pageYOffset > window.innerHeight) {
|
||||
top = window.innerHeight - contentHeight + window.pageYOffset - 1;
|
||||
}
|
||||
|
||||
return [left, top];
|
||||
};
|
||||
|
||||
const calcPosWhenRight = () => {
|
||||
let left: number;
|
||||
let top: number;
|
||||
|
||||
if (props.targetElement) {
|
||||
left = (rect.left + window.pageXOffset) + props.innerMargin;
|
||||
top = rect.top + window.pageYOffset + (props.targetElement.offsetHeight / 2);
|
||||
} else {
|
||||
left = props.x + props.innerMargin;
|
||||
top = props.y;
|
||||
}
|
||||
|
||||
top -= (el.value.offsetHeight / 2);
|
||||
|
||||
if (top + contentHeight - window.pageYOffset > window.innerHeight) {
|
||||
top = window.innerHeight - contentHeight + window.pageYOffset - 1;
|
||||
}
|
||||
|
||||
return [left, top];
|
||||
};
|
||||
|
||||
const calc = (): {
|
||||
left: number;
|
||||
top: number;
|
||||
transformOrigin: string;
|
||||
} => {
|
||||
switch (props.direction) {
|
||||
case 'top': {
|
||||
const [left, top] = calcPosWhenTop();
|
||||
|
||||
// ツールチップを上に向かって表示するスペースがなければ下に向かって出す
|
||||
if (top - window.pageYOffset < 0) {
|
||||
const [left, top] = calcPosWhenBottom();
|
||||
return { left, top, transformOrigin: 'center top' };
|
||||
}
|
||||
|
||||
return { left, top, transformOrigin: 'center bottom' };
|
||||
}
|
||||
|
||||
case 'bottom': {
|
||||
const [left, top] = calcPosWhenBottom();
|
||||
// TODO: ツールチップを下に向かって表示するスペースがなければ上に向かって出す
|
||||
return { left, top, transformOrigin: 'center top' };
|
||||
}
|
||||
|
||||
case 'left': {
|
||||
const [left, top] = calcPosWhenLeft();
|
||||
|
||||
// ツールチップを左に向かって表示するスペースがなければ右に向かって出す
|
||||
if (left - window.pageXOffset < 0) {
|
||||
const [left, top] = calcPosWhenRight();
|
||||
return { left, top, transformOrigin: 'left center' };
|
||||
}
|
||||
|
||||
return { left, top, transformOrigin: 'right center' };
|
||||
}
|
||||
|
||||
case 'right': {
|
||||
const [left, top] = calcPosWhenRight();
|
||||
// TODO: ツールチップを右に向かって表示するスペースがなければ左に向かって出す
|
||||
return { left, top, transformOrigin: 'left center' };
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const { left, top, transformOrigin } = calc();
|
||||
el.value.style.transformOrigin = transformOrigin;
|
||||
el.value.style.left = left + 'px';
|
||||
el.value.style.top = top + 'px';
|
||||
};
|
||||
el.value.style.transformOrigin = data.transformOrigin;
|
||||
el.value.style.left = data.left + 'px';
|
||||
el.value.style.top = data.top + 'px';
|
||||
}
|
||||
|
||||
let loopHandler;
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<transition :name="$store.state.animation ? 'window' : ''" appear @after-leave="$emit('closed')">
|
||||
<div v-if="showing" class="ebkgocck">
|
||||
<div v-if="showing" ref="rootEl" class="ebkgocck" :class="{ maximized }">
|
||||
<div class="body _shadow _narrow_" @mousedown="onBodyMousedown" @keydown="onKeydown">
|
||||
<div class="header" :class="{ mini }" @contextmenu.prevent.stop="onContextmenu">
|
||||
<span class="left">
|
||||
|
|
@ -11,6 +11,8 @@
|
|||
</span>
|
||||
<span class="right">
|
||||
<button v-for="button in buttonsRight" v-tooltip="button.title" class="button _button" :class="{ highlighted: button.highlighted }" @click="button.onClick"><i :class="button.icon"></i></button>
|
||||
<button v-if="canResize && maximized" class="button _button" @click="unMaximize()"><i class="fas fa-window-restore"></i></button>
|
||||
<button v-else-if="canResize && !maximized" class="button _button" @click="maximize()"><i class="fas fa-window-maximize"></i></button>
|
||||
<button v-if="closeButton" class="button _button" @click="close()"><i class="fas fa-times"></i></button>
|
||||
</span>
|
||||
</div>
|
||||
|
|
@ -32,15 +34,16 @@
|
|||
</transition>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from 'vue';
|
||||
<script lang="ts" setup>
|
||||
import { onBeforeUnmount, onMounted, provide } from 'vue';
|
||||
import contains from '@/scripts/contains';
|
||||
import * as os from '@/os';
|
||||
import { MenuItem } from '@/types/menu';
|
||||
|
||||
const minHeight = 50;
|
||||
const minWidth = 250;
|
||||
|
||||
function dragListen(fn) {
|
||||
function dragListen(fn: (ev: MouseEvent) => void) {
|
||||
window.addEventListener('mousemove', fn);
|
||||
window.addEventListener('touchmove', fn);
|
||||
window.addEventListener('mouseleave', dragClear.bind(null, fn));
|
||||
|
|
@ -56,315 +59,342 @@ function dragClear(fn) {
|
|||
window.removeEventListener('touchend', dragClear);
|
||||
}
|
||||
|
||||
export default defineComponent({
|
||||
provide: {
|
||||
inWindow: true,
|
||||
},
|
||||
const props = withDefaults(defineProps<{
|
||||
initialWidth?: number;
|
||||
initialHeight?: number | null;
|
||||
canResize?: boolean;
|
||||
closeButton?: boolean;
|
||||
mini?: boolean;
|
||||
front?: boolean;
|
||||
contextmenu?: MenuItem[] | null;
|
||||
buttonsLeft?: any[];
|
||||
buttonsRight?: any[];
|
||||
}>(), {
|
||||
initialWidth: 400,
|
||||
initialHeight: null,
|
||||
canResize: false,
|
||||
closeButton: true,
|
||||
mini: false,
|
||||
front: false,
|
||||
contextmenu: null,
|
||||
buttonsLeft: () => [],
|
||||
buttonsRight: () => [],
|
||||
});
|
||||
|
||||
props: {
|
||||
initialWidth: {
|
||||
type: Number,
|
||||
required: false,
|
||||
default: 400,
|
||||
},
|
||||
initialHeight: {
|
||||
type: Number,
|
||||
required: false,
|
||||
default: null,
|
||||
},
|
||||
canResize: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
default: false,
|
||||
},
|
||||
closeButton: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
default: true,
|
||||
},
|
||||
mini: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
default: false,
|
||||
},
|
||||
front: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
default: false,
|
||||
},
|
||||
contextmenu: {
|
||||
type: Array,
|
||||
required: false,
|
||||
},
|
||||
buttonsLeft: {
|
||||
type: Array,
|
||||
required: false,
|
||||
default: () => [],
|
||||
},
|
||||
buttonsRight: {
|
||||
type: Array,
|
||||
required: false,
|
||||
default: () => [],
|
||||
},
|
||||
},
|
||||
const emit = defineEmits<{
|
||||
(ev: 'closed'): void;
|
||||
}>();
|
||||
|
||||
emits: ['closed'],
|
||||
provide('inWindow', true);
|
||||
|
||||
data() {
|
||||
return {
|
||||
showing: true,
|
||||
id: Math.random().toString(), // TODO: UUIDとかにする
|
||||
};
|
||||
},
|
||||
let rootEl = $ref<HTMLElement | null>();
|
||||
let showing = $ref(true);
|
||||
let beforeClickedAt = 0;
|
||||
let maximized = $ref(false);
|
||||
let unMaximizedTop = '';
|
||||
let unMaximizedLeft = '';
|
||||
let unMaximizedWidth = '';
|
||||
let unMaximizedHeight = '';
|
||||
|
||||
mounted() {
|
||||
if (this.initialWidth) this.applyTransformWidth(this.initialWidth);
|
||||
if (this.initialHeight) this.applyTransformHeight(this.initialHeight);
|
||||
function close() {
|
||||
showing = false;
|
||||
}
|
||||
|
||||
this.applyTransformTop((window.innerHeight / 2) - (this.$el.offsetHeight / 2));
|
||||
this.applyTransformLeft((window.innerWidth / 2) - (this.$el.offsetWidth / 2));
|
||||
function onKeydown(evt) {
|
||||
if (evt.which === 27) { // Esc
|
||||
evt.preventDefault();
|
||||
evt.stopPropagation();
|
||||
close();
|
||||
}
|
||||
}
|
||||
|
||||
// 他のウィンドウ内のボタンなどを押してこのウィンドウが開かれた場合、親が最前面になろうとするのでそれに隠されないようにする
|
||||
this.top();
|
||||
function onContextmenu(ev: MouseEvent) {
|
||||
if (props.contextmenu) {
|
||||
os.contextMenu(props.contextmenu, ev);
|
||||
}
|
||||
}
|
||||
|
||||
window.addEventListener('resize', this.onBrowserResize);
|
||||
},
|
||||
// 最前面へ移動
|
||||
function top() {
|
||||
if (rootEl) {
|
||||
rootEl.style.zIndex = os.claimZIndex(props.front ? 'middle' : 'low');
|
||||
}
|
||||
}
|
||||
|
||||
unmounted() {
|
||||
window.removeEventListener('resize', this.onBrowserResize);
|
||||
},
|
||||
function maximize() {
|
||||
maximized = true;
|
||||
unMaximizedTop = rootEl.style.top;
|
||||
unMaximizedLeft = rootEl.style.left;
|
||||
unMaximizedWidth = rootEl.style.width;
|
||||
unMaximizedHeight = rootEl.style.height;
|
||||
rootEl.style.top = '0';
|
||||
rootEl.style.left = '0';
|
||||
rootEl.style.width = '100%';
|
||||
rootEl.style.height = '100%';
|
||||
}
|
||||
|
||||
methods: {
|
||||
close() {
|
||||
this.showing = false;
|
||||
},
|
||||
function unMaximize() {
|
||||
maximized = false;
|
||||
rootEl.style.top = unMaximizedTop;
|
||||
rootEl.style.left = unMaximizedLeft;
|
||||
rootEl.style.width = unMaximizedWidth;
|
||||
rootEl.style.height = unMaximizedHeight;
|
||||
}
|
||||
|
||||
onKeydown(evt) {
|
||||
if (evt.which === 27) { // Esc
|
||||
evt.preventDefault();
|
||||
evt.stopPropagation();
|
||||
this.close();
|
||||
function onBodyMousedown() {
|
||||
top();
|
||||
}
|
||||
|
||||
function onDblClick() {
|
||||
maximize();
|
||||
}
|
||||
|
||||
function onHeaderMousedown(evt: MouseEvent) {
|
||||
// 右クリックはコンテキストメニューを開こうとした可能性が高いため無視
|
||||
if (evt.button === 2) return;
|
||||
|
||||
let beforeMaximized = false;
|
||||
|
||||
if (maximized) {
|
||||
beforeMaximized = true;
|
||||
unMaximize();
|
||||
}
|
||||
|
||||
// ダブルクリック判定
|
||||
if (Date.now() - beforeClickedAt < 300) {
|
||||
beforeClickedAt = Date.now();
|
||||
onDblClick();
|
||||
return;
|
||||
}
|
||||
|
||||
beforeClickedAt = Date.now();
|
||||
|
||||
const main = rootEl;
|
||||
|
||||
if (!contains(main, document.activeElement)) main.focus();
|
||||
|
||||
const position = main.getBoundingClientRect();
|
||||
|
||||
const clickX = evt.touches && evt.touches.length > 0 ? evt.touches[0].clientX : evt.clientX;
|
||||
const clickY = evt.touches && evt.touches.length > 0 ? evt.touches[0].clientY : evt.clientY;
|
||||
const moveBaseX = beforeMaximized ? parseInt(unMaximizedWidth, 10) / 2 : clickX - position.left; // TODO: parseIntやめる
|
||||
const moveBaseY = beforeMaximized ? 20 : clickY - position.top;
|
||||
const browserWidth = window.innerWidth;
|
||||
const browserHeight = window.innerHeight;
|
||||
const windowWidth = main.offsetWidth;
|
||||
const windowHeight = main.offsetHeight;
|
||||
|
||||
function move(x: number, y: number) {
|
||||
let moveLeft = x - moveBaseX;
|
||||
let moveTop = y - moveBaseY;
|
||||
|
||||
// 下はみ出し
|
||||
if (moveTop + windowHeight > browserHeight) moveTop = browserHeight - windowHeight;
|
||||
|
||||
// 左はみ出し
|
||||
if (moveLeft < 0) moveLeft = 0;
|
||||
|
||||
// 上はみ出し
|
||||
if (moveTop < 0) moveTop = 0;
|
||||
|
||||
// 右はみ出し
|
||||
if (moveLeft + windowWidth > browserWidth) moveLeft = browserWidth - windowWidth;
|
||||
|
||||
rootEl.style.left = moveLeft + 'px';
|
||||
rootEl.style.top = moveTop + 'px';
|
||||
}
|
||||
|
||||
if (beforeMaximized) {
|
||||
move(clickX, clickY);
|
||||
}
|
||||
|
||||
// 動かした時
|
||||
dragListen(me => {
|
||||
const x = me.touches && me.touches.length > 0 ? me.touches[0].clientX : me.clientX;
|
||||
const y = me.touches && me.touches.length > 0 ? me.touches[0].clientY : me.clientY;
|
||||
|
||||
move(x, y);
|
||||
});
|
||||
}
|
||||
|
||||
// 上ハンドル掴み時
|
||||
function onTopHandleMousedown(evt) {
|
||||
const main = rootEl;
|
||||
|
||||
const base = evt.clientY;
|
||||
const height = parseInt(getComputedStyle(main, '').height, 10);
|
||||
const top = parseInt(getComputedStyle(main, '').top, 10);
|
||||
|
||||
// 動かした時
|
||||
dragListen(me => {
|
||||
const move = me.clientY - base;
|
||||
if (top + move > 0) {
|
||||
if (height + -move > minHeight) {
|
||||
applyTransformHeight(height + -move);
|
||||
applyTransformTop(top + move);
|
||||
} else { // 最小の高さより小さくなろうとした時
|
||||
applyTransformHeight(minHeight);
|
||||
applyTransformTop(top + (height - minHeight));
|
||||
}
|
||||
},
|
||||
} else { // 上のはみ出し時
|
||||
applyTransformHeight(top + height);
|
||||
applyTransformTop(0);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
onContextmenu(ev: MouseEvent) {
|
||||
if (this.contextmenu) {
|
||||
os.contextMenu(this.contextmenu, ev);
|
||||
// 右ハンドル掴み時
|
||||
function onRightHandleMousedown(evt) {
|
||||
const main = rootEl;
|
||||
|
||||
const base = evt.clientX;
|
||||
const width = parseInt(getComputedStyle(main, '').width, 10);
|
||||
const left = parseInt(getComputedStyle(main, '').left, 10);
|
||||
const browserWidth = window.innerWidth;
|
||||
|
||||
// 動かした時
|
||||
dragListen(me => {
|
||||
const move = me.clientX - base;
|
||||
if (left + width + move < browserWidth) {
|
||||
if (width + move > minWidth) {
|
||||
applyTransformWidth(width + move);
|
||||
} else { // 最小の幅より小さくなろうとした時
|
||||
applyTransformWidth(minWidth);
|
||||
}
|
||||
},
|
||||
} else { // 右のはみ出し時
|
||||
applyTransformWidth(browserWidth - left);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// 最前面へ移動
|
||||
top() {
|
||||
(this.$el as any).style.zIndex = os.claimZIndex(this.front ? 'middle' : 'low');
|
||||
},
|
||||
// 下ハンドル掴み時
|
||||
function onBottomHandleMousedown(evt) {
|
||||
const main = rootEl;
|
||||
|
||||
onBodyMousedown() {
|
||||
this.top();
|
||||
},
|
||||
const base = evt.clientY;
|
||||
const height = parseInt(getComputedStyle(main, '').height, 10);
|
||||
const top = parseInt(getComputedStyle(main, '').top, 10);
|
||||
const browserHeight = window.innerHeight;
|
||||
|
||||
onHeaderMousedown(evt: MouseEvent) {
|
||||
// 右クリックはコンテキストメニューを開こうとした可能性が高いため無視
|
||||
if (evt.button === 2) return;
|
||||
// 動かした時
|
||||
dragListen(me => {
|
||||
const move = me.clientY - base;
|
||||
if (top + height + move < browserHeight) {
|
||||
if (height + move > minHeight) {
|
||||
applyTransformHeight(height + move);
|
||||
} else { // 最小の高さより小さくなろうとした時
|
||||
applyTransformHeight(minHeight);
|
||||
}
|
||||
} else { // 下のはみ出し時
|
||||
applyTransformHeight(browserHeight - top);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
const main = this.$el as any;
|
||||
// 左ハンドル掴み時
|
||||
function onLeftHandleMousedown(evt) {
|
||||
const main = rootEl;
|
||||
|
||||
if (!contains(main, document.activeElement)) main.focus();
|
||||
const base = evt.clientX;
|
||||
const width = parseInt(getComputedStyle(main, '').width, 10);
|
||||
const left = parseInt(getComputedStyle(main, '').left, 10);
|
||||
|
||||
const position = main.getBoundingClientRect();
|
||||
// 動かした時
|
||||
dragListen(me => {
|
||||
const move = me.clientX - base;
|
||||
if (left + move > 0) {
|
||||
if (width + -move > minWidth) {
|
||||
applyTransformWidth(width + -move);
|
||||
applyTransformLeft(left + move);
|
||||
} else { // 最小の幅より小さくなろうとした時
|
||||
applyTransformWidth(minWidth);
|
||||
applyTransformLeft(left + (width - minWidth));
|
||||
}
|
||||
} else { // 左のはみ出し時
|
||||
applyTransformWidth(left + width);
|
||||
applyTransformLeft(0);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
const clickX = evt.touches && evt.touches.length > 0 ? evt.touches[0].clientX : evt.clientX;
|
||||
const clickY = evt.touches && evt.touches.length > 0 ? evt.touches[0].clientY : evt.clientY;
|
||||
const moveBaseX = clickX - position.left;
|
||||
const moveBaseY = clickY - position.top;
|
||||
const browserWidth = window.innerWidth;
|
||||
const browserHeight = window.innerHeight;
|
||||
const windowWidth = main.offsetWidth;
|
||||
const windowHeight = main.offsetHeight;
|
||||
// 左上ハンドル掴み時
|
||||
function onTopLeftHandleMousedown(evt) {
|
||||
onTopHandleMousedown(evt);
|
||||
onLeftHandleMousedown(evt);
|
||||
}
|
||||
|
||||
// 動かした時
|
||||
dragListen(me => {
|
||||
const x = me.touches && me.touches.length > 0 ? me.touches[0].clientX : me.clientX;
|
||||
const y = me.touches && me.touches.length > 0 ? me.touches[0].clientY : me.clientY;
|
||||
// 右上ハンドル掴み時
|
||||
function onTopRightHandleMousedown(evt) {
|
||||
onTopHandleMousedown(evt);
|
||||
onRightHandleMousedown(evt);
|
||||
}
|
||||
|
||||
let moveLeft = x - moveBaseX;
|
||||
let moveTop = y - moveBaseY;
|
||||
// 右下ハンドル掴み時
|
||||
function onBottomRightHandleMousedown(evt) {
|
||||
onBottomHandleMousedown(evt);
|
||||
onRightHandleMousedown(evt);
|
||||
}
|
||||
|
||||
// 下はみ出し
|
||||
if (moveTop + windowHeight > browserHeight) moveTop = browserHeight - windowHeight;
|
||||
// 左下ハンドル掴み時
|
||||
function onBottomLeftHandleMousedown(evt) {
|
||||
onBottomHandleMousedown(evt);
|
||||
onLeftHandleMousedown(evt);
|
||||
}
|
||||
|
||||
// 左はみ出し
|
||||
if (moveLeft < 0) moveLeft = 0;
|
||||
// 高さを適用
|
||||
function applyTransformHeight(height) {
|
||||
if (height > window.innerHeight) height = window.innerHeight;
|
||||
rootEl.style.height = height + 'px';
|
||||
}
|
||||
|
||||
// 上はみ出し
|
||||
if (moveTop < 0) moveTop = 0;
|
||||
// 幅を適用
|
||||
function applyTransformWidth(width) {
|
||||
if (width > window.innerWidth) width = window.innerWidth;
|
||||
rootEl.style.width = width + 'px';
|
||||
}
|
||||
|
||||
// 右はみ出し
|
||||
if (moveLeft + windowWidth > browserWidth) moveLeft = browserWidth - windowWidth;
|
||||
// Y座標を適用
|
||||
function applyTransformTop(top) {
|
||||
rootEl.style.top = top + 'px';
|
||||
}
|
||||
|
||||
this.$el.style.left = moveLeft + 'px';
|
||||
this.$el.style.top = moveTop + 'px';
|
||||
});
|
||||
},
|
||||
// X座標を適用
|
||||
function applyTransformLeft(left) {
|
||||
rootEl.style.left = left + 'px';
|
||||
}
|
||||
|
||||
// 上ハンドル掴み時
|
||||
onTopHandleMousedown(evt) {
|
||||
const main = this.$el as any;
|
||||
function onBrowserResize() {
|
||||
const main = rootEl;
|
||||
const position = main.getBoundingClientRect();
|
||||
const browserWidth = window.innerWidth;
|
||||
const browserHeight = window.innerHeight;
|
||||
const windowWidth = main.offsetWidth;
|
||||
const windowHeight = main.offsetHeight;
|
||||
if (position.left < 0) main.style.left = '0'; // 左はみ出し
|
||||
if (position.top + windowHeight > browserHeight) main.style.top = browserHeight - windowHeight + 'px'; // 下はみ出し
|
||||
if (position.left + windowWidth > browserWidth) main.style.left = browserWidth - windowWidth + 'px'; // 右はみ出し
|
||||
if (position.top < 0) main.style.top = '0'; // 上はみ出し
|
||||
}
|
||||
|
||||
const base = evt.clientY;
|
||||
const height = parseInt(getComputedStyle(main, '').height, 10);
|
||||
const top = parseInt(getComputedStyle(main, '').top, 10);
|
||||
onMounted(() => {
|
||||
if (props.initialWidth) applyTransformWidth(props.initialWidth);
|
||||
if (props.initialHeight) applyTransformHeight(props.initialHeight);
|
||||
|
||||
// 動かした時
|
||||
dragListen(me => {
|
||||
const move = me.clientY - base;
|
||||
if (top + move > 0) {
|
||||
if (height + -move > minHeight) {
|
||||
this.applyTransformHeight(height + -move);
|
||||
this.applyTransformTop(top + move);
|
||||
} else { // 最小の高さより小さくなろうとした時
|
||||
this.applyTransformHeight(minHeight);
|
||||
this.applyTransformTop(top + (height - minHeight));
|
||||
}
|
||||
} else { // 上のはみ出し時
|
||||
this.applyTransformHeight(top + height);
|
||||
this.applyTransformTop(0);
|
||||
}
|
||||
});
|
||||
},
|
||||
applyTransformTop((window.innerHeight / 2) - (rootEl.offsetHeight / 2));
|
||||
applyTransformLeft((window.innerWidth / 2) - (rootEl.offsetWidth / 2));
|
||||
|
||||
// 右ハンドル掴み時
|
||||
onRightHandleMousedown(evt) {
|
||||
const main = this.$el as any;
|
||||
// 他のウィンドウ内のボタンなどを押してこのウィンドウが開かれた場合、親が最前面になろうとするのでそれに隠されないようにする
|
||||
top();
|
||||
|
||||
const base = evt.clientX;
|
||||
const width = parseInt(getComputedStyle(main, '').width, 10);
|
||||
const left = parseInt(getComputedStyle(main, '').left, 10);
|
||||
const browserWidth = window.innerWidth;
|
||||
window.addEventListener('resize', onBrowserResize);
|
||||
});
|
||||
|
||||
// 動かした時
|
||||
dragListen(me => {
|
||||
const move = me.clientX - base;
|
||||
if (left + width + move < browserWidth) {
|
||||
if (width + move > minWidth) {
|
||||
this.applyTransformWidth(width + move);
|
||||
} else { // 最小の幅より小さくなろうとした時
|
||||
this.applyTransformWidth(minWidth);
|
||||
}
|
||||
} else { // 右のはみ出し時
|
||||
this.applyTransformWidth(browserWidth - left);
|
||||
}
|
||||
});
|
||||
},
|
||||
onBeforeUnmount(() => {
|
||||
window.removeEventListener('resize', onBrowserResize);
|
||||
});
|
||||
|
||||
// 下ハンドル掴み時
|
||||
onBottomHandleMousedown(evt) {
|
||||
const main = this.$el as any;
|
||||
|
||||
const base = evt.clientY;
|
||||
const height = parseInt(getComputedStyle(main, '').height, 10);
|
||||
const top = parseInt(getComputedStyle(main, '').top, 10);
|
||||
const browserHeight = window.innerHeight;
|
||||
|
||||
// 動かした時
|
||||
dragListen(me => {
|
||||
const move = me.clientY - base;
|
||||
if (top + height + move < browserHeight) {
|
||||
if (height + move > minHeight) {
|
||||
this.applyTransformHeight(height + move);
|
||||
} else { // 最小の高さより小さくなろうとした時
|
||||
this.applyTransformHeight(minHeight);
|
||||
}
|
||||
} else { // 下のはみ出し時
|
||||
this.applyTransformHeight(browserHeight - top);
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
// 左ハンドル掴み時
|
||||
onLeftHandleMousedown(evt) {
|
||||
const main = this.$el as any;
|
||||
|
||||
const base = evt.clientX;
|
||||
const width = parseInt(getComputedStyle(main, '').width, 10);
|
||||
const left = parseInt(getComputedStyle(main, '').left, 10);
|
||||
|
||||
// 動かした時
|
||||
dragListen(me => {
|
||||
const move = me.clientX - base;
|
||||
if (left + move > 0) {
|
||||
if (width + -move > minWidth) {
|
||||
this.applyTransformWidth(width + -move);
|
||||
this.applyTransformLeft(left + move);
|
||||
} else { // 最小の幅より小さくなろうとした時
|
||||
this.applyTransformWidth(minWidth);
|
||||
this.applyTransformLeft(left + (width - minWidth));
|
||||
}
|
||||
} else { // 左のはみ出し時
|
||||
this.applyTransformWidth(left + width);
|
||||
this.applyTransformLeft(0);
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
// 左上ハンドル掴み時
|
||||
onTopLeftHandleMousedown(evt) {
|
||||
this.onTopHandleMousedown(evt);
|
||||
this.onLeftHandleMousedown(evt);
|
||||
},
|
||||
|
||||
// 右上ハンドル掴み時
|
||||
onTopRightHandleMousedown(evt) {
|
||||
this.onTopHandleMousedown(evt);
|
||||
this.onRightHandleMousedown(evt);
|
||||
},
|
||||
|
||||
// 右下ハンドル掴み時
|
||||
onBottomRightHandleMousedown(evt) {
|
||||
this.onBottomHandleMousedown(evt);
|
||||
this.onRightHandleMousedown(evt);
|
||||
},
|
||||
|
||||
// 左下ハンドル掴み時
|
||||
onBottomLeftHandleMousedown(evt) {
|
||||
this.onBottomHandleMousedown(evt);
|
||||
this.onLeftHandleMousedown(evt);
|
||||
},
|
||||
|
||||
// 高さを適用
|
||||
applyTransformHeight(height) {
|
||||
if (height > window.innerHeight) height = window.innerHeight;
|
||||
(this.$el as any).style.height = height + 'px';
|
||||
},
|
||||
|
||||
// 幅を適用
|
||||
applyTransformWidth(width) {
|
||||
if (width > window.innerWidth) width = window.innerWidth;
|
||||
(this.$el as any).style.width = width + 'px';
|
||||
},
|
||||
|
||||
// Y座標を適用
|
||||
applyTransformTop(top) {
|
||||
(this.$el as any).style.top = top + 'px';
|
||||
},
|
||||
|
||||
// X座標を適用
|
||||
applyTransformLeft(left) {
|
||||
(this.$el as any).style.left = left + 'px';
|
||||
},
|
||||
|
||||
onBrowserResize() {
|
||||
const main = this.$el as any;
|
||||
const position = main.getBoundingClientRect();
|
||||
const browserWidth = window.innerWidth;
|
||||
const browserHeight = window.innerHeight;
|
||||
const windowWidth = main.offsetWidth;
|
||||
const windowHeight = main.offsetHeight;
|
||||
if (position.left < 0) main.style.left = 0; // 左はみ出し
|
||||
if (position.top + windowHeight > browserHeight) main.style.top = browserHeight - windowHeight + 'px'; // 下はみ出し
|
||||
if (position.left + windowWidth > browserWidth) main.style.left = browserWidth - windowWidth + 'px'; // 右はみ出し
|
||||
if (position.top < 0) main.style.top = 0; // 上はみ出し
|
||||
},
|
||||
},
|
||||
defineExpose({
|
||||
close,
|
||||
});
|
||||
</script>
|
||||
|
||||
|
|
@ -384,7 +414,7 @@ export default defineComponent({
|
|||
left: 0;
|
||||
|
||||
> .body {
|
||||
overflow: hidden;
|
||||
overflow: clip;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
contain: content;
|
||||
|
|
@ -393,7 +423,7 @@ export default defineComponent({
|
|||
border-radius: var(--radius);
|
||||
|
||||
> .header {
|
||||
--height: 45px;
|
||||
--height: 42px;
|
||||
|
||||
&.mini {
|
||||
--height: 38px;
|
||||
|
|
@ -522,5 +552,11 @@ export default defineComponent({
|
|||
cursor: nesw-resize;
|
||||
}
|
||||
}
|
||||
|
||||
&.maximized {
|
||||
> .body {
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,14 +1,14 @@
|
|||
<template>
|
||||
<div v-if="playerEnabled" class="player" :style="`padding: ${(player.height || 0) / (player.width || 1) * 100}% 0 0`">
|
||||
<button class="disablePlayer" :title="$ts.disablePlayer" @click="playerEnabled = false"><i class="fas fa-times"></i></button>
|
||||
<iframe :src="player.url + (player.url.match(/\?/) ? '&autoplay=1&auto_play=1' : '?autoplay=1&auto_play=1')" :width="player.width || '100%'" :heigth="player.height || 250" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen />
|
||||
<iframe :src="player.url + (player.url.match(/\?/) ? '&autoplay=1&auto_play=1' : '?autoplay=1&auto_play=1')" :width="player.width || '100%'" :heigth="player.height || 250" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen/>
|
||||
</div>
|
||||
<div v-else-if="tweetId && tweetExpanded" ref="twitter" class="twitter">
|
||||
<iframe ref="tweet" scrolling="no" frameborder="no" :style="{ position: 'relative', width: '100%', height: `${tweetHeight}px` }" :src="`https://platform.twitter.com/embed/index.html?embedId=${embedId}&hideCard=false&hideThread=false&lang=en&theme=${$store.state.darkMode ? 'dark' : 'light'}&id=${tweetId}`"></iframe>
|
||||
</div>
|
||||
<div v-else v-size="{ max: [400, 350] }" class="mk-url-preview">
|
||||
<transition :name="$store.state.animation ? 'zoom' : ''" mode="out-in">
|
||||
<component :is="self ? 'MkA' : 'a'" v-if="!fetching" :class="{ compact }" :[attr]="self ? url.substr(local.length) : url" rel="nofollow noopener" :target="target" :title="url">
|
||||
<component :is="self ? 'MkA' : 'a'" v-if="!fetching" class="link" :class="{ compact }" :[attr]="self ? url.substr(local.length) : url" rel="nofollow noopener" :target="target" :title="url">
|
||||
<div v-if="thumbnail" class="thumbnail" :style="`background-image: url('${thumbnail}')`">
|
||||
<button v-if="!playerEnabled && player.url" class="_button" :title="$ts.enablePlayer" @click.prevent="playerEnabled = true"><i class="fas fa-play-circle"></i></button>
|
||||
</div>
|
||||
|
|
@ -57,7 +57,7 @@ let sitename = $ref<string | null>(null);
|
|||
let player = $ref({
|
||||
url: null,
|
||||
width: null,
|
||||
height: null
|
||||
height: null,
|
||||
});
|
||||
let playerEnabled = $ref(false);
|
||||
let tweetId = $ref<string | null>(null);
|
||||
|
|
@ -143,7 +143,7 @@ onUnmounted(() => {
|
|||
|
||||
.mk-url-preview {
|
||||
&.max-width_400px {
|
||||
> a {
|
||||
> .link {
|
||||
font-size: 12px;
|
||||
|
||||
> .thumbnail {
|
||||
|
|
@ -157,7 +157,7 @@ onUnmounted(() => {
|
|||
}
|
||||
|
||||
&.max-width_350px {
|
||||
> a {
|
||||
> .link {
|
||||
font-size: 10px;
|
||||
|
||||
> .thumbnail {
|
||||
|
|
@ -205,7 +205,7 @@ onUnmounted(() => {
|
|||
}
|
||||
}
|
||||
|
||||
> a {
|
||||
> .link {
|
||||
position: relative;
|
||||
display: block;
|
||||
font-size: 14px;
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@
|
|||
<div class="tbhwbxda">
|
||||
<div class="form">
|
||||
<FormSplit :min-width="170">
|
||||
<MkInput ref="usernameEl" v-model="username" @update:modelValue="search">
|
||||
<MkInput v-model="username" :autofocus="true" @update:modelValue="search">
|
||||
<template #label>{{ $ts.username }}</template>
|
||||
<template #prefix>@</template>
|
||||
</MkInput>
|
||||
|
|
@ -70,15 +70,8 @@ let host = $ref('');
|
|||
let users: misskey.entities.UserDetailed[] = $ref([]);
|
||||
let recentUsers: misskey.entities.UserDetailed[] = $ref([]);
|
||||
let selected: misskey.entities.UserDetailed | null = $ref(null);
|
||||
let usernameEl: HTMLElement = $ref();
|
||||
let dialogEl = $ref();
|
||||
|
||||
const focus = () => {
|
||||
if (usernameEl) {
|
||||
usernameEl.focus();
|
||||
}
|
||||
};
|
||||
|
||||
const search = () => {
|
||||
if (username === '' && host === '') {
|
||||
users = [];
|
||||
|
|
@ -112,12 +105,6 @@ const cancel = () => {
|
|||
};
|
||||
|
||||
onMounted(() => {
|
||||
focus();
|
||||
|
||||
nextTick(() => {
|
||||
focus();
|
||||
});
|
||||
|
||||
os.api('users/show', {
|
||||
userIds: defaultStore.state.recentlyUsedUsers,
|
||||
}).then(users => {
|
||||
|
|
|
|||
|
|
@ -105,7 +105,7 @@ function choose(visibility: typeof misskey.noteVisibilities[number]): void {
|
|||
}
|
||||
|
||||
&.active {
|
||||
color: #fff;
|
||||
color: var(--fgOnAccent);
|
||||
background: var(--accent);
|
||||
}
|
||||
|
||||
|
|
|
|||
47
packages/client/src/components/visibility.vue
Normal file
47
packages/client/src/components/visibility.vue
Normal file
|
|
@ -0,0 +1,47 @@
|
|||
<template>
|
||||
<span v-if="note.visibility !== 'public'" :class="$style.visibility">
|
||||
<i v-if="note.visibility === 'home'" class="fas fa-home"></i>
|
||||
<i v-else-if="note.visibility === 'followers'" class="fas fa-unlock"></i>
|
||||
<i v-else-if="note.visibility === 'specified'" ref="specified" class="fas fa-envelope"></i>
|
||||
</span>
|
||||
<span v-if="note.localOnly" :class="$style.localOnly"><i class="fas fa-biohazard"></i></span>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref } from 'vue';
|
||||
import XDetails from '@/components/users-tooltip.vue';
|
||||
import * as os from '@/os';
|
||||
import { useTooltip } from '@/scripts/use-tooltip';
|
||||
|
||||
const props = defineProps<{
|
||||
note: {
|
||||
visibility: string;
|
||||
localOnly?: boolean;
|
||||
visibleUserIds?: string[];
|
||||
},
|
||||
}>();
|
||||
|
||||
const specified = $ref<HTMLElement>();
|
||||
|
||||
if (props.note.visibility === 'specified') {
|
||||
useTooltip($$(specified), async (showing) => {
|
||||
const users = await os.api('users/show', {
|
||||
userIds: props.note.visibleUserIds,
|
||||
limit: 10,
|
||||
});
|
||||
|
||||
os.popup(XDetails, {
|
||||
showing,
|
||||
users,
|
||||
count: props.note.visibleUserIds.length,
|
||||
targetElement: specified,
|
||||
}, {}, 'closed');
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" module>
|
||||
.visibility, .localOnly {
|
||||
margin-left: 0.5em;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -4,7 +4,7 @@
|
|||
<header>
|
||||
<MkSelect v-model="widgetAdderSelected" style="margin-bottom: var(--margin)" class="mk-widget-select">
|
||||
<template #label>{{ $ts.selectWidget }}</template>
|
||||
<option v-for="widget in widgetDefs" :key="widget" :value="widget">{{ $t(`_widgets.${widget}`) }}</option>
|
||||
<option v-for="widget in widgetDefs" :key="widget" :value="widget">{{ i18n.t(`_widgets.${widget}`) }}</option>
|
||||
</MkSelect>
|
||||
<MkButton inline primary class="mk-widget-add" @click="addWidget"><i class="fas fa-plus"></i> {{ $ts.add }}</MkButton>
|
||||
<MkButton inline @click="$emit('exit')">{{ $ts.close }}</MkButton>
|
||||
|
|
@ -26,79 +26,91 @@
|
|||
</template>
|
||||
</XDraggable>
|
||||
</template>
|
||||
<component :is="`mkw-${widget.name}`" v-for="widget in widgets" v-else :key="widget.id" class="widget" :widget="widget" @updateProps="updateWidget(widget.id, $event)"/>
|
||||
<component :is="`mkw-${widget.name}`" v-for="widget in widgets" v-else :key="widget.id" :ref="el => widgetRefs[widget.id] = el" class="widget" :widget="widget" @updateProps="updateWidget(widget.id, $event)" @contextmenu.stop="onContextmenu(widget, $event)"/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, defineAsyncComponent, reactive, ref, computed } from 'vue';
|
||||
<script lang="ts" setup>
|
||||
import { defineAsyncComponent, reactive, ref, computed } from 'vue';
|
||||
import { v4 as uuid } from 'uuid';
|
||||
import MkSelect from '@/components/form/select.vue';
|
||||
import MkButton from '@/components/ui/button.vue';
|
||||
import { widgets as widgetDefs } from '@/widgets';
|
||||
import * as os from '@/os';
|
||||
import { i18n } from '@/i18n';
|
||||
|
||||
export default defineComponent({
|
||||
components: {
|
||||
XDraggable: defineAsyncComponent(() => import('vuedraggable')),
|
||||
MkSelect,
|
||||
MkButton,
|
||||
},
|
||||
const XDraggable = defineAsyncComponent(() => import('vuedraggable'));
|
||||
|
||||
props: {
|
||||
widgets: {
|
||||
type: Array,
|
||||
required: true,
|
||||
},
|
||||
edit: {
|
||||
type: Boolean,
|
||||
required: true,
|
||||
},
|
||||
},
|
||||
type Widget = {
|
||||
name: string;
|
||||
id: string;
|
||||
data: Record<string, any>;
|
||||
};
|
||||
|
||||
emits: ['updateWidgets', 'addWidget', 'removeWidget', 'updateWidget', 'exit'],
|
||||
const props = defineProps<{
|
||||
widgets: Widget[];
|
||||
edit: boolean;
|
||||
}>();
|
||||
|
||||
setup(props, context) {
|
||||
const widgetRefs = reactive({});
|
||||
const configWidget = (id: string) => {
|
||||
widgetRefs[id].configure();
|
||||
};
|
||||
const widgetAdderSelected = ref(null);
|
||||
const addWidget = () => {
|
||||
if (widgetAdderSelected.value == null) return;
|
||||
const emit = defineEmits<{
|
||||
(ev: 'updateWidgets', widgets: Widget[]): void;
|
||||
(ev: 'addWidget', widget: Widget): void;
|
||||
(ev: 'removeWidget', widget: Widget): void;
|
||||
(ev: 'updateWidget', widget: Partial<Widget>): void;
|
||||
(ev: 'exit'): void;
|
||||
}>();
|
||||
|
||||
context.emit('addWidget', {
|
||||
name: widgetAdderSelected.value,
|
||||
id: uuid(),
|
||||
data: {},
|
||||
});
|
||||
const widgetRefs = {};
|
||||
const configWidget = (id: string) => {
|
||||
widgetRefs[id].configure();
|
||||
};
|
||||
const widgetAdderSelected = ref(null);
|
||||
const addWidget = () => {
|
||||
if (widgetAdderSelected.value == null) return;
|
||||
|
||||
widgetAdderSelected.value = null;
|
||||
};
|
||||
const removeWidget = (widget) => {
|
||||
context.emit('removeWidget', widget);
|
||||
};
|
||||
const updateWidget = (id, data) => {
|
||||
context.emit('updateWidget', { id, data });
|
||||
};
|
||||
const widgets_ = computed({
|
||||
get: () => props.widgets,
|
||||
set: (value) => {
|
||||
context.emit('updateWidgets', value);
|
||||
},
|
||||
});
|
||||
emit('addWidget', {
|
||||
name: widgetAdderSelected.value,
|
||||
id: uuid(),
|
||||
data: {},
|
||||
});
|
||||
|
||||
return {
|
||||
widgetRefs,
|
||||
configWidget,
|
||||
widgetAdderSelected,
|
||||
widgetDefs,
|
||||
addWidget,
|
||||
removeWidget,
|
||||
updateWidget,
|
||||
widgets_,
|
||||
};
|
||||
widgetAdderSelected.value = null;
|
||||
};
|
||||
const removeWidget = (widget) => {
|
||||
emit('removeWidget', widget);
|
||||
};
|
||||
const updateWidget = (id, data) => {
|
||||
emit('updateWidget', { id, data });
|
||||
};
|
||||
const widgets_ = computed({
|
||||
get: () => props.widgets,
|
||||
set: (value) => {
|
||||
emit('updateWidgets', value);
|
||||
},
|
||||
});
|
||||
|
||||
function onContextmenu(widget: Widget, ev: MouseEvent) {
|
||||
const isLink = (el: HTMLElement) => {
|
||||
if (el.tagName === 'A') return true;
|
||||
if (el.parentElement) {
|
||||
return isLink(el.parentElement);
|
||||
}
|
||||
};
|
||||
if (isLink(ev.target)) return;
|
||||
if (['INPUT', 'TEXTAREA', 'IMG', 'VIDEO', 'CANVAS'].includes(ev.target.tagName) || ev.target.attributes['contenteditable']) return;
|
||||
if (window.getSelection()?.toString() !== '') return;
|
||||
|
||||
os.contextMenu([{
|
||||
type: 'label',
|
||||
text: i18n.t(`_widgets.${widget.name}`),
|
||||
}, {
|
||||
icon: 'fas fa-cog',
|
||||
text: i18n.ts.settings,
|
||||
action: () => {
|
||||
configWidget(widget.id);
|
||||
},
|
||||
}], ev);
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
|
@ -113,6 +125,7 @@ export default defineComponent({
|
|||
}
|
||||
|
||||
> .widget, .customize-container {
|
||||
contain: content;
|
||||
margin: var(--margin) 0;
|
||||
|
||||
&:first-of-type {
|
||||
|
|
|
|||
|
|
@ -8,7 +8,6 @@ import tooltip from './tooltip';
|
|||
import hotkey from './hotkey';
|
||||
import appear from './appear';
|
||||
import anim from './anim';
|
||||
import stickyContainer from './sticky-container';
|
||||
import clickAnime from './click-anime';
|
||||
import panel from './panel';
|
||||
import adaptiveBorder from './adaptive-border';
|
||||
|
|
@ -24,7 +23,6 @@ export default function(app: App) {
|
|||
app.directive('appear', appear);
|
||||
app.directive('anim', anim);
|
||||
app.directive('click-anime', clickAnime);
|
||||
app.directive('sticky-container', stickyContainer);
|
||||
app.directive('panel', panel);
|
||||
app.directive('adaptive-border', adaptiveBorder);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -27,8 +27,8 @@ function getClassOrder(width: number, queue: Value): ClassOrder {
|
|||
...(queue.min ? queue.min.filter(v => width >= v).map(getMinClass) : []),
|
||||
],
|
||||
remove: [
|
||||
...(queue.max ? queue.max.filter(v => width > v).map(getMaxClass) : []),
|
||||
...(queue.min ? queue.min.filter(v => width < v).map(getMinClass) : []),
|
||||
...(queue.max ? queue.max.filter(v => width > v).map(getMaxClass) : []),
|
||||
...(queue.min ? queue.min.filter(v => width < v).map(getMinClass) : []),
|
||||
]
|
||||
};
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,17 +0,0 @@
|
|||
import { Directive } from 'vue';
|
||||
|
||||
export default {
|
||||
mounted(src, binding, vn) {
|
||||
//const query = binding.value;
|
||||
|
||||
const header = src.children[0];
|
||||
const body = src.children[1];
|
||||
const currentStickyTop = getComputedStyle(src).getPropertyValue('--stickyTop') || '0px';
|
||||
src.style.setProperty('--stickyTop', `calc(${currentStickyTop} + ${header.offsetHeight}px)`);
|
||||
if (body) body.dataset.stickyContainerHeaderHeight = header.offsetHeight.toString();
|
||||
header.style.setProperty('--stickyTop', currentStickyTop);
|
||||
header.style.position = 'sticky';
|
||||
header.style.top = 'var(--stickyTop)';
|
||||
header.style.zIndex = '1';
|
||||
},
|
||||
} as Directive;
|
||||
|
|
@ -7,10 +7,11 @@ import { popup, alert } from '@/os';
|
|||
|
||||
const start = isTouchUsing ? 'touchstart' : 'mouseover';
|
||||
const end = isTouchUsing ? 'touchend' : 'mouseleave';
|
||||
const delay = 100;
|
||||
|
||||
export default {
|
||||
mounted(el: HTMLElement, binding, vn) {
|
||||
const delay = binding.modifiers.noDelay ? 0 : 100;
|
||||
|
||||
const self = (el as any)._tooltipDirective_ = {} as any;
|
||||
|
||||
self.text = binding.value as string;
|
||||
|
|
@ -49,6 +50,7 @@ export default {
|
|||
showing,
|
||||
text: self.text,
|
||||
asMfm: binding.modifiers.mfm,
|
||||
direction: binding.modifiers.left ? 'left' : binding.modifiers.right ? 'right' : binding.modifiers.top ? 'top' : binding.modifiers.bottom ? 'bottom' : 'top',
|
||||
targetElement: el,
|
||||
}, {}, 'closed');
|
||||
|
||||
|
|
|
|||
|
|
@ -39,401 +39,403 @@ import { reactionPicker } from '@/scripts/reaction-picker';
|
|||
import { getUrlWithoutLoginId } from '@/scripts/login-id';
|
||||
import { getAccountFromId } from '@/scripts/get-account-from-id';
|
||||
|
||||
console.info(`Misskey v${version}`);
|
||||
(async () => {
|
||||
console.info(`Misskey v${version}`);
|
||||
|
||||
if (_DEV_) {
|
||||
console.warn('Development mode!!!');
|
||||
if (_DEV_) {
|
||||
console.warn('Development mode!!!');
|
||||
|
||||
console.info(`vue ${vueVersion}`);
|
||||
console.info(`vue ${vueVersion}`);
|
||||
|
||||
(window as any).$i = $i;
|
||||
(window as any).$store = defaultStore;
|
||||
(window as any).$i = $i;
|
||||
(window as any).$store = defaultStore;
|
||||
|
||||
window.addEventListener('error', event => {
|
||||
console.error(event);
|
||||
/*
|
||||
alert({
|
||||
type: 'error',
|
||||
title: 'DEV: Unhandled error',
|
||||
text: event.message
|
||||
window.addEventListener('error', event => {
|
||||
console.error(event);
|
||||
/*
|
||||
alert({
|
||||
type: 'error',
|
||||
title: 'DEV: Unhandled error',
|
||||
text: event.message
|
||||
});
|
||||
*/
|
||||
});
|
||||
*/
|
||||
|
||||
window.addEventListener('unhandledrejection', event => {
|
||||
console.error(event);
|
||||
/*
|
||||
alert({
|
||||
type: 'error',
|
||||
title: 'DEV: Unhandled promise rejection',
|
||||
text: event.reason
|
||||
});
|
||||
*/
|
||||
});
|
||||
}
|
||||
|
||||
// タッチデバイスでCSSの:hoverを機能させる
|
||||
document.addEventListener('touchend', () => {}, { passive: true });
|
||||
|
||||
// 一斉リロード
|
||||
reloadChannel.addEventListener('message', path => {
|
||||
if (path !== null) location.href = path;
|
||||
else location.reload();
|
||||
});
|
||||
|
||||
window.addEventListener('unhandledrejection', event => {
|
||||
console.error(event);
|
||||
/*
|
||||
alert({
|
||||
type: 'error',
|
||||
title: 'DEV: Unhandled promise rejection',
|
||||
text: event.reason
|
||||
});
|
||||
*/
|
||||
});
|
||||
}
|
||||
|
||||
// タッチデバイスでCSSの:hoverを機能させる
|
||||
document.addEventListener('touchend', () => {}, { passive: true });
|
||||
|
||||
// 一斉リロード
|
||||
reloadChannel.addEventListener('message', path => {
|
||||
if (path !== null) location.href = path;
|
||||
else location.reload();
|
||||
});
|
||||
|
||||
//#region SEE: https://css-tricks.com/the-trick-to-viewport-units-on-mobile/
|
||||
// TODO: いつの日にか消したい
|
||||
const vh = window.innerHeight * 0.01;
|
||||
document.documentElement.style.setProperty('--vh', `${vh}px`);
|
||||
window.addEventListener('resize', () => {
|
||||
//#region SEE: https://css-tricks.com/the-trick-to-viewport-units-on-mobile/
|
||||
// TODO: いつの日にか消したい
|
||||
const vh = window.innerHeight * 0.01;
|
||||
document.documentElement.style.setProperty('--vh', `${vh}px`);
|
||||
});
|
||||
//#endregion
|
||||
window.addEventListener('resize', () => {
|
||||
const vh = window.innerHeight * 0.01;
|
||||
document.documentElement.style.setProperty('--vh', `${vh}px`);
|
||||
});
|
||||
//#endregion
|
||||
|
||||
// If mobile, insert the viewport meta tag
|
||||
if (['smartphone', 'tablet'].includes(deviceKind)) {
|
||||
const viewport = document.getElementsByName('viewport').item(0);
|
||||
viewport.setAttribute('content',
|
||||
`${viewport.getAttribute('content')}, minimum-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover`);
|
||||
}
|
||||
|
||||
//#region Set lang attr
|
||||
const html = document.documentElement;
|
||||
html.setAttribute('lang', lang);
|
||||
//#endregion
|
||||
|
||||
//#region loginId
|
||||
const params = new URLSearchParams(location.search);
|
||||
const loginId = params.get('loginId');
|
||||
|
||||
if (loginId) {
|
||||
const target = getUrlWithoutLoginId(location.href);
|
||||
|
||||
if (!$i || $i.id !== loginId) {
|
||||
const account = await getAccountFromId(loginId);
|
||||
if (account) {
|
||||
await login(account.token, target);
|
||||
}
|
||||
// If mobile, insert the viewport meta tag
|
||||
if (['smartphone', 'tablet'].includes(deviceKind)) {
|
||||
const viewport = document.getElementsByName('viewport').item(0);
|
||||
viewport.setAttribute('content',
|
||||
`${viewport.getAttribute('content')}, minimum-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover`);
|
||||
}
|
||||
|
||||
history.replaceState({ misskey: 'loginId' }, '', target);
|
||||
}
|
||||
//#region Set lang attr
|
||||
const html = document.documentElement;
|
||||
html.setAttribute('lang', lang);
|
||||
//#endregion
|
||||
|
||||
//#endregion
|
||||
//#region loginId
|
||||
const params = new URLSearchParams(location.search);
|
||||
const loginId = params.get('loginId');
|
||||
|
||||
//#region Fetch user
|
||||
if ($i && $i.token) {
|
||||
if (_DEV_) {
|
||||
console.log('account cache found. refreshing...');
|
||||
}
|
||||
if (loginId) {
|
||||
const target = getUrlWithoutLoginId(location.href);
|
||||
|
||||
refreshAccount();
|
||||
} else {
|
||||
if (_DEV_) {
|
||||
console.log('no account cache found.');
|
||||
}
|
||||
|
||||
// 連携ログインの場合用にCookieを参照する
|
||||
const i = (document.cookie.match(/igi=(\w+)/) || [null, null])[1];
|
||||
|
||||
if (i != null && i !== 'null') {
|
||||
if (_DEV_) {
|
||||
console.log('signing...');
|
||||
}
|
||||
|
||||
try {
|
||||
document.body.innerHTML = '<div>Please wait...</div>';
|
||||
await login(i);
|
||||
} catch (err) {
|
||||
// Render the error screen
|
||||
// TODO: ちゃんとしたコンポーネントをレンダリングする(v10とかのトラブルシューティングゲーム付きのやつみたいな)
|
||||
document.body.innerHTML = '<div id="err">Oops!</div>';
|
||||
}
|
||||
} else {
|
||||
if (_DEV_) {
|
||||
console.log('not signed in');
|
||||
}
|
||||
}
|
||||
}
|
||||
//#endregion
|
||||
|
||||
const fetchInstanceMetaPromise = fetchInstance();
|
||||
|
||||
fetchInstanceMetaPromise.then(() => {
|
||||
localStorage.setItem('v', instance.version);
|
||||
|
||||
// Init service worker
|
||||
initializeSw();
|
||||
});
|
||||
|
||||
const app = createApp(
|
||||
window.location.search === '?zen' ? defineAsyncComponent(() => import('@/ui/zen.vue')) :
|
||||
!$i ? defineAsyncComponent(() => import('@/ui/visitor.vue')) :
|
||||
ui === 'deck' ? defineAsyncComponent(() => import('@/ui/deck.vue')) :
|
||||
ui === 'classic' ? defineAsyncComponent(() => import('@/ui/classic.vue')) :
|
||||
defineAsyncComponent(() => import('@/ui/universal.vue')),
|
||||
);
|
||||
|
||||
if (_DEV_) {
|
||||
app.config.performance = true;
|
||||
}
|
||||
|
||||
app.config.globalProperties = {
|
||||
$i,
|
||||
$store: defaultStore,
|
||||
$instance: instance,
|
||||
$t: i18n.t,
|
||||
$ts: i18n.ts,
|
||||
};
|
||||
|
||||
widgets(app);
|
||||
directives(app);
|
||||
components(app);
|
||||
|
||||
const splash = document.getElementById('splash');
|
||||
// 念のためnullチェック(HTMLが古い場合があるため(そのうち消す))
|
||||
if (splash) splash.addEventListener('transitionend', () => {
|
||||
splash.remove();
|
||||
});
|
||||
|
||||
// https://github.com/misskey-dev/misskey/pull/8575#issuecomment-1114239210
|
||||
// なぜかinit.tsの内容が2回実行されることがあるため、mountするdivを1つに制限する
|
||||
const rootEl = (() => {
|
||||
const MISSKEY_MOUNT_DIV_ID = 'misskey_app';
|
||||
|
||||
const currentEl = document.getElementById(MISSKEY_MOUNT_DIV_ID);
|
||||
|
||||
if (currentEl) {
|
||||
console.warn('multiple import detected');
|
||||
return currentEl;
|
||||
}
|
||||
|
||||
const rootEl = document.createElement('div');
|
||||
rootEl.id = MISSKEY_MOUNT_DIV_ID;
|
||||
document.body.appendChild(rootEl);
|
||||
return rootEl;
|
||||
})();
|
||||
|
||||
app.mount(rootEl);
|
||||
|
||||
// boot.jsのやつを解除
|
||||
window.onerror = null;
|
||||
window.onunhandledrejection = null;
|
||||
|
||||
reactionPicker.init();
|
||||
|
||||
if (splash) {
|
||||
splash.style.opacity = '0';
|
||||
splash.style.pointerEvents = 'none';
|
||||
}
|
||||
|
||||
// クライアントが更新されたか？
|
||||
const lastVersion = localStorage.getItem('lastVersion');
|
||||
if (lastVersion !== version) {
|
||||
localStorage.setItem('lastVersion', version);
|
||||
|
||||
// テーマリビルドするため
|
||||
localStorage.removeItem('theme');
|
||||
|
||||
try { // 変なバージョン文字列来るとcompareVersionsでエラーになるため
|
||||
if (lastVersion != null && compareVersions(version, lastVersion) === 1) {
|
||||
// ログインしてる場合だけ
|
||||
if ($i) {
|
||||
popup(defineAsyncComponent(() => import('@/components/updated.vue')), {}, {}, 'closed');
|
||||
if (!$i || $i.id !== loginId) {
|
||||
const account = await getAccountFromId(loginId);
|
||||
if (account) {
|
||||
await login(account.token, target);
|
||||
}
|
||||
}
|
||||
} catch (err) {
|
||||
|
||||
history.replaceState({ misskey: 'loginId' }, '', target);
|
||||
}
|
||||
}
|
||||
|
||||
// NOTE: この処理は必ず↑のクライアント更新時処理より後に来ること(テーマ再構築のため)
|
||||
watch(defaultStore.reactiveState.darkMode, (darkMode) => {
|
||||
applyTheme(darkMode ? ColdDeviceStorage.get('darkTheme') : ColdDeviceStorage.get('lightTheme'));
|
||||
}, { immediate: localStorage.theme == null });
|
||||
//#endregion
|
||||
|
||||
const darkTheme = computed(ColdDeviceStorage.makeGetterSetter('darkTheme'));
|
||||
const lightTheme = computed(ColdDeviceStorage.makeGetterSetter('lightTheme'));
|
||||
//#region Fetch user
|
||||
if ($i && $i.token) {
|
||||
if (_DEV_) {
|
||||
console.log('account cache found. refreshing...');
|
||||
}
|
||||
|
||||
watch(darkTheme, (theme) => {
|
||||
if (defaultStore.state.darkMode) {
|
||||
applyTheme(theme);
|
||||
}
|
||||
});
|
||||
|
||||
watch(lightTheme, (theme) => {
|
||||
if (!defaultStore.state.darkMode) {
|
||||
applyTheme(theme);
|
||||
}
|
||||
});
|
||||
|
||||
//#region Sync dark mode
|
||||
if (ColdDeviceStorage.get('syncDeviceDarkMode')) {
|
||||
defaultStore.set('darkMode', isDeviceDarkmode());
|
||||
}
|
||||
|
||||
window.matchMedia('(prefers-color-scheme: dark)').addListener(mql => {
|
||||
if (ColdDeviceStorage.get('syncDeviceDarkMode')) {
|
||||
defaultStore.set('darkMode', mql.matches);
|
||||
}
|
||||
});
|
||||
//#endregion
|
||||
|
||||
fetchInstanceMetaPromise.then(() => {
|
||||
if (defaultStore.state.themeInitial) {
|
||||
if (instance.defaultLightTheme != null) ColdDeviceStorage.set('lightTheme', JSON5.parse(instance.defaultLightTheme));
|
||||
if (instance.defaultDarkTheme != null) ColdDeviceStorage.set('darkTheme', JSON5.parse(instance.defaultDarkTheme));
|
||||
defaultStore.set('themeInitial', false);
|
||||
}
|
||||
});
|
||||
|
||||
watch(defaultStore.reactiveState.useBlurEffectForModal, v => {
|
||||
document.documentElement.style.setProperty('--modalBgFilter', v ? 'blur(4px)' : 'none');
|
||||
}, { immediate: true });
|
||||
|
||||
watch(defaultStore.reactiveState.useBlurEffect, v => {
|
||||
if (v) {
|
||||
document.documentElement.style.removeProperty('--blur');
|
||||
refreshAccount();
|
||||
} else {
|
||||
document.documentElement.style.setProperty('--blur', 'none');
|
||||
}
|
||||
}, { immediate: true });
|
||||
if (_DEV_) {
|
||||
console.log('no account cache found.');
|
||||
}
|
||||
|
||||
let reloadDialogShowing = false;
|
||||
stream.on('_disconnected_', async () => {
|
||||
if (defaultStore.state.serverDisconnectedBehavior === 'reload') {
|
||||
location.reload();
|
||||
} else if (defaultStore.state.serverDisconnectedBehavior === 'dialog') {
|
||||
if (reloadDialogShowing) return;
|
||||
reloadDialogShowing = true;
|
||||
const { canceled } = await confirm({
|
||||
type: 'warning',
|
||||
title: i18n.ts.disconnectedFromServer,
|
||||
text: i18n.ts.reloadConfirm,
|
||||
});
|
||||
reloadDialogShowing = false;
|
||||
if (!canceled) {
|
||||
// 連携ログインの場合用にCookieを参照する
|
||||
const i = (document.cookie.match(/igi=(\w+)/) || [null, null])[1];
|
||||
|
||||
if (i != null && i !== 'null') {
|
||||
if (_DEV_) {
|
||||
console.log('signing...');
|
||||
}
|
||||
|
||||
try {
|
||||
document.body.innerHTML = '<div>Please wait...</div>';
|
||||
await login(i);
|
||||
} catch (err) {
|
||||
// Render the error screen
|
||||
// TODO: ちゃんとしたコンポーネントをレンダリングする(v10とかのトラブルシューティングゲーム付きのやつみたいな)
|
||||
document.body.innerHTML = '<div id="err">Oops!</div>';
|
||||
}
|
||||
} else {
|
||||
if (_DEV_) {
|
||||
console.log('not signed in');
|
||||
}
|
||||
}
|
||||
}
|
||||
//#endregion
|
||||
|
||||
const fetchInstanceMetaPromise = fetchInstance();
|
||||
|
||||
fetchInstanceMetaPromise.then(() => {
|
||||
localStorage.setItem('v', instance.version);
|
||||
|
||||
// Init service worker
|
||||
initializeSw();
|
||||
});
|
||||
|
||||
const app = createApp(
|
||||
window.location.search === '?zen' ? defineAsyncComponent(() => import('@/ui/zen.vue')) :
|
||||
!$i ? defineAsyncComponent(() => import('@/ui/visitor.vue')) :
|
||||
ui === 'deck' ? defineAsyncComponent(() => import('@/ui/deck.vue')) :
|
||||
ui === 'classic' ? defineAsyncComponent(() => import('@/ui/classic.vue')) :
|
||||
defineAsyncComponent(() => import('@/ui/universal.vue')),
|
||||
);
|
||||
|
||||
if (_DEV_) {
|
||||
app.config.performance = true;
|
||||
}
|
||||
|
||||
app.config.globalProperties = {
|
||||
$i,
|
||||
$store: defaultStore,
|
||||
$instance: instance,
|
||||
$t: i18n.t,
|
||||
$ts: i18n.ts,
|
||||
};
|
||||
|
||||
widgets(app);
|
||||
directives(app);
|
||||
components(app);
|
||||
|
||||
const splash = document.getElementById('splash');
|
||||
// 念のためnullチェック(HTMLが古い場合があるため(そのうち消す))
|
||||
if (splash) splash.addEventListener('transitionend', () => {
|
||||
splash.remove();
|
||||
});
|
||||
|
||||
// https://github.com/misskey-dev/misskey/pull/8575#issuecomment-1114239210
|
||||
// なぜかinit.tsの内容が2回実行されることがあるため、mountするdivを1つに制限する
|
||||
const rootEl = (() => {
|
||||
const MISSKEY_MOUNT_DIV_ID = 'misskey_app';
|
||||
|
||||
const currentEl = document.getElementById(MISSKEY_MOUNT_DIV_ID);
|
||||
|
||||
if (currentEl) {
|
||||
console.warn('multiple import detected');
|
||||
return currentEl;
|
||||
}
|
||||
|
||||
const rootEl = document.createElement('div');
|
||||
rootEl.id = MISSKEY_MOUNT_DIV_ID;
|
||||
document.body.appendChild(rootEl);
|
||||
return rootEl;
|
||||
})();
|
||||
|
||||
app.mount(rootEl);
|
||||
|
||||
// boot.jsのやつを解除
|
||||
window.onerror = null;
|
||||
window.onunhandledrejection = null;
|
||||
|
||||
reactionPicker.init();
|
||||
|
||||
if (splash) {
|
||||
splash.style.opacity = '0';
|
||||
splash.style.pointerEvents = 'none';
|
||||
}
|
||||
|
||||
// クライアントが更新されたか？
|
||||
const lastVersion = localStorage.getItem('lastVersion');
|
||||
if (lastVersion !== version) {
|
||||
localStorage.setItem('lastVersion', version);
|
||||
|
||||
// テーマリビルドするため
|
||||
localStorage.removeItem('theme');
|
||||
|
||||
try { // 変なバージョン文字列来るとcompareVersionsでエラーになるため
|
||||
if (lastVersion != null && compareVersions(version, lastVersion) === 1) {
|
||||
// ログインしてる場合だけ
|
||||
if ($i) {
|
||||
popup(defineAsyncComponent(() => import('@/components/updated.vue')), {}, {}, 'closed');
|
||||
}
|
||||
}
|
||||
} catch (err) {
|
||||
}
|
||||
}
|
||||
|
||||
// NOTE: この処理は必ず↑のクライアント更新時処理より後に来ること(テーマ再構築のため)
|
||||
watch(defaultStore.reactiveState.darkMode, (darkMode) => {
|
||||
applyTheme(darkMode ? ColdDeviceStorage.get('darkTheme') : ColdDeviceStorage.get('lightTheme'));
|
||||
}, { immediate: localStorage.theme == null });
|
||||
|
||||
const darkTheme = computed(ColdDeviceStorage.makeGetterSetter('darkTheme'));
|
||||
const lightTheme = computed(ColdDeviceStorage.makeGetterSetter('lightTheme'));
|
||||
|
||||
watch(darkTheme, (theme) => {
|
||||
if (defaultStore.state.darkMode) {
|
||||
applyTheme(theme);
|
||||
}
|
||||
});
|
||||
|
||||
watch(lightTheme, (theme) => {
|
||||
if (!defaultStore.state.darkMode) {
|
||||
applyTheme(theme);
|
||||
}
|
||||
});
|
||||
|
||||
//#region Sync dark mode
|
||||
if (ColdDeviceStorage.get('syncDeviceDarkMode')) {
|
||||
defaultStore.set('darkMode', isDeviceDarkmode());
|
||||
}
|
||||
|
||||
window.matchMedia('(prefers-color-scheme: dark)').addListener(mql => {
|
||||
if (ColdDeviceStorage.get('syncDeviceDarkMode')) {
|
||||
defaultStore.set('darkMode', mql.matches);
|
||||
}
|
||||
});
|
||||
//#endregion
|
||||
|
||||
fetchInstanceMetaPromise.then(() => {
|
||||
if (defaultStore.state.themeInitial) {
|
||||
if (instance.defaultLightTheme != null) ColdDeviceStorage.set('lightTheme', JSON5.parse(instance.defaultLightTheme));
|
||||
if (instance.defaultDarkTheme != null) ColdDeviceStorage.set('darkTheme', JSON5.parse(instance.defaultDarkTheme));
|
||||
defaultStore.set('themeInitial', false);
|
||||
}
|
||||
});
|
||||
|
||||
watch(defaultStore.reactiveState.useBlurEffectForModal, v => {
|
||||
document.documentElement.style.setProperty('--modalBgFilter', v ? 'blur(4px)' : 'none');
|
||||
}, { immediate: true });
|
||||
|
||||
watch(defaultStore.reactiveState.useBlurEffect, v => {
|
||||
if (v) {
|
||||
document.documentElement.style.removeProperty('--blur');
|
||||
} else {
|
||||
document.documentElement.style.setProperty('--blur', 'none');
|
||||
}
|
||||
}, { immediate: true });
|
||||
|
||||
let reloadDialogShowing = false;
|
||||
stream.on('_disconnected_', async () => {
|
||||
if (defaultStore.state.serverDisconnectedBehavior === 'reload') {
|
||||
location.reload();
|
||||
} else if (defaultStore.state.serverDisconnectedBehavior === 'dialog') {
|
||||
if (reloadDialogShowing) return;
|
||||
reloadDialogShowing = true;
|
||||
const { canceled } = await confirm({
|
||||
type: 'warning',
|
||||
title: i18n.ts.disconnectedFromServer,
|
||||
text: i18n.ts.reloadConfirm,
|
||||
});
|
||||
reloadDialogShowing = false;
|
||||
if (!canceled) {
|
||||
location.reload();
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
stream.on('emojiAdded', emojiData => {
|
||||
// TODO
|
||||
//store.commit('instance/set', );
|
||||
});
|
||||
|
||||
for (const plugin of ColdDeviceStorage.get('plugins').filter(p => p.active)) {
|
||||
import('./plugin').then(({ install }) => {
|
||||
install(plugin);
|
||||
});
|
||||
}
|
||||
|
||||
const hotkeys = {
|
||||
'd': (): void => {
|
||||
defaultStore.set('darkMode', !defaultStore.state.darkMode);
|
||||
},
|
||||
's': search,
|
||||
};
|
||||
stream.on('emojiAdded', emojiData => {
|
||||
// TODO
|
||||
//store.commit('instance/set', );
|
||||
});
|
||||
|
||||
if ($i) {
|
||||
// only add post shortcuts if logged in
|
||||
hotkeys['p|n'] = post;
|
||||
|
||||
if ($i.isDeleted) {
|
||||
alert({
|
||||
type: 'warning',
|
||||
text: i18n.ts.accountDeletionInProgress,
|
||||
for (const plugin of ColdDeviceStorage.get('plugins').filter(p => p.active)) {
|
||||
import('./plugin').then(({ install }) => {
|
||||
install(plugin);
|
||||
});
|
||||
}
|
||||
|
||||
const lastUsed = localStorage.getItem('lastUsed');
|
||||
if (lastUsed) {
|
||||
const lastUsedDate = parseInt(lastUsed, 10);
|
||||
// 二時間以上前なら
|
||||
if (Date.now() - lastUsedDate > 1000 * 60 * 60 * 2) {
|
||||
toast(i18n.t('welcomeBackWithName', {
|
||||
name: $i.name || $i.username,
|
||||
}));
|
||||
}
|
||||
}
|
||||
localStorage.setItem('lastUsed', Date.now().toString());
|
||||
const hotkeys = {
|
||||
'd': (): void => {
|
||||
defaultStore.set('darkMode', !defaultStore.state.darkMode);
|
||||
},
|
||||
's': search,
|
||||
};
|
||||
|
||||
if ('Notification' in window) {
|
||||
// 許可を得ていなかったらリクエスト
|
||||
if (Notification.permission === 'default') {
|
||||
Notification.requestPermission();
|
||||
if ($i) {
|
||||
// only add post shortcuts if logged in
|
||||
hotkeys['p|n'] = post;
|
||||
|
||||
if ($i.isDeleted) {
|
||||
alert({
|
||||
type: 'warning',
|
||||
text: i18n.ts.accountDeletionInProgress,
|
||||
});
|
||||
}
|
||||
|
||||
const lastUsed = localStorage.getItem('lastUsed');
|
||||
if (lastUsed) {
|
||||
const lastUsedDate = parseInt(lastUsed, 10);
|
||||
// 二時間以上前なら
|
||||
if (Date.now() - lastUsedDate > 1000 * 60 * 60 * 2) {
|
||||
toast(i18n.t('welcomeBackWithName', {
|
||||
name: $i.name || $i.username,
|
||||
}));
|
||||
}
|
||||
}
|
||||
localStorage.setItem('lastUsed', Date.now().toString());
|
||||
|
||||
if ('Notification' in window) {
|
||||
// 許可を得ていなかったらリクエスト
|
||||
if (Notification.permission === 'default') {
|
||||
Notification.requestPermission();
|
||||
}
|
||||
}
|
||||
|
||||
const main = markRaw(stream.useChannel('main', null, 'System'));
|
||||
|
||||
// 自分の情報が更新されたとき
|
||||
main.on('meUpdated', i => {
|
||||
updateAccount(i);
|
||||
});
|
||||
|
||||
main.on('readAllNotifications', () => {
|
||||
updateAccount({ hasUnreadNotification: false });
|
||||
});
|
||||
|
||||
main.on('unreadNotification', () => {
|
||||
updateAccount({ hasUnreadNotification: true });
|
||||
});
|
||||
|
||||
main.on('unreadMention', () => {
|
||||
updateAccount({ hasUnreadMentions: true });
|
||||
});
|
||||
|
||||
main.on('readAllUnreadMentions', () => {
|
||||
updateAccount({ hasUnreadMentions: false });
|
||||
});
|
||||
|
||||
main.on('unreadSpecifiedNote', () => {
|
||||
updateAccount({ hasUnreadSpecifiedNotes: true });
|
||||
});
|
||||
|
||||
main.on('readAllUnreadSpecifiedNotes', () => {
|
||||
updateAccount({ hasUnreadSpecifiedNotes: false });
|
||||
});
|
||||
|
||||
main.on('readAllMessagingMessages', () => {
|
||||
updateAccount({ hasUnreadMessagingMessage: false });
|
||||
});
|
||||
|
||||
main.on('unreadMessagingMessage', () => {
|
||||
updateAccount({ hasUnreadMessagingMessage: true });
|
||||
sound.play('chatBg');
|
||||
});
|
||||
|
||||
main.on('readAllAntennas', () => {
|
||||
updateAccount({ hasUnreadAntenna: false });
|
||||
});
|
||||
|
||||
main.on('unreadAntenna', () => {
|
||||
updateAccount({ hasUnreadAntenna: true });
|
||||
sound.play('antenna');
|
||||
});
|
||||
|
||||
main.on('readAllAnnouncements', () => {
|
||||
updateAccount({ hasUnreadAnnouncement: false });
|
||||
});
|
||||
|
||||
main.on('readAllChannels', () => {
|
||||
updateAccount({ hasUnreadChannel: false });
|
||||
});
|
||||
|
||||
main.on('unreadChannel', () => {
|
||||
updateAccount({ hasUnreadChannel: true });
|
||||
sound.play('channel');
|
||||
});
|
||||
|
||||
// トークンが再生成されたとき
|
||||
// このままではMisskeyが利用できないので強制的にサインアウトさせる
|
||||
main.on('myTokenRegenerated', () => {
|
||||
signout();
|
||||
});
|
||||
}
|
||||
|
||||
const main = markRaw(stream.useChannel('main', null, 'System'));
|
||||
|
||||
// 自分の情報が更新されたとき
|
||||
main.on('meUpdated', i => {
|
||||
updateAccount(i);
|
||||
});
|
||||
|
||||
main.on('readAllNotifications', () => {
|
||||
updateAccount({ hasUnreadNotification: false });
|
||||
});
|
||||
|
||||
main.on('unreadNotification', () => {
|
||||
updateAccount({ hasUnreadNotification: true });
|
||||
});
|
||||
|
||||
main.on('unreadMention', () => {
|
||||
updateAccount({ hasUnreadMentions: true });
|
||||
});
|
||||
|
||||
main.on('readAllUnreadMentions', () => {
|
||||
updateAccount({ hasUnreadMentions: false });
|
||||
});
|
||||
|
||||
main.on('unreadSpecifiedNote', () => {
|
||||
updateAccount({ hasUnreadSpecifiedNotes: true });
|
||||
});
|
||||
|
||||
main.on('readAllUnreadSpecifiedNotes', () => {
|
||||
updateAccount({ hasUnreadSpecifiedNotes: false });
|
||||
});
|
||||
|
||||
main.on('readAllMessagingMessages', () => {
|
||||
updateAccount({ hasUnreadMessagingMessage: false });
|
||||
});
|
||||
|
||||
main.on('unreadMessagingMessage', () => {
|
||||
updateAccount({ hasUnreadMessagingMessage: true });
|
||||
sound.play('chatBg');
|
||||
});
|
||||
|
||||
main.on('readAllAntennas', () => {
|
||||
updateAccount({ hasUnreadAntenna: false });
|
||||
});
|
||||
|
||||
main.on('unreadAntenna', () => {
|
||||
updateAccount({ hasUnreadAntenna: true });
|
||||
sound.play('antenna');
|
||||
});
|
||||
|
||||
main.on('readAllAnnouncements', () => {
|
||||
updateAccount({ hasUnreadAnnouncement: false });
|
||||
});
|
||||
|
||||
main.on('readAllChannels', () => {
|
||||
updateAccount({ hasUnreadChannel: false });
|
||||
});
|
||||
|
||||
main.on('unreadChannel', () => {
|
||||
updateAccount({ hasUnreadChannel: true });
|
||||
sound.play('channel');
|
||||
});
|
||||
|
||||
// トークンが再生成されたとき
|
||||
// このままではMisskeyが利用できないので強制的にサインアウトさせる
|
||||
main.on('myTokenRegenerated', () => {
|
||||
signout();
|
||||
});
|
||||
}
|
||||
|
||||
// shortcut
|
||||
document.addEventListener('keydown', makeHotkey(hotkeys));
|
||||
// shortcut
|
||||
document.addEventListener('keydown', makeHotkey(hotkeys));
|
||||
})();
|
||||
|
|
|
|||
|
|
@ -1,13 +1,12 @@
|
|||
import { computed, ref, reactive } from 'vue';
|
||||
import { $i } from './account';
|
||||
import { mainRouter } from '@/router';
|
||||
import { search } from '@/scripts/search';
|
||||
import * as os from '@/os';
|
||||
import { i18n } from '@/i18n';
|
||||
import { ui } from '@/config';
|
||||
import { unisonReload } from '@/scripts/unison-reload';
|
||||
|
||||
export const menuDef = reactive({
|
||||
export const navbarItemDef = reactive({
|
||||
notifications: {
|
||||
title: 'notifications',
|
||||
icon: 'fas fa-bell',
|
||||
|
|
@ -55,26 +54,7 @@ export const menuDef = reactive({
|
|||
title: 'lists',
|
||||
icon: 'fas fa-list-ul',
|
||||
show: computed(() => $i != null),
|
||||
active: computed(() => mainRouter.currentRoute.value.path.startsWith('/timeline/list/') || mainRouter.currentRoute.value.path === '/my/lists' || mainRouter.currentRoute.value.path.startsWith('/my/lists/')),
|
||||
action: (ev) => {
|
||||
const items = ref([{
|
||||
type: 'pending',
|
||||
}]);
|
||||
os.api('users/lists/list').then(lists => {
|
||||
const _items = [...lists.map(list => ({
|
||||
type: 'link',
|
||||
text: list.name,
|
||||
to: `/timeline/list/${list.id}`,
|
||||
})), null, {
|
||||
type: 'link',
|
||||
to: '/my/lists',
|
||||
text: i18n.ts.manageLists,
|
||||
icon: 'fas fa-cog',
|
||||
}];
|
||||
items.value = _items;
|
||||
});
|
||||
os.popupMenu(items, ev.currentTarget ?? ev.target);
|
||||
},
|
||||
to: '/my/lists',
|
||||
},
|
||||
/*
|
||||
groups: {
|
||||
|
|
@ -88,26 +68,7 @@ export const menuDef = reactive({
|
|||
title: 'antennas',
|
||||
icon: 'fas fa-satellite',
|
||||
show: computed(() => $i != null),
|
||||
active: computed(() => mainRouter.currentRoute.value.path.startsWith('/timeline/antenna/') || mainRouter.currentRoute.value.path === '/my/antennas' || mainRouter.currentRoute.value.path.startsWith('/my/antennas/')),
|
||||
action: (ev) => {
|
||||
const items = ref([{
|
||||
type: 'pending',
|
||||
}]);
|
||||
os.api('antennas/list').then(antennas => {
|
||||
const _items = [...antennas.map(antenna => ({
|
||||
type: 'link',
|
||||
text: antenna.name,
|
||||
to: `/timeline/antenna/${antenna.id}`,
|
||||
})), null, {
|
||||
type: 'link',
|
||||
to: '/my/antennas',
|
||||
text: i18n.ts.manageAntennas,
|
||||
icon: 'fas fa-cog',
|
||||
}];
|
||||
items.value = _items;
|
||||
});
|
||||
os.popupMenu(items, ev.currentTarget ?? ev.target);
|
||||
},
|
||||
to: '/my/antennas',
|
||||
},
|
||||
favorites: {
|
||||
title: 'favorites',
|
||||
|
|
@ -164,4 +125,11 @@ export const menuDef = reactive({
|
|||
}], ev.currentTarget ?? ev.target);
|
||||
},
|
||||
},
|
||||
reload: {
|
||||
title: 'reload',
|
||||
icon: 'fas fa-refresh',
|
||||
action: (ev) => {
|
||||
location.reload();
|
||||
},
|
||||
},
|
||||
});
|
||||
|
|
@ -3,6 +3,7 @@
|
|||
import { EventEmitter } from 'eventemitter3';
|
||||
import { Ref, Component, ref, shallowRef, ShallowRef } from 'vue';
|
||||
import { pleaseLogin } from '@/scripts/please-login';
|
||||
import { safeURIDecode } from '@/scripts/safe-uri-decode';
|
||||
|
||||
type RouteDef = {
|
||||
path: string;
|
||||
|
|
@ -61,6 +62,7 @@ export class Router extends EventEmitter<{
|
|||
props: Map<string, string> | null;
|
||||
key: string;
|
||||
}) => void;
|
||||
same: () => void;
|
||||
}> {
|
||||
private routes: RouteDef[];
|
||||
private currentPath: string;
|
||||
|
|
@ -69,7 +71,7 @@ export class Router extends EventEmitter<{
|
|||
private currentKey = Date.now().toString();
|
||||
|
||||
public currentRoute: ShallowRef<RouteDef | null> = shallowRef(null);
|
||||
public navHook: ((path: string) => boolean) | null = null;
|
||||
public navHook: ((path: string, flag?: any) => boolean) | null = null;
|
||||
|
||||
constructor(routes: Router['routes'], currentPath: Router['currentPath']) {
|
||||
super();
|
||||
|
|
@ -115,7 +117,7 @@ export class Router extends EventEmitter<{
|
|||
}
|
||||
if (p.wildcard) {
|
||||
if (parts.length !== 0) {
|
||||
props.set(p.name, parts.join('/'));
|
||||
props.set(p.name, safeURIDecode(parts.join('/')));
|
||||
parts = [];
|
||||
}
|
||||
break pathMatchLoop;
|
||||
|
|
@ -123,10 +125,12 @@ export class Router extends EventEmitter<{
|
|||
if (p.startsWith) {
|
||||
if (parts[0] == null || !parts[0].startsWith(p.startsWith)) continue forEachRouteLoop;
|
||||
|
||||
props.set(p.name, parts[0].substring(p.startsWith.length));
|
||||
props.set(p.name, safeURIDecode(parts[0].substring(p.startsWith.length)));
|
||||
parts.shift();
|
||||
} else {
|
||||
props.set(p.name, parts[0]);
|
||||
if (parts[0]) {
|
||||
props.set(p.name, safeURIDecode(parts[0]));
|
||||
}
|
||||
parts.shift();
|
||||
}
|
||||
}
|
||||
|
|
@ -136,7 +140,7 @@ export class Router extends EventEmitter<{
|
|||
if (parts.length !== 0) continue forEachRouteLoop;
|
||||
|
||||
if (route.hash != null && hash != null) {
|
||||
props.set(route.hash, hash);
|
||||
props.set(route.hash, safeURIDecode(hash));
|
||||
}
|
||||
|
||||
if (route.query != null && queryString != null) {
|
||||
|
|
@ -146,7 +150,7 @@ export class Router extends EventEmitter<{
|
|||
for (const q in route.query) {
|
||||
const as = route.query[q];
|
||||
if (queryObject[q]) {
|
||||
props.set(as, queryObject[q]);
|
||||
props.set(as, safeURIDecode(queryObject[q]));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -209,12 +213,16 @@ export class Router extends EventEmitter<{
|
|||
return this.currentKey;
|
||||
}
|
||||
|
||||
public push(path: string) {
|
||||
public push(path: string, flag?: any) {
|
||||
const beforePath = this.currentPath;
|
||||
if (path === beforePath) {
|
||||
this.emit('same');
|
||||
return;
|
||||
}
|
||||
if (this.navHook) {
|
||||
const cancel = this.navHook(path);
|
||||
const cancel = this.navHook(path, flag);
|
||||
if (cancel) return;
|
||||
}
|
||||
const beforePath = this.currentPath;
|
||||
this.navigate(path, null);
|
||||
this.emit('push', {
|
||||
beforePath,
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<template>
|
||||
<MkStickyContainer>
|
||||
<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template>
|
||||
<div style="overflow: hidden; overflow: clip;">
|
||||
<div style="overflow: clip;">
|
||||
<MkSpacer :content-max="600" :margin-min="20">
|
||||
<div class="_formRoot znqjceqz">
|
||||
<div id="debug"></div>
|
||||
|
|
|
|||
|
|
@ -138,7 +138,7 @@ definePageMetadata(computed(() => ({
|
|||
.fwhjspax {
|
||||
text-align: center;
|
||||
border-radius: 10px;
|
||||
overflow: hidden; overflow: clip;
|
||||
overflow: clip;
|
||||
background-size: cover;
|
||||
background-position: center center;
|
||||
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="tabs">
|
||||
<button v-for="tab in tabs" :ref="(el) => tabRefs[tab.key] = el" v-tooltip="tab.title" class="tab _button" :class="{ active: tab.key != null && tab.key === props.tab }" @mousedown="(ev) => onTabMousedown(tab, ev)" @click="(ev) => onTabClick(tab, ev)">
|
||||
<button v-for="tab in tabs" :ref="(el) => tabRefs[tab.key] = el" v-tooltip.noDelay="tab.title" class="tab _button" :class="{ active: tab.key != null && tab.key === props.tab }" @mousedown="(ev) => onTabMousedown(tab, ev)" @click="(ev) => onTabClick(tab, ev)">
|
||||
<i v-if="tab.icon" class="icon" :class="tab.icon"></i>
|
||||
<span v-if="!tab.iconOnly" class="title">{{ tab.title }}</span>
|
||||
</button>
|
||||
|
|
@ -20,7 +20,7 @@
|
|||
<template v-if="actions">
|
||||
<template v-for="action in actions">
|
||||
<MkButton v-if="action.asFullButton" class="fullButton" primary @click.stop="action.handler"><i :class="action.icon" style="margin-right: 6px;"></i>{{ action.text }}</MkButton>
|
||||
<button v-else v-tooltip="action.text" class="_button button" :class="{ highlighted: action.highlighted }" @click.stop="action.handler" @touchstart="preventDrag"><i :class="action.icon"></i></button>
|
||||
<button v-else v-tooltip.noDelay="action.text" class="_button button" :class="{ highlighted: action.highlighted }" @click.stop="action.handler" @touchstart="preventDrag"><i :class="action.icon"></i></button>
|
||||
</template>
|
||||
</template>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -58,7 +58,7 @@ let view = $ref(null);
|
|||
let el = $ref(null);
|
||||
let pageProps = $ref({});
|
||||
let noMaintainerInformation = isEmpty(instance.maintainerName) || isEmpty(instance.maintainerEmail);
|
||||
let noBotProtection = !instance.enableHcaptcha && !instance.enableRecaptcha;
|
||||
let noBotProtection = !instance.disableRegistration && !instance.enableHcaptcha && !instance.enableRecaptcha;
|
||||
let noEmailServer = !instance.enableEmail;
|
||||
let thereIsUnresolvedAbuseReport = $ref(false);
|
||||
|
||||
|
|
|
|||
|
|
@ -355,7 +355,7 @@ async function renderChart() {
|
|||
plugins: [{
|
||||
id: 'vLine',
|
||||
beforeDraw(chart, args, options) {
|
||||
if (chart.tooltip._active && chart.tooltip._active.length) {
|
||||
if (chart.tooltip?._active?.length) {
|
||||
const activePoint = chart.tooltip._active[0];
|
||||
const ctx = chart.ctx;
|
||||
const x = activePoint.element.x;
|
||||
|
|
@ -561,7 +561,7 @@ definePageMetadata({
|
|||
> .body {
|
||||
background: var(--panel);
|
||||
border-radius: var(--radius);
|
||||
overflow: hidden; overflow: clip;
|
||||
overflow: clip;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -620,7 +620,7 @@ definePageMetadata({
|
|||
> .body {
|
||||
background: var(--panel);
|
||||
border-radius: var(--radius);
|
||||
overflow: hidden; overflow: clip;
|
||||
overflow: clip;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -14,6 +14,62 @@
|
|||
<XBotProtection/>
|
||||
</FormFolder>
|
||||
|
||||
<FormFolder class="_formBlock">
|
||||
<template #icon><i class="fas fa-eye-slash"></i></template>
|
||||
<template #label>{{ i18n.ts.sensitiveMediaDetection }}</template>
|
||||
<template v-if="sensitiveMediaDetection === 'all'" #suffix>{{ i18n.ts.all }}</template>
|
||||
<template v-else-if="sensitiveMediaDetection === 'local'" #suffix>{{ i18n.ts.localOnly }}</template>
|
||||
<template v-else-if="sensitiveMediaDetection === 'remote'" #suffix>{{ i18n.ts.remoteOnly }}</template>
|
||||
<template v-else #suffix>{{ i18n.ts.none }}</template>
|
||||
|
||||
<div class="_formRoot">
|
||||
<span class="_formBlock">{{ i18n.ts._sensitiveMediaDetection.description }}</span>
|
||||
|
||||
<FormRadios v-model="sensitiveMediaDetection" class="_formBlock">
|
||||
<option value="none">{{ i18n.ts.none }}</option>
|
||||
<option value="all">{{ i18n.ts.all }}</option>
|
||||
<option value="local">{{ i18n.ts.localOnly }}</option>
|
||||
<option value="remote">{{ i18n.ts.remoteOnly }}</option>
|
||||
</FormRadios>
|
||||
|
||||
<FormRange v-model="sensitiveMediaDetectionSensitivity" :min="0" :max="4" :step="1" :text-converter="(v) => `${v + 1}`" class="_formBlock">
|
||||
<template #label>{{ i18n.ts._sensitiveMediaDetection.sensitivity }}</template>
|
||||
<template #caption>{{ i18n.ts._sensitiveMediaDetection.sensitivityDescription }}</template>
|
||||
</FormRange>
|
||||
|
||||
<FormSwitch v-model="enableSensitiveMediaDetectionForVideos" class="_formBlock">
|
||||
<template #label>{{ i18n.ts._sensitiveMediaDetection.analyzeVideos }}<span class="_beta">{{ i18n.ts.beta }}</span></template>
|
||||
<template #caption>{{ i18n.ts._sensitiveMediaDetection.analyzeVideosDescription }}</template>
|
||||
</FormSwitch>
|
||||
|
||||
<FormSwitch v-model="setSensitiveFlagAutomatically" class="_formBlock">
|
||||
<template #label>{{ i18n.ts._sensitiveMediaDetection.setSensitiveFlagAutomatically }} ({{ i18n.ts.notRecommended }})</template>
|
||||
<template #caption>{{ i18n.ts._sensitiveMediaDetection.setSensitiveFlagAutomaticallyDescription }}</template>
|
||||
</FormSwitch>
|
||||
|
||||
<!-- 現状 false positive が多すぎて実用に耐えない
|
||||
<FormSwitch v-model="disallowUploadWhenPredictedAsPorn" class="_formBlock">
|
||||
<template #label>{{ i18n.ts._sensitiveMediaDetection.disallowUploadWhenPredictedAsPorn }}</template>
|
||||
</FormSwitch>
|
||||
-->
|
||||
|
||||
<FormButton primary class="_formBlock" @click="save"><i class="fas fa-save"></i> {{ i18n.ts.save }}</FormButton>
|
||||
</div>
|
||||
</FormFolder>
|
||||
|
||||
<FormFolder class="_formBlock">
|
||||
<template #label>Active Email Validation</template>
|
||||
<template v-if="enableActiveEmailValidation" #suffix>Enabled</template>
|
||||
<template v-else #suffix>Disabled</template>
|
||||
|
||||
<div class="_formRoot">
|
||||
<span class="_formBlock">{{ i18n.ts.activeEmailValidationDescription }}</span>
|
||||
<FormSwitch v-model="enableActiveEmailValidation" class="_formBlock" @update:modelValue="save">
|
||||
<template #label>Enable</template>
|
||||
</FormSwitch>
|
||||
</div>
|
||||
</FormFolder>
|
||||
|
||||
<FormFolder class="_formBlock">
|
||||
<template #label>Log IP address</template>
|
||||
<template v-if="enableIpLogging" #suffix>Enabled</template>
|
||||
|
|
@ -49,10 +105,11 @@ import { } from 'vue';
|
|||
import XBotProtection from './bot-protection.vue';
|
||||
import XHeader from './_header_.vue';
|
||||
import FormFolder from '@/components/form/folder.vue';
|
||||
import FormRadios from '@/components/form/radios.vue';
|
||||
import FormSwitch from '@/components/form/switch.vue';
|
||||
import FormInfo from '@/components/ui/info.vue';
|
||||
import FormSuspense from '@/components/form/suspense.vue';
|
||||
import FormSection from '@/components/form/section.vue';
|
||||
import FormRange from '@/components/form/range.vue';
|
||||
import FormInput from '@/components/form/input.vue';
|
||||
import FormButton from '@/components/ui/button.vue';
|
||||
import * as os from '@/os';
|
||||
|
|
@ -63,20 +120,46 @@ import { definePageMetadata } from '@/scripts/page-metadata';
|
|||
let summalyProxy: string = $ref('');
|
||||
let enableHcaptcha: boolean = $ref(false);
|
||||
let enableRecaptcha: boolean = $ref(false);
|
||||
let sensitiveMediaDetection: string = $ref('none');
|
||||
let sensitiveMediaDetectionSensitivity: number = $ref(0);
|
||||
let setSensitiveFlagAutomatically: boolean = $ref(false);
|
||||
let enableSensitiveMediaDetectionForVideos: boolean = $ref(false);
|
||||
let enableIpLogging: boolean = $ref(false);
|
||||
let enableActiveEmailValidation: boolean = $ref(false);
|
||||
|
||||
async function init() {
|
||||
const meta = await os.api('admin/meta');
|
||||
summalyProxy = meta.summalyProxy;
|
||||
enableHcaptcha = meta.enableHcaptcha;
|
||||
enableRecaptcha = meta.enableRecaptcha;
|
||||
sensitiveMediaDetection = meta.sensitiveMediaDetection;
|
||||
sensitiveMediaDetectionSensitivity =
|
||||
meta.sensitiveMediaDetectionSensitivity === 'veryLow' ? 0 :
|
||||
meta.sensitiveMediaDetectionSensitivity === 'low' ? 1 :
|
||||
meta.sensitiveMediaDetectionSensitivity === 'medium' ? 2 :
|
||||
meta.sensitiveMediaDetectionSensitivity === 'high' ? 3 :
|
||||
meta.sensitiveMediaDetectionSensitivity === 'veryHigh' ? 4 : 0;
|
||||
setSensitiveFlagAutomatically = meta.setSensitiveFlagAutomatically;
|
||||
enableSensitiveMediaDetectionForVideos = meta.enableSensitiveMediaDetectionForVideos;
|
||||
enableIpLogging = meta.enableIpLogging;
|
||||
enableActiveEmailValidation = meta.enableActiveEmailValidation;
|
||||
}
|
||||
|
||||
function save() {
|
||||
os.apiWithDialog('admin/update-meta', {
|
||||
summalyProxy,
|
||||
sensitiveMediaDetection,
|
||||
sensitiveMediaDetectionSensitivity:
|
||||
sensitiveMediaDetectionSensitivity === 0 ? 'veryLow' :
|
||||
sensitiveMediaDetectionSensitivity === 1 ? 'low' :
|
||||
sensitiveMediaDetectionSensitivity === 2 ? 'medium' :
|
||||
sensitiveMediaDetectionSensitivity === 3 ? 'high' :
|
||||
sensitiveMediaDetectionSensitivity === 4 ? 'veryHigh' :
|
||||
0,
|
||||
setSensitiveFlagAutomatically,
|
||||
enableSensitiveMediaDetectionForVideos,
|
||||
enableIpLogging,
|
||||
enableActiveEmailValidation,
|
||||
}).then(() => {
|
||||
fetchInstance();
|
||||
});
|
||||
|
|
|
|||
|
|
@ -110,7 +110,7 @@ definePageMetadata(computed(() => antenna ? {
|
|||
> .tl {
|
||||
background: var(--bg);
|
||||
border-radius: var(--radius);
|
||||
overflow: hidden; overflow: clip;
|
||||
overflow: clip;
|
||||
}
|
||||
|
||||
&.min-width_800px {
|
||||
|
|
|
|||
|
|
@ -1,5 +1,9 @@
|
|||
<template>
|
||||
<MkSpacer :content-max="1200">
|
||||
<MkTab v-model="origin" style="margin-bottom: var(--margin);">
|
||||
<option value="local">{{ $ts.local }}</option>
|
||||
<option value="remote">{{ $ts.remote }}</option>
|
||||
</MkTab>
|
||||
<div v-if="origin === 'local'">
|
||||
<template v-if="tag == null">
|
||||
<MkFolder class="_gap" persist-key="explore-pinned-users">
|
||||
|
|
@ -57,16 +61,17 @@
|
|||
import { computed, watch } from 'vue';
|
||||
import XUserList from '@/components/user-list.vue';
|
||||
import MkFolder from '@/components/ui/folder.vue';
|
||||
import MkTab from '@/components/tab.vue';
|
||||
import number from '@/filters/number';
|
||||
import * as os from '@/os';
|
||||
import { i18n } from '@/i18n';
|
||||
import { instance } from '@/instance';
|
||||
|
||||
const props = defineProps<{
|
||||
origin: 'local' | 'remote';
|
||||
tag?: string;
|
||||
}>();
|
||||
|
||||
let origin = $ref('local');
|
||||
let tagsEl = $ref<InstanceType<typeof MkFolder>>();
|
||||
let tagsLocal = $ref([]);
|
||||
let tagsRemote = $ref([]);
|
||||
|
|
|
|||
|
|
@ -5,26 +5,25 @@
|
|||
<div v-if="tab === 'featured'">
|
||||
<XFeatured/>
|
||||
</div>
|
||||
<div v-else-if="tab === 'localUsers'">
|
||||
<XUsers origin="local"/>
|
||||
</div>
|
||||
<div v-else-if="tab === 'remoteUsers'">
|
||||
<XUsers origin="remote"/>
|
||||
<div v-else-if="tab === 'users'">
|
||||
<XUsers/>
|
||||
</div>
|
||||
<div v-else-if="tab === 'search'">
|
||||
<div class="_isolated">
|
||||
<MkInput v-model="searchQuery" :debounce="true" type="search">
|
||||
<template #prefix><i class="fas fa-search"></i></template>
|
||||
<template #label>{{ $ts.searchUser }}</template>
|
||||
</MkInput>
|
||||
<MkRadios v-model="searchOrigin">
|
||||
<option value="combined">{{ $ts.all }}</option>
|
||||
<option value="local">{{ $ts.local }}</option>
|
||||
<option value="remote">{{ $ts.remote }}</option>
|
||||
</MkRadios>
|
||||
</div>
|
||||
<MkSpacer :content-max="1200">
|
||||
<div>
|
||||
<MkInput v-model="searchQuery" :debounce="true" type="search" class="_formBlock">
|
||||
<template #prefix><i class="fas fa-search"></i></template>
|
||||
<template #label>{{ $ts.searchUser }}</template>
|
||||
</MkInput>
|
||||
<MkRadios v-model="searchOrigin" class="_formBlock">
|
||||
<option value="combined">{{ $ts.all }}</option>
|
||||
<option value="local">{{ $ts.local }}</option>
|
||||
<option value="remote">{{ $ts.remote }}</option>
|
||||
</MkRadios>
|
||||
</div>
|
||||
|
||||
<XUserList v-if="searchQuery" ref="searchEl" class="_gap" :pagination="searchPagination"/>
|
||||
<XUserList v-if="searchQuery" ref="searchEl" class="_gap" :pagination="searchPagination"/>
|
||||
</MkSpacer>
|
||||
</div>
|
||||
</div>
|
||||
</MkStickyContainer>
|
||||
|
|
@ -42,6 +41,7 @@ import * as os from '@/os';
|
|||
import { definePageMetadata } from '@/scripts/page-metadata';
|
||||
import { i18n } from '@/i18n';
|
||||
import { instance } from '@/instance';
|
||||
import XUserList from '@/components/user-list.vue';
|
||||
|
||||
const props = defineProps<{
|
||||
tag?: string;
|
||||
|
|
@ -72,13 +72,9 @@ const headerTabs = $computed(() => [{
|
|||
icon: 'fas fa-bolt',
|
||||
title: i18n.ts.featured,
|
||||
}, {
|
||||
key: 'localUsers',
|
||||
key: 'users',
|
||||
icon: 'fas fa-users',
|
||||
title: i18n.ts.users,
|
||||
}, {
|
||||
key: 'remoteUsers',
|
||||
icon: 'fas fa-users',
|
||||
title: i18n.ts.remote,
|
||||
}, {
|
||||
key: 'search',
|
||||
title: i18n.ts.search,
|
||||
|
|
|
|||
|
|
@ -1,34 +1,37 @@
|
|||
<template>
|
||||
<div>
|
||||
<MkPagination ref="paginationComponent" :pagination="pagination">
|
||||
<template #empty>
|
||||
<div class="_fullinfo">
|
||||
<img src="https://xn--931a.moe/assets/info.jpg" class="_ghost"/>
|
||||
<div>{{ $ts.noFollowRequests }}</div>
|
||||
</div>
|
||||
</template>
|
||||
<template #default="{items}">
|
||||
<div class="mk-follow-requests">
|
||||
<div v-for="req in items" :key="req.id" class="user _panel">
|
||||
<MkAvatar class="avatar" :user="req.follower" :show-indicator="true"/>
|
||||
<div class="body">
|
||||
<div class="name">
|
||||
<MkA v-user-preview="req.follower.id" class="name" :to="userPage(req.follower)"><MkUserName :user="req.follower"/></MkA>
|
||||
<p class="acct">@{{ acct(req.follower) }}</p>
|
||||
</div>
|
||||
<div v-if="req.follower.description" class="description" :title="req.follower.description">
|
||||
<Mfm :text="req.follower.description" :is-note="false" :author="req.follower" :i="$i" :custom-emojis="req.follower.emojis" :plain="true" :nowrap="true"/>
|
||||
</div>
|
||||
<div class="actions">
|
||||
<button class="_button" @click="accept(req.follower)"><i class="fas fa-check"></i></button>
|
||||
<button class="_button" @click="reject(req.follower)"><i class="fas fa-times"></i></button>
|
||||
<MkStickyContainer>
|
||||
<template #header><MkPageHeader/></template>
|
||||
<MkSpacer :content-max="800">
|
||||
<MkPagination ref="paginationComponent" :pagination="pagination">
|
||||
<template #empty>
|
||||
<div class="_fullinfo">
|
||||
<img src="https://xn--931a.moe/assets/info.jpg" class="_ghost"/>
|
||||
<div>{{ $ts.noFollowRequests }}</div>
|
||||
</div>
|
||||
</template>
|
||||
<template #default="{items}">
|
||||
<div class="mk-follow-requests">
|
||||
<div v-for="req in items" :key="req.id" class="user _panel">
|
||||
<MkAvatar class="avatar" :user="req.follower" :show-indicator="true"/>
|
||||
<div class="body">
|
||||
<div class="name">
|
||||
<MkA v-user-preview="req.follower.id" class="name" :to="userPage(req.follower)"><MkUserName :user="req.follower"/></MkA>
|
||||
<p class="acct">@{{ acct(req.follower) }}</p>
|
||||
</div>
|
||||
<div v-if="req.follower.description" class="description" :title="req.follower.description">
|
||||
<Mfm :text="req.follower.description" :is-note="false" :author="req.follower" :i="$i" :custom-emojis="req.follower.emojis" :plain="true" :nowrap="true"/>
|
||||
</div>
|
||||
<div class="actions">
|
||||
<button class="_button" @click="accept(req.follower)"><i class="fas fa-check"></i></button>
|
||||
<button class="_button" @click="reject(req.follower)"><i class="fas fa-times"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</MkPagination>
|
||||
</div>
|
||||
</template>
|
||||
</MkPagination>
|
||||
</MkSpacer>
|
||||
</MkStickyContainer>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
|
|
|
|||
|
|
@ -28,7 +28,7 @@
|
|||
<template #label>Moderation</template>
|
||||
<FormSwitch v-model="suspended" class="_formBlock" @update:modelValue="toggleSuspend">{{ $ts.stopActivityDelivery }}</FormSwitch>
|
||||
<FormSwitch v-model="isBlocked" class="_formBlock" @update:modelValue="toggleBlock">{{ $ts.blockThisInstance }}</FormSwitch>
|
||||
<MkButton @click="refreshMetadata">Refresh metadata</MkButton>
|
||||
<MkButton @click="refreshMetadata"><i class="fas fa-refresh"></i> Refresh metadata</MkButton>
|
||||
</FormSection>
|
||||
|
||||
<FormSection>
|
||||
|
|
@ -56,8 +56,12 @@
|
|||
|
||||
<FormSection>
|
||||
<MkKeyValue oneline style="margin: 1em 0;">
|
||||
<template #key>Open Registrations</template>
|
||||
<template #value>{{ instance.openRegistrations ? $ts.yes : $ts.no }}</template>
|
||||
<template #key>Following (Pub)</template>
|
||||
<template #value>{{ number(instance.followingCount) }}</template>
|
||||
</MkKeyValue>
|
||||
<MkKeyValue oneline style="margin: 1em 0;">
|
||||
<template #key>Followers (Sub)</template>
|
||||
<template #value>{{ number(instance.followersCount) }}</template>
|
||||
</MkKeyValue>
|
||||
</FormSection>
|
||||
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
<MkStickyContainer>
|
||||
<template #header><MkPageHeader/></template>
|
||||
<div class="mwysmxbg">
|
||||
<div class="_isolated">{{ $ts._mfm.intro }}</div>
|
||||
<div>{{ $ts._mfm.intro }}</div>
|
||||
<div class="section _block">
|
||||
<div class="title">{{ $ts._mfm.mention }}</div>
|
||||
<div class="content">
|
||||
|
|
|
|||
|
|
@ -1,41 +1,43 @@
|
|||
<template><MkStickyContainer>
|
||||
<template>
|
||||
<MkStickyContainer>
|
||||
<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template>
|
||||
<MkSpacer :content-max="800">
|
||||
<div class="fcuexfpr">
|
||||
<transition :name="$store.state.animation ? 'fade' : ''" mode="out-in">
|
||||
<div v-if="note" class="note">
|
||||
<div v-if="showNext" class="_gap">
|
||||
<XNotes class="_content" :pagination="nextPagination" :no-gap="true"/>
|
||||
</div>
|
||||
|
||||
<div class="main _gap">
|
||||
<MkButton v-if="!showNext && hasNext" class="load next" @click="showNext = true"><i class="fas fa-chevron-up"></i></MkButton>
|
||||
<div class="note _gap">
|
||||
<MkRemoteCaution v-if="note.user.host != null" :href="note.url ?? note.uri" class="_isolated"/>
|
||||
<XNoteDetailed :key="note.id" v-model:note="note" class="_isolated note"/>
|
||||
<MkSpacer :content-max="800">
|
||||
<div class="fcuexfpr">
|
||||
<transition :name="$store.state.animation ? 'fade' : ''" mode="out-in">
|
||||
<div v-if="note" class="note">
|
||||
<div v-if="showNext" class="_gap">
|
||||
<XNotes class="_content" :pagination="nextPagination" :no-gap="true"/>
|
||||
</div>
|
||||
<div v-if="clips && clips.length > 0" class="_content clips _gap">
|
||||
<div class="title">{{ $ts.clip }}</div>
|
||||
<MkA v-for="item in clips" :key="item.id" :to="`/clips/${item.id}`" class="item _panel _gap">
|
||||
<b>{{ item.name }}</b>
|
||||
<div v-if="item.description" class="description">{{ item.description }}</div>
|
||||
<div class="user">
|
||||
<MkAvatar :user="item.user" class="avatar" :show-indicator="true"/> <MkUserName :user="item.user" :nowrap="false"/>
|
||||
</div>
|
||||
</MkA>
|
||||
</div>
|
||||
<MkButton v-if="!showPrev && hasPrev" class="load prev" @click="showPrev = true"><i class="fas fa-chevron-down"></i></MkButton>
|
||||
</div>
|
||||
|
||||
<div v-if="showPrev" class="_gap">
|
||||
<XNotes class="_content" :pagination="prevPagination" :no-gap="true"/>
|
||||
<div class="main _gap">
|
||||
<MkButton v-if="!showNext && hasNext" class="load next" @click="showNext = true"><i class="fas fa-chevron-up"></i></MkButton>
|
||||
<div class="note _gap">
|
||||
<MkRemoteCaution v-if="note.user.host != null" :href="note.url ?? note.uri"/>
|
||||
<XNoteDetailed :key="note.id" v-model:note="note" class="note"/>
|
||||
</div>
|
||||
<div v-if="clips && clips.length > 0" class="_content clips _gap">
|
||||
<div class="title">{{ $ts.clip }}</div>
|
||||
<MkA v-for="item in clips" :key="item.id" :to="`/clips/${item.id}`" class="item _panel _gap">
|
||||
<b>{{ item.name }}</b>
|
||||
<div v-if="item.description" class="description">{{ item.description }}</div>
|
||||
<div class="user">
|
||||
<MkAvatar :user="item.user" class="avatar" :show-indicator="true"/> <MkUserName :user="item.user" :nowrap="false"/>
|
||||
</div>
|
||||
</MkA>
|
||||
</div>
|
||||
<MkButton v-if="!showPrev && hasPrev" class="load prev" @click="showPrev = true"><i class="fas fa-chevron-down"></i></MkButton>
|
||||
</div>
|
||||
|
||||
<div v-if="showPrev" class="_gap">
|
||||
<XNotes class="_content" :pagination="prevPagination" :no-gap="true"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<MkError v-else-if="error" @retry="fetch()"/>
|
||||
<MkLoading v-else/>
|
||||
</transition>
|
||||
</div>
|
||||
</MkSpacer></MkStickyContainer>
|
||||
<MkError v-else-if="error" @retry="fetch()"/>
|
||||
<MkLoading v-else/>
|
||||
</transition>
|
||||
</div>
|
||||
</MkSpacer>
|
||||
</MkStickyContainer>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
|
|
|
|||
96
packages/client/src/pages/registry.keys.vue
Normal file
96
packages/client/src/pages/registry.keys.vue
Normal file
|
|
@ -0,0 +1,96 @@
|
|||
<template>
|
||||
<MkStickyContainer>
|
||||
<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template>
|
||||
<MkSpacer :content-max="600" :margin-min="16">
|
||||
<FormSplit>
|
||||
<MkKeyValue class="_formBlock">
|
||||
<template #key>{{ $ts._registry.domain }}</template>
|
||||
<template #value>{{ $ts.system }}</template>
|
||||
</MkKeyValue>
|
||||
<MkKeyValue class="_formBlock">
|
||||
<template #key>{{ $ts._registry.scope }}</template>
|
||||
<template #value>{{ scope.join('/') }}</template>
|
||||
</MkKeyValue>
|
||||
</FormSplit>
|
||||
|
||||
<MkButton primary @click="createKey">{{ i18n.ts._registry.createKey }}</MkButton>
|
||||
|
||||
<FormSection v-if="keys">
|
||||
<template #label>{{ i18n.ts.keys }}</template>
|
||||
<div class="_formLinks">
|
||||
<FormLink v-for="key in keys" :to="`/registry/value/system/${scope.join('/')}/${key[0]}`" class="_monospace">{{ key[0] }}<template #suffix>{{ key[1].toUpperCase() }}</template></FormLink>
|
||||
</div>
|
||||
</FormSection>
|
||||
</MkSpacer>
|
||||
</MkStickyContainer>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, watch } from 'vue';
|
||||
import JSON5 from 'json5';
|
||||
import * as os from '@/os';
|
||||
import { i18n } from '@/i18n';
|
||||
import { definePageMetadata } from '@/scripts/page-metadata';
|
||||
import FormLink from '@/components/form/link.vue';
|
||||
import FormSection from '@/components/form/section.vue';
|
||||
import MkButton from '@/components/ui/button.vue';
|
||||
import MkKeyValue from '@/components/key-value.vue';
|
||||
import FormSplit from '@/components/form/split.vue';
|
||||
|
||||
const props = defineProps<{
|
||||
path: string;
|
||||
}>();
|
||||
|
||||
const scope = $computed(() => props.path.split('/'));
|
||||
|
||||
let keys = $ref(null);
|
||||
|
||||
function fetchKeys() {
|
||||
os.api('i/registry/keys-with-type', {
|
||||
scope: scope,
|
||||
}).then(res => {
|
||||
keys = Object.entries(res).sort((a, b) => a[0].localeCompare(b[0]));
|
||||
});
|
||||
}
|
||||
|
||||
async function createKey() {
|
||||
const { canceled, result } = await os.form(i18n.ts._registry.createKey, {
|
||||
key: {
|
||||
type: 'string',
|
||||
label: i18n.ts._registry.key,
|
||||
},
|
||||
value: {
|
||||
type: 'string',
|
||||
multiline: true,
|
||||
label: i18n.ts.value,
|
||||
},
|
||||
scope: {
|
||||
type: 'string',
|
||||
label: i18n.ts._registry.scope,
|
||||
default: scope.join('/'),
|
||||
},
|
||||
});
|
||||
if (canceled) return;
|
||||
os.apiWithDialog('i/registry/set', {
|
||||
scope: result.scope.split('/'),
|
||||
key: result.key,
|
||||
value: JSON5.parse(result.value),
|
||||
}).then(() => {
|
||||
fetchKeys();
|
||||
});
|
||||
}
|
||||
|
||||
watch(() => props.path, fetchKeys, { immediate: true });
|
||||
|
||||
const headerActions = $computed(() => []);
|
||||
|
||||
const headerTabs = $computed(() => []);
|
||||
|
||||
definePageMetadata({
|
||||
title: i18n.ts.registry,
|
||||
icon: 'fas fa-cogs',
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
</style>
|
||||
123
packages/client/src/pages/registry.value.vue
Normal file
123
packages/client/src/pages/registry.value.vue
Normal file
|
|
@ -0,0 +1,123 @@
|
|||
<template>
|
||||
<MkStickyContainer>
|
||||
<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template>
|
||||
<MkSpacer :content-max="600" :margin-min="16">
|
||||
<FormInfo warn>{{ $ts.editTheseSettingsMayBreakAccount }}</FormInfo>
|
||||
|
||||
<template v-if="value">
|
||||
<FormSplit>
|
||||
<MkKeyValue class="_formBlock">
|
||||
<template #key>{{ $ts._registry.domain }}</template>
|
||||
<template #value>{{ $ts.system }}</template>
|
||||
</MkKeyValue>
|
||||
<MkKeyValue class="_formBlock">
|
||||
<template #key>{{ $ts._registry.scope }}</template>
|
||||
<template #value>{{ scope.join('/') }}</template>
|
||||
</MkKeyValue>
|
||||
<MkKeyValue class="_formBlock">
|
||||
<template #key>{{ $ts._registry.key }}</template>
|
||||
<template #value>{{ key }}</template>
|
||||
</MkKeyValue>
|
||||
</FormSplit>
|
||||
|
||||
<FormTextarea v-model="valueForEditor" tall class="_formBlock _monospace">
|
||||
<template #label>{{ $ts.value }} (JSON)</template>
|
||||
</FormTextarea>
|
||||
|
||||
<MkButton class="_formBlock" primary @click="save"><i class="fas fa-save"></i> {{ $ts.save }}</MkButton>
|
||||
|
||||
<MkKeyValue class="_formBlock">
|
||||
<template #key>{{ $ts.updatedAt }}</template>
|
||||
<template #value><MkTime :time="value.updatedAt" mode="detail"/></template>
|
||||
</MkKeyValue>
|
||||
|
||||
<MkButton danger @click="del"><i class="fas fa-trash"></i> {{ $ts.delete }}</MkButton>
|
||||
</template>
|
||||
</MkSpacer>
|
||||
</MkStickyContainer>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, watch } from 'vue';
|
||||
import JSON5 from 'json5';
|
||||
import * as os from '@/os';
|
||||
import { i18n } from '@/i18n';
|
||||
import { definePageMetadata } from '@/scripts/page-metadata';
|
||||
import FormLink from '@/components/form/link.vue';
|
||||
import FormSection from '@/components/form/section.vue';
|
||||
import MkButton from '@/components/ui/button.vue';
|
||||
import MkKeyValue from '@/components/key-value.vue';
|
||||
import FormTextarea from '@/components/form/textarea.vue';
|
||||
import FormSplit from '@/components/form/split.vue';
|
||||
import FormInfo from '@/components/ui/info.vue';
|
||||
|
||||
const props = defineProps<{
|
||||
path: string;
|
||||
}>();
|
||||
|
||||
const scope = $computed(() => props.path.split('/').slice(0, -1));
|
||||
const key = $computed(() => props.path.split('/').at(-1));
|
||||
|
||||
let value = $ref(null);
|
||||
let valueForEditor = $ref(null);
|
||||
|
||||
function fetchValue() {
|
||||
os.api('i/registry/get-detail', {
|
||||
scope,
|
||||
key,
|
||||
}).then(res => {
|
||||
value = res;
|
||||
valueForEditor = JSON5.stringify(res.value, null, '\t');
|
||||
});
|
||||
}
|
||||
|
||||
async function save() {
|
||||
try {
|
||||
JSON5.parse(valueForEditor);
|
||||
} catch (err) {
|
||||
os.alert({
|
||||
type: 'error',
|
||||
text: i18n.ts.invalidValue,
|
||||
});
|
||||
return;
|
||||
}
|
||||
os.confirm({
|
||||
type: 'warning',
|
||||
text: i18n.ts.saveConfirm,
|
||||
}).then(({ canceled }) => {
|
||||
if (canceled) return;
|
||||
os.apiWithDialog('i/registry/set', {
|
||||
scope,
|
||||
key,
|
||||
value: JSON5.parse(valueForEditor),
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function del() {
|
||||
os.confirm({
|
||||
type: 'warning',
|
||||
text: i18n.ts.deleteConfirm,
|
||||
}).then(({ canceled }) => {
|
||||
if (canceled) return;
|
||||
os.apiWithDialog('i/registry/remove', {
|
||||
scope,
|
||||
key,
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
watch(() => props.path, fetchValue, { immediate: true });
|
||||
|
||||
const headerActions = $computed(() => []);
|
||||
|
||||
const headerTabs = $computed(() => []);
|
||||
|
||||
definePageMetadata({
|
||||
title: i18n.ts.registry,
|
||||
icon: 'fas fa-cogs',
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
</style>
|
||||
74
packages/client/src/pages/registry.vue
Normal file
74
packages/client/src/pages/registry.vue
Normal file
|
|
@ -0,0 +1,74 @@
|
|||
<template>
|
||||
<MkStickyContainer>
|
||||
<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template>
|
||||
<MkSpacer :content-max="600" :margin-min="16">
|
||||
<MkButton primary @click="createKey">{{ i18n.ts._registry.createKey }}</MkButton>
|
||||
|
||||
<FormSection v-if="scopes">
|
||||
<template #label>{{ i18n.ts.system }}</template>
|
||||
<div class="_formLinks">
|
||||
<FormLink v-for="scope in scopes" :to="`/registry/keys/system/${scope.join('/')}`" class="_monospace">{{ scope.join('/') }}</FormLink>
|
||||
</div>
|
||||
</FormSection>
|
||||
</MkSpacer>
|
||||
</MkStickyContainer>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, watch } from 'vue';
|
||||
import JSON5 from 'json5';
|
||||
import * as os from '@/os';
|
||||
import { i18n } from '@/i18n';
|
||||
import { definePageMetadata } from '@/scripts/page-metadata';
|
||||
import FormLink from '@/components/form/link.vue';
|
||||
import FormSection from '@/components/form/section.vue';
|
||||
import MkButton from '@/components/ui/button.vue';
|
||||
|
||||
let scopes = $ref(null);
|
||||
|
||||
function fetchScopes() {
|
||||
os.api('i/registry/scopes').then(res => {
|
||||
scopes = res.slice().sort((a, b) => a.join('/').localeCompare(b.join('/')));
|
||||
});
|
||||
}
|
||||
|
||||
async function createKey() {
|
||||
const { canceled, result } = await os.form(i18n.ts._registry.createKey, {
|
||||
key: {
|
||||
type: 'string',
|
||||
label: i18n.ts._registry.key,
|
||||
},
|
||||
value: {
|
||||
type: 'string',
|
||||
multiline: true,
|
||||
label: i18n.ts.value,
|
||||
},
|
||||
scope: {
|
||||
type: 'string',
|
||||
label: i18n.ts._registry.scope,
|
||||
},
|
||||
});
|
||||
if (canceled) return;
|
||||
os.apiWithDialog('i/registry/set', {
|
||||
scope: result.scope.split('/'),
|
||||
key: result.key,
|
||||
value: JSON5.parse(result.value),
|
||||
}).then(() => {
|
||||
fetchScopes();
|
||||
});
|
||||
}
|
||||
|
||||
fetchScopes();
|
||||
|
||||
const headerActions = $computed(() => []);
|
||||
|
||||
const headerTabs = $computed(() => []);
|
||||
|
||||
definePageMetadata({
|
||||
title: i18n.ts.registry,
|
||||
icon: 'fas fa-cogs',
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
</style>
|
||||
|
|
@ -9,8 +9,6 @@
|
|||
<option value="left">{{ i18n.ts.left }}</option>
|
||||
<option value="center">{{ i18n.ts.center }}</option>
|
||||
</FormRadios>
|
||||
|
||||
<FormLink class="_formBlock" @click="setProfile">{{ i18n.ts._deck.profile }}<template #suffix>{{ profile }}</template></FormLink>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -29,28 +27,6 @@ import { definePageMetadata } from '@/scripts/page-metadata';
|
|||
const navWindow = computed(deckStore.makeGetterSetter('navWindow'));
|
||||
const alwaysShowMainColumn = computed(deckStore.makeGetterSetter('alwaysShowMainColumn'));
|
||||
const columnAlign = computed(deckStore.makeGetterSetter('columnAlign'));
|
||||
const profile = computed(deckStore.makeGetterSetter('profile'));
|
||||
|
||||
watch(navWindow, async () => {
|
||||
const { canceled } = await os.confirm({
|
||||
type: 'info',
|
||||
text: i18n.ts.reloadToApplySetting,
|
||||
});
|
||||
if (canceled) return;
|
||||
|
||||
unisonReload();
|
||||
});
|
||||
|
||||
async function setProfile() {
|
||||
const { canceled, result: name } = await os.inputText({
|
||||
title: i18n.ts._deck.profile,
|
||||
allowEmpty: false,
|
||||
});
|
||||
if (canceled) return;
|
||||
|
||||
profile.value = name;
|
||||
unisonReload();
|
||||
}
|
||||
|
||||
const headerActions = $computed(() => []);
|
||||
|
||||
|
|
|
|||
|
|
@ -28,7 +28,17 @@
|
|||
<template #suffix>{{ uploadFolder ? uploadFolder.name : '-' }}</template>
|
||||
<template #suffixIcon><i class="fas fa-folder-open"></i></template>
|
||||
</FormLink>
|
||||
<FormSwitch v-model="keepOriginalUploading" class="_formBlock">{{ i18n.ts.keepOriginalUploading }}<template #caption>{{ i18n.ts.keepOriginalUploadingDescription }}</template></FormSwitch>
|
||||
<FormSwitch v-model="keepOriginalUploading" class="_formBlock">
|
||||
<template #label>{{ i18n.ts.keepOriginalUploading }}</template>
|
||||
<template #caption>{{ i18n.ts.keepOriginalUploadingDescription }}</template>
|
||||
</FormSwitch>
|
||||
<FormSwitch v-model="alwaysMarkNsfw" class="_formBlock" @update:modelValue="saveProfile()">
|
||||
<template #label>{{ i18n.ts.alwaysMarkSensitive }}</template>
|
||||
</FormSwitch>
|
||||
<FormSwitch v-model="autoSensitive" class="_formBlock" @update:modelValue="saveProfile()">
|
||||
<template #label>{{ i18n.ts.enableAutoSensitive }}<span class="_beta">{{ i18n.ts.beta }}</span></template>
|
||||
<template #caption>{{ i18n.ts.enableAutoSensitiveDescription }}</template>
|
||||
</FormSwitch>
|
||||
</FormSection>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -47,11 +57,14 @@ import { defaultStore } from '@/store';
|
|||
import MkChart from '@/components/chart.vue';
|
||||
import { i18n } from '@/i18n';
|
||||
import { definePageMetadata } from '@/scripts/page-metadata';
|
||||
import { $i } from '@/account';
|
||||
|
||||
const fetching = ref(true);
|
||||
const usage = ref<any>(null);
|
||||
const capacity = ref<any>(null);
|
||||
const uploadFolder = ref<any>(null);
|
||||
let alwaysMarkNsfw = $ref($i.alwaysMarkNsfw);
|
||||
let autoSensitive = $ref($i.autoSensitive);
|
||||
|
||||
const meterStyle = computed(() => {
|
||||
return {
|
||||
|
|
@ -94,6 +107,13 @@ function chooseUploadFolder() {
|
|||
});
|
||||
}
|
||||
|
||||
function saveProfile() {
|
||||
os.api('i/update', {
|
||||
alwaysMarkNsfw: !!alwaysMarkNsfw,
|
||||
autoSensitive: !!autoSensitive,
|
||||
});
|
||||
}
|
||||
|
||||
const headerActions = $computed(() => []);
|
||||
|
||||
const headerTabs = $computed(() => []);
|
||||
|
|
|
|||
|
|
@ -56,10 +56,10 @@
|
|||
|
||||
<FormRadios v-model="fontSize" class="_formBlock">
|
||||
<template #label>{{ i18n.ts.fontSize }}</template>
|
||||
<option value="small"><span style="font-size: 14px;">Aa</span></option>
|
||||
<option :value="null"><span style="font-size: 16px;">Aa</span></option>
|
||||
<option value="large"><span style="font-size: 18px;">Aa</span></option>
|
||||
<option value="veryLarge"><span style="font-size: 20px;">Aa</span></option>
|
||||
<option :value="null"><span style="font-size: 14px;">Aa</span></option>
|
||||
<option value="1"><span style="font-size: 15px;">Aa</span></option>
|
||||
<option value="2"><span style="font-size: 16px;">Aa</span></option>
|
||||
<option value="3"><span style="font-size: 17px;">Aa</span></option>
|
||||
</FormRadios>
|
||||
</FormSection>
|
||||
|
||||
|
|
|
|||
|
|
@ -114,15 +114,15 @@ const menuDef = computed(() => [{
|
|||
to: '/settings/theme',
|
||||
active: props.initialPage === 'theme',
|
||||
}, {
|
||||
icon: 'fas fa-list-ul',
|
||||
icon: 'fas fa-bars',
|
||||
text: i18n.ts.navbar,
|
||||
to: '/settings/navbar',
|
||||
active: props.initialPage === 'navbar',
|
||||
}, {
|
||||
icon: 'fas fa-bars-progress',
|
||||
text: i18n.ts.statusbar,
|
||||
to: '/settings/statusbars',
|
||||
active: props.initialPage === 'statusbars',
|
||||
}, {
|
||||
icon: 'fas fa-list-ul',
|
||||
text: i18n.ts.menu,
|
||||
to: '/settings/menu',
|
||||
active: props.initialPage === 'menu',
|
||||
}, {
|
||||
icon: 'fas fa-music',
|
||||
text: i18n.ts.sounds,
|
||||
|
|
@ -225,7 +225,7 @@ const component = computed(() => {
|
|||
case 'theme': return defineAsyncComponent(() => import('./theme.vue'));
|
||||
case 'theme/install': return defineAsyncComponent(() => import('./theme.install.vue'));
|
||||
case 'theme/manage': return defineAsyncComponent(() => import('./theme.manage.vue'));
|
||||
case 'menu': return defineAsyncComponent(() => import('./menu.vue'));
|
||||
case 'navbar': return defineAsyncComponent(() => import('./navbar.vue'));
|
||||
case 'statusbars': return defineAsyncComponent(() => import('./statusbars.vue'));
|
||||
case 'sounds': return defineAsyncComponent(() => import('./sounds.vue'));
|
||||
case 'custom-css': return defineAsyncComponent(() => import('./custom-css.vue'));
|
||||
|
|
@ -291,6 +291,8 @@ const headerActions = $computed(() => []);
|
|||
const headerTabs = $computed(() => []);
|
||||
|
||||
definePageMetadata(INFO);
|
||||
// w 890
|
||||
// h 700
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
|
@ -328,13 +330,11 @@ definePageMetadata(INFO);
|
|||
width: 34%;
|
||||
padding-right: 32px;
|
||||
box-sizing: border-box;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
> .main {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
overflow: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<template>
|
||||
<div class="_formRoot">
|
||||
<FormTextarea v-model="items" tall manual-save class="_formBlock">
|
||||
<template #label>{{ i18n.ts.menu }}</template>
|
||||
<template #label>{{ i18n.ts.navbar }}</template>
|
||||
<template #caption><button class="_textButton" @click="addItem">{{ i18n.ts.addItem }}</button></template>
|
||||
</FormTextarea>
|
||||
|
||||
|
|
@ -23,7 +23,7 @@ import FormTextarea from '@/components/form/textarea.vue';
|
|||
import FormRadios from '@/components/form/radios.vue';
|
||||
import FormButton from '@/components/ui/button.vue';
|
||||
import * as os from '@/os';
|
||||
import { menuDef } from '@/menu';
|
||||
import { navbarItemDef } from '@/navbar';
|
||||
import { defaultStore } from '@/store';
|
||||
import { unisonReload } from '@/scripts/unison-reload';
|
||||
import { i18n } from '@/i18n';
|
||||
|
|
@ -45,11 +45,11 @@ async function reloadAsk() {
|
|||
}
|
||||
|
||||
async function addItem() {
|
||||
const menu = Object.keys(menuDef).filter(k => !defaultStore.state.menu.includes(k));
|
||||
const menu = Object.keys(navbarItemDef).filter(k => !defaultStore.state.menu.includes(k));
|
||||
const { canceled, result: item } = await os.select({
|
||||
title: i18n.ts.addItem,
|
||||
items: [...menu.map(k => ({
|
||||
value: k, text: i18n.ts[menuDef[k].title],
|
||||
value: k, text: i18n.ts[navbarItemDef[k].title],
|
||||
})), {
|
||||
value: '-', text: i18n.ts.divider,
|
||||
}],
|
||||
|
|
@ -81,7 +81,7 @@ const headerActions = $computed(() => []);
|
|||
const headerTabs = $computed(() => []);
|
||||
|
||||
definePageMetadata({
|
||||
title: i18n.ts.menu,
|
||||
title: i18n.ts.navbar,
|
||||
icon: 'fas fa-list-ul',
|
||||
});
|
||||
</script>
|
||||
|
|
@ -10,6 +10,8 @@
|
|||
|
||||
<FormLink to="/settings/account-info" class="_formBlock">{{ i18n.ts.accountInfo }}</FormLink>
|
||||
|
||||
<FormLink to="/registry" class="_formBlock"><template #icon><i class="fas fa-cogs"></i></template>{{ i18n.ts.registry }}</FormLink>
|
||||
|
||||
<FormLink to="/settings/delete-account" class="_formBlock"><template #icon><i class="fas fa-exclamation-triangle"></i></template>{{ i18n.ts.closeAccount }}</FormLink>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -1,11 +1,11 @@
|
|||
<template>
|
||||
<div class="_formRoot">
|
||||
<div class="llvierxe" :style="{ backgroundImage: $i.bannerUrl ? `url(${ $i.bannerUrl })` : null }">
|
||||
<div class="avatar _acrylic">
|
||||
<div class="avatar">
|
||||
<MkAvatar class="avatar" :user="$i" :disable-link="true" @click="changeAvatar"/>
|
||||
<MkButton primary class="avatarEdit" @click="changeAvatar">{{ i18n.ts._profile.changeAvatar }}</MkButton>
|
||||
<MkButton primary rounded class="avatarEdit" @click="changeAvatar">{{ i18n.ts._profile.changeAvatar }}</MkButton>
|
||||
</div>
|
||||
<MkButton primary class="bannerEdit" @click="changeBanner">{{ i18n.ts._profile.changeBanner }}</MkButton>
|
||||
<MkButton primary rounded class="bannerEdit" @click="changeBanner">{{ i18n.ts._profile.changeBanner }}</MkButton>
|
||||
</div>
|
||||
|
||||
<FormInput v-model="profile.name" :max="30" manual-save class="_formBlock">
|
||||
|
|
@ -39,10 +39,10 @@
|
|||
|
||||
<div class="_formRoot">
|
||||
<FormSplit v-for="(record, i) in fields" :min-width="250" class="_formBlock">
|
||||
<FormInput v-model="record.name">
|
||||
<FormInput v-model="record.name" small>
|
||||
<template #label>{{ i18n.ts._profile.metadataLabel }} #{{ i + 1 }}</template>
|
||||
</FormInput>
|
||||
<FormInput v-model="record.value">
|
||||
<FormInput v-model="record.value" small>
|
||||
<template #label>{{ i18n.ts._profile.metadataContent }} #{{ i + 1 }}</template>
|
||||
</FormInput>
|
||||
</FormSplit>
|
||||
|
|
@ -56,8 +56,6 @@
|
|||
<FormSwitch v-model="profile.isCat" class="_formBlock">{{ i18n.ts.flagAsCat }}<template #caption>{{ i18n.ts.flagAsCatDescription }}</template></FormSwitch>
|
||||
<FormSwitch v-model="profile.showTimelineReplies" class="_formBlock">{{ i18n.ts.flagShowTimelineReplies }}<template #caption>{{ i18n.ts.flagShowTimelineRepliesDescription }} {{ i18n.ts.reflectMayTakeTime }}</template></FormSwitch>
|
||||
<FormSwitch v-model="profile.isBot" class="_formBlock">{{ i18n.ts.flagAsBot }}<template #caption>{{ i18n.ts.flagAsBotDescription }}</template></FormSwitch>
|
||||
|
||||
<FormSwitch v-model="profile.alwaysMarkNsfw" class="_formBlock">{{ i18n.ts.alwaysMarkSensitive }}</FormSwitch>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -88,7 +86,6 @@ const profile = reactive({
|
|||
isBot: $i.isBot,
|
||||
isCat: $i.isCat,
|
||||
showTimelineReplies: $i.showTimelineReplies,
|
||||
alwaysMarkNsfw: $i.alwaysMarkNsfw,
|
||||
});
|
||||
|
||||
watch(() => profile, () => {
|
||||
|
|
@ -126,7 +123,6 @@ function save() {
|
|||
isBot: !!profile.isBot,
|
||||
isCat: !!profile.isCat,
|
||||
showTimelineReplies: !!profile.showTimelineReplies,
|
||||
alwaysMarkNsfw: !!profile.alwaysMarkNsfw,
|
||||
});
|
||||
}
|
||||
|
||||
|
|
@ -191,8 +187,9 @@ definePageMetadata({
|
|||
position: relative;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
border: solid 1px var(--divider);
|
||||
border-radius: 10px;
|
||||
overflow: hidden; overflow: clip;
|
||||
overflow: clip;
|
||||
|
||||
> .avatar {
|
||||
display: inline-block;
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@
|
|||
|
||||
<FormSection>
|
||||
<template #label>{{ i18n.ts.signinHistory }}</template>
|
||||
<MkPagination :pagination="pagination">
|
||||
<MkPagination :pagination="pagination" disable-auto-load>
|
||||
<template #default="{items}">
|
||||
<div>
|
||||
<div v-for="item in items" :key="item.id" v-panel class="timnmucd">
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
</FormSelect>
|
||||
|
||||
<MkInput v-model="statusbar.name" manual-save class="_formBlock">
|
||||
<template #label>Name</template>
|
||||
<template #label>{{ i18n.ts.label }}</template>
|
||||
</MkInput>
|
||||
|
||||
<MkSwitch v-model="statusbar.black" class="_formBlock">
|
||||
|
|
@ -16,7 +16,7 @@
|
|||
</MkSwitch>
|
||||
|
||||
<FormRadios v-model="statusbar.size" class="_formBlock">
|
||||
<template #label>Size</template>
|
||||
<template #label>{{ i18n.ts.size }}</template>
|
||||
<option value="verySmall">{{ i18n.ts.small }}+</option>
|
||||
<option value="small">{{ i18n.ts.small }}</option>
|
||||
<option value="medium">{{ i18n.ts.medium }}</option>
|
||||
|
|
@ -28,28 +28,33 @@
|
|||
<MkInput v-model="statusbar.props.url" manual-save class="_formBlock" type="url">
|
||||
<template #label>URL</template>
|
||||
</MkInput>
|
||||
<MkSwitch v-model="statusbar.props.shuffle" class="_formBlock">
|
||||
<template #label>{{ i18n.ts.shuffle }}</template>
|
||||
</MkSwitch>
|
||||
<MkInput v-model="statusbar.props.refreshIntervalSec" manual-save class="_formBlock" type="number">
|
||||
<template #label>Refresh interval</template>
|
||||
</MkInput>
|
||||
<MkInput v-model="statusbar.props.marqueeDuration" manual-save class="_formBlock" type="number">
|
||||
<template #label>Duration</template>
|
||||
<template #label>{{ i18n.ts.refreshInterval }}</template>
|
||||
</MkInput>
|
||||
<FormRange v-model="statusbar.props.marqueeDuration" :min="5" :max="150" :step="1" class="_formBlock">
|
||||
<template #label>{{ i18n.ts.speed }}</template>
|
||||
<template #caption>{{ i18n.ts.fast }} <-> {{ i18n.ts.slow }}</template>
|
||||
</FormRange>
|
||||
<MkSwitch v-model="statusbar.props.marqueeReverse" class="_formBlock">
|
||||
<template #label>Reverse</template>
|
||||
<template #label>{{ i18n.ts.reverse }}</template>
|
||||
</MkSwitch>
|
||||
</template>
|
||||
<template v-else-if="statusbar.type === 'federation'">
|
||||
<MkInput v-model="statusbar.props.refreshIntervalSec" manual-save class="_formBlock" type="number">
|
||||
<template #label>Refresh interval</template>
|
||||
</MkInput>
|
||||
<MkInput v-model="statusbar.props.marqueeDuration" manual-save class="_formBlock" type="number">
|
||||
<template #label>Duration</template>
|
||||
<template #label>{{ i18n.ts.refreshInterval }}</template>
|
||||
</MkInput>
|
||||
<FormRange v-model="statusbar.props.marqueeDuration" :min="5" :max="150" :step="1" class="_formBlock">
|
||||
<template #label>{{ i18n.ts.speed }}</template>
|
||||
<template #caption>{{ i18n.ts.fast }} <-> {{ i18n.ts.slow }}</template>
|
||||
</FormRange>
|
||||
<MkSwitch v-model="statusbar.props.marqueeReverse" class="_formBlock">
|
||||
<template #label>Reverse</template>
|
||||
<template #label>{{ i18n.ts.reverse }}</template>
|
||||
</MkSwitch>
|
||||
<MkSwitch v-model="statusbar.props.colored" class="_formBlock">
|
||||
<template #label>Colored</template>
|
||||
<template #label>{{ i18n.ts.colored }}</template>
|
||||
</MkSwitch>
|
||||
</template>
|
||||
<template v-else-if="statusbar.type === 'userList' && userLists != null">
|
||||
|
|
@ -58,18 +63,19 @@
|
|||
<option v-for="list in userLists" :value="list.id">{{ list.name }}</option>
|
||||
</FormSelect>
|
||||
<MkInput v-model="statusbar.props.refreshIntervalSec" manual-save class="_formBlock" type="number">
|
||||
<template #label>Refresh interval</template>
|
||||
</MkInput>
|
||||
<MkInput v-model="statusbar.props.marqueeDuration" manual-save class="_formBlock" type="number">
|
||||
<template #label>Duration</template>
|
||||
<template #label>{{ i18n.ts.refreshInterval }}</template>
|
||||
</MkInput>
|
||||
<FormRange v-model="statusbar.props.marqueeDuration" :min="5" :max="150" :step="1" class="_formBlock">
|
||||
<template #label>{{ i18n.ts.speed }}</template>
|
||||
<template #caption>{{ i18n.ts.fast }} <-> {{ i18n.ts.slow }}</template>
|
||||
</FormRange>
|
||||
<MkSwitch v-model="statusbar.props.marqueeReverse" class="_formBlock">
|
||||
<template #label>Reverse</template>
|
||||
<template #label>{{ i18n.ts.reverse }}</template>
|
||||
</MkSwitch>
|
||||
</template>
|
||||
|
||||
<div style="display: flex; gap: var(--margin); flex-wrap: wrap;">
|
||||
<FormButton danger @click="del">Delete</FormButton>
|
||||
<FormButton danger @click="del">{{ i18n.ts.remove }}</FormButton>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -81,8 +87,8 @@ import MkInput from '@/components/form/input.vue';
|
|||
import MkSwitch from '@/components/form/switch.vue';
|
||||
import FormRadios from '@/components/form/radios.vue';
|
||||
import FormButton from '@/components/ui/button.vue';
|
||||
import FormRange from '@/components/form/range.vue';
|
||||
import * as os from '@/os';
|
||||
import { menuDef } from '@/menu';
|
||||
import { defaultStore } from '@/store';
|
||||
import { i18n } from '@/i18n';
|
||||
|
||||
|
|
@ -97,6 +103,7 @@ watch(() => statusbar.type, () => {
|
|||
if (statusbar.type === 'rss') {
|
||||
statusbar.name = 'NEWS';
|
||||
statusbar.props.url = 'http://feeds.afpbb.com/rss/afpbb/afpbbnews';
|
||||
statusbar.props.shuffle = true;
|
||||
statusbar.props.refreshIntervalSec = 120;
|
||||
statusbar.props.display = 'marquee';
|
||||
statusbar.props.marqueeDuration = 100;
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
<template #suffix>{{ x.name }}</template>
|
||||
<XStatusbar :_id="x.id" :user-lists="userLists"/>
|
||||
</FormFolder>
|
||||
<FormButton @click="add">add</FormButton>
|
||||
<FormButton primary @click="add">{{ i18n.ts.add }}</FormButton>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
|
|
@ -97,7 +97,10 @@ const darkThemeId = computed({
|
|||
return darkTheme.value.id;
|
||||
},
|
||||
set(id) {
|
||||
ColdDeviceStorage.set('darkTheme', themes.value.find(x => x.id === id));
|
||||
const t = themes.value.find(x => x.id === id);
|
||||
if (t) { // テーマエディタでテーマを作成したときなどは、themesに反映されないため undefined になる
|
||||
ColdDeviceStorage.set('darkTheme', t);
|
||||
}
|
||||
},
|
||||
});
|
||||
const lightTheme = ColdDeviceStorage.ref('lightTheme');
|
||||
|
|
@ -106,7 +109,10 @@ const lightThemeId = computed({
|
|||
return lightTheme.value.id;
|
||||
},
|
||||
set(id) {
|
||||
ColdDeviceStorage.set('lightTheme', themes.value.find(x => x.id === id));
|
||||
const t = themes.value.find(x => x.id === id);
|
||||
if (t) { // テーマエディタでテーマを作成したときなどは、themesに反映されないため undefined になる
|
||||
ColdDeviceStorage.set('lightTheme', t);
|
||||
}
|
||||
},
|
||||
});
|
||||
const darkMode = computed(defaultStore.makeGetterSetter('darkMode'));
|
||||
|
|
@ -175,7 +181,7 @@ definePageMetadata({
|
|||
> .toggleWrapper {
|
||||
display: inline-block;
|
||||
text-align: left;
|
||||
overflow: hidden; overflow: clip;
|
||||
overflow: clip;
|
||||
padding: 0 100px;
|
||||
|
||||
input {
|
||||
|
|
|
|||
|
|
@ -192,7 +192,7 @@ async function saveAs() {
|
|||
theme.name = name;
|
||||
theme.author = `@${$i.username}@${toUnicode(host)}`;
|
||||
if (description) theme.desc = description;
|
||||
addTheme(theme);
|
||||
await addTheme(theme);
|
||||
applyTheme(theme);
|
||||
if (defaultStore.state.darkMode) {
|
||||
ColdDeviceStorage.set('darkTheme', theme);
|
||||
|
|
|
|||
|
|
@ -177,7 +177,7 @@ definePageMetadata(computed(() => ({
|
|||
> .tl {
|
||||
background: var(--bg);
|
||||
border-radius: var(--radius);
|
||||
overflow: hidden; overflow: clip;
|
||||
overflow: clip;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -103,7 +103,7 @@ definePageMetadata(computed(() => list ? {
|
|||
> .tl {
|
||||
background: var(--bg);
|
||||
border-radius: var(--radius);
|
||||
overflow: hidden; overflow: clip;
|
||||
overflow: clip;
|
||||
}
|
||||
|
||||
&.min-width_800px {
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<template>
|
||||
<div>
|
||||
<MkPagination v-slot="{items}" ref="list" :pagination="type === 'following' ? followingPagination : followersPagination" class="mk-following-or-followers">
|
||||
<div class="users _isolated">
|
||||
<div class="users">
|
||||
<MkUserInfo v-for="user in items.map(x => type === 'following' ? x.followee : x.follower)" :key="user.id" class="user" :user="user"/>
|
||||
</div>
|
||||
</MkPagination>
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
<div v-if="user">
|
||||
<XFollowList :user="user" type="followers"/>
|
||||
</div>
|
||||
<MkError v-else-if="error" @retry="fetch()"/>
|
||||
<MkError v-else-if="error" @retry="fetchUser()"/>
|
||||
<MkLoading v-else/>
|
||||
</transition>
|
||||
</MkSpacer>
|
||||
|
|
|
|||
Some files were not shown because too many files have changed in this diff Show more
Loading…
Add table
Add a link
Reference in a new issue