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-05 21:04:56 +09:00
parent 58ae2ccbfa
commit 047262ab20
90 changed files with 949 additions and 884 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
packages/frontend/src/pages/settings/account-info.vue
View File

@@ -1,5 +1,5 @@
<template>
<div class="_formRoot">
<div class="_autoGap">
<MkKeyValue>
<template #key>ID</template>
<template #value><span class="_monospace">{{ $i.id }}</span></template>

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

@@ -1,5 +1,5 @@
<template>
<div class="_formRoot">
<div class="_autoGap">
<FormSuspense :p="init">
<FormButton primary @click="addAccount"><i class="ti ti-plus"></i> {{ i18n.ts.addAccount }}</FormButton>

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

@@ -1,8 +1,8 @@
<template>
<div class="_formRoot">
<FormButton primary class="_formBlock" @click="generateToken">{{ i18n.ts.generateAccessToken }}</FormButton>
<FormLink to="/settings/apps" class="_formBlock">{{ i18n.ts.manageAccessTokens }}</FormLink>
<FormLink to="/api-console" :behavior="isDesktop ? 'window' : null" class="_formBlock">API console</FormLink>
<div class="_autoGap">
<FormButton primary @click="generateToken">{{ i18n.ts.generateAccessToken }}</FormButton>
<FormLink to="/settings/apps">{{ i18n.ts.manageAccessTokens }}</FormLink>
<FormLink to="/api-console" :behavior="isDesktop ? 'window' : null">API console</FormLink>
</div>
</template>

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

@@ -1,5 +1,5 @@
<template>
<div class="_formRoot">
<div class="_autoGap">
<FormPagination ref="list" :pagination="pagination">
<template #empty>
<div class="_fullinfo">
@@ -8,20 +8,20 @@
</div>
</template>
<template #default="{items}">
<div v-for="token in items" :key="token.id" class="_panel _formBlock bfomjevm">
<div v-for="token in items" :key="token.id" class="_panel bfomjevm">
<img v-if="token.iconUrl" class="icon" :src="token.iconUrl" alt=""/>
<div class="body">
<div class="name">{{ token.name }}</div>
<div class="description">{{ token.description }}</div>
<MkKeyValue class="_formBlock" oneline>
<MkKeyValue oneline>
<template #key>{{ i18n.ts.installedDate }}</template>
<template #value><MkTime :time="token.createdAt"/></template>
</MkKeyValue>
<MkKeyValue class="_formBlock" oneline>
<MkKeyValue oneline>
<template #key>{{ i18n.ts.lastUsedDate }}</template>
<template #value><MkTime :time="token.lastUsedAt"/></template>
</MkKeyValue>
<details class="_formBlock">
<details>
<summary>{{ i18n.ts.details }}</summary>
<ul>
<li v-for="p in token.permission" :key="p">{{ $t(`_permissions.${p}`) }}</li>

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

@@ -1,8 +1,8 @@
<template>
<div class="_formRoot">
<FormInfo warn class="_formBlock">{{ i18n.ts.customCssWarn }}</FormInfo>
<div class="_autoGap">
<FormInfo warn>{{ i18n.ts.customCssWarn }}</FormInfo>
<FormTextarea v-model="localCustomCss" manual-save tall class="_monospace _formBlock" style="tab-size: 2;">
<FormTextarea v-model="localCustomCss" manual-save tall class="_monospace" style="tab-size: 2;">
<template #label>CSS</template>
</FormTextarea>
</div>

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

@@ -1,10 +1,10 @@
<template>
<div class="_formRoot">
<div class="_autoGap">
<FormSwitch v-model="navWindow">{{ i18n.ts.defaultNavigationBehaviour }}: {{ i18n.ts.openInWindow }}</FormSwitch>
<FormSwitch v-model="alwaysShowMainColumn" class="_formBlock">{{ i18n.ts._deck.alwaysShowMainColumn }}</FormSwitch>
<FormSwitch v-model="alwaysShowMainColumn">{{ i18n.ts._deck.alwaysShowMainColumn }}</FormSwitch>
<FormRadios v-model="columnAlign" class="_formBlock">
<FormRadios v-model="columnAlign">
<template #label>{{ i18n.ts._deck.columnAlign }}</template>
<option value="left">{{ i18n.ts.left }}</option>
<option value="center">{{ i18n.ts.center }}</option>

8
packages/frontend/src/pages/settings/delete-account.vue
View File

@@ -1,8 +1,8 @@
<template>
<div class="_formRoot">
<FormInfo warn class="_formBlock">{{ i18n.ts._accountDelete.mayTakeTime }}</FormInfo>
<FormInfo class="_formBlock">{{ i18n.ts._accountDelete.sendEmail }}</FormInfo>
<FormButton v-if="!$i.isDeleted" danger class="_formBlock" @click="deleteAccount">{{ i18n.ts._accountDelete.requestAccountDelete }}</FormButton>
<div class="_autoGap">
<FormInfo warn>{{ i18n.ts._accountDelete.mayTakeTime }}</FormInfo>
<FormInfo>{{ i18n.ts._accountDelete.sendEmail }}</FormInfo>
<FormButton v-if="!$i.isDeleted" danger @click="deleteAccount">{{ i18n.ts._accountDelete.requestAccountDelete }}</FormButton>
<FormButton v-else disabled>{{ i18n.ts._accountDelete.inProgress }}</FormButton>
</div>
</template>

65
packages/frontend/src/pages/settings/drive.vue
View File

@@ -1,20 +1,23 @@
<template>
<div class="_formRoot">
<FormSection v-if="!fetching">
<div class="_autoGap">
<FormSection v-if="!fetching" first>
<template #label>{{ i18n.ts.usageAmount }}</template>
<div class="_formBlock uawsfosz">
<div class="meter"><div :style="meterStyle"></div></div>
<div class="_autoGap">
<div class="uawsfosz">
<div class="meter"><div :style="meterStyle"></div></div>
</div>
<FormSplit>
<MkKeyValue>
<template #key>{{ i18n.ts.capacity }}</template>
<template #value>{{ bytes(capacity, 1) }}</template>
</MkKeyValue>
<MkKeyValue>
<template #key>{{ i18n.ts.inUse }}</template>
<template #value>{{ bytes(usage, 1) }}</template>
</MkKeyValue>
</FormSplit>
</div>
<FormSplit>
<MkKeyValue class="_formBlock">
<template #key>{{ i18n.ts.capacity }}</template>
<template #value>{{ bytes(capacity, 1) }}</template>
</MkKeyValue>
<MkKeyValue class="_formBlock">
<template #key>{{ i18n.ts.inUse }}</template>
<template #value>{{ bytes(usage, 1) }}</template>
</MkKeyValue>
</FormSplit>
</FormSection>
<FormSection>
@@ -23,22 +26,24 @@
</FormSection>
<FormSection>
<FormLink @click="chooseUploadFolder()">
{{ i18n.ts.uploadFolder }}
<template #suffix>{{ uploadFolder ? uploadFolder.name : '-' }}</template>
<template #suffixIcon><i class="fas fa-folder-open"></i></template>
</FormLink>
<FormSwitch v-model="keepOriginalUploading" class="_formBlock">
<template #label>{{ i18n.ts.keepOriginalUploading }}</template>
<template #caption>{{ i18n.ts.keepOriginalUploadingDescription }}</template>
</FormSwitch>
<FormSwitch v-model="alwaysMarkNsfw" class="_formBlock" @update:model-value="saveProfile()">
<template #label>{{ i18n.ts.alwaysMarkSensitive }}</template>
</FormSwitch>
<FormSwitch v-model="autoSensitive" class="_formBlock" @update:model-value="saveProfile()">
<template #label>{{ i18n.ts.enableAutoSensitive }}<span class="_beta">{{ i18n.ts.beta }}</span></template>
<template #caption>{{ i18n.ts.enableAutoSensitiveDescription }}</template>
</FormSwitch>
<div class="_autoGap">
<FormLink @click="chooseUploadFolder()">
{{ i18n.ts.uploadFolder }}
<template #suffix>{{ uploadFolder ? uploadFolder.name : '-' }}</template>
<template #suffixIcon><i class="fas fa-folder-open"></i></template>
</FormLink>
<FormSwitch v-model="keepOriginalUploading">
<template #label>{{ i18n.ts.keepOriginalUploading }}</template>
<template #caption>{{ i18n.ts.keepOriginalUploadingDescription }}</template>
</FormSwitch>
<FormSwitch v-model="alwaysMarkNsfw" @update:model-value="saveProfile()">
<template #label>{{ i18n.ts.alwaysMarkSensitive }}</template>
</FormSwitch>
<FormSwitch v-model="autoSensitive" @update:model-value="saveProfile()">
<template #label>{{ i18n.ts.enableAutoSensitive }}<span class="_beta">{{ i18n.ts.beta }}</span></template>
<template #caption>{{ i18n.ts.enableAutoSensitiveDescription }}</template>
</FormSwitch>
</div>
</FormSection>
</div>
</template>

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

