sendnrw/misskey
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor

Browse Source
This commit is contained in:
syuilo
2023-01-07 15:09:46 +09:00
parent 49a0b6c48b
commit 58bfb4dca4
83 changed files with 353 additions and 353 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
packages/frontend/src/pages/settings/2fa.vue
View File

@@ -70,7 +70,7 @@ import { hostname } from '@/config';
import { byteify, hexify, stringify } from '@/scripts/2fa';
import MkButton from '@/components/MkButton.vue';
import MkInfo from '@/components/MkInfo.vue';
import MkInput from '@/components/form/input.vue';
import MkInput from '@/components/MkInput.vue';
import MkSwitch from '@/components/MkSwitch.vue';
import * as os from '@/os';
import { $i } from '@/account';

6
packages/frontend/src/pages/settings/custom-css.vue
View File

@@ -2,15 +2,15 @@
<div class="_gaps_m">
<FormInfo warn>{{ i18n.ts.customCssWarn }}</FormInfo>
<FormTextarea v-model="localCustomCss" manual-save tall class="_monospace" style="tab-size: 2;">
<MkTextarea v-model="localCustomCss" manual-save tall class="_monospace" style="tab-size: 2;">
<template #label>CSS</template>
</FormTextarea>
</MkTextarea>
</div>
</template>
<script lang="ts" setup>
import { ref, watch } from 'vue';
import FormTextarea from '@/components/form/textarea.vue';
import MkTextarea from '@/components/MkTextarea.vue';
import FormInfo from '@/components/MkInfo.vue';
import * as os from '@/os';
import { unisonReload } from '@/scripts/unison-reload';

8
packages/frontend/src/pages/settings/deck.vue
View File

@@ -4,11 +4,11 @@
<MkSwitch v-model="alwaysShowMainColumn">{{ i18n.ts._deck.alwaysShowMainColumn }}</MkSwitch>
<FormRadios v-model="columnAlign">
<MkRadios v-model="columnAlign">
<template #label>{{ i18n.ts._deck.columnAlign }}</template>
<option value="left">{{ i18n.ts.left }}</option>
<option value="center">{{ i18n.ts.center }}</option>
</FormRadios>
</MkRadios>
</div>
</template>
@@ -16,8 +16,8 @@
import { computed, watch } from 'vue';
import MkSwitch from '@/components/MkSwitch.vue';
import FormLink from '@/components/form/link.vue';
import FormRadios from '@/components/form/radios.vue';
import FormInput from '@/components/form/input.vue';
import MkRadios from '@/components/MkRadios.vue';
import MkInput from '@/components/MkInput.vue';
import { deckStore } from '@/ui/deck/deck-store';
import * as os from '@/os';
import { unisonReload } from '@/scripts/unison-reload';

6
packages/frontend/src/pages/settings/email.vue
View File

@@ -2,11 +2,11 @@
<div class="_gaps_m">
<FormSection first>
<template #label>{{ i18n.ts.emailAddress }}</template>
<FormInput v-model="emailAddress" type="email" manual-save>
<MkInput v-model="emailAddress" type="email" manual-save>
<template #prefix><i class="ti ti-mail"></i></template>
<template v-if="$i.email && !$i.emailVerified" #caption>{{ i18n.ts.verificationEmailSent }}</template>
<template v-else-if="emailAddress === $i.email && $i.emailVerified" #caption><i class="ti ti-check" style="color: var(--success);"></i> {{ i18n.ts.emailVerified }}</template>
</FormInput>
</MkInput>
</FormSection>
<FormSection>
@@ -45,7 +45,7 @@
<script lang="ts" setup>
import { onMounted, ref, watch } from 'vue';
import FormSection from '@/components/form/section.vue';
import FormInput from '@/components/form/input.vue';
import MkInput from '@/components/MkInput.vue';
import MkSwitch from '@/components/MkSwitch.vue';
import * as os from '@/os';
import { $i } from '@/account';

38
packages/frontend/src/pages/settings/general.vue
View File

