profxadke/misskey
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

refactor

Browse source
This commit is contained in:
syuilo 2023-01-06 09:41:14 +09:00
parent bcc3380cfc
commit 372a17d7f0
77 changed files with 245 additions and 320 deletions
Download patch file Download diff file Expand all files Collapse all files

6
packages/frontend/src/components/MkAbuseReportWindow.vue
View file

@ -8,14 +8,14 @@
</template> </template>
</I18n> </I18n>
</template> </template>
<div class="dpvffvvy _monolithic_"> <div class="dpvffvvy _autoGap">
<div class="_section"> <div class="">
<MkTextarea v-model="comment"> <MkTextarea v-model="comment">
<template #label>{{ i18n.ts.details }}</template> <template #label>{{ i18n.ts.details }}</template>
<template #caption>{{ i18n.ts.fillAbuseReportDescription }}</template> <template #caption>{{ i18n.ts.fillAbuseReportDescription }}</template>
</MkTextarea> </MkTextarea>
</div> </div>
<div class="_section"> <div class="">
<MkButton primary full :disabled="comment.length === 0" @click="send">{{ i18n.ts.send }}</MkButton> <MkButton primary full :disabled="comment.length === 0" @click="send">{{ i18n.ts.send }}</MkButton>
</div> </div>
</div> </div>

2
packages/frontend/src/components/MkAsUi.vue
View file

@ -8,7 +8,7 @@
<span v-else-if="c.type === 'text'" :class="{ [$style.fontSerif]: c.font === 'serif', [$style.fontMonospace]: c.font === 'monospace' }" :style="{ fontSize: c.size ? `${c.size * 100}%` : null, fontWeight: c.bold ? 'bold' : null, color: c.color ?? null }">{{ c.text }}</span> <span v-else-if="c.type === 'text'" :class="{ [$style.fontSerif]: c.font === 'serif', [$style.fontMonospace]: c.font === 'monospace' }" :style="{ fontSize: c.size ? `${c.size * 100}%` : null, fontWeight: c.bold ? 'bold' : null, color: c.color ?? null }">{{ c.text }}</span>
<Mfm v-else-if="c.type === 'mfm'" :class="{ [$style.fontSerif]: c.font === 'serif', [$style.fontMonospace]: c.font === 'monospace' }" :style="{ fontSize: c.size ? `${c.size * 100}%` : null, color: c.color ?? null }" :text="c.text"/> <Mfm v-else-if="c.type === 'mfm'" :class="{ [$style.fontSerif]: c.font === 'serif', [$style.fontMonospace]: c.font === 'monospace' }" :style="{ fontSize: c.size ? `${c.size * 100}%` : null, color: c.color ?? null }" :text="c.text"/>
<MkButton v-else-if="c.type === 'button'" :primary="c.primary" :rounded="c.rounded" :small="size === 'small'" @click="c.onClick">{{ c.text }}</MkButton> <MkButton v-else-if="c.type === 'button'" :primary="c.primary" :rounded="c.rounded" :small="size === 'small'" @click="c.onClick">{{ c.text }}</MkButton>
<div v-else-if="c.type === 'buttons'" style="display: flex; gap: 8px; flex-wrap: wrap;"> <div v-else-if="c.type === 'buttons'" class="_buttons">
<MkButton v-for="button in c.buttons" :primary="button.primary" :rounded="button.rounded" :small="size === 'small'" @click="button.onClick">{{ button.text }}</MkButton> <MkButton v-for="button in c.buttons" :primary="button.primary" :rounded="button.rounded" :small="size === 'small'" @click="button.onClick">{{ button.text }}</MkButton>
</div> </div>
<MkSwitch v-else-if="c.type === 'switch'" :model-value="valueForSwitch" @update:model-value="onSwitchUpdate"> <MkSwitch v-else-if="c.type === 'switch'" :model-value="valueForSwitch" @update:model-value="onSwitchUpdate">

8
packages/frontend/src/components/MkCropperDialog.vue
View file

@ -1,5 +1,5 @@
<template> <template>
<XModalWindow <MkModalWindow
ref="dialogEl" ref="dialogEl"
:width="800" :width="800"
:height="500" :height="500"
@ -22,7 +22,7 @@
</div> </div>
</div> </div>
</template> </template>
</XModalWindow> </MkModalWindow>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
@ -30,7 +30,7 @@ import { nextTick, onMounted } from 'vue';
import * as misskey from 'misskey-js'; import * as misskey from 'misskey-js';
import Cropper from 'cropperjs'; import Cropper from 'cropperjs';
import tinycolor from 'tinycolor2'; import tinycolor from 'tinycolor2';
import XModalWindow from '@/components/MkModalWindow.vue'; import MkModalWindow from '@/components/MkModalWindow.vue';
import * as os from '@/os'; import * as os from '@/os';
import { $i } from '@/account'; import { $i } from '@/account';
import { defaultStore } from '@/store'; import { defaultStore } from '@/store';
@ -50,7 +50,7 @@ const props = defineProps<{
}>(); }>();
const imgUrl = getProxiedImageUrl(props.file.url); const imgUrl = getProxiedImageUrl(props.file.url);
let dialogEl = $shallowRef<InstanceType<typeof XModalWindow>>(); let dialogEl = $shallowRef<InstanceType<typeof MkModalWindow>>();
let imgEl = $shallowRef<HTMLImageElement>(); let imgEl = $shallowRef<HTMLImageElement>();
let cropper: Cropper | null = null; let cropper: Cropper | null = null;
let loading = $ref(true); let loading = $ref(true);

8
packages/frontend/src/components/MkDriveSelectDialog.vue
View file

@ -1,5 +1,5 @@
<template> <template>
<XModalWindow <MkModalWindow
ref="dialog" ref="dialog"
:width="800" :width="800"
:height="500" :height="500"
@ -15,14 +15,14 @@
<span v-if="selected.length > 0" style="margin-left: 8px; opacity: 0.5;">({{ number(selected.length) }})</span> <span v-if="selected.length > 0" style="margin-left: 8px; opacity: 0.5;">({{ number(selected.length) }})</span>
</template> </template>
<XDrive :multiple="multiple" :select="type" @change-selection="onChangeSelection" @selected="ok()"/> <XDrive :multiple="multiple" :select="type" @change-selection="onChangeSelection" @selected="ok()"/>
</XModalWindow> </MkModalWindow>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { ref, shallowRef } from 'vue'; import { ref, shallowRef } from 'vue';
import * as Misskey from 'misskey-js'; import * as Misskey from 'misskey-js';
import XDrive from '@/components/MkDrive.vue'; import XDrive from '@/components/MkDrive.vue';
import XModalWindow from '@/components/MkModalWindow.vue'; import MkModalWindow from '@/components/MkModalWindow.vue';
import number from '@/filters/number'; import number from '@/filters/number';
import { i18n } from '@/i18n'; import { i18n } from '@/i18n';
@ -38,7 +38,7 @@ const emit = defineEmits<{
(ev: 'closed'): void; (ev: 'closed'): void;
}>(); }>();
const dialog = shallowRef<InstanceType<typeof XModalWindow>>(); const dialog = shallowRef<InstanceType<typeof MkModalWindow>>();
const selected = ref<Misskey.entities.DriveFile[]>([]); const selected = ref<Misskey.entities.DriveFile[]>([]);

8
packages/frontend/src/components/MkFileCaptionEditWindow.vue
View file

@ -1,5 +1,5 @@
<template> <template>
<XModalWindow <MkModalWindow
ref="dialog" ref="dialog"
:width="400" :width="400"
:height="450" :height="450"
@ -16,13 +16,13 @@
<template #label>{{ i18n.ts.caption }}</template> <template #label>{{ i18n.ts.caption }}</template>
</MkTextarea> </MkTextarea>
</MkSpacer> </MkSpacer>
</XModalWindow> </MkModalWindow>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { } from 'vue'; import { } from 'vue';
import * as Misskey from 'misskey-js'; import * as Misskey from 'misskey-js';
import XModalWindow from '@/components/MkModalWindow.vue'; import MkModalWindow from '@/components/MkModalWindow.vue';
import MkTextarea from '@/components/form/textarea.vue'; import MkTextarea from '@/components/form/textarea.vue';
import MkDriveFileThumbnail from '@/components/MkDriveFileThumbnail.vue'; import MkDriveFileThumbnail from '@/components/MkDriveFileThumbnail.vue';
import { i18n } from '@/i18n'; import { i18n } from '@/i18n';
@ -37,7 +37,7 @@ const emit = defineEmits<{
(ev: 'closed'): void; (ev: 'closed'): void;
}>(); }>();
const dialog = $shallowRef<InstanceType<typeof XModalWindow>>(); const dialog = $shallowRef<InstanceType<typeof MkModalWindow>>();
let caption = $ref(props.default); let caption = $ref(props.default);

2
packages/frontend/src/components/MkFlashPreview.vue
View file

@ -1,5 +1,5 @@
<template> <template>
<MkA :to="`/play/${flash.id}`" class="vhpxefrk _block" tabindex="-1"> <MkA :to="`/play/${flash.id}`" class="vhpxefrk" tabindex="-1">
<article> <article>
<header> <header>
<h1 :title="flash.title">{{ flash.title }}</h1> <h1 :title="flash.title">{{ flash.title }}</h1>

8
packages/frontend/src/components/MkForgotPassword.vue
View file

@ -1,5 +1,5 @@
<template> <template>
<XModalWindow <MkModalWindow
ref="dialog" ref="dialog"
:width="370" :width="370"
:height="400" :height="400"
@ -29,12 +29,12 @@
<div v-else class="bafecedb"> <div v-else class="bafecedb">
{{ i18n.ts._forgotPassword.contactAdmin }} {{ i18n.ts._forgotPassword.contactAdmin }}
</div> </div>
</XModalWindow> </MkModalWindow>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { } from 'vue'; import { } from 'vue';
import XModalWindow from '@/components/MkModalWindow.vue'; import MkModalWindow from '@/components/MkModalWindow.vue';
import MkButton from '@/components/MkButton.vue'; import MkButton from '@/components/MkButton.vue';
import MkInput from '@/components/form/input.vue'; import MkInput from '@/components/form/input.vue';
import * as os from '@/os'; import * as os from '@/os';
@ -46,7 +46,7 @@ const emit = defineEmits<{
(ev: 'closed'): void; (ev: 'closed'): void;
}>(); }>();
let dialog: InstanceType<typeof XModalWindow> = $ref(); let dialog: InstanceType<typeof MkModalWindow> = $ref();
let username = $ref(''); let username = $ref('');
let email = $ref(''); let email = $ref('');

8
packages/frontend/src/components/MkFormDialog.vue
View file