@@ -1,5 +1,5 @@
<template>
<div class="_formRoot">
<div class="_autoGap">
<FormSection>
<template #label>{{ i18n.ts.emailAddress }}</template>
<FormInput v-model="emailAddress" type="email" manual-save>
@@ -17,24 +17,27 @@
<FormSection>
<template #label>{{ i18n.ts.emailNotification }}</template>
<FormSwitch v-model="emailNotification_mention" class="_formBlock">
{{ i18n.ts._notification._types.mention }}
</FormSwitch>
<FormSwitch v-model="emailNotification_reply" class="_formBlock">
{{ i18n.ts._notification._types.reply }}
</FormSwitch>
<FormSwitch v-model="emailNotification_quote" class="_formBlock">
{{ i18n.ts._notification._types.quote }}
</FormSwitch>
<FormSwitch v-model="emailNotification_follow" class="_formBlock">
{{ i18n.ts._notification._types.follow }}
</FormSwitch>
<FormSwitch v-model="emailNotification_receiveFollowRequest" class="_formBlock">
{{ i18n.ts._notification._types.receiveFollowRequest }}
</FormSwitch>
<FormSwitch v-model="emailNotification_groupInvited" class="_formBlock">
{{ i18n.ts._notification._types.groupInvited }}
</FormSwitch>
<div class="_autoGap_half">
<FormSwitch v-model="emailNotification_mention">
{{ i18n.ts._notification._types.mention }}
</FormSwitch>
<FormSwitch v-model="emailNotification_reply">
{{ i18n.ts._notification._types.reply }}
</FormSwitch>
<FormSwitch v-model="emailNotification_quote">
{{ i18n.ts._notification._types.quote }}
</FormSwitch>
<FormSwitch v-model="emailNotification_follow">
{{ i18n.ts._notification._types.follow }}
</FormSwitch>
<FormSwitch v-model="emailNotification_receiveFollowRequest">
{{ i18n.ts._notification._types.receiveFollowRequest }}
</FormSwitch>
<FormSwitch v-model="emailNotification_groupInvited">
{{ i18n.ts._notification._types.groupInvited }}
</FormSwitch>
</div>
</FormSection>
</div>
</template>

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

@@ -1,6 +1,6 @@
<template>
<div class="_formRoot">
<FormSelect v-model="lang" class="_formBlock">
<div class="_autoGap">
<FormSelect 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>
@@ -12,7 +12,7 @@
</template>
</FormSelect>
<FormRadios v-model="overridedDeviceKind" class="_formBlock">
<FormRadios 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>
@@ -20,80 +20,88 @@
<option value="desktop"><i class="ti ti-device-desktop"/> {{ i18n.ts.desktop }}</option>
</FormRadios>
<FormSwitch v-model="showFixedPostForm" class="_formBlock">{{ i18n.ts.showFixedPostForm }}</FormSwitch>
<FormSwitch v-model="showFixedPostForm">{{ i18n.ts.showFixedPostForm }}</FormSwitch>
<FormSection>
<template #label>{{ i18n.ts.behavior }}</template>
<FormSwitch v-model="imageNewTab" class="_formBlock">{{ i18n.ts.openImageInNewTab }}</FormSwitch>
<FormSwitch v-model="enableInfiniteScroll" class="_formBlock">{{ i18n.ts.enableInfiniteScroll }}</FormSwitch>
<FormSwitch v-model="useReactionPickerForContextMenu" class="_formBlock">{{ i18n.ts.useReactionPickerForContextMenu }}</FormSwitch>
<FormSelect v-model="serverDisconnectedBehavior" class="_formBlock">
<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>
<div class="_autoGap">
<div class="_autoGap_half">
<FormSwitch v-model="imageNewTab">{{ i18n.ts.openImageInNewTab }}</FormSwitch>
<FormSwitch v-model="enableInfiniteScroll">{{ i18n.ts.enableInfiniteScroll }}</FormSwitch>
<FormSwitch v-model="useReactionPickerForContextMenu">{{ i18n.ts.useReactionPickerForContextMenu }}</FormSwitch>
</div>
<FormSelect 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>
</div>
</FormSection>
<FormSection>
<template #label>{{ i18n.ts.appearance }}</template>
<FormSwitch v-model="disableAnimatedMfm" class="_formBlock">{{ i18n.ts.disableAnimatedMfm }}</FormSwitch>
<FormSwitch v-model="reduceAnimation" class="_formBlock">{{ i18n.ts.reduceUiAnimation }}</FormSwitch>
<FormSwitch v-model="useBlurEffect" class="_formBlock">{{ i18n.ts.useBlurEffect }}</FormSwitch>
<FormSwitch v-model="useBlurEffectForModal" class="_formBlock">{{ i18n.ts.useBlurEffectForModal }}</FormSwitch>
<FormSwitch v-model="showGapBetweenNotesInTimeline" class="_formBlock">{{ i18n.ts.showGapBetweenNotesInTimeline }}</FormSwitch>
<FormSwitch v-model="loadRawImages" class="_formBlock">{{ i18n.ts.loadRawImages }}</FormSwitch>
<FormSwitch v-model="disableShowingAnimatedImages" class="_formBlock">{{ i18n.ts.disableShowingAnimatedImages }}</FormSwitch>
<FormSwitch v-model="squareAvatars" class="_formBlock">{{ i18n.ts.squareAvatars }}</FormSwitch>
<FormSwitch v-model="useSystemFont" class="_formBlock">{{ i18n.ts.useSystemFont }}</FormSwitch>
<div class="_formBlock">
<FormRadios 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>
<div class="_autoGap">
<div class="_autoGap_half">
<FormSwitch v-model="disableAnimatedMfm">{{ i18n.ts.disableAnimatedMfm }}</FormSwitch>
<FormSwitch v-model="reduceAnimation">{{ i18n.ts.reduceUiAnimation }}</FormSwitch>
<FormSwitch v-model="useBlurEffect">{{ i18n.ts.useBlurEffect }}</FormSwitch>
<FormSwitch v-model="useBlurEffectForModal">{{ i18n.ts.useBlurEffectForModal }}</FormSwitch>
<FormSwitch v-model="showGapBetweenNotesInTimeline">{{ i18n.ts.showGapBetweenNotesInTimeline }}</FormSwitch>
<FormSwitch v-model="loadRawImages">{{ i18n.ts.loadRawImages }}</FormSwitch>
<FormSwitch v-model="disableShowingAnimatedImages">{{ i18n.ts.disableShowingAnimatedImages }}</FormSwitch>
<FormSwitch v-model="squareAvatars">{{ i18n.ts.squareAvatars }}</FormSwitch>
<FormSwitch v-model="useSystemFont">{{ i18n.ts.useSystemFont }}</FormSwitch>
<FormSwitch v-model="disableDrawer">{{ i18n.ts.disableDrawer }}</FormSwitch>
</div>
<div>
<FormRadios 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>
<div style="margin: 8px 0 0 0; font-size: 1.5em;"><Mfm :key="emojiStyle" text="🍮🍦🍭🍩🍰🍫🍬🥞🍪"/></div>
</div>
<FormRadios 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>
<div style="margin: 8px 0 0 0; font-size: 1.5em;"><Mfm :key="emojiStyle" text="🍮🍦🍭🍩🍰🍫🍬🥞🍪"/></div>
</div>
<FormSwitch v-model="disableDrawer" class="_formBlock">{{ i18n.ts.disableDrawer }}</FormSwitch>
<FormRadios v-model="fontSize" class="_formBlock">
<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>
</FormSection>
<FormSection>
<FormSwitch v-model="aiChanMode">{{ i18n.ts.aiChanMode }}</FormSwitch>
</FormSection>
<FormSelect v-model="instanceTicker" class="_formBlock">
<FormSelect 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>
<FormSelect v-model="nsfw" class="_formBlock">
<FormSelect 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>
<FormRange v-model="numberOfPageCache" :min="1" :max="10" :step="1" easing class="_formBlock">
<FormRange v-model="numberOfPageCache" :min="1" :max="10" :step="1" easing>
<template #label>{{ i18n.ts.numberOfPageCache }}</template>
<template #caption>{{ i18n.ts.numberOfPageCacheDescription }}</template>
</FormRange>
<FormLink to="/settings/deck" class="_formBlock">{{ i18n.ts.deck }}</FormLink>
<FormLink to="/settings/deck">{{ i18n.ts.deck }}</FormLink>
<FormLink to="/settings/custom-css" class="_formBlock"><template #icon><i class="ti ti-code"></i></template>{{ i18n.ts.customCss }}</FormLink>
<FormLink to="/settings/custom-css"><template #icon><i class="ti ti-code"></i></template>{{ i18n.ts.customCss }}</FormLink>
</div>
</template>