@@ -1,6 +1,6 @@
<template>
<div class="_gaps_m">
<FormSelect v-model="lang">
<MkSelect v-model="lang">
<template #label>{{ i18n.ts.uiLanguage }}</template>
<option v-for="x in langs" :key="x[0]" :value="x[0]">{{ x[1] }}</option>
<template #caption>
@@ -10,15 +10,15 @@
</template>
</I18n>
</template>
</FormSelect>
</MkSelect>
<FormRadios v-model="overridedDeviceKind">
<MkRadios v-model="overridedDeviceKind">
<template #label>{{ i18n.ts.overridedDeviceKind }}</template>
<option :value="null">{{ i18n.ts.auto }}</option>
<option value="smartphone"><i class="ti ti-device-mobile"/> {{ i18n.ts.smartphone }}</option>
<option value="tablet"><i class="ti ti-device-tablet"/> {{ i18n.ts.tablet }}</option>
<option value="desktop"><i class="ti ti-device-desktop"/> {{ i18n.ts.desktop }}</option>
</FormRadios>
</MkRadios>
<MkSwitch v-model="showFixedPostForm">{{ i18n.ts.showFixedPostForm }}</MkSwitch>
@@ -31,12 +31,12 @@
<MkSwitch v-model="enableInfiniteScroll">{{ i18n.ts.enableInfiniteScroll }}</MkSwitch>
<MkSwitch v-model="useReactionPickerForContextMenu">{{ i18n.ts.useReactionPickerForContextMenu }}</MkSwitch>
</div>
<FormSelect v-model="serverDisconnectedBehavior">
<MkSelect v-model="serverDisconnectedBehavior">
<template #label>{{ i18n.ts.whenServerDisconnected }}</template>
<option value="reload">{{ i18n.ts._serverDisconnectedBehavior.reload }}</option>
<option value="dialog">{{ i18n.ts._serverDisconnectedBehavior.dialog }}</option>
<option value="quiet">{{ i18n.ts._serverDisconnectedBehavior.quiet }}</option>
</FormSelect>
</MkSelect>
</div>
</FormSection>
@@ -57,22 +57,22 @@
<MkSwitch v-model="disableDrawer">{{ i18n.ts.disableDrawer }}</MkSwitch>
</div>
<div>
<FormRadios v-model="emojiStyle">
<MkRadios v-model="emojiStyle">
<template #label>{{ i18n.ts.emojiStyle }}</template>
<option value="native">{{ i18n.ts.native }}</option>
<option value="fluentEmoji">Fluent Emoji</option>
<option value="twemoji">Twemoji</option>
</FormRadios>
</MkRadios>
<div style="margin: 8px 0 0 0; font-size: 1.5em;"><Mfm :key="emojiStyle" text="🍮🍦🍭🍩🍰🍫🍬🥞🍪"/></div>
</div>
<FormRadios v-model="fontSize">
<MkRadios v-model="fontSize">
<template #label>{{ i18n.ts.fontSize }}</template>
<option :value="null"><span style="font-size: 14px;">Aa</span></option>
<option value="1"><span style="font-size: 15px;">Aa</span></option>
<option value="2"><span style="font-size: 16px;">Aa</span></option>
<option value="3"><span style="font-size: 17px;">Aa</span></option>
</FormRadios>
</MkRadios>
</div>
</FormSection>
@@ -80,24 +80,24 @@
<MkSwitch v-model="aiChanMode">{{ i18n.ts.aiChanMode }}</MkSwitch>
</FormSection>
<FormSelect v-model="instanceTicker">
<MkSelect v-model="instanceTicker">
<template #label>{{ i18n.ts.instanceTicker }}</template>
<option value="none">{{ i18n.ts._instanceTicker.none }}</option>
<option value="remote">{{ i18n.ts._instanceTicker.remote }}</option>
<option value="always">{{ i18n.ts._instanceTicker.always }}</option>
</FormSelect>
</MkSelect>
<FormSelect v-model="nsfw">
<MkSelect v-model="nsfw">
<template #label>{{ i18n.ts.nsfw }}</template>
<option value="respect">{{ i18n.ts._nsfw.respect }}</option>
<option value="ignore">{{ i18n.ts._nsfw.ignore }}</option>
<option value="force">{{ i18n.ts._nsfw.force }}</option>
</FormSelect>
</MkSelect>
<FormRange v-model="numberOfPageCache" :min="1" :max="10" :step="1" easing>
<MkRange v-model="numberOfPageCache" :min="1" :max="10" :step="1" easing>
<template #label>{{ i18n.ts.numberOfPageCache }}</template>
<template #caption>{{ i18n.ts.numberOfPageCacheDescription }}</template>
</FormRange>
</MkRange>
<FormLink to="/settings/deck">{{ i18n.ts.deck }}</FormLink>
@@ -108,9 +108,9 @@
<script lang="ts" setup>
import { computed, ref, watch } from 'vue';
import MkSwitch from '@/components/MkSwitch.vue';
import FormSelect from '@/components/form/select.vue';
import FormRadios from '@/components/form/radios.vue';
import FormRange from '@/components/form/range.vue';
import MkSelect from '@/components/MkSelect.vue';
import MkRadios from '@/components/MkRadios.vue';
import MkRange from '@/components/MkRange.vue';
import FormSection from '@/components/form/section.vue';
import FormLink from '@/components/form/link.vue';
import MkLink from '@/components/MkLink.vue';

6
packages/frontend/src/pages/settings/instance-mute.vue
View File