@ -1,5 +1,5 @@
<template> <template>
<XModalWindow <MkModalWindow
ref="dialog" ref="dialog"
:width="450" :width="450"
:can-close="false" :can-close="false"
@ -51,7 +51,7 @@
</template> </template>
</div> </div>
</MkSpacer> </MkSpacer>
</XModalWindow> </MkModalWindow>
</template> </template>
<script lang="ts"> <script lang="ts">
@ -63,11 +63,11 @@ import FormSelect from './form/select.vue';
import FormRange from './form/range.vue'; import FormRange from './form/range.vue';
import MkButton from './MkButton.vue'; import MkButton from './MkButton.vue';
import FormRadios from './form/radios.vue'; import FormRadios from './form/radios.vue';
import XModalWindow from '@/components/MkModalWindow.vue'; import MkModalWindow from '@/components/MkModalWindow.vue';
export default defineComponent({ export default defineComponent({
components: { components: {
XModalWindow, MkModalWindow,
FormInput, FormInput,
FormTextarea, FormTextarea,
FormSwitch, FormSwitch,

1
packages/frontend/src/components/MkModal.vue
View file

@ -383,7 +383,6 @@ defineExpose({
mask-image: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 32px, rgba(0,0,0,1) calc(100% - 32px), rgba(0,0,0,0) 100%); mask-image: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 32px, rgba(0,0,0,1) calc(100% - 32px), rgba(0,0,0,0) 100%);
overflow: auto; overflow: auto;
display: flex; display: flex;
container-type: inline-size;
@media (max-width: 500px) { @media (max-width: 500px) {
padding: 16px; padding: 16px;

2
packages/frontend/src/components/MkModalPageWindow.vue
View file

@ -1,6 +1,6 @@
<template> <template>
<MkModal ref="modal" @click="$emit('click')" @closed="$emit('closed')"> <MkModal ref="modal" @click="$emit('click')" @closed="$emit('closed')">
<div ref="rootEl" class="hrmcaedk _narrow_" :style="{ width: `${width}px`, height: (height ? `min(${height}px, 100%)` : '100%') }"> <div ref="rootEl" class="hrmcaedk" :style="{ width: `${width}px`, height: (height ? `min(${height}px, 100%)` : '100%') }">
<div class="header" @contextmenu="onContextmenu"> <div class="header" @contextmenu="onContextmenu">
<button v-if="history.length > 0" v-tooltip="$ts.goBack" class="_button" @click="back()"><i class="ti ti-arrow-left"></i></button> <button v-if="history.length > 0" v-tooltip="$ts.goBack" class="_button" @click="back()"><i class="ti ti-arrow-left"></i></button>
<span v-else style="display: inline-block; width: 20px"></span> <span v-else style="display: inline-block; width: 20px"></span>

3
packages/frontend/src/components/MkModalWindow.vue
View file

@ -1,6 +1,6 @@
<template> <template>
<MkModal ref="modal" :prefer-type="'dialog'" @click="onBgClick" @closed="$emit('closed')"> <MkModal ref="modal" :prefer-type="'dialog'" @click="onBgClick" @closed="$emit('closed')">
<div ref="rootEl" class="ebkgoccj _narrow_" :style="{ width: `${width}px`, height: scroll ? (height ? `${height}px` : null) : (height ? `min(${height}px, 100%)` : '100%') }" @keydown="onKeydown"> <div ref="rootEl" class="ebkgoccj" :style="{ width: `${width}px`, height: scroll ? (height ? `${height}px` : null) : (height ? `min(${height}px, 100%)` : '100%') }" @keydown="onKeydown">
<div ref="headerEl" class="header"> <div ref="headerEl" class="header">
<button v-if="withOkButton" class="_button" @click="$emit('close')"><i class="ti ti-x"></i></button> <button v-if="withOkButton" class="_button" @click="$emit('close')"><i class="ti ti-x"></i></button>
<span class="title"> <span class="title">
@ -89,6 +89,7 @@ defineExpose({
display: flex; display: flex;
flex-direction: column; flex-direction: column;
contain: content; contain: content;
container-type: inline-size;
border-radius: var(--radius); border-radius: var(--radius);
--root-margin: 24px; --root-margin: 24px;

2
packages/frontend/src/components/MkNoteDetailed.vue
View file

@ -4,7 +4,7 @@
v-show="!isDeleted" v-show="!isDeleted"
ref="el" ref="el"
v-hotkey="keymap" v-hotkey="keymap"
class="lxwezrsl _block" class="lxwezrsl"
:tabindex="!isDeleted ? '-1' : null" :tabindex="!isDeleted ? '-1' : null"
:class="{ renote: isRenote }" :class="{ renote: isRenote }"
> >

10
packages/frontend/src/components/MkNotificationSettingWindow.vue
View file

@ -1,5 +1,5 @@
<template> <template>
<XModalWindow <MkModalWindow
ref="dialog" ref="dialog"
:width="400" :width="400"
:height="450" :height="450"
@ -21,7 +21,7 @@
</template> </template>
<template v-if="!useGlobalSetting"> <template v-if="!useGlobalSetting">
<MkInfo>{{ i18n.ts.notificationSettingDesc }}</MkInfo> <MkInfo>{{ i18n.ts.notificationSettingDesc }}</MkInfo>
<div style="display: flex; gap: var(--margin); flex-wrap: wrap;"> <div class="_buttons">
<MkButton inline @click="disableAll">{{ i18n.ts.disableAll }}</MkButton> <MkButton inline @click="disableAll">{{ i18n.ts.disableAll }}</MkButton>
<MkButton inline @click="enableAll">{{ i18n.ts.enableAll }}</MkButton> <MkButton inline @click="enableAll">{{ i18n.ts.enableAll }}</MkButton>
</div> </div>
@ -29,7 +29,7 @@
</template> </template>
</div> </div>
</MkSpacer> </MkSpacer>
</XModalWindow> </MkModalWindow>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
@ -38,7 +38,7 @@ import { notificationTypes } from 'misskey-js';
import MkSwitch from './form/switch.vue'; import MkSwitch from './form/switch.vue';
import MkInfo from './MkInfo.vue'; import MkInfo from './MkInfo.vue';
import MkButton from './MkButton.vue'; import MkButton from './MkButton.vue';
import XModalWindow from '@/components/MkModalWindow.vue'; import MkModalWindow from '@/components/MkModalWindow.vue';
import { i18n } from '@/i18n'; import { i18n } from '@/i18n';
const emit = defineEmits<{ const emit = defineEmits<{
@ -56,7 +56,7 @@ const props = withDefaults(defineProps<{
let includingTypes = $computed(() => props.includingTypes || []); let includingTypes = $computed(() => props.includingTypes || []);
const dialog = $shallowRef<InstanceType<typeof XModalWindow>>(); const dialog = $shallowRef<InstanceType<typeof MkModalWindow>>();
let typesMap = $ref<Record<typeof notificationTypes[number], boolean>>({}); let typesMap = $ref<Record<typeof notificationTypes[number], boolean>>({});
let useGlobalSetting = $ref((includingTypes === null || includingTypes.length === 0) && props.showGlobalToggle); let useGlobalSetting = $ref((includingTypes === null || includingTypes.length === 0) && props.showGlobalToggle);

2
packages/frontend/src/components/MkPagePreview.vue
View file

@ -1,5 +1,5 @@
<template> <template>
<MkA :to="`/@${page.user.username}/pages/${page.name}`" class="vhpxefrj _block" tabindex="-1"> <MkA :to="`/@${page.user.username}/pages/${page.name}`" class="vhpxefrj" tabindex="-1">
<div v-if="page.eyeCatchingImage" class="thumbnail" :style="`background-image: url('${page.eyeCatchingImage.thumbnailUrl}')`"></div> <div v-if="page.eyeCatchingImage" class="thumbnail" :style="`background-image: url('${page.eyeCatchingImage.thumbnailUrl}')`"></div>
<article> <article>
<header> <header>

2
packages/frontend/src/components/MkRemoteCaution.vue
View file

@ -1,5 +1,5 @@
<template> <template>
<div class="jmgmzlwq _block"><i class="ti ti-alert-triangle" style="margin-right: 8px;"></i>{{ i18n.ts.remoteUserCaution }}<a class="link" :href="href" rel="nofollow noopener" target="_blank">{{ i18n.ts.showOnRemote }}</a></div> <div class="jmgmzlwq"><i class="ti ti-alert-triangle" style="margin-right: 8px;"></i>{{ i18n.ts.remoteUserCaution }}<a class="link" :href="href" rel="nofollow noopener" target="_blank">{{ i18n.ts.showOnRemote }}</a></div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>

8
packages/frontend/src/components/MkSample.vue
View file

@ -1,6 +1,6 @@
<template> <template>
<div class="_card"> <div class="">
<div class="_content"> <div class="">
<MkInput v-model="text"> <MkInput v-model="text">
<template #label>Text</template> <template #label>Text</template>
</MkInput> </MkInput>
@ -15,10 +15,10 @@
<MkButton inline>This is</MkButton> <MkButton inline>This is</MkButton>
<MkButton inline primary>the button</MkButton> <MkButton inline primary>the button</MkButton>
</div> </div>
<div class="_content" style="pointer-events: none;"> <div class="" style="pointer-events: none;">
<Mfm :text="mfm"/> <Mfm :text="mfm"/>
</div> </div>
<div class="_content"> <div class="">
<MkButton inline primary @click="openMenu">Open menu</MkButton> <MkButton inline primary @click="openMenu">Open menu</MkButton>
<MkButton inline primary @click="openDialog">Open dialog</MkButton> <MkButton inline primary @click="openDialog">Open dialog</MkButton>
<MkButton inline primary @click="openForm">Open form</MkButton> <MkButton inline primary @click="openForm">Open form</MkButton>

6
packages/frontend/src/components/MkSignin.vue
View file

@ -1,6 +1,6 @@
<template> <template>
<form class="eppvobhk _monolithic_" :class="{ signing, totpLogin }" @submit.prevent="onSubmit"> <form class="eppvobhk" :class="{ signing, totpLogin }" @submit.prevent="onSubmit">
<div class="auth _section _autoGap"> <div class="auth _autoGap">
<div v-show="withAvatar" class="avatar" :style="{ backgroundImage: user ? `url('${ user.avatarUrl }')` : null, marginBottom: message ? '1.5em' : null }"></div> <div v-show="withAvatar" class="avatar" :style="{ backgroundImage: user ? `url('${ user.avatarUrl }')` : null, marginBottom: message ? '1.5em' : null }"></div>
<MkInfo v-if="message"> <MkInfo v-if="message">
{{ message }} {{ message }}
@ -40,7 +40,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="social _section"> <div class="social">
<a v-if="meta && meta.enableTwitterIntegration" class="_borderButton _margin" :href="`${apiUrl}/signin/twitter`"><i class="ti ti-brand-twitter" style="margin-right: 4px;"></i>{{ $t('signinWith', { x: 'Twitter' }) }}</a> <a v-if="meta && meta.enableTwitterIntegration" class="_borderButton _margin" :href="`${apiUrl}/signin/twitter`"><i class="ti ti-brand-twitter" style="margin-right: 4px;"></i>{{ $t('signinWith', { x: 'Twitter' }) }}</a>
<a v-if="meta && meta.enableGithubIntegration" class="_borderButton _margin" :href="`${apiUrl}/signin/github`"><i class="ti ti-brand-github" style="margin-right: 4px;"></i>{{ $t('signinWith', { x: 'GitHub' }) }}</a> <a v-if="meta && meta.enableGithubIntegration" class="_borderButton _margin" :href="`${apiUrl}/signin/github`"><i class="ti ti-brand-github" style="margin-right: 4px;"></i>{{ $t('signinWith', { x: 'GitHub' }) }}</a>
<a v-if="meta && meta.enableDiscordIntegration" class="_borderButton _margin" :href="`${apiUrl}/signin/discord`"><i class="ti ti-brand-discord" style="margin-right: 4px;"></i>{{ $t('signinWith', { x: 'Discord' }) }}</a> <a v-if="meta && meta.enableDiscordIntegration" class="_borderButton _margin" :href="`${apiUrl}/signin/discord`"><i class="ti ti-brand-discord" style="margin-right: 4px;"></i>{{ $t('signinWith', { x: 'Discord' }) }}</a>

10
packages/frontend/src/components/MkSigninDialog.vue
View file

@ -1,5 +1,5 @@
<template> <template>
<XModalWindow <MkModalWindow
ref="dialog" ref="dialog"
:width="370" :width="370"
:height="400" :height="400"
@ -8,14 +8,16 @@
> >
<template #header>{{ i18n.ts.login }}</template> <template #header>{{ i18n.ts.login }}</template>
<MkSpacer :margin-min="20" :margin-max="28">
<MkSignin :auto-set="autoSet" :message="message" @login="onLogin"/> <MkSignin :auto-set="autoSet" :message="message" @login="onLogin"/>
</XModalWindow> </MkSpacer>
</MkModalWindow>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { } from 'vue'; import { } from 'vue';
import MkSignin from '@/components/MkSignin.vue'; import MkSignin from '@/components/MkSignin.vue';
import XModalWindow from '@/components/MkModalWindow.vue'; import MkModalWindow from '@/components/MkModalWindow.vue';
import { i18n } from '@/i18n'; import { i18n } from '@/i18n';
const props = withDefaults(defineProps<{ const props = withDefaults(defineProps<{
@ -32,7 +34,7 @@ const emit = defineEmits<{
(ev: 'cancelled'): void; (ev: 'cancelled'): void;
}>(); }>();
const dialog = $shallowRef<InstanceType<typeof XModalWindow>>(); const dialog = $shallowRef<InstanceType<typeof MkModalWindow>>();
function onClose() { function onClose() {
emit('cancelled'); emit('cancelled');

14
packages/frontend/src/components/MkSignupDialog.vue
View file

@ -1,5 +1,5 @@
<template> <template>
<XModalWindow <MkModalWindow
ref="dialog" ref="dialog"
:width="366" :width="366"
:height="500" :height="500"
@ -8,18 +8,16 @@
> >
<template #header>{{ i18n.ts.signup }}</template> <template #header>{{ i18n.ts.signup }}</template>
<div class="_monolithic_"> <MkSpacer :margin-min="20" :margin-max="28">
<div class="_section">
<XSignup :auto-set="autoSet" @signup="onSignup" @signup-email-pending="onSignupEmailPending"/> <XSignup :auto-set="autoSet" @signup="onSignup" @signup-email-pending="onSignupEmailPending"/>
</div> </MkSpacer>
</div> </MkModalWindow>
</XModalWindow>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { } from 'vue'; import { } from 'vue';
import XSignup from '@/components/MkSignup.vue'; import XSignup from '@/components/MkSignup.vue';
import XModalWindow from '@/components/MkModalWindow.vue'; import MkModalWindow from '@/components/MkModalWindow.vue';
import { i18n } from '@/i18n'; import { i18n } from '@/i18n';
const props = withDefaults(defineProps<{ const props = withDefaults(defineProps<{
@ -33,7 +31,7 @@ const emit = defineEmits<{
(ev: 'closed'): void; (ev: 'closed'): void;
}>(); }>();
const dialog = $shallowRef<InstanceType<typeof XModalWindow>>(); const dialog = $shallowRef<InstanceType<typeof MkModalWindow>>();
function onSignup(res) { function onSignup(res) {
emit('done', res); emit('done', res);

10
packages/frontend/src/components/MkTokenGenerateWindow.vue
View file

@ -1,5 +1,5 @@
<template> <template>
<XModalWindow <MkModalWindow
ref="dialog" ref="dialog"
:width="400" :width="400"
:height="450" :height="450"
@ -23,14 +23,14 @@
</MkInput> </MkInput>
</div> </div>
<div><b>{{ $ts.permission }}</b></div> <div><b>{{ $ts.permission }}</b></div>
<div style="display: flex; gap: var(--margin); flex-wrap: wrap;"> <div class="_buttons">
<MkButton inline @click="disableAll">{{ i18n.ts.disableAll }}</MkButton> <MkButton inline @click="disableAll">{{ i18n.ts.disableAll }}</MkButton>
<MkButton inline @click="enableAll">{{ i18n.ts.enableAll }}</MkButton> <MkButton inline @click="enableAll">{{ i18n.ts.enableAll }}</MkButton>
</div> </div>
<MkSwitch v-for="kind in (initialPermissions || kinds)" :key="kind" v-model="permissions[kind]">{{ $t(`_permissions.${kind}`) }}</MkSwitch> <MkSwitch v-for="kind in (initialPermissions || kinds)" :key="kind" v-model="permissions[kind]">{{ $t(`_permissions.${kind}`) }}</MkSwitch>
</div> </div>
</MkSpacer> </MkSpacer>
</XModalWindow> </MkModalWindow>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
@ -40,7 +40,7 @@ import MkInput from './form/input.vue';
import MkSwitch from './form/switch.vue'; import MkSwitch from './form/switch.vue';
import MkButton from './MkButton.vue'; import MkButton from './MkButton.vue';
import MkInfo from './MkInfo.vue'; import MkInfo from './MkInfo.vue';
import XModalWindow from '@/components/MkModalWindow.vue'; import MkModalWindow from '@/components/MkModalWindow.vue';
import { i18n } from '@/i18n'; import { i18n } from '@/i18n';
const props = withDefaults(defineProps<{ const props = withDefaults(defineProps<{
@ -60,7 +60,7 @@ const emit = defineEmits<{
(ev: 'done', result: { name: string | null, permissions: string[] }): void; (ev: 'done', result: { name: string | null, permissions: string[] }): void;
}>(); }>();
const dialog = $shallowRef<InstanceType<typeof XModalWindow>>(); const dialog = $shallowRef<InstanceType<typeof MkModalWindow>>();
let name = $ref(props.initialName); let name = $ref(props.initialName);
let permissions = $ref({}); let permissions = $ref({});

6
packages/frontend/src/components/MkUserSelectDialog.vue
View file

@ -1,5 +1,5 @@
<template> <template>
<XModalWindow <MkModalWindow
ref="dialogEl" ref="dialogEl"
:with-ok-button="true" :with-ok-button="true"
:ok-button-disabled="selected == null" :ok-button-disabled="selected == null"
@ -48,7 +48,7 @@
</div> </div>
</div> </div>
</div> </div>
</XModalWindow> </MkModalWindow>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
@ -56,7 +56,7 @@ import { nextTick, onMounted } from 'vue';
import * as misskey from 'misskey-js'; import * as misskey from 'misskey-js';
import MkInput from '@/components/form/input.vue'; import MkInput from '@/components/form/input.vue';
import FormSplit from '@/components/form/split.vue'; import FormSplit from '@/components/form/split.vue';
import XModalWindow from '@/components/MkModalWindow.vue'; import MkModalWindow from '@/components/MkModalWindow.vue';
import * as os from '@/os'; import * as os from '@/os';
import { defaultStore } from '@/store'; import { defaultStore } from '@/store';
import { i18n } from '@/i18n'; import { i18n } from '@/i18n';

2
packages/frontend/src/components/MkWindow.vue
View file

@ -1,7 +1,7 @@
<template> <template>
<Transition :name="$store.state.animation ? 'window' : ''" appear @after-leave="$emit('closed')"> <Transition :name="$store.state.animation ? 'window' : ''" appear @after-leave="$emit('closed')">
<div v-if="showing" ref="rootEl" class="ebkgocck" :class="{ maximized }"> <div v-if="showing" ref="rootEl" class="ebkgocck" :class="{ maximized }">
<div class="body _shadow _narrow_" @mousedown="onBodyMousedown" @keydown="onKeydown"> <div class="body _shadow" @mousedown="onBodyMousedown" @keydown="onKeydown">
<div class="header" :class="{ mini }" @contextmenu.prevent.stop="onContextmenu"> <div class="header" :class="{ mini }" @contextmenu.prevent.stop="onContextmenu">
<span class="left"> <span class="left">
<button v-for="button in buttonsLeft" v-tooltip="button.title" class="button _button" :class="{ highlighted: button.highlighted }" @click="button.onClick"><i :class="button.icon"></i></button> <button v-for="button in buttonsLeft" v-tooltip="button.title" class="button _button" :class="{ highlighted: button.highlighted }" @click="button.onClick"><i :class="button.icon"></i></button>

4
packages/frontend/src/pages/admin/abuses.vue
View file

@ -3,8 +3,8 @@
<template #header><XHeader :actions="headerActions" :tabs="headerTabs"/></template> <template #header><XHeader :actions="headerActions" :tabs="headerTabs"/></template>
<MkSpacer :content-max="900"> <MkSpacer :content-max="900">
<div class="lcixvhis"> <div class="lcixvhis">
<div class="_section reports"> <div class="reports">
<div class="_content"> <div class="">
<div class="inputs" style="display: flex;"> <div class="inputs" style="display: flex;">
<MkSelect v-model="state" style="margin: 0; flex: 1;"> <MkSelect v-model="state" style="margin: 0; flex: 1;">
<template #label>{{ i18n.ts.state }}</template> <template #label>{{ i18n.ts.state }}</template>

10
packages/frontend/src/pages/admin/announcements.vue
View file

@ -2,9 +2,9 @@
<MkStickyContainer> <MkStickyContainer>
<template #header><XHeader :actions="headerActions" :tabs="headerTabs"/></template> <template #header><XHeader :actions="headerActions" :tabs="headerTabs"/></template>
<MkSpacer :content-max="900"> <MkSpacer :content-max="900">
<div class="ztgjmzrw"> <div class="ztgjmzrw _autoGap">
<section v-for="announcement in announcements" class="_card _margin announcements"> <section v-for="announcement in announcements" class="">
<div class="_content announcement"> <div class="_panel _autoGap" style="padding: 24px;">
<MkInput v-model="announcement.title"> <MkInput v-model="announcement.title">
<template #label>{{ i18n.ts.title }}</template> <template #label>{{ i18n.ts.title }}</template>
</MkInput> </MkInput>
@ -15,9 +15,9 @@
<template #label>{{ i18n.ts.imageUrl }}</template> <template #label>{{ i18n.ts.imageUrl }}</template>
</MkInput> </MkInput>
<p v-if="announcement.reads">{{ i18n.t('nUsersRead', { n: announcement.reads }) }}</p> <p v-if="announcement.reads">{{ i18n.t('nUsersRead', { n: announcement.reads }) }}</p>
<div class="buttons"> <div class="buttons _buttons">
<MkButton class="button" inline primary @click="save(announcement)"><i class="ti ti-device-floppy"></i> {{ i18n.ts.save }}</MkButton> <MkButton class="button" inline primary @click="save(announcement)"><i class="ti ti-device-floppy"></i> {{ i18n.ts.save }}</MkButton>
<MkButton class="button" inline @click="remove(announcement)"><i class="ti ti-trash"></i> {{ i18n.ts.remove }}</MkButton> <MkButton class="button" inline danger @click="remove(announcement)"><i class="ti ti-trash"></i> {{ i18n.ts.remove }}</MkButton>
</div> </div>
</div> </div>
</section> </section>

4
packages/frontend/src/pages/admin/bot-protection.vue
View file

@ -52,7 +52,7 @@
</FormSlot> </FormSlot>
</template> </template>
<FormButton primary @click="save"><i class="ti ti-device-floppy"></i> {{ i18n.ts.save }}</FormButton> <MkButton primary @click="save"><i class="ti ti-device-floppy"></i> {{ i18n.ts.save }}</MkButton>
</div> </div>
</FormSuspense> </FormSuspense>
</div> </div>
@ -62,7 +62,7 @@
import { defineAsyncComponent } from 'vue'; import { defineAsyncComponent } from 'vue';
import FormRadios from '@/components/form/radios.vue'; import FormRadios from '@/components/form/radios.vue';
import FormInput from '@/components/form/input.vue'; import FormInput from '@/components/form/input.vue';
import FormButton from '@/components/MkButton.vue'; import MkButton from '@/components/MkButton.vue';
import FormSuspense from '@/components/form/suspense.vue'; import FormSuspense from '@/components/form/suspense.vue';
import FormSlot from '@/components/form/slot.vue'; import FormSlot from '@/components/form/slot.vue';
import * as os from '@/os'; import * as os from '@/os';

6
packages/frontend/src/pages/admin/emoji-edit-dialog.vue
View file

@ -1,5 +1,5 @@
<template> <template>
<XModalWindow <MkModalWindow
ref="dialog" ref="dialog"
:width="370" :width="370"
:with-ok-button="true" :with-ok-button="true"
@ -25,12 +25,12 @@
<MkButton danger @click="del()"><i class="ti ti-trash"></i> {{ i18n.ts.delete }}</MkButton> <MkButton danger @click="del()"><i class="ti ti-trash"></i> {{ i18n.ts.delete }}</MkButton>
</div> </div>
</MkSpacer> </MkSpacer>
</XModalWindow> </MkModalWindow>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { } from 'vue'; import { } from 'vue';
import XModalWindow from '@/components/MkModalWindow.vue'; import MkModalWindow from '@/components/MkModalWindow.vue';
import MkButton from '@/components/MkButton.vue'; import MkButton from '@/components/MkButton.vue';
import MkInput from '@/components/form/input.vue'; import MkInput from '@/components/form/input.vue';
import * as os from '@/os'; import * as os from '@/os';

2
packages/frontend/src/pages/admin/emojis.vue
View file

@ -12,7 +12,7 @@
<MkSwitch v-model="selectMode" style="margin: 8px 0;"> <MkSwitch v-model="selectMode" style="margin: 8px 0;">
<template #label>Select mode</template> <template #label>Select mode</template>
</MkSwitch> </MkSwitch>
<div v-if="selectMode" style="display: flex; gap: var(--margin); flex-wrap: wrap;"> <div v-if="selectMode" class="_buttons">
<MkButton inline @click="selectAll">Select all</MkButton> <MkButton inline @click="selectAll">Select all</MkButton>
<MkButton inline @click="setCategoryBulk">Set category</MkButton> <MkButton inline @click="setCategoryBulk">Set category</MkButton>
<MkButton inline @click="addTagBulk">Add tag</MkButton> <MkButton inline @click="addTagBulk">Add tag</MkButton>

4
packages/frontend/src/pages/admin/instance-block.vue
View file

@ -8,7 +8,7 @@
<template #caption>{{ i18n.ts.blockedInstancesDescription }}</template> <template #caption>{{ i18n.ts.blockedInstancesDescription }}</template>
</FormTextarea> </FormTextarea>
<FormButton primary @click="save"><i class="ti ti-device-floppy"></i> {{ i18n.ts.save }}</FormButton> <MkButton primary @click="save"><i class="ti ti-device-floppy"></i> {{ i18n.ts.save }}</MkButton>
</FormSuspense> </FormSuspense>
</MkSpacer> </MkSpacer>
</MkStickyContainer> </MkStickyContainer>
@ -17,7 +17,7 @@
<script lang="ts" setup> <script lang="ts" setup>
import { } from 'vue'; import { } from 'vue';
import XHeader from './_header_.vue'; import XHeader from './_header_.vue';
import FormButton from '@/components/MkButton.vue'; import MkButton from '@/components/MkButton.vue';
import FormTextarea from '@/components/form/textarea.vue'; import FormTextarea from '@/components/form/textarea.vue';
import FormSuspense from '@/components/form/suspense.vue'; import FormSuspense from '@/components/form/suspense.vue';
import * as os from '@/os'; import * as os from '@/os';

4
packages/frontend/src/pages/admin/integrations.discord.vue
View file

@ -19,7 +19,7 @@
</FormInput> </FormInput>
</template> </template>
<FormButton primary @click="save"><i class="ti ti-device-floppy"></i> {{ i18n.ts.save }}</FormButton> <MkButton primary @click="save"><i class="ti ti-device-floppy"></i> {{ i18n.ts.save }}</MkButton>
</div> </div>
</FormSuspense> </FormSuspense>
</template> </template>
@ -28,7 +28,7 @@
import { } from 'vue'; import { } from 'vue';
import FormSwitch from '@/components/form/switch.vue'; import FormSwitch from '@/components/form/switch.vue';
import FormInput from '@/components/form/input.vue'; import FormInput from '@/components/form/input.vue';
import FormButton from '@/components/MkButton.vue'; import MkButton from '@/components/MkButton.vue';
import FormInfo from '@/components/MkInfo.vue'; import FormInfo from '@/components/MkInfo.vue';
import FormSuspense from '@/components/form/suspense.vue'; import FormSuspense from '@/components/form/suspense.vue';
import * as os from '@/os'; import * as os from '@/os';

4
packages/frontend/src/pages/admin/integrations.github.vue
View file

@ -19,7 +19,7 @@
</FormInput> </FormInput>
</template> </template>
<FormButton primary @click="save"><i class="ti ti-device-floppy"></i> {{ i18n.ts.save }}</FormButton> <MkButton primary @click="save"><i class="ti ti-device-floppy"></i> {{ i18n.ts.save }}</MkButton>
</div> </div>
</FormSuspense> </FormSuspense>
</template> </template>
@ -28,7 +28,7 @@
import { } from 'vue'; import { } from 'vue';
import FormSwitch from '@/components/form/switch.vue'; import FormSwitch from '@/components/form/switch.vue';
import FormInput from '@/components/form/input.vue'; import FormInput from '@/components/form/input.vue';
import FormButton from '@/components/MkButton.vue'; import MkButton from '@/components/MkButton.vue';
import FormInfo from '@/components/MkInfo.vue'; import FormInfo from '@/components/MkInfo.vue';
import FormSuspense from '@/components/form/suspense.vue'; import FormSuspense from '@/components/form/suspense.vue';
import * as os from '@/os'; import * as os from '@/os';

4
packages/frontend/src/pages/admin/integrations.twitter.vue
View file

@ -19,7 +19,7 @@
</FormInput> </FormInput>
</template> </template>
<FormButton primary @click="save"><i class="ti ti-device-floppy"></i> {{ i18n.ts.save }}</FormButton> <MkButton primary @click="save"><i class="ti ti-device-floppy"></i> {{ i18n.ts.save }}</MkButton>
</div> </div>
</FormSuspense> </FormSuspense>
</template> </template>
@ -28,7 +28,7 @@
import { defineComponent } from 'vue'; import { defineComponent } from 'vue';
import FormSwitch from '@/components/form/switch.vue'; import FormSwitch from '@/components/form/switch.vue';
import FormInput from '@/components/form/input.vue'; import FormInput from '@/components/form/input.vue';
import FormButton from '@/components/MkButton.vue'; import MkButton from '@/components/MkButton.vue';
import FormInfo from '@/components/MkInfo.vue'; import FormInfo from '@/components/MkInfo.vue';
import FormSuspense from '@/components/form/suspense.vue'; import FormSuspense from '@/components/form/suspense.vue';
import * as os from '@/os'; import * as os from '@/os';

4
packages/frontend/src/pages/admin/proxy-account.vue
View file

@ -9,7 +9,7 @@
<template #value>{{ proxyAccount ? `@${proxyAccount.username}` : i18n.ts.none }}</template> <template #value>{{ proxyAccount ? `@${proxyAccount.username}` : i18n.ts.none }}</template>
</MkKeyValue> </MkKeyValue>
<FormButton primary @click="chooseProxyAccount">{{ i18n.ts.selectAccount }}</FormButton> <MkButton primary @click="chooseProxyAccount">{{ i18n.ts.selectAccount }}</MkButton>
</FormSuspense> </FormSuspense>
</MkSpacer> </MkSpacer>
</MkStickyContainer> </MkStickyContainer>
@ -18,7 +18,7 @@
<script lang="ts" setup> <script lang="ts" setup>
import { } from 'vue'; import { } from 'vue';
import MkKeyValue from '@/components/MkKeyValue.vue'; import MkKeyValue from '@/components/MkKeyValue.vue';
import FormButton from '@/components/MkButton.vue'; import MkButton from '@/components/MkButton.vue';
import MkInfo from '@/components/MkInfo.vue'; import MkInfo from '@/components/MkInfo.vue';
import FormSuspense from '@/components/form/suspense.vue'; import FormSuspense from '@/components/form/suspense.vue';
import * as os from '@/os'; import * as os from '@/os';

2
packages/frontend/src/pages/admin/relays.vue
View file

@ -2,7 +2,7 @@
<MkStickyContainer> <MkStickyContainer>
<template #header><XHeader :actions="headerActions" :tabs="headerTabs"/></template> <template #header><XHeader :actions="headerActions" :tabs="headerTabs"/></template>
<MkSpacer :content-max="800"> <MkSpacer :content-max="800">
<div v-for="relay in relays" :key="relay.inbox" class="relaycxt _panel _block" style="padding: 16px;"> <div v-for="relay in relays" :key="relay.inbox" class="relaycxt _panel" style="padding: 16px;">
<div>{{ relay.inbox }}</div> <div>{{ relay.inbox }}</div>
<div class="status"> <div class="status">
<i v-if="relay.status === 'accepted'" class="ti ti-check icon accepted"></i> <i v-if="relay.status === 'accepted'" class="ti ti-check icon accepted"></i>

6
packages/frontend/src/pages/admin/security.vue
View file

@ -54,7 +54,7 @@
</FormSwitch> </FormSwitch>
--> -->
<FormButton primary @click="save"><i class="ti ti-device-floppy"></i> {{ i18n.ts.save }}</FormButton> <MkButton primary @click="save"><i class="ti ti-device-floppy"></i> {{ i18n.ts.save }}</MkButton>
</div> </div>
</FormFolder> </FormFolder>
@ -92,7 +92,7 @@
<template #label>Summaly Proxy URL</template> <template #label>Summaly Proxy URL</template>
</FormInput> </FormInput>
<FormButton primary @click="save"><i class="ti ti-device-floppy"></i> {{ i18n.ts.save }}</FormButton> <MkButton primary @click="save"><i class="ti ti-device-floppy"></i> {{ i18n.ts.save }}</MkButton>
</div> </div>
</FormFolder> </FormFolder>
</div> </div>
@ -112,7 +112,7 @@ import FormInfo from '@/components/MkInfo.vue';
import FormSuspense from '@/components/form/suspense.vue'; import FormSuspense from '@/components/form/suspense.vue';
import FormRange from '@/components/form/range.vue'; import FormRange from '@/components/form/range.vue';
import FormInput from '@/components/form/input.vue'; import FormInput from '@/components/form/input.vue';
import FormButton from '@/components/MkButton.vue'; import MkButton from '@/components/MkButton.vue';
import * as os from '@/os'; import * as os from '@/os';
import { fetchInstance } from '@/instance'; import { fetchInstance } from '@/instance';
import { i18n } from '@/i18n'; import { i18n } from '@/i18n';

23
packages/frontend/src/pages/announcements.vue
View file

@ -2,14 +2,14 @@
<MkStickyContainer> <MkStickyContainer>
<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template> <template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template>
<MkSpacer :content-max="800"> <MkSpacer :content-max="800">
<MkPagination v-slot="{items}" :pagination="pagination" class="ruryvtyk _content"> <MkPagination v-slot="{items}" :pagination="pagination" class="ruryvtyk _autoGap">
<section v-for="(announcement, i) in items" :key="announcement.id" class="_card announcement"> <section v-for="(announcement, i) in items" :key="announcement.id" class="announcement _panel">
<div class="_title"><span v-if="$i && !announcement.isRead">🆕 </span>{{ announcement.title }}</div> <div class="header"><span v-if="$i && !announcement.isRead">🆕 </span>{{ announcement.title }}</div>
<div class="_content"> <div class="content">
<Mfm :text="announcement.text"/> <Mfm :text="announcement.text"/>
<img v-if="announcement.imageUrl" :src="announcement.imageUrl"/> <img v-if="announcement.imageUrl" :src="announcement.imageUrl"/>
</div> </div>
<div v-if="$i && !announcement.isRead" class="_footer"> <div v-if="$i && !announcement.isRead" class="footer">
<MkButton primary @click="read(items, announcement, i)"><i class="ti ti-check"></i> {{ $ts.gotIt }}</MkButton> <MkButton primary @click="read(items, announcement, i)"><i class="ti ti-check"></i> {{ $ts.gotIt }}</MkButton>
</div> </div>
</section> </section>
@ -53,17 +53,24 @@ definePageMetadata({
<style lang="scss" scoped> <style lang="scss" scoped>
.ruryvtyk { .ruryvtyk {
> .announcement { > .announcement {
&:not(:last-child) { > .header {
margin-bottom: var(--margin); padding: 16px;
font-weight: bold;
} }
> ._content { > .content {
padding: 0 16px;
> img { > img {
display: block; display: block;
max-height: 300px; max-height: 300px;
max-width: 100%; max-width: 100%;
} }
} }
> .footer {
padding: 16px;
}
} }
} }
</style> </style>

2
packages/frontend/src/pages/antenna-timeline.vue
View file

@ -3,7 +3,7 @@
<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template> <template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template>
<div ref="rootEl" v-hotkey.global="keymap" class="tqmomfks"> <div ref="rootEl" v-hotkey.global="keymap" class="tqmomfks">
<div v-if="queue > 0" class="new"><button class="_buttonPrimary" @click="top()">{{ $ts.newNoteRecived }}</button></div> <div v-if="queue > 0" class="new"><button class="_buttonPrimary" @click="top()">{{ $ts.newNoteRecived }}</button></div>
<div class="tl _block"> <div class="tl">
<XTimeline <XTimeline
ref="tlEl" :key="antennaId" ref="tlEl" :key="antennaId"
class="tl" class="tl"

10
packages/frontend/src/pages/auth.form.vue
View file

@ -1,18 +1,18 @@
<template> <template>
<section class="_section"> <section class="">
<div class="_title">{{ $t('_auth.shareAccess', { name: app.name }) }}</div> <div class="">{{ $t('_auth.shareAccess', { name: app.name }) }}</div>
<div class="_content"> <div class="">
<h2>{{ app.name }}</h2> <h2>{{ app.name }}</h2>
<p class="id">{{ app.id }}</p> <p class="id">{{ app.id }}</p>
<p class="description">{{ app.description }}</p> <p class="description">{{ app.description }}</p>
</div> </div>
<div class="_content"> <div class="">
<h2>{{ $ts._auth.permissionAsk }}</h2> <h2>{{ $ts._auth.permissionAsk }}</h2>
<ul> <ul>
<li v-for="p in app.permission" :key="p">{{ $t(`_permissions.${p}`) }}</li> <li v-for="p in app.permission" :key="p">{{ $t(`_permissions.${p}`) }}</li>
</ul> </ul>
</div> </div>
<div class="_footer"> <div class="">
<MkButton inline @click="cancel">{{ $ts.cancel }}</MkButton> <MkButton inline @click="cancel">{{ $ts.cancel }}</MkButton>
<MkButton inline primary @click="accept">{{ $ts.accept }}</MkButton> <MkButton inline primary @click="accept">{{ $ts.accept }}</MkButton>
</div> </div>

6
packages/frontend/src/pages/channels.vue
View file

@ -2,17 +2,17 @@
<MkStickyContainer> <MkStickyContainer>
<template #header><MkPageHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs"/></template> <template #header><MkPageHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs"/></template>
<MkSpacer :content-max="700"> <MkSpacer :content-max="700">
<div v-if="tab === 'featured'" class="_content grwlizim featured"> <div v-if="tab === 'featured'" class="grwlizim featured">
<MkPagination v-slot="{items}" :pagination="featuredPagination"> <MkPagination v-slot="{items}" :pagination="featuredPagination">
<MkChannelPreview v-for="channel in items" :key="channel.id" class="_margin" :channel="channel"/> <MkChannelPreview v-for="channel in items" :key="channel.id" class="_margin" :channel="channel"/>
</MkPagination> </MkPagination>
</div> </div>
<div v-else-if="tab === 'following'" class="_content grwlizim following"> <div v-else-if="tab === 'following'" class="grwlizim following">
<MkPagination v-slot="{items}" :pagination="followingPagination"> <MkPagination v-slot="{items}" :pagination="followingPagination">
<MkChannelPreview v-for="channel in items" :key="channel.id" class="_margin" :channel="channel"/> <MkChannelPreview v-for="channel in items" :key="channel.id" class="_margin" :channel="channel"/>
</MkPagination> </MkPagination>
</div> </div>
<div v-else-if="tab === 'owned'" class="_content grwlizim owned"> <div v-else-if="tab === 'owned'" class="grwlizim owned">
<MkButton class="new" @click="create()"><i class="ti ti-plus"></i></MkButton> <MkButton class="new" @click="create()"><i class="ti ti-plus"></i></MkButton>
<MkPagination v-slot="{items}" :pagination="ownedPagination"> <MkPagination v-slot="{items}" :pagination="ownedPagination">
<MkChannelPreview v-for="channel in items" :key="channel.id" class="_margin" :channel="channel"/> <MkChannelPreview v-for="channel in items" :key="channel.id" class="_margin" :channel="channel"/>

2
packages/frontend/src/pages/flash/flash-edit.vue
View file

@ -12,7 +12,7 @@
<MkTextarea v-model="script" class="_monospace" tall spellcheck="false"> <MkTextarea v-model="script" class="_monospace" tall spellcheck="false">
<template #label>{{ i18n.ts._play.script }}</template> <template #label>{{ i18n.ts._play.script }}</template>
</MkTextarea> </MkTextarea>
<div style="display: flex; gap: var(--margin); flex-wrap: wrap;"> <div class="_buttons">
<MkButton primary @click="save"><i class="ti ti-check"></i> {{ i18n.ts.save }}</MkButton> <MkButton primary @click="save"><i class="ti ti-check"></i> {{ i18n.ts.save }}</MkButton>
<MkButton @click="show"><i class="ti ti-eye"></i> {{ i18n.ts.show }}</MkButton> <MkButton @click="show"><i class="ti ti-eye"></i> {{ i18n.ts.show }}</MkButton>
</div> </div>

10
packages/frontend/src/pages/gallery/edit.vue
View file

@ -16,15 +16,15 @@
<div class="name">{{ file.name }}</div> <div class="name">{{ file.name }}</div>
<button v-tooltip="i18n.ts.remove" class="remove _button" @click="remove(file)"><i class="ti ti-x"></i></button> <button v-tooltip="i18n.ts.remove" class="remove _button" @click="remove(file)"><i class="ti ti-x"></i></button>
</div> </div>
<FormButton primary @click="selectFile"><i class="ti ti-plus"></i> {{ i18n.ts.attachFile }}</FormButton> <MkButton primary @click="selectFile"><i class="ti ti-plus"></i> {{ i18n.ts.attachFile }}</MkButton>
</div> </div>
<FormSwitch v-model="isSensitive">{{ i18n.ts.markAsSensitive }}</FormSwitch> <FormSwitch v-model="isSensitive">{{ i18n.ts.markAsSensitive }}</FormSwitch>
<FormButton v-if="postId" primary @click="save"><i class="ti ti-device-floppy"></i> {{ i18n.ts.save }}</FormButton> <MkButton v-if="postId" primary @click="save"><i class="ti ti-device-floppy"></i> {{ i18n.ts.save }}</MkButton>
<FormButton v-else primary @click="save"><i class="ti ti-device-floppy"></i> {{ i18n.ts.publish }}</FormButton> <MkButton v-else primary @click="save"><i class="ti ti-device-floppy"></i> {{ i18n.ts.publish }}</MkButton>
<FormButton v-if="postId" danger @click="del"><i class="ti ti-trash"></i> {{ i18n.ts.delete }}</FormButton> <MkButton v-if="postId" danger @click="del"><i class="ti ti-trash"></i> {{ i18n.ts.delete }}</MkButton>
</FormSuspense> </FormSuspense>
</MkSpacer> </MkSpacer>
</MkStickyContainer> </MkStickyContainer>
@ -32,7 +32,7 @@
<script lang="ts" setup> <script lang="ts" setup>
import { computed, inject, watch } from 'vue'; import { computed, inject, watch } from 'vue';
import FormButton from '@/components/MkButton.vue'; import MkButton from '@/components/MkButton.vue';
import FormInput from '@/components/form/input.vue'; import FormInput from '@/components/form/input.vue';
import FormTextarea from '@/components/form/textarea.vue'; import FormTextarea from '@/components/form/textarea.vue';
import FormSwitch from '@/components/form/switch.vue'; import FormSwitch from '@/components/form/switch.vue';

2
packages/frontend/src/pages/gallery/post.vue
View file

@ -10,7 +10,7 @@
<img :src="file.url"/> <img :src="file.url"/>
</div> </div>
</div> </div>
<div class="body _block"> <div class="body">
<div class="title">{{ post.title }}</div> <div class="title">{{ post.title }}</div>
<div class="description"><Mfm :text="post.description"/></div> <div class="description"><Mfm :text="post.description"/></div>
<div class="info"> <div class="info">

2
packages/frontend/src/pages/messaging/index.vue
View file

@ -10,7 +10,7 @@
v-for="(message, i) in messages" v-for="(message, i) in messages"
:key="message.id" :key="message.id"
v-anim="i" v-anim="i"
class="message _block" class="message"
:class="{ isMe: isMe(message), isRead: message.groupId ? message.reads.includes($i.id) : message.isRead }" :class="{ isMe: isMe(message), isRead: message.groupId ? message.reads.includes($i.id) : message.isRead }"
:to="message.groupId ? `/my/messaging/group/${message.groupId}` : `/my/messaging/${getAcct(isMe(message) ? message.recipient : message.user)}`" :to="message.groupId ? `/my/messaging/group/${message.groupId}` : `/my/messaging/${getAcct(isMe(message) ? message.recipient : message.user)}`"
:data-index="i" :data-index="i"

2
packages/frontend/src/pages/messaging/messaging-room.form.vue
View file

@ -1,6 +1,6 @@
<template> <template>
<div <div
class="pemppnzi _block" class="pemppnzi"
@dragover.stop="onDragover" @dragover.stop="onDragover"
@drop.stop="onDrop" @drop.stop="onDrop"
> >

4
packages/frontend/src/pages/messaging/messaging-room.vue
View file

@ -1,11 +1,11 @@
<template> <template>
<div <div
ref="rootEl" ref="rootEl"
class="_section" class=""
@dragover.prevent.stop="onDragover" @dragover.prevent.stop="onDragover"
@drop.prevent.stop="onDrop" @drop.prevent.stop="onDrop"
> >
<div class="_content mk-messaging-room"> <div class="mk-messaging-room">
<div class="body"> <div class="body">
<MkPagination v-if="pagination" ref="pagingComponent" :key="userAcct || groupId" :pagination="pagination"> <MkPagination v-if="pagination" ref="pagingComponent" :key="userAcct || groupId" :pagination="pagination">
<template #empty> <template #empty>

60
packages/frontend/src/pages/mfm-cheat-sheet.vue
View file

@ -4,7 +4,7 @@
<MkSpacer :content-max="800"> <MkSpacer :content-max="800">
<div class="mwysmxbg"> <div class="mwysmxbg">
<div>{{ i18n.ts._mfm.intro }}</div> <div>{{ i18n.ts._mfm.intro }}</div>
<div class="section _block"> <div class="section">
<div class="title">{{ i18n.ts._mfm.mention }}</div> <div class="title">{{ i18n.ts._mfm.mention }}</div>
<div class="content"> <div class="content">
<p>{{ i18n.ts._mfm.mentionDescription }}</p> <p>{{ i18n.ts._mfm.mentionDescription }}</p>
@ -14,7 +14,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="section _block"> <div class="section">
<div class="title">{{ i18n.ts._mfm.hashtag }}</div> <div class="title">{{ i18n.ts._mfm.hashtag }}</div>
<div class="content"> <div class="content">
<p>{{ i18n.ts._mfm.hashtagDescription }}</p> <p>{{ i18n.ts._mfm.hashtagDescription }}</p>
@ -24,7 +24,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="section _block"> <div class="section">
<div class="title">{{ i18n.ts._mfm.url }}</div> <div class="title">{{ i18n.ts._mfm.url }}</div>
<div class="content"> <div class="content">
<p>{{ i18n.ts._mfm.urlDescription }}</p> <p>{{ i18n.ts._mfm.urlDescription }}</p>
@ -34,7 +34,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="section _block"> <div class="section">
<div class="title">{{ i18n.ts._mfm.link }}</div> <div class="title">{{ i18n.ts._mfm.link }}</div>
<div class="content"> <div class="content">
<p>{{ i18n.ts._mfm.linkDescription }}</p> <p>{{ i18n.ts._mfm.linkDescription }}</p>
@ -44,7 +44,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="section _block"> <div class="section">
<div class="title">{{ i18n.ts._mfm.emoji }}</div> <div class="title">{{ i18n.ts._mfm.emoji }}</div>
<div class="content"> <div class="content">
<p>{{ i18n.ts._mfm.emojiDescription }}</p> <p>{{ i18n.ts._mfm.emojiDescription }}</p>
@ -54,7 +54,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="section _block"> <div class="section">
<div class="title">{{ i18n.ts._mfm.bold }}</div> <div class="title">{{ i18n.ts._mfm.bold }}</div>
<div class="content"> <div class="content">
<p>{{ i18n.ts._mfm.boldDescription }}</p> <p>{{ i18n.ts._mfm.boldDescription }}</p>
@ -64,7 +64,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="section _block"> <div class="section">
<div class="title">{{ i18n.ts._mfm.small }}</div> <div class="title">{{ i18n.ts._mfm.small }}</div>
<div class="content"> <div class="content">
<p>{{ i18n.ts._mfm.smallDescription }}</p> <p>{{ i18n.ts._mfm.smallDescription }}</p>
@ -74,7 +74,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="section _block"> <div class="section">
<div class="title">{{ i18n.ts._mfm.quote }}</div> <div class="title">{{ i18n.ts._mfm.quote }}</div>
<div class="content"> <div class="content">
<p>{{ i18n.ts._mfm.quoteDescription }}</p> <p>{{ i18n.ts._mfm.quoteDescription }}</p>
@ -84,7 +84,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="section _block"> <div class="section">
<div class="title">{{ i18n.ts._mfm.center }}</div> <div class="title">{{ i18n.ts._mfm.center }}</div>
<div class="content"> <div class="content">
<p>{{ i18n.ts._mfm.centerDescription }}</p> <p>{{ i18n.ts._mfm.centerDescription }}</p>
@ -94,7 +94,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="section _block"> <div class="section">
<div class="title">{{ i18n.ts._mfm.inlineCode }}</div> <div class="title">{{ i18n.ts._mfm.inlineCode }}</div>
<div class="content"> <div class="content">
<p>{{ i18n.ts._mfm.inlineCodeDescription }}</p> <p>{{ i18n.ts._mfm.inlineCodeDescription }}</p>
@ -104,7 +104,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="section _block"> <div class="section">
<div class="title">{{ i18n.ts._mfm.blockCode }}</div> <div class="title">{{ i18n.ts._mfm.blockCode }}</div>
<div class="content"> <div class="content">
<p>{{ i18n.ts._mfm.blockCodeDescription }}</p> <p>{{ i18n.ts._mfm.blockCodeDescription }}</p>
@ -114,7 +114,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="section _block"> <div class="section">
<div class="title">{{ i18n.ts._mfm.inlineMath }}</div> <div class="title">{{ i18n.ts._mfm.inlineMath }}</div>
<div class="content"> <div class="content">
<p>{{ i18n.ts._mfm.inlineMathDescription }}</p> <p>{{ i18n.ts._mfm.inlineMathDescription }}</p>
@ -125,7 +125,7 @@
</div> </div>
</div> </div>
<!-- deprecated <!-- deprecated
<div class="section _block"> <div class="section">
<div class="title">{{ i18n.ts._mfm.search }}</div> <div class="title">{{ i18n.ts._mfm.search }}</div>
<div class="content"> <div class="content">
<p>{{ i18n.ts._mfm.searchDescription }}</p> <p>{{ i18n.ts._mfm.searchDescription }}</p>
@ -136,7 +136,7 @@
</div> </div>
</div> </div>
--> -->
<div class="section _block"> <div class="section">
<div class="title">{{ i18n.ts._mfm.flip }}</div> <div class="title">{{ i18n.ts._mfm.flip }}</div>
<div class="content"> <div class="content">
<p>{{ i18n.ts._mfm.flipDescription }}</p> <p>{{ i18n.ts._mfm.flipDescription }}</p>
@ -146,7 +146,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="section _block"> <div class="section">
<div class="title">{{ i18n.ts._mfm.font }}</div> <div class="title">{{ i18n.ts._mfm.font }}</div>
<div class="content"> <div class="content">
<p>{{ i18n.ts._mfm.fontDescription }}</p> <p>{{ i18n.ts._mfm.fontDescription }}</p>
@ -156,7 +156,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="section _block"> <div class="section">
<div class="title">{{ i18n.ts._mfm.x2 }}</div> <div class="title">{{ i18n.ts._mfm.x2 }}</div>
<div class="content"> <div class="content">
<p>{{ i18n.ts._mfm.x2Description }}</p> <p>{{ i18n.ts._mfm.x2Description }}</p>
@ -166,7 +166,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="section _block"> <div class="section">
<div class="title">{{ i18n.ts._mfm.x3 }}</div> <div class="title">{{ i18n.ts._mfm.x3 }}</div>
<div class="content"> <div class="content">
<p>{{ i18n.ts._mfm.x3Description }}</p> <p>{{ i18n.ts._mfm.x3Description }}</p>
@ -176,7 +176,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="section _block"> <div class="section">
<div class="title">{{ i18n.ts._mfm.x4 }}</div> <div class="title">{{ i18n.ts._mfm.x4 }}</div>
<div class="content"> <div class="content">
<p>{{ i18n.ts._mfm.x4Description }}</p> <p>{{ i18n.ts._mfm.x4Description }}</p>
@ -186,7 +186,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="section _block"> <div class="section">
<div class="title">{{ i18n.ts._mfm.blur }}</div> <div class="title">{{ i18n.ts._mfm.blur }}</div>
<div class="content"> <div class="content">
<p>{{ i18n.ts._mfm.blurDescription }}</p> <p>{{ i18n.ts._mfm.blurDescription }}</p>
@ -196,7 +196,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="section _block"> <div class="section">
<div class="title">{{ i18n.ts._mfm.jelly }}</div> <div class="title">{{ i18n.ts._mfm.jelly }}</div>
<div class="content"> <div class="content">
<p>{{ i18n.ts._mfm.jellyDescription }}</p> <p>{{ i18n.ts._mfm.jellyDescription }}</p>
@ -206,7 +206,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="section _block"> <div class="section">
<div class="title">{{ i18n.ts._mfm.tada }}</div> <div class="title">{{ i18n.ts._mfm.tada }}</div>
<div class="content"> <div class="content">
<p>{{ i18n.ts._mfm.tadaDescription }}</p> <p>{{ i18n.ts._mfm.tadaDescription }}</p>
@ -216,7 +216,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="section _block"> <div class="section">
<div class="title">{{ i18n.ts._mfm.jump }}</div> <div class="title">{{ i18n.ts._mfm.jump }}</div>
<div class="content"> <div class="content">
<p>{{ i18n.ts._mfm.jumpDescription }}</p> <p>{{ i18n.ts._mfm.jumpDescription }}</p>
@ -226,7 +226,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="section _block"> <div class="section">
<div class="title">{{ i18n.ts._mfm.bounce }}</div> <div class="title">{{ i18n.ts._mfm.bounce }}</div>
<div class="content"> <div class="content">
<p>{{ i18n.ts._mfm.bounceDescription }}</p> <p>{{ i18n.ts._mfm.bounceDescription }}</p>
@ -236,7 +236,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="section _block"> <div class="section">
<div class="title">{{ i18n.ts._mfm.spin }}</div> <div class="title">{{ i18n.ts._mfm.spin }}</div>
<div class="content"> <div class="content">
<p>{{ i18n.ts._mfm.spinDescription }}</p> <p>{{ i18n.ts._mfm.spinDescription }}</p>
@ -246,7 +246,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="section _block"> <div class="section">
<div class="title">{{ i18n.ts._mfm.shake }}</div> <div class="title">{{ i18n.ts._mfm.shake }}</div>
<div class="content"> <div class="content">
<p>{{ i18n.ts._mfm.shakeDescription }}</p> <p>{{ i18n.ts._mfm.shakeDescription }}</p>
@ -256,7 +256,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="section _block"> <div class="section">
<div class="title">{{ i18n.ts._mfm.twitch }}</div> <div class="title">{{ i18n.ts._mfm.twitch }}</div>
<div class="content"> <div class="content">
<p>{{ i18n.ts._mfm.twitchDescription }}</p> <p>{{ i18n.ts._mfm.twitchDescription }}</p>
@ -266,7 +266,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="section _block"> <div class="section">
<div class="title">{{ i18n.ts._mfm.rainbow }}</div> <div class="title">{{ i18n.ts._mfm.rainbow }}</div>
<div class="content"> <div class="content">
<p>{{ i18n.ts._mfm.rainbowDescription }}</p> <p>{{ i18n.ts._mfm.rainbowDescription }}</p>
@ -276,7 +276,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="section _block"> <div class="section">
<div class="title">{{ i18n.ts._mfm.sparkle }}</div> <div class="title">{{ i18n.ts._mfm.sparkle }}</div>
<div class="content"> <div class="content">
<p>{{ i18n.ts._mfm.sparkleDescription }}</p> <p>{{ i18n.ts._mfm.sparkleDescription }}</p>
@ -286,7 +286,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="section _block"> <div class="section">
<div class="title">{{ i18n.ts._mfm.rotate }}</div> <div class="title">{{ i18n.ts._mfm.rotate }}</div>
<div class="content"> <div class="content">
<p>{{ i18n.ts._mfm.rotateDescription }}</p> <p>{{ i18n.ts._mfm.rotateDescription }}</p>
@ -296,7 +296,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="section _block"> <div class="section">
<div class="title">{{ i18n.ts._mfm.plain }}</div> <div class="title">{{ i18n.ts._mfm.plain }}</div>
<div class="content"> <div class="content">
<p>{{ i18n.ts._mfm.plainDescription }}</p> <p>{{ i18n.ts._mfm.plainDescription }}</p>

22
packages/frontend/src/pages/miauth.vue
View file

@ -1,32 +1,32 @@
<template> <template>
<MkSpacer :content-max="800"> <MkSpacer :content-max="800">
<div v-if="$i"> <div v-if="$i">
<div v-if="state == 'waiting'" class="waiting _section"> <div v-if="state == 'waiting'" class="waiting">
<div class="_content"> <div class="">
<MkLoading/> <MkLoading/>
</div> </div>
</div> </div>
<div v-if="state == 'denied'" class="denied _section"> <div v-if="state == 'denied'" class="denied">
<div class="_content"> <div class="">
<p>{{ i18n.ts._auth.denied }}</p> <p>{{ i18n.ts._auth.denied }}</p>
</div> </div>
</div> </div>
<div v-else-if="state == 'accepted'" class="accepted _section"> <div v-else-if="state == 'accepted'" class="accepted">
<div class="_content"> <div class="">
<p v-if="callback">{{ i18n.ts._auth.callback }}<MkEllipsis/></p> <p v-if="callback">{{ i18n.ts._auth.callback }}<MkEllipsis/></p>
<p v-else>{{ i18n.ts._auth.pleaseGoBack }}</p> <p v-else>{{ i18n.ts._auth.pleaseGoBack }}</p>
</div> </div>
</div> </div>
<div v-else class="_section"> <div v-else class="">
<div v-if="name" class="_title">{{ $t('_auth.shareAccess', { name: name }) }}</div> <div v-if="name" class="">{{ $t('_auth.shareAccess', { name: name }) }}</div>
<div v-else class="_title">{{ i18n.ts._auth.shareAccessAsk }}</div> <div v-else class="">{{ i18n.ts._auth.shareAccessAsk }}</div>
<div class="_content"> <div class="">
<p>{{ i18n.ts._auth.permissionAsk }}</p> <p>{{ i18n.ts._auth.permissionAsk }}</p>
<ul> <ul>
<li v-for="p in _permissions" :key="p">{{ $t(`_permissions.${p}`) }}</li> <li v-for="p in _permissions" :key="p">{{ $t(`_permissions.${p}`) }}</li>
</ul> </ul>
</div> </div>
<div class="_footer"> <div class="">
<MkButton inline @click="deny">{{ i18n.ts.cancel }}</MkButton> <MkButton inline @click="deny">{{ i18n.ts.cancel }}</MkButton>
<MkButton inline primary @click="accept">{{ i18n.ts.accept }}</MkButton> <MkButton inline primary @click="accept">{{ i18n.ts.accept }}</MkButton>
</div> </div>

2
packages/frontend/src/pages/my-lists/index.vue
View file

@ -5,7 +5,7 @@
<div class="qkcjvfiv"> <div class="qkcjvfiv">
<MkButton primary class="add" @click="create"><i class="ti ti-plus"></i> {{ i18n.ts.createList }}</MkButton> <MkButton primary class="add" @click="create"><i class="ti ti-plus"></i> {{ i18n.ts.createList }}</MkButton>
<MkPagination v-slot="{items}" ref="pagingComponent" :pagination="pagination" class="lists _content"> <MkPagination v-slot="{items}" ref="pagingComponent" :pagination="pagination" class="lists">
<MkA v-for="list in items" :key="list.id" class="list _panel" :to="`/my/lists/${ list.id }`"> <MkA v-for="list in items" :key="list.id" class="list _panel" :to="`/my/lists/${ list.id }`">
<div class="name">{{ list.name }}</div> <div class="name">{{ list.name }}</div>
<MkAvatars :user-ids="list.userIds"/> <MkAvatars :user-ids="list.userIds"/>

10
packages/frontend/src/pages/my-lists/list.vue
View file

@ -4,8 +4,8 @@
<MkSpacer :content-max="700"> <MkSpacer :content-max="700">
<div class="mk-list-page"> <div class="mk-list-page">
<Transition :name="$store.state.animation ? '_transition_zoom' : ''" mode="out-in"> <Transition :name="$store.state.animation ? '_transition_zoom' : ''" mode="out-in">
<div v-if="list" class="_section"> <div v-if="list" class="">
<div class="_content"> <div class="">
<MkButton inline @click="addUser()">{{ i18n.ts.addUser }}</MkButton> <MkButton inline @click="addUser()">{{ i18n.ts.addUser }}</MkButton>
<MkButton inline @click="renameList()">{{ i18n.ts.rename }}</MkButton> <MkButton inline @click="renameList()">{{ i18n.ts.rename }}</MkButton>
<MkButton inline @click="deleteList()">{{ i18n.ts.delete }}</MkButton> <MkButton inline @click="deleteList()">{{ i18n.ts.delete }}</MkButton>
@ -14,9 +14,9 @@
</Transition> </Transition>
<Transition :name="$store.state.animation ? '_transition_zoom' : ''" mode="out-in"> <Transition :name="$store.state.animation ? '_transition_zoom' : ''" mode="out-in">
<div v-if="list" class="_section members _margin"> <div v-if="list" class="members _margin">
<div class="_title">{{ i18n.ts.members }}</div> <div class="">{{ i18n.ts.members }}</div>
<div class="_content"> <div class="">
<div class="users"> <div class="users">
<div v-for="user in users" :key="user.id" class="user _panel"> <div v-for="user in users" :key="user.id" class="user _panel">
<MkAvatar :user="user" class="avatar" :show-indicator="true"/> <MkAvatar :user="user" class="avatar" :show-indicator="true"/>

6
packages/frontend/src/pages/note.vue
View file

@ -6,7 +6,7 @@
<Transition :name="$store.state.animation ? 'fade' : ''" mode="out-in"> <Transition :name="$store.state.animation ? 'fade' : ''" mode="out-in">
<div v-if="note" class="note"> <div v-if="note" class="note">
<div v-if="showNext" class="_margin"> <div v-if="showNext" class="_margin">
<XNotes class="_content" :pagination="nextPagination" :no-gap="true"/> <XNotes class="" :pagination="nextPagination" :no-gap="true"/>
</div> </div>
<div class="main _margin"> <div class="main _margin">
@ -15,7 +15,7 @@
<MkRemoteCaution v-if="note.user.host != null" :href="note.url ?? note.uri"/> <MkRemoteCaution v-if="note.user.host != null" :href="note.url ?? note.uri"/>
<XNoteDetailed :key="note.id" v-model:note="note" class="note"/> <XNoteDetailed :key="note.id" v-model:note="note" class="note"/>
</div> </div>
<div v-if="clips && clips.length > 0" class="_content clips _margin"> <div v-if="clips && clips.length > 0" class="clips _margin">
<div class="title">{{ i18n.ts.clip }}</div> <div class="title">{{ i18n.ts.clip }}</div>
<MkA v-for="item in clips" :key="item.id" :to="`/clips/${item.id}`" class="item _panel _margin"> <MkA v-for="item in clips" :key="item.id" :to="`/clips/${item.id}`" class="item _panel _margin">
<b>{{ item.name }}</b> <b>{{ item.name }}</b>
@ -29,7 +29,7 @@
</div> </div>
<div v-if="showPrev" class="_margin"> <div v-if="showPrev" class="_margin">
<XNotes class="_content" :pagination="prevPagination" :no-gap="true"/> <XNotes class="" :pagination="prevPagination" :no-gap="true"/>
</div> </div>
</div> </div>
<MkError v-else-if="error" @retry="fetch()"/> <MkError v-else-if="error" @retry="fetch()"/>

2
packages/frontend/src/pages/page.vue
View file

@ -4,7 +4,7 @@
<MkSpacer :content-max="700"> <MkSpacer :content-max="700">
<Transition :name="$store.state.animation ? 'fade' : ''" mode="out-in"> <Transition :name="$store.state.animation ? 'fade' : ''" mode="out-in">
<div v-if="page" :key="page.id" class="xcukqgmh"> <div v-if="page" :key="page.id" class="xcukqgmh">
<div class="_block main"> <div class="main">
<!-- <!--
<div class="header"> <div class="header">
<h1>{{ page.title }}</h1> <h1>{{ page.title }}</h1>

4
packages/frontend/src/pages/reset-password.vue
View file

@ -8,7 +8,7 @@
<template #label>{{ i18n.ts.newPassword }}</template> <template #label>{{ i18n.ts.newPassword }}</template>
</FormInput> </FormInput>
<FormButton primary @click="save">{{ i18n.ts.save }}</FormButton> <MkButton primary @click="save">{{ i18n.ts.save }}</MkButton>
</div> </div>
</MkSpacer> </MkSpacer>
</MkStickyContainer> </MkStickyContainer>
@ -17,7 +17,7 @@
<script lang="ts" setup> <script lang="ts" setup>
import { defineAsyncComponent, onMounted } from 'vue'; import { defineAsyncComponent, onMounted } from 'vue';
import FormInput from '@/components/form/input.vue'; import FormInput from '@/components/form/input.vue';
import FormButton from '@/components/MkButton.vue'; import MkButton from '@/components/MkButton.vue';
import * as os from '@/os'; import * as os from '@/os';
import { i18n } from '@/i18n'; import { i18n } from '@/i18n';
import { mainRouter } from '@/router'; import { mainRouter } from '@/router';

4
packages/frontend/src/pages/settings/accounts.vue
View file

@ -1,7 +1,7 @@
<template> <template>
<div class="_autoGap"> <div class="_autoGap">
<FormSuspense :p="init"> <FormSuspense :p="init">
<FormButton primary @click="addAccount"><i class="ti ti-plus"></i> {{ i18n.ts.addAccount }}</FormButton> <MkButton primary @click="addAccount"><i class="ti ti-plus"></i> {{ i18n.ts.addAccount }}</MkButton>
<div v-for="account in accounts" :key="account.id" class="_panel _button lcjjdxlm" @click="menu(account, $event)"> <div v-for="account in accounts" :key="account.id" class="_panel _button lcjjdxlm" @click="menu(account, $event)">
<div class="avatar"> <div class="avatar">
@ -23,7 +23,7 @@
<script lang="ts" setup> <script lang="ts" setup>
import { defineAsyncComponent, ref } from 'vue'; import { defineAsyncComponent, ref } from 'vue';
import FormSuspense from '@/components/form/suspense.vue'; import FormSuspense from '@/components/form/suspense.vue';
import FormButton from '@/components/MkButton.vue'; import MkButton from '@/components/MkButton.vue';
import * as os from '@/os'; import * as os from '@/os';
import { getAccounts, addAccount as addAccounts, removeAccount as _removeAccount, login, $i } from '@/account'; import { getAccounts, addAccount as addAccounts, removeAccount as _removeAccount, login, $i } from '@/account';
import { i18n } from '@/i18n'; import { i18n } from '@/i18n';

4
packages/frontend/src/pages/settings/api.vue
View file

@ -1,6 +1,6 @@
<template> <template>
<div class="_autoGap"> <div class="_autoGap">
<FormButton primary @click="generateToken">{{ i18n.ts.generateAccessToken }}</FormButton> <MkButton primary @click="generateToken">{{ i18n.ts.generateAccessToken }}</MkButton>
<FormLink to="/settings/apps">{{ i18n.ts.manageAccessTokens }}</FormLink> <FormLink to="/settings/apps">{{ i18n.ts.manageAccessTokens }}</FormLink>
<FormLink to="/api-console" :behavior="isDesktop ? 'window' : null">API console</FormLink> <FormLink to="/api-console" :behavior="isDesktop ? 'window' : null">API console</FormLink>
</div> </div>
@ -9,7 +9,7 @@
<script lang="ts" setup> <script lang="ts" setup>
import { defineAsyncComponent, ref } from 'vue'; import { defineAsyncComponent, ref } from 'vue';
import FormLink from '@/components/form/link.vue'; import FormLink from '@/components/form/link.vue';
import FormButton from '@/components/MkButton.vue'; import MkButton from '@/components/MkButton.vue';
import * as os from '@/os'; import * as os from '@/os';
import { i18n } from '@/i18n'; import { i18n } from '@/i18n';
import { definePageMetadata } from '@/scripts/page-metadata'; import { definePageMetadata } from '@/scripts/page-metadata';

6
packages/frontend/src/pages/settings/delete-account.vue
View file

@ -2,14 +2,14 @@
<div class="_autoGap"> <div class="_autoGap">
<FormInfo warn>{{ i18n.ts._accountDelete.mayTakeTime }}</FormInfo> <FormInfo warn>{{ i18n.ts._accountDelete.mayTakeTime }}</FormInfo>
<FormInfo>{{ i18n.ts._accountDelete.sendEmail }}</FormInfo> <FormInfo>{{ i18n.ts._accountDelete.sendEmail }}</FormInfo>
<FormButton v-if="!$i.isDeleted" danger @click="deleteAccount">{{ i18n.ts._accountDelete.requestAccountDelete }}</FormButton> <MkButton v-if="!$i.isDeleted" danger @click="deleteAccount">{{ i18n.ts._accountDelete.requestAccountDelete }}</MkButton>
<FormButton v-else disabled>{{ i18n.ts._accountDelete.inProgress }}</FormButton> <MkButton v-else disabled>{{ i18n.ts._accountDelete.inProgress }}</MkButton>
</div> </div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import FormInfo from '@/components/MkInfo.vue'; import FormInfo from '@/components/MkInfo.vue';
import FormButton from '@/components/MkButton.vue'; import MkButton from '@/components/MkButton.vue';
import * as os from '@/os'; import * as os from '@/os';
import { signout } from '@/account'; import { signout } from '@/account';
import { i18n } from '@/i18n'; import { i18n } from '@/i18n';

4
packages/frontend/src/pages/settings/navbar.vue
View file

@ -13,7 +13,7 @@
<!-- <MkRadio v-model="menuDisplay" value="hide" disabled>{{ i18n.ts._menuDisplay.hide }}</MkRadio>--> <!-- TODO: サイドバーを完全に隠せるようにすると、別途ハンバーガーボタンのようなものをUIに表示する必要があり面倒 --> <!-- <MkRadio v-model="menuDisplay" value="hide" disabled>{{ i18n.ts._menuDisplay.hide }}</MkRadio>--> <!-- TODO: サイドバーを完全に隠せるようにすると、別途ハンバーガーボタンのようなものをUIに表示する必要があり面倒 -->
</FormRadios> </FormRadios>
<FormButton danger @click="reset()"><i class="ti ti-reload"></i> {{ i18n.ts.default }}</FormButton> <MkButton danger @click="reset()"><i class="ti ti-reload"></i> {{ i18n.ts.default }}</MkButton>
</div> </div>
</template> </template>
@ -21,7 +21,7 @@
import { computed, ref, watch } from 'vue'; import { computed, ref, watch } from 'vue';
import FormTextarea from '@/components/form/textarea.vue'; import FormTextarea from '@/components/form/textarea.vue';
import FormRadios from '@/components/form/radios.vue'; import FormRadios from '@/components/form/radios.vue';
import FormButton from '@/components/MkButton.vue'; import MkButton from '@/components/MkButton.vue';
import * as os from '@/os'; import * as os from '@/os';
import { navbarItemDef } from '@/navbar'; import { navbarItemDef } from '@/navbar';
import { defaultStore } from '@/store'; import { defaultStore } from '@/store';

2
packages/frontend/src/pages/settings/notifications.vue
View file

@ -29,7 +29,7 @@
<script lang="ts" setup> <script lang="ts" setup>
import { defineAsyncComponent } from 'vue'; import { defineAsyncComponent } from 'vue';
import { notificationTypes } from 'misskey-js'; import { notificationTypes } from 'misskey-js';
import FormButton from '@/components/MkButton.vue'; import MkButton from '@/components/MkButton.vue';
import FormLink from '@/components/form/link.vue'; import FormLink from '@/components/form/link.vue';
import FormSection from '@/components/form/section.vue'; import FormSection from '@/components/form/section.vue';
import FormSwitch from '@/components/form/switch.vue'; import FormSwitch from '@/components/form/switch.vue';

4
packages/frontend/src/pages/settings/plugin.install.vue
View file

@ -7,7 +7,7 @@
</FormTextarea> </FormTextarea>
<div> <div>
<FormButton :disabled="code == null" primary inline @click="install"><i class="ti ti-check"></i> {{ i18n.ts.install }}</FormButton> <MkButton :disabled="code == null" primary inline @click="install"><i class="ti ti-check"></i> {{ i18n.ts.install }}</MkButton>
</div> </div>
</div> </div>
</template> </template>
@ -17,7 +17,7 @@ import { defineAsyncComponent, nextTick, ref } from 'vue';
import { Interpreter, Parser, utils } from '@syuilo/aiscript'; import { Interpreter, Parser, utils } from '@syuilo/aiscript';
import { v4 as uuid } from 'uuid'; import { v4 as uuid } from 'uuid';
import FormTextarea from '@/components/form/textarea.vue'; import FormTextarea from '@/components/form/textarea.vue';
import FormButton from '@/components/MkButton.vue'; import MkButton from '@/components/MkButton.vue';
import FormInfo from '@/components/MkInfo.vue'; import FormInfo from '@/components/MkInfo.vue';
import * as os from '@/os'; import * as os from '@/os';
import { ColdDeviceStorage } from '@/store'; import { ColdDeviceStorage } from '@/store';

2
packages/frontend/src/pages/settings/plugin.vue
View file

@ -22,7 +22,7 @@
<template #value>{{ plugin.permission }}</template> <template #value>{{ plugin.permission }}</template>
</MkKeyValue> </MkKeyValue>
<div style="display: flex; gap: var(--margin); flex-wrap: wrap;"> <div class="_buttons">
<MkButton v-if="plugin.config" inline @click="config(plugin)"><i class="ti ti-settings"></i> {{ i18n.ts.settings }}</MkButton> <MkButton v-if="plugin.config" inline @click="config(plugin)"><i class="ti ti-settings"></i> {{ i18n.ts.settings }}</MkButton>
<MkButton inline danger @click="uninstall(plugin)"><i class="ti ti-trash"></i> {{ i18n.ts.uninstall }}</MkButton> <MkButton inline danger @click="uninstall(plugin)"><i class="ti ti-trash"></i> {{ i18n.ts.uninstall }}</MkButton>
</div> </div>

8
packages/frontend/src/pages/settings/reaction.vue
View file

@ -45,9 +45,9 @@
</FormSwitch> </FormSwitch>
<FormSection> <FormSection>
<div style="display: flex; gap: var(--margin); flex-wrap: wrap;"> <div class="_buttons">
<FormButton inline @click="preview"><i class="ti ti-eye"></i> {{ i18n.ts.preview }}</FormButton> <MkButton inline @click="preview"><i class="ti ti-eye"></i> {{ i18n.ts.preview }}</MkButton>
<FormButton inline danger @click="setDefault"><i class="ti ti-reload"></i> {{ i18n.ts.default }}</FormButton> <MkButton inline danger @click="setDefault"><i class="ti ti-reload"></i> {{ i18n.ts.default }}</MkButton>
</div> </div>
</FormSection> </FormSection>
</div> </div>
@ -59,7 +59,7 @@ import Sortable from 'vuedraggable';
import FormInput from '@/components/form/input.vue'; import FormInput from '@/components/form/input.vue';
import FormRadios from '@/components/form/radios.vue'; import FormRadios from '@/components/form/radios.vue';
import FromSlot from '@/components/form/slot.vue'; import FromSlot from '@/components/form/slot.vue';
import FormButton from '@/components/MkButton.vue'; import MkButton from '@/components/MkButton.vue';
import FormSection from '@/components/form/section.vue'; import FormSection from '@/components/form/section.vue';
import FormSwitch from '@/components/form/switch.vue'; import FormSwitch from '@/components/form/switch.vue';
import * as os from '@/os'; import * as os from '@/os';

6
packages/frontend/src/pages/settings/security.vue
View file

@ -2,7 +2,7 @@
<div class="_autoGap"> <div class="_autoGap">
<FormSection> <FormSection>
<template #label>{{ i18n.ts.password }}</template> <template #label>{{ i18n.ts.password }}</template>
<FormButton primary @click="change()">{{ i18n.ts.changePassword }}</FormButton> <MkButton primary @click="change()">{{ i18n.ts.changePassword }}</MkButton>
</FormSection> </FormSection>
<FormSection> <FormSection>
@ -30,7 +30,7 @@
<FormSection> <FormSection>
<FormSlot> <FormSlot>
<FormButton danger @click="regenerateToken"><i class="ti ti-refresh"></i> {{ i18n.ts.regenerateLoginToken }}</FormButton> <MkButton danger @click="regenerateToken"><i class="ti ti-refresh"></i> {{ i18n.ts.regenerateLoginToken }}</MkButton>
<template #caption>{{ i18n.ts.regenerateLoginTokenDescription }}</template> <template #caption>{{ i18n.ts.regenerateLoginTokenDescription }}</template>
</FormSlot> </FormSlot>
</FormSection> </FormSection>
@ -41,7 +41,7 @@
import X2fa from './2fa.vue'; import X2fa from './2fa.vue';
import FormSection from '@/components/form/section.vue'; import FormSection from '@/components/form/section.vue';
import FormSlot from '@/components/form/slot.vue'; import FormSlot from '@/components/form/slot.vue';
import FormButton from '@/components/MkButton.vue'; import MkButton from '@/components/MkButton.vue';
import MkPagination from '@/components/MkPagination.vue'; import MkPagination from '@/components/MkPagination.vue';
import * as os from '@/os'; import * as os from '@/os';
import { i18n } from '@/i18n'; import { i18n } from '@/i18n';

8
packages/frontend/src/pages/settings/sounds.sound.vue
View file

@ -8,9 +8,9 @@
<template #label>{{ i18n.ts.volume }}</template> <template #label>{{ i18n.ts.volume }}</template>
</FormRange> </FormRange>
<div style="display: flex; gap: var(--margin); flex-wrap: wrap;"> <div class="_buttons">
<FormButton inline @click="listen"><i class="ti ti-player-play"></i> {{ i18n.ts.listen }}</FormButton> <MkButton inline @click="listen"><i class="ti ti-player-play"></i> {{ i18n.ts.listen }}</MkButton>
<FormButton inline primary @click="save"><i class="ti ti-check"></i> {{ i18n.ts.save }}</FormButton> <MkButton inline primary @click="save"><i class="ti ti-check"></i> {{ i18n.ts.save }}</MkButton>
</div> </div>
</div> </div>
</template> </template>
@ -18,7 +18,7 @@
<script lang="ts" setup> <script lang="ts" setup>
import { } from 'vue'; import { } from 'vue';
import FormSelect from '@/components/form/select.vue'; import FormSelect from '@/components/form/select.vue';
import FormButton from '@/components/MkButton.vue'; import MkButton from '@/components/MkButton.vue';
import FormRange from '@/components/form/range.vue'; import FormRange from '@/components/form/range.vue';
import { i18n } from '@/i18n'; import { i18n } from '@/i18n';
import { playFile, soundsTypes } from '@/scripts/sound'; import { playFile, soundsTypes } from '@/scripts/sound';

4
packages/frontend/src/pages/settings/sounds.vue
View file

@ -16,7 +16,7 @@
</div> </div>
</FormSection> </FormSection>
<FormButton danger @click="reset()"><i class="ti ti-reload"></i> {{ i18n.ts.default }}</FormButton> <MkButton danger @click="reset()"><i class="ti ti-reload"></i> {{ i18n.ts.default }}</MkButton>
</div> </div>
</template> </template>
@ -24,7 +24,7 @@
import { computed, ref } from 'vue'; import { computed, ref } from 'vue';
import XSound from './sounds.sound.vue'; import XSound from './sounds.sound.vue';
import FormRange from '@/components/form/range.vue'; import FormRange from '@/components/form/range.vue';
import FormButton from '@/components/MkButton.vue'; import MkButton from '@/components/MkButton.vue';
import FormLink from '@/components/form/link.vue'; import FormLink from '@/components/form/link.vue';
import FormSection from '@/components/form/section.vue'; import FormSection from '@/components/form/section.vue';
import FormFolder from '@/components/form/folder.vue'; import FormFolder from '@/components/form/folder.vue';

6
packages/frontend/src/pages/settings/statusbar.statusbar.vue
View file

@ -74,8 +74,8 @@
</MkSwitch> </MkSwitch>
</template> </template>
<div style="display: flex; gap: var(--margin); flex-wrap: wrap;"> <div class="_buttons">
<FormButton danger @click="del">{{ i18n.ts.remove }}</FormButton> <MkButton danger @click="del">{{ i18n.ts.remove }}</MkButton>
</div> </div>
</div> </div>
</template> </template>
@ -86,7 +86,7 @@ import FormSelect from '@/components/form/select.vue';
import MkInput from '@/components/form/input.vue'; import MkInput from '@/components/form/input.vue';
import MkSwitch from '@/components/form/switch.vue'; import MkSwitch from '@/components/form/switch.vue';
import FormRadios from '@/components/form/radios.vue'; import FormRadios from '@/components/form/radios.vue';
import FormButton from '@/components/MkButton.vue'; import MkButton from '@/components/MkButton.vue';
import FormRange from '@/components/form/range.vue'; import FormRange from '@/components/form/range.vue';
import * as os from '@/os'; import * as os from '@/os';
import { defaultStore } from '@/store'; import { defaultStore } from '@/store';

4
packages/frontend/src/pages/settings/statusbar.vue
View file

@ -5,7 +5,7 @@
<template #suffix>{{ x.name }}</template> <template #suffix>{{ x.name }}</template>
<XStatusbar :_id="x.id" :user-lists="userLists"/> <XStatusbar :_id="x.id" :user-lists="userLists"/>
</FormFolder> </FormFolder>
<FormButton primary @click="add">{{ i18n.ts.add }}</FormButton> <MkButton primary @click="add">{{ i18n.ts.add }}</MkButton>
</div> </div>
</template> </template>
@ -15,7 +15,7 @@ import { v4 as uuid } from 'uuid';
import XStatusbar from './statusbar.statusbar.vue'; import XStatusbar from './statusbar.statusbar.vue';
import FormRadios from '@/components/form/radios.vue'; import FormRadios from '@/components/form/radios.vue';
import FormFolder from '@/components/form/folder.vue'; import FormFolder from '@/components/form/folder.vue';
import FormButton from '@/components/MkButton.vue'; import MkButton from '@/components/MkButton.vue';
import * as os from '@/os'; import * as os from '@/os';
import { defaultStore } from '@/store'; import { defaultStore } from '@/store';
import { unisonReload } from '@/scripts/unison-reload'; import { unisonReload } from '@/scripts/unison-reload';

8
packages/frontend/src/pages/settings/theme.install.vue
View file

@ -4,9 +4,9 @@
<template #label>{{ i18n.ts._theme.code }}</template> <template #label>{{ i18n.ts._theme.code }}</template>
</FormTextarea> </FormTextarea>
<div style="display: flex; gap: var(--margin); flex-wrap: wrap;"> <div class="_buttons">
<FormButton :disabled="installThemeCode == null" inline @click="() => preview(installThemeCode)"><i class="ti ti-eye"></i> {{ i18n.ts.preview }}</FormButton> <MkButton :disabled="installThemeCode == null" inline @click="() => preview(installThemeCode)"><i class="ti ti-eye"></i> {{ i18n.ts.preview }}</MkButton>
<FormButton :disabled="installThemeCode == null" primary inline @click="() => install(installThemeCode)"><i class="ti ti-check"></i> {{ i18n.ts.install }}</FormButton> <MkButton :disabled="installThemeCode == null" primary inline @click="() => install(installThemeCode)"><i class="ti ti-check"></i> {{ i18n.ts.install }}</MkButton>
</div> </div>
</div> </div>
</template> </template>
@ -15,7 +15,7 @@
import { } from 'vue'; import { } from 'vue';
import JSON5 from 'json5'; import JSON5 from 'json5';
import FormTextarea from '@/components/form/textarea.vue'; import FormTextarea from '@/components/form/textarea.vue';
import FormButton from '@/components/MkButton.vue'; import MkButton from '@/components/MkButton.vue';
import { applyTheme, validateTheme } from '@/scripts/theme'; import { applyTheme, validateTheme } from '@/scripts/theme';
import * as os from '@/os'; import * as os from '@/os';
import { addTheme, getThemes } from '@/theme-store'; import { addTheme, getThemes } from '@/theme-store';

4
packages/frontend/src/pages/settings/theme.manage.vue
View file

@ -20,7 +20,7 @@
<template #label>{{ i18n.ts._theme.code }}</template> <template #label>{{ i18n.ts._theme.code }}</template>
<template #caption><button class="_textButton" @click="copyThemeCode()">{{ i18n.ts.copy }}</button></template> <template #caption><button class="_textButton" @click="copyThemeCode()">{{ i18n.ts.copy }}</button></template>
</FormTextarea> </FormTextarea>
<FormButton v-if="!builtinThemes.some(t => t.id == selectedTheme.id)" danger @click="uninstall()"><i class="ti ti-trash"></i> {{ i18n.ts.uninstall }}</FormButton> <MkButton v-if="!builtinThemes.some(t => t.id == selectedTheme.id)" danger @click="uninstall()"><i class="ti ti-trash"></i> {{ i18n.ts.uninstall }}</MkButton>
</template> </template>
</div> </div>
</template> </template>
@ -31,7 +31,7 @@ import JSON5 from 'json5';
import FormTextarea from '@/components/form/textarea.vue'; import FormTextarea from '@/components/form/textarea.vue';
import FormSelect from '@/components/form/select.vue'; import FormSelect from '@/components/form/select.vue';
import FormInput from '@/components/form/input.vue'; import FormInput from '@/components/form/input.vue';
import FormButton from '@/components/MkButton.vue'; import MkButton from '@/components/MkButton.vue';
import { Theme, getBuiltinThemesRef } from '@/scripts/theme'; import { Theme, getBuiltinThemesRef } from '@/scripts/theme';
import copyToClipboard from '@/scripts/copy-to-clipboard'; import copyToClipboard from '@/scripts/copy-to-clipboard';
import * as os from '@/os'; import * as os from '@/os';

6
packages/frontend/src/pages/settings/theme.vue
View file

@ -60,8 +60,8 @@
</div> </div>
</FormSection> </FormSection>
<FormButton v-if="wallpaper == null" @click="setWallpaper">{{ i18n.ts.setWallpaper }}</FormButton> <MkButton v-if="wallpaper == null" @click="setWallpaper">{{ i18n.ts.setWallpaper }}</MkButton>
<FormButton v-else @click="wallpaper = null">{{ i18n.ts.removeWallpaper }}</FormButton> <MkButton v-else @click="wallpaper = null">{{ i18n.ts.removeWallpaper }}</MkButton>
</div> </div>
</template> </template>
@ -72,7 +72,7 @@ import FormSwitch from '@/components/form/switch.vue';
import FormSelect from '@/components/form/select.vue'; import FormSelect from '@/components/form/select.vue';
import FormSection from '@/components/form/section.vue'; import FormSection from '@/components/form/section.vue';
import FormLink from '@/components/form/link.vue'; import FormLink from '@/components/form/link.vue';
import FormButton from '@/components/MkButton.vue'; import MkButton from '@/components/MkButton.vue';
import { getBuiltinThemesRef } from '@/scripts/theme'; import { getBuiltinThemesRef } from '@/scripts/theme';
import { selectFile } from '@/scripts/select-file'; import { selectFile } from '@/scripts/select-file';
import { isDeviceDarkmode } from '@/scripts/is-device-darkmode'; import { isDeviceDarkmode } from '@/scripts/is-device-darkmode';

6
packages/frontend/src/pages/settings/webhook.edit.vue
View file

@ -29,8 +29,8 @@
<FormSwitch v-model="active">Active</FormSwitch> <FormSwitch v-model="active">Active</FormSwitch>
<div style="display: flex; gap: var(--margin); flex-wrap: wrap;"> <div class="_buttons">
<FormButton primary inline @click="save"><i class="ti ti-check"></i> {{ i18n.ts.save }}</FormButton> <MkButton primary inline @click="save"><i class="ti ti-check"></i> {{ i18n.ts.save }}</MkButton>
</div> </div>
</div> </div>
</template> </template>
@ -40,7 +40,7 @@ import { } from 'vue';
import FormInput from '@/components/form/input.vue'; import FormInput from '@/components/form/input.vue';
import FormSection from '@/components/form/section.vue'; import FormSection from '@/components/form/section.vue';
import FormSwitch from '@/components/form/switch.vue'; import FormSwitch from '@/components/form/switch.vue';
import FormButton from '@/components/MkButton.vue'; import MkButton from '@/components/MkButton.vue';
import * as os from '@/os'; import * as os from '@/os';
import { i18n } from '@/i18n'; import { i18n } from '@/i18n';
import { definePageMetadata } from '@/scripts/page-metadata'; import { definePageMetadata } from '@/scripts/page-metadata';

6
packages/frontend/src/pages/settings/webhook.new.vue
View file

@ -27,8 +27,8 @@
</div> </div>
</FormSection> </FormSection>
<div style="display: flex; gap: var(--margin); flex-wrap: wrap;"> <div class="_buttons">
<FormButton primary inline @click="create"><i class="ti ti-check"></i> {{ i18n.ts.create }}</FormButton> <MkButton primary inline @click="create"><i class="ti ti-check"></i> {{ i18n.ts.create }}</MkButton>
</div> </div>
</div> </div>
</template> </template>
@ -38,7 +38,7 @@ import { } from 'vue';
import FormInput from '@/components/form/input.vue'; import FormInput from '@/components/form/input.vue';
import FormSection from '@/components/form/section.vue'; import FormSection from '@/components/form/section.vue';
import FormSwitch from '@/components/form/switch.vue'; import FormSwitch from '@/components/form/switch.vue';
import FormButton from '@/components/MkButton.vue'; import MkButton from '@/components/MkButton.vue';
import * as os from '@/os'; import * as os from '@/os';
import { i18n } from '@/i18n'; import { i18n } from '@/i18n';
import { definePageMetadata } from '@/scripts/page-metadata'; import { definePageMetadata } from '@/scripts/page-metadata';

2
packages/frontend/src/pages/tag.vue
View file

@ -2,7 +2,7 @@
<MkStickyContainer> <MkStickyContainer>
<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template> <template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template>
<MkSpacer :content-max="800"> <MkSpacer :content-max="800">
<XNotes class="_content" :pagination="pagination"/> <XNotes class="" :pagination="pagination"/>
</MkSpacer> </MkSpacer>
</MkStickyContainer> </MkStickyContainer>
</template> </template>

4
packages/frontend/src/pages/theme-editor.vue
View file

@ -49,7 +49,7 @@
<FormTextarea v-model="themeCode" tall> <FormTextarea v-model="themeCode" tall>
<template #label>{{ i18n.ts._theme.code }}</template> <template #label>{{ i18n.ts._theme.code }}</template>
</FormTextarea> </FormTextarea>
<FormButton primary @click="applyThemeCode">{{ i18n.ts.apply }}</FormButton> <MkButton primary @click="applyThemeCode">{{ i18n.ts.apply }}</MkButton>
</div> </div>
</FormFolder> </FormFolder>
@ -74,7 +74,7 @@ import tinycolor from 'tinycolor2';
import { v4 as uuid } from 'uuid'; import { v4 as uuid } from 'uuid';
import JSON5 from 'json5'; import JSON5 from 'json5';
import FormButton from '@/components/MkButton.vue'; import MkButton from '@/components/MkButton.vue';
import FormTextarea from '@/components/form/textarea.vue'; import FormTextarea from '@/components/form/textarea.vue';
import FormFolder from '@/components/form/folder.vue'; import FormFolder from '@/components/form/folder.vue';

6
packages/frontend/src/pages/timeline.vue
View file

@ -3,11 +3,11 @@
<template #header><MkPageHeader v-model:tab="src" :actions="headerActions" :tabs="headerTabs" :display-my-avatar="true"/></template> <template #header><MkPageHeader v-model:tab="src" :actions="headerActions" :tabs="headerTabs" :display-my-avatar="true"/></template>
<MkSpacer :content-max="800"> <MkSpacer :content-max="800">
<div ref="rootEl" v-hotkey.global="keymap" class="cmuxhskf"> <div ref="rootEl" v-hotkey.global="keymap" class="cmuxhskf">
<XTutorial v-if="$store.reactiveState.tutorial.value != -1" class="tutorial _block"/> <XTutorial v-if="$store.reactiveState.tutorial.value != -1" class="tutorial"/>
<XPostForm v-if="$store.reactiveState.showFixedPostForm.value" class="post-form _block" fixed/> <XPostForm v-if="$store.reactiveState.showFixedPostForm.value" class="post-form" fixed/>
<div v-if="queue > 0" class="new"><button class="_buttonPrimary" @click="top()">{{ i18n.ts.newNoteRecived }}</button></div> <div v-if="queue > 0" class="new"><button class="_buttonPrimary" @click="top()">{{ i18n.ts.newNoteRecived }}</button></div>
<div class="tl _block"> <div class="tl">
<XTimeline <XTimeline
ref="tl" :key="src" ref="tl" :key="src"
class="tl" class="tl"

8
packages/frontend/src/pages/user-info.vue
View file

@ -75,7 +75,7 @@
</MkKeyValue> </MkKeyValue>
</div> </div>
<FormButton v-if="user.host != null" @click="updateRemoteUser"><i class="ti ti-refresh"></i> {{ i18n.ts.updateRemoteUser }}</FormButton> <MkButton v-if="user.host != null" @click="updateRemoteUser"><i class="ti ti-refresh"></i> {{ i18n.ts.updateRemoteUser }}</MkButton>
<FormFolder> <FormFolder>
<template #label>Raw</template> <template #label>Raw</template>
@ -92,8 +92,8 @@
<FormSwitch v-model="suspended" @update:model-value="toggleSuspend">{{ i18n.ts.suspend }}</FormSwitch> <FormSwitch v-model="suspended" @update:model-value="toggleSuspend">{{ i18n.ts.suspend }}</FormSwitch>
{{ i18n.ts.reflectMayTakeTime }} {{ i18n.ts.reflectMayTakeTime }}
<div> <div>
<FormButton v-if="user.host == null && iAmModerator" inline style="margin-right: 8px;" @click="resetPassword"><i class="ti ti-key"></i> {{ i18n.ts.resetPassword }}</FormButton> <MkButton v-if="user.host == null && iAmModerator" inline style="margin-right: 8px;" @click="resetPassword"><i class="ti ti-key"></i> {{ i18n.ts.resetPassword }}</MkButton>
<FormButton v-if="$i.isAdmin" inline danger @click="deleteAccount">{{ i18n.ts.deleteAccount }}</FormButton> <MkButton v-if="$i.isAdmin" inline danger @click="deleteAccount">{{ i18n.ts.deleteAccount }}</MkButton>
</div> </div>
<FormTextarea v-model="moderationNote" manual-save> <FormTextarea v-model="moderationNote" manual-save>
<template #label>Moderation note</template> <template #label>Moderation note</template>
@ -162,7 +162,7 @@ import FormTextarea from '@/components/form/textarea.vue';
import FormSwitch from '@/components/form/switch.vue'; import FormSwitch from '@/components/form/switch.vue';
import FormLink from '@/components/form/link.vue'; import FormLink from '@/components/form/link.vue';
import FormSection from '@/components/form/section.vue'; import FormSection from '@/components/form/section.vue';
import FormButton from '@/components/MkButton.vue'; import MkButton from '@/components/MkButton.vue';
import FormInput from '@/components/form/input.vue'; import FormInput from '@/components/form/input.vue';
import FormSplit from '@/components/form/split.vue'; import FormSplit from '@/components/form/split.vue';
import FormFolder from '@/components/form/folder.vue'; import FormFolder from '@/components/form/folder.vue';

2
packages/frontend/src/pages/user-list-timeline.vue
View file

@ -3,7 +3,7 @@
<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template> <template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template>
<div ref="rootEl" class="eqqrhokj"> <div ref="rootEl" class="eqqrhokj">
<div v-if="queue > 0" class="new"><button class="_buttonPrimary" @click="top()">{{ i18n.ts.newNoteRecived }}</button></div> <div v-if="queue > 0" class="new"><button class="_buttonPrimary" @click="top()">{{ i18n.ts.newNoteRecived }}</button></div>
<div class="tl _block"> <div class="tl">
<XTimeline <XTimeline
ref="tlEl" :key="listId" ref="tlEl" :key="listId"
class="tl" class="tl"

4
packages/frontend/src/pages/user/home.vue
View file

@ -9,7 +9,7 @@
<div class="profile"> <div class="profile">
<MkRemoteCaution v-if="user.host != null" :href="user.url" class="warn"/> <MkRemoteCaution v-if="user.host != null" :href="user.url" class="warn"/>
<div :key="user.id" class="_block main"> <div :key="user.id" class="main">
<div class="banner-container" :style="style"> <div class="banner-container" :style="style">
<div ref="bannerEl" class="banner" :style="style"></div> <div ref="bannerEl" class="banner" :style="style"></div>
<div class="fade"></div> <div class="fade"></div>
@ -87,7 +87,7 @@
<div class="contents"> <div class="contents">
<div v-if="user.pinnedNotes.length > 0" class="_margin"> <div v-if="user.pinnedNotes.length > 0" class="_margin">
<XNote v-for="note in user.pinnedNotes" :key="note.id" class="note _block" :note="note" :pinned="true"/> <XNote v-for="note in user.pinnedNotes" :key="note.id" class="note" :note="note" :pinned="true"/>
</div> </div>
<MkInfo v-else-if="$i && $i.id === user.id">{{ i18n.ts.userPagePinTip }}</MkInfo> <MkInfo v-else-if="$i && $i.id === user.id">{{ i18n.ts.userPagePinTip }}</MkInfo>
<template v-if="narrow"> <template v-if="narrow">

90
packages/frontend/src/style.scss
View file

@ -252,15 +252,6 @@ hr {
overflow: clip; overflow: clip;
} }
// TODO: 廃止
._block {
@extend ._panel;
& + ._block {
margin-top: var(--margin);
}
}
._margin { ._margin {
margin: var(--margin) 0; margin: var(--margin) 0;
} }
@ -277,52 +268,10 @@ hr {
gap: 0.75em; gap: 0.75em;
} }
// TODO: 廃止 ._buttons {
._card { display: flex;
@extend ._panel; gap: 8px;
flex-wrap: wrap;
// TODO: _cardTitle に
> ._title {
margin: 0;
padding: 22px 32px;
font-size: 1em;
border-bottom: solid 1px var(--panelHeaderDivider);
font-weight: bold;
background: var(--panelHeaderBg);
color: var(--panelHeaderFg);
@media (max-width: 500px) {
padding: 16px;
font-size: 1em;
}
}
// TODO: _cardContent に
> ._content {
padding: 32px;
@media (max-width: 500px) {
padding: 16px;
}
&._noPad {
padding: 0 !important;
}
& + ._content {
border-top: solid 0.5px var(--divider);
}
}
// TODO: _cardFooter に
> ._footer {
border-top: solid 0.5px var(--divider);
padding: 24px 32px;
@media (max-width: 500px) {
padding: 16px;
}
}
} }
._borderButton { ._borderButton {
@ -346,37 +295,6 @@ hr {
contain: content; contain: content;
} }
// TODO: 廃止
._monolithic_ {
._section:not(:empty) {
box-sizing: border-box;
padding: var(--root-margin, 32px);
@media (max-width: 500px) {
--root-margin: 10px;
}
& + ._section:not(:empty) {
border-top: solid 0.5px var(--divider);
}
}
}
._narrow_ ._card {
> ._title {
padding: 16px;
font-size: 1em;
}
> ._content {
padding: 16px;
}
> ._footer {
padding: 16px;
}
}
._acrylic { ._acrylic {
background: var(--acrylicPanel); background: var(--acrylicPanel);
-webkit-backdrop-filter: var(--blur, blur(15px)); -webkit-backdrop-filter: var(--blur, blur(15px));

2
packages/frontend/src/ui/deck/column.vue
View file

@ -1,7 +1,7 @@
<template> <template>
<!-- sectionを利用しているのは、deck.vue側でcolumnに対してfirst-of-typeを効かせるため --> <!-- sectionを利用しているのは、deck.vue側でcolumnに対してfirst-of-typeを効かせるため -->
<section <section
v-hotkey="keymap" class="dnpfarvg _narrow_" v-hotkey="keymap" class="dnpfarvg"
:class="{ paged: isMainColumn, naked, active, isStacked, draghover, dragging, dropready }" :class="{ paged: isMainColumn, naked, active, isStacked, draghover, dragging, dropready }"
@dragover.prevent.stop="onDragover" @dragover.prevent.stop="onDragover"
@dragleave="onDragleave" @dragleave="onDragleave"