22
packages/frontend/src/pages/settings/import-export.vue
View File

@@ -1,5 +1,5 @@
<template>
<div class="_formRoot">
<div class="_autoGap">
<FormSection>
<template #label><i class="ti ti-pencil"></i> {{ i18n.ts._exportOrImport.allNotes }}</template>
<FormFolder>
@@ -18,18 +18,18 @@
</FormSection>
<FormSection>
<template #label><i class="ti ti-users"></i> {{ i18n.ts._exportOrImport.followingList }}</template>
<FormFolder class="_formBlock">
<FormFolder>
<template #label>{{ i18n.ts.export }}</template>
<template #icon><i class="ti ti-download"></i></template>
<FormSwitch v-model="excludeMutingUsers" class="_formBlock">
<FormSwitch v-model="excludeMutingUsers">
{{ i18n.ts._exportOrImport.excludeMutingUsers }}
</FormSwitch>
<FormSwitch v-model="excludeInactiveUsers" class="_formBlock">
<FormSwitch v-model="excludeInactiveUsers">
{{ i18n.ts._exportOrImport.excludeInactiveUsers }}
</FormSwitch>
<MkButton primary :class="$style.button" inline @click="exportFollowing()"><i class="ti ti-download"></i> {{ i18n.ts.export }}</MkButton>
</FormFolder>
<FormFolder class="_formBlock">
<FormFolder>
<template #label>{{ i18n.ts.import }}</template>
<template #icon><i class="ti ti-upload"></i></template>
<MkButton primary :class="$style.button" inline @click="importFollowing($event)"><i class="ti ti-upload"></i> {{ i18n.ts.import }}</MkButton>
@@ -37,12 +37,12 @@
</FormSection>
<FormSection>
<template #label><i class="ti ti-users"></i> {{ i18n.ts._exportOrImport.userLists }}</template>
<FormFolder class="_formBlock">
<FormFolder>
<template #label>{{ i18n.ts.export }}</template>
<template #icon><i class="ti ti-download"></i></template>
<MkButton primary :class="$style.button" inline @click="exportUserLists()"><i class="ti ti-download"></i> {{ i18n.ts.export }}</MkButton>
</FormFolder>
<FormFolder class="_formBlock">
<FormFolder>
<template #label>{{ i18n.ts.import }}</template>
<template #icon><i class="ti ti-upload"></i></template>
<MkButton primary :class="$style.button" inline @click="importUserLists($event)"><i class="ti ti-upload"></i> {{ i18n.ts.import }}</MkButton>
@@ -50,12 +50,12 @@
</FormSection>
<FormSection>
<template #label><i class="ti ti-user-off"></i> {{ i18n.ts._exportOrImport.muteList }}</template>
<FormFolder class="_formBlock">
<FormFolder>
<template #label>{{ i18n.ts.export }}</template>
<template #icon><i class="ti ti-download"></i></template>
<MkButton primary :class="$style.button" inline @click="exportMuting()"><i class="ti ti-download"></i> {{ i18n.ts.export }}</MkButton>
</FormFolder>
<FormFolder class="_formBlock">
<FormFolder>
<template #label>{{ i18n.ts.import }}</template>
<template #icon><i class="ti ti-upload"></i></template>
<MkButton primary :class="$style.button" inline @click="importMuting($event)"><i class="ti ti-upload"></i> {{ i18n.ts.import }}</MkButton>
@@ -63,12 +63,12 @@
</FormSection>
<FormSection>
<template #label><i class="ti ti-user-off"></i> {{ i18n.ts._exportOrImport.blockingList }}</template>
<FormFolder class="_formBlock">
<FormFolder>
<template #label>{{ i18n.ts.export }}</template>
<template #icon><i class="ti ti-download"></i></template>
<MkButton primary :class="$style.button" inline @click="exportBlocking()"><i class="ti ti-download"></i> {{ i18n.ts.export }}</MkButton>
</FormFolder>
<FormFolder class="_formBlock">
<FormFolder>
<template #label>{{ i18n.ts.import }}</template>
<template #icon><i class="ti ti-upload"></i></template>
<MkButton primary :class="$style.button" inline @click="importBlocking($event)"><i class="ti ti-upload"></i> {{ i18n.ts.import }}</MkButton>

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

@@ -1,11 +1,11 @@
<template>
<div class="_formRoot">
<div class="_autoGap">
<MkInfo>{{ i18n.ts._instanceMute.title }}</MkInfo>
<FormTextarea v-model="instanceMutes" class="_formBlock">
<FormTextarea v-model="instanceMutes">
<template #label>{{ i18n.ts._instanceMute.heading }}</template>
<template #caption>{{ i18n.ts._instanceMute.instanceMuteDescription }}<br>{{ i18n.ts._instanceMute.instanceMuteDescription2 }}</template>
</FormTextarea>
<MkButton primary :disabled="!changed" class="_formBlock" @click="save()"><i class="ti ti-device-floppy"></i> {{ i18n.ts.save }}</MkButton>
<MkButton primary :disabled="!changed" @click="save()"><i class="ti ti-device-floppy"></i> {{ i18n.ts.save }}</MkButton>
</div>
</template>

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

@@ -1,5 +1,5 @@
<template>
<div class="_formRoot">
<div class="_autoGap">
<FormSection v-if="instance.enableTwitterIntegration">
<template #label><i class="ti ti-brand-twitter"></i> Twitter</template>
<p v-if="integrations.twitter">{{ i18n.ts.connectedTo }}: <a :href="`https://twitter.com/${integrations.twitter.screenName}`" rel="nofollow noopener" target="_blank">@{{ integrations.twitter.screenName }}</a></p>