@@ -1,17 +1,17 @@
<template>
<div class="_gaps_m">
<MkInfo>{{ i18n.ts._instanceMute.title }}</MkInfo>
<FormTextarea v-model="instanceMutes">
<MkTextarea v-model="instanceMutes">
<template #label>{{ i18n.ts._instanceMute.heading }}</template>
<template #caption>{{ i18n.ts._instanceMute.instanceMuteDescription }}<br>{{ i18n.ts._instanceMute.instanceMuteDescription2 }}</template>
</FormTextarea>
</MkTextarea>
<MkButton primary :disabled="!changed" @click="save()"><i class="ti ti-device-floppy"></i> {{ i18n.ts.save }}</MkButton>
</div>
</template>
<script lang="ts" setup>
import { ref, watch } from 'vue';
import FormTextarea from '@/components/form/textarea.vue';
import MkTextarea from '@/components/MkTextarea.vue';
import MkInfo from '@/components/MkInfo.vue';
import MkButton from '@/components/MkButton.vue';
import * as os from '@/os';

12
packages/frontend/src/pages/settings/navbar.vue
View File

@@ -1,17 +1,17 @@
<template>
<div class="_gaps_m">
<FormTextarea v-model="items" tall manual-save>
<MkTextarea v-model="items" tall manual-save>
<template #label>{{ i18n.ts.navbar }}</template>
<template #caption><button class="_textButton" @click="addItem">{{ i18n.ts.addItem }}</button></template>
</FormTextarea>
</MkTextarea>
<FormRadios v-model="menuDisplay">
<MkRadios v-model="menuDisplay">
<template #label>{{ i18n.ts.display }}</template>
<option value="sideFull">{{ i18n.ts._menuDisplay.sideFull }}</option>
<option value="sideIcon">{{ i18n.ts._menuDisplay.sideIcon }}</option>
<option value="top">{{ i18n.ts._menuDisplay.top }}</option>
<!-- <MkRadio v-model="menuDisplay" value="hide" disabled>{{ i18n.ts._menuDisplay.hide }}</MkRadio>--> <!-- TODO: サイドバーを完全に隠せるようにすると、別途ハンバーガーボタンのようなものをUIに表示する必要があり面倒 -->
</FormRadios>
</MkRadios>
<MkButton danger @click="reset()"><i class="ti ti-reload"></i> {{ i18n.ts.default }}</MkButton>
</div>
@@ -19,8 +19,8 @@
<script lang="ts" setup>
import { computed, ref, watch } from 'vue';
import FormTextarea from '@/components/form/textarea.vue';
import FormRadios from '@/components/form/radios.vue';
import MkTextarea from '@/components/MkTextarea.vue';
import MkRadios from '@/components/MkRadios.vue';
import MkButton from '@/components/MkButton.vue';
import * as os from '@/os';
import { navbarItemDef } from '@/navbar';

6
packages/frontend/src/pages/settings/plugin.install.vue
View File

@@ -2,9 +2,9 @@
<div class="_gaps_m">
<FormInfo warn>{{ i18n.ts._plugin.installWarn }}</FormInfo>
<FormTextarea v-model="code" tall>
<MkTextarea v-model="code" tall>
<template #label>{{ i18n.ts.code }}</template>
</FormTextarea>
</MkTextarea>
<div>
<MkButton :disabled="code == null" primary inline @click="install"><i class="ti ti-check"></i> {{ i18n.ts.install }}</MkButton>
@@ -16,7 +16,7 @@
import { defineAsyncComponent, nextTick, ref } from 'vue';
import { Interpreter, Parser, utils } from '@syuilo/aiscript';
import { v4 as uuid } from 'uuid';
import FormTextarea from '@/components/form/textarea.vue';
import MkTextarea from '@/components/MkTextarea.vue';
import MkButton from '@/components/MkButton.vue';
import FormInfo from '@/components/MkInfo.vue';
import * as os from '@/os';

10
packages/frontend/src/pages/settings/privacy.vue
View File

