sim1222/misskey
1
0
Fork 0
mirror of https://github.com/sim1222/misskey.git synced 2025-08-06 16:53:58 +09:00
Code Issues Projects Releases 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>
</I18n>
</template>
<div class="dpvffvvy _monolithic_">
<div class="_section">
<div class="dpvffvvy _autoGap">
<div class="">
<MkTextarea v-model="comment">
<template #label>{{ i18n.ts.details }}</template>
<template #caption>{{ i18n.ts.fillAbuseReportDescription }}</template>
</MkTextarea>
</div>
<div class="_section">
<div class="">
<MkButton primary full :disabled="comment.length === 0" @click="send">{{ i18n.ts.send }}</MkButton>
</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>
<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>
<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>
</div>
<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>
<XModalWindow
<MkModalWindow
ref="dialogEl"
:width="800"
:height="500"
@ -22,7 +22,7 @@
</div>
</div>
</template>
</XModalWindow>
</MkModalWindow>
</template>
<script lang="ts" setup>
@ -30,7 +30,7 @@ import { nextTick, onMounted } from 'vue';
import * as misskey from 'misskey-js';
import Cropper from 'cropperjs';
import tinycolor from 'tinycolor2';
import XModalWindow from '@/components/MkModalWindow.vue';
import MkModalWindow from '@/components/MkModalWindow.vue';
import * as os from '@/os';
import { $i } from '@/account';
import { defaultStore } from '@/store';
@ -50,7 +50,7 @@ const props = defineProps<{
}>();
const imgUrl = getProxiedImageUrl(props.file.url);
let dialogEl = $shallowRef<InstanceType<typeof XModalWindow>>();
let dialogEl = $shallowRef<InstanceType<typeof MkModalWindow>>();
let imgEl = $shallowRef<HTMLImageElement>();
let cropper: Cropper | null = null;
let loading = $ref(true);

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

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

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

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

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

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

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

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

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

@ -1,5 +1,5 @@
<template>
<XModalWindow
<MkModalWindow
ref="dialog"
:width="450"
:can-close="false"
@ -51,7 +51,7 @@
</template>
</div>
</MkSpacer>
</XModalWindow>
</MkModalWindow>
</template>
<script lang="ts">
@ -63,11 +63,11 @@ import FormSelect from './form/select.vue';
import FormRange from './form/range.vue';
import MkButton from './MkButton.vue';
import FormRadios from './form/radios.vue';
import XModalWindow from '@/components/MkModalWindow.vue';
import MkModalWindow from '@/components/MkModalWindow.vue';
export default defineComponent({
components: {
XModalWindow,
MkModalWindow,
FormInput,
FormTextarea,
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%);
overflow: auto;
display: flex;
container-type: inline-size;
@media (max-width: 500px) {
padding: 16px;

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

@ -1,6 +1,6 @@
<template>
<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">
<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>

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

@ -1,6 +1,6 @@
<template>
<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">
<button v-if="withOkButton" class="_button" @click="$emit('close')"><i class="ti ti-x"></i></button>
<span class="title">
@ -89,6 +89,7 @@ defineExpose({
display: flex;
flex-direction: column;
contain: content;
container-type: inline-size;
border-radius: var(--radius);
--root-margin: 24px;

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

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

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

@ -1,5 +1,5 @@
<template>
<XModalWindow
<MkModalWindow
ref="dialog"
:width="400"
:height="450"
@ -21,7 +21,7 @@
</template>
<template v-if="!useGlobalSetting">
<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="enableAll">{{ i18n.ts.enableAll }}</MkButton>
</div>
@ -29,7 +29,7 @@
</template>
</div>
</MkSpacer>
</XModalWindow>
</MkModalWindow>
</template>
<script lang="ts" setup>
@ -38,7 +38,7 @@ import { notificationTypes } from 'misskey-js';
import MkSwitch from './form/switch.vue';
import MkInfo from './MkInfo.vue';
import MkButton from './MkButton.vue';
import XModalWindow from '@/components/MkModalWindow.vue';
import MkModalWindow from '@/components/MkModalWindow.vue';
import { i18n } from '@/i18n';
const emit = defineEmits<{
@ -56,7 +56,7 @@ const props = withDefaults(defineProps<{
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 useGlobalSetting = $ref((includingTypes === null || includingTypes.length === 0) && props.showGlobalToggle);

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

@ -1,5 +1,5 @@
<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>
<article>
<header>

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

@ -1,5 +1,5 @@
<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>
<script lang="ts" setup>

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

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

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

@ -1,6 +1,6 @@
<template>
<form class="eppvobhk _monolithic_" :class="{ signing, totpLogin }" @submit.prevent="onSubmit">
<div class="auth _section _autoGap">
<form class="eppvobhk" :class="{ signing, totpLogin }" @submit.prevent="onSubmit">
<div class="auth _autoGap">
<div v-show="withAvatar" class="avatar" :style="{ backgroundImage: user ? `url('${ user.avatarUrl }')` : null, marginBottom: message ? '1.5em' : null }"></div>
<MkInfo v-if="message">
{{ message }}
@ -40,7 +40,7 @@
</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.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>

12
packages/frontend/src/components/MkSigninDialog.vue
View File

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

16
packages/frontend/src/components/MkSignupDialog.vue
View File

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

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

@ -1,5 +1,5 @@
<template>
<XModalWindow
<MkModalWindow
ref="dialog"
:width="400"
:height="450"
@ -23,14 +23,14 @@
</MkInput>
</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="enableAll">{{ i18n.ts.enableAll }}</MkButton>
</div>
<MkSwitch v-for="kind in (initialPermissions || kinds)" :key="kind" v-model="permissions[kind]">{{ $t(`_permissions.${kind}`) }}</MkSwitch>
</div>
</MkSpacer>
</XModalWindow>
</MkModalWindow>
</template>
<script lang="ts" setup>
@ -40,7 +40,7 @@ import MkInput from './form/input.vue';
import MkSwitch from './form/switch.vue';
import MkButton from './MkButton.vue';
import MkInfo from './MkInfo.vue';
import XModalWindow from '@/components/MkModalWindow.vue';
import MkModalWindow from '@/components/MkModalWindow.vue';
import { i18n } from '@/i18n';
const props = withDefaults(defineProps<{
@ -60,7 +60,7 @@ const emit = defineEmits<{
(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 permissions = $ref({});

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

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

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

@ -1,7 +1,7 @@
<template>
<Transition :name="$store.state.animation ? 'window' : ''" appear @after-leave="$emit('closed')">
<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">
<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>