2
packages/frontend/src/pages/settings/mute-block.vue
View File

@@ -1,5 +1,5 @@
<template>
<div class="_formRoot">
<div class="_autoGap">
<MkTab v-model="tab" style="margin-bottom: var(--margin);">
<option value="mute">{{ i18n.ts.mutedUsers }}</option>
<option value="block">{{ i18n.ts.blockedUsers }}</option>

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

@@ -1,11 +1,11 @@
<template>
<div class="_formRoot">
<FormTextarea v-model="items" tall manual-save class="_formBlock">
<div class="_autoGap">
<FormTextarea 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>
<FormRadios v-model="menuDisplay" class="_formBlock">
<FormRadios 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>
@@ -13,7 +13,7 @@
<!-- <MkRadio v-model="menuDisplay" value="hide" disabled>{{ i18n.ts._menuDisplay.hide }}</MkRadio>--> <!-- TODO: サイドバーを完全に隠せるようにすると、別途ハンバーガーボタンのようなものをUIに表示する必要があり面倒 -->
</FormRadios>
<FormButton danger class="_formBlock" @click="reset()"><i class="ti ti-reload"></i> {{ i18n.ts.default }}</FormButton>
<FormButton danger @click="reset()"><i class="ti ti-reload"></i> {{ i18n.ts.default }}</FormButton>
</div>
</template>

33
packages/frontend/src/pages/settings/notifications.vue
View File

@@ -1,22 +1,27 @@
<template>
<div class="_formRoot">
<FormLink class="_formBlock" @click="configure"><template #icon><i class="ti ti-settings"></i></template>{{ i18n.ts.notificationSetting }}</FormLink>
<div class="_autoGap">
<FormLink @click="configure"><template #icon><i class="ti ti-settings"></i></template>{{ i18n.ts.notificationSetting }}</FormLink>
<FormSection>
<FormLink class="_formBlock" @click="readAllNotifications">{{ i18n.ts.markAsReadAllNotifications }}</FormLink>
<FormLink class="_formBlock" @click="readAllUnreadNotes">{{ i18n.ts.markAsReadAllUnreadNotes }}</FormLink>
<FormLink class="_formBlock" @click="readAllMessagingMessages">{{ i18n.ts.markAsReadAllTalkMessages }}</FormLink>
<div class="_autoGap">
<FormLink @click="readAllNotifications">{{ i18n.ts.markAsReadAllNotifications }}</FormLink>
<FormLink @click="readAllUnreadNotes">{{ i18n.ts.markAsReadAllUnreadNotes }}</FormLink>
<FormLink @click="readAllMessagingMessages">{{ i18n.ts.markAsReadAllTalkMessages }}</FormLink>
</div>
</FormSection>
<FormSection>
<template #label>{{ i18n.ts.pushNotification }}</template>
<MkPushNotificationAllowButton ref="allowButton" />
<FormSwitch class="_formBlock" :disabled="!pushRegistrationInServer" :model-value="sendReadMessage" @update:model-value="onChangeSendReadMessage">
<template #label>{{ i18n.ts.sendPushNotificationReadMessage }}</template>
<template #caption>
<I18n :src="i18n.ts.sendPushNotificationReadMessageCaption">
<template #emptyPushNotificationMessage>{{ i18n.ts._notification.emptyPushNotificationMessage }}</template>
</I18n>
</template>
</FormSwitch>
<div class="_autoGap">
<MkPushNotificationAllowButton ref="allowButton"/>
<FormSwitch :disabled="!pushRegistrationInServer" :model-value="sendReadMessage" @update:model-value="onChangeSendReadMessage">
<template #label>{{ i18n.ts.sendPushNotificationReadMessage }}</template>
<template #caption>
<I18n :src="i18n.ts.sendPushNotificationReadMessageCaption">
<template #emptyPushNotificationMessage>{{ i18n.ts._notification.emptyPushNotificationMessage }}</template>
</I18n>
</template>
</FormSwitch>
</div>
</FormSection>
</div>
</template>

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

@@ -1,18 +1,18 @@
<template>
<div class="_formRoot">
<FormSwitch v-model="$i.injectFeaturedNote" class="_formBlock" @update:model-value="onChangeInjectFeaturedNote">
<div class="_autoGap">
<FormSwitch v-model="$i.injectFeaturedNote" @update:model-value="onChangeInjectFeaturedNote">
{{ i18n.ts.showFeaturedNotesInTimeline }}
</FormSwitch>
<!--
<FormSwitch v-model="reportError" class="_formBlock">{{ i18n.ts.sendErrorReports }}<template #caption>{{ i18n.ts.sendErrorReportsDescription }}</template></FormSwitch>
<FormSwitch v-model="reportError">{{ i18n.ts.sendErrorReports }}<template #caption>{{ i18n.ts.sendErrorReportsDescription }}</template></FormSwitch>
-->
<FormLink to="/settings/account-info" class="_formBlock">{{ i18n.ts.accountInfo }}</FormLink>
<FormLink to="/settings/account-info">{{ i18n.ts.accountInfo }}</FormLink>
<FormLink to="/registry" class="_formBlock"><template #icon><i class="ti ti-adjustments"></i></template>{{ i18n.ts.registry }}</FormLink>
<FormLink to="/registry"><template #icon><i class="ti ti-adjustments"></i></template>{{ i18n.ts.registry }}</FormLink>
<FormLink to="/settings/delete-account" class="_formBlock"><template #icon><i class="ti ti-alert-triangle"></i></template>{{ i18n.ts.closeAccount }}</FormLink>
<FormLink to="/settings/delete-account"><template #icon><i class="ti ti-alert-triangle"></i></template>{{ i18n.ts.closeAccount }}</FormLink>
</div>
</template>

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

@@ -1,12 +1,12 @@
<template>
<div class="_formRoot">
<FormInfo warn class="_formBlock">{{ i18n.ts._plugin.installWarn }}</FormInfo>
<div class="_autoGap">
<FormInfo warn>{{ i18n.ts._plugin.installWarn }}</FormInfo>
<FormTextarea v-model="code" tall class="_formBlock">
<FormTextarea v-model="code" tall>
<template #label>{{ i18n.ts.code }}</template>
</FormTextarea>
<div class="_formBlock">
<div>
<FormButton :disabled="code == null" primary inline @click="install"><i class="ti ti-check"></i> {{ i18n.ts.install }}</FormButton>
</div>
</div>

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

@@ -1,23 +1,23 @@
<template>
<div class="_formRoot">
<div class="_autoGap">
<FormLink to="/settings/plugin/install"><template #icon><i class="ti ti-download"></i></template>{{ i18n.ts._plugin.install }}</FormLink>
<FormSection>
<template #label>{{ i18n.ts.manage }}</template>
<div v-for="plugin in plugins" :key="plugin.id" class="_formBlock _panel" style="padding: 20px;">
<div v-for="plugin in plugins" :key="plugin.id" class="_panel _autoGap_half" style="padding: 20px;">
<span style="display: flex;"><b>{{ plugin.name }}</b><span style="margin-left: auto;">v{{ plugin.version }}</span></span>
<FormSwitch class="_formBlock" :model-value="plugin.active" @update:model-value="changeActive(plugin, $event)">{{ i18n.ts.makeActive }}</FormSwitch>
<FormSwitch :model-value="plugin.active" @update:model-value="changeActive(plugin, $event)">{{ i18n.ts.makeActive }}</FormSwitch>
<MkKeyValue class="_formBlock">
<MkKeyValue>
<template #key>{{ i18n.ts.author }}</template>
<template #value>{{ plugin.author }}</template>
</MkKeyValue>
<MkKeyValue class="_formBlock">
<MkKeyValue>
<template #key>{{ i18n.ts.description }}</template>
<template #value>{{ plugin.description }}</template>
</MkKeyValue>
<MkKeyValue class="_formBlock">
<MkKeyValue>
<template #key>{{ i18n.ts.permission }}</template>
<template #value>{{ plugin.permission }}</template>
</MkKeyValue>