@@ -8,13 +8,13 @@
<template #caption>{{ i18n.ts.makeReactionsPublicDescription }}</template>
</MkSwitch>
<FormSelect v-model="ffVisibility" @update:model-value="save()">
<MkSelect v-model="ffVisibility" @update:model-value="save()">
<template #label>{{ i18n.ts.ffVisibility }}</template>
<option value="public">{{ i18n.ts._ffVisibility.public }}</option>
<option value="followers">{{ i18n.ts._ffVisibility.followers }}</option>
<option value="private">{{ i18n.ts._ffVisibility.private }}</option>
<template #caption>{{ i18n.ts.ffVisibilityDescription }}</template>
</FormSelect>
</MkSelect>
<MkSwitch v-model="hideOnlineStatus" @update:model-value="save()">
{{ i18n.ts.hideOnlineStatus }}
@@ -40,12 +40,12 @@
<template v-else-if="defaultNoteVisibility === 'specified'" #suffix>{{ i18n.ts._visibility.specified }}</template>
<div class="_gaps_m">
<FormSelect v-model="defaultNoteVisibility">
<MkSelect v-model="defaultNoteVisibility">
<option value="public">{{ i18n.ts._visibility.public }}</option>
<option value="home">{{ i18n.ts._visibility.home }}</option>
<option value="followers">{{ i18n.ts._visibility.followers }}</option>
<option value="specified">{{ i18n.ts._visibility.specified }}</option>
</FormSelect>
</MkSelect>
<MkSwitch v-model="defaultNoteLocalOnly">{{ i18n.ts._visibility.localOnly }}</MkSwitch>
</div>
</FormFolder>
@@ -59,7 +59,7 @@
<script lang="ts" setup>
import { } from 'vue';
import MkSwitch from '@/components/MkSwitch.vue';
import FormSelect from '@/components/form/select.vue';
import MkSelect from '@/components/MkSelect.vue';
import FormSection from '@/components/form/section.vue';
import FormFolder from '@/components/form/folder.vue';
import * as os from '@/os';

34
packages/frontend/src/pages/settings/profile.vue
View File

@@ -8,29 +8,29 @@
<MkButton primary rounded class="bannerEdit" @click="changeBanner">{{ i18n.ts._profile.changeBanner }}</MkButton>
</div>
<FormInput v-model="profile.name" :max="30" manual-save>
<MkInput v-model="profile.name" :max="30" manual-save>
<template #label>{{ i18n.ts._profile.name }}</template>
</FormInput>
</MkInput>
<FormTextarea v-model="profile.description" :max="500" tall manual-save>
<MkTextarea v-model="profile.description" :max="500" tall manual-save>
<template #label>{{ i18n.ts._profile.description }}</template>
<template #caption>{{ i18n.ts._profile.youCanIncludeHashtags }}</template>
</FormTextarea>
</MkTextarea>
<FormInput v-model="profile.location" manual-save>
<MkInput v-model="profile.location" manual-save>
<template #label>{{ i18n.ts.location }}</template>
<template #prefix><i class="ti ti-map-pin"></i></template>
</FormInput>
</MkInput>
<FormInput v-model="profile.birthday" type="date" manual-save>
<MkInput v-model="profile.birthday" type="date" manual-save>
<template #label>{{ i18n.ts.birthday }}</template>
<template #prefix><i class="ti ti-cake"></i></template>
</FormInput>
</MkInput>
<FormSelect v-model="profile.lang">
<MkSelect v-model="profile.lang">
<template #label>{{ i18n.ts.language }}</template>
<option v-for="x in Object.keys(langmap)" :key="x" :value="x">{{ langmap[x].nativeName }}</option>
</FormSelect>
</MkSelect>
<FormSlot>
<FormFolder>
@@ -39,12 +39,12 @@
<div class="_gaps_m">
<FormSplit v-for="(record, i) in fields" :min-width="250">
<FormInput v-model="record.name" small>
<MkInput v-model="record.name" small>
<template #label>{{ i18n.ts._profile.metadataLabel }} #{{ i + 1 }}</template>
</FormInput>
<FormInput v-model="record.value" small>
</MkInput>
<MkInput v-model="record.value" small>
<template #label>{{ i18n.ts._profile.metadataContent }} #{{ i + 1 }}</template>
</FormInput>
</MkInput>
</FormSplit>
<div>
<MkButton :disabled="fields.length >= 16" inline style="margin-right: 8px;" @click="addField"><i class="ti ti-plus"></i> {{ i18n.ts.add }}</MkButton>
@@ -71,10 +71,10 @@
<script lang="ts" setup>
import { reactive, watch } from 'vue';
import MkButton from '@/components/MkButton.vue';
import FormInput from '@/components/form/input.vue';
import FormTextarea from '@/components/form/textarea.vue';
import MkInput from '@/components/MkInput.vue';
import MkTextarea from '@/components/MkTextarea.vue';
import MkSwitch from '@/components/MkSwitch.vue';
import FormSelect from '@/components/form/select.vue';
import MkSelect from '@/components/MkSelect.vue';
import FormSplit from '@/components/form/split.vue';
import FormFolder from '@/components/form/folder.vue';
import FormSlot from '@/components/form/slot.vue';

16
packages/frontend/src/pages/settings/reaction.vue
View File

