Mizah/mizzkey
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge branch 'develop' into sw-notification-action

Browse source
This commit is contained in:
tamaina 2021-08-07 19:36:24 +09:00
commit 10e04a4bbe
158 changed files with 3618 additions and 2361 deletions
Download patch file Download diff file Expand all files Collapse all files

26
src/client/pages/_error_.vue
View file

@ -1,11 +1,11 @@
<template>
<transition :name="$store.state.animation ? 'zoom' : ''" appear>
<div class="_section">
<div class="mjndxjch _content">
<img src="https://xn--931a.moe/assets/error.jpg" class="_ghost"/>
<p><i class="fas fa-exclamation-triangle"></i> {{ $ts.pageLoadError }}</p>
<p>{{ $ts.pageLoadErrorDescription }}</p>
</div>
<div class="mjndxjch">
<img src="https://xn--931a.moe/assets/error.jpg" class="_ghost"/>
<p><b><i class="fas fa-exclamation-triangle"></i> {{ $ts.pageLoadError }}</b></p>
<p>{{ $ts.pageLoadErrorDescription }}</p>
<p><MkA to="/docs/general/troubleshooting" class="_link">{{ $ts.troubleshooting }}</MkA></p>
<p v-if="error" class="error">ERROR: {{ error }}</p>
</div>
</transition>
</template>
@ -19,6 +19,11 @@ export default defineComponent({
components: {
MkButton,
},
props: {
error: {
required: false,
}
},
data() {
return {
[symbols.PAGE_INFO]: {
@ -32,10 +37,11 @@ export default defineComponent({
<style lang="scss" scoped>
.mjndxjch {
padding: 32px;
text-align: center;
> p {
margin: 0 0 8px 0;
margin: 0 0 12px 0;
}
> .button {
@ -45,8 +51,12 @@ export default defineComponent({
> img {
vertical-align: bottom;
height: 128px;
margin-bottom: 16px;
margin-bottom: 24px;
border-radius: 16px;
}
> .error {
opacity: 0.7;
}
}
</style>

14
src/client/pages/api-console.vue
View file

@ -1,13 +1,13 @@
<template>
<div class="_root">
<div class="_block" style="padding: 24px;">
<MkInput v-model:value="endpoint" :datalist="endpoints" @update:value="onEndpointChange()">
<span>Endpoint</span>
<MkInput v-model="endpoint" :datalist="endpoints" @update:modelValue="onEndpointChange()">
<template #label>Endpoint</template>
</MkInput>
<MkTextarea v-model:value="body" code>
<span>Params (JSON or JSON5)</span>
<MkTextarea v-model="body" code>
<template #label>Params (JSON or JSON5)</template>
</MkTextarea>
<MkSwitch v-model:value="withCredential">
<MkSwitch v-model="withCredential">
With credential
</MkSwitch>
<MkButton primary full @click="send" :disabled="sending">
@ -16,8 +16,8 @@
</MkButton>
</div>
<div v-if="res" class="_block" style="padding: 24px;">
<MkTextarea v-model:value="res" code readonly tall>
<span>Response</span>
<MkTextarea v-model="res" code readonly tall>
<template #label>Response</template>
</MkTextarea>
</div>
</div>

8
src/client/pages/channel-editor.vue
View file

@ -2,9 +2,13 @@
<div>
<div class="_section">
<div class="_content">
<MkInput v-model:value="name">{{ $ts.name }}</MkInput>
<MkInput v-model="name">
<template #label>{{ $ts.name }}</template>
</MkInput>
<MkTextarea v-model:value="description">{{ $ts.description }}</MkTextarea>
<MkTextarea v-model="description">
<template #label>{{ $ts.description }}</template>
</MkTextarea>
<div class="banner">
<MkButton v-if="bannerId == null" @click="setBannerImage"><i class="fas fa-plus"></i> {{ $ts._channel.setBanner }}</MkButton>

202
src/client/pages/doc.vue
View file

@ -1,9 +1,11 @@
<template>
<div class="qyqbqfal" v-size="{ max: [500] }">
<div class="title">{{ title }}</div>
<div class="body" v-html="body"></div>
<div class="footer">
<MkLink :url="`https://github.com/misskey-dev/misskey/blob/master/src/docs/${lang}/${doc}.md`" class="at">{{ $ts.docSource }}</MkLink>
<div class="main">
<div class="title">{{ title }}</div>
<div class="body" v-html="body"></div>
<div class="footer">
<MkLink :url="`https://github.com/misskey-dev/misskey/blob/master/src/docs/${lang}/${doc}.md`" class="at">{{ $ts.docSource }}</MkLink>
</div>
</div>
</div>
</template>
@ -62,6 +64,10 @@ export default defineComponent({
fetchDoc() {
fetch(`${url}/doc-assets/${lang}/${this.doc}.md`).then(res => res.text()).then(md => {
this.parse(md);
}).catch(() => {
fetch(`${url}/doc-assets/ja-JP/${this.doc}.md`).then(res => res.text()).then(md => {
this.parse(md);
});
});
},
@ -105,103 +111,129 @@ export default defineComponent({
<style lang="scss" scoped>
.qyqbqfal {
padding: 32px;
max-width: 800px;
margin: 0 auto;
background: var(--panel);
line-height: 1.5;
&.max-width_500px {
padding: 16px;
}
> .title {
font-size: 1.5em;
font-weight: bold;
padding: 0 0 0.75em 0;
margin: 0 0 1em 0;
border-bottom: solid 2px var(--divider);
}
> .main {
max-width: 800px;
margin: 0 auto;
> .body {
> *:first-child {
margin-top: 0;
> .title {
font-size: 1.5em;
font-weight: bold;
padding: 0 0 0.75em 0;
margin: 0 0 1em 0;
border-bottom: solid 2px var(--divider);
}
> *:last-child {
margin-bottom: 0;
}
> .body {
> *:first-child {
margin-top: 0;
}
::v-deep(a) {
color: var(--link);
}
> *:last-child {
margin-bottom: 0;
}
::v-deep(blockquote) {
display: block;
margin: 8px;
padding: 6px 0 6px 12px;
color: var(--fg);
border-left: solid 3px var(--fg);
opacity: 0.7;
::v-deep(a) {
color: var(--link);
}
p {
margin: 0;
::v-deep(blockquote) {
display: block;
margin: 8px;
padding: 6px 0 6px 12px;
color: var(--fg);
border-left: solid 3px var(--fg);
opacity: 0.7;
p {
margin: 0;
}
}
::v-deep(h2) {
font-size: 1.25em;
padding: 0 0 0.5em 0;
margin: 1.5em 0 1em 0;
border-bottom: solid 0.5px var(--divider);
}
::v-deep(h3) {
margin: 1.25em 0 0.5em 0;
}
::v-deep(table) {
width: 100%;
max-width: 100%;
overflow: auto;
}
::v-deep(kbd.group) {
display: inline-block;
padding: 2px;
border: 1px solid var(--divider);
border-radius: 4px;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
}
::v-deep(kbd.key) {
display: inline-block;
padding: 6px 8px;
border: solid 0.5px var(--divider);
border-radius: 4px;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
}
::v-deep(code) {
display: inline-block;
font-family: Fira code, Fira Mono, Consolas, Menlo, Courier, monospace;
tab-size: 2;
background: #272822;
color: #f8f8f2;
border-radius: 6px;
padding: 4px 6px;
}
::v-deep(pre) {
background: #272822;
color: #f8f8f2;
border-radius: 6px;
padding: 12px 16px;
> code {
padding: 0;
}
}
::v-deep(.info) {
font-size: 90%;
background: var(--infoBg);
color: var(--infoFg);
padding: 1em;
margin: 0.75em 0;
border-radius: 6px;
}
::v-deep(.warn) {
font-size: 90%;
background: var(--infoWarnBg);
color: var(--infoWarnFg);
padding: 1em;
margin: 0.75em 0;
border-radius: 6px;
}
}
::v-deep(h2) {
font-size: 1.25em;
padding: 0 0 0.5em 0;
margin: 1.5em 0 1em 0;
border-bottom: solid 0.5px var(--divider);
> .footer {
padding: 1.5em 0 0 0;
margin: 1.5em 0 0 0;
border-top: solid 2px var(--divider);
}
::v-deep(table) {
width: 100%;
max-width: 100%;
overflow: auto;
}
::v-deep(kbd.group) {
display: inline-block;
padding: 2px;
border: 1px solid var(--divider);
border-radius: 4px;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
}
::v-deep(kbd.key) {
display: inline-block;
padding: 6px 8px;
border: solid 0.5px var(--divider);
border-radius: 4px;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
}
::v-deep(code) {
display: inline-block;
font-family: Fira code, Fira Mono, Consolas, Menlo, Courier, monospace;
tab-size: 2;
background: #272822;
color: #f8f8f2;
border-radius: 6px;
padding: 4px 6px;
}
::v-deep(pre) {
background: #272822;
color: #f8f8f2;
border-radius: 6px;
padding: 12px 16px;
> code {
padding: 0;
}
}
}
> .footer {
padding: 1.5em 0 0 0;
margin: 1.5em 0 0 0;
border-top: solid 2px var(--divider);
}
}
</style>

27
src/client/pages/docs.vue
View file

@ -1,7 +1,9 @@
<template>
<div class="vtaihdtm">
<div class="search">
<MkInput v-model:value="query" :debounce="true" type="search"><template #icon><i class="fas fa-search"></i></template><span>{{ $ts.search }}</span></MkInput>
<MkInput v-model="query" :debounce="true" type="search" class="_inputNoTopMargin _inputNoBottomMargin" :placeholder="$ts.search">
<template #prefix><i class="fas fa-search"></i></template>
</MkInput>
</div>
<MkFolder>
<template #header>{{ $ts._docs.generalTopics }}</template>
@ -33,6 +35,16 @@
</MkA>
</div>
</MkFolder>
<MkFolder>
<template #header>{{ $ts._docs.admin }}</template>
<div class="docs">
<MkA v-for="doc in docs.filter(doc => doc.path.startsWith('admin/'))" :key="doc.path" :to="`/docs/${doc.path}`" class="doc">
<div class="title">{{ doc.title }}</div>
<div class="summary">{{ doc.summary }}</div>
<div class="read">{{ $ts._docs.continueReading }}</div>
</MkA>
</div>
</MkFolder>
</div>
</template>
@ -69,8 +81,13 @@ export default defineComponent({
},
created() {
fetch(`${url}/docs.json?lang=${lang}`).then(res => res.json()).then(docs => {
this.docs = docs;
fetch(`${url}/docs.json?lang=ja-JP`).then(res => res.json()).then(jaDocs => {
fetch(`${url}/docs.json?lang=${lang}`).then(res => res.json()).then(docs => {
this.docs = jaDocs.map(doc => {
const exist = docs.find(d => d.path === doc.path);
return exist || doc;
});
});
});
},
});
@ -81,14 +98,14 @@ export default defineComponent({
background: var(--panel);
> .search {
padding: 8px;
padding: 16px;
}
.docs {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
grid-gap: 12px;
margin: var(--margin);
margin: 0 16px 16px 16px;
> .doc {
display: inline-block;

151
src/client/pages/emojis.vue Normal file
View file

@ -0,0 +1,151 @@
<template>
<div class="driuhtrh">
<div class="query">
<MkInput v-model="q" class="_inputNoTopMargin _inputNoBottomMargin" :placeholder="$ts.search">
<template #prefix><i class="fas fa-search"></i></template>
</MkInput>
</div>
<div class="emojis">
<MkFolder v-if="searchEmojis">
<template #header>{{ $ts.searchResult }}</template>
<div class="zuvgdzyt">
<button v-for="emoji in searchEmojis" :key="emoji.name" class="emoji _button" @click="menu(emoji, $event)">
<img :src="emoji.url" class="img" :alt="emoji.name"/>
<div class="body">
<div class="name _monospace">{{ emoji.name }}</div>
<div class="info">{{ emoji.aliases.join(' ') }}</div>
</div>
</button>
</div>
</MkFolder>
<MkFolder v-for="category in customEmojiCategories" :key="category">
<template #header>{{ category || $ts.other }}</template>
<div class="zuvgdzyt">
<button v-for="emoji in customEmojis.filter(e => e.category === category)" :key="emoji.name" class="emoji _button" @click="menu(emoji, $event)">
<img :src="emoji.url" class="img" :alt="emoji.name"/>
<div class="body">
<div class="name _monospace">{{ emoji.name }}</div>
<div class="info">{{ emoji.aliases.join(' ') }}</div>
</div>
</button>
</div>
</MkFolder>
</div>
</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import MkButton from '@client/components/ui/button.vue';
import MkInput from '@client/components/ui/input.vue';
import MkSelect from '@client/components/ui/select.vue';
import MkFolder from '@client/components/ui/folder.vue';
import * as os from '@client/os';
import * as symbols from '@client/symbols';
import { emojiCategories } from '@client/instance';
import copyToClipboard from '@client/scripts/copy-to-clipboard';
export default defineComponent({
components: {
MkButton,
MkInput,
MkSelect,
MkFolder,
},
data() {
return {
[symbols.PAGE_INFO]: {
title: this.$ts.customEmojis,
icon: 'fas fa-laugh'
},
q: '',
customEmojiCategories: emojiCategories,
customEmojis: this.$instance.emojis,
searchEmojis: null,
}
},
watch: {
q() {
if (this.q === '' || this.q == null) {
this.searchEmojis = null;
return;
}
this.searchEmojis = this.customEmojis.filter(e => e.name.includes(this.q) || e.aliases.includes(this.q));
}
},
methods: {
menu(emoji, ev) {
os.modalMenu([{
type: 'label',
text: ':' + emoji.name + ':',
}, {
text: this.$ts.copy,
icon: 'fas fa-copy',
action: () => {
copyToClipboard(`:${emoji.name}:`);
os.success();
}
}], ev.currentTarget || ev.target);
}
}
});
</script>
<style lang="scss" scoped>
.driuhtrh {
> .query {
background: var(--bg);
padding: 16px;
}
> .emojis {
.zuvgdzyt {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
grid-gap: 12px;
margin: 0 var(--margin) var(--margin) var(--margin);
> .emoji {
display: flex;
align-items: center;
padding: 12px;
text-align: left;
border: solid 1px var(--divider);
border-radius: 8px;
&:hover {
border-color: var(--accent);
}
> .img {
width: 42px;
height: 42px;
}
> .body {
padding: 0 0 0 8px;
white-space: nowrap;
overflow: hidden;
> .name {
text-overflow: ellipsis;
overflow: hidden;
}
> .info {
opacity: 0.5;
font-size: 0.9em;
text-overflow: ellipsis;
overflow: hidden;
}
}
}
}
}
}
</style>

5
src/client/pages/explore.vue
View file

@ -2,7 +2,10 @@
<div class="lznhrdub _root">
<div>
<div class="_isolated">
<MkInput v-model:value="query" :debounce="true" type="search"><template #icon><i class="fas fa-search"></i></template><span>{{ $ts.searchUser }}</span></MkInput>
<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"/>

197
src/client/pages/instance/federation.vue → src/client/pages/federation.vue
View file

@ -1,9 +1,12 @@
<template>
<div class="enuoauvw">
<div class="taeiyria">
<div class="query">
<MkInput v-model:value="host" :debounce="true"><span>{{ $ts.host }}</span></MkInput>
<div class="inputs" style="display: flex;">
<MkSelect v-model:value="state" style="margin: 0; flex: 1;">
<MkInput v-model="host" :debounce="true" class="_inputNoTopMargin">
<template #prefix><i class="fas fa-search"></i></template>
<template #label>{{ $ts.host }}</template>
</MkInput>
<div class="_inputSplit _inputNoBottomMargin">
<MkSelect v-model="state">
<template #label>{{ $ts.state }}</template>
<option value="all">{{ $ts.all }}</option>
<option value="federating">{{ $ts.federating }}</option>
@ -13,7 +16,7 @@
<option value="blocked">{{ $ts.blocked }}</option>
<option value="notResponding">{{ $ts.notResponding }}</option>
</MkSelect>
<MkSelect v-model:value="sort" style="margin: 0; flex: 1;">
<MkSelect v-model="sort">
<template #label>{{ $ts.sort }}</template>
<option value="+pubSub">{{ $ts.pubSub }} ({{ $ts.descendingOrder }})</option>
<option value="-pubSub">{{ $ts.pubSub }} ({{ $ts.ascendingOrder }})</option>
@ -38,16 +41,53 @@
</div>
<MkPagination :pagination="pagination" #default="{items}" ref="instances" :key="host + state">
<div class="ppgwaixt _block" v-for="instance in items" :key="instance.id" @click="info(instance)">
<div class="host"><i class="fas fa-circle indicator" :class="getStatus(instance)"></i><b>{{ instance.host }}</b></div>
<div class="status">
<span class="sub" v-if="instance.followersCount > 0"><i class="fas fa-caret-down icon"></i>Sub</span>
<span class="sub" v-else><i class="fas fa-caret-down icon"></i>-</span>
<span class="pub" v-if="instance.followingCount > 0"><i class="fas fa-caret-up icon"></i>Pub</span>
<span class="pub" v-else><i class="fas fa-caret-up icon"></i>-</span>
<span class="lastCommunicatedAt"><i class="fas fa-exchange-alt icon"></i><MkTime :time="instance.lastCommunicatedAt"/></span>
<span class="latestStatus"><i class="fas fa-traffic-light icon"></i>{{ instance.latestStatus || '-' }}</span>
</div>
<div class="dqokceoi">
<MkA class="instance" v-for="instance in items" :key="instance.id" :to="`/instance-info/${instance.host}`">
<div class="host"><img :src="instance.faviconUrl">{{ instance.host }}</div>
<div class="table">
<div class="cell">
<div class="key">{{ $ts.registeredAt }}</div>
<div class="value"><MkTime :time="instance.caughtAt"/></div>
</div>
<div class="cell">
<div class="key">{{ $ts.software }}</div>
<div class="value">{{ instance.softwareName || `(${$ts.unknown})` }}</div>
</div>
<div class="cell">
<div class="key">{{ $ts.version }}</div>
<div class="value">{{ instance.softwareVersion || `(${$ts.unknown})` }}</div>
</div>
<div class="cell">
<div class="key">{{ $ts.users }}</div>
<div class="value">{{ instance.usersCount }}</div>
</div>
<div class="cell">
<div class="key">{{ $ts.notes }}</div>
<div class="value">{{ instance.notesCount }}</div>
</div>
<div class="cell">
<div class="key">{{ $ts.sent }}</div>
<div class="value"><MkTime v-if="instance.latestRequestSentAt" :time="instance.latestRequestSentAt"/><span v-else>N/A</span></div>
</div>
<div class="cell">
<div class="key">{{ $ts.received }}</div>
<div class="value"><MkTime v-if="instance.latestRequestReceivedAt" :time="instance.latestRequestReceivedAt"/><span v-else>N/A</span></div>
</div>
</div>
<div class="footer">
<span class="status" :class="getStatus(instance)">{{ getStatus(instance) }}</span>
<span class="pubSub">
<span class="sub" v-if="instance.followersCount > 0"><i class="fas fa-caret-down icon"></i>Sub</span>
<span class="sub" v-else><i class="fas fa-caret-down icon"></i>-</span>
<span class="pub" v-if="instance.followingCount > 0"><i class="fas fa-caret-up icon"></i>Pub</span>
<span class="pub" v-else><i class="fas fa-caret-up icon"></i>-</span>
</span>
<span class="right">
<span class="latestStatus">{{ instance.latestStatus || '-' }}</span>
<span class="lastCommunicatedAt"><MkTime :time="instance.lastCommunicatedAt"/></span>
</span>
</div>
</MkA>
</div>
</MkPagination>
</div>
@ -59,7 +99,6 @@ import MkButton from '@client/components/ui/button.vue';
import MkInput from '@client/components/ui/input.vue';
import MkSelect from '@client/components/ui/select.vue';
import MkPagination from '@client/components/ui/pagination.vue';
import MkInstanceInfo from './instance.vue';
import * as os from '@client/os';
import * as symbols from '@client/symbols';
@ -117,69 +156,107 @@ export default defineComponent({
methods: {
getStatus(instance) {
if (instance.isSuspended) return 'off';
if (instance.isNotResponding) return 'red';
return 'green';
if (instance.isSuspended) return 'suspended';
if (instance.isNotResponding) return 'error';
return 'alive';
},
info(instance) {
os.popup(MkInstanceInfo, {
instance: instance
}, {}, 'closed');
}
}
});
</script>
<style lang="scss" scoped>
.enuoauvw {
.taeiyria {
> .query {
margin: var(--margin);
background: var(--bg);
padding: 16px;
}
}
.ppgwaixt {
cursor: pointer;
.dqokceoi {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
grid-gap: 12px;
padding: 16px;
&:hover {
color: var(--accent);
}
> .instance {
padding: 16px;
border: solid 1px var(--divider);
border-radius: 6px;
> .host {
> .indicator {
font-size: 70%;
vertical-align: baseline;
margin-right: 4px;
&:hover {
border: solid 1px var(--accent);
text-decoration: none;
}
&.green {
color: #49c5ba;
}
> .host {
font-weight: bold;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
&.yellow {
color: #c5a549;
}
&.red {
color: #c54949;
}
&.off {
color: rgba(0, 0, 0, 0.5);
> img {
width: 18px;
height: 18px;
margin-right: 6px;
vertical-align: middle;
}
}
}
> .status {
display: flex;
align-items: center;
font-size: 90%;
> .table {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
grid-gap: 6px;
margin: 6px 0;
font-size: 70%;
> span {
flex: 1;
> .icon {
margin-right: 6px;
> .cell {
> .key, > .value {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
> .key {
opacity: 0.7;
}
> .value {
}
}
}
> .footer {
display: flex;
align-items: center;
> .status {
&.suspended {
opacity: 0.5;
}
&.error {
color: var(--error);
}
&.alive {
color: var(--success);
}
}
> .pubSub {
margin-left: 8px;
}
> .right {
margin-left: auto;
font-size: 0.9em;
> .latestStatus {
border: solid 1px var(--divider);
border-radius: 4px;
margin: 0 8px;
padding: 0 4px;
}
}
}
}

2
src/client/pages/follow-requests.vue
View file

@ -32,7 +32,7 @@
<script lang="ts">
import { defineComponent } from 'vue';
import MkPagination from '@client/components/ui/pagination.vue';
import { userPage, acct } from '../filters/user';
import { userPage, acct } from '@client/filters/user';
import * as os from '@client/os';
import * as symbols from '@client/symbols';

4
src/client/pages/instance-info.vue
View file

@ -62,7 +62,7 @@
<div class="_formLabel">{{ $ts.statistics }}</div>
<div class="_formPanel cmhjzshl">
<div class="selects">
<MkSelect v-model:value="chartSrc" style="margin: 0; flex: 1;">
<MkSelect v-model="chartSrc" style="margin: 0; flex: 1;">
<option value="requests">{{ $ts._instanceCharts.requests }}</option>
<option value="users">{{ $ts._instanceCharts.users }}</option>
<option value="users-total">{{ $ts._instanceCharts.usersTotal }}</option>
@ -75,7 +75,7 @@
<option value="drive-files">{{ $ts._instanceCharts.files }}</option>
<option value="drive-files-total">{{ $ts._instanceCharts.filesTotal }}</option>
</MkSelect>
<MkSelect v-model:value="chartSpan" style="margin: 0;">
<MkSelect v-model="chartSpan" style="margin: 0;">
<option value="hour">{{ $ts.perHour }}</option>
<option value="day">{{ $ts.perDay }}</option>
</MkSelect>

8
src/client/pages/instance/abuses.vue
View file

@ -3,19 +3,19 @@
<div class="_section reports">
<div class="_content">
<div class="inputs" style="display: flex;">
<MkSelect v-model:value="state" style="margin: 0; flex: 1;">
<MkSelect v-model="state" style="margin: 0; flex: 1;">
<template #label>{{ $ts.state }}</template>
<option value="all">{{ $ts.all }}</option>
<option value="unresolved">{{ $ts.unresolved }}</option>
<option value="resolved">{{ $ts.resolved }}</option>
</MkSelect>
<MkSelect v-model:value="targetUserOrigin" style="margin: 0; flex: 1;">
<MkSelect v-model="targetUserOrigin" style="margin: 0; flex: 1;">
<template #label>{{ $ts.targetUserOrigin }}</template>
<option value="combined">{{ $ts.all }}</option>
<option value="local">{{ $ts.local }}</option>
<option value="remote">{{ $ts.remote }}</option>
</MkSelect>
<MkSelect v-model:value="reporterOrigin" style="margin: 0; flex: 1;">
<MkSelect v-model="reporterOrigin" style="margin: 0; flex: 1;">
<template #label>{{ $ts.reporterOrigin }}</template>
<option value="combined">{{ $ts.all }}</option>
<option value="local">{{ $ts.local }}</option>
@ -68,7 +68,7 @@ import MkButton from '@client/components/ui/button.vue';
import MkInput from '@client/components/ui/input.vue';
import MkSelect from '@client/components/ui/select.vue';
import MkPagination from '@client/components/ui/pagination.vue';
import { acct } from '../../filters/user';
import { acct } from '@client/filters/user';
import * as os from '@client/os';
import * as symbols from '@client/symbols';

20
src/client/pages/instance/ads.vue
View file

@ -4,11 +4,11 @@
<section class="_card _gap ads" v-for="ad in ads">
<div class="_content ad">
<MkAd v-if="ad.url" :specify="ad"/>
<MkInput v-model:value="ad.url" type="url">
<span>URL</span>
<MkInput v-model="ad.url" type="url">
<template #label>URL</template>
</MkInput>
<MkInput v-model:value="ad.imageUrl">
<span>{{ $ts.imageUrl }}</span>
<MkInput v-model="ad.imageUrl">
<template #label>{{ $ts.imageUrl }}</template>
</MkInput>
<div style="margin: 32px 0;">
<MkRadio v-model="ad.place" value="square">square</MkRadio>
@ -23,14 +23,14 @@
<MkRadio v-model="ad.priority" value="low">{{ $ts.low }}</MkRadio>
</div>
-->
<MkInput v-model:value="ad.ratio" type="number">
<span>{{ $ts.ratio }}</span>
<MkInput v-model="ad.ratio" type="number">
<template #label>{{ $ts.ratio }}</template>
</MkInput>
<MkInput v-model:value="ad.expiresAt" type="date">
<span>{{ $ts.expiration }}</span>
<MkInput v-model="ad.expiresAt" type="date">
<template #label>{{ $ts.expiration }}</template>
</MkInput>
<MkTextarea v-model:value="ad.memo">
<span>{{ $ts.memo }}</span>
<MkTextarea v-model="ad.memo">
<template #label>{{ $ts.memo }}</template>
</MkTextarea>
<div class="buttons">
<MkButton class="button" inline @click="save(ad)" primary><i class="fas fa-save"></i> {{ $ts.save }}</MkButton>

12
src/client/pages/instance/announcements.vue
View file

@ -3,14 +3,14 @@
<MkButton @click="add()" primary style="margin: 0 auto 16px auto;"><i class="fas fa-plus"></i> {{ $ts.add }}</MkButton>
<section class="_card _gap announcements" v-for="announcement in announcements">
<div class="_content announcement">
<MkInput v-model:value="announcement.title">
<span>{{ $ts.title }}</span>
<MkInput v-model="announcement.title">
<template #label>{{ $ts.title }}</template>
</MkInput>
<MkTextarea v-model:value="announcement.text">
<span>{{ $ts.text }}</span>
<MkTextarea v-model="announcement.text">
<template #label>{{ $ts.text }}</template>
</MkTextarea>
<MkInput v-model:value="announcement.imageUrl">
<span>{{ $ts.imageUrl }}</span>
<MkInput v-model="announcement.imageUrl">
<template #label>{{ $ts.imageUrl }}</template>
</MkInput>
<p v-if="announcement.reads">{{ $t('nUsersRead', { n: announcement.reads }) }}</p>
<div class="buttons">

14
src/client/pages/instance/emoji-edit-dialog.vue
View file

@ -11,11 +11,15 @@
<div class="_monolithic_">
<div class="yigymqpb _section">
<img :src="emoji.url" class="img"/>
<MkInput v-model:value="name"><span>{{ $ts.name }}</span></MkInput>
<MkInput v-model:value="category" :datalist="categories"><span>{{ $ts.category }}</span></MkInput>
<MkInput v-model:value="aliases">
<span>{{ $ts.tags }}</span>
<template #desc>{{ $ts.setMultipleBySeparatingWithSpace }}</template>
<MkInput v-model="name">
<template #label>{{ $ts.name }}</template>
</MkInput>
<MkInput v-model="category" :datalist="categories">
<template #label>{{ $ts.category }}</template>
</MkInput>
<MkInput v-model="aliases">
<template #label>{{ $ts.tags }}</template>
<template #caption>{{ $ts.setMultipleBySeparatingWithSpace }}</template>
</MkInput>
<MkButton danger @click="del()"><i class="fas fa-trash-alt"></i> {{ $ts.delete }}</MkButton>
</div>

14
src/client/pages/instance/emojis.vue
View file

@ -7,7 +7,10 @@
<div class="local" v-if="tab === 'local'">
<MkButton primary @click="add" style="margin: var(--margin) auto;"><i class="fas fa-plus"></i> {{ $ts.addEmoji }}</MkButton>
<MkInput v-model:value="query" :debounce="true" type="search" style="margin: var(--margin);"><template #icon><i class="fas fa-search"></i></template><span>{{ $ts.search }}</span></MkInput>
<MkInput v-model="query" :debounce="true" type="search" style="margin: var(--margin);">
<template #prefix><i class="fas fa-search"></i></template>
<template #label>{{ $ts.search }}</template>
</MkInput>
<MkPagination :pagination="pagination" ref="emojis">
<template #empty><span>{{ $ts.noCustomEmojis }}</span></template>
<template #default="{items}">
@ -25,8 +28,13 @@
</div>
<div class="remote" v-else-if="tab === 'remote'">
<MkInput v-model:value="queryRemote" :debounce="true" type="search" style="margin: var(--margin);"><template #icon><i class="fas fa-search"></i></template><span>{{ $ts.search }}</span></MkInput>
<MkInput v-model:value="host" :debounce="true" style="margin: var(--margin);"><span>{{ $ts.host }}</span></MkInput>
<MkInput v-model="queryRemote" :debounce="true" type="search" style="margin: var(--margin);">
<template #prefix><i class="fas fa-search"></i></template>
<template #label>{{ $ts.search }}</template>
</MkInput>
<MkInput v-model="host" :debounce="true" style="margin: var(--margin);">
<template #label>{{ $ts.host }}</template>
</MkInput>
<MkPagination :pagination="remotePagination" ref="remoteEmojis">
<template #empty><span>{{ $ts.noCustomEmojis }}</span></template>
<template #default="{items}">

2
src/client/pages/instance/file-dialog.vue
View file

@ -16,7 +16,7 @@
</div>
<div class="_section">
<div class="_content">
<MkSwitch @update:value="toggleIsSensitive" v-model:value="isSensitive">NSFW</MkSwitch>
<MkSwitch @update:modelValue="toggleIsSensitive" v-model="isSensitive">NSFW</MkSwitch>
</div>
</div>
<div class="_section">

14
src/client/pages/instance/files.vue
View file

@ -9,8 +9,8 @@
<div class="_section lookup">
<div class="_title"><i class="fas fa-search"></i> {{ $ts.lookup }}</div>
<div class="_content">
<MkInput class="target" v-model:value="q" type="text" @enter="find()">
<span>{{ $ts.fileIdOrUrl }}</span>
<MkInput class="target" v-model="q" type="text" @enter="find()">
<template #label>{{ $ts.fileIdOrUrl }}</template>
</MkInput>
<MkButton @click="find()" primary><i class="fas fa-search"></i> {{ $ts.lookup }}</MkButton>
</div>
@ -19,19 +19,19 @@
<div class="_section">
<div class="_content">
<div class="inputs" style="display: flex;">
<MkSelect v-model:value="origin" style="margin: 0; flex: 1;">
<MkSelect v-model="origin" style="margin: 0; flex: 1;">
<template #label>{{ $ts.instance }}</template>
<option value="combined">{{ $ts.all }}</option>
<option value="local">{{ $ts.local }}</option>
<option value="remote">{{ $ts.remote }}</option>
</MkSelect>
<MkInput v-model:value="searchHost" :debounce="true" type="search" style="margin: 0; flex: 1;" :disabled="pagination.params().origin === 'local'">
<span>{{ $ts.host }}</span>
<MkInput v-model="searchHost" :debounce="true" type="search" style="margin: 0; flex: 1;" :disabled="pagination.params().origin === 'local'">
<template #label>{{ $ts.host }}</template>
</MkInput>
</div>
<div class="inputs" style="display: flex; padding-top: 1.2em;">
<MkInput v-model:value="type" :debounce="true" type="search" style="margin: 0; flex: 1;">
<span>{{ $ts.type }}</span>
<MkInput v-model="type" :debounce="true" type="search" style="margin: 0; flex: 1;">
<template #label>{{ $ts.type }}</template>
</MkInput>
</div>
<MkPagination :pagination="pagination" #default="{items}" class="urempief" ref="files">

2
src/client/pages/instance/index.vue
View file

@ -100,7 +100,7 @@ export default defineComponent({
case 'overview': return defineAsyncComponent(() => import('./overview.vue'));
case 'users': return defineAsyncComponent(() => import('./users.vue'));
case 'emojis': return defineAsyncComponent(() => import('./emojis.vue'));
case 'federation': return defineAsyncComponent(() => import('./federation.vue'));
case 'federation': return defineAsyncComponent(() => import('../federation.vue'));
case 'queue': return defineAsyncComponent(() => import('./queue.vue'));
case 'files': return defineAsyncComponent(() => import('./files.vue'));
case 'announcements': return defineAsyncComponent(() => import('./announcements.vue'));

12
src/client/pages/instance/instance.vue
View file

@ -77,7 +77,7 @@
<div class="header">
<span class="label">{{ $ts.charts }}</span>
<div class="selects">
<MkSelect v-model:value="chartSrc" style="margin: 0; flex: 1;">
<MkSelect v-model="chartSrc" style="margin: 0; flex: 1;">
<option value="requests">{{ $ts._instanceCharts.requests }}</option>
<option value="users">{{ $ts._instanceCharts.users }}</option>
<option value="users-total">{{ $ts._instanceCharts.usersTotal }}</option>
@ -90,7 +90,7 @@
<option value="drive-files">{{ $ts._instanceCharts.files }}</option>
<option value="drive-files-total">{{ $ts._instanceCharts.filesTotal }}</option>
</MkSelect>
<MkSelect v-model:value="chartSpan" style="margin: 0;">
<MkSelect v-model="chartSpan" style="margin: 0;">
<option value="hour">{{ $ts.perHour }}</option>
<option value="day">{{ $ts.perDay }}</option>
</MkSelect>
@ -102,8 +102,8 @@
</div>
<div class="operations section">
<span class="label">{{ $ts.operations }}</span>
<MkSwitch v-model:value="isSuspended" class="switch">{{ $ts.stopActivityDelivery }}</MkSwitch>
<MkSwitch :value="isBlocked" class="switch" @update:value="changeBlock">{{ $ts.blockThisInstance }}</MkSwitch>
<MkSwitch v-model="isSuspended" class="switch">{{ $ts.stopActivityDelivery }}</MkSwitch>
<MkSwitch :model-value="isBlocked" class="switch" @update:modelValue="changeBlock">{{ $ts.blockThisInstance }}</MkSwitch>
<details>
<summary>{{ $ts.deleteAllFiles }}</summary>
<MkButton @click="deleteAllFiles()" style="margin: 0.5em 0 0.5em 0;"><i class="fas fa-trash-alt"></i> {{ $ts.deleteAllFiles }}</MkButton>
@ -131,8 +131,8 @@ import MkSelect from '@client/components/ui/select.vue';
import MkButton from '@client/components/ui/button.vue';
import MkSwitch from '@client/components/ui/switch.vue';
import MkInfo from '@client/components/ui/info.vue';
import bytes from '../../filters/bytes';
import number from '../../filters/number';
import bytes from '@client/filters/bytes';
import number from '@client/filters/number';
import * as os from '@client/os';
const chartLimit = 90;

6
src/client/pages/instance/logs.vue
View file

@ -1,10 +1,10 @@
<template>
<div class="_section">
<div class="_inputs">
<MkInput v-model:value="logDomain" :debounce="true">
<span>{{ $ts.domain }}</span>
<MkInput v-model="logDomain" :debounce="true">
<template #label>{{ $ts.domain }}</template>
</MkInput>
<MkSelect v-model:value="logLevel">
<MkSelect v-model="logLevel">
<template #label>Level</template>
<option value="all">All</option>
<option value="info">Info</option>

4
src/client/pages/instance/metrics.vue
View file

@ -60,8 +60,8 @@ import MkContainer from '@client/components/ui/container.vue';
import MkFolder from '@client/components/ui/folder.vue';
import MkwFederation from '../../widgets/federation.vue';
import { version, url } from '@client/config';
import bytes from '../../filters/bytes';
import number from '../../filters/number';
import bytes from '@client/filters/bytes';
import number from '@client/filters/number';
import MkInstanceInfo from './instance.vue';
const alpha = (hex, a) => {

4
src/client/pages/instance/overview.vue
View file

@ -62,8 +62,8 @@ import MkInput from '@client/components/ui/input.vue';
import MkContainer from '@client/components/ui/container.vue';
import MkFolder from '@client/components/ui/folder.vue';
import { version, url } from '@client/config';
import bytes from '../../filters/bytes';
import number from '../../filters/number';
import bytes from '@client/filters/bytes';
import number from '@client/filters/number';
import MkInstanceInfo from './instance.vue';
import XMetrics from './metrics.vue';
import * as os from '@client/os';

2
src/client/pages/instance/queue.chart.vue
View file

@ -29,7 +29,7 @@
<script lang="ts">
import { defineComponent, markRaw } from 'vue';
import Chart from 'chart.js';
import number from '../../filters/number';
import number from '@client/filters/number';
const alpha = (hex, a) => {
const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex)!;

16
src/client/pages/instance/users.vue
View file

@ -7,14 +7,14 @@
<div class="users">
<div class="inputs" style="display: flex;">
<MkSelect v-model:value="sort" style="margin: 0; flex: 1;">
<MkSelect v-model="sort" style="margin: 0; flex: 1;">
<template #label>{{ $ts.sort }}</template>
<option value="-createdAt">{{ $ts.registeredDate }} ({{ $ts.ascendingOrder }})</option>
<option value="+createdAt">{{ $ts.registeredDate }} ({{ $ts.descendingOrder }})</option>
<option value="-updatedAt">{{ $ts.lastUsed }} ({{ $ts.ascendingOrder }})</option>
<option value="+updatedAt">{{ $ts.lastUsed }} ({{ $ts.descendingOrder }})</option>
</MkSelect>
<MkSelect v-model:value="state" style="margin: 0; flex: 1;">
<MkSelect v-model="state" style="margin: 0; flex: 1;">
<template #label>{{ $ts.state }}</template>
<option value="all">{{ $ts.all }}</option>
<option value="available">{{ $ts.normal }}</option>
@ -23,7 +23,7 @@
<option value="silenced">{{ $ts.silence }}</option>
<option value="suspended">{{ $ts.suspend }}</option>
</MkSelect>
<MkSelect v-model:value="origin" style="margin: 0; flex: 1;">
<MkSelect v-model="origin" style="margin: 0; flex: 1;">
<template #label>{{ $ts.instance }}</template>
<option value="combined">{{ $ts.all }}</option>
<option value="local">{{ $ts.local }}</option>
@ -31,11 +31,11 @@
</MkSelect>
</div>
<div class="inputs" style="display: flex; padding-top: 1.2em;">
<MkInput v-model:value="searchUsername" style="margin: 0; flex: 1;" type="text" spellcheck="false" @update:value="$refs.users.reload()">
<span>{{ $ts.username }}</span>
<MkInput v-model="searchUsername" style="margin: 0; flex: 1;" type="text" spellcheck="false" @update:modelValue="$refs.users.reload()">
<template #label>{{ $ts.username }}</template>
</MkInput>
<MkInput v-model:value="searchHost" style="margin: 0; flex: 1;" type="text" spellcheck="false" @update:value="$refs.users.reload()" :disabled="pagination.params().origin === 'local'">
<span>{{ $ts.host }}</span>
<MkInput v-model="searchHost" style="margin: 0; flex: 1;" type="text" spellcheck="false" @update:modelValue="$refs.users.reload()" :disabled="pagination.params().origin === 'local'">
<template #label>{{ $ts.host }}</template>
</MkInput>
</div>
@ -70,7 +70,7 @@ import MkButton from '@client/components/ui/button.vue';
import MkInput from '@client/components/ui/input.vue';
import MkSelect from '@client/components/ui/select.vue';
import MkPagination from '@client/components/ui/pagination.vue';
import { acct } from '../../filters/user';
import { acct } from '@client/filters/user';
import * as os from '@client/os';
import * as symbols from '@client/symbols';
import { lookupUser } from '@client/scripts/lookup-user';

2
src/client/pages/messaging/index.vue
View file

@ -40,7 +40,7 @@
import { defineAsyncComponent, defineComponent, markRaw } from 'vue';
import { getAcct } from '@/misc/acct';
import MkButton from '@client/components/ui/button.vue';
import { acct } from '../../filters/user';
import { acct } from '@client/filters/user';
import * as os from '@client/os';
import * as symbols from '@client/symbols';

6
src/client/pages/messaging/messaging-room.vue
View file

@ -29,7 +29,7 @@
<button class="_buttonPrimary" @click="onIndicatorClick"><i class="fas fa-arrow-circle-down"></i>{{ $ts.newMessageExists }}</button>
</div>
</transition>
<XForm v-if="!fetching" :user="user" :group="group" ref="form"/>
<XForm v-if="!fetching" :user="user" :group="group" ref="form" class="form"/>
</footer>
</div>
</div>
@ -452,6 +452,10 @@ export default Component;
}
}
}
> .form {
border-top: solid 0.5px var(--divider);
}
}
}

65
src/client/pages/mfm-cheat-sheet.vue
View file

@ -7,7 +7,7 @@
<p>{{ $ts._mfm.mentionDescription }}</p>
<div class="preview">
<Mfm :text="preview_mention"/>
<MkTextarea v-model:value="preview_mention"><span>MFM</span></MkTextarea>
<MkTextarea v-model="preview_mention"><template #label>MFM</template></MkTextarea>
</div>
</div>
</div>
@ -17,7 +17,7 @@
<p>{{ $ts._mfm.hashtagDescription }}</p>
<div class="preview">
<Mfm :text="preview_hashtag"/>
<MkTextarea v-model:value="preview_hashtag"><span>MFM</span></MkTextarea>
<MkTextarea v-model="preview_hashtag"><template #label>MFM</template></MkTextarea>
</div>
</div>
</div>
@ -27,7 +27,7 @@
<p>{{ $ts._mfm.urlDescription }}</p>
<div class="preview">
<Mfm :text="preview_url"/>
<MkTextarea v-model:value="preview_url"><span>MFM</span></MkTextarea>
<MkTextarea v-model="preview_url"><template #label>MFM</template></MkTextarea>
</div>
</div>
</div>
@ -37,7 +37,7 @@
<p>{{ $ts._mfm.linkDescription }}</p>
<div class="preview">
<Mfm :text="preview_link"/>
<MkTextarea v-model:value="preview_link"><span>MFM</span></MkTextarea>
<MkTextarea v-model="preview_link"><template #label>MFM</template></MkTextarea>
</div>
</div>
</div>
@ -47,7 +47,7 @@
<p>{{ $ts._mfm.emojiDescription }}</p>
<div class="preview">
<Mfm :text="preview_emoji"/>
<MkTextarea v-model:value="preview_emoji"><span>MFM</span></MkTextarea>
<MkTextarea v-model="preview_emoji"><template #label>MFM</template></MkTextarea>
</div>
</div>
</div>
@ -57,7 +57,7 @@
<p>{{ $ts._mfm.boldDescription }}</p>
<div class="preview">
<Mfm :text="preview_bold"/>
<MkTextarea v-model:value="preview_bold"><span>MFM</span></MkTextarea>
<MkTextarea v-model="preview_bold"><template #label>MFM</template></MkTextarea>
</div>
</div>
</div>
@ -67,7 +67,7 @@
<p>{{ $ts._mfm.smallDescription }}</p>
<div class="preview">
<Mfm :text="preview_small"/>
<MkTextarea v-model:value="preview_small"><span>MFM</span></MkTextarea>
<MkTextarea v-model="preview_small"><template #label>MFM</template></MkTextarea>
</div>
</div>
</div>
@ -77,7 +77,7 @@
<p>{{ $ts._mfm.quoteDescription }}</p>
<div class="preview">
<Mfm :text="preview_quote"/>
<MkTextarea v-model:value="preview_quote"><span>MFM</span></MkTextarea>
<MkTextarea v-model="preview_quote"><template #label>MFM</template></MkTextarea>
</div>
</div>
</div>
@ -87,7 +87,7 @@
<p>{{ $ts._mfm.centerDescription }}</p>
<div class="preview">
<Mfm :text="preview_center"/>
<MkTextarea v-model:value="preview_center"><span>MFM</span></MkTextarea>
<MkTextarea v-model="preview_center"><template #label>MFM</template></MkTextarea>
</div>
</div>
</div>
@ -97,7 +97,7 @@
<p>{{ $ts._mfm.inlineCodeDescription }}</p>
<div class="preview">
<Mfm :text="preview_inlineCode"/>
<MkTextarea v-model:value="preview_inlineCode"><span>MFM</span></MkTextarea>
<MkTextarea v-model="preview_inlineCode"><template #label>MFM</template></MkTextarea>
</div>
</div>
</div>
@ -107,7 +107,7 @@
<p>{{ $ts._mfm.blockCodeDescription }}</p>
<div class="preview">
<Mfm :text="preview_blockCode"/>
<MkTextarea v-model:value="preview_blockCode"><span>MFM</span></MkTextarea>
<MkTextarea v-model="preview_blockCode"><template #label>MFM</template></MkTextarea>
</div>
</div>
</div>
@ -117,7 +117,7 @@
<p>{{ $ts._mfm.inlineMathDescription }}</p>
<div class="preview">
<Mfm :text="preview_inlineMath"/>
<MkTextarea v-model:value="preview_inlineMath"><span>MFM</span></MkTextarea>
<MkTextarea v-model="preview_inlineMath"><template #label>MFM</template></MkTextarea>
</div>
</div>
</div>
@ -127,7 +127,7 @@
<p>{{ $ts._mfm.searchDescription }}</p>
<div class="preview">
<Mfm :text="preview_search"/>
<MkTextarea v-model:value="preview_search"><span>MFM</span></MkTextarea>
<MkTextarea v-model="preview_search"><template #label>MFM</template></MkTextarea>
</div>
</div>
</div>
@ -137,7 +137,7 @@
<p>{{ $ts._mfm.flipDescription }}</p>
<div class="preview">
<Mfm :text="preview_flip"/>
<MkTextarea v-model:value="preview_flip"><span>MFM</span></MkTextarea>
<MkTextarea v-model="preview_flip"><template #label>MFM</template></MkTextarea>
</div>
</div>
</div>
@ -147,7 +147,7 @@
<p>{{ $ts._mfm.fontDescription }}</p>
<div class="preview">
<Mfm :text="preview_font"/>
<MkTextarea v-model:value="preview_font"><span>MFM</span></MkTextarea>
<MkTextarea v-model="preview_font"><template #label>MFM</template></MkTextarea>
</div>
</div>
</div>
@ -157,7 +157,7 @@
<p>{{ $ts._mfm.x2Description }}</p>
<div class="preview">
<Mfm :text="preview_x2"/>
<MkTextarea v-model:value="preview_x2"><span>MFM</span></MkTextarea>
<MkTextarea v-model="preview_x2"><template #label>MFM</template></MkTextarea>
</div>
</div>
</div>
@ -167,7 +167,7 @@
<p>{{ $ts._mfm.x3Description }}</p>
<div class="preview">
<Mfm :text="preview_x3"/>
<MkTextarea v-model:value="preview_x3"><span>MFM</span></MkTextarea>
<MkTextarea v-model="preview_x3"><template #label>MFM</template></MkTextarea>
</div>
</div>
</div>
@ -177,7 +177,7 @@
<p>{{ $ts._mfm.x4Description }}</p>
<div class="preview">
<Mfm :text="preview_x4"/>
<MkTextarea v-model:value="preview_x4"><span>MFM</span></MkTextarea>
<MkTextarea v-model="preview_x4"><template #label>MFM</template></MkTextarea>
</div>
</div>
</div>
@ -187,7 +187,7 @@
<p>{{ $ts._mfm.blurDescription }}</p>
<div class="preview">
<Mfm :text="preview_blur"/>
<MkTextarea v-model:value="preview_blur"><span>MFM</span></MkTextarea>
<MkTextarea v-model="preview_blur"><template #label>MFM</template></MkTextarea>
</div>
</div>
</div>
@ -197,7 +197,7 @@
<p>{{ $ts._mfm.jellyDescription }}</p>
<div class="preview">
<Mfm :text="preview_jelly"/>
<MkTextarea v-model:value="preview_jelly"><span>MFM</span></MkTextarea>
<MkTextarea v-model="preview_jelly"><template #label>MFM</template></MkTextarea>
</div>
</div>
</div>
@ -207,7 +207,7 @@
<p>{{ $ts._mfm.tadaDescription }}</p>
<div class="preview">
<Mfm :text="preview_tada"/>
<MkTextarea v-model:value="preview_tada"><span>MFM</span></MkTextarea>
<MkTextarea v-model="preview_tada"><template #label>MFM</template></MkTextarea>
</div>
</div>
</div>
@ -217,7 +217,7 @@
<p>{{ $ts._mfm.jumpDescription }}</p>
<div class="preview">
<Mfm :text="preview_jump"/>
<MkTextarea v-model:value="preview_jump"><span>MFM</span></MkTextarea>
<MkTextarea v-model="preview_jump"><template #label>MFM</template></MkTextarea>
</div>
</div>
</div>
@ -227,7 +227,7 @@
<p>{{ $ts._mfm.bounceDescription }}</p>
<div class="preview">
<Mfm :text="preview_bounce"/>
<MkTextarea v-model:value="preview_bounce"><span>MFM</span></MkTextarea>
<MkTextarea v-model="preview_bounce"><template #label>MFM</template></MkTextarea>
</div>
</div>
</div>
@ -237,7 +237,7 @@
<p>{{ $ts._mfm.spinDescription }}</p>
<div class="preview">
<Mfm :text="preview_spin"/>
<MkTextarea v-model:value="preview_spin"><span>MFM</span></MkTextarea>
<MkTextarea v-model="preview_spin"><template #label>MFM</template></MkTextarea>
</div>
</div>
</div>
@ -247,7 +247,7 @@
<p>{{ $ts._mfm.shakeDescription }}</p>
<div class="preview">
<Mfm :text="preview_shake"/>
<MkTextarea v-model:value="preview_shake"><span>MFM</span></MkTextarea>
<MkTextarea v-model="preview_shake"><template #label>MFM</template></MkTextarea>
</div>
</div>
</div>
@ -257,7 +257,17 @@
<p>{{ $ts._mfm.twitchDescription }}</p>
<div class="preview">
<Mfm :text="preview_twitch"/>
<MkTextarea v-model:value="preview_twitch"><span>MFM</span></MkTextarea>
<MkTextarea v-model="preview_twitch"><template #label>MFM</template></MkTextarea>
</div>
</div>
</div>
<div class="section _block">
<div class="title">{{ $ts._mfm.rainbow }}</div>
<div class="content">
<p>{{ $ts._mfm.rainbowDescription }}</p>
<div class="preview">
<Mfm :text="preview_rainbow"/>
<MkTextarea v-model="preview_rainbow"><template #label>MFM</template></MkTextarea>
</div>
</div>
</div>
@ -306,6 +316,7 @@ export default defineComponent({
preview_x3: `$[x3 🍮]`,
preview_x4: `$[x4 🍮]`,
preview_blur: `$[blur ${this.$ts._mfm.dummy}]`,
preview_rainbow: `$[rainbow 🍮]`,
}
},
});
@ -313,6 +324,8 @@ export default defineComponent({
<style lang="scss" scoped>
.mwysmxbg {
background: var(--bg);
> .section {
> .title {
position: sticky;

51
src/client/pages/my-antennas/create.vue Normal file
View file

@ -0,0 +1,51 @@
<template>
<div class="geegznzt">
<XAntenna :antenna="draft" @created="onAntennaCreated"/>
</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import MkButton from '@client/components/ui/button.vue';
import XAntenna from './editor.vue';
import * as symbols from '@client/symbols';
export default defineComponent({
components: {
MkButton,
XAntenna,
},
data() {
return {
[symbols.PAGE_INFO]: {
title: this.$ts.manageAntennas,
icon: 'fas fa-satellite',
},
draft: {
name: '',
src: 'all',
userListId: null,
userGroupId: null,
users: [],
keywords: [],
excludeKeywords: [],
withReplies: false,
caseSensitive: false,
withFile: false,
notify: false
},
};
},
methods: {
onAntennaCreated() {
this.$router.push('/my/antennas');
},
}
});
</script>
<style lang="scss" scoped>
</style>

56
src/client/pages/my-antennas/edit.vue Normal file
View file

@ -0,0 +1,56 @@
<template>
<div class="">
<XAntenna v-if="antenna" :antenna="antenna" @updated="onAntennaUpdated"/>
</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import MkButton from '@client/components/ui/button.vue';
import XAntenna from './editor.vue';
import * as symbols from '@client/symbols';
import * as os from '@client/os';
export default defineComponent({
components: {
MkButton,
XAntenna,
},
props: {
antennaId: {
type: String,
required: true,
}
},
data() {
return {
[symbols.PAGE_INFO]: {
title: this.$ts.manageAntennas,
icon: 'fas fa-satellite',
},
antenna: null,
};
},
watch: {
antennaId: {
async handler() {
this.antenna = await os.api('antennas/show', { antennaId: this.antennaId });
},
immediate: true,
}
},
methods: {
onAntennaUpdated() {
this.$router.push('/my/antennas');
},
}
});
</script>
<style lang="scss" scoped>
</style>

62
src/client/pages/my-antennas/index.antenna.vue → src/client/pages/my-antennas/editor.vue
View file

@ -1,11 +1,10 @@
<template>
<div class="shaynizk _card">
<div class="_title" v-if="antenna.name">{{ antenna.name }}</div>
<div class="_content body">
<MkInput v-model:value="name">
<span>{{ $ts.name }}</span>
<div class="shaynizk">
<div class="form">
<MkInput v-model="name" class="_inputNoTopMargin">
<template #label>{{ $ts.name }}</template>
</MkInput>
<MkSelect v-model:value="src">
<MkSelect v-model="src">
<template #label>{{ $ts.antennaSource }}</template>
<option value="all">{{ $ts._antennaSources.all }}</option>
<option value="home">{{ $ts._antennaSources.homeTimeline }}</option>
@ -13,34 +12,34 @@
<option value="list">{{ $ts._antennaSources.userList }}</option>
<option value="group">{{ $ts._antennaSources.userGroup }}</option>
</MkSelect>
<MkSelect v-model:value="userListId" v-if="src === 'list'">
<MkSelect v-model="userListId" v-if="src === 'list'">
<template #label>{{ $ts.userList }}</template>
<option v-for="list in userLists" :value="list.id" :key="list.id">{{ list.name }}</option>
</MkSelect>
<MkSelect v-model:value="userGroupId" v-else-if="src === 'group'">
<MkSelect v-model="userGroupId" v-else-if="src === 'group'">
<template #label>{{ $ts.userGroup }}</template>
<option v-for="group in userGroups" :value="group.id" :key="group.id">{{ group.name }}</option>
</MkSelect>
<MkTextarea v-model:value="users" v-else-if="src === 'users'">
<span>{{ $ts.users }}</span>
<template #desc>{{ $ts.antennaUsersDescription }} <button class="_textButton" @click="addUser">{{ $ts.addUser }}</button></template>
<MkTextarea v-model="users" v-else-if="src === 'users'">
<template #label>{{ $ts.users }}</template>
<template #caption>{{ $ts.antennaUsersDescription }} <button class="_textButton" @click="addUser">{{ $ts.addUser }}</button></template>
</MkTextarea>
<MkSwitch v-model:value="withReplies">{{ $ts.withReplies }}</MkSwitch>
<MkTextarea v-model:value="keywords">
<span>{{ $ts.antennaKeywords }}</span>
<template #desc>{{ $ts.antennaKeywordsDescription }}</template>
<MkSwitch v-model="withReplies">{{ $ts.withReplies }}</MkSwitch>
<MkTextarea v-model="keywords">
<template #label>{{ $ts.antennaKeywords }}</template>
<template #caption>{{ $ts.antennaKeywordsDescription }}</template>
</MkTextarea>
<MkTextarea v-model:value="excludeKeywords">
<span>{{ $ts.antennaExcludeKeywords }}</span>
<template #desc>{{ $ts.antennaKeywordsDescription }}</template>
<MkTextarea v-model="excludeKeywords">
<template #label>{{ $ts.antennaExcludeKeywords }}</template>
<template #caption>{{ $ts.antennaKeywordsDescription }}</template>
</MkTextarea>
<MkSwitch v-model:value="caseSensitive">{{ $ts.caseSensitive }}</MkSwitch>
<MkSwitch v-model:value="withFile">{{ $ts.withFileAntenna }}</MkSwitch>
<MkSwitch v-model:value="notify">{{ $ts.notifyAntenna }}</MkSwitch>
<MkSwitch v-model="caseSensitive">{{ $ts.caseSensitive }}</MkSwitch>
<MkSwitch v-model="withFile">{{ $ts.withFileAntenna }}</MkSwitch>
<MkSwitch v-model="notify">{{ $ts.notifyAntenna }}</MkSwitch>
</div>
<div class="_footer">
<div class="actions">
<MkButton inline @click="saveAntenna()" primary><i class="fas fa-save"></i> {{ $ts.save }}</MkButton>
<MkButton inline @click="deleteAntenna()" v-if="antenna.id != null"><i class="fas fa-trash"></i> {{ $ts.delete }}</MkButton>
<MkButton inline @click="deleteAntenna()" v-if="antenna.id != null" danger><i class="fas fa-trash"></i> {{ $ts.delete }}</MkButton>
</div>
</div>
</template>
@ -117,7 +116,7 @@ export default defineComponent({
methods: {
async saveAntenna() {
if (this.antenna.id == null) {
await os.api('antennas/create', {
await os.apiWithDialog('antennas/create', {
name: this.name,
src: this.src,
userListId: this.userListId,
@ -132,7 +131,7 @@ export default defineComponent({
});
this.$emit('created');
} else {
await os.api('antennas/update', {
await os.apiWithDialog('antennas/update', {
antennaId: this.antenna.id,
name: this.name,
src: this.src,
@ -146,9 +145,8 @@ export default defineComponent({
keywords: this.keywords.trim().split('\n').map(x => x.trim().split(' ')),
excludeKeywords: this.excludeKeywords.trim().split('\n').map(x => x.trim().split(' ')),
});
this.$emit('updated');
}
os.success();
},
async deleteAntenna() {
@ -180,9 +178,13 @@ export default defineComponent({
<style lang="scss" scoped>
.shaynizk {
> .body {
max-height: 250px;
overflow: auto;
> .form {
padding: 32px;
}
> .actions {
padding: 24px 32px;
border-top: solid 0.5px var(--divider);
}
}
</style>

59
src/client/pages/my-antennas/index.vue
View file

@ -1,12 +1,12 @@
<template>
<div class="ieepwinx _section">
<MkButton @click="create" primary class="add"><i class="fas fa-plus"></i> {{ $ts.add }}</MkButton>
<MkButton :link="true" to="/my/antennas/create" primary class="add"><i class="fas fa-plus"></i> {{ $ts.add }}</MkButton>
<div class="_content">
<XAntenna v-if="draft" :antenna="draft" @created="onAntennaCreated" style="margin-bottom: var(--margin);"/>
<MkPagination :pagination="pagination" #default="{items}" class="antennas" ref="list">
<XAntenna v-for="(antenna, i) in items" :key="antenna.id" :antenna="antenna" @deleted="onAntennaDeleted"/>
<MkPagination :pagination="pagination" #default="{items}" ref="list">
<MkA class="ljoevbzj" v-for="antenna in items" :key="antenna.id" :to="`/my/antennas/${antenna.id}`">
<div class="name">{{ antenna.name }}</div>
</MkA>
</MkPagination>
</div>
</div>
@ -16,14 +16,12 @@
import { defineComponent } from 'vue';
import MkPagination from '@client/components/ui/pagination.vue';
import MkButton from '@client/components/ui/button.vue';
import XAntenna from './index.antenna.vue';
import * as symbols from '@client/symbols';
export default defineComponent({
components: {
MkPagination,
MkButton,
XAntenna,
},
data() {
@ -40,43 +38,34 @@ export default defineComponent({
endpoint: 'antennas/list',
limit: 10,
},
draft: null,
};
},
methods: {
create() {
this.draft = {
name: '',
src: 'all',
userListId: null,
userGroupId: null,
users: [],
keywords: [],
excludeKeywords: [],
withReplies: false,
caseSensitive: false,
withFile: false,
notify: false
};
},
onAntennaCreated() {
this.$refs.list.reload();
this.draft = null;
},
onAntennaDeleted() {
this.$refs.list.reload();
},
}
});
</script>
<style lang="scss" scoped>
.ieepwinx {
padding: 16px;
> .add {
margin: 0 auto 16px auto;
}
.ljoevbzj {
display: block;
padding: 16px;
margin-bottom: 8px;
border: solid 1px var(--divider);
border-radius: 6px;
&:hover {
border: solid 1px var(--accent);
text-decoration: none;
}
> .name {
font-weight: bold;
}
}
}
</style>

16
src/client/pages/page-editor/els/page-editor.el.button.vue
View file

@ -3,9 +3,9 @@
<template #header><i class="fas fa-bolt"></i> {{ $ts._pages.blocks.button }}</template>
<section class="xfhsjczc">
<MkInput v-model:value="value.text"><span>{{ $ts._pages.blocks._button.text }}</span></MkInput>
<MkSwitch v-model:value="value.primary"><span>{{ $ts._pages.blocks._button.colored }}</span></MkSwitch>
<MkSelect v-model:value="value.action">
<MkInput v-model="value.text"><template #label>{{ $ts._pages.blocks._button.text }}</template></MkInput>
<MkSwitch v-model="value.primary"><span>{{ $ts._pages.blocks._button.colored }}</span></MkSwitch>
<MkSelect v-model="value.action">
<template #label>{{ $ts._pages.blocks._button.action }}</template>
<option value="dialog">{{ $ts._pages.blocks._button._action.dialog }}</option>
<option value="resetRandom">{{ $ts._pages.blocks._button._action.resetRandom }}</option>
@ -13,12 +13,12 @@
<option value="callAiScript">{{ $ts._pages.blocks._button._action.callAiScript }}</option>
</MkSelect>
<template v-if="value.action === 'dialog'">
<MkInput v-model:value="value.content"><span>{{ $ts._pages.blocks._button._action._dialog.content }}</span></MkInput>
<MkInput v-model="value.content"><template #label>{{ $ts._pages.blocks._button._action._dialog.content }}</template></MkInput>
</template>
<template v-else-if="value.action === 'pushEvent'">
<MkInput v-model:value="value.event"><span>{{ $ts._pages.blocks._button._action._pushEvent.event }}</span></MkInput>
<MkInput v-model:value="value.message"><span>{{ $ts._pages.blocks._button._action._pushEvent.message }}</span></MkInput>
<MkSelect v-model:value="value.var">
<MkInput v-model="value.event"><template #label>{{ $ts._pages.blocks._button._action._pushEvent.event }}</template></MkInput>
<MkInput v-model="value.message"><template #label>{{ $ts._pages.blocks._button._action._pushEvent.message }}</template></MkInput>
<MkSelect v-model="value.var">
<template #label>{{ $ts._pages.blocks._button._action._pushEvent.variable }}</template>
<option :value="null">{{ $t('_pages.blocks._button._action._pushEvent.no-variable') }}</option>
<option v-for="v in hpml.getVarsByType()" :value="v.name">{{ v.name }}</option>
@ -31,7 +31,7 @@
</MkSelect>
</template>
<template v-else-if="value.action === 'callAiScript'">
<MkInput v-model:value="value.fn"><span>{{ $ts._pages.blocks._button._action._callAiScript.functionName }}</span></MkInput>
<MkInput v-model="value.fn"><template #label>{{ $ts._pages.blocks._button._action._callAiScript.functionName }}</template></MkInput>
</template>
</section>
</XContainer>

15
src/client/pages/page-editor/els/page-editor.el.canvas.vue
View file

@ -3,9 +3,18 @@
<template #header><i class="fas fa-paint-brush"></i> {{ $ts._pages.blocks.canvas }}</template>
<section style="padding: 0 16px 0 16px;">
<MkInput v-model:value="value.name"><template #prefix><i class="fas fa-magic"></i></template><span>{{ $ts._pages.blocks._canvas.id }}</span></MkInput>
<MkInput v-model:value="value.width" type="number"><span>{{ $ts._pages.blocks._canvas.width }}</span><template #suffix>px</template></MkInput>
<MkInput v-model:value="value.height" type="number"><span>{{ $ts._pages.blocks._canvas.height }}</span><template #suffix>px</template></MkInput>
<MkInput v-model="value.name">
<template #prefix><i class="fas fa-magic"></i></template>
<template #label>{{ $ts._pages.blocks._canvas.id }}</template>
</MkInput>
<MkInput v-model="value.width" type="number">
<template #label>{{ $ts._pages.blocks._canvas.width }}</template>
<template #suffix>px</template>
</MkInput>
<MkInput v-model="value.height" type="number">
<template #label>{{ $ts._pages.blocks._canvas.height }}</template>
<template #suffix>px</template>
</MkInput>
</section>
</XContainer>
</template>

13
src/client/pages/page-editor/els/page-editor.el.counter.vue
View file

@ -3,9 +3,16 @@
<template #header><i class="fas fa-bolt"></i> {{ $ts._pages.blocks.counter }}</template>
<section style="padding: 0 16px 0 16px;">
<MkInput v-model:value="value.name"><template #prefix><i class="fas fa-magic"></i></template><span>{{ $ts._pages.blocks._counter.name }}</span></MkInput>
<MkInput v-model:value="value.text"><span>{{ $ts._pages.blocks._counter.text }}</span></MkInput>
<MkInput v-model:value="value.inc" type="number"><span>{{ $ts._pages.blocks._counter.inc }}</span></MkInput>
<MkInput v-model="value.name">
<template #prefix><i class="fas fa-magic"></i></template>
<template #label>{{ $ts._pages.blocks._counter.name }}</template>
</MkInput>
<MkInput v-model="value.text">
<template #label>{{ $ts._pages.blocks._counter.text }}</template>
</MkInput>
<MkInput v-model="value.inc" type="number">
<template #label>{{ $ts._pages.blocks._counter.inc }}</template>
</MkInput>
</section>
</XContainer>
</template>

2
src/client/pages/page-editor/els/page-editor.el.if.vue
View file

@ -8,7 +8,7 @@
</template>
<section class="romcojzs">
<MkSelect v-model:value="value.var">
<MkSelect v-model="value.var">
<template #label>{{ $ts._pages.blocks._if.variable }}</template>
<option v-for="v in hpml.getVarsByType('boolean')" :value="v.name">{{ v.name }}</option>
<optgroup :label="$ts._pages.script.pageVariables">

8
src/client/pages/page-editor/els/page-editor.el.note.vue
View file

@ -3,11 +3,11 @@
<template #header><i class="fas fa-sticky-note"></i> {{ $ts._pages.blocks.note }}</template>
<section style="padding: 0 16px 0 16px;">
<MkInput v-model:value="id">
<span>{{ $ts._pages.blocks._note.id }}</span>
<template #desc>{{ $ts._pages.blocks._note.idDescription }}</template>
<MkInput v-model="id">
<template #label>{{ $ts._pages.blocks._note.id }}</template>
<template #caption>{{ $ts._pages.blocks._note.idDescription }}</template>
</MkInput>
<MkSwitch v-model:value="value.detailed"><span>{{ $ts._pages.blocks._note.detailed }}</span></MkSwitch>
<MkSwitch v-model="value.detailed"><span>{{ $ts._pages.blocks._note.detailed }}</span></MkSwitch>
<XNote v-if="note && !value.detailed" v-model:note="note" :key="note.id + ':normal'" style="margin-bottom: 16px;"/>
<XNoteDetailed v-if="note && value.detailed" v-model:note="note" :key="note.id + ':detail'" style="margin-bottom: 16px;"/>

13
src/client/pages/page-editor/els/page-editor.el.number-input.vue
View file

@ -3,9 +3,16 @@
<template #header><i class="fas fa-bolt"></i> {{ $ts._pages.blocks.numberInput }}</template>
<section style="padding: 0 16px 0 16px;">
<MkInput v-model:value="value.name"><template #prefix><i class="fas fa-magic"></i></template><span>{{ $ts._pages.blocks._numberInput.name }}</span></MkInput>
<MkInput v-model:value="value.text"><span>{{ $ts._pages.blocks._numberInput.text }}</span></MkInput>
<MkInput v-model:value="value.default" type="number"><span>{{ $ts._pages.blocks._numberInput.default }}</span></MkInput>
<MkInput v-model="value.name">
<template #prefix><i class="fas fa-magic"></i></template>
<template #label>{{ $ts._pages.blocks._numberInput.name }}</template>
</MkInput>
<MkInput v-model="value.text">
<template #label>{{ $ts._pages.blocks._numberInput.text }}</template>
</MkInput>
<MkInput v-model="value.default" type="number">
<template #label>{{ $ts._pages.blocks._numberInput.default }}</template>
</MkInput>
</section>
</XContainer>
</template>

6
src/client/pages/page-editor/els/page-editor.el.post.vue
View file

@ -3,9 +3,9 @@
<template #header><i class="fas fa-paper-plane"></i> {{ $ts._pages.blocks.post }}</template>
<section style="padding: 16px;">
<MkTextarea v-model:value="value.text">{{ $ts._pages.blocks._post.text }}</MkTextarea>
<MkSwitch v-model:value="value.attachCanvasImage"><span>{{ $ts._pages.blocks._post.attachCanvasImage }}</span></MkSwitch>
<MkInput v-if="value.attachCanvasImage" v-model:value="value.canvasId"><span>{{ $ts._pages.blocks._post.canvasId }}</span></MkInput>
<MkTextarea v-model="value.text"><template #label>{{ $ts._pages.blocks._post.text }}</template></MkTextarea>
<MkSwitch v-model="value.attachCanvasImage"><span>{{ $ts._pages.blocks._post.attachCanvasImage }}</span></MkSwitch>
<MkInput v-if="value.attachCanvasImage" v-model="value.canvasId"><template #label>{{ $ts._pages.blocks._post.canvasId }}</template></MkInput>
</section>
</XContainer>
</template>

8
src/client/pages/page-editor/els/page-editor.el.radio-button.vue
View file

@ -3,10 +3,10 @@
<template #header><i class="fas fa-bolt"></i> {{ $ts._pages.blocks.radioButton }}</template>
<section style="padding: 0 16px 16px 16px;">
<MkInput v-model:value="value.name"><template #prefix><i class="fas fa-magic"></i></template><span>{{ $ts._pages.blocks._radioButton.name }}</span></MkInput>
<MkInput v-model:value="value.title"><span>{{ $ts._pages.blocks._radioButton.title }}</span></MkInput>
<MkTextarea v-model:value="values"><span>{{ $ts._pages.blocks._radioButton.values }}</span></MkTextarea>
<MkInput v-model:value="value.default"><span>{{ $ts._pages.blocks._radioButton.default }}</span></MkInput>
<MkInput v-model="value.name"><template #prefix><i class="fas fa-magic"></i></template><template #label>{{ $ts._pages.blocks._radioButton.name }}</template></MkInput>
<MkInput v-model="value.title"><template #label>{{ $ts._pages.blocks._radioButton.title }}</template></MkInput>
<MkTextarea v-model="values"><template #label>{{ $ts._pages.blocks._radioButton.values }}</template></MkTextarea>
<MkInput v-model="value.default"><template #label>{{ $ts._pages.blocks._radioButton.default }}</template></MkInput>
</section>
</XContainer>
</template>

6
src/client/pages/page-editor/els/page-editor.el.switch.vue
View file

@ -3,9 +3,9 @@
<template #header><i class="fas fa-bolt"></i> {{ $ts._pages.blocks.switch }}</template>
<section class="kjuadyyj">
<MkInput v-model:value="value.name"><template #prefix><i class="fas fa-magic"></i></template><span>{{ $ts._pages.blocks._switch.name }}</span></MkInput>
<MkInput v-model:value="value.text"><span>{{ $ts._pages.blocks._switch.text }}</span></MkInput>
<MkSwitch v-model:value="value.default"><span>{{ $ts._pages.blocks._switch.default }}</span></MkSwitch>
<MkInput v-model="value.name"><template #prefix><i class="fas fa-magic"></i></template><template #label>{{ $ts._pages.blocks._switch.name }}</template></MkInput>
<MkInput v-model="value.text"><template #label>{{ $ts._pages.blocks._switch.text }}</template></MkInput>
<MkSwitch v-model="value.default"><span>{{ $ts._pages.blocks._switch.default }}</span></MkSwitch>
</section>
</XContainer>
</template>

6
src/client/pages/page-editor/els/page-editor.el.text-input.vue
View file

@ -3,9 +3,9 @@
<template #header><i class="fas fa-bolt"></i> {{ $ts._pages.blocks.textInput }}</template>
<section style="padding: 0 16px 0 16px;">
<MkInput v-model:value="value.name"><template #prefix><i class="fas fa-magic"></i></template><span>{{ $ts._pages.blocks._textInput.name }}</span></MkInput>
<MkInput v-model:value="value.text"><span>{{ $ts._pages.blocks._textInput.text }}</span></MkInput>
<MkInput v-model:value="value.default" type="text"><span>{{ $ts._pages.blocks._textInput.default }}</span></MkInput>
<MkInput v-model="value.name"><template #prefix><i class="fas fa-magic"></i></template><template #label>{{ $ts._pages.blocks._textInput.name }}</template></MkInput>
<MkInput v-model="value.text"><template #label>{{ $ts._pages.blocks._textInput.text }}</template></MkInput>
<MkInput v-model="value.default" type="text"><template #label>{{ $ts._pages.blocks._textInput.default }}</template></MkInput>
</section>
</XContainer>
</template>

6
src/client/pages/page-editor/els/page-editor.el.textarea-input.vue
View file

@ -3,9 +3,9 @@
<template #header><i class="fas fa-bolt"></i> {{ $ts._pages.blocks.textareaInput }}</template>
<section style="padding: 0 16px 16px 16px;">
<MkInput v-model:value="value.name"><template #prefix><i class="fas fa-magic"></i></template><span>{{ $ts._pages.blocks._textareaInput.name }}</span></MkInput>
<MkInput v-model:value="value.text"><span>{{ $ts._pages.blocks._textareaInput.text }}</span></MkInput>
<MkTextarea v-model:value="value.default"><span>{{ $ts._pages.blocks._textareaInput.default }}</span></MkTextarea>
<MkInput v-model="value.name"><template #prefix><i class="fas fa-magic"></i></template><template #label>{{ $ts._pages.blocks._textareaInput.name }}</template></MkInput>
<MkInput v-model="value.text"><template #label>{{ $ts._pages.blocks._textareaInput.text }}</template></MkInput>
<MkTextarea v-model="value.default"><template #label>{{ $ts._pages.blocks._textareaInput.default }}</template></MkTextarea>
</section>
</XContainer>
</template>

6
src/client/pages/page-editor/page-editor.script-block.vue
View file

@ -40,9 +40,9 @@
<input v-model="value.value"/>
</section>
<section v-else-if="value.type === 'fn'" class="" style="padding:0 16px 16px 16px;">
<MkTextarea v-model:value="slots">
<span>{{ $ts._pages.script.blocks._fn.slots }}</span>
<template #desc>{{ $t('_pages.script.blocks._fn.slots-info') }}</template>
<MkTextarea v-model="slots">
<template #label>{{ $ts._pages.script.blocks._fn.slots }}</template>
<template #caption>{{ $t('_pages.script.blocks._fn.slots-info') }}</template>
</MkTextarea>
<XV v-if="value.value.expression" v-model:value="value.value.expression" :title="$t(`_pages.script.blocks._fn.arg1`)" :get-expected-type="() => null" :hpml="hpml" :fn-slots="value.value.slots" :name="name"/>
</section>

20
src/client/pages/page-editor/page-editor.vue
View file

@ -11,28 +11,28 @@
<MkContainer :foldable="true" :expanded="true" class="_gap">
<template #header><i class="fas fa-cog"></i> {{ $ts._pages.pageSetting }}</template>
<div style="padding: 16px;">
<MkInput v-model:value="title">
<span>{{ $ts._pages.title }}</span>
<MkInput v-model="title">
<template #label>{{ $ts._pages.title }}</template>
</MkInput>
<MkInput v-model:value="summary">
<span>{{ $ts._pages.summary }}</span>
<MkInput v-model="summary">
<template #label>{{ $ts._pages.summary }}</template>
</MkInput>
<MkInput v-model:value="name">
<MkInput v-model="name">
<template #prefix>{{ url }}/@{{ author.username }}/pages/</template>
<span>{{ $ts._pages.url }}</span>
<template #label>{{ $ts._pages.url }}</template>
</MkInput>
<MkSwitch v-model:value="alignCenter">{{ $ts._pages.alignCenter }}</MkSwitch>
<MkSwitch v-model="alignCenter">{{ $ts._pages.alignCenter }}</MkSwitch>
<MkSelect v-model:value="font">
<MkSelect v-model="font">
<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:value="hideTitleWhenPinned">{{ $ts._pages.hideTitleWhenPinned }}</MkSwitch>
<MkSwitch v-model="hideTitleWhenPinned">{{ $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>
@ -77,7 +77,7 @@
<MkContainer :foldable="true" :expanded="true" class="_gap">
<template #header><i class="fas fa-code"></i> {{ $ts.script }}</template>
<div>
<MkTextarea class="_code" v-model:value="script"/>
<MkTextarea class="_code" v-model="script"/>
</div>
</MkContainer>
</div>

8
src/client/pages/reversi/game.setting.vue
View file

@ -57,9 +57,9 @@
</header>
<div>
<MkSwitch v-model:value="game.isLlotheo" @update:value="updateSettings('isLlotheo')">{{ $ts._reversi.isLlotheo }}</MkSwitch>
<MkSwitch v-model:value="game.loopedBoard" @update:value="updateSettings('loopedBoard')">{{ $ts._reversi.loopedMap }}</MkSwitch>
<MkSwitch v-model:value="game.canPutEverywhere" @update:value="updateSettings('canPutEverywhere')">{{ $ts._reversi.canPutEverywhere }}</MkSwitch>
<MkSwitch v-model="game.isLlotheo" @update:modelValue="updateSettings('isLlotheo')">{{ $ts._reversi.isLlotheo }}</MkSwitch>
<MkSwitch v-model="game.loopedBoard" @update:modelValue="updateSettings('loopedBoard')">{{ $ts._reversi.loopedMap }}</MkSwitch>
<MkSwitch v-model="game.canPutEverywhere" @update:modelValue="updateSettings('canPutEverywhere')">{{ $ts._reversi.canPutEverywhere }}</MkSwitch>
</div>
</div>
@ -70,7 +70,7 @@
<div>
<template v-for="item in form">
<MkSwitch v-if="item.type == 'switch'" v-model:value="item.value" :key="item.id" @change="onChangeForm(item)">{{ item.label || item.desc || '' }}</MkSwitch>
<MkSwitch v-if="item.type == 'switch'" v-model="item.value" :key="item.id" @change="onChangeForm(item)">{{ item.label || item.desc || '' }}</MkSwitch>
<div class="card" v-if="item.type == 'radio'" :key="item.id">
<header>

2
src/client/pages/room/room.vue
View file

@ -31,7 +31,7 @@
<MkButton @click="add()"><i class="fas fa-box-open"></i> {{ $ts._rooms.addFurniture }}</MkButton>
</div>
<div class="_content">
<MkSelect :value="roomType" @update:value="updateRoomType($event)">
<MkSelect :model-value="roomType" @update:modelValue="updateRoomType($event)">
<template #label>{{ $ts._rooms.roomType }}</template>
<option value="default">{{ $ts._rooms._roomType.default }}</option>
<option value="washitsu">{{ $ts._rooms._roomType.washitsu }}</option>

8
src/client/pages/settings/2fa.vue
View file

@ -20,7 +20,7 @@
</div>
</div>
<MkSwitch v-model:value="usePasswordLessLogin" @update:value="updatePasswordLessLogin" v-if="$i.securityKeysList.length > 0">{{ $ts.passwordLessLogin }}</MkSwitch>
<MkSwitch v-model="usePasswordLessLogin" @update:modelValue="updatePasswordLessLogin" v-if="$i.securityKeysList.length > 0">{{ $ts.passwordLessLogin }}</MkSwitch>
<MkInfo warn v-if="registration && registration.error">{{ $ts.error }} {{ registration.error }}</MkInfo>
<MkButton v-if="!registration || registration.error" @click="addSecurityKey">{{ $ts._2fa.registerKey }}</MkButton>
@ -32,8 +32,8 @@
</li>
<li v-if="registration.stage >= 1">
<MkForm :disabled="registration.stage != 1 || registration.saving">
<MkInput v-model:value="keyName" :max="30">
<span>{{ $ts.securityKeyName }}</span>
<MkInput v-model="keyName" :max="30">
<template #label>{{ $ts.securityKeyName }}</template>
</MkInput>
<MkButton @click="registerKey" :disabled="keyName.length == 0">{{ $ts.registerSecurityKey }}</MkButton>
<i v-if="registration.saving && registration.stage == 1" class="fas fa-spinner fa-pulse fa-fw"></i>
@ -56,7 +56,7 @@
</li>
<li>{{ $ts._2fa.step2 }}<br><img :src="data.qr"></li>
<li>{{ $ts._2fa.step3 }}<br>
<MkInput v-model:value="token" type="text" pattern="^[0-9]{6}$" autocomplete="off" spellcheck="false">{{ $ts.token }}</MkInput>
<MkInput v-model="token" type="text" pattern="^[0-9]{6}$" autocomplete="off" spellcheck="false"><template #label>{{ $ts.token }}</template></MkInput>
<MkButton primary @click="submit">{{ $ts.done }}</MkButton>
</li>
</ol>

42
src/client/pages/test.vue
View file

@ -4,23 +4,23 @@
<div class="_card _gap">
<div class="_title">Dialog</div>
<div class="_content">
<MkInput v-model:value="dialogTitle">
<span>Title</span>
<MkInput v-model="dialogTitle">
<template #label>Title</template>
</MkInput>
<MkInput v-model:value="dialogBody">
<span>Body</span>
<MkInput v-model="dialogBody">
<template #label>Body</template>
</MkInput>
<MkRadio v-model="dialogType" value="info">Info</MkRadio>
<MkRadio v-model="dialogType" value="success">Success</MkRadio>
<MkRadio v-model="dialogType" value="warning">Warn</MkRadio>
<MkRadio v-model="dialogType" value="error">Error</MkRadio>
<MkSwitch v-model:value="dialogCancel">
<MkSwitch v-model="dialogCancel">
<span>With cancel button</span>
</MkSwitch>
<MkSwitch v-model:value="dialogCancelByBgClick">
<MkSwitch v-model="dialogCancelByBgClick">
<span>Can cancel by modal bg click</span>
</MkSwitch>
<MkSwitch v-model:value="dialogInput">
<MkSwitch v-model="dialogInput">
<span>With input field</span>
</MkSwitch>
<MkButton @click="showDialog()">Show</MkButton>
@ -33,11 +33,11 @@
<div class="_card _gap">
<div class="_title">Form</div>
<div class="_content">
<MkInput v-model:value="formTitle">
<span>Title</span>
<MkInput v-model="formTitle">
<template #label>Title</template>
</MkInput>
<MkTextarea v-model:value="formForm">
<span>Form</span>
<MkTextarea v-model="formForm">
<template #label>Form</template>
</MkTextarea>
<MkButton @click="form()">Show</MkButton>
</div>
@ -49,8 +49,8 @@
<div class="_card _gap">
<div class="_title">MFM</div>
<div class="_content">
<MkTextarea v-model:value="mfm">
<span>MFM</span>
<MkTextarea v-model="mfm">
<template #label>MFM</template>
</MkTextarea>
</div>
<div class="_content">
@ -61,7 +61,7 @@
<div class="_card _gap">
<div class="_title">selectDriveFile</div>
<div class="_content">
<MkSwitch v-model:value="selectDriveFileMultiple">
<MkSwitch v-model="selectDriveFileMultiple">
<span>Multiple</span>
</MkSwitch>
<MkButton @click="selectDriveFile()">selectDriveFile</MkButton>
@ -74,7 +74,7 @@
<div class="_card _gap">
<div class="_title">selectDriveFolder</div>
<div class="_content">
<MkSwitch v-model:value="selectDriveFolderMultiple">
<MkSwitch v-model="selectDriveFolderMultiple">
<span>Multiple</span>
</MkSwitch>
<MkButton @click="selectDriveFolder()">selectDriveFolder</MkButton>
@ -97,14 +97,14 @@
<div class="_card _gap">
<div class="_title">Notification</div>
<div class="_content">
<MkInput v-model:value="notificationIconUrl">
<span>Icon URL</span>
<MkInput v-model="notificationIconUrl">
<template #label>Icon URL</template>
</MkInput>
<MkInput v-model:value="notificationHeader">
<span>Header</span>
<MkInput v-model="notificationHeader">
<template #label>Header</template>
</MkInput>
<MkTextarea v-model:value="notificationBody">
<span>Body</span>
<MkTextarea v-model="notificationBody">
<template #label>Body</template>
</MkTextarea>
<MkButton @click="createNotification()">createNotification</MkButton>
</div>

10
src/client/pages/timeline.vue
View file

@ -1,8 +1,8 @@
<template>
<div class="cmuxhskf _root" v-hotkey.global="keymap">
<XTutorial v-if="$store.reactiveState.tutorial.value != -1" class="tutorial _block"/>
<XPostForm v-if="$store.reactiveState.showFixedPostForm.value" class="post-form _block" fixed/>
<div class="tabs _block">
<XTutorial v-if="$store.reactiveState.tutorial.value != -1" class="tutorial _block _isolated"/>
<XPostForm v-if="$store.reactiveState.showFixedPostForm.value" class="post-form _block _isolated" fixed/>
<div class="tabs">
<div class="left">
<button class="_button tab" @click="() => { src = 'home'; saveSrc(); }" :class="{ active: src === 'home' }" v-tooltip="$ts._timelines.home"><i class="fas fa-home"></i></button>
<button class="_button tab" @click="() => { src = 'local'; saveSrc(); }" :class="{ active: src === 'local' }" v-tooltip="$ts._timelines.local" v-if="isLocalTimelineAvailable"><i class="fas fa-comments"></i></button>
@ -20,7 +20,6 @@
</div>
<div class="new" v-if="queue > 0"><button class="_buttonPrimary" @click="top()">{{ $ts.newNoteRecived }}</button></div>
<XTimeline ref="tl"
class="_gap"
:key="src === 'list' ? `list:${list.id}` : src === 'antenna' ? `antenna:${antenna.id}` : src === 'channel' ? `channel:${channel.id}` : src"
:src="src"
:list="list ? list.id : null"
@ -62,6 +61,7 @@ export default defineComponent({
queue: 0,
[symbols.PAGE_INFO]: computed(() => ({
title: this.$ts.timeline,
subtitle: this.src === 'local' ? this.$ts._timelines.local : this.src === 'social' ? this.$ts._timelines.social : this.src === 'global' ? this.$ts._timelines.global : this.$ts._timelines.home,
icon: this.src === 'local' ? 'fas fa-comments' : this.src === 'social' ? 'fas fa-share-alt' : this.src === 'global' ? 'fas fa-globe' : 'fas fa-home',
actions: [{
icon: 'fas fa-calendar-alt',
@ -211,6 +211,8 @@ export default defineComponent({
<style lang="scss" scoped>
.cmuxhskf {
background: var(--bg);
> .new {
position: sticky;
top: calc(var(--stickyTop, 0px) + 16px);

2
src/client/pages/user/clips.vue
View file

@ -12,7 +12,7 @@
<script lang="ts">
import { defineComponent } from 'vue';
import MkPagination from '@client/components/ui/pagination.vue';
import { userPage, acct } from '../../filters/user';
import { userPage, acct } from '@client/filters/user';
export default defineComponent({
components: {

2
src/client/pages/user/follow-list.vue
View file

@ -12,7 +12,7 @@
import { defineComponent } from 'vue';
import MkUserInfo from '@client/components/user-info.vue';
import MkPagination from '@client/components/ui/pagination.vue';
import { userPage, acct } from '../../filters/user';
import { userPage, acct } from '@client/filters/user';
export default defineComponent({
components: {

2
src/client/pages/user/gallery.vue
View file

@ -12,7 +12,7 @@
import { defineComponent } from 'vue';
import MkGalleryPostPreview from '@client/components/gallery-post-preview.vue';
import MkPagination from '@client/components/ui/pagination.vue';
import { userPage, acct } from '../../filters/user';
import { userPage, acct } from '@client/filters/user';
export default defineComponent({
components: {

2
src/client/pages/user/index.photos.vue
View file

@ -20,7 +20,7 @@
<script lang="ts">
import { defineComponent } from 'vue';
import { getStaticImageUrl } from '@client/scripts/get-static-image-url';
import notePage from '../../filters/note';
import notePage from '@client/filters/note';
import * as os from '@client/os';
import MkContainer from '@client/components/ui/container.vue';
import ImgWithBlurhash from '@client/components/img-with-blurhash.vue';

14
src/client/pages/user/index.vue
View file

@ -1,9 +1,9 @@
<template>
<transition name="fade" mode="out-in">
<div class="ftskorzw wide" v-if="user && narrow === false">
<MkRemoteCaution v-if="user.host != null" :href="user.url" class="_gap"/>
<MkRemoteCaution v-if="user.host != null" :href="user.url"/>
<div class="banner-container _gap" :style="style">
<div class="banner-container" :style="style">
<div class="banner" ref="banner" :style="style"></div>
</div>
<div class="contents">
@ -276,6 +276,7 @@ export default defineComponent({
return {
[symbols.PAGE_INFO]: computed(() => this.user ? {
title: this.user.name ? `${this.user.name} (@${this.user.username})` : `@${this.user.username}`,
subtitle: `@${getAcct(this.user)}`,
userName: this.user,
avatar: this.user,
path: `/@${this.user.username}`,
@ -313,7 +314,7 @@ export default defineComponent({
mounted() {
window.requestAnimationFrame(this.parallaxLoop);
this.narrow = true; //this.$el.clientWidth < 1000;
this.narrow = this.$el.clientWidth < 1000;
},
beforeUnmount() {
@ -381,13 +382,10 @@ export default defineComponent({
}
.ftskorzw.wide {
max-width: 1150px;
margin: 0 auto;
> .banner-container {
position: relative;
height: 450px;
border-radius: 16px;
height: 300px;
overflow: hidden;
background-size: cover;
background-position: center;
@ -404,6 +402,7 @@ export default defineComponent({
> .contents {
display: flex;
padding: 16px;
> .side {
width: 360px;
@ -561,6 +560,7 @@ export default defineComponent({
.ftskorzw.narrow {
box-sizing: border-box;
overflow: clip;
background: var(--bg);
> .punished {
font-size: 0.8em;

2
src/client/pages/user/pages.vue
View file

@ -10,7 +10,7 @@
import { defineComponent } from 'vue';
import MkPagePreview from '@client/components/page-preview.vue';
import MkPagination from '@client/components/ui/pagination.vue';
import { userPage, acct } from '../../filters/user';
import { userPage, acct } from '@client/filters/user';
export default defineComponent({
components: {

8
src/client/pages/welcome.setup.vue
View file

@ -3,13 +3,13 @@
<h1>Welcome to Misskey!</h1>
<div>
<p>{{ $ts.intro }}</p>
<MkInput v-model:value="username" pattern="^[a-zA-Z0-9_]{1,20}$" spellcheck="false" required>
<span>{{ $ts.username }}</span>
<MkInput v-model="username" pattern="^[a-zA-Z0-9_]{1,20}$" spellcheck="false" required>
<template #label>{{ $ts.username }}</template>
<template #prefix>@</template>
<template #suffix>@{{ host }}</template>
</MkInput>
<MkInput v-model:value="password" type="password">
<span>{{ $ts.password }}</span>
<MkInput v-model="password" type="password">
<template #label>{{ $ts.password }}</template>
<template #prefix><i class="fas fa-lock"></i></template>
</MkInput>
<footer>