26
packages/frontend/src/pages/settings/preferences-backups.vue
View File

@@ -1,5 +1,5 @@
<template>
<div class="_formRoot">
<div class="_autoGap">
<div :class="$style.buttons">
<MkButton inline primary @click="saveNew">{{ ts._preferencesBackups.saveNew }}</MkButton>
<MkButton inline @click="loadFile">{{ ts._preferencesBackups.loadFile }}</MkButton>
@@ -8,17 +8,19 @@
<FormSection>
<template #label>{{ ts._preferencesBackups.list }}</template>
<template v-if="profiles && Object.keys(profiles).length > 0">
<div
v-for="(profile, id) in profiles"
:key="id"
class="_formBlock _panel"
:class="$style.profile"
@click="$event => menu($event, id)"
@contextmenu.prevent.stop="$event => menu($event, id)"
>
<div :class="$style.profileName">{{ profile.name }}</div>
<div :class="$style.profileTime">{{ t('_preferencesBackups.createdAt', { date: (new Date(profile.createdAt)).toLocaleDateString(), time: (new Date(profile.createdAt)).toLocaleTimeString() }) }}</div>
<div v-if="profile.updatedAt" :class="$style.profileTime">{{ t('_preferencesBackups.updatedAt', { date: (new Date(profile.updatedAt)).toLocaleDateString(), time: (new Date(profile.updatedAt)).toLocaleTimeString() }) }}</div>
<div class="_autoGap_half">
<div
v-for="(profile, id) in profiles"
:key="id"
class="_panel"
:class="$style.profile"
@click="$event => menu($event, id)"
@contextmenu.prevent.stop="$event => menu($event, id)"
>
<div :class="$style.profileName">{{ profile.name }}</div>
<div :class="$style.profileTime">{{ t('_preferencesBackups.createdAt', { date: (new Date(profile.createdAt)).toLocaleDateString(), time: (new Date(profile.createdAt)).toLocaleTimeString() }) }}</div>
<div v-if="profile.updatedAt" :class="$style.profileTime">{{ t('_preferencesBackups.updatedAt', { date: (new Date(profile.updatedAt)).toLocaleDateString(), time: (new Date(profile.updatedAt)).toLocaleTimeString() }) }}</div>
</div>
</div>
</template>
<div v-else-if="profiles">

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

@@ -1,14 +1,14 @@
<template>
<div class="_formRoot">
<FormSwitch v-model="isLocked" class="_formBlock" @update:model-value="save()">{{ i18n.ts.makeFollowManuallyApprove }}<template #caption>{{ i18n.ts.lockedAccountInfo }}</template></FormSwitch>
<FormSwitch v-if="isLocked" v-model="autoAcceptFollowed" class="_formBlock" @update:model-value="save()">{{ i18n.ts.autoAcceptFollowed }}</FormSwitch>
<div class="_autoGap">
<FormSwitch v-model="isLocked" @update:model-value="save()">{{ i18n.ts.makeFollowManuallyApprove }}<template #caption>{{ i18n.ts.lockedAccountInfo }}</template></FormSwitch>
<FormSwitch v-if="isLocked" v-model="autoAcceptFollowed" @update:model-value="save()">{{ i18n.ts.autoAcceptFollowed }}</FormSwitch>
<FormSwitch v-model="publicReactions" class="_formBlock" @update:model-value="save()">
<FormSwitch v-model="publicReactions" @update:model-value="save()">
{{ i18n.ts.makeReactionsPublic }}
<template #caption>{{ i18n.ts.makeReactionsPublicDescription }}</template>
</FormSwitch>
<FormSelect v-model="ffVisibility" class="_formBlock" @update:model-value="save()">
<FormSelect 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>
@@ -16,39 +16,43 @@
<template #caption>{{ i18n.ts.ffVisibilityDescription }}</template>
</FormSelect>
<FormSwitch v-model="hideOnlineStatus" class="_formBlock" @update:model-value="save()">
<FormSwitch v-model="hideOnlineStatus" @update:model-value="save()">
{{ i18n.ts.hideOnlineStatus }}
<template #caption>{{ i18n.ts.hideOnlineStatusDescription }}</template>
</FormSwitch>
<FormSwitch v-model="noCrawle" class="_formBlock" @update:model-value="save()">
<FormSwitch v-model="noCrawle" @update:model-value="save()">
{{ i18n.ts.noCrawle }}
<template #caption>{{ i18n.ts.noCrawleDescription }}</template>
</FormSwitch>
<FormSwitch v-model="isExplorable" class="_formBlock" @update:model-value="save()">
<FormSwitch v-model="isExplorable" @update:model-value="save()">
{{ i18n.ts.makeExplorable }}
<template #caption>{{ i18n.ts.makeExplorableDescription }}</template>
</FormSwitch>
<FormSection>
<FormSwitch v-model="rememberNoteVisibility" class="_formBlock" @update:model-value="save()">{{ i18n.ts.rememberNoteVisibility }}</FormSwitch>
<FormFolder v-if="!rememberNoteVisibility" class="_formBlock">
<template #label>{{ i18n.ts.defaultNoteVisibility }}</template>
<template v-if="defaultNoteVisibility === 'public'" #suffix>{{ i18n.ts._visibility.public }}</template>
<template v-else-if="defaultNoteVisibility === 'home'" #suffix>{{ i18n.ts._visibility.home }}</template>
<template v-else-if="defaultNoteVisibility === 'followers'" #suffix>{{ i18n.ts._visibility.followers }}</template>
<template v-else-if="defaultNoteVisibility === 'specified'" #suffix>{{ i18n.ts._visibility.specified }}</template>
<div class="_autoGap">
<FormSwitch v-model="rememberNoteVisibility" @update:model-value="save()">{{ i18n.ts.rememberNoteVisibility }}</FormSwitch>
<FormFolder v-if="!rememberNoteVisibility">
<template #label>{{ i18n.ts.defaultNoteVisibility }}</template>
<template v-if="defaultNoteVisibility === 'public'" #suffix>{{ i18n.ts._visibility.public }}</template>
<template v-else-if="defaultNoteVisibility === 'home'" #suffix>{{ i18n.ts._visibility.home }}</template>
<template v-else-if="defaultNoteVisibility === 'followers'" #suffix>{{ i18n.ts._visibility.followers }}</template>
<template v-else-if="defaultNoteVisibility === 'specified'" #suffix>{{ i18n.ts._visibility.specified }}</template>
<FormSelect v-model="defaultNoteVisibility" class="_formBlock">
<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>
<FormSwitch v-model="defaultNoteLocalOnly" class="_formBlock">{{ i18n.ts._visibility.localOnly }}</FormSwitch>
</FormFolder>
<div class="_autoGap">
<FormSelect 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>
<FormSwitch v-model="defaultNoteLocalOnly">{{ i18n.ts._visibility.localOnly }}</FormSwitch>
</div>
</FormFolder>
</div>
</FormSection>
<FormSwitch v-model="keepCw" class="_formBlock" @update:model-value="save()">{{ i18n.ts.keepCw }}</FormSwitch>
<FormSwitch v-model="keepCw" @update:model-value="save()">{{ i18n.ts.keepCw }}</FormSwitch>
</div>
</template>

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