@@ -17,27 +17,27 @@
<template #caption>{{ i18n.ts.reactionSettingDescription2 }} <button class="_textButton" @click="preview">{{ i18n.ts.preview }}</button></template>
</FromSlot>
<FormRadios v-model="reactionPickerSize">
<MkRadios v-model="reactionPickerSize">
<template #label>{{ i18n.ts.size }}</template>
<option :value="1">{{ i18n.ts.small }}</option>
<option :value="2">{{ i18n.ts.medium }}</option>
<option :value="3">{{ i18n.ts.large }}</option>
</FormRadios>
<FormRadios v-model="reactionPickerWidth">
</MkRadios>
<MkRadios v-model="reactionPickerWidth">
<template #label>{{ i18n.ts.numberOfColumn }}</template>
<option :value="1">5</option>
<option :value="2">6</option>
<option :value="3">7</option>
<option :value="4">8</option>
<option :value="5">9</option>
</FormRadios>
<FormRadios v-model="reactionPickerHeight">
</MkRadios>
<MkRadios v-model="reactionPickerHeight">
<template #label>{{ i18n.ts.height }}</template>
<option :value="1">{{ i18n.ts.small }}</option>
<option :value="2">{{ i18n.ts.medium }}</option>
<option :value="3">{{ i18n.ts.large }}</option>
<option :value="4">{{ i18n.ts.large }}+</option>
</FormRadios>
</MkRadios>
<MkSwitch v-model="reactionPickerUseDrawerForMobile">
{{ i18n.ts.useDrawerReactionPickerForMobile }}
@@ -56,8 +56,8 @@
<script lang="ts" setup>
import { defineAsyncComponent, watch } from 'vue';
import Sortable from 'vuedraggable';
import FormInput from '@/components/form/input.vue';
import FormRadios from '@/components/form/radios.vue';
import MkInput from '@/components/MkInput.vue';
import MkRadios from '@/components/MkRadios.vue';
import FromSlot from '@/components/form/slot.vue';
import MkButton from '@/components/MkButton.vue';
import FormSection from '@/components/form/section.vue';

12
packages/frontend/src/pages/settings/sounds.sound.vue
View File

@@ -1,12 +1,12 @@
<template>
<div class="_gaps_m">
<FormSelect v-model="type">
<MkSelect v-model="type">
<template #label>{{ i18n.ts.sound }}</template>
<option v-for="x in soundsTypes" :key="x" :value="x">{{ x == null ? i18n.ts.none : x }}</option>
</FormSelect>
<FormRange v-model="volume" :min="0" :max="1" :step="0.05" :text-converter="(v) => `${Math.floor(v * 100)}%`">
</MkSelect>
<MkRange v-model="volume" :min="0" :max="1" :step="0.05" :text-converter="(v) => `${Math.floor(v * 100)}%`">
<template #label>{{ i18n.ts.volume }}</template>
</FormRange>
</MkRange>
<div class="_buttons">
<MkButton inline @click="listen"><i class="ti ti-player-play"></i> {{ i18n.ts.listen }}</MkButton>
@@ -17,9 +17,9 @@
<script lang="ts" setup>
import { } from 'vue';
import FormSelect from '@/components/form/select.vue';
import MkSelect from '@/components/MkSelect.vue';
import MkButton from '@/components/MkButton.vue';
import FormRange from '@/components/form/range.vue';
import MkRange from '@/components/MkRange.vue';
import { i18n } from '@/i18n';
import { playFile, soundsTypes } from '@/scripts/sound';

6
packages/frontend/src/pages/settings/sounds.vue
View File

@@ -1,8 +1,8 @@
<template>
<div class="_gaps_m">
<FormRange v-model="masterVolume" :min="0" :max="1" :step="0.05" :text-converter="(v) => `${Math.floor(v * 100)}%`">
<MkRange v-model="masterVolume" :min="0" :max="1" :step="0.05" :text-converter="(v) => `${Math.floor(v * 100)}%`">
<template #label>{{ i18n.ts.masterVolume }}</template>
</FormRange>
</MkRange>
<FormSection>
<template #label>{{ i18n.ts.sounds }}</template>
@@ -23,7 +23,7 @@
<script lang="ts" setup>
import { computed, ref } from 'vue';
import XSound from './sounds.sound.vue';
import FormRange from '@/components/form/range.vue';
import MkRange from '@/components/MkRange.vue';
import MkButton from '@/components/MkButton.vue';
import FormLink from '@/components/form/link.vue';
import FormSection from '@/components/form/section.vue';

32
packages/frontend/src/pages/settings/statusbar.statusbar.vue
View File

