usbharu
/
misskey
mirror of https://github.com/misskey-dev/misskey.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'develop' into swn

This commit is contained in:
tamaina 2021-10-14 01:15:58 +09:00
parent 33676eba51 91c9a6390c
commit 6f358718bb
38 changed files with 836 additions and 697 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
CHANGELOG.md
View File

@ -18,6 +18,7 @@
- クライアント: MFM関数構文のサジェストを実装
- クライアント: 未読の通知のみ表示する機能
- クライアント: 通知ページで通知の種類によるフィルタ
- クライアント: ピン留めユーザーの設定項目がない問題を修正
- ActivityPub: HTML -> MFMの変換を強化
- API: i/notifications に unreadOnly オプションを追加
- API: ap系のエンドポイントをログイン必須化+レートリミット追加

2
locales/ja-JP.yml
View File

@ -794,6 +794,8 @@ itsOff: "オフになっています"
emailRequiredForSignup: "アカウント登録にメールアドレスを必須にする"
unread: "未読"
filter: "フィルタ"
controllPanel: "コントロールパネル"
manageAccounts: "アカウントを管理"
_signup:
almostThere: "ほとんど完了です"

74
src/client/account.ts
View File

@ -1,9 +1,10 @@
import { del, get, set } from '@client/scripts/idb-proxy';
import { reactive } from 'vue';
import { apiUrl } from '@client/config';
import { waiting } from '@client/os';
import { waiting, api, popup, popupMenu, success } from '@client/os';
import { unisonReload, reloadChannel } from '@client/scripts/unison-reload';
import { showSuspendedDialog } from './scripts/show-suspended-dialog';
import { i18n } from './i18n';
// TODO: 他のタブと永続化されたstateを同期
@ -129,6 +130,77 @@ export async function login(token: Account['token'], redirect?: string) {
unisonReload();
}
export async function openAccountMenu(ev: MouseEvent) {
function showSigninDialog() {
popup(import('@client/components/signin-dialog.vue'), {}, {
done: res => {
addAccount(res.id, res.i);
success();
},
}, 'closed');
}
function createAccount() {
popup(import('@client/components/signup-dialog.vue'), {}, {
done: res => {
addAccount(res.id, res.i);
switchAccountWithToken(res.i);
},
}, 'closed');
}
async function switchAccount(account: any) {
const storedAccounts = await getAccounts();
const token = storedAccounts.find(x => x.id === account.id).token;
switchAccountWithToken(token);
}
function switchAccountWithToken(token: string) {
login(token);
}
const storedAccounts = await getAccounts().then(accounts => accounts.filter(x => x.id !== $i.id));
const accountsPromise = api('users/show', { userIds: storedAccounts.map(x => x.id) });
const accountItemPromises = storedAccounts.map(a => new Promise(res => {
accountsPromise.then(accounts => {
const account = accounts.find(x => x.id === a.id);
if (account == null) return res(null);
res({
type: 'user',
user: account,
action: () => { switchAccount(account); }
});
});
}));
popupMenu([...[{
type: 'link',
text: i18n.locale.profile,
to: `/@${ $i.username }`,
avatar: $i,
}, null, ...accountItemPromises, {
icon: 'fas fa-plus',
text: i18n.locale.addAccount,
action: () => {
popupMenu([{
text: i18n.locale.existingAccount,
action: () => { showSigninDialog(); },
}, {
text: i18n.locale.createAccount,
action: () => { createAccount(); },
}], ev.currentTarget || ev.target);
},
}, {
type: 'link',
icon: 'fas fa-users',
text: i18n.locale.manageAccounts,
to: `/settings/accounts`,
}]], ev.currentTarget || ev.target, {
align: 'left'
});
}
// このファイルに書きたくないけどここに書かないと何故かVeturが認識しない
declare module '@vue/runtime-core' {
interface ComponentCustomProperties {

162
src/client/components/global/header.vue
View File

@ -1,5 +1,5 @@
<template>
<div class="fdidabkb" :class="{ slim: narrow, thin }" :style="{ background: bg }" @click="onClick">
<div class="fdidabkb" :class="{ slim: narrow, thin }" :style="{ background: bg }" @click="onClick" ref="el">
<template v-if="info">
<div class="titleContainer" @click="showTabsPopup">
<i v-if="info.icon" class="icon" :class="info.icon"></i>
@ -37,12 +37,14 @@
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import { computed, defineComponent, onMounted, onUnmounted, PropType, ref } from 'vue';
import * as tinycolor from 'tinycolor2';
import { popupMenu } from '@client/os';
import { url } from '@client/config';
import { scrollToTop } from '@client/scripts/scroll';
import MkButton from '@client/components/ui/button.vue';
import { i18n } from '@client/i18n';
import { globalEvents } from '@client/events';
export default defineComponent({
components: {
@ -51,6 +53,10 @@ export default defineComponent({
props: {
info: {
type: Object as PropType<{
actions?: {}[];
tabs?: {}[];
}>,
required: true
},
menu: {
@ -62,99 +68,122 @@ export default defineComponent({
},
},
data() {
return {
bg: null,
narrow: false,
height: 0,
};
},
computed: {
hasTabs(): boolean {
return this.info.tabs && this.info.tabs.length > 0;
},
shouldShowMenu() {
if (this.info == null) return false;
if (this.info.actions != null && this.narrow) return true;
if (this.info.menu != null) return true;
if (this.info.share != null) return true;
if (this.menu != null) return true;
setup(props) {
const el = ref<HTMLElement>(null);
const bg = ref(null);
const narrow = ref(false);
const height = ref(0);
const hasTabs = computed(() => {
return props.info.tabs && props.info.tabs.length > 0;
});
const shouldShowMenu = computed(() => {
if (props.info == null) return false;
if (props.info.actions != null && narrow.value) return true;
if (props.info.menu != null) return true;
if (props.info.share != null) return true;
if (props.menu != null) return true;
return false;
}
},
});
mounted() {
const rawBg = this.info?.bg || 'var(--bg)';
const bg = tinycolor(rawBg.startsWith('var(') ? getComputedStyle(document.documentElement).getPropertyValue(rawBg.slice(4, -1)) : rawBg);
bg.setAlpha(0.85);
this.bg = bg.toRgbString();
if (this.$el.parentElement) {
this.narrow = this.$el.parentElement.offsetWidth < 500;
new ResizeObserver((entries, observer) => {
this.narrow = this.$el.parentElement.offsetWidth < 500;
}).observe(this.$el.parentElement);
const currentStickyTop = getComputedStyle(this.$el).getPropertyValue('--stickyTop') || '0px';
this.$el.style.setProperty('--stickyTop', currentStickyTop);
this.$el.parentElement.style.setProperty('--stickyTop', `calc(${currentStickyTop} + ${this.$el.offsetHeight}px)`);
}
},
methods: {
share() {
const share = () => {
navigator.share({
url: url + this.info.path,
...this.info.share,
url: url + props.info.path,
...props.info.share,
});
},
};
showMenu(ev) {
let menu = this.info.menu ? this.info.menu() : [];
if (this.narrow && this.info.actions) {
menu = [...this.info.actions.map(x => ({
const showMenu = (ev: MouseEvent) => {
let menu = props.info.menu ? props.info.menu() : [];
if (narrow.value && props.info.actions) {
menu = [...props.info.actions.map(x => ({
text: x.text,
icon: x.icon,
action: x.handler
})), menu.length > 0 ? null : undefined, ...menu];
}
if (this.info.share) {
if (props.info.share) {
if (menu.length > 0) menu.push(null);
menu.push({
text: this.$ts.share,
text: i18n.locale.share,
icon: 'fas fa-share-alt',
action: this.share
action: share
});
}
if (this.menu) {
if (props.menu) {
if (menu.length > 0) menu.push(null);
menu = menu.concat(this.menu);
menu = menu.concat(props.menu);
}
popupMenu(menu, ev.currentTarget || ev.target);
},
};
showTabsPopup(ev) {
if (!this.hasTabs) return;
if (!this.narrow) return;
const showTabsPopup = (ev: MouseEvent) => {
if (!hasTabs.value) return;
if (!narrow.value) return;
ev.preventDefault();
ev.stopPropagation();
const menu = this.info.tabs.map(tab => ({
const menu = props.info.tabs.map(tab => ({
text: tab.title,
icon: tab.icon,
action: tab.onClick,
}));
popupMenu(menu, ev.currentTarget || ev.target);
},
};
preventDrag(ev) {
const preventDrag = (ev: TouchEvent) => {
ev.stopPropagation();
},
};
onClick(ev) {
scrollToTop(this.$el, { behavior: 'smooth' });
}
}
const onClick = () => {
scrollToTop(el.value, { behavior: 'smooth' });
};
const calcBg = () => {
const rawBg = props.info?.bg || 'var(--bg)';
const tinyBg = tinycolor(rawBg.startsWith('var(') ? getComputedStyle(document.documentElement).getPropertyValue(rawBg.slice(4, -1)) : rawBg);
tinyBg.setAlpha(0.85);
bg.value = tinyBg.toRgbString();
};
onMounted(() => {
calcBg();
globalEvents.on('themeChanged', calcBg);
onUnmounted(() => {
globalEvents.off('themeChanged', calcBg);
});
if (el.value.parentElement) {
narrow.value = el.value.parentElement.offsetWidth < 500;
const ro = new ResizeObserver((entries, observer) => {
if (el.value) {
narrow.value = el.value.parentElement.offsetWidth < 500;
}
});
ro.observe(el.value.parentElement);
onUnmounted(() => {
ro.disconnect();
});
setTimeout(() => {
const currentStickyTop = getComputedStyle(el.value.parentElement).getPropertyValue('--stickyTop') || '0px';
el.value.style.setProperty('--stickyTop', currentStickyTop);
el.value.parentElement.style.setProperty('--stickyTop', `calc(${currentStickyTop} + ${el.value.offsetHeight}px)`);
}, 100); // レンダリング順序の関係で親のstickyTopの設定が少し遅れることがあるため
}
});
return {
el,
bg,
narrow,
height,
hasTabs,
shouldShowMenu,
share,
showMenu,
showTabsPopup,
preventDrag,
onClick,
};
},
});
</script>
@ -168,6 +197,7 @@ export default defineComponent({
width: 100%;
-webkit-backdrop-filter: var(--blur, blur(15px));
backdrop-filter: var(--blur, blur(15px));
border-bottom: solid 0.5px var(--divider);
&.thin {
--height: 50px;

19
src/client/components/ui/button.vue
View File

@ -1,6 +1,5 @@
<template>
<component class="bghgjjyj _button"
:is="link ? 'MkA' : 'button'"
<button v-if="!link" class="bghgjjyj _button"
:class="{ inline, primary, danger, rounded, full }"
:type="type"
@click="$emit('click', $event)"
@ -10,7 +9,17 @@
<div class="content">
<slot></slot>
</div>
</component>
</button>
<MkA v-else class="bghgjjyj _button"
:class="{ inline, primary, danger, rounded, full }"
:to="to"
@mousedown="onMousedown"
>
<div ref="ripples" class="ripples"></div>
<div class="content">
<slot></slot>
</div>
</MkA>
</template>
<script lang="ts">
@ -42,6 +51,10 @@ export default defineComponent({
required: false,
default: false
},
to: {
type: String,
required: false
},
autofocus: {
type: Boolean,
required: false,

23
src/client/components/ui/folder.vue
View File

@ -1,6 +1,6 @@
<template>
<div class="ssazuxis" v-size="{ max: [500] }">
<header @click="showBody = !showBody" class="_button">
<header @click="showBody = !showBody" class="_button" :style="{ background: bg }">
<div class="title"><slot name="header"></slot></div>
<div class="divider"></div>
<button class="_button">
@ -23,6 +23,7 @@
<script lang="ts">
import { defineComponent } from 'vue';
import * as tinycolor from 'tinycolor2';
const localStoragePrefix = 'ui:folder:';
@ -41,6 +42,7 @@ export default defineComponent({
},
data() {
return {
bg: null,
showBody: (this.persistKey && localStorage.getItem(localStoragePrefix + this.persistKey)) ? localStorage.getItem(localStoragePrefix + this.persistKey) === 't' : this.expanded,
};
},
@ -51,6 +53,21 @@ export default defineComponent({
}
}
},
mounted() {
function getParentBg(el: Element | null): string {
if (el == null || el.tagName === 'BODY') return 'var(--bg)';
const bg = el.style.background || el.style.backgroundColor;
if (bg) {
return bg;
} else {
return getParentBg(el.parentElement);
}
}
const rawBg = getParentBg(this.$el);
const bg = tinycolor(rawBg.startsWith('var(') ? getComputedStyle(document.documentElement).getPropertyValue(rawBg.slice(4, -1)) : rawBg);
bg.setAlpha(0.85);
this.bg = bg.toRgbString();
},
methods: {
toggleContent(show: boolean) {
this.showBody = show;
@ -100,12 +117,8 @@ export default defineComponent({
position: sticky;
top: var(--stickyTop, 0px);
padding: var(--x-padding);
background: var(--x-header, var(--panel));
/* TODO panelの半透明バージョンをプログラマティックに作りたい
background: var(--X17);
-webkit-backdrop-filter: var(--blur, blur(8px));
backdrop-filter: var(--blur, blur(20px));
*/
> .title {
margin: 0;

151
src/client/components/ui/super-menu.vue Normal file
View File

@ -0,0 +1,151 @@
<template>
<div class="rrevdjwu" :class="{ grid }">
<div class="group" v-for="group in def">
<div class="title" v-if="group.title">{{ group.title }}</div>
<div class="items">
<template v-for="(item, i) in group.items">
<a v-if="item.type === 'a'" :href="item.href" :target="item.target" :tabindex="i" class="_button item" :class="{ danger: item.danger, active: item.active }">
<i v-if="item.icon" class="icon fa-fw" :class="item.icon"></i>
<span class="text">{{ item.text }}</span>
</a>
<button v-else-if="item.type === 'button'" @click="ev => item.action(ev)" :tabindex="i" class="_button item" :class="{ danger: item.danger, active: item.active }" :disabled="item.active">
<i v-if="item.icon" class="icon fa-fw" :class="item.icon"></i>
<span class="text">{{ item.text }}</span>
</button>
<MkA v-else :to="item.to" :tabindex="i" class="_button item" :class="{ danger: item.danger, active: item.active }">
<i v-if="item.icon" class="icon fa-fw" :class="item.icon"></i>
<span class="text">{{ item.text }}</span>
</MkA>
</template>
</div>
</div>
</div>
</template>
<script lang="ts">
import { defineComponent, ref, unref } from 'vue';
export default defineComponent({
props: {
def: {
type: Array,
required: true
},
grid: {
type: Boolean,
required: false,
default: false,
},
},
});
</script>
<style lang="scss" scoped>
.rrevdjwu {
> .group {
& + .group {
margin-top: 16px;
padding-top: 16px;
border-top: solid 0.5px var(--divider);
}
margin-left: 16px;
margin-right: 16px;
> .title {
font-size: 0.9em;
opacity: 0.7;
margin: 0 0 8px 12px;
}
> .items {
> .item {
display: flex;
align-items: center;
width: 100%;
box-sizing: border-box;
padding: 10px 16px 10px 14px;
border-radius: 999px;
font-size: 0.9em;
&:hover {
text-decoration: none;
background: var(--panelHighlight);
}
&.active {
color: var(--accent);
background: var(--accentedBg);
}
&.danger {
color: var(--error);
}
> .icon {
width: 32px;
margin-right: 2px;
flex-shrink: 0;
text-align: center;
opacity: 0.8;
}
> .text {
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
padding-right: 12px;
}
}
}
}
&.grid {
> .group {
& + .group {
padding-top: 0;
border-top: none;
}
margin-left: 0;
margin-right: 0;
> .title {
font-size: 1em;
opacity: 0.7;
margin: 0 0 8px 16px;
}
> .items {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
grid-gap: 8px;
padding: 0 16px;
> .item {
flex-direction: column;
padding: 18px 16px 16px 16px;
background: var(--panel);
border-radius: 8px;
text-align: center;
> .icon {
display: block;
margin-right: 0;
margin-bottom: 12px;
font-size: 1.5em;
}
> .text {
padding-right: 0;
width: 100%;
font-size: 0.8em;
}
}
}
}
}
}
</style>

4
src/client/events.ts Normal file
View File

@ -0,0 +1,4 @@
import { EventEmitter } from 'eventemitter3';
// TODO: 型付け
export const globalEvents = new EventEmitter();

1
src/client/pages/emojis.category.vue
View File

@ -122,7 +122,6 @@ export default defineComponent({
}
> .emojis {
--x-header: var(--bg);
--x-padding: 0 16px;
.zuvgdzyt {

48
src/client/pages/explore.vue
View File

@ -3,16 +3,7 @@
<MkHeader :info="header"/>
<div class="lznhrdub _root">
<div>
<div class="_isolated">
<MkInput v-model="query" :debounce="true" type="search">
<template #prefix><i class="fas fa-search"></i></template>
<template #label>{{ $ts.searchUser }}</template>
</MkInput>
</div>
<XUserList v-if="query" class="_gap" :pagination="searchPagination" ref="search"/>
<div v-if="tab === 'local'">
<div class="localfedi7 _block _isolated" v-if="meta && stats && tag == null" :style="{ backgroundImage: meta.bannerUrl ? `url(${meta.bannerUrl})` : null }">
<header><span>{{ $t('explore', { host: meta.name || 'Misskey' }) }}</span></header>
<div><span>{{ $t('exploreUsersCount', { count: num(stats.originalUsersCount) }) }}</span></div>
@ -37,7 +28,7 @@
</MkFolder>
</template>
</div>
<div>
<div v-else-if="tab === 'remote'">
<div class="localfedi7 _block _isolated" v-if="tag == null" :style="{ backgroundImage: `url(/static-assets/client/fedi.jpg)` }">
<header><span>{{ $ts.exploreFediverse }}</span></header>
</div>
@ -71,6 +62,16 @@
</MkFolder>
</template>
</div>
<div v-else-if="tab === 'search'">
<div class="_isolated">
<MkInput v-model="query" :debounce="true" type="search">
<template #prefix><i class="fas fa-search"></i></template>
<template #label>{{ $ts.searchUser }}</template>
</MkInput>
</div>
<XUserList v-if="query" class="_gap" :pagination="searchPagination" ref="search"/>
</div>
</div>
</div>
</template>
@ -102,12 +103,28 @@ export default defineComponent({
return {
[symbols.PAGE_INFO]: {
title: this.$ts.explore,
icon: 'fas fa-hashtag'
icon: 'fas fa-hashtag',
bg: 'var(--bg)',
},
header: {
tab: 'local',
header: computed(() => ({
title: this.$ts.explore,
icon: 'fas fa-hashtag'
},
icon: 'fas fa-hashtag',
bg: 'var(--bg)',
tabs: [{
active: this.tab === 'local',
title: this.$ts.local,
onClick: () => { this.tab = 'local'; },
}, {
active: this.tab === 'remote',
title: this.$ts.remote,
onClick: () => { this.tab = 'remote'; },
}, {
active: this.tab === 'search',
title: this.$ts.search,
onClick: () => { this.tab = 'search'; },
},]
})),
pinnedUsers: { endpoint: 'pinned-users' },
popularUsers: { endpoint: 'users', limit: 10, noPaging: true, params: {
state: 'alive',
@ -200,6 +217,7 @@ export default defineComponent({
.lznhrdub {
max-width: 1400px;
margin: 0 auto;
padding: 16px;
}
.localfedi7 {

3
src/client/pages/instance/database.vue
View File

@ -43,7 +43,8 @@ export default defineComponent({
return {
[symbols.PAGE_INFO]: {
title: this.$ts.database,
icon: 'fas fa-database'
icon: 'fas fa-database',
bg: 'var(--bg)',
},
databasePromiseFactory: () => os.api('admin/get-table-stats', {}).then(res => Object.entries(res).sort((a, b) => b[1].size - a[1].size)),
}

3
src/client/pages/instance/email-settings.vue
View File

@ -66,7 +66,8 @@ export default defineComponent({
return {
[symbols.PAGE_INFO]: {
title: this.$ts.emailServer,
icon: 'fas fa-envelope'
icon: 'fas fa-envelope',
bg: 'var(--bg)',
},
enableEmail: false,
email: null,

3
src/client/pages/instance/files-settings.vue
View File

@ -56,7 +56,8 @@ export default defineComponent({
return {
[symbols.PAGE_INFO]: {
title: this.$ts.files,
icon: 'fas fa-cloud'
icon: 'fas fa-cloud',
bg: 'var(--bg)',
},
cacheRemoteFiles: false,
proxyRemoteFiles: false,

97
src/client/pages/instance/index.link.vue
View File

@ -1,97 +0,0 @@
<template>
<div class="qmfkfnzh">
<a class="main _button" :href="to" target="_blank" v-if="external">
<span class="icon"><slot name="icon"></slot></span>
<span class="text"><slot></slot></span>
</a>
<MkA class="main _button" :class="{ active }" :to="to" :behavior="behavior" v-else>
<span class="icon"><slot name="icon"></slot></span>
<span class="text"><slot></slot></span>
</MkA>
</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
export default defineComponent({
props: {
to: {
type: String,
required: true
},
active: {
type: Boolean,
required: false
},
external: {
type: Boolean,
required: false
},
behavior: {
type: String,
required: false,
},
},
data() {
return {
};
}
});
</script>
<style lang="scss" scoped>
.qmfkfnzh {
> .main {
display: flex;
align-items: center;
width: 100%;
box-sizing: border-box;
padding: 10px 16px 10px 14px;
border-radius: 999px;
font-size: 0.9em;
&:hover {
text-decoration: none;
background: var(--panelHighlight);
}
&.active {
color: var(--accent);
background: var(--accentedBg);
}
> .icon {
width: 32px;
margin-right: 2px;
flex-shrink: 0;
text-align: center;
opacity: 0.8;
&:empty {
display: none;
& + .text {
padding-left: 4px;
}
}
}
> .text {
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
padding-right: 12px;
}
> .right {
margin-left: auto;
opacity: 0.7;
> .text:not(:empty) {
margin-right: 0.75em;
}
}
}
}
</style>

228
src/client/pages/instance/index.vue
View File

@ -1,47 +1,16 @@
<template>
<div class="hiyeyicy" :class="{ wide: !narrow }" ref="el">
<div class="nav" v-if="!narrow || page == null">
<div class="group">
<div class="lxpfedzu">
<img :src="$instance.iconUrl || '/favicon.ico'" alt="" class="icon"/>
</div>
<XLink :active="page === 'overview'" replace to="/instance/overview"><template #icon><i class="fas fa-tachometer-alt"></i></template>{{ $ts.overview }}</XLink>
</div>
<div class="group">
<div class="label">{{ $ts.quickAction }}</div>
<FormButton @click="lookup"><i class="fas fa-search"></i> {{ $ts.lookup }}</FormButton>
<FormButton v-if="$instance.disableRegistration" @click="invite"><i class="fas fa-user"></i> {{ $ts.invite }}</FormButton>
</div>
<div class="group">
<div class="label">{{ $ts.administration }}</div>
<XLink :active="page === 'users'" replace to="/instance/users"><template #icon><i class="fas fa-users"></i></template>{{ $ts.users }}</XLink>
<XLink :active="page === 'emojis'" replace to="/instance/emojis"><template #icon><i class="fas fa-laugh"></i></template>{{ $ts.customEmojis }}</XLink>
<XLink :active="page === 'federation'" replace to="/instance/federation"><template #icon><i class="fas fa-globe"></i></template>{{ $ts.federation }}</XLink>
<XLink :active="page === 'queue'" replace to="/instance/queue"><template #icon><i class="fas fa-clipboard-list"></i></template>{{ $ts.jobQueue }}</XLink>
<XLink :active="page === 'files'" replace to="/instance/files"><template #icon><i class="fas fa-cloud"></i></template>{{ $ts.files }}</XLink>
<XLink :active="page === 'announcements'" replace to="/instance/announcements"><template #icon><i class="fas fa-broadcast-tower"></i></template>{{ $ts.announcements }}</XLink>
<XLink :active="page === 'ads'" replace to="/instance/ads"><template #icon><i class="fas fa-audio-description"></i></template>{{ $ts.ads }}</XLink>
<XLink :active="page === 'abuses'" replace to="/instance/abuses"><template #icon><i class="fas fa-exclamation-circle"></i></template>{{ $ts.abuseReports }}</XLink>
</div>
<div class="group">
<div class="label">{{ $ts.settings }}</div>
<XLink :active="page === 'settings'" replace to="/instance/settings"><template #icon><i class="fas fa-cog"></i></template>{{ $ts.general }}</XLink>
<XLink :active="page === 'files-settings'" replace to="/instance/files-settings"><template #icon><i class="fas fa-cloud"></i></template>{{ $ts.files }}</XLink>
<XLink :active="page === 'email-settings'" replace to="/instance/email-settings"><template #icon><i class="fas fa-envelope"></i></template>{{ $ts.emailServer }}</XLink>
<XLink :active="page === 'object-storage'" replace to="/instance/object-storage"><template #icon><i class="fas fa-cloud"></i></template>{{ $ts.objectStorage }}</XLink>
<XLink :active="page === 'security'" replace to="/instance/security"><template #icon><i class="fas fa-lock"></i></template>{{ $ts.security }}</XLink>
<XLink :active="page === 'service-worker'" replace to="/instance/service-worker"><template #icon><i class="fas fa-bolt"></i></template>ServiceWorker</XLink>
<XLink :active="page === 'relays'" replace to="/instance/relays"><template #icon><i class="fas fa-globe"></i></template>{{ $ts.relays }}</XLink>
<XLink :active="page === 'integrations'" replace to="/instance/integrations"><template #icon><i class="fas fa-share-alt"></i></template>{{ $ts.integration }}</XLink>
<XLink :active="page === 'instance-block'" replace to="/instance/instance-block"><template #icon><i class="fas fa-ban"></i></template>{{ $ts.instanceBlocking }}</XLink>
<XLink :active="page === 'proxy-account'" replace to="/instance/proxy-account"><template #icon><i class="fas fa-ghost"></i></template>{{ $ts.proxyAccount }}</XLink>
<XLink :active="page === 'other-settings'" replace to="/instance/other-settings"><template #icon><i class="fas fa-cogs"></i></template>{{ $ts.other }}</XLink>
</div>
<div class="group">
<div class="label">{{ $ts.info }}</div>
<XLink :active="page === 'database'" replace to="/instance/database"><template #icon><i class="fas fa-database"></i></template>{{ $ts.database }}</XLink>
<XLink :active="page === 'logs'" replace to="/instance/logs"><template #icon><i class="fas fa-stream"></i></template>{{ $ts.logs }}</XLink>
<MkHeader :info="header"></MkHeader>
<div class="lxpfedzu">
<img :src="$instance.iconUrl || '/favicon.ico'" alt="" class="icon"/>
</div>
<MkInfo v-if="noMaintainerInformation" warn class="info">{{ $ts.noMaintainerInformationWarning }} <MkA to="/instance/settings" class="_link">{{ $ts.configure }}</MkA></MkInfo>
<MkInfo v-if="noBotProtection" warn class="info">{{ $ts.noBotProtectionWarning }} <MkA to="/instance/bot-protection" class="_link">{{ $ts.configure }}</MkA></MkInfo>
<MkSuperMenu :def="menuDef" :grid="page == null"></MkSuperMenu>
</div>
<div class="main">
<component :is="component" :key="page" @info="onInfo" v-bind="pageProps"/>
@ -52,11 +21,13 @@
<script lang="ts">
import { computed, defineAsyncComponent, defineComponent, nextTick, onMounted, reactive, ref, watch } from 'vue';
import { i18n } from '@client/i18n';
import XLink from './index.link.vue';
import MkSuperMenu from '@client/components/ui/super-menu.vue';
import FormGroup from '@client/components/debobigego/group.vue';
import FormBase from '@client/components/debobigego/base.vue';
import FormButton from '@client/components/debobigego/button.vue';
import MkInfo from '@client/components/ui/info.vue';
import { scroll } from '@client/scripts/scroll';
import { instance } from '@client/instance';
import * as symbols from '@client/symbols';
import * as os from '@client/os';
import { lookupUser } from '@client/scripts/lookup-user';
@ -64,9 +35,10 @@ import { lookupUser } from '@client/scripts/lookup-user';
export default defineComponent({
components: {
FormBase,
XLink,
MkSuperMenu,
FormGroup,
FormButton,
MkInfo,
},
props: {
@ -91,6 +63,151 @@ export default defineComponent({
INFO.value = viewInfo;
};
const pageProps = ref({});
const isEmpty = (x: any) => x == null || x == '';
const noMaintainerInformation = ref(false);
const noBotProtection = ref(false);
os.api('meta', { detail: true }).then(meta => {
// TODO: 設定が完了しても残ったままになるので、ストリーミングでmeta更新イベントを受け取ってよしなに更新する
noMaintainerInformation.value = isEmpty(meta.maintainerName) || isEmpty(meta.maintainerEmail);
noBotProtection.value = !meta.enableHcaptcha && !meta.enableRecaptcha;
});
const menuDef = computed(() => [{
title: i18n.locale.quickAction,
items: [{
type: 'button',
icon: 'fas fa-search',
text: i18n.locale.lookup,
action: lookup,
}, ...(instance.disableRegistration ? [{
type: 'button',
icon: 'fas fa-user',
text: i18n.locale.invite,
action: invite,
}] : [])],
}, {
title: i18n.locale.administration,
items: [{
icon: 'fas fa-tachometer-alt',
text: i18n.locale.dashboard,
to: '/instance/overview',
active: page.value === 'overview',
}, {
icon: 'fas fa-users',
text: i18n.locale.users,
to: '/instance/users',
active: page.value === 'users',
}, {
icon: 'fas fa-laugh',
text: i18n.locale.customEmojis,
to: '/instance/emojis',
active: page.value === 'emojis',
}, {
icon: 'fas fa-globe',
text: i18n.locale.federation,
to: '/instance/federation',
active: page.value === 'federation',
}, {
icon: 'fas fa-clipboard-list',
text: i18n.locale.jobQueue,
to: '/instance/queue',
active: page.value === 'queue',
}, {
icon: 'fas fa-cloud',
text: i18n.locale.files,
to: '/instance/files',
active: page.value === 'files',
}, {
icon: 'fas fa-broadcast-tower',
text: i18n.locale.announcements,
to: '/instance/announcements',
active: page.value === 'announcements',
}, {
icon: 'fas fa-audio-description',
text: i18n.locale.ads,
to: '/instance/ads',
active: page.value === 'ads',
}, {
icon: 'fas fa-exclamation-circle',
text: i18n.locale.abuseReports,
to: '/instance/abuses',
active: page.value === 'abuses',
}],
}, {
title: i18n.locale.settings,
items: [{
icon: 'fas fa-cog',
text: i18n.locale.general,
to: '/instance/settings',
active: page.value === 'settings',
}, {
icon: 'fas fa-cloud',
text: i18n.locale.files,
to: '/instance/files-settings',
active: page.value === 'files-settings',
}, {
icon: 'fas fa-envelope',
text: i18n.locale.emailServer,
to: '/instance/email-settings',
active: page.value === 'email-settings',
}, {
icon: 'fas fa-cloud',
text: i18n.locale.objectStorage,
to: '/instance/object-storage',
active: page.value === 'object-storage',
}, {
icon: 'fas fa-lock',
text: i18n.locale.security,
to: '/instance/security',
active: page.value === 'security',
}, {
icon: 'fas fa-bolt',
text: 'ServiceWorker',
to: '/instance/service-worker',
active: page.value === 'service-worker',
}, {
icon: 'fas fa-globe',
text: i18n.locale.relays,
to: '/instance/relays',
active: page.value === 'relays',
}, {
icon: 'fas fa-share-alt',
text: i18n.locale.integration,
to: '/instance/integrations',
active: page.value === 'integrations',
}, {
icon: 'fas fa-ban',
text: i18n.locale.instanceBlocking,
to: '/instance/instance-block',
active: page.value === 'instance-block',
}, {
icon: 'fas fa-ghost',
text: i18n.locale.proxyAccount,
to: '/instance/proxy-account',
active: page.value === 'proxy-account',
}, {
icon: 'fas fa-cogs',
text: i18n.locale.other,
to: '/instance/other-settings',
active: page.value === 'other-settings',
}],
}, {
title: i18n.locale.info,
items: [{
icon: 'fas fa-database',
text: i18n.locale.database,
to: '/instance/database',
active: page.value === 'database',
}, {
icon: 'fas fa-stream',
text: i18n.locale.logs,
to: '/instance/logs',
active: page.value === 'logs',
}],
}]);
const component = computed(() => {
if (page.value == null) return null;
switch (page.value) {
@ -193,6 +310,12 @@ export default defineComponent({
return {
[symbols.PAGE_INFO]: INFO,
menuDef,
header: {
title: i18n.locale.controllPanel,
},
noMaintainerInformation,
noBotProtection,
page,
narrow,
view,
@ -216,20 +339,11 @@ export default defineComponent({
> .nav {
width: 32%;
max-width: 320px;
max-width: 280px;
box-sizing: border-box;
border-right: solid 0.5px var(--divider);
overflow: auto;
> .group {
padding: 16px;
> .label {
font-size: 0.9em;
opacity: 0.7;
margin: 0 0 8px 12px;
}
}
height: 100%;
}
> .main {
@ -238,10 +352,16 @@ export default defineComponent({
--baseContentWidth: 100%;
}
}
> .nav {
> .info {
margin: 16px;
}
}
}
.lxpfedzu {
padding: 16px;
margin: 16px;
> .icon {
display: block;

3
src/client/pages/instance/instance-block.vue
View File

@ -43,7 +43,8 @@ export default defineComponent({
return {
[symbols.PAGE_INFO]: {
title: this.$ts.instanceBlocking,
icon: 'fas fa-ban'
icon: 'fas fa-ban',
bg: 'var(--bg)',
},
blockedHosts: '',
}

3
src/client/pages/instance/integrations.vue
View File

@ -49,7 +49,8 @@ export default defineComponent({
return {
[symbols.PAGE_INFO]: {
title: this.$ts.integration,
icon: 'fas fa-share-alt'
icon: 'fas fa-share-alt',
bg: 'var(--bg)',
},
enableTwitterIntegration: false,
enableGithubIntegration: false,

3
src/client/pages/instance/object-storage.vue
View File

@ -91,7 +91,8 @@ export default defineComponent({
return {
[symbols.PAGE_INFO]: {
title: this.$ts.objectStorage,
icon: 'fas fa-cloud'
icon: 'fas fa-cloud',
bg: 'var(--bg)',
},
useObjectStorage: false,
objectStorageBaseUrl: null,

3
src/client/pages/instance/other-settings.vue
View File

@ -49,7 +49,8 @@ export default defineComponent({
return {
[symbols.PAGE_INFO]: {
title: this.$ts.other,
icon: 'fas fa-cogs'
icon: 'fas fa-cogs',
bg: 'var(--bg)',
},
summalyProxy: '',
deeplAuthKey: '',

10
src/client/pages/instance/overview.vue
View File

@ -1,9 +1,6 @@
<template>
<FormBase>
<FormSuspense :p="init">
<FormInfo v-if="noMaintainerInformation" warn>{{ $ts.noMaintainerInformationWarning }} <MkA to="/instance/settings" class="_link">{{ $ts.configure }}</MkA></FormInfo>
<FormInfo v-if="noBotProtection" warn>{{ $ts.noBotProtectionWarning }} <MkA to="/instance/bot-protection" class="_link">{{ $ts.configure }}</MkA></FormInfo>
<FormSuspense :p="fetchStats" v-slot="{ result: stats }">
<FormGroup>
<FormKeyValueView>
@ -98,8 +95,6 @@ export default defineComponent({
fetchServerInfo: () => os.api('admin/server-info', {}),
fetchJobs: () => os.api('admin/queue/deliver-delayed', {}),
fetchModLogs: () => os.api('admin/show-moderation-logs', {}),
noMaintainerInformation: false,
noBotProtection: false,
}
},
@ -110,11 +105,6 @@ export default defineComponent({
methods: {
async init() {
this.meta = await os.api('meta', { detail: true });
const isEmpty = (x: any) => x == null || x == '';
this.noMaintainerInformation = isEmpty(this.meta.maintainerName) || isEmpty(this.meta.maintainerEmail);
this.noBotProtection = !this.meta.enableHcaptcha && !this.meta.enableRecaptcha;
},
async showInstanceInfo(q) {

3
src/client/pages/instance/proxy-account.vue
View File

@ -46,7 +46,8 @@ export default defineComponent({
return {
[symbols.PAGE_INFO]: {
title: this.$ts.proxyAccount,
icon: 'fas fa-ghost'
icon: 'fas fa-ghost',
bg: 'var(--bg)',
},
proxyAccount: null,
proxyAccountId: null,

1
src/client/pages/instance/queue.vue
View File

@ -34,6 +34,7 @@ export default defineComponent({
[symbols.PAGE_INFO]: {
title: this.$ts.jobQueue,
icon: 'fas fa-clipboard-list',
bg: 'var(--bg)',
},
connection: markRaw(os.stream.useChannel('queueStats')),
}

1
src/client/pages/instance/relays.vue
View File

@ -36,6 +36,7 @@ export default defineComponent({
[symbols.PAGE_INFO]: {
title: this.$ts.relays,
icon: 'fas fa-globe',
bg: 'var(--bg)',
},
relays: [],
inbox: '',

3
src/client/pages/instance/security.vue
View File

@ -47,7 +47,8 @@ export default defineComponent({
return {
[symbols.PAGE_INFO]: {
title: this.$ts.security,
icon: 'fas fa-lock'
icon: 'fas fa-lock',
bg: 'var(--bg)',
},
enableHcaptcha: false,
enableRecaptcha: false,

3
src/client/pages/instance/service-worker.vue
View File

@ -51,7 +51,8 @@ export default defineComponent({
return {
[symbols.PAGE_INFO]: {
title: 'ServiceWorker',
icon: 'fas fa-bolt'
icon: 'fas fa-bolt',
bg: 'var(--bg)',
},
enableServiceWorker: false,
swPublicKey: null,

11
src/client/pages/instance/settings.vue
View File

@ -38,6 +38,11 @@
<span>{{ $ts.maintainerEmail }}</span>
</FormInput>
<FormTextarea v-model="pinnedUsers">
<span>{{ $ts.pinnedUsers }}</span>
<template #desc>{{ $ts.pinnedUsersDescription }}</template>
</FormTextarea>
<FormInput v-model="maxNoteTextLength" type="number">
<template #prefix><i class="fas fa-pencil-alt"></i></template>
<span>{{ $ts.maxNoteTextLength }}</span>
@ -84,7 +89,8 @@ export default defineComponent({
return {
[symbols.PAGE_INFO]: {
title: this.$ts.general,
icon: 'fas fa-cog'
icon: 'fas fa-cog',
bg: 'var(--bg)',
},
name: null,
description: null,
@ -97,6 +103,7 @@ export default defineComponent({
maxNoteTextLength: 0,
enableLocalTimeline: false,
enableGlobalTimeline: false,
pinnedUsers: '',
}
},
@ -118,6 +125,7 @@ export default defineComponent({
this.maxNoteTextLength = meta.maxNoteTextLength;
this.enableLocalTimeline = !meta.disableLocalTimeline;
this.enableGlobalTimeline = !meta.disableGlobalTimeline;
this.pinnedUsers = meta.pinnedUsers.join('\n');
},
save() {
@ -133,6 +141,7 @@ export default defineComponent({
maxNoteTextLength: this.maxNoteTextLength,
disableLocalTimeline: !this.enableLocalTimeline,
disableGlobalTimeline: !this.enableGlobalTimeline,
pinnedUsers: this.pinnedUsers.split('\n'),
}).then(() => {
fetchInstance();
});

2
src/client/pages/instance/users.vue
View File

@ -29,9 +29,11 @@
</div>
<div class="inputs">
<MkInput v-model="searchUsername" style="flex: 1;" type="text" spellcheck="false" @update:modelValue="$refs.users.reload()">
<template #prefix>@</template>
<template #label>{{ $ts.username }}</template>
</MkInput>
<MkInput v-model="searchHost" style="flex: 1;" type="text" spellcheck="false" @update:modelValue="$refs.users.reload()" :disabled="pagination.params().origin === 'local'">
<template #prefix>@</template>
<template #label>{{ $ts.host }}</template>
</MkInput>
</div>

22
src/client/pages/my-antennas/editor.vue
View File

@ -1,10 +1,10 @@
<template>
<div class="shaynizk">
<div class="form">
<MkInput v-model="name" class="">
<MkInput v-model="name" class="_formBlock">
<template #label>{{ $ts.name }}</template>
</MkInput>
<MkSelect v-model="src">
<MkSelect v-model="src" class="_formBlock">
<template #label>{{ $ts.antennaSource }}</template>
<option value="all">{{ $ts._antennaSources.all }}</option>
<option value="home">{{ $ts._antennaSources.homeTimeline }}</option>
@ -12,30 +12,30 @@
<option value="list">{{ $ts._antennaSources.userList }}</option>
<option value="group">{{ $ts._antennaSources.userGroup }}</option>
</MkSelect>
<MkSelect v-model="userListId" v-if="src === 'list'">
<MkSelect v-model="userListId" v-if="src === 'list'" class="_formBlock">
<template #label>{{ $ts.userList }}</template>
<option v-for="list in userLists" :value="list.id" :key="list.id">{{ list.name }}</option>
</MkSelect>
<MkSelect v-model="userGroupId" v-else-if="src === 'group'">
<MkSelect v-model="userGroupId" v-else-if="src === 'group'" class="_formBlock">
<template #label>{{ $ts.userGroup }}</template>
<option v-for="group in userGroups" :value="group.id" :key="group.id">{{ group.name }}</option>
</MkSelect>
<MkTextarea v-model="users" v-else-if="src === 'users'">
<MkTextarea v-model="users" v-else-if="src === 'users'" class="_formBlock">
<template #label>{{ $ts.users }}</template>
<template #caption>{{ $ts.antennaUsersDescription }} <button class="_textButton" @click="addUser">{{ $ts.addUser }}</button></template>
</MkTextarea>
<MkSwitch v-model="withReplies">{{ $ts.withReplies }}</MkSwitch>
<MkTextarea v-model="keywords">
<MkSwitch v-model="withReplies" class="_formBlock">{{ $ts.withReplies }}</MkSwitch>
<MkTextarea v-model="keywords" class="_formBlock">
<template #label>{{ $ts.antennaKeywords }}</template>
<template #caption>{{ $ts.antennaKeywordsDescription }}</template>
</MkTextarea>
<MkTextarea v-model="excludeKeywords">
<MkTextarea v-model="excludeKeywords" class="_formBlock">
<template #label>{{ $ts.antennaExcludeKeywords }}</template>
<template #caption>{{ $ts.antennaKeywordsDescription }}</template>
</MkTextarea>
<MkSwitch v-model="caseSensitive">{{ $ts.caseSensitive }}</MkSwitch>
<MkSwitch v-model="withFile">{{ $ts.withFileAntenna }}</MkSwitch>
<MkSwitch v-model="notify">{{ $ts.notifyAntenna }}</MkSwitch>
<MkSwitch v-model="caseSensitive" class="_formBlock">{{ $ts.caseSensitive }}</MkSwitch>
<MkSwitch v-model="withFile" class="_formBlock">{{ $ts.withFileAntenna }}</MkSwitch>
<MkSwitch v-model="notify" class="_formBlock">{{ $ts.notifyAntenna }}</MkSwitch>
</div>
<div class="actions">
<MkButton inline @click="saveAntenna()" primary><i class="fas fa-save"></i> {{ $ts.save }}</MkButton>

147
src/client/pages/page-editor/page-editor.vue
View File

@ -1,79 +1,82 @@
<template>
<div class="_root">
<MkA class="view" v-if="pageId" :to="`/@${ author.username }/pages/${ currentName }`"><i class="fas fa-external-link-square-alt"></i> {{ $ts._pages.viewPage }}</MkA>
<div>
<MkHeader :info="header"/>
<div class="buttons" style="margin: 16px;">
<MkButton inline @click="save" primary class="save" v-if="!readonly"><i class="fas fa-save"></i> {{ $ts.save }}</MkButton>
<MkButton inline @click="duplicate" class="duplicate" v-if="pageId"><i class="fas fa-copy"></i> {{ $ts.duplicate }}</MkButton>
<MkButton inline @click="del" class="delete" v-if="pageId && !readonly"><i class="fas fa-trash-alt"></i> {{ $ts.delete }}</MkButton>
</div>
<div class="_root">
<div class="jqqmcavi" style="margin: 16px;">
<MkButton v-if="pageId" class="button" inline link :to="`/@${ author.username }/pages/${ currentName }`"><i class="fas fa-external-link-square-alt"></i> {{ $ts._pages.viewPage }}</MkButton>
<MkButton inline @click="save" primary class="button" v-if="!readonly"><i class="fas fa-save"></i> {{ $ts.save }}</MkButton>
<MkButton inline @click="duplicate" class="button" v-if="pageId"><i class="fas fa-copy"></i> {{ $ts.duplicate }}</MkButton>
<MkButton inline @click="del" class="button" v-if="pageId && !readonly" danger><i class="fas fa-trash-alt"></i> {{ $ts.delete }}</MkButton>
</div>
<div v-if="tab === 'settings'">
<div style="padding: 16px;" class="_formRoot">
<MkInput v-model="title" class="_formBlock">
<template #label>{{ $ts._pages.title }}</template>
</MkInput>
<div v-if="tab === 'settings'">
<div style="padding: 16px;" class="_formRoot">
<MkInput v-model="title" class="_formBlock">
<template #label>{{ $ts._pages.title }}</template>
</MkInput>
<MkInput v-model="summary" class="_formBlock">
<template #label>{{ $ts._pages.summary }}</template>
</MkInput>
<MkInput v-model="summary" class="_formBlock">
<template #label>{{ $ts._pages.summary }}</template>
</MkInput>
<MkInput v-model="name" class="_formBlock">
<template #prefix>{{ url }}/@{{ author.username }}/pages/</template>
<template #label>{{ $ts._pages.url }}</template>
</MkInput>
<MkInput v-model="name" class="_formBlock">
<template #prefix>{{ url }}/@{{ author.username }}/pages/</template>
<template #label>{{ $ts._pages.url }}</template>
</MkInput>
<MkSwitch v-model="alignCenter" class="_formBlock">{{ $ts._pages.alignCenter }}</MkSwitch>
<MkSwitch v-model="alignCenter" class="_formBlock">{{ $ts._pages.alignCenter }}</MkSwitch>
<MkSelect v-model="font" class="_formBlock">
<template #label>{{ $ts._pages.font }}</template>
<option value="serif">{{ $ts._pages.fontSerif }}</option>
<option value="sans-serif">{{ $ts._pages.fontSansSerif }}</option>
</MkSelect>
<MkSelect v-model="font" class="_formBlock">
<template #label>{{ $ts._pages.font }}</template>
<option value="serif">{{ $ts._pages.fontSerif }}</option>
<option value="sans-serif">{{ $ts._pages.fontSansSerif }}</option>
</MkSelect>
<MkSwitch v-model="hideTitleWhenPinned" class="_formBlock">{{ $ts._pages.hideTitleWhenPinned }}</MkSwitch>
<MkSwitch v-model="hideTitleWhenPinned" class="_formBlock">{{ $ts._pages.hideTitleWhenPinned }}</MkSwitch>
<div class="eyeCatch">
<MkButton v-if="eyeCatchingImageId == null && !readonly" @click="setEyeCatchingImage"><i class="fas fa-plus"></i> {{ $ts._pages.eyeCatchingImageSet }}</MkButton>
<div v-else-if="eyeCatchingImage">
<img :src="eyeCatchingImage.url" :alt="eyeCatchingImage.name" style="max-width: 100%;"/>
<MkButton @click="removeEyeCatchingImage()" v-if="!readonly"><i class="fas fa-trash-alt"></i> {{ $ts._pages.eyeCatchingImageRemove }}</MkButton>
<div class="eyeCatch">
<MkButton v-if="eyeCatchingImageId == null && !readonly" @click="setEyeCatchingImage"><i class="fas fa-plus"></i> {{ $ts._pages.eyeCatchingImageSet }}</MkButton>
<div v-else-if="eyeCatchingImage">
<img :src="eyeCatchingImage.url" :alt="eyeCatchingImage.name" style="max-width: 100%;"/>
<MkButton @click="removeEyeCatchingImage()" v-if="!readonly"><i class="fas fa-trash-alt"></i> {{ $ts._pages.eyeCatchingImageRemove }}</MkButton>
</div>
</div>
</div>
</div>
</div>
<div v-else-if="tab === 'contents'">
<div style="padding: 16px;">
<XBlocks class="content" v-model="content" :hpml="hpml"/>
<div v-else-if="tab === 'contents'">
<div style="padding: 16px;">
<XBlocks class="content" v-model="content" :hpml="hpml"/>
<MkButton @click="add()" v-if="!readonly"><i class="fas fa-plus"></i></MkButton>
<MkButton @click="add()" v-if="!readonly"><i class="fas fa-plus"></i></MkButton>
</div>
</div>
</div>
<div v-else-if="tab === 'variables'">
<div class="qmuvgica">
<XDraggable tag="div" class="variables" v-show="variables.length > 0" v-model="variables" item-key="name" handle=".drag-handle" :group="{ name: 'variables' }" animation="150" swap-threshold="0.5">
<template #item="{element}">
<XVariable
:value="element"
:removable="true"
@remove="() => removeVariable(element)"
:hpml="hpml"
:name="element.name"
:title="element.name"
:draggable="true"
/>
</template>
</XDraggable>
<div v-else-if="tab === 'variables'">
<div class="qmuvgica">
<XDraggable tag="div" class="variables" v-show="variables.length > 0" v-model="variables" item-key="name" handle=".drag-handle" :group="{ name: 'variables' }" animation="150" swap-threshold="0.5">
<template #item="{element}">
<XVariable
:modelValue="element"
:removable="true"
@remove="() => removeVariable(element)"
:hpml="hpml"
:name="element.name"
:title="element.name"
:draggable="true"
/>
</template>
</XDraggable>
<MkButton @click="addVariable()" class="add" v-if="!readonly"><i class="fas fa-plus"></i></MkButton>
<MkButton @click="addVariable()" class="add" v-if="!readonly"><i class="fas fa-plus"></i></MkButton>
</div>
</div>
</div>
<div v-else-if="tab === 'script'">
<div>
<MkTextarea class="_code" v-model="script"/>
<div v-else-if="tab === 'script'">
<div>
<MkTextarea class="_code" v-model="script"/>
</div>
</div>
</div>
</div>
@ -128,6 +131,21 @@ export default defineComponent({
data() {
return {
[symbols.PAGE_INFO]: computed(() => {
let title = this.$ts._pages.newPage;
if (this.initPageId) {
title = this.$ts._pages.editPage;
}
else if (this.initPageName && this.initUser) {
title = this.$ts._pages.readPage;
}
return {
title: title,
icon: 'fas fa-pencil-alt',
bg: 'var(--bg)',
};
}),
tab: 'settings',
header: computed(() => {
let title = this.$ts._pages.newPage;
if (this.initPageId) {
title = this.$ts._pages.editPage;
@ -162,7 +180,6 @@ export default defineComponent({
}]
};
}),
tab: 'settings',
author: this.$i,
readonly: false,
page: null,
@ -474,6 +491,14 @@ export default defineComponent({
</script>
<style lang="scss" scoped>
.jqqmcavi {
> .button {
& + .button {
margin-left: 8px;
}
}
}
.gwbmwxkm {
position: relative;
@ -541,11 +566,7 @@ export default defineComponent({
}
.qmuvgica {
padding: 32px;
@media (max-width: 500px) {
padding: 16px;
}
padding: 16px;
> .variables {
margin-bottom: 16px;

2
src/client/pages/settings/import-export.vue
View File

@ -1,5 +1,5 @@
<template>
<div>
<div style="margin: 16px;">
<FormSection>
<template #label>{{ $ts._exportOrImport.allNotes }}</template>
<MkButton :class="$style.button" inline @click="doExport('notes')"><i class="fas fa-download"></i> {{ $ts.export }}</MkButton>

105
src/client/pages/settings/index.link.vue
View File

@ -1,105 +0,0 @@
<template>
<div class="qmfkfnzj">
<a v-if="external" class="main _button" :href="to" target="_blank">
<span class="icon"><slot name="icon"></slot></span>
<span class="text"><slot></slot></span>
</a>
<MkA v-else-if="to" class="main _button" :class="{ active }" :to="to" :behavior="behavior">
<span class="icon"><slot name="icon"></slot></span>
<span class="text"><slot></slot></span>
</MkA>
<button v-else class="main _button button" :class="{ danger }">
<span class="icon"><slot name="icon"></slot></span>
<span class="text"><slot></slot></span>
</button>
</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
export default defineComponent({
props: {
to: {
type: String,
required: false
},
active: {
type: Boolean,
required: false
},
danger: {
type: Boolean,
required: false
},
external: {
type: Boolean,
required: false
},
behavior: {
type: String,
required: false,
},
},
});
</script>
<style lang="scss" scoped>
.qmfkfnzj {
> .main {
display: flex;
align-items: center;
width: 100%;
box-sizing: border-box;
padding: 10px 16px 10px 14px;
border-radius: 999px;
font-size: 0.9em;
&:hover {
text-decoration: none;
background: var(--panelHighlight);
}
&.active {
color: var(--accent);
background: var(--accentedBg);
}
&.danger {
color: var(--error);
}
> .icon {
width: 32px;
margin-right: 2px;
flex-shrink: 0;
text-align: center;
opacity: 0.8;
&:empty {
display: none;
& + .text {
padding-left: 4px;
}
}
}
> .text {
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
padding-right: 12px;
}
> .right {
margin-left: auto;
opacity: 0.7;
> .text:not(:empty) {
margin-right: 0.75em;
}
}
}
}
</style>

179
src/client/pages/settings/index.vue
View File

@ -1,42 +1,9 @@
<template>
<div class="vvcocwet" :class="{ wide: !narrow }" ref="el">
<div class="nav" v-if="!narrow || page == null">
<div class="group accounts">
<MkAvatar :user="$i" class="avatar"/>
<XLink :active="page === 'accounts'" replace to="/settings/accounts"><template #icon><i class="fas fa-users"></i></template>{{ $ts.accounts }}</XLink>
</div>
<div class="title">{{ $ts.settings }}</div>
<MkInfo v-if="emailNotConfigured" warn class="info">{{ $ts.emailNotConfiguredWarning }} <MkA to="/settings/email" class="_link">{{ $ts.configure }}</MkA></MkInfo>
<div class="group">
<div class="label">{{ $ts.basicSettings }}</div>
<XLink :active="page === 'profile'" replace to="/settings/profile"><template #icon><i class="fas fa-user"></i></template>{{ $ts.profile }}</XLink>
<XLink :active="page === 'privacy'" replace to="/settings/privacy"><template #icon><i class="fas fa-lock-open"></i></template>{{ $ts.privacy }}</XLink>
<XLink :active="page === 'reaction'" replace to="/settings/reaction"><template #icon><i class="fas fa-laugh"></i></template>{{ $ts.reaction }}</XLink>
<XLink :active="page === 'drive'" replace to="/settings/drive"><template #icon><i class="fas fa-cloud"></i></template>{{ $ts.drive }}</XLink>
<XLink :active="page === 'notifications'" replace to="/settings/notifications"><template #icon><i class="fas fa-bell"></i></template>{{ $ts.notifications }}</XLink>
<XLink :active="page === 'email'" replace to="/settings/email"><template #icon><i class="fas fa-envelope"></i></template>{{ $ts.email }}</XLink>
<XLink :active="page === 'integration'" replace to="/settings/integration"><template #icon><i class="fas fa-share-alt"></i></template>{{ $ts.integration }}</XLink>
<XLink :active="page === 'security'" replace to="/settings/security"><template #icon><i class="fas fa-lock"></i></template>{{ $ts.security }}</XLink>
</div>
<div class="group">
<div class="label">{{ $ts.clientSettings }}</div>
<XLink :active="page === 'general'" replace to="/settings/general"><template #icon><i class="fas fa-cogs"></i></template>{{ $ts.general }}</XLink>
<XLink :active="page === 'theme'" replace to="/settings/theme"><template #icon><i class="fas fa-palette"></i></template>{{ $ts.theme }}</XLink>
<XLink :active="page === 'menu'" replace to="/settings/menu"><template #icon><i class="fas fa-list-ul"></i></template>{{ $ts.menu }}</XLink>
<XLink :active="page === 'sounds'" replace to="/settings/sounds"><template #icon><i class="fas fa-music"></i></template>{{ $ts.sounds }}</XLink>
<XLink :active="page === 'plugin'" replace to="/settings/plugin"><template #icon><i class="fas fa-plug"></i></template>{{ $ts.plugins }}</XLink>
</div>
<div class="group">
<div class="label">{{ $ts.otherSettings }}</div>
<XLink :active="page === 'import-export'" replace to="/settings/import-export"><template #icon><i class="fas fa-boxes"></i></template>{{ $ts.importAndExport }}</XLink>
<XLink :active="page === 'mute-block'" replace to="/settings/mute-block"><template #icon><i class="fas fa-ban"></i></template>{{ $ts.muteAndBlock }}</XLink>
<XLink :active="page === 'word-mute'" replace to="/settings/word-mute"><template #icon><i class="fas fa-comment-slash"></i></template>{{ $ts.wordMute }}</XLink>
<XLink :active="page === 'api'" replace to="/settings/api"><template #icon><i class="fas fa-key"></i></template>API</XLink>
<XLink :active="page === 'other'" replace to="/settings/other"><template #icon><i class="fas fa-ellipsis-h"></i></template>{{ $ts.other }}</XLink>
</div>
<div class="group">
<XLink @click="clear"><template #icon><i class="fas fa-trash"></i></template>{{ $ts.clearCache }}</XLink>
<XLink @click="logout" danger><template #icon><i class="fas fa-sign-in-alt fa-flip-horizontal"></i></template>{{ $ts.logout }}</XLink>
</div>
<MkSuperMenu :def="menuDef" :grid="page == null"></MkSuperMenu>
</div>
<div class="main">
<component :is="component" :key="page" v-bind="pageProps"/>
@ -47,8 +14,8 @@
<script lang="ts">
import { computed, defineAsyncComponent, defineComponent, nextTick, onMounted, reactive, ref, watch } from 'vue';
import { i18n } from '@client/i18n';
import XLink from './index.link.vue';
import MkInfo from '@client/components/ui/info.vue';
import MkSuperMenu from '@client/components/ui/super-menu.vue';
import { scroll } from '@client/scripts/scroll';
import { signout } from '@client/account';
import { unisonReload } from '@client/scripts/unison-reload';
@ -58,8 +25,8 @@ import { $i } from '@client/account';
export default defineComponent({
components: {
XLink,
MkInfo,
MkSuperMenu,
},
props: {
@ -80,6 +47,125 @@ export default defineComponent({
const narrow = ref(false);
const view = ref(null);
const el = ref(null);
const menuDef = computed(() => [{
title: i18n.locale.basicSettings,
items: [{
icon: 'fas fa-user',
text: i18n.locale.profile,
to: '/settings/profile',
active: page.value === 'profile',
}, {
icon: 'fas fa-lock-open',
text: i18n.locale.privacy,
to: '/settings/privacy',
active: page.value === 'privacy',
}, {
icon: 'fas fa-laugh',
text: i18n.locale.reaction,
to: '/settings/reaction',
active: page.value === 'reaction',
}, {
icon: 'fas fa-cloud',
text: i18n.locale.drive,
to: '/settings/drive',
active: page.value === 'drive',
}, {
icon: 'fas fa-bell',
text: i18n.locale.notifications,
to: '/settings/notifications',
active: page.value === 'notifications',
}, {
icon: 'fas fa-envelope',
text: i18n.locale.email,
to: '/settings/email',
active: page.value === 'email',
}, {
icon: 'fas fa-share-alt',
text: i18n.locale.integration,
to: '/settings/integration',
active: page.value === 'integration',
}, {
icon: 'fas fa-lock',
text: i18n.locale.security,
to: '/settings/security',
active: page.value === 'security',
}],
}, {
title: i18n.locale.clientSettings,
items: [{
icon: 'fas fa-cogs',
text: i18n.locale.general,
to: '/settings/general',
active: page.value === 'general',
}, {
icon: 'fas fa-palette',
text: i18n.locale.theme,
to: '/settings/theme',
active: page.value === 'theme',
}, {
icon: 'fas fa-list-ul',
text: i18n.locale.menu,
to: '/settings/menu',
active: page.value === 'menu',
}, {
icon: 'fas fa-music',
text: i18n.locale.sounds,
to: '/settings/sounds',
active: page.value === 'sounds',
}, {
icon: 'fas fa-plug',
text: i18n.locale.plugins,
to: '/settings/plugin',
active: page.value === 'plugin',
}],
}, {
title: i18n.locale.otherSettings,
items: [{
icon: 'fas fa-boxes',
text: i18n.locale.importAndExport,
to: '/settings/import-export',
active: page.value === 'import-export',
}, {
icon: 'fas fa-ban',
text: i18n.locale.muteAndBlock,
to: '/settings/mute-block',
active: page.value === 'mute-block',
}, {
icon: 'fas fa-comment-slash',
text: i18n.locale.wordMute,
to: '/settings/word-mute',
active: page.value === 'word-mute',
}, {
icon: 'fas fa-key',
text: 'API',
to: '/settings/api',
active: page.value === 'api',
}, {
icon: 'fas fa-ellipsis-h',
text: i18n.locale.other,
to: '/settings/other',
active: page.value === 'other',
}],
}, {
items: [{
type: 'button',
icon: 'fas fa-trash',
text: i18n.locale.clearCache,
action: () => {
localStorage.removeItem('locale');
localStorage.removeItem('theme');
unisonReload();
},
}, {
type: 'button',
icon: 'fas fa-sign-in-alt fa-flip-horizontal',
text: i18n.locale.logout,
action: () => {
signout();
},
danger: true,
},],
}]);
const pageProps = ref({});
const component = computed(() => {
@ -170,20 +256,13 @@ export default defineComponent({
return {
[symbols.PAGE_INFO]: INFO,
page,
menuDef,
narrow,
view,
el,
pageProps,
component,
emailNotConfigured,
logout: () => {
signout();
},
clear: () => {
localStorage.removeItem('locale');
localStorage.removeItem('theme');
unisonReload();
},
};
},
});
@ -192,16 +271,6 @@ export default defineComponent({
<style lang="scss" scoped>
.vvcocwet {
> .nav {
> .group {
padding: 16px;
> .label {
font-size: 0.9em;
opacity: 0.7;
margin: 0 0 8px 12px;
}
}
> .info {
margin: 0 16px;
}

2
src/client/pages/welcome.entrance.a.vue
View File

@ -27,7 +27,7 @@
<div class="desc" v-html="meta.description || $ts.headlineMisskey"></div>
</div>
<div class="action">
<MkButton @click="signup()" inline primary data-cy-signup>{{ $ts.signup }}</MkButton>
<MkButton @click="signup()" inline primary data-cy-signup style="margin-right: 12px;">{{ $ts.signup }}</MkButton>
<MkButton @click="signin()" inline data-cy-signin>{{ $ts.login }}</MkButton>
</div>
<div class="status" v-if="onlineUsersCount && stats">

4
src/client/scripts/theme.ts
View File

@ -1,3 +1,4 @@
import { globalEvents } from '@client/events';
import * as tinycolor from 'tinycolor2';
export type Theme = {
@ -62,6 +63,9 @@ export function applyTheme(theme: Theme, persist = true) {
if (persist) {
localStorage.setItem('theme', JSON.stringify(props));
}
// 色計算など再度行えるようにクライアント全体に通知
globalEvents.emit('themeChanged');
}
function compile(theme: Theme): Record<string, string> {

68
src/client/ui/_common_/sidebar.vue
View File

@ -50,7 +50,7 @@ import { host } from '@client/config';
import { search } from '@client/scripts/search';
import * as os from '@client/os';
import { menuDef } from '@client/menu';
import { getAccounts, addAccount, login } from '@client/account';
import { openAccountMenu } from '@client/account';
export default defineComponent({
props: {
@ -134,76 +134,12 @@ export default defineComponent({
search();
},
async openAccountMenu(ev) {
const storedAccounts = await getAccounts().then(accounts => accounts.filter(x => x.id !== this.$i.id));
const accountsPromise = os.api('users/show', { userIds: storedAccounts.map(x => x.id) });
const accountItemPromises = storedAccounts.map(a => new Promise(res => {
accountsPromise.then(accounts => {
const account = accounts.find(x => x.id === a.id);
if (account == null) return res(null);
res({
type: 'user',
user: account,
action: () => { this.switchAccount(account); }
});
});
}));
os.popupMenu([...[{
type: 'link',
text: this.$ts.profile,
to: `/@${ this.$i.username }`,
avatar: this.$i,
}, null, ...accountItemPromises, {
icon: 'fas fa-plus',
text: this.$ts.addAccount,
action: () => {
os.popupMenu([{
text: this.$ts.existingAccount,
action: () => { this.addAccount(); },
}, {
text: this.$ts.createAccount,
action: () => { this.createAccount(); },
}], ev.currentTarget || ev.target);
},
}]], ev.currentTarget || ev.target, {
align: 'left'
});
},
more(ev) {
os.popup(import('@client/components/launch-pad.vue'), {}, {
}, 'closed');
},
addAccount() {
os.popup(import('@client/components/signin-dialog.vue'), {}, {
done: async res => {
await addAccount(res.id, res.i);
os.success();
},
}, 'closed');
},
createAccount() {
os.popup(import('@client/components/signup-dialog.vue'), {}, {
done: async res => {
await addAccount(res.id, res.i);
this.switchAccountWithToken(res.i);
},
}, 'closed');
},
async switchAccount(account: any) {
const storedAccounts = await getAccounts();
const token = storedAccounts.find(x => x.id === account.id).token;
this.switchAccountWithToken(token);
},
switchAccountWithToken(token: string) {
login(token);
},
openAccountMenu,
}
});
</script>

3
src/client/ui/chat/index.vue
View File

@ -109,6 +109,7 @@ import { search } from '@client/scripts/search';
import copyToClipboard from '@client/scripts/copy-to-clipboard';
import { store } from './store';
import * as symbols from '@client/symbols';
import { openAccountMenu } from '@client/account';
export default defineComponent({
components: {
@ -253,6 +254,8 @@ export default defineComponent({
}
}], e);
},
openAccountMenu,
}
});
</script>

68
src/client/ui/default.header.vue
View File

@ -44,7 +44,7 @@ import { host } from '@client/config';
import { search } from '@client/scripts/search';
import * as os from '@client/os';
import { menuDef } from '@client/menu';
import { getAccounts, addAccount, login } from '@client/account';
import { openAccountMenu } from '@client/account';
import MkButton from '@client/components/ui/button.vue';
export default defineComponent({
@ -100,76 +100,12 @@ export default defineComponent({
search();
},
async openAccountMenu(ev) {
const storedAccounts = await getAccounts().then(accounts => accounts.filter(x => x.id !== this.$i.id));
const accountsPromise = os.api('users/show', { userIds: storedAccounts.map(x => x.id) });
const accountItemPromises = storedAccounts.map(a => new Promise(res => {
accountsPromise.then(accounts => {
const account = accounts.find(x => x.id === a.id);
if (account == null) return res(null);
res({
type: 'user',
user: account,
action: () => { this.switchAccount(account); }
});
});
}));
os.popupMenu([...[{
type: 'link',
text: this.$ts.profile,
to: `/@${ this.$i.username }`,
avatar: this.$i,
}, null, ...accountItemPromises, {
icon: 'fas fa-plus',
text: this.$ts.addAccount,
action: () => {
os.popupMenu([{
text: this.$ts.existingAccount,
action: () => { this.addAccount(); },
}, {
text: this.$ts.createAccount,
action: () => { this.createAccount(); },
}], ev.currentTarget || ev.target);
},
}]], ev.currentTarget || ev.target, {
align: 'left'
});
},
more(ev) {
os.popup(import('@client/components/launch-pad.vue'), {}, {
}, 'closed');
},
addAccount() {
os.popup(import('@client/components/signin-dialog.vue'), {}, {
done: res => {
addAccount(res.id, res.i);
os.success();
},
}, 'closed');
},
createAccount() {
os.popup(import('@client/components/signup-dialog.vue'), {}, {
done: res => {
addAccount(res.id, res.i);
this.switchAccountWithToken(res.i);
},
}, 'closed');
},
async switchAccount(account: any) {
const storedAccounts = await getAccounts();
const token = storedAccounts.find(x => x.id === account.id).token;
this.switchAccountWithToken(token);
},
switchAccountWithToken(token: string) {
login(token);
},
openAccountMenu,
}
});
</script>

68
src/client/ui/default.sidebar.vue
View File

@ -46,7 +46,7 @@ import { host } from '@client/config';
import { search } from '@client/scripts/search';
import * as os from '@client/os';
import { menuDef } from '@client/menu';
import { getAccounts, addAccount, login } from '@client/account';
import { openAccountMenu } from '@client/account';
import MkButton from '@client/components/ui/button.vue';
import { StickySidebar } from '@client/scripts/sticky-sidebar';
import MisskeyLogo from '@/../assets/client/misskey.svg';
@ -120,76 +120,12 @@ export default defineComponent({
search();
},
async openAccountMenu(ev) {
const storedAccounts = await getAccounts().then(accounts => accounts.filter(x => x.id !== this.$i.id));
const accountsPromise = os.api('users/show', { userIds: storedAccounts.map(x => x.id) });
const accountItemPromises = storedAccounts.map(a => new Promise(res => {
accountsPromise.then(accounts => {
const account = accounts.find(x => x.id === a.id);
if (account == null) return res(null);
res({
type: 'user',
user: account,
action: () => { this.switchAccount(account); }
});
});
}));
os.popupMenu([...[{
type: 'link',
text: this.$ts.profile,
to: `/@${ this.$i.username }`,
avatar: this.$i,
}, null, ...accountItemPromises, {
icon: 'fas fa-plus',
text: this.$ts.addAccount,
action: () => {
os.popupMenu([{
text: this.$ts.existingAccount,
action: () => { this.addAccount(); },
}, {
text: this.$ts.createAccount,
action: () => { this.createAccount(); },
}], ev.currentTarget || ev.target);
},
}]], ev.currentTarget || ev.target, {
align: 'left'
});
},
more(ev) {
os.popup(import('@client/components/launch-pad.vue'), {}, {
}, 'closed');
},
addAccount() {
os.popup(import('@client/components/signin-dialog.vue'), {}, {
done: res => {
addAccount(res.id, res.i);
os.success();
},
}, 'closed');
},
createAccount() {
os.popup(import('@client/components/signup-dialog.vue'), {}, {
done: res => {
addAccount(res.id, res.i);
this.switchAccountWithToken(res.i);
},
}, 'closed');
},
async switchAccount(account: any) {
const storedAccounts = await getAccounts();
const token = storedAccounts.find(x => x.id === account.id).token;
this.switchAccountWithToken(token);
},
switchAccountWithToken(token: string) {
login(token);
},
openAccountMenu,
}
});
</script>