@@ -1,5 +1,5 @@
<template>
<div class="_formRoot">
<div class="_autoGap">
<div class="llvierxe" :style="{ backgroundImage: $i.bannerUrl ? `url(${ $i.bannerUrl })` : null }">
<div class="avatar">
<MkAvatar class="avatar" :user="$i" :disable-link="true" @click="changeAvatar"/>
@@ -8,37 +8,37 @@
<MkButton primary rounded class="bannerEdit" @click="changeBanner">{{ i18n.ts._profile.changeBanner }}</MkButton>
</div>
<FormInput v-model="profile.name" :max="30" manual-save class="_formBlock">
<FormInput v-model="profile.name" :max="30" manual-save>
<template #label>{{ i18n.ts._profile.name }}</template>
</FormInput>
<FormTextarea v-model="profile.description" :max="500" tall manual-save class="_formBlock">
<FormTextarea v-model="profile.description" :max="500" tall manual-save>
<template #label>{{ i18n.ts._profile.description }}</template>
<template #caption>{{ i18n.ts._profile.youCanIncludeHashtags }}</template>
</FormTextarea>
<FormInput v-model="profile.location" manual-save class="_formBlock">
<FormInput v-model="profile.location" manual-save>
<template #label>{{ i18n.ts.location }}</template>
<template #prefix><i class="ti ti-map-pin"></i></template>
</FormInput>
<FormInput v-model="profile.birthday" type="date" manual-save class="_formBlock">
<FormInput v-model="profile.birthday" type="date" manual-save>
<template #label>{{ i18n.ts.birthday }}</template>
<template #prefix><i class="ti ti-cake"></i></template>
</FormInput>
<FormSelect v-model="profile.lang" class="_formBlock">
<FormSelect 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>
<FormSlot class="_formBlock">
<FormSlot>
<FormFolder>
<template #icon><i class="ti ti-list"></i></template>
<template #label>{{ i18n.ts._profile.metadataEdit }}</template>
<div class="_formRoot">
<FormSplit v-for="(record, i) in fields" :min-width="250" class="_formBlock">
<div class="_autoGap">
<FormSplit v-for="(record, i) in fields" :min-width="250">
<FormInput v-model="record.name" small>
<template #label>{{ i18n.ts._profile.metadataLabel }} #{{ i + 1 }}</template>
</FormInput>
@@ -46,8 +46,10 @@
<template #label>{{ i18n.ts._profile.metadataContent }} #{{ i + 1 }}</template>
</FormInput>
</FormSplit>
<MkButton :disabled="fields.length >= 16" inline style="margin-right: 8px;" @click="addField"><i class="ti ti-plus"></i> {{ i18n.ts.add }}</MkButton>
<MkButton inline primary @click="saveFields"><i class="ti ti-check"></i> {{ i18n.ts.save }}</MkButton>
<div>
<MkButton :disabled="fields.length >= 16" inline style="margin-right: 8px;" @click="addField"><i class="ti ti-plus"></i> {{ i18n.ts.add }}</MkButton>
<MkButton inline primary @click="saveFields"><i class="ti ti-check"></i> {{ i18n.ts.save }}</MkButton>
</div>
</div>
</FormFolder>
<template #caption>{{ i18n.ts._profile.metadataDescription }}</template>
@@ -56,13 +58,13 @@
<FormFolder>
<template #label>{{ i18n.ts.advancedSettings }}</template>
<div class="_formRoot">
<FormSwitch v-model="profile.isCat" class="_formBlock">{{ i18n.ts.flagAsCat }}<template #caption>{{ i18n.ts.flagAsCatDescription }}</template></FormSwitch>
<FormSwitch v-model="profile.isBot" class="_formBlock">{{ i18n.ts.flagAsBot }}<template #caption>{{ i18n.ts.flagAsBotDescription }}</template></FormSwitch>
<div class="_autoGap">
<FormSwitch v-model="profile.isCat">{{ i18n.ts.flagAsCat }}<template #caption>{{ i18n.ts.flagAsCatDescription }}</template></FormSwitch>
<FormSwitch v-model="profile.isBot">{{ i18n.ts.flagAsBot }}<template #caption>{{ i18n.ts.flagAsBotDescription }}</template></FormSwitch>
</div>
</FormFolder>
<FormSwitch v-model="profile.showTimelineReplies" class="_formBlock">{{ i18n.ts.flagShowTimelineReplies }}<template #caption>{{ i18n.ts.flagShowTimelineRepliesDescription }} {{ i18n.ts.reflectMayTakeTime }}</template></FormSwitch>
<FormSwitch v-model="profile.showTimelineReplies">{{ i18n.ts.flagShowTimelineReplies }}<template #caption>{{ i18n.ts.flagShowTimelineRepliesDescription }} {{ i18n.ts.reflectMayTakeTime }}</template></FormSwitch>
</div>
</template>

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

@@ -1,6 +1,6 @@
<template>
<div class="_formRoot">
<FromSlot class="_formBlock">
<div class="_autoGap">
<FromSlot>
<template #label>{{ i18n.ts.reactionSettingDescription }}</template>
<div v-panel style="border-radius: 6px;">
<Sortable v-model="reactions" class="zoaiodol" :item-key="item => item" :animation="150" :delay="100" :delay-on-touch-only="true">
@@ -17,13 +17,13 @@
<template #caption>{{ i18n.ts.reactionSettingDescription2 }} <button class="_textButton" @click="preview">{{ i18n.ts.preview }}</button></template>
</FromSlot>
<FormRadios v-model="reactionPickerSize" class="_formBlock">
<FormRadios 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" class="_formBlock">
<FormRadios v-model="reactionPickerWidth">
<template #label>{{ i18n.ts.numberOfColumn }}</template>
<option :value="1">5</option>
<option :value="2">6</option>
@@ -31,7 +31,7 @@
<option :value="4">8</option>
<option :value="5">9</option>
</FormRadios>
<FormRadios v-model="reactionPickerHeight" class="_formBlock">
<FormRadios v-model="reactionPickerHeight">
<template #label>{{ i18n.ts.height }}</template>
<option :value="1">{{ i18n.ts.small }}</option>
<option :value="2">{{ i18n.ts.medium }}</option>
@@ -39,7 +39,7 @@
<option :value="4">{{ i18n.ts.large }}+</option>
</FormRadios>
<FormSwitch v-model="reactionPickerUseDrawerForMobile" class="_formBlock">
<FormSwitch v-model="reactionPickerUseDrawerForMobile">
{{ i18n.ts.useDrawerReactionPickerForMobile }}
<template #caption>{{ i18n.ts.needReloadToApply }}</template>
</FormSwitch>

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

@@ -1,5 +1,5 @@
<template>
<div class="_formRoot">
<div class="_autoGap">
<FormSection>
<template #label>{{ i18n.ts.password }}</template>
<FormButton primary @click="change()">{{ i18n.ts.changePassword }}</FormButton>

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