@@ -1,11 +1,11 @@
<template>
<div class="_gaps_m">
<FormSelect v-model="statusbar.type" placeholder="Please select">
<MkSelect v-model="statusbar.type" placeholder="Please select">
<template #label>{{ i18n.ts.type }}</template>
<option value="rss">RSS</option>
<option value="federation">Federation</option>
<option value="userList">User list timeline</option>
</FormSelect>
</MkSelect>
<MkInput v-model="statusbar.name" manual-save>
<template #label>{{ i18n.ts.label }}</template>
@@ -15,14 +15,14 @@
<template #label>Black</template>
</MkSwitch>
<FormRadios v-model="statusbar.size">
<MkRadios v-model="statusbar.size">
<template #label>{{ i18n.ts.size }}</template>
<option value="verySmall">{{ i18n.ts.small }}+</option>
<option value="small">{{ i18n.ts.small }}</option>
<option value="medium">{{ i18n.ts.medium }}</option>
<option value="large">{{ i18n.ts.large }}</option>
<option value="veryLarge">{{ i18n.ts.large }}+</option>
</FormRadios>
</MkRadios>
<template v-if="statusbar.type === 'rss'">
<MkInput v-model="statusbar.props.url" manual-save type="url">
@@ -34,10 +34,10 @@
<MkInput v-model="statusbar.props.refreshIntervalSec" manual-save type="number">
<template #label>{{ i18n.ts.refreshInterval }}</template>
</MkInput>
<FormRange v-model="statusbar.props.marqueeDuration" :min="5" :max="150" :step="1">
<MkRange v-model="statusbar.props.marqueeDuration" :min="5" :max="150" :step="1">
<template #label>{{ i18n.ts.speed }}</template>
<template #caption>{{ i18n.ts.fast }} &lt;-&gt; {{ i18n.ts.slow }}</template>
</FormRange>
</MkRange>
<MkSwitch v-model="statusbar.props.marqueeReverse">
<template #label>{{ i18n.ts.reverse }}</template>
</MkSwitch>
@@ -46,10 +46,10 @@
<MkInput v-model="statusbar.props.refreshIntervalSec" manual-save type="number">
<template #label>{{ i18n.ts.refreshInterval }}</template>
</MkInput>
<FormRange v-model="statusbar.props.marqueeDuration" :min="5" :max="150" :step="1">
<MkRange v-model="statusbar.props.marqueeDuration" :min="5" :max="150" :step="1">
<template #label>{{ i18n.ts.speed }}</template>
<template #caption>{{ i18n.ts.fast }} &lt;-&gt; {{ i18n.ts.slow }}</template>
</FormRange>
</MkRange>
<MkSwitch v-model="statusbar.props.marqueeReverse">
<template #label>{{ i18n.ts.reverse }}</template>
</MkSwitch>
@@ -58,17 +58,17 @@
</MkSwitch>
</template>
<template v-else-if="statusbar.type === 'userList' && userLists != null">
<FormSelect v-model="statusbar.props.userListId">
<MkSelect v-model="statusbar.props.userListId">
<template #label>{{ i18n.ts.userList }}</template>
<option v-for="list in userLists" :value="list.id">{{ list.name }}</option>
</FormSelect>
</MkSelect>
<MkInput v-model="statusbar.props.refreshIntervalSec" manual-save type="number">
<template #label>{{ i18n.ts.refreshInterval }}</template>
</MkInput>
<FormRange v-model="statusbar.props.marqueeDuration" :min="5" :max="150" :step="1">
<MkRange v-model="statusbar.props.marqueeDuration" :min="5" :max="150" :step="1">
<template #label>{{ i18n.ts.speed }}</template>
<template #caption>{{ i18n.ts.fast }} &lt;-&gt; {{ i18n.ts.slow }}</template>
</FormRange>
</MkRange>
<MkSwitch v-model="statusbar.props.marqueeReverse">
<template #label>{{ i18n.ts.reverse }}</template>
</MkSwitch>
@@ -82,12 +82,12 @@
<script lang="ts" setup>
import { computed, reactive, ref, watch } from 'vue';
import FormSelect from '@/components/form/select.vue';
import MkInput from '@/components/form/input.vue';
import MkSelect from '@/components/MkSelect.vue';
import MkInput from '@/components/MkInput.vue';
import MkSwitch from '@/components/MkSwitch.vue';
import FormRadios from '@/components/form/radios.vue';
import MkRadios from '@/components/MkRadios.vue';
import MkButton from '@/components/MkButton.vue';
import FormRange from '@/components/form/range.vue';
import MkRange from '@/components/MkRange.vue';
import * as os from '@/os';
import { defaultStore } from '@/store';
import { i18n } from '@/i18n';

2
packages/frontend/src/pages/settings/statusbar.vue
View File

@@ -13,7 +13,7 @@
import { computed, onMounted, ref, watch } from 'vue';
import { v4 as uuid } from 'uuid';
import XStatusbar from './statusbar.statusbar.vue';
import FormRadios from '@/components/form/radios.vue';
import MkRadios from '@/components/MkRadios.vue';
import FormFolder from '@/components/form/folder.vue';
import MkButton from '@/components/MkButton.vue';
import * as os from '@/os';