@@ -1,10 +1,10 @@
<template>
<div class="_formRoot">
<div class="_autoGap">
<FormSelect 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)}%`" class="_formBlock">
<FormRange v-model="volume" :min="0" :max="1" :step="0.05" :text-converter="(v) => `${Math.floor(v * 100)}%`">
<template #label>{{ i18n.ts.volume }}</template>
</FormRange>

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

@@ -1,20 +1,22 @@
<template>
<div class="_formRoot">
<FormRange v-model="masterVolume" :min="0" :max="1" :step="0.05" :text-converter="(v) => `${Math.floor(v * 100)}%`" class="_formBlock">
<div class="_autoGap">
<FormRange v-model="masterVolume" :min="0" :max="1" :step="0.05" :text-converter="(v) => `${Math.floor(v * 100)}%`">
<template #label>{{ i18n.ts.masterVolume }}</template>
</FormRange>
<FormSection>
<template #label>{{ i18n.ts.sounds }}</template>
<FormFolder v-for="type in Object.keys(sounds)" :key="type" style="margin-bottom: 8px;">
<template #label>{{ $t('_sfx.' + type) }}</template>
<template #suffix>{{ sounds[type].type ?? i18n.ts.none }}</template>
<div class="_autoGap_half">
<FormFolder v-for="type in Object.keys(sounds)" :key="type">
<template #label>{{ $t('_sfx.' + type) }}</template>
<template #suffix>{{ sounds[type].type ?? i18n.ts.none }}</template>
<XSound :type="sounds[type].type" :volume="sounds[type].volume" @update="(res) => updated(type, res)"/>
</FormFolder>
<XSound :type="sounds[type].type" :volume="sounds[type].volume" @update="(res) => updated(type, res)"/>
</FormFolder>
</div>
</FormSection>
<FormButton danger class="_formBlock" @click="reset()"><i class="ti ti-reload"></i> {{ i18n.ts.default }}</FormButton>
<FormButton danger @click="reset()"><i class="ti ti-reload"></i> {{ i18n.ts.default }}</FormButton>
</div>
</template>

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

@@ -1,21 +1,21 @@
<template>
<div class="_formRoot">
<FormSelect v-model="statusbar.type" placeholder="Please select" class="_formBlock">
<div class="_autoGap">
<FormSelect 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>
<MkInput v-model="statusbar.name" manual-save class="_formBlock">
<MkInput v-model="statusbar.name" manual-save>
<template #label>{{ i18n.ts.label }}</template>
</MkInput>
<MkSwitch v-model="statusbar.black" class="_formBlock">
<MkSwitch v-model="statusbar.black">
<template #label>Black</template>
</MkSwitch>
<FormRadios v-model="statusbar.size" class="_formBlock">
<FormRadios v-model="statusbar.size">
<template #label>{{ i18n.ts.size }}</template>
<option value="verySmall">{{ i18n.ts.small }}+</option>
<option value="small">{{ i18n.ts.small }}</option>
@@ -25,51 +25,51 @@
</FormRadios>
<template v-if="statusbar.type === 'rss'">
<MkInput v-model="statusbar.props.url" manual-save class="_formBlock" type="url">
<MkInput v-model="statusbar.props.url" manual-save type="url">
<template #label>URL</template>
</MkInput>
<MkSwitch v-model="statusbar.props.shuffle" class="_formBlock">
<MkSwitch v-model="statusbar.props.shuffle">
<template #label>{{ i18n.ts.shuffle }}</template>
</MkSwitch>
<MkInput v-model="statusbar.props.refreshIntervalSec" manual-save class="_formBlock" type="number">
<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" class="_formBlock">
<FormRange 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>
<MkSwitch v-model="statusbar.props.marqueeReverse" class="_formBlock">
<MkSwitch v-model="statusbar.props.marqueeReverse">
<template #label>{{ i18n.ts.reverse }}</template>
</MkSwitch>
</template>
<template v-else-if="statusbar.type === 'federation'">
<MkInput v-model="statusbar.props.refreshIntervalSec" manual-save class="_formBlock" type="number">
<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" class="_formBlock">
<FormRange 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>
<MkSwitch v-model="statusbar.props.marqueeReverse" class="_formBlock">
<MkSwitch v-model="statusbar.props.marqueeReverse">
<template #label>{{ i18n.ts.reverse }}</template>
</MkSwitch>
<MkSwitch v-model="statusbar.props.colored" class="_formBlock">
<MkSwitch v-model="statusbar.props.colored">
<template #label>{{ i18n.ts.colored }}</template>
</MkSwitch>
</template>
<template v-else-if="statusbar.type === 'userList' && userLists != null">
<FormSelect v-model="statusbar.props.userListId" class="_formBlock">
<FormSelect v-model="statusbar.props.userListId">
<template #label>{{ i18n.ts.userList }}</template>
<option v-for="list in userLists" :value="list.id">{{ list.name }}</option>
</FormSelect>
<MkInput v-model="statusbar.props.refreshIntervalSec" manual-save class="_formBlock" type="number">
<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" class="_formBlock">
<FormRange 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>
<MkSwitch v-model="statusbar.props.marqueeReverse" class="_formBlock">
<MkSwitch v-model="statusbar.props.marqueeReverse">
<template #label>{{ i18n.ts.reverse }}</template>
</MkSwitch>
</template>

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

@@ -1,6 +1,6 @@
<template>
<div class="_formRoot">
<FormFolder v-for="x in statusbars" :key="x.id" class="_formBlock">
<div class="_autoGap">
<FormFolder v-for="x in statusbars" :key="x.id">
<template #label>{{ x.type ?? i18n.ts.notSet }}</template>
<template #suffix>{{ x.name }}</template>
<XStatusbar :_id="x.id" :user-lists="userLists"/>

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

@@ -1,10 +1,10 @@
<template>
<div class="_formRoot">
<FormTextarea v-model="installThemeCode" class="_formBlock">
<div class="_autoGap">
<FormTextarea v-model="installThemeCode">
<template #label>{{ i18n.ts._theme.code }}</template>
</FormTextarea>
<div class="_formBlock" style="display: flex; gap: var(--margin); flex-wrap: wrap;">
<div style="display: flex; gap: var(--margin); flex-wrap: wrap;">
<FormButton :disabled="installThemeCode == null" inline @click="() => preview(installThemeCode)"><i class="ti ti-eye"></i> {{ i18n.ts.preview }}</FormButton>
<FormButton :disabled="installThemeCode == null" primary inline @click="() => install(installThemeCode)"><i class="ti ti-check"></i> {{ i18n.ts.install }}</FormButton>
</div>

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

@@ -1,6 +1,6 @@
<template>
<div class="_formRoot">
<FormSelect v-model="selectedThemeId" class="_formBlock">
<div class="_autoGap">
<FormSelect 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>
@@ -10,17 +10,17 @@
</optgroup>
</FormSelect>
<template v-if="selectedTheme">
<FormInput readonly :model-value="selectedTheme.author" class="_formBlock">
<FormInput readonly :model-value="selectedTheme.author">
<template #label>{{ i18n.ts.author }}</template>
</FormInput>
<FormTextarea v-if="selectedTheme.desc" readonly :model-value="selectedTheme.desc" class="_formBlock">
<FormTextarea v-if="selectedTheme.desc" readonly :model-value="selectedTheme.desc">
<template #label>{{ i18n.ts._theme.description }}</template>
</FormTextarea>
<FormTextarea readonly tall :model-value="selectedThemeCode" class="_formBlock">
<FormTextarea 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>
<FormButton v-if="!builtinThemes.some(t => t.id == selectedTheme.id)" class="_formBlock" danger @click="uninstall()"><i class="ti ti-trash"></i> {{ i18n.ts.uninstall }}</FormButton>
<FormButton v-if="!builtinThemes.some(t => t.id == selectedTheme.id)" danger @click="uninstall()"><i class="ti ti-trash"></i> {{ i18n.ts.uninstall }}</FormButton>
</template>
</div>
</template>

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

@@ -1,6 +1,6 @@
<template>
<div class="_formRoot rsljpzjq">
<div v-adaptive-border class="rfqxtzch _panel _formBlock">
<div class="_autoGap rsljpzjq">
<div v-adaptive-border class="rfqxtzch _panel">
<div class="toggle">
<div class="toggleWrapper">
<input id="dn" v-model="darkMode" type="checkbox" class="dn"/>
@@ -26,7 +26,7 @@
</div>
</div>
<div class="selects _formBlock">
<div class="selects">
<FormSelect v-model="lightThemeId" large class="select">
<template #label>{{ i18n.ts.themeForLightMode }}</template>
<template #prefix><i class="ti ti-sun"></i></template>
@@ -60,8 +60,8 @@
</div>
</FormSection>
<FormButton v-if="wallpaper == null" class="_formBlock" @click="setWallpaper">{{ i18n.ts.setWallpaper }}</FormButton>
<FormButton v-else class="_formBlock" @click="wallpaper = null">{{ i18n.ts.removeWallpaper }}</FormButton>
<FormButton v-if="wallpaper == null" @click="setWallpaper">{{ i18n.ts.setWallpaper }}</FormButton>
<FormButton v-else @click="wallpaper = null">{{ i18n.ts.removeWallpaper }}</FormButton>
</div>
</template>

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

@@ -1,14 +1,14 @@
<template>
<div class="_formRoot">
<FormInput v-model="name" class="_formBlock">
<div class="_autoGap">
<FormInput v-model="name">
<template #label>Name</template>
</FormInput>
<FormInput v-model="url" type="url" class="_formBlock">
<FormInput v-model="url" type="url">
<template #label>URL</template>
</FormInput>
<FormInput v-model="secret" class="_formBlock">
<FormInput v-model="secret">
<template #prefix><i class="ti ti-lock"></i></template>
<template #label>Secret</template>
</FormInput>
@@ -16,18 +16,20 @@
<FormSection>
<template #label>Events</template>
<FormSwitch v-model="event_follow" class="_formBlock">Follow</FormSwitch>
<FormSwitch v-model="event_followed" class="_formBlock">Followed</FormSwitch>
<FormSwitch v-model="event_note" class="_formBlock">Note</FormSwitch>
<FormSwitch v-model="event_reply" class="_formBlock">Reply</FormSwitch>
<FormSwitch v-model="event_renote" class="_formBlock">Renote</FormSwitch>
<FormSwitch v-model="event_reaction" class="_formBlock">Reaction</FormSwitch>
<FormSwitch v-model="event_mention" class="_formBlock">Mention</FormSwitch>
<div class="_autoGap_half">
<FormSwitch v-model="event_follow">Follow</FormSwitch>
<FormSwitch v-model="event_followed">Followed</FormSwitch>
<FormSwitch v-model="event_note">Note</FormSwitch>
<FormSwitch v-model="event_reply">Reply</FormSwitch>
<FormSwitch v-model="event_renote">Renote</FormSwitch>
<FormSwitch v-model="event_reaction">Reaction</FormSwitch>
<FormSwitch v-model="event_mention">Mention</FormSwitch>
</div>
</FormSection>
<FormSwitch v-model="active" class="_formBlock">Active</FormSwitch>
<FormSwitch v-model="active">Active</FormSwitch>
<div class="_formBlock" style="display: flex; gap: var(--margin); flex-wrap: wrap;">
<div style="display: flex; gap: var(--margin); flex-wrap: wrap;">
<FormButton primary inline @click="save"><i class="ti ti-check"></i> {{ i18n.ts.save }}</FormButton>
</div>
</div>

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

@@ -1,14 +1,14 @@
<template>
<div class="_formRoot">
<FormInput v-model="name" class="_formBlock">
<div class="_autoGap">
<FormInput v-model="name">
<template #label>Name</template>
</FormInput>
<FormInput v-model="url" type="url" class="_formBlock">
<FormInput v-model="url" type="url">
<template #label>URL</template>
</FormInput>
<FormInput v-model="secret" class="_formBlock">
<FormInput v-model="secret">
<template #prefix><i class="ti ti-lock"></i></template>
<template #label>Secret</template>
</FormInput>
@@ -16,16 +16,18 @@
<FormSection>
<template #label>Events</template>
<FormSwitch v-model="event_follow" class="_formBlock">Follow</FormSwitch>
<FormSwitch v-model="event_followed" class="_formBlock">Followed</FormSwitch>
<FormSwitch v-model="event_note" class="_formBlock">Note</FormSwitch>
<FormSwitch v-model="event_reply" class="_formBlock">Reply</FormSwitch>
<FormSwitch v-model="event_renote" class="_formBlock">Renote</FormSwitch>
<FormSwitch v-model="event_reaction" class="_formBlock">Reaction</FormSwitch>
<FormSwitch v-model="event_mention" class="_formBlock">Mention</FormSwitch>
<div class="_autoGap_half">
<FormSwitch v-model="event_follow">Follow</FormSwitch>
<FormSwitch v-model="event_followed">Followed</FormSwitch>
<FormSwitch v-model="event_note">Note</FormSwitch>
<FormSwitch v-model="event_reply">Reply</FormSwitch>
<FormSwitch v-model="event_renote">Renote</FormSwitch>
<FormSwitch v-model="event_reaction">Reaction</FormSwitch>
<FormSwitch v-model="event_mention">Mention</FormSwitch>
</div>
</FormSection>
<div class="_formBlock" style="display: flex; gap: var(--margin); flex-wrap: wrap;">
<div style="display: flex; gap: var(--margin); flex-wrap: wrap;">
<FormButton primary inline @click="create"><i class="ti ti-check"></i> {{ i18n.ts.create }}</FormButton>
</div>
</div>

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

@@ -1,15 +1,13 @@
<template>
<div class="_formRoot">
<FormSection>
<FormLink :to="`/settings/webhook/new`">
Create webhook
</FormLink>
</FormSection>
<div class="_autoGap">
<FormLink :to="`/settings/webhook/new`">
Create webhook
</FormLink>
<FormSection>
<MkPagination :pagination="pagination">
<template #default="{items}">
<FormLink v-for="webhook in items" :key="webhook.id" :to="`/settings/webhook/edit/${webhook.id}`" class="_formBlock">
<FormLink v-for="webhook in items" :key="webhook.id" :to="`/settings/webhook/edit/${webhook.id}`" class="_margin">
<template #icon>
<i v-if="webhook.active === false" class="ti ti-player-pause"></i>
<i v-else-if="webhook.latestStatus === null" class="ti ti-circle"></i>

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

@@ -1,24 +1,24 @@
<template>
<div class="_formRoot">
<MkTab v-model="tab" class="_formBlock">
<div class="_autoGap">
<MkTab v-model="tab">
<option value="soft">{{ i18n.ts._wordMute.soft }}</option>
<option value="hard">{{ i18n.ts._wordMute.hard }}</option>
</MkTab>
<div class="_formBlock">
<div v-show="tab === 'soft'">
<MkInfo class="_formBlock">{{ i18n.ts._wordMute.softDescription }}</MkInfo>
<FormTextarea v-model="softMutedWords" class="_formBlock">
<div>
<div v-show="tab === 'soft'" class="_autoGap">
<MkInfo>{{ i18n.ts._wordMute.softDescription }}</MkInfo>
<FormTextarea v-model="softMutedWords">
<span>{{ i18n.ts._wordMute.muteWords }}</span>
<template #caption>{{ i18n.ts._wordMute.muteWordsDescription }}<br>{{ i18n.ts._wordMute.muteWordsDescription2 }}</template>
</FormTextarea>
</div>
<div v-show="tab === 'hard'">
<MkInfo class="_formBlock">{{ i18n.ts._wordMute.hardDescription }} {{ i18n.ts.reflectMayTakeTime }}</MkInfo>
<FormTextarea v-model="hardMutedWords" class="_formBlock">
<div v-show="tab === 'hard'" class="_autoGap">
<MkInfo>{{ i18n.ts._wordMute.hardDescription }} {{ i18n.ts.reflectMayTakeTime }}</MkInfo>
<FormTextarea v-model="hardMutedWords">
<span>{{ i18n.ts._wordMute.muteWords }}</span>
<template #caption>{{ i18n.ts._wordMute.muteWordsDescription }}<br>{{ i18n.ts._wordMute.muteWordsDescription2 }}</template>
</FormTextarea>
<MkKeyValue v-if="hardWordMutedNotesCount != null" class="_formBlock">
<MkKeyValue v-if="hardWordMutedNotesCount != null">
<template #key>{{ i18n.ts._wordMute.mutedNotes }}</template>
<template #value>{{ number(hardWordMutedNotesCount) }}</template>
</MkKeyValue>