6
packages/frontend/src/pages/settings/theme.install.vue
View File

@@ -1,8 +1,8 @@
<template>
<div class="_gaps_m">
<FormTextarea v-model="installThemeCode">
<MkTextarea v-model="installThemeCode">
<template #label>{{ i18n.ts._theme.code }}</template>
</FormTextarea>
</MkTextarea>
<div class="_buttons">
<MkButton :disabled="installThemeCode == null" inline @click="() => preview(installThemeCode)"><i class="ti ti-eye"></i> {{ i18n.ts.preview }}</MkButton>
@@ -14,7 +14,7 @@
<script lang="ts" setup>
import { } from 'vue';
import JSON5 from 'json5';
import FormTextarea from '@/components/form/textarea.vue';
import MkTextarea from '@/components/MkTextarea.vue';
import MkButton from '@/components/MkButton.vue';
import { applyTheme, validateTheme } from '@/scripts/theme';
import * as os from '@/os';

22
packages/frontend/src/pages/settings/theme.manage.vue
View File

@@ -1,6 +1,6 @@
<template>
<div class="_gaps_m">
<FormSelect v-model="selectedThemeId">
<MkSelect v-model="selectedThemeId">
<template #label>{{ i18n.ts.theme }}</template>
<optgroup :label="i18n.ts._theme.installedThemes">
<option v-for="x in installedThemes" :key="x.id" :value="x.id">{{ x.name }}</option>
@@ -8,18 +8,18 @@
<optgroup :label="i18n.ts._theme.builtinThemes">
<option v-for="x in builtinThemes" :key="x.id" :value="x.id">{{ x.name }}</option>
</optgroup>
</FormSelect>
</MkSelect>
<template v-if="selectedTheme">
<FormInput readonly :model-value="selectedTheme.author">
<MkInput readonly :model-value="selectedTheme.author">
<template #label>{{ i18n.ts.author }}</template>
</FormInput>
<FormTextarea v-if="selectedTheme.desc" readonly :model-value="selectedTheme.desc">
</MkInput>
<MkTextarea v-if="selectedTheme.desc" readonly :model-value="selectedTheme.desc">
<template #label>{{ i18n.ts._theme.description }}</template>
</FormTextarea>
<FormTextarea readonly tall :model-value="selectedThemeCode">
</MkTextarea>
<MkTextarea readonly tall :model-value="selectedThemeCode">
<template #label>{{ i18n.ts._theme.code }}</template>
<template #caption><button class="_textButton" @click="copyThemeCode()">{{ i18n.ts.copy }}</button></template>
</FormTextarea>
</MkTextarea>
<MkButton v-if="!builtinThemes.some(t => t.id == selectedTheme.id)" danger @click="uninstall()"><i class="ti ti-trash"></i> {{ i18n.ts.uninstall }}</MkButton>
</template>
</div>
@@ -28,9 +28,9 @@
<script lang="ts" setup>
import { computed, ref } from 'vue';
import JSON5 from 'json5';
import FormTextarea from '@/components/form/textarea.vue';
import FormSelect from '@/components/form/select.vue';
import FormInput from '@/components/form/input.vue';
import MkTextarea from '@/components/MkTextarea.vue';
import MkSelect from '@/components/MkSelect.vue';
import MkInput from '@/components/MkInput.vue';
import MkButton from '@/components/MkButton.vue';
import { Theme, getBuiltinThemesRef } from '@/scripts/theme';
import copyToClipboard from '@/scripts/copy-to-clipboard';

10
packages/frontend/src/pages/settings/theme.vue
View File

@@ -27,7 +27,7 @@
</div>
<div class="selects">
<FormSelect v-model="lightThemeId" large class="select">
<MkSelect v-model="lightThemeId" large class="select">
<template #label>{{ i18n.ts.themeForLightMode }}</template>
<template #prefix><i class="ti ti-sun"></i></template>
<option v-if="instanceLightTheme" :key="'instance:' + instanceLightTheme.id" :value="instanceLightTheme.id">{{ instanceLightTheme.name }}</option>
@@ -37,8 +37,8 @@
<optgroup :label="i18n.ts._theme.builtinThemes">
<option v-for="x in builtinLightThemes" :key="'builtin:' + x.id" :value="x.id">{{ x.name }}</option>
</optgroup>
</FormSelect>
<FormSelect v-model="darkThemeId" large class="select">
</MkSelect>
<MkSelect v-model="darkThemeId" large class="select">
<template #label>{{ i18n.ts.themeForDarkMode }}</template>
<template #prefix><i class="ti ti-moon"></i></template>
<option v-if="instanceDarkTheme" :key="'instance:' + instanceDarkTheme.id" :value="instanceDarkTheme.id">{{ instanceDarkTheme.name }}</option>
@@ -48,7 +48,7 @@
<optgroup :label="i18n.ts._theme.builtinThemes">
<option v-for="x in builtinDarkThemes" :key="'builtin:' + x.id" :value="x.id">{{ x.name }}</option>
</optgroup>
</FormSelect>
</MkSelect>
</div>
<FormSection>
@@ -69,7 +69,7 @@
import { computed, onActivated, ref, watch } from 'vue';
import JSON5 from 'json5';
import MkSwitch from '@/components/MkSwitch.vue';
import FormSelect from '@/components/form/select.vue';
import MkSelect from '@/components/MkSelect.vue';
import FormSection from '@/components/form/section.vue';
import FormLink from '@/components/form/link.vue';
import MkButton from '@/components/MkButton.vue';

14
packages/frontend/src/pages/settings/webhook.edit.vue
View File

@@ -1,17 +1,17 @@
<template>
<div class="_gaps_m">
<FormInput v-model="name">
<MkInput v-model="name">
<template #label>Name</template>
</FormInput>
</MkInput>
<FormInput v-model="url" type="url">
<MkInput v-model="url" type="url">
<template #label>URL</template>
</FormInput>
</MkInput>
<FormInput v-model="secret">
<MkInput v-model="secret">
<template #prefix><i class="ti ti-lock"></i></template>
<template #label>Secret</template>
</FormInput>
</MkInput>
<FormSection>
<template #label>Events</template>
@@ -37,7 +37,7 @@
<script lang="ts" setup>
import { } from 'vue';
import FormInput from '@/components/form/input.vue';
import MkInput from '@/components/MkInput.vue';
import FormSection from '@/components/form/section.vue';
import MkSwitch from '@/components/MkSwitch.vue';
import MkButton from '@/components/MkButton.vue';

14
packages/frontend/src/pages/settings/webhook.new.vue
View File

@@ -1,17 +1,17 @@
<template>
<div class="_gaps_m">
<FormInput v-model="name">
<MkInput v-model="name">
<template #label>Name</template>
</FormInput>
</MkInput>
<FormInput v-model="url" type="url">
<MkInput v-model="url" type="url">
<template #label>URL</template>
</FormInput>
</MkInput>
<FormInput v-model="secret">
<MkInput v-model="secret">
<template #prefix><i class="ti ti-lock"></i></template>
<template #label>Secret</template>
</FormInput>
</MkInput>
<FormSection>
<template #label>Events</template>
@@ -35,7 +35,7 @@
<script lang="ts" setup>
import { } from 'vue';
import FormInput from '@/components/form/input.vue';
import MkInput from '@/components/MkInput.vue';
import FormSection from '@/components/form/section.vue';
import MkSwitch from '@/components/MkSwitch.vue';
import MkButton from '@/components/MkButton.vue';

10
packages/frontend/src/pages/settings/word-mute.vue
View File

@@ -7,17 +7,17 @@
<div>
<div v-show="tab === 'soft'" class="_gaps_m">
<MkInfo>{{ i18n.ts._wordMute.softDescription }}</MkInfo>
<FormTextarea v-model="softMutedWords">
<MkTextarea v-model="softMutedWords">
<span>{{ i18n.ts._wordMute.muteWords }}</span>
<template #caption>{{ i18n.ts._wordMute.muteWordsDescription }}<br>{{ i18n.ts._wordMute.muteWordsDescription2 }}</template>
</FormTextarea>
</MkTextarea>
</div>
<div v-show="tab === 'hard'" class="_gaps_m">
<MkInfo>{{ i18n.ts._wordMute.hardDescription }} {{ i18n.ts.reflectMayTakeTime }}</MkInfo>
<FormTextarea v-model="hardMutedWords">
<MkTextarea v-model="hardMutedWords">
<span>{{ i18n.ts._wordMute.muteWords }}</span>
<template #caption>{{ i18n.ts._wordMute.muteWordsDescription }}<br>{{ i18n.ts._wordMute.muteWordsDescription2 }}</template>
</FormTextarea>
</MkTextarea>
<MkKeyValue v-if="hardWordMutedNotesCount != null">
<template #key>{{ i18n.ts._wordMute.mutedNotes }}</template>
<template #value>{{ number(hardWordMutedNotesCount) }}</template>
@@ -30,7 +30,7 @@
<script lang="ts" setup>
import { ref, watch } from 'vue';
import FormTextarea from '@/components/form/textarea.vue';
import MkTextarea from '@/components/MkTextarea.vue';
import MkKeyValue from '@/components/MkKeyValue.vue';
import MkButton from '@/components/MkButton.vue';
import MkInfo from '@/components/MkInfo.vue';