graphite/Sharkey
1
0
Fork 0
mirror of https://git.joinsharkey.org/Sharkey/Sharkey.git synced 2024-11-27 02:03:09 +02:00
Code Issues Projects Releases Packages Wiki Activity

refactor

Browse source
This commit is contained in:
syuilo 2023-05-19 13:58:09 +09:00
parent 95b9284e79
commit 6a5ef5b6f2
81 changed files with 342 additions and 354 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
packages/frontend/.eslintrc.js
View file

@ -62,9 +62,8 @@ module.exports = {
'vue/max-attributes-per-line': 'off', 'vue/max-attributes-per-line': 'off',
'vue/html-self-closing': 'off', 'vue/html-self-closing': 'off',
'vue/singleline-html-element-content-newline': 'off', 'vue/singleline-html-element-content-newline': 'off',
// (vue/vue3-recommended disabled the autofix for Vue 2 compatibility) 'vue/v-on-event-hyphenation': ['error', 'never', { autofix: true }],
'vue/v-on-event-hyphenation': ['warn', 'always', { autofix: true }], 'vue/attribute-hyphenation': ['error', 'never'],
'vue/attribute-hyphenation': ['warn', 'never'],
}, },
globals: { globals: {
// Node.js // Node.js

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

@ -1,5 +1,5 @@
<template> <template>
<MkWindow ref="uiWindow" :initial-width="400" :initial-height="500" :can-resize="true" @closed="emit('closed')"> <MkWindow ref="uiWindow" :initialWidth="400" :initialHeight="500" :canResize="true" @closed="emit('closed')">
<template #header> <template #header>
<i class="ti ti-exclamation-circle" style="margin-right: 0.5em;"></i> <i class="ti ti-exclamation-circle" style="margin-right: 0.5em;"></i>
<I18n :src="i18n.ts.reportAbuseOf" tag="span"> <I18n :src="i18n.ts.reportAbuseOf" tag="span">
@ -8,7 +8,7 @@
</template> </template>
</I18n> </I18n>
</template> </template>
<MkSpacer :margin-min="20" :margin-max="28"> <MkSpacer :marginMin="20" :marginMax="28">
<div class="_gaps_m" :class="$style.root"> <div class="_gaps_m" :class="$style.root">
<div class=""> <div class="">
<MkTextarea v-model="comment"> <MkTextarea v-model="comment">

4
packages/frontend/src/components/MkAccountMoved.vue
View file

@ -7,11 +7,11 @@
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { ref } from 'vue';
import { UserLite } from 'misskey-js/built/entities';
import MkMention from './MkMention.vue'; import MkMention from './MkMention.vue';
import { i18n } from '@/i18n'; import { i18n } from '@/i18n';
import { host as localHost } from '@/config'; import { host as localHost } from '@/config';
import { ref } from 'vue';
import { UserLite } from 'misskey-js/built/entities';
import { api } from '@/os'; import { api } from '@/os';
const user = ref<UserLite>(); const user = ref<UserLite>();

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

@ -11,29 +11,29 @@
<div v-else-if="c.type === 'buttons'" class="_buttons" :style="{ justifyContent: align }"> <div v-else-if="c.type === 'buttons'" class="_buttons" :style="{ justifyContent: align }">
<MkButton v-for="button in c.buttons" :primary="button.primary" :rounded="button.rounded" :disabled="button.disabled" inline :small="size === 'small'" @click="button.onClick">{{ button.text }}</MkButton> <MkButton v-for="button in c.buttons" :primary="button.primary" :rounded="button.rounded" :disabled="button.disabled" inline :small="size === 'small'" @click="button.onClick">{{ button.text }}</MkButton>
</div> </div>
<MkSwitch v-else-if="c.type === 'switch'" :model-value="valueForSwitch" @update:model-value="onSwitchUpdate"> <MkSwitch v-else-if="c.type === 'switch'" :modelValue="valueForSwitch" @update:modelValue="onSwitchUpdate">
<template v-if="c.label" #label>{{ c.label }}</template> <template v-if="c.label" #label>{{ c.label }}</template>
<template v-if="c.caption" #caption>{{ c.caption }}</template> <template v-if="c.caption" #caption>{{ c.caption }}</template>
</MkSwitch> </MkSwitch>
<MkTextarea v-else-if="c.type === 'textarea'" :model-value="c.default" @update:model-value="c.onInput"> <MkTextarea v-else-if="c.type === 'textarea'" :modelValue="c.default" @update:modelValue="c.onInput">
<template v-if="c.label" #label>{{ c.label }}</template> <template v-if="c.label" #label>{{ c.label }}</template>
<template v-if="c.caption" #caption>{{ c.caption }}</template> <template v-if="c.caption" #caption>{{ c.caption }}</template>
</MkTextarea> </MkTextarea>
<MkInput v-else-if="c.type === 'textInput'" :small="size === 'small'" :model-value="c.default" @update:model-value="c.onInput"> <MkInput v-else-if="c.type === 'textInput'" :small="size === 'small'" :modelValue="c.default" @update:modelValue="c.onInput">
<template v-if="c.label" #label>{{ c.label }}</template> <template v-if="c.label" #label>{{ c.label }}</template>
<template v-if="c.caption" #caption>{{ c.caption }}</template> <template v-if="c.caption" #caption>{{ c.caption }}</template>
</MkInput> </MkInput>
<MkInput v-else-if="c.type === 'numberInput'" :small="size === 'small'" :model-value="c.default" type="number" @update:model-value="c.onInput"> <MkInput v-else-if="c.type === 'numberInput'" :small="size === 'small'" :modelValue="c.default" type="number" @update:modelValue="c.onInput">
<template v-if="c.label" #label>{{ c.label }}</template> <template v-if="c.label" #label>{{ c.label }}</template>
<template v-if="c.caption" #caption>{{ c.caption }}</template> <template v-if="c.caption" #caption>{{ c.caption }}</template>
</MkInput> </MkInput>
<MkSelect v-else-if="c.type === 'select'" :small="size === 'small'" :model-value="c.default" @update:model-value="c.onChange"> <MkSelect v-else-if="c.type === 'select'" :small="size === 'small'" :modelValue="c.default" @update:modelValue="c.onChange">
<template v-if="c.label" #label>{{ c.label }}</template> <template v-if="c.label" #label>{{ c.label }}</template>
<template v-if="c.caption" #caption>{{ c.caption }}</template> <template v-if="c.caption" #caption>{{ c.caption }}</template>
<option v-for="item in c.items" :key="item.value" :value="item.value">{{ item.text }}</option> <option v-for="item in c.items" :key="item.value" :value="item.value">{{ item.text }}</option>
</MkSelect> </MkSelect>
<MkButton v-else-if="c.type === 'postFormButton'" :primary="c.primary" :rounded="c.rounded" :small="size === 'small'" inline @click="openPostForm">{{ c.text }}</MkButton> <MkButton v-else-if="c.type === 'postFormButton'" :primary="c.primary" :rounded="c.rounded" :small="size === 'small'" inline @click="openPostForm">{{ c.text }}</MkButton>
<MkFolder v-else-if="c.type === 'folder'" :default-open="c.opened"> <MkFolder v-else-if="c.type === 'folder'" :defaultOpen="c.opened">
<template #label>{{ c.title }}</template> <template #label>{{ c.title }}</template>
<template v-for="child in c.children" :key="child"> <template v-for="child in c.children" :key="child">
<MkAsUi v-if="!g(child).hidden" :component="g(child)" :components="props.components" :size="size"/> <MkAsUi v-if="!g(child).hidden" :component="g(child)" :components="props.components" :size="size"/>

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

@ -1,7 +1,7 @@
<template> <template>
<div> <div>
<div v-for="user in users" :key="user.id" style="display:inline-block;width:32px;height:32px;margin-right:8px;"> <div v-for="user in users" :key="user.id" style="display:inline-block;width:32px;height:32px;margin-right:8px;">
<MkAvatar :user="user" style="width:32px;height:32px;" indicator link preview/> <MkAvatar :user="user" style="width:32px; height:32px;" indicator link preview/>
</div> </div>
</div> </div>
</template> </template>

34
packages/frontend/src/components/MkChart.vue
View file

@ -1,8 +1,8 @@
<template> <template>
<div class="cbbedffa"> <div :class="$style.root">
<canvas ref="chartEl"></canvas> <canvas ref="chartEl"></canvas>
<MkChartLegend ref="legendEl" style="margin-top: 8px;"/> <MkChartLegend ref="legendEl" style="margin-top: 8px;"/>
<div v-if="fetching" class="fetching"> <div v-if="fetching" :class="$style.fetching">
<MkLoading/> <MkLoading/>
</div> </div>
</div> </div>
@ -817,22 +817,22 @@ onMounted(() => {
/* eslint-enable id-denylist */ /* eslint-enable id-denylist */
</script> </script>
<style lang="scss" scoped> <style lang="scss" module>
.cbbedffa { .root {
position: relative; position: relative;
}
> .fetching { .fetching {
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
-webkit-backdrop-filter: var(--blur, blur(12px)); -webkit-backdrop-filter: var(--blur, blur(12px));
backdrop-filter: var(--blur, blur(12px)); backdrop-filter: var(--blur, blur(12px));
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
cursor: wait; cursor: wait;
}
} }
</style> </style>

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

@ -1,5 +1,5 @@
<template> <template>
<MkTooltip ref="tooltip" :showing="showing" :x="x" :y="y" :max-width="340" :direction="'top'" :inner-margin="16" @closed="emit('closed')"> <MkTooltip ref="tooltip" :showing="showing" :x="x" :y="y" :maxWidth="340" :direction="'top'" :innerMargin="16" @closed="emit('closed')">
<div v-if="title || series"> <div v-if="title || series">
<div v-if="title" :class="$style.title">{{ title }}</div> <div v-if="title" :class="$style.title">{{ title }}</div>
<template v-if="series"> <template v-if="series">

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

@ -6,7 +6,7 @@
<slot name="header"></slot> <slot name="header"></slot>
</div> </div>
<div :class="$style.headerSub"> <div :class="$style.headerSub">
<slot name="func" :button-style-class="$style.headerButton"></slot> <slot name="func" :buttonStyleClass="$style.headerButton"></slot>
<button v-if="foldable" :class="$style.headerButton" class="_button" @click="() => showBody = !showBody"> <button v-if="foldable" :class="$style.headerButton" class="_button" @click="() => showBody = !showBody">
<template v-if="showBody"><i class="ti ti-chevron-up"></i></template> <template v-if="showBody"><i class="ti ti-chevron-up"></i></template>
<template v-else><i class="ti ti-chevron-down"></i></template> <template v-else><i class="ti ti-chevron-down"></i></template>
@ -14,14 +14,14 @@
</div> </div>
</header> </header>
<Transition <Transition
:enter-active-class="defaultStore.state.animation ? $style.transition_toggle_enterActive : ''" :enterActiveClass="defaultStore.state.animation ? $style.transition_toggle_enterActive : ''"
:leave-active-class="defaultStore.state.animation ? $style.transition_toggle_leaveActive : ''" :leaveActiveClass="defaultStore.state.animation ? $style.transition_toggle_leaveActive : ''"
:enter-from-class="defaultStore.state.animation ? $style.transition_toggle_enterFrom : ''" :enterFromClass="defaultStore.state.animation ? $style.transition_toggle_enterFrom : ''"
:leave-to-class="defaultStore.state.animation ? $style.transition_toggle_leaveTo : ''" :leaveToClass="defaultStore.state.animation ? $style.transition_toggle_leaveTo : ''"
@enter="enter" @enter="enter"
@after-enter="afterEnter" @afterEnter="afterEnter"
@leave="leave" @leave="leave"
@after-leave="afterLeave" @afterLeave="afterLeave"
> >
<div v-show="showBody" ref="contentEl" :class="[$style.content, { [$style.omitted]: omitted }]"> <div v-show="showBody" ref="contentEl" :class="[$style.content, { [$style.omitted]: omitted }]">
<slot></slot> <slot></slot>

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

@ -1,10 +1,10 @@
<template> <template>
<Transition <Transition
appear appear
:enter-active-class="defaultStore.state.animation ? $style.transition_fade_enterActive : ''" :enterActiveClass="defaultStore.state.animation ? $style.transition_fade_enterActive : ''"
:leave-active-class="defaultStore.state.animation ? $style.transition_fade_leaveActive : ''" :leaveActiveClass="defaultStore.state.animation ? $style.transition_fade_leaveActive : ''"
:enter-from-class="defaultStore.state.animation ? $style.transition_fade_enterFrom : ''" :enterFromClass="defaultStore.state.animation ? $style.transition_fade_enterFrom : ''"
:leave-to-class="defaultStore.state.animation ? $style.transition_fade_leaveTo : ''" :leaveToClass="defaultStore.state.animation ? $style.transition_fade_leaveTo : ''"
> >
<div ref="rootEl" :class="$style.root" :style="{ zIndex }" @contextmenu.prevent.stop="() => {}"> <div ref="rootEl" :class="$style.root" :style="{ zIndex }" @contextmenu.prevent.stop="() => {}">
<MkMenu :items="items" :align="'left'" @close="$emit('closed')"/> <MkMenu :items="items" :align="'left'" @close="$emit('closed')"/>

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

@ -4,7 +4,7 @@
:width="800" :width="800"
:height="500" :height="500"
:scroll="false" :scroll="false"
:with-ok-button="true" :withOkButton="true"
@close="cancel()" @close="cancel()"
@ok="ok()" @ok="ok()"
@closed="$emit('closed')" @closed="$emit('closed')"

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

@ -1,5 +1,5 @@
<template> <template>
<MkModal ref="modal" :prefer-type="'dialog'" :z-priority="'high'" @click="done(true)" @closed="emit('closed')"> <MkModal ref="modal" :preferType="'dialog'" :zPriority="'high'" @click="done(true)" @closed="emit('closed')">
<div :class="$style.root"> <div :class="$style.root">
<div v-if="icon" :class="$style.icon"> <div v-if="icon" :class="$style.icon">
<i :class="icon"></i> <i :class="icon"></i>

18
packages/frontend/src/components/MkDrive.navFolder.vue
View file

@ -1,13 +1,13 @@
<template> <template>
<div class="drylbebk" <div
:class="{ draghover }" :class="[$style.root, { [$style.draghover]: draghover }]"
@click="onClick" @click="onClick"
@dragover.prevent.stop="onDragover" @dragover.prevent.stop="onDragover"
@dragenter="onDragenter" @dragenter="onDragenter"
@dragleave="onDragleave" @dragleave="onDragleave"
@drop.stop="onDrop" @drop.stop="onDrop"
> >
<i v-if="folder == null" class="ti ti-cloud"></i> <i v-if="folder == null" class="ti ti-cloud" style="margin-right: 4px;"></i>
<span>{{ folder == null ? i18n.ts.drive : folder.name }}</span> <span>{{ folder == null ? i18n.ts.drive : folder.name }}</span>
</div> </div>
</template> </template>
@ -130,18 +130,10 @@ function onDrop(ev: DragEvent) {
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" module>
.drylbebk { .root {
> * {
pointer-events: none;
}
&.draghover { &.draghover {
background: #eee; background: #eee;
} }
> i {
margin-right: 4px;
}
} }
</style> </style>

24
packages/frontend/src/components/MkDrive.vue
View file

@ -4,21 +4,21 @@
<div class="path" @contextmenu.prevent.stop="() => {}"> <div class="path" @contextmenu.prevent.stop="() => {}">
<XNavFolder <XNavFolder
:class="{ current: folder == null }" :class="{ current: folder == null }"
:parent-folder="folder" :parentFolder="folder"
@move="move" @move="move"
@upload="upload" @upload="upload"
@remove-file="removeFile" @removeFile="removeFile"
@remove-folder="removeFolder" @removeFolder="removeFolder"
/> />
<template v-for="f in hierarchyFolders"> <template v-for="f in hierarchyFolders">
<span class="separator"><i class="ti ti-chevron-right"></i></span> <span class="separator"><i class="ti ti-chevron-right"></i></span>
<XNavFolder <XNavFolder
:folder="f" :folder="f"
:parent-folder="folder" :parentFolder="folder"
@move="move" @move="move"
@upload="upload" @upload="upload"
@remove-file="removeFile" @removeFile="removeFile"
@remove-folder="removeFolder" @removeFolder="removeFolder"
/> />
</template> </template>
<span v-if="folder != null" class="separator"><i class="ti ti-chevron-right"></i></span> <span v-if="folder != null" class="separator"><i class="ti ti-chevron-right"></i></span>
@ -43,13 +43,13 @@
v-anim="i" v-anim="i"
class="folder" class="folder"
:folder="f" :folder="f"
:select-mode="select === 'folder'" :selectMode="select === 'folder'"
:is-selected="selectedFolders.some(x => x.id === f.id)" :isSelected="selectedFolders.some(x => x.id === f.id)"
@chosen="chooseFolder" @chosen="chooseFolder"
@move="move" @move="move"
@upload="upload" @upload="upload"
@remove-file="removeFile" @removeFile="removeFile"
@remove-folder="removeFolder" @removeFolder="removeFolder"
@dragstart="isDragSource = true" @dragstart="isDragSource = true"
@dragend="isDragSource = false" @dragend="isDragSource = false"
/> />
@ -64,8 +64,8 @@
v-anim="i" v-anim="i"
class="file" class="file"
:file="file" :file="file"
:select-mode="select === 'file'" :selectMode="select === 'file'"
:is-selected="selectedFiles.some(x => x.id === file.id)" :isSelected="selectedFiles.some(x => x.id === file.id)"
@chosen="chooseFile" @chosen="chooseFile"
@dragstart="isDragSource = true" @dragstart="isDragSource = true"
@dragend="isDragSource = false" @dragend="isDragSource = false"

52
packages/frontend/src/components/MkDriveFileThumbnail.vue
View file

@ -1,16 +1,16 @@
<template> <template>
<div ref="thumbnail" class="zdjebgpv"> <div ref="thumbnail" :class="$style.root">
<ImgWithBlurhash v-if="isThumbnailAvailable" :hash="file.blurhash" :src="file.thumbnailUrl" :alt="file.name" :title="file.name" :cover="fit !== 'contain'"/> <ImgWithBlurhash v-if="isThumbnailAvailable" :hash="file.blurhash" :src="file.thumbnailUrl" :alt="file.name" :title="file.name" :cover="fit !== 'contain'"/>
<i v-else-if="is === 'image'" class="ti ti-photo icon"></i> <i v-else-if="is === 'image'" class="ti ti-photo" :class="$style.icon"></i>
<i v-else-if="is === 'video'" class="ti ti-video icon"></i> <i v-else-if="is === 'video'" class="ti ti-video" :class="$style.icon"></i>
<i v-else-if="is === 'audio' || is === 'midi'" class="ti ti-file-music icon"></i> <i v-else-if="is === 'audio' || is === 'midi'" class="ti ti-file-music" :class="$style.icon"></i>
<i v-else-if="is === 'csv'" class="ti ti-file-text icon"></i> <i v-else-if="is === 'csv'" class="ti ti-file-text" :class="$style.icon"></i>
<i v-else-if="is === 'pdf'" class="ti ti-file-text icon"></i> <i v-else-if="is === 'pdf'" class="ti ti-file-text" :class="$style.icon"></i>
<i v-else-if="is === 'textfile'" class="ti ti-file-text icon"></i> <i v-else-if="is === 'textfile'" class="ti ti-file-text" :class="$style.icon"></i>
<i v-else-if="is === 'archive'" class="ti ti-file-zip icon"></i> <i v-else-if="is === 'archive'" class="ti ti-file-zip" :class="$style.icon"></i>
<i v-else class="ti ti-file icon"></i> <i v-else class="ti ti-file" :class="$style.icon"></i>
<i v-if="isThumbnailAvailable && is === 'video'" class="ti ti-video icon-sub"></i> <i v-if="isThumbnailAvailable && is === 'video'" class="ti ti-video" :class="$style.iconSub"></i>
</div> </div>
</template> </template>
@ -53,28 +53,28 @@ const isThumbnailAvailable = computed(() => {
}); });
</script> </script>
<style lang="scss" scoped> <style lang="scss" module>
.zdjebgpv { .root {
position: relative; position: relative;
display: flex; display: flex;
background: var(--panel); background: var(--panel);
border-radius: 8px; border-radius: 8px;
overflow: clip; overflow: clip;
}
> .icon-sub { .iconSub {
position: absolute; position: absolute;
width: 30%; width: 30%;
height: auto; height: auto;
margin: 0; margin: 0;
right: 4%; right: 4%;
bottom: 4%; bottom: 4%;
} }
> .icon { .icon {
pointer-events: none; pointer-events: none;
margin: auto; margin: auto;
font-size: 32px; font-size: 32px;
color: #777; color: #777;
}
} }
</style> </style>

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

@ -3,8 +3,8 @@
ref="dialog" ref="dialog"
:width="800" :width="800"
:height="500" :height="500"
:with-ok-button="true" :withOkButton="true"
:ok-button-disabled="(type === 'file') && (selected.length === 0)" :okButtonDisabled="(type === 'file') && (selected.length === 0)"
@click="cancel()" @click="cancel()"
@close="cancel()" @close="cancel()"
@ok="ok()" @ok="ok()"
@ -14,7 +14,7 @@
{{ multiple ? ((type === 'file') ? i18n.ts.selectFiles : i18n.ts.selectFolders) : ((type === 'file') ? i18n.ts.selectFile : i18n.ts.selectFolder) }} {{ multiple ? ((type === 'file') ? i18n.ts.selectFiles : i18n.ts.selectFolders) : ((type === 'file') ? i18n.ts.selectFile : i18n.ts.selectFolder) }}
<span v-if="selected.length > 0" style="margin-left: 8px; opacity: 0.5;">({{ number(selected.length) }})</span> <span v-if="selected.length > 0" style="margin-left: 8px; opacity: 0.5;">({{ number(selected.length) }})</span>
</template> </template>
<XDrive :multiple="multiple" :select="type" @change-selection="onChangeSelection" @selected="ok()"/> <XDrive :multiple="multiple" :select="type" @changeSelection="onChangeSelection" @selected="ok()"/>
</MkModalWindow> </MkModalWindow>
</template> </template>

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

@ -1,15 +1,15 @@
<template> <template>
<MkWindow <MkWindow
ref="window" ref="window"
:initial-width="800" :initialWidth="800"
:initial-height="500" :initialHeight="500"
:can-resize="true" :canResize="true"
@closed="emit('closed')" @closed="emit('closed')"
> >
<template #header> <template #header>
{{ i18n.ts.drive }} {{ i18n.ts.drive }}
</template> </template>
<XDrive :initial-folder="initialFolder"/> <XDrive :initialFolder="initialFolder"/>
</MkWindow> </MkWindow>
</template> </template>

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

@ -2,10 +2,10 @@
<MkModal <MkModal
ref="modal" ref="modal"
v-slot="{ type, maxHeight }" v-slot="{ type, maxHeight }"
:z-priority="'middle'" :zPriority="'middle'"
:prefer-type="asReactionPicker && defaultStore.state.reactionPickerUseDrawerForMobile === false ? 'popup' : 'auto'" :preferType="asReactionPicker && defaultStore.state.reactionPickerUseDrawerForMobile === false ? 'popup' : 'auto'"
:transparent-bg="true" :transparentBg="true"
:manual-showing="manualShowing" :manualShowing="manualShowing"
:src="src" :src="src"
@click="modal?.close()" @click="modal?.close()"
@opening="opening" @opening="opening"
@ -16,9 +16,9 @@
ref="picker" ref="picker"
class="ryghynhb _popup _shadow" class="ryghynhb _popup _shadow"
:class="{ drawer: type === 'drawer' }" :class="{ drawer: type === 'drawer' }"
:show-pinned="showPinned" :showPinned="showPinned"
:as-reaction-picker="asReactionPicker" :asReactionPicker="asReactionPicker"
:as-drawer="type === 'drawer'" :asDrawer="type === 'drawer'"
:max-height="maxHeight" :max-height="maxHeight"
@chosen="chosen" @chosen="chosen"
/> />

11
packages/frontend/src/components/MkEmojiPickerWindow.vue
View file

@ -1,13 +1,14 @@
<template> <template>
<MkWindow ref="window" <MkWindow
:initial-width="300" ref="window"
:initial-height="290" :initialWidth="300"
:can-resize="true" :initialHeight="290"
:canResize="true"
:mini="true" :mini="true"
:front="true" :front="true"
@closed="emit('closed')" @closed="emit('closed')"
> >
<MkEmojiPicker :show-pinned="showPinned" :as-reaction-picker="asReactionPicker" as-window :class="$style.picker" @chosen="chosen"/> <MkEmojiPicker :showPinned="showPinned" :asReactionPicker="asReactionPicker" asWindow :class="$style.picker" @chosen="chosen"/>
</MkWindow> </MkWindow>
</template> </template>

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

@ -3,14 +3,14 @@
ref="dialog" ref="dialog"
:width="400" :width="400"
:height="450" :height="450"
:with-ok-button="true" :withOkButton="true"
:ok-button-disabled="false" :okButtonDisabled="false"
@ok="ok()" @ok="ok()"
@close="dialog.close()" @close="dialog.close()"
@closed="emit('closed')" @closed="emit('closed')"
> >
<template #header>{{ i18n.ts.describeFile }}</template> <template #header>{{ i18n.ts.describeFile }}</template>
<MkSpacer :margin-min="20" :margin-max="28"> <MkSpacer :marginMin="20" :marginMax="28">
<MkDriveFileThumbnail :file="file" fit="contain" style="height: 100px; margin-bottom: 16px;"/> <MkDriveFileThumbnail :file="file" fit="contain" style="height: 100px; margin-bottom: 16px;"/>
<MkTextarea v-model="caption" autofocus :placeholder="i18n.ts.inputNewDescription"> <MkTextarea v-model="caption" autofocus :placeholder="i18n.ts.inputNewDescription">
<template #label>{{ i18n.ts.caption }}</template> <template #label>{{ i18n.ts.caption }}</template>

74
packages/frontend/src/components/MkFoldableSection.vue
View file

@ -1,9 +1,9 @@
<template> <template>
<div ref="el" class="ssazuxis"> <div ref="el" :class="$style.root">
<header class="_button" :style="{ background: bg }" @click="showBody = !showBody"> <header :class="$style.header" class="_button" :style="{ background: bg }" @click="showBody = !showBody">
<div class="title"><div><slot name="header"></slot></div></div> <div :class="$style.title"><div><slot name="header"></slot></div></div>
<div class="divider"></div> <div :class="$style.divider"></div>
<button class="_button"> <button class="_button" :class="$style.button">
<template v-if="showBody"><i class="ti ti-chevron-up"></i></template> <template v-if="showBody"><i class="ti ti-chevron-up"></i></template>
<template v-else><i class="ti ti-chevron-down"></i></template> <template v-else><i class="ti ti-chevron-down"></i></template>
</button> </button>
@ -11,9 +11,9 @@
<Transition <Transition
:name="defaultStore.state.animation ? 'folder-toggle' : ''" :name="defaultStore.state.animation ? 'folder-toggle' : ''"
@enter="enter" @enter="enter"
@after-enter="afterEnter" @afterEnter="afterEnter"
@leave="leave" @leave="leave"
@after-leave="afterLeave" @afterLeave="afterLeave"
> >
<div v-show="showBody"> <div v-show="showBody">
<slot></slot> <slot></slot>
@ -86,7 +86,7 @@ onMounted(() => {
}); });
</script> </script>
<style lang="scss" scoped> <style lang="scss" module>
.folder-toggle-enter-active, .folder-toggle-leave-active { .folder-toggle-enter-active, .folder-toggle-leave-active {
overflow-y: clip; overflow-y: clip;
transition: opacity 0.5s, height 0.5s !important; transition: opacity 0.5s, height 0.5s !important;
@ -98,45 +98,41 @@ onMounted(() => {
opacity: 0; opacity: 0;
} }
.ssazuxis { .root {
position: relative; position: relative;
}
> header { .header {
display: flex; display: flex;
position: relative; position: relative;
z-index: 10; z-index: 10;
position: sticky; position: sticky;
top: var(--stickyTop, 0px); top: var(--stickyTop, 0px);
-webkit-backdrop-filter: var(--blur, blur(8px)); -webkit-backdrop-filter: var(--blur, blur(8px));
backdrop-filter: var(--blur, blur(20px)); backdrop-filter: var(--blur, blur(20px));
}
> .title { .title {
display: grid; display: grid;
place-content: center; place-content: center;
margin: 0; margin: 0;
padding: 12px 16px 12px 0; padding: 12px 16px 12px 0;
} }
> .divider { .divider {
flex: 1; flex: 1;
margin: auto; margin: auto;
height: 1px; height: 1px;
background: var(--divider); background: var(--divider);
} }
> button { .button {
padding: 12px 0 12px 16px; padding: 12px 0 12px 16px;
}
}
} }
@container (max-width: 500px) { @container (max-width: 500px) {
.ssazuxis { .title {
> header { padding: 8px 10px 8px 0;
> .title {
padding: 8px 10px 8px 0;
}
}
} }
} }
</style> </style>

16
packages/frontend/src/components/MkFolder.vue
View file

@ -6,7 +6,7 @@
<div :class="$style.headerIcon"><slot name="icon"></slot></div> <div :class="$style.headerIcon"><slot name="icon"></slot></div>
<div :class="$style.headerText"> <div :class="$style.headerText">
<div :class="$style.headerTextMain"> <div :class="$style.headerTextMain">
<MkCondensedLine :min-scale="2 / 3"><slot name="label"></slot></MkCondensedLine> <MkCondensedLine :minScale="2 / 3"><slot name="label"></slot></MkCondensedLine>
</div> </div>
<div :class="$style.headerTextSub"> <div :class="$style.headerTextSub">
<slot name="caption"></slot> <slot name="caption"></slot>
@ -22,18 +22,18 @@
<div v-if="openedAtLeastOnce" :class="[$style.body, { [$style.bgSame]: bgSame }]" :style="{ maxHeight: maxHeight ? `${maxHeight}px` : null, overflow: maxHeight ? `auto` : null }" :aria-hidden="!opened"> <div v-if="openedAtLeastOnce" :class="[$style.body, { [$style.bgSame]: bgSame }]" :style="{ maxHeight: maxHeight ? `${maxHeight}px` : null, overflow: maxHeight ? `auto` : null }" :aria-hidden="!opened">
<Transition <Transition
:enter-active-class="defaultStore.state.animation ? $style.transition_toggle_enterActive : ''" :enterActiveClass="defaultStore.state.animation ? $style.transition_toggle_enterActive : ''"
:leave-active-class="defaultStore.state.animation ? $style.transition_toggle_leaveActive : ''" :leaveActiveClass="defaultStore.state.animation ? $style.transition_toggle_leaveActive : ''"
:enter-from-class="defaultStore.state.animation ? $style.transition_toggle_enterFrom : ''" :enterFromClass="defaultStore.state.animation ? $style.transition_toggle_enterFrom : ''"
:leave-to-class="defaultStore.state.animation ? $style.transition_toggle_leaveTo : ''" :leaveToClass="defaultStore.state.animation ? $style.transition_toggle_leaveTo : ''"
@enter="enter" @enter="enter"
@after-enter="afterEnter" @afterEnter="afterEnter"
@leave="leave" @leave="leave"
@after-leave="afterLeave" @afterLeave="afterLeave"
> >
<KeepAlive> <KeepAlive>
<div v-show="opened"> <div v-show="opened">
<MkSpacer :margin-min="14" :margin-max="22"> <MkSpacer :marginMin="14" :marginMax="22">
<slot></slot> <slot></slot>
</MkSpacer> </MkSpacer>
</div> </div>

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

@ -2,9 +2,9 @@
<MkModalWindow <MkModalWindow
ref="dialog" ref="dialog"
:width="450" :width="450"
:can-close="false" :canClose="false"
:with-ok-button="true" :withOkButton="true"
:ok-button-disabled="false" :okButtonDisabled="false"
@click="cancel()" @click="cancel()"
@ok="ok()" @ok="ok()"
@close="cancel()" @close="cancel()"
@ -14,7 +14,7 @@
{{ title }} {{ title }}
</template> </template>
<MkSpacer :margin-min="20" :margin-max="32"> <MkSpacer :marginMin="20" :marginMax="32">
<div class="_gaps_m"> <div class="_gaps_m">
<template v-for="item in Object.keys(form).filter(item => !form[item].hidden)"> <template v-for="item in Object.keys(form).filter(item => !form[item].hidden)">
<MkInput v-if="form[item].type === 'number'" v-model="values[item]" type="number" :step="form[item].step || 1"> <MkInput v-if="form[item].type === 'number'" v-model="values[item]" type="number" :step="form[item].step || 1">
@ -41,7 +41,7 @@
<template #label><span v-text="form[item].label || item"></span><span v-if="form[item].required === false"> ({{ i18n.ts.optional }})</span></template> <template #label><span v-text="form[item].label || item"></span><span v-if="form[item].required === false"> ({{ i18n.ts.optional }})</span></template>
<option v-for="item in form[item].options" :key="item.value" :value="item.value">{{ item.label }}</option> <option v-for="item in form[item].options" :key="item.value" :value="item.value">{{ item.label }}</option>
</MkRadios> </MkRadios>
<MkRange v-else-if="form[item].type === 'range'" v-model="values[item]" :min="form[item].min" :max="form[item].max" :step="form[item].step" :text-converter="form[item].textConverter"> <MkRange v-else-if="form[item].type === 'range'" v-model="values[item]" :min="form[item].min" :max="form[item].max" :step="form[item].step" :textConverter="form[item].textConverter">
<template #label><span v-text="form[item].label || item"></span><span v-if="form[item].required === false"> ({{ i18n.ts.optional }})</span></template> <template #label><span v-text="form[item].label || item"></span><span v-if="form[item].required === false"> ({{ i18n.ts.optional }})</span></template>
<template v-if="form[item].description" #caption>{{ form[item].description }}</template> <template v-if="form[item].description" #caption>{{ form[item].description }}</template>
</MkRange> </MkRange>

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

@ -11,7 +11,7 @@
}" }"
:src="post.files[0].thumbnailUrl" :src="post.files[0].thumbnailUrl"
:hash="post.files[0].blurhash" :hash="post.files[0].blurhash"
:force-blurhash="!show" :forceBlurhash="!show"
/> />
</Transition> </Transition>
</div> </div>

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

@ -1,5 +1,5 @@
<template> <template>
<MkModal ref="modal" :z-priority="'middle'" @click="modal.close()" @closed="emit('closed')"> <MkModal ref="modal" :zPriority="'middle'" @click="modal.close()" @closed="emit('closed')">
<div class="xubzgfga"> <div class="xubzgfga">
<header>{{ image.name }}</header> <header>{{ image.name }}</header>
<img :src="image.url" :alt="image.comment" :title="image.comment" @click="modal.close()"/> <img :src="image.url" :alt="image.comment" :title="image.comment" @click="modal.close()"/>

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

@ -2,12 +2,12 @@
<div ref="root" :class="[$style.root, { [$style.cover]: cover }]" :title="title ?? ''"> <div ref="root" :class="[$style.root, { [$style.cover]: cover }]" :title="title ?? ''">
<TransitionGroup <TransitionGroup
:duration="defaultStore.state.animation && props.transition?.duration || undefined" :duration="defaultStore.state.animation && props.transition?.duration || undefined"
:enter-active-class="defaultStore.state.animation && props.transition?.enterActiveClass || undefined" :enterActiveClass="defaultStore.state.animation && props.transition?.enterActiveClass || undefined"
:leave-active-class="defaultStore.state.animation && (props.transition?.leaveActiveClass ?? $style['transition_leaveActive']) || undefined" :leaveActiveClass="defaultStore.state.animation && (props.transition?.leaveActiveClass ?? $style['transition_leaveActive']) || undefined"
:enter-from-class="defaultStore.state.animation && props.transition?.enterFromClass || undefined" :enterFromClass="defaultStore.state.animation && props.transition?.enterFromClass || undefined"
:leave-to-class="defaultStore.state.animation && props.transition?.leaveToClass || undefined" :leaveToClass="defaultStore.state.animation && props.transition?.leaveToClass || undefined"
:enter-to-class="defaultStore.state.animation && props.transition?.enterToClass || undefined" :enterToClass="defaultStore.state.animation && props.transition?.enterToClass || undefined"
:leave-from-class="defaultStore.state.animation && props.transition?.leaveFromClass || undefined" :leaveFromClass="defaultStore.state.animation && props.transition?.leaveFromClass || undefined"
> >
<canvas v-show="hide" key="canvas" ref="canvas" :class="$style.canvas" :width="canvasWidth" :height="canvasHeight" :title="title ?? undefined"/> <canvas v-show="hide" key="canvas" ref="canvas" :class="$style.canvas" :width="canvasWidth" :height="canvasHeight" :title="title ?? undefined"/>
<img v-show="!hide" key="img" ref="img" :height="imgHeight" :width="imgWidth" :class="$style.img" :src="src ?? undefined" :title="title ?? undefined" :alt="alt ?? undefined" loading="eager" decoding="async"/> <img v-show="!hide" key="img" ref="img" :height="imgHeight" :width="imgWidth" :class="$style.img" :src="src ?? undefined" :title="title ?? undefined" :alt="alt ?? undefined" loading="eager" decoding="async"/>
@ -16,10 +16,10 @@
</template> </template>
<script lang="ts"> <script lang="ts">
import { $ref } from 'vue/macros';
import DrawBlurhash from '@/workers/draw-blurhash?worker'; import DrawBlurhash from '@/workers/draw-blurhash?worker';
import TestWebGL2 from '@/workers/test-webgl2?worker'; import TestWebGL2 from '@/workers/test-webgl2?worker';
import { WorkerMultiDispatch } from '@/scripts/worker-multi-dispatch'; import { WorkerMultiDispatch } from '@/scripts/worker-multi-dispatch';
import { $ref } from 'vue/macros';
import { extractAvgColorFromBlurhash } from '@/scripts/extract-avg-color-from-blurhash'; import { extractAvgColorFromBlurhash } from '@/scripts/extract-avg-color-from-blurhash';
const workerPromise = new Promise<WorkerMultiDispatch | null>(resolve => { const workerPromise = new Promise<WorkerMultiDispatch | null>(resolve => {

26
packages/frontend/src/components/MkKeyValue.vue
View file

@ -1,9 +1,9 @@
<template> <template>
<div class="alqyeyti" :class="{ oneline }"> <div :class="[$style.root, { [$style.oneline]: oneline }]">
<div class="key"> <div :class="$style.key">
<slot name="key"></slot> <slot name="key"></slot>
</div> </div>
<div class="value"> <div :class="$style.value">
<slot name="value"></slot> <slot name="value"></slot>
<button v-if="copy" v-tooltip="i18n.ts.copy" class="_textButton" style="margin-left: 0.5em;" @click="copy_"><i class="ti ti-copy"></i></button> <button v-if="copy" v-tooltip="i18n.ts.copy" class="_textButton" style="margin-left: 0.5em;" @click="copy_"><i class="ti ti-copy"></i></button>
</div> </div>
@ -30,24 +30,18 @@ const copy_ = () => {
}; };
</script> </script>
<style lang="scss" scoped> <style lang="scss" module>
.alqyeyti { .root {
> .key {
font-size: 0.85em;
padding: 0 0 0.25em 0;
opacity: 0.75;
}
&.oneline { &.oneline {
display: flex; display: flex;
> .key { .key {
width: 30%; width: 30%;
font-size: 1em; font-size: 1em;
padding: 0 8px 0 0; padding: 0 8px 0 0;
} }
> .value { .value {
width: 70%; width: 70%;
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
@ -55,4 +49,10 @@ const copy_ = () => {
} }
} }
} }
.key {
font-size: 0.85em;
padding: 0 0 0.25em 0;
opacity: 0.75;
}
</style> </style>

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

@ -1,5 +1,5 @@
<template> <template>
<MkModal ref="modal" v-slot="{ type, maxHeight }" :prefer-type="preferedModalType" :anchor="anchor" :transparent-bg="true" :src="src" @click="modal.close()" @closed="emit('closed')"> <MkModal ref="modal" v-slot="{ type, maxHeight }" :preferType="preferedModalType" :anchor="anchor" :transparentBg="true" :src="src" @click="modal.close()" @closed="emit('closed')">
<div class="szkkfdyq _popup _shadow" :class="{ asDrawer: type === 'drawer' }" :style="{ maxHeight: maxHeight ? maxHeight + 'px' : '' }"> <div class="szkkfdyq _popup _shadow" :class="{ asDrawer: type === 'drawer' }" :style="{ maxHeight: maxHeight ? maxHeight + 'px' : '' }">
<div class="main"> <div class="main">
<template v-for="item in items"> <template v-for="item in items">

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

@ -8,7 +8,7 @@
<ImgWithBlurhash <ImgWithBlurhash
:hash="image.blurhash" :hash="image.blurhash"
:src="(defaultStore.state.enableDataSaverMode && hide) ? null : url" :src="(defaultStore.state.enableDataSaverMode && hide) ? null : url"
:force-blurhash="hide" :forceBlurhash="hide"
:cover="hide" :cover="hide"
:alt="image.comment || image.name" :alt="image.comment || image.name"
:title="image.comment || image.name" :title="image.comment || image.name"

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

@ -27,8 +27,8 @@
<script lang="ts" setup> <script lang="ts" setup>
import { ref } from 'vue'; import { ref } from 'vue';
import * as misskey from 'misskey-js'; import * as misskey from 'misskey-js';
import bytes from '@/filters/bytes';
import VuePlyr from 'vue-plyr'; import VuePlyr from 'vue-plyr';
import bytes from '@/filters/bytes';
import { defaultStore } from '@/store'; import { defaultStore } from '@/store';
import 'vue-plyr/dist/vue-plyr.css'; import 'vue-plyr/dist/vue-plyr.css';
import { i18n } from '@/i18n'; import { i18n } from '@/i18n';

2
packages/frontend/src/components/MkMenu.child.vue
View file

@ -1,6 +1,6 @@
<template> <template>
<div ref="el" :class="$style.root"> <div ref="el" :class="$style.root">
<MkMenu :items="items" :align="align" :width="width" :as-drawer="false" @close="onChildClosed"/> <MkMenu :items="items" :align="align" :width="width" :asDrawer="false" @close="onChildClosed"/>
</div> </div>
</template> </template>

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

@ -50,7 +50,7 @@
</span> </span>
</div> </div>
<div v-if="childMenu" :class="$style.child"> <div v-if="childMenu" :class="$style.child">
<XChild ref="child" :items="childMenu" :target-element="childTarget" :root-element="itemsEl" showing @actioned="childActioned"/> <XChild ref="child" :items="childMenu" :targetElement="childTarget" :rootElement="itemsEl" showing @actioned="childActioned"/>
</div> </div>
</div> </div>
</template> </template>

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

@ -1,11 +1,11 @@
<template> <template>
<Transition <Transition
:name="transitionName" :name="transitionName"
:enter-active-class="$style['transition_' + transitionName + '_enterActive']" :enterActiveClass="$style['transition_' + transitionName + '_enterActive']"
:leave-active-class="$style['transition_' + transitionName + '_leaveActive']" :leaveActiveClass="$style['transition_' + transitionName + '_leaveActive']"
:enter-from-class="$style['transition_' + transitionName + '_enterFrom']" :enterFromClass="$style['transition_' + transitionName + '_enterFrom']"
:leave-to-class="$style['transition_' + transitionName + '_leaveTo']" :leaveToClass="$style['transition_' + transitionName + '_leaveTo']"
:duration="transitionDuration" appear @after-leave="emit('closed')" @enter="emit('opening')" @after-enter="onOpened" :duration="transitionDuration" appear @afterLeave="emit('closed')" @enter="emit('opening')" @afterEnter="onOpened"
> >
<div v-show="manualShowing != null ? manualShowing : showing" v-hotkey.global="keymap" :class="[$style.root, { [$style.drawer]: type === 'drawer', [$style.dialog]: type === 'dialog', [$style.popup]: type === 'popup' }]" :style="{ zIndex, pointerEvents: (manualShowing != null ? manualShowing : showing) ? 'auto' : 'none', '--transformOrigin': transformOrigin }"> <div v-show="manualShowing != null ? manualShowing : showing" v-hotkey.global="keymap" :class="[$style.root, { [$style.drawer]: type === 'drawer', [$style.dialog]: type === 'dialog', [$style.popup]: type === 'popup' }]" :style="{ zIndex, pointerEvents: (manualShowing != null ? manualShowing : showing) ? 'auto' : 'none', '--transformOrigin': transformOrigin }">
<div data-cy-bg :data-cy-transparent="isEnableBgTransparent" class="_modalBg" :class="[$style.bg, { [$style.bgTransparent]: isEnableBgTransparent }]" :style="{ zIndex }" @click="onBgClick" @mousedown="onBgClick" @contextmenu.prevent.stop="() => {}"></div> <div data-cy-bg :data-cy-transparent="isEnableBgTransparent" class="_modalBg" :class="[$style.bg, { [$style.bgTransparent]: isEnableBgTransparent }]" :style="{ zIndex }" @click="onBgClick" @mousedown="onBgClick" @contextmenu.prevent.stop="() => {}"></div>

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

@ -55,17 +55,17 @@
<div :class="$style.text"> <div :class="$style.text">
<span v-if="appearNote.isHidden" style="opacity: 0.5">({{ i18n.ts.private }})</span> <span v-if="appearNote.isHidden" style="opacity: 0.5">({{ i18n.ts.private }})</span>
<MkA v-if="appearNote.replyId" :class="$style.replyIcon" :to="`/notes/${appearNote.replyId}`"><i class="ti ti-arrow-back-up"></i></MkA> <MkA v-if="appearNote.replyId" :class="$style.replyIcon" :to="`/notes/${appearNote.replyId}`"><i class="ti ti-arrow-back-up"></i></MkA>
<Mfm v-if="appearNote.text" :text="appearNote.text" :author="appearNote.user" :i="$i" :emoji-urls="appearNote.emojis"/> <Mfm v-if="appearNote.text" :text="appearNote.text" :author="appearNote.user" :i="$i" :emojiUrls="appearNote.emojis"/>
<div v-if="translating || translation" :class="$style.translation"> <div v-if="translating || translation" :class="$style.translation">
<MkLoading v-if="translating" mini/> <MkLoading v-if="translating" mini/>
<div v-else :class="$style.translated"> <div v-else :class="$style.translated">
<b>{{ i18n.t('translatedFrom', { x: translation.sourceLang }) }}: </b> <b>{{ i18n.t('translatedFrom', { x: translation.sourceLang }) }}: </b>
<Mfm :text="translation.text" :author="appearNote.user" :i="$i" :emoji-urls="appearNote.emojis"/> <Mfm :text="translation.text" :author="appearNote.user" :i="$i" :emojiUrls="appearNote.emojis"/>
</div> </div>
</div> </div>
</div> </div>
<div v-if="appearNote.files.length > 0" :class="$style.files"> <div v-if="appearNote.files.length > 0" :class="$style.files">
<MkMediaList :media-list="appearNote.files"/> <MkMediaList :mediaList="appearNote.files"/>
</div> </div>
<MkPoll v-if="appearNote.poll" :note="appearNote" :class="$style.poll"/> <MkPoll v-if="appearNote.poll" :note="appearNote" :class="$style.poll"/>
<MkUrlPreview v-for="url in urls" :key="url" :url="url" :compact="true" :detail="false" :class="$style.urlPreview"/> <MkUrlPreview v-for="url in urls" :key="url" :url="url" :compact="true" :detail="false" :class="$style.urlPreview"/>
@ -79,7 +79,7 @@
</div> </div>
<MkA v-if="appearNote.channel && !inChannel" :class="$style.channel" :to="`/channels/${appearNote.channel.id}`"><i class="ti ti-device-tv"></i> {{ appearNote.channel.name }}</MkA> <MkA v-if="appearNote.channel && !inChannel" :class="$style.channel" :to="`/channels/${appearNote.channel.id}`"><i class="ti ti-device-tv"></i> {{ appearNote.channel.name }}</MkA>
</div> </div>
<MkReactionsViewer :note="appearNote" :max-number="16"> <MkReactionsViewer :note="appearNote" :maxNumber="16">
<template #more> <template #more>
<button class="_button" :class="$style.reactionDetailsButton" @click="showReactions"> <button class="_button" :class="$style.reactionDetailsButton" @click="showReactions">
{{ i18n.ts.more }} {{ i18n.ts.more }}

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

@ -65,18 +65,18 @@
<div class="text"> <div class="text">
<span v-if="appearNote.isHidden" style="opacity: 0.5">({{ i18n.ts.private }})</span> <span v-if="appearNote.isHidden" style="opacity: 0.5">({{ i18n.ts.private }})</span>
<MkA v-if="appearNote.replyId" class="reply" :to="`/notes/${appearNote.replyId}`"><i class="ti ti-arrow-back-up"></i></MkA> <MkA v-if="appearNote.replyId" class="reply" :to="`/notes/${appearNote.replyId}`"><i class="ti ti-arrow-back-up"></i></MkA>
<Mfm v-if="appearNote.text" :text="appearNote.text" :author="appearNote.user" :i="$i" :emoji-urls="appearNote.emojis"/> <Mfm v-if="appearNote.text" :text="appearNote.text" :author="appearNote.user" :i="$i" :emojiUrls="appearNote.emojis"/>
<a v-if="appearNote.renote != null" class="rp">RN:</a> <a v-if="appearNote.renote != null" class="rp">RN:</a>
<div v-if="translating || translation" class="translation"> <div v-if="translating || translation" class="translation">
<MkLoading v-if="translating" mini/> <MkLoading v-if="translating" mini/>
<div v-else class="translated"> <div v-else class="translated">
<b>{{ i18n.t('translatedFrom', { x: translation.sourceLang }) }}: </b> <b>{{ i18n.t('translatedFrom', { x: translation.sourceLang }) }}: </b>
<Mfm :text="translation.text" :author="appearNote.user" :i="$i" :emoji-urls="appearNote.emojis"/> <Mfm :text="translation.text" :author="appearNote.user" :i="$i" :emojiUrls="appearNote.emojis"/>
</div> </div>
</div> </div>
</div> </div>
<div v-if="appearNote.files.length > 0" class="files"> <div v-if="appearNote.files.length > 0" class="files">
<MkMediaList :media-list="appearNote.files"/> <MkMediaList :mediaList="appearNote.files"/>
</div> </div>
<MkPoll v-if="appearNote.poll" ref="pollViewer" :note="appearNote" class="poll"/> <MkPoll v-if="appearNote.poll" ref="pollViewer" :note="appearNote" class="poll"/>
<MkUrlPreview v-for="url in urls" :key="url" :url="url" :compact="true" :detail="true" class="url-preview"/> <MkUrlPreview v-for="url in urls" :key="url" :url="url" :compact="true" :detail="true" class="url-preview"/>

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

@ -5,7 +5,7 @@
<MkNoteHeader :class="$style.header" :note="note" :mini="true"/> <MkNoteHeader :class="$style.header" :note="note" :mini="true"/>
<div> <div>
<p v-if="note.cw != null" :class="$style.cw"> <p v-if="note.cw != null" :class="$style.cw">
<Mfm v-if="note.cw != ''" style="margin-right: 8px;" :text="note.cw" :author="note.user" :i="$i" :emoji-urls="note.emojis"/> <Mfm v-if="note.cw != ''" style="margin-right: 8px;" :text="note.cw" :author="note.user" :i="$i" :emojiUrls="note.emojis"/>
<MkCwButton v-model="showContent" :note="note"/> <MkCwButton v-model="showContent" :note="note"/>
</p> </p>
<div v-show="note.cw == null || showContent"> <div v-show="note.cw == null || showContent">

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

@ -15,7 +15,7 @@
:items="notes" :items="notes"
:direction="pagination.reversed ? 'up' : 'down'" :direction="pagination.reversed ? 'up' : 'down'"
:reversed="pagination.reversed" :reversed="pagination.reversed"
:no-gap="noGap" :noGap="noGap"
:ad="true" :ad="true"
:class="$style.notes" :class="$style.notes"
> >

4
packages/frontend/src/components/MkNotification.vue
View file

@ -20,8 +20,8 @@
v-else-if="notification.type === 'reaction'" v-else-if="notification.type === 'reaction'"
ref="reactionRef" ref="reactionRef"
:reaction="notification.reaction ? notification.reaction.replace(/^:(\w+):$/, ':$1@.:') : notification.reaction" :reaction="notification.reaction ? notification.reaction.replace(/^:(\w+):$/, ':$1@.:') : notification.reaction"
:custom-emojis="notification.note.emojis" :customEmojis="notification.note.emojis"
:no-style="true" :noStyle="true"
style="width: 100%; height: 100%;" style="width: 100%; height: 100%;"
/> />
</div> </div>

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

@ -3,15 +3,15 @@
ref="dialog" ref="dialog"
:width="400" :width="400"
:height="450" :height="450"
:with-ok-button="true" :withOkButton="true"
:ok-button-disabled="false" :okButtonDisabled="false"
@ok="ok()" @ok="ok()"
@close="dialog?.close()" @close="dialog?.close()"
@closed="emit('closed')" @closed="emit('closed')"
> >
<template #header>{{ i18n.ts.notificationSetting }}</template> <template #header>{{ i18n.ts.notificationSetting }}</template>
<MkSpacer :margin-min="20" :margin-max="28"> <MkSpacer :marginMin="20" :marginMax="28">
<div class="_gaps_m"> <div class="_gaps_m">
<template v-if="showGlobalToggle"> <template v-if="showGlobalToggle">
<MkSwitch v-model="useGlobalSetting"> <MkSwitch v-model="useGlobalSetting">

4
packages/frontend/src/components/MkNotifications.vue
View file

@ -8,9 +8,9 @@
</template> </template>
<template #default="{ items: notifications }"> <template #default="{ items: notifications }">
<MkDateSeparatedList v-slot="{ item: notification }" :class="$style.list" :items="notifications" :no-gap="true"> <MkDateSeparatedList v-slot="{ item: notification }" :class="$style.list" :items="notifications" :noGap="true">
<MkNote v-if="['reply', 'quote', 'mention'].includes(notification.type)" :key="notification.id" :note="notification.note"/> <MkNote v-if="['reply', 'quote', 'mention'].includes(notification.type)" :key="notification.id" :note="notification.note"/>
<XNotification v-else :key="notification.id" :notification="notification" :with-time="true" :full="true" class="_panel notification"/> <XNotification v-else :key="notification.id" :notification="notification" :withTime="true" :full="true" class="_panel notification"/>
</MkDateSeparatedList> </MkDateSeparatedList>
</template> </template>
</MkPagination> </MkPagination>

12
packages/frontend/src/components/MkPageWindow.vue
View file

@ -1,12 +1,12 @@
<template> <template>
<MkWindow <MkWindow
ref="windowEl" ref="windowEl"
:initial-width="500" :initialWidth="500"
:initial-height="500" :initialHeight="500"
:can-resize="true" :canResize="true"
:close-button="true" :closeButton="true"
:buttons-left="buttonsLeft" :buttonsLeft="buttonsLeft"
:buttons-right="buttonsRight" :buttonsRight="buttonsRight"
:contextmenu="contextmenu" :contextmenu="contextmenu"
@closed="$emit('closed')" @closed="$emit('closed')"
> >

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

@ -1,9 +1,9 @@
<template> <template>
<Transition <Transition
:enter-active-class="defaultStore.state.animation ? $style.transition_fade_enterActive : ''" :enterActiveClass="defaultStore.state.animation ? $style.transition_fade_enterActive : ''"
:leave-active-class="defaultStore.state.animation ? $style.transition_fade_leaveActive : ''" :leaveActiveClass="defaultStore.state.animation ? $style.transition_fade_leaveActive : ''"
:enter-from-class="defaultStore.state.animation ? $style.transition_fade_enterFrom : ''" :enterFromClass="defaultStore.state.animation ? $style.transition_fade_enterFrom : ''"
:leave-to-class="defaultStore.state.animation ? $style.transition_fade_leaveTo : ''" :leaveToClass="defaultStore.state.animation ? $style.transition_fade_leaveTo : ''"
mode="out-in" mode="out-in"
> >
<MkLoading v-if="fetching"/> <MkLoading v-if="fetching"/>

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

@ -5,7 +5,7 @@
</p> </p>
<ul> <ul>
<li v-for="(choice, i) in choices" :key="i"> <li v-for="(choice, i) in choices" :key="i">
<MkInput class="input" small :model-value="choice" :placeholder="i18n.t('_poll.choiceN', { n: i + 1 })" @update:model-value="onInput(i, $event)"> <MkInput class="input" small :modelValue="choice" :placeholder="i18n.t('_poll.choiceN', { n: i + 1 })" @update:modelValue="onInput(i, $event)">
</MkInput> </MkInput>
<button class="_button" @click="remove(i)"> <button class="_button" @click="remove(i)">
<i class="ti ti-x"></i> <i class="ti ti-x"></i>

4
packages/frontend/src/components/MkPopupMenu.vue
View file

@ -1,6 +1,6 @@
<template> <template>
<MkModal ref="modal" v-slot="{ type, maxHeight }" :z-priority="'high'" :src="src" :transparent-bg="true" @click="modal.close()" @close="emit('closing')" @closed="emit('closed')"> <MkModal ref="modal" v-slot="{ type, maxHeight }" :zPriority="'high'" :src="src" :transparentBg="true" @click="modal.close()" @close="emit('closing')" @closed="emit('closed')">
<MkMenu :items="items" :align="align" :width="width" :max-height="maxHeight" :as-drawer="type === 'drawer'" :class="{ [$style.drawer]: type === 'drawer' }" @close="modal.close()"/> <MkMenu :items="items" :align="align" :width="width" :max-height="maxHeight" :asDrawer="type === 'drawer'" :class="{ [$style.drawer]: type === 'drawer' }" @close="modal.close()"/>
</MkModal> </MkModal>
</template> </template>

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

@ -66,7 +66,7 @@
<div v-if="maxTextLength - textLength < 100" :class="['_acrylic', $style.textCount, { [$style.textOver]: textLength > maxTextLength }]">{{ maxTextLength - textLength }}</div> <div v-if="maxTextLength - textLength < 100" :class="['_acrylic', $style.textCount, { [$style.textOver]: textLength > maxTextLength }]">{{ maxTextLength - textLength }}</div>
</div> </div>
<input v-show="withHashtags" ref="hashtagsInputEl" v-model="hashtags" :class="$style.hashtags" :placeholder="i18n.ts.hashtags" list="hashtags"> <input v-show="withHashtags" ref="hashtagsInputEl" v-model="hashtags" :class="$style.hashtags" :placeholder="i18n.ts.hashtags" list="hashtags">
<XPostFormAttaches v-model="files" :class="$style.attaches" @detach="detachFile" @change-sensitive="updateFileSensitive" @change-name="updateFileName"/> <XPostFormAttaches v-model="files" :class="$style.attaches" @detach="detachFile" @changeSensitive="updateFileSensitive" @changeName="updateFileName"/>
<MkPollEditor v-if="poll" v-model="poll" @destroyed="poll = null"/> <MkPollEditor v-if="poll" v-model="poll" @destroyed="poll = null"/>
<MkNotePreview v-if="showPreview" :class="$style.preview" :text="text"/> <MkNotePreview v-if="showPreview" :class="$style.preview" :text="text"/>
<div v-if="showingOptions" style="padding: 8px 16px;"> <div v-if="showingOptions" style="padding: 8px 16px;">

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

@ -1,6 +1,6 @@
<template> <template>
<div v-show="props.modelValue.length != 0" class="skeikyzd"> <div v-show="props.modelValue.length != 0" class="skeikyzd">
<Sortable :model-value="props.modelValue" class="files" item-key="id" :animation="150" :delay="100" :delay-on-touch-only="true" @update:model-value="v => emit('update:modelValue', v)"> <Sortable :modelValue="props.modelValue" class="files" itemKey="id" :animation="150" :delay="100" :delayOnTouchOnly="true" @update:modelValue="v => emit('update:modelValue', v)">
<template #item="{element}"> <template #item="{element}">
<div class="file" @click="showFileMenu(element, $event)" @contextmenu.prevent="showFileMenu(element, $event)"> <div class="file" @click="showFileMenu(element, $event)" @contextmenu.prevent="showFileMenu(element, $event)">
<MkDriveFileThumbnail :data-id="element.id" class="thumbnail" :file="element" fit="cover"/> <MkDriveFileThumbnail :data-id="element.id" class="thumbnail" :file="element" fit="cover"/>

4
packages/frontend/src/components/MkPostFormDialog.vue
View file

@ -1,6 +1,6 @@
<template> <template>
<MkModal ref="modal" :prefer-type="'dialog'" @click="modal.close()" @closed="onModalClosed()"> <MkModal ref="modal" :preferType="'dialog'" @click="modal.close()" @closed="onModalClosed()">
<MkPostForm ref="form" style="margin: 0 auto auto auto;" v-bind="props" autofocus freeze-after-posted @posted="onPosted" @cancel="modal.close()" @esc="modal.close()"/> <MkPostForm ref="form" style="margin: 0 auto auto auto;" v-bind="props" autofocus freezeAfterPosted @posted="onPosted" @cancel="modal.close()" @esc="modal.close()"/>
</MkModal> </MkModal>
</template> </template>

38
packages/frontend/src/components/MkPushNotificationAllowButton.vue
View file

@ -72,28 +72,28 @@ function subscribe() {
userVisibleOnly: true, userVisibleOnly: true,
applicationServerKey: urlBase64ToUint8Array(instance.swPublickey), applicationServerKey: urlBase64ToUint8Array(instance.swPublickey),
}) })
.then(async subscription => { .then(async subscription => {
pushSubscription = subscription; pushSubscription = subscription;
// Register // Register
pushRegistrationInServer = await api('sw/register', { pushRegistrationInServer = await api('sw/register', {
endpoint: subscription.endpoint, endpoint: subscription.endpoint,
auth: encode(subscription.getKey('auth')), auth: encode(subscription.getKey('auth')),
publickey: encode(subscription.getKey('p256dh')), publickey: encode(subscription.getKey('p256dh')),
}); });
}, async err => { // When subscribe failed }, async err => { // When subscribe failed
// 通知が許可されていなかったとき // 通知が許可されていなかったとき
if (err?.name === 'NotAllowedError') { if (err?.name === 'NotAllowedError') {
console.info('User denied the notification permission request.'); console.info('User denied the notification permission request.');
return; return;
} }
// 違うapplicationServerKey (または gcm_sender_id)のサブスクリプションが // 違うapplicationServerKey (または gcm_sender_id)のサブスクリプションが
// 既に存在していることが原因でエラーになった可能性があるので、 // 既に存在していることが原因でエラーになった可能性があるので、
// そのサブスクリプションを解除しておく // そのサブスクリプションを解除しておく
// （これは実行されなさそうだけど、おまじない的に古い実装から残してある） // （これは実行されなさそうだけど、おまじない的に古い実装から残してある）
await unsubscribe(); await unsubscribe();
}), null, null); }), null, null);
} }
async function unsubscribe() { async function unsubscribe() {

4
packages/frontend/src/components/MkReactedUsersDialog.vue
View file

@ -8,7 +8,7 @@
> >
<template #header>{{ i18n.ts.reactionsList }}</template> <template #header>{{ i18n.ts.reactionsList }}</template>
<MkSpacer :margin-min="20" :margin-max="28"> <MkSpacer :marginMin="20" :marginMax="28">
<div v-if="note" class="_gaps"> <div v-if="note" class="_gaps">
<div v-if="reactions.length === 0" class="_fullinfo"> <div v-if="reactions.length === 0" class="_fullinfo">
<img src="https://xn--931a.moe/assets/info.jpg" class="_ghost"/> <img src="https://xn--931a.moe/assets/info.jpg" class="_ghost"/>
@ -22,7 +22,7 @@
</button> </button>
</div> </div>
<MkA v-for="user in users" :key="user.id" :to="userPage(user)" @click="dialog.close()"> <MkA v-for="user in users" :key="user.id" :to="userPage(user)" @click="dialog.close()">
<MkUserCardMini :user="user" :with-chart="false"/> <MkUserCardMini :user="user" :withChart="false"/>
</MkA> </MkA>
</template> </template>
</div> </div>

4
packages/frontend/src/components/MkReactionIcon.vue
View file

@ -1,6 +1,6 @@
<template> <template>
<MkCustomEmoji v-if="reaction[0] === ':'" :name="reaction" :normal="true" :no-style="noStyle" :url="emojiUrl"/> <MkCustomEmoji v-if="reaction[0] === ':'" :name="reaction" :normal="true" :noStyle="noStyle" :url="emojiUrl"/>
<MkEmoji v-else :emoji="reaction" :normal="true" :no-style="noStyle"/> <MkEmoji v-else :emoji="reaction" :normal="true" :noStyle="noStyle"/>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>

4
packages/frontend/src/components/MkReactionTooltip.vue
View file

@ -1,7 +1,7 @@
<template> <template>
<MkTooltip ref="tooltip" :showing="showing" :target-element="targetElement" :max-width="340" @closed="emit('closed')"> <MkTooltip ref="tooltip" :showing="showing" :targetElement="targetElement" :maxWidth="340" @closed="emit('closed')">
<div :class="$style.root"> <div :class="$style.root">
<MkReactionIcon :reaction="reaction" :class="$style.icon" :no-style="true"/> <MkReactionIcon :reaction="reaction" :class="$style.icon" :noStyle="true"/>
<div :class="$style.name">{{ reaction.replace('@.', '') }}</div> <div :class="$style.name">{{ reaction.replace('@.', '') }}</div>
</div> </div>
</MkTooltip> </MkTooltip>

4
packages/frontend/src/components/MkReactionsViewer.details.vue
View file

@ -1,8 +1,8 @@
<template> <template>
<MkTooltip ref="tooltip" :showing="showing" :target-element="targetElement" :max-width="340" @closed="emit('closed')"> <MkTooltip ref="tooltip" :showing="showing" :targetElement="targetElement" :maxWidth="340" @closed="emit('closed')">
<div :class="$style.root"> <div :class="$style.root">
<div :class="$style.reaction"> <div :class="$style.reaction">
<MkReactionIcon :reaction="reaction" :class="$style.reactionIcon" :no-style="true"/> <MkReactionIcon :reaction="reaction" :class="$style.reactionIcon" :noStyle="true"/>
<div :class="$style.reactionName">{{ getReactionName(reaction) }}</div> <div :class="$style.reactionName">{{ getReactionName(reaction) }}</div>
</div> </div>
<div :class="$style.users"> <div :class="$style.users">

12
packages/frontend/src/components/MkReactionsViewer.vue
View file

@ -1,13 +1,13 @@
<template> <template>
<TransitionGroup <TransitionGroup
:enter-active-class="defaultStore.state.animation ? $style.transition_x_enterActive : ''" :enterActiveClass="defaultStore.state.animation ? $style.transition_x_enterActive : ''"
:leave-active-class="defaultStore.state.animation ? $style.transition_x_leaveActive : ''" :leaveActiveClass="defaultStore.state.animation ? $style.transition_x_leaveActive : ''"
:enter-from-class="defaultStore.state.animation ? $style.transition_x_enterFrom : ''" :enterFromClass="defaultStore.state.animation ? $style.transition_x_enterFrom : ''"
:leave-to-class="defaultStore.state.animation ? $style.transition_x_leaveTo : ''" :leaveToClass="defaultStore.state.animation ? $style.transition_x_leaveTo : ''"
:move-class="defaultStore.state.animation ? $style.transition_x_move : ''" :moveClass="defaultStore.state.animation ? $style.transition_x_move : ''"
tag="div" :class="$style.root" tag="div" :class="$style.root"
> >
<XReaction v-for="[reaction, count] in reactions" :key="reaction" :reaction="reaction" :count="count" :is-initial="initialReactions.has(reaction)" :note="note"/> <XReaction v-for="[reaction, count] in reactions" :key="reaction" :reaction="reaction" :count="count" :isInitial="initialReactions.has(reaction)" :note="note"/>
<slot v-if="hasMoreReactions" name="more"/> <slot v-if="hasMoreReactions" name="more"/>
</TransitionGroup> </TransitionGroup>
</template> </template>

4
packages/frontend/src/components/MkRenotedUsersDialog.vue
View file

@ -8,7 +8,7 @@
> >
<template #header>{{ i18n.ts.renotesList }}</template> <template #header>{{ i18n.ts.renotesList }}</template>
<MkSpacer :margin-min="20" :margin-max="28"> <MkSpacer :marginMin="20" :marginMax="28">
<div v-if="renotes" class="_gaps"> <div v-if="renotes" class="_gaps">
<div v-if="renotes.length === 0" class="_fullinfo"> <div v-if="renotes.length === 0" class="_fullinfo">
<img src="https://xn--931a.moe/assets/info.jpg" class="_ghost"/> <img src="https://xn--931a.moe/assets/info.jpg" class="_ghost"/>
@ -16,7 +16,7 @@
</div> </div>
<template v-else> <template v-else>
<MkA v-for="user in users" :key="user.id" :to="userPage(user)" @click="dialog.close()"> <MkA v-for="user in users" :key="user.id" :to="userPage(user)" @click="dialog.close()">
<MkUserCardMini :user="user" :with-chart="false"/> <MkUserCardMini :user="user" :withChart="false"/>
</MkA> </MkA>
</template> </template>
</div> </div>

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

@ -6,11 +6,11 @@
{{ message }} {{ message }}
</MkInfo> </MkInfo>
<div v-if="!totpLogin" class="normal-signin _gaps_m"> <div v-if="!totpLogin" class="normal-signin _gaps_m">
<MkInput v-model="username" :placeholder="i18n.ts.username" type="text" pattern="^[a-zA-Z0-9_]+$" :spellcheck="false" autocomplete="username" autofocus required data-cy-signin-username @update:model-value="onUsernameChange"> <MkInput v-model="username" :placeholder="i18n.ts.username" type="text" pattern="^[a-zA-Z0-9_]+$" :spellcheck="false" autocomplete="username" autofocus required data-cy-signin-username @update:modelValue="onUsernameChange">
<template #prefix>@</template> <template #prefix>@</template>
<template #suffix>@{{ host }}</template> <template #suffix>@{{ host }}</template>
</MkInput> </MkInput>
<MkInput v-if="!user || user && !user.usePasswordLessLogin" v-model="password" :placeholder="i18n.ts.password" type="password" autocomplete="current-password" :with-password-toggle="true" required data-cy-signin-password> <MkInput v-if="!user || user && !user.usePasswordLessLogin" v-model="password" :placeholder="i18n.ts.password" type="password" autocomplete="current-password" :withPasswordToggle="true" required data-cy-signin-password>
<template #prefix><i class="ti ti-lock"></i></template> <template #prefix><i class="ti ti-lock"></i></template>
<template #caption><button class="_textButton" type="button" @click="resetPassword">{{ i18n.ts.forgotPassword }}</button></template> <template #caption><button class="_textButton" type="button" @click="resetPassword">{{ i18n.ts.forgotPassword }}</button></template>
</MkInput> </MkInput>
@ -28,7 +28,7 @@
</div> </div>
<div class="twofa-group totp-group"> <div class="twofa-group totp-group">
<p style="margin-bottom:0;">{{ i18n.ts.twoStepAuthentication }}</p> <p style="margin-bottom:0;">{{ i18n.ts.twoStepAuthentication }}</p>
<MkInput v-if="user && user.usePasswordLessLogin" v-model="password" type="password" autocomplete="current-password" :with-password-toggle="true" required> <MkInput v-if="user && user.usePasswordLessLogin" v-model="password" type="password" autocomplete="current-password" :withPasswordToggle="true" required>
<template #label>{{ i18n.ts.password }}</template> <template #label>{{ i18n.ts.password }}</template>
<template #prefix><i class="ti ti-lock"></i></template> <template #prefix><i class="ti ti-lock"></i></template>
</MkInput> </MkInput>

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

@ -8,8 +8,8 @@
> >
<template #header>{{ i18n.ts.login }}</template> <template #header>{{ i18n.ts.login }}</template>
<MkSpacer :margin-min="20" :margin-max="28"> <MkSpacer :marginMin="20" :marginMax="28">
<MkSignin :auto-set="autoSet" :message="message" @login="onLogin"/> <MkSignin :autoSet="autoSet" :message="message" @login="onLogin"/>
</MkSpacer> </MkSpacer>
</MkModalWindow> </MkModalWindow>
</template> </template>

10
packages/frontend/src/components/MkSignupDialog.form.vue
View file

@ -3,13 +3,13 @@
<div :class="$style.banner"> <div :class="$style.banner">
<i class="ti ti-user-edit"></i> <i class="ti ti-user-edit"></i>
</div> </div>
<MkSpacer :margin-min="20" :margin-max="32"> <MkSpacer :marginMin="20" :marginMax="32">
<form class="_gaps_m" autocomplete="new-password" @submit.prevent="onSubmit"> <form class="_gaps_m" autocomplete="new-password" @submit.prevent="onSubmit">
<MkInput v-if="instance.disableRegistration" v-model="invitationCode" type="text" :spellcheck="false" required> <MkInput v-if="instance.disableRegistration" v-model="invitationCode" type="text" :spellcheck="false" required>
<template #label>{{ i18n.ts.invitationCode }}</template> <template #label>{{ i18n.ts.invitationCode }}</template>
<template #prefix><i class="ti ti-key"></i></template> <template #prefix><i class="ti ti-key"></i></template>
</MkInput> </MkInput>
<MkInput v-model="username" type="text" pattern="^[a-zA-Z0-9_]{1,20}$" :spellcheck="false" required data-cy-signup-username @update:model-value="onChangeUsername"> <MkInput v-model="username" type="text" pattern="^[a-zA-Z0-9_]{1,20}$" :spellcheck="false" required data-cy-signup-username @update:modelValue="onChangeUsername">
<template #label>{{ i18n.ts.username }} <div v-tooltip:dialog="i18n.ts.usernameInfo" class="_button _help"><i class="ti ti-help-circle"></i></div></template> <template #label>{{ i18n.ts.username }} <div v-tooltip:dialog="i18n.ts.usernameInfo" class="_button _help"><i class="ti ti-help-circle"></i></div></template>
<template #prefix>@</template> <template #prefix>@</template>
<template #suffix>@{{ host }}</template> <template #suffix>@{{ host }}</template>
@ -24,7 +24,7 @@
<span v-else-if="usernameState === 'max-range'" style="color: var(--error)"><i class="ti ti-alert-triangle ti-fw"></i> {{ i18n.ts.tooLong }}</span> <span v-else-if="usernameState === 'max-range'" style="color: var(--error)"><i class="ti ti-alert-triangle ti-fw"></i> {{ i18n.ts.tooLong }}</span>
</template> </template>
</MkInput> </MkInput>
<MkInput v-if="instance.emailRequiredForSignup" v-model="email" :debounce="true" type="email" :spellcheck="false" required data-cy-signup-email @update:model-value="onChangeEmail"> <MkInput v-if="instance.emailRequiredForSignup" v-model="email" :debounce="true" type="email" :spellcheck="false" required data-cy-signup-email @update:modelValue="onChangeEmail">
<template #label>{{ i18n.ts.emailAddress }} <div v-tooltip:dialog="i18n.ts._signup.emailAddressInfo" class="_button _help"><i class="ti ti-help-circle"></i></div></template> <template #label>{{ i18n.ts.emailAddress }} <div v-tooltip:dialog="i18n.ts._signup.emailAddressInfo" class="_button _help"><i class="ti ti-help-circle"></i></div></template>
<template #prefix><i class="ti ti-mail"></i></template> <template #prefix><i class="ti ti-mail"></i></template>
<template #caption> <template #caption>
@ -39,7 +39,7 @@
<span v-else-if="emailState === 'error'" style="color: var(--error)"><i class="ti ti-alert-triangle ti-fw"></i> {{ i18n.ts.error }}</span> <span v-else-if="emailState === 'error'" style="color: var(--error)"><i class="ti ti-alert-triangle ti-fw"></i> {{ i18n.ts.error }}</span>
</template> </template>
</MkInput> </MkInput>
<MkInput v-model="password" type="password" autocomplete="new-password" required data-cy-signup-password @update:model-value="onChangePassword"> <MkInput v-model="password" type="password" autocomplete="new-password" required data-cy-signup-password @update:modelValue="onChangePassword">
<template #label>{{ i18n.ts.password }}</template> <template #label>{{ i18n.ts.password }}</template>
<template #prefix><i class="ti ti-lock"></i></template> <template #prefix><i class="ti ti-lock"></i></template>
<template #caption> <template #caption>
@ -48,7 +48,7 @@
<span v-if="passwordStrength == 'high'" style="color: var(--success)"><i class="ti ti-check ti-fw"></i> {{ i18n.ts.strongPassword }}</span> <span v-if="passwordStrength == 'high'" style="color: var(--success)"><i class="ti ti-check ti-fw"></i> {{ i18n.ts.strongPassword }}</span>
</template> </template>
</MkInput> </MkInput>
<MkInput v-model="retypedPassword" type="password" autocomplete="new-password" required data-cy-signup-password-retype @update:model-value="onChangePasswordRetype"> <MkInput v-model="retypedPassword" type="password" autocomplete="new-password" required data-cy-signup-password-retype @update:modelValue="onChangePasswordRetype">
<template #label>{{ i18n.ts.password }} ({{ i18n.ts.retype }})</template> <template #label>{{ i18n.ts.password }} ({{ i18n.ts.retype }})</template>
<template #prefix><i class="ti ti-lock"></i></template> <template #prefix><i class="ti ti-lock"></i></template>
<template #caption> <template #caption>

8
packages/frontend/src/components/MkSignupDialog.rules.vue
View file

@ -3,7 +3,7 @@
<div :class="$style.banner"> <div :class="$style.banner">
<i class="ti ti-checklist"></i> <i class="ti ti-checklist"></i>
</div> </div>
<MkSpacer :margin-min="20" :margin-max="28"> <MkSpacer :marginMin="20" :marginMax="28">
<div class="_gaps_m"> <div class="_gaps_m">
<div v-if="instance.disableRegistration"> <div v-if="instance.disableRegistration">
<MkInfo warn>{{ i18n.ts.invitationRequiredToRegister }}</MkInfo> <MkInfo warn>{{ i18n.ts.invitationRequiredToRegister }}</MkInfo>
@ -11,7 +11,7 @@
<div style="text-align: center;">{{ i18n.ts.pleaseConfirmBelowBeforeSignup }}</div> <div style="text-align: center;">{{ i18n.ts.pleaseConfirmBelowBeforeSignup }}</div>
<MkFolder v-if="availableServerRules" :default-open="true"> <MkFolder v-if="availableServerRules" :defaultOpen="true">
<template #label>{{ i18n.ts.serverRules }}</template> <template #label>{{ i18n.ts.serverRules }}</template>
<template #suffix><i v-if="agreeServerRules" class="ti ti-check" style="color: var(--success)"></i></template> <template #suffix><i v-if="agreeServerRules" class="ti ti-check" style="color: var(--success)"></i></template>
@ -22,7 +22,7 @@
<MkSwitch v-model="agreeServerRules" style="margin-top: 16px;">{{ i18n.ts.agree }}</MkSwitch> <MkSwitch v-model="agreeServerRules" style="margin-top: 16px;">{{ i18n.ts.agree }}</MkSwitch>
</MkFolder> </MkFolder>
<MkFolder v-if="availableTos" :default-open="true"> <MkFolder v-if="availableTos" :defaultOpen="true">
<template #label>{{ i18n.ts.termsOfService }}</template> <template #label>{{ i18n.ts.termsOfService }}</template>
<template #suffix><i v-if="agreeTos" class="ti ti-check" style="color: var(--success)"></i></template> <template #suffix><i v-if="agreeTos" class="ti ti-check" style="color: var(--success)"></i></template>
@ -31,7 +31,7 @@
<MkSwitch v-model="agreeTos" style="margin-top: 16px;">{{ i18n.ts.agree }}</MkSwitch> <MkSwitch v-model="agreeTos" style="margin-top: 16px;">{{ i18n.ts.agree }}</MkSwitch>
</MkFolder> </MkFolder>
<MkFolder :default-open="true"> <MkFolder :defaultOpen="true">
<template #label>{{ i18n.ts.basicNotesBeforeCreateAccount }}</template> <template #label>{{ i18n.ts.basicNotesBeforeCreateAccount }}</template>
<template #suffix><i v-if="agreeNote" class="ti ti-check" style="color: var(--success)"></i></template> <template #suffix><i v-if="agreeNote" class="ti ti-check" style="color: var(--success)"></i></template>

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

@ -11,16 +11,16 @@
<div style="overflow-x: clip;"> <div style="overflow-x: clip;">
<Transition <Transition
mode="out-in" mode="out-in"
:enter-active-class="$style.transition_x_enterActive" :enterActiveClass="$style.transition_x_enterActive"
:leave-active-class="$style.transition_x_leaveActive" :leaveActiveClass="$style.transition_x_leaveActive"
:enter-from-class="$style.transition_x_enterFrom" :enterFromClass="$style.transition_x_enterFrom"
:leave-to-class="$style.transition_x_leaveTo" :leaveToClass="$style.transition_x_leaveTo"
> >
<template v-if="!isAcceptedServerRule"> <template v-if="!isAcceptedServerRule">
<XServerRules @done="isAcceptedServerRule = true" @cancel="dialog.close()"/> <XServerRules @done="isAcceptedServerRule = true" @cancel="dialog.close()"/>
</template> </template>
<template v-else> <template v-else>
<XSignup :auto-set="autoSet" @signup="onSignup" @signup-email-pending="onSignupEmailPending"/> <XSignup :autoSet="autoSet" @signup="onSignup" @signupEmailPending="onSignupEmailPending"/>
</template> </template>
</Transition> </Transition>
</div> </div>

4
packages/frontend/src/components/MkSubNoteContent.vue
View file

@ -4,12 +4,12 @@
<span v-if="note.isHidden" style="opacity: 0.5">({{ i18n.ts.private }})</span> <span v-if="note.isHidden" style="opacity: 0.5">({{ i18n.ts.private }})</span>
<span v-if="note.deletedAt" style="opacity: 0.5">({{ i18n.ts.deleted }})</span> <span v-if="note.deletedAt" style="opacity: 0.5">({{ i18n.ts.deleted }})</span>
<MkA v-if="note.replyId" :class="$style.reply" :to="`/notes/${note.replyId}`"><i class="ti ti-arrow-back-up"></i></MkA> <MkA v-if="note.replyId" :class="$style.reply" :to="`/notes/${note.replyId}`"><i class="ti ti-arrow-back-up"></i></MkA>
<Mfm v-if="note.text" :text="note.text" :author="note.user" :i="$i" :emoji-urls="note.emojis"/> <Mfm v-if="note.text" :text="note.text" :author="note.user" :i="$i" :emojiUrls="note.emojis"/>
<MkA v-if="note.renoteId" :class="$style.rp" :to="`/notes/${note.renoteId}`">RN: ...</MkA> <MkA v-if="note.renoteId" :class="$style.rp" :to="`/notes/${note.renoteId}`">RN: ...</MkA>
</div> </div>
<details v-if="note.files.length > 0"> <details v-if="note.files.length > 0">
<summary>({{ i18n.t('withNFiles', { n: note.files.length }) }})</summary> <summary>({{ i18n.t('withNFiles', { n: note.files.length }) }})</summary>
<MkMediaList :media-list="note.files"/> <MkMediaList :mediaList="note.files"/>
</details> </details>
<details v-if="note.poll"> <details v-if="note.poll">
<summary>{{ i18n.ts.poll }}</summary> <summary>{{ i18n.ts.poll }}</summary>

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

@ -1,5 +1,5 @@
<template> <template>
<MkNotes ref="tlComponent" :no-gap="!defaultStore.state.showGapBetweenNotesInTimeline" :pagination="pagination" @queue="emit('queue', $event)"/> <MkNotes ref="tlComponent" :noGap="!defaultStore.state.showGapBetweenNotesInTimeline" :pagination="pagination" @queue="emit('queue', $event)"/>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>

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

@ -1,11 +1,11 @@
<template> <template>
<div> <div>
<Transition <Transition
:enter-active-class="defaultStore.state.animation ? $style.transition_toast_enterActive : ''" :enterActiveClass="defaultStore.state.animation ? $style.transition_toast_enterActive : ''"
:leave-active-class="defaultStore.state.animation ? $style.transition_toast_leaveActive : ''" :leaveActiveClass="defaultStore.state.animation ? $style.transition_toast_leaveActive : ''"
:enter-from-class="defaultStore.state.animation ? $style.transition_toast_enterFrom : ''" :enterFromClass="defaultStore.state.animation ? $style.transition_toast_enterFrom : ''"
:leave-to-class="defaultStore.state.animation ? $style.transition_toast_leaveTo : ''" :leaveToClass="defaultStore.state.animation ? $style.transition_toast_leaveTo : ''"
appear @after-leave="emit('closed')" appear @afterLeave="emit('closed')"
> >
<div v-if="showing" class="_acrylic" :class="$style.root" :style="{ zIndex }"> <div v-if="showing" class="_acrylic" :class="$style.root" :style="{ zIndex }">
<div style="padding: 16px 24px;"> <div style="padding: 16px 24px;">

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

@ -3,16 +3,16 @@
ref="dialog" ref="dialog"
:width="400" :width="400"
:height="450" :height="450"
:with-ok-button="true" :withOkButton="true"
:ok-button-disabled="false" :okButtonDisabled="false"
:can-close="false" :canClose="false"
@close="dialog.close()" @close="dialog.close()"
@closed="$emit('closed')" @closed="$emit('closed')"
@ok="ok()" @ok="ok()"
> >
<template #header>{{ title || i18n.ts.generateAccessToken }}</template> <template #header>{{ title || i18n.ts.generateAccessToken }}</template>
<MkSpacer :margin-min="20" :margin-max="28"> <MkSpacer :marginMin="20" :marginMax="28">
<div class="_gaps_m"> <div class="_gaps_m">
<div v-if="information"> <div v-if="information">
<MkInfo warn>{{ information }}</MkInfo> <MkInfo warn>{{ information }}</MkInfo>

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

@ -1,10 +1,10 @@
<template> <template>
<Transition <Transition
:enter-active-class="defaultStore.state.animation ? $style.transition_tooltip_enterActive : ''" :enterActiveClass="defaultStore.state.animation ? $style.transition_tooltip_enterActive : ''"
:leave-active-class="defaultStore.state.animation ? $style.transition_tooltip_leaveActive : ''" :leaveActiveClass="defaultStore.state.animation ? $style.transition_tooltip_leaveActive : ''"
:enter-from-class="defaultStore.state.animation ? $style.transition_tooltip_enterFrom : ''" :enterFromClass="defaultStore.state.animation ? $style.transition_tooltip_enterFrom : ''"
:leave-to-class="defaultStore.state.animation ? $style.transition_tooltip_leaveTo : ''" :leaveToClass="defaultStore.state.animation ? $style.transition_tooltip_leaveTo : ''"
appear @after-leave="emit('closed')" appear @afterLeave="emit('closed')"
> >
<div v-show="showing" ref="el" :class="$style.root" class="_acrylic _shadow" :style="{ zIndex, maxWidth: maxWidth + 'px' }"> <div v-show="showing" ref="el" :class="$style.root" class="_acrylic _shadow" :style="{ zIndex, maxWidth: maxWidth + 'px' }">
<slot> <slot>

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

@ -1,5 +1,5 @@
<template> <template>
<MkModal ref="modal" :z-priority="'middle'" @click="$refs.modal.close()" @closed="$emit('closed')"> <MkModal ref="modal" :zPriority="'middle'" @click="$refs.modal.close()" @closed="$emit('closed')">
<div :class="$style.root"> <div :class="$style.root">
<div :class="$style.title"><MkSparkle>{{ i18n.ts.misskeyUpdated }}</MkSparkle></div> <div :class="$style.title"><MkSparkle>{{ i18n.ts.misskeyUpdated }}</MkSparkle></div>
<div :class="$style.version">✨{{ version }}🚀</div> <div :class="$style.version">✨{{ version }}🚀</div>

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

@ -1,6 +1,6 @@
<template> <template>
<div :class="$style.root" :style="{ zIndex, top: top + 'px', left: left + 'px' }"> <div :class="$style.root" :style="{ zIndex, top: top + 'px', left: left + 'px' }">
<Transition :name="defaultStore.state.animation ? '_transition_zoom' : ''" @after-leave="emit('closed')"> <Transition :name="defaultStore.state.animation ? '_transition_zoom' : ''" @afterLeave="emit('closed')">
<MkUrlPreview v-if="showing" class="_popup _shadow" :url="url"/> <MkUrlPreview v-if="showing" class="_popup _shadow" :url="url"/>
</Transition> </Transition>
</div> </div>

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

@ -1,10 +1,10 @@
<template> <template>
<Transition <Transition
:enter-active-class="defaultStore.state.animation ? $style.transition_popup_enterActive : ''" :enterActiveClass="defaultStore.state.animation ? $style.transition_popup_enterActive : ''"
:leave-active-class="defaultStore.state.animation ? $style.transition_popup_leaveActive : ''" :leaveActiveClass="defaultStore.state.animation ? $style.transition_popup_leaveActive : ''"
:enter-from-class="defaultStore.state.animation ? $style.transition_popup_enterFrom : ''" :enterFromClass="defaultStore.state.animation ? $style.transition_popup_enterFrom : ''"
:leave-to-class="defaultStore.state.animation ? $style.transition_popup_leaveTo : ''" :leaveToClass="defaultStore.state.animation ? $style.transition_popup_leaveTo : ''"
appear @after-leave="emit('closed')" appear @afterLeave="emit('closed')"
> >
<div v-if="showing" :class="$style.root" class="_popup _shadow" :style="{ zIndex, top: top + 'px', left: left + 'px' }" @mouseover="() => { emit('mouseover'); }" @mouseleave="() => { emit('mouseleave'); }"> <div v-if="showing" :class="$style.root" class="_popup _shadow" :style="{ zIndex, top: top + 'px', left: left + 'px' }" @mouseover="() => { emit('mouseover'); }" @mouseleave="() => { emit('mouseleave'); }">
<div v-if="user != null"> <div v-if="user != null">

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

@ -1,8 +1,8 @@
<template> <template>
<MkModalWindow <MkModalWindow
ref="dialogEl" ref="dialogEl"
:with-ok-button="true" :withOkButton="true"
:ok-button-disabled="selected == null" :okButtonDisabled="selected == null"
@click="cancel()" @click="cancel()"
@close="cancel()" @close="cancel()"
@ok="ok()" @ok="ok()"
@ -11,12 +11,12 @@
<template #header>{{ i18n.ts.selectUser }}</template> <template #header>{{ i18n.ts.selectUser }}</template>
<div :class="$style.root"> <div :class="$style.root">
<div :class="$style.form"> <div :class="$style.form">
<FormSplit :min-width="170"> <FormSplit :minWidth="170">
<MkInput v-model="username" :autofocus="true" @update:model-value="search"> <MkInput v-model="username" :autofocus="true" @update:modelValue="search">
<template #label>{{ i18n.ts.username }}</template> <template #label>{{ i18n.ts.username }}</template>
<template #prefix>@</template> <template #prefix>@</template>
</MkInput> </MkInput>
<MkInput v-model="host" :datalist="[hostname]" @update:model-value="search"> <MkInput v-model="host" :datalist="[hostname]" @update:modelValue="search">
<template #label>{{ i18n.ts.host }}</template> <template #label>{{ i18n.ts.host }}</template>
<template #prefix>@</template> <template #prefix>@</template>
</MkInput> </MkInput>

4
packages/frontend/src/components/MkUserSetupDialog.Follow.vue
View file

@ -2,7 +2,7 @@
<div class="_gaps"> <div class="_gaps">
<div style="text-align: center;">{{ i18n.ts._initialAccountSetting.followUsers }}</div> <div style="text-align: center;">{{ i18n.ts._initialAccountSetting.followUsers }}</div>
<MkFolder :default-open="true"> <MkFolder :defaultOpen="true">
<template #label>{{ i18n.ts.recommended }}</template> <template #label>{{ i18n.ts.recommended }}</template>
<MkPagination :pagination="pinnedUsers"> <MkPagination :pagination="pinnedUsers">
@ -14,7 +14,7 @@
</MkPagination> </MkPagination>
</MkFolder> </MkFolder>
<MkFolder :default-open="true"> <MkFolder :defaultOpen="true">
<template #label>{{ i18n.ts.popularUsers }}</template> <template #label>{{ i18n.ts.popularUsers }}</template>
<MkPagination :pagination="popularUsers"> <MkPagination :pagination="popularUsers">

4
packages/frontend/src/components/MkUserSetupDialog.Profile.vue
View file

@ -12,11 +12,11 @@
</div> </div>
</FormSlot> </FormSlot>
<MkInput v-model="name" :max="30" manual-save data-cy-user-setup-user-name> <MkInput v-model="name" :max="30" manualSave data-cy-user-setup-user-name>
<template #label>{{ i18n.ts._profile.name }}</template> <template #label>{{ i18n.ts._profile.name }}</template>
</MkInput> </MkInput>
<MkTextarea v-model="description" :max="500" tall manual-save data-cy-user-setup-user-description> <MkTextarea v-model="description" :max="500" tall manualSave data-cy-user-setup-user-description>
<template #label>{{ i18n.ts._profile.description }}</template> <template #label>{{ i18n.ts._profile.description }}</template>
</MkTextarea> </MkTextarea>

22
packages/frontend/src/components/MkUserSetupDialog.vue
View file

@ -20,15 +20,15 @@
</div> </div>
<Transition <Transition
mode="out-in" mode="out-in"
:enter-active-class="$style.transition_x_enterActive" :enterActiveClass="$style.transition_x_enterActive"
:leave-active-class="$style.transition_x_leaveActive" :leaveActiveClass="$style.transition_x_leaveActive"
:enter-from-class="$style.transition_x_enterFrom" :enterFromClass="$style.transition_x_enterFrom"
:leave-to-class="$style.transition_x_leaveTo" :leaveToClass="$style.transition_x_leaveTo"
> >
<template v-if="page === 0"> <template v-if="page === 0">
<div :class="$style.centerPage"> <div :class="$style.centerPage">
<MkAnimBg style="position: absolute; top: 0;" :scale="1.5"/> <MkAnimBg style="position: absolute; top: 0;" :scale="1.5"/>
<MkSpacer :margin-min="20" :margin-max="28"> <MkSpacer :marginMin="20" :marginMax="28">
<div class="_gaps" style="text-align: center;"> <div class="_gaps" style="text-align: center;">
<i class="ti ti-confetti" style="display: block; margin: auto; font-size: 3em; color: var(--accent);"></i> <i class="ti ti-confetti" style="display: block; margin: auto; font-size: 3em; color: var(--accent);"></i>
<div style="font-size: 120%;">{{ i18n.ts._initialAccountSetting.accountCreated }}</div> <div style="font-size: 120%;">{{ i18n.ts._initialAccountSetting.accountCreated }}</div>
@ -40,7 +40,7 @@
</template> </template>
<template v-else-if="page === 1"> <template v-else-if="page === 1">
<div style="height: 100cqh; overflow: auto;"> <div style="height: 100cqh; overflow: auto;">
<MkSpacer :margin-min="20" :margin-max="28"> <MkSpacer :marginMin="20" :marginMax="28">
<XProfile/> <XProfile/>
<div class="_buttonsCenter" style="margin-top: 16px;"> <div class="_buttonsCenter" style="margin-top: 16px;">
<MkButton primary rounded gradate data-cy-user-setup-continue @click="page++">{{ i18n.ts.continue }} <i class="ti ti-arrow-right"></i></MkButton> <MkButton primary rounded gradate data-cy-user-setup-continue @click="page++">{{ i18n.ts.continue }} <i class="ti ti-arrow-right"></i></MkButton>
@ -50,7 +50,7 @@
</template> </template>
<template v-else-if="page === 2"> <template v-else-if="page === 2">
<div style="height: 100cqh; overflow: auto;"> <div style="height: 100cqh; overflow: auto;">
<MkSpacer :margin-min="20" :margin-max="28"> <MkSpacer :marginMin="20" :marginMax="28">
<XPrivacy/> <XPrivacy/>
<div class="_buttonsCenter" style="margin-top: 16px;"> <div class="_buttonsCenter" style="margin-top: 16px;">
<MkButton primary rounded gradate data-cy-user-setup-continue @click="page++">{{ i18n.ts.continue }} <i class="ti ti-arrow-right"></i></MkButton> <MkButton primary rounded gradate data-cy-user-setup-continue @click="page++">{{ i18n.ts.continue }} <i class="ti ti-arrow-right"></i></MkButton>
@ -60,7 +60,7 @@
</template> </template>
<template v-else-if="page === 3"> <template v-else-if="page === 3">
<div style="height: 100cqh; overflow: auto;"> <div style="height: 100cqh; overflow: auto;">
<MkSpacer :margin-min="20" :margin-max="28"> <MkSpacer :marginMin="20" :marginMax="28">
<XFollow/> <XFollow/>
</MkSpacer> </MkSpacer>
<div :class="$style.pageFooter"> <div :class="$style.pageFooter">
@ -70,12 +70,12 @@
</template> </template>
<template v-else-if="page === 4"> <template v-else-if="page === 4">
<div :class="$style.centerPage"> <div :class="$style.centerPage">
<MkSpacer :margin-min="20" :margin-max="28"> <MkSpacer :marginMin="20" :marginMax="28">
<div class="_gaps" style="text-align: center;"> <div class="_gaps" style="text-align: center;">
<i class="ti ti-bell-ringing-2" style="display: block; margin: auto; font-size: 3em; color: var(--accent);"></i> <i class="ti ti-bell-ringing-2" style="display: block; margin: auto; font-size: 3em; color: var(--accent);"></i>
<div style="font-size: 120%;">{{ i18n.ts.pushNotification }}</div> <div style="font-size: 120%;">{{ i18n.ts.pushNotification }}</div>
<div style="padding: 0 16px;">{{ i18n.t('_initialAccountSetting.pushNotificationDescription', { name: instance.name ?? host }) }}</div> <div style="padding: 0 16px;">{{ i18n.t('_initialAccountSetting.pushNotificationDescription', { name: instance.name ?? host }) }}</div>
<MkPushNotificationAllowButton primary show-only-to-register style="margin: 0 auto;"/> <MkPushNotificationAllowButton primary showOnlyToRegister style="margin: 0 auto;"/>
<MkButton primary rounded gradate style="margin: 16px auto 0 auto;" data-cy-user-setup-continue @click="page++">{{ i18n.ts.continue }} <i class="ti ti-arrow-right"></i></MkButton> <MkButton primary rounded gradate style="margin: 16px auto 0 auto;" data-cy-user-setup-continue @click="page++">{{ i18n.ts.continue }} <i class="ti ti-arrow-right"></i></MkButton>
</div> </div>
</MkSpacer> </MkSpacer>
@ -84,7 +84,7 @@
<template v-else-if="page === 5"> <template v-else-if="page === 5">
<div :class="$style.centerPage"> <div :class="$style.centerPage">
<MkAnimBg style="position: absolute; top: 0;" :scale="1.5"/> <MkAnimBg style="position: absolute; top: 0;" :scale="1.5"/>
<MkSpacer :margin-min="20" :margin-max="28"> <MkSpacer :marginMin="20" :marginMax="28">
<div class="_gaps" style="text-align: center;"> <div class="_gaps" style="text-align: center;">
<i class="ti ti-check" style="display: block; margin: auto; font-size: 3em; color: var(--accent);"></i> <i class="ti ti-check" style="display: block; margin: auto; font-size: 3em; color: var(--accent);"></i>
<div style="font-size: 120%;">{{ i18n.ts._initialAccountSetting.initialAccountSettingCompleted }}</div> <div style="font-size: 120%;">{{ i18n.ts._initialAccountSetting.initialAccountSettingCompleted }}</div>

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

@ -1,5 +1,5 @@
<template> <template>
<MkTooltip ref="tooltip" :showing="showing" :target-element="targetElement" :max-width="250" @closed="emit('closed')"> <MkTooltip ref="tooltip" :showing="showing" :targetElement="targetElement" :maxWidth="250" @closed="emit('closed')">
<div :class="$style.root"> <div :class="$style.root">
<div v-for="u in users" :key="u.id" :class="$style.user"> <div v-for="u in users" :key="u.id" :class="$style.user">
<MkAvatar :class="$style.avatar" :user="u"/> <MkAvatar :class="$style.avatar" :user="u"/>

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

@ -1,5 +1,5 @@
<template> <template>
<MkModal ref="modal" v-slot="{ type }" :z-priority="'high'" :src="src" @click="modal.close()" @closed="emit('closed')"> <MkModal ref="modal" v-slot="{ type }" :zPriority="'high'" :src="src" @click="modal.close()" @closed="emit('closed')">
<div class="_popup" :class="{ [$style.root]: true, [$style.asDrawer]: type === 'drawer' }"> <div class="_popup" :class="{ [$style.root]: true, [$style.asDrawer]: type === 'drawer' }">
<div :class="[$style.label, $style.item]"> <div :class="[$style.label, $style.item]">
{{ i18n.ts.visibility }} {{ i18n.ts.visibility }}

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

@ -1,5 +1,5 @@
<template> <template>
<MkModal ref="modal" :prefer-type="'dialog'" :z-priority="'high'" @click="success ? done() : () => {}" @closed="emit('closed')"> <MkModal ref="modal" :preferType="'dialog'" :zPriority="'high'" @click="success ? done() : () => {}" @closed="emit('closed')">
<div :class="[$style.root, { [$style.iconOnly]: (text == null) || success }]"> <div :class="[$style.root, { [$style.iconOnly]: (text == null) || success }]">
<i v-if="success" :class="[$style.icon, $style.success]" class="ti ti-check"></i> <i v-if="success" :class="[$style.icon, $style.success]" class="ti ti-check"></i>
<MkLoading v-else :class="[$style.icon, $style.waiting]" :em="true"/> <MkLoading v-else :class="[$style.icon, $style.waiting]" :em="true"/>

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

@ -10,26 +10,26 @@
<MkButton inline @click="$emit('exit')">{{ i18n.ts.close }}</MkButton> <MkButton inline @click="$emit('exit')">{{ i18n.ts.close }}</MkButton>
</header> </header>
<Sortable <Sortable
:model-value="props.widgets" :modelValue="props.widgets"
item-key="id" itemKey="id"
handle=".handle" handle=".handle"
:animation="150" :animation="150"
:group="{ name: 'SortableMkWidgets' }" :group="{ name: 'SortableMkWidgets' }"
:class="$style['edit-editing']" :class="$style['edit-editing']"
@update:model-value="v => emit('updateWidgets', v)" @update:modelValue="v => emit('updateWidgets', v)"
> >
<template #item="{element}"> <template #item="{element}">
<div :class="[$style.widget, $style['customize-container']]" data-cy-customize-container> <div :class="[$style.widget, $style['customize-container']]" data-cy-customize-container>
<button :class="$style['customize-container-config']" class="_button" @click.prevent.stop="configWidget(element.id)"><i class="ti ti-settings"></i></button> <button :class="$style['customize-container-config']" class="_button" @click.prevent.stop="configWidget(element.id)"><i class="ti ti-settings"></i></button>
<button :class="$style['customize-container-remove']" data-cy-customize-container-remove class="_button" @click.prevent.stop="removeWidget(element)"><i class="ti ti-x"></i></button> <button :class="$style['customize-container-remove']" data-cy-customize-container-remove class="_button" @click.prevent.stop="removeWidget(element)"><i class="ti ti-x"></i></button>
<div class="handle"> <div class="handle">
<component :is="`widget-${element.name}`" :ref="el => widgetRefs[element.id] = el" class="widget" :class="$style['customize-container-handle-widget']" :widget="element" @update-props="updateWidget(element.id, $event)"/> <component :is="`widget-${element.name}`" :ref="el => widgetRefs[element.id] = el" class="widget" :class="$style['customize-container-handle-widget']" :widget="element" @updateProps="updateWidget(element.id, $event)"/>
</div> </div>
</div> </div>
</template> </template>
</Sortable> </Sortable>
</template> </template>
<component :is="`widget-${widget.name}`" v-for="widget in widgets" v-else :key="widget.id" :ref="el => widgetRefs[widget.id] = el" :class="$style.widget" :widget="widget" @update-props="updateWidget(widget.id, $event)" @contextmenu.stop="onContextmenu(widget, $event)"/> <component :is="`widget-${widget.name}`" v-for="widget in widgets" v-else :key="widget.id" :ref="el => widgetRefs[widget.id] = el" :class="$style.widget" :widget="widget" @updateProps="updateWidget(widget.id, $event)" @contextmenu.stop="onContextmenu(widget, $event)"/>
</div> </div>
</template> </template>

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

@ -1,11 +1,11 @@
<template> <template>
<Transition <Transition
:enter-active-class="defaultStore.state.animation ? $style.transition_window_enterActive : ''" :enterActiveClass="defaultStore.state.animation ? $style.transition_window_enterActive : ''"
:leave-active-class="defaultStore.state.animation ? $style.transition_window_leaveActive : ''" :leaveActiveClass="defaultStore.state.animation ? $style.transition_window_leaveActive : ''"
:enter-from-class="defaultStore.state.animation ? $style.transition_window_enterFrom : ''" :enterFromClass="defaultStore.state.animation ? $style.transition_window_enterFrom : ''"
:leave-to-class="defaultStore.state.animation ? $style.transition_window_leaveTo : ''" :leaveToClass="defaultStore.state.animation ? $style.transition_window_leaveTo : ''"
appear appear
@after-leave="$emit('closed')" @afterLeave="$emit('closed')"
> >
<div v-if="showing" ref="rootEl" :class="[$style.root, { [$style.maximized]: maximized }]"> <div v-if="showing" ref="rootEl" :class="[$style.root, { [$style.maximized]: maximized }]">
<div :class="$style.body" class="_shadow" @mousedown="onBodyMousedown" @keydown="onKeydown"> <div :class="$style.body" class="_shadow" @mousedown="onBodyMousedown" @keydown="onKeydown">

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

@ -1,5 +1,5 @@
<template> <template>
<MkWindow :initial-width="640" :initial-height="402" :can-resize="true" :close-button="true"> <MkWindow :initialWidth="640" :initialHeight="402" :canResize="true" :closeButton="true">
<template #header> <template #header>
<i class="icon ti ti-brand-youtube" style="margin-right: 0.5em;"></i> <i class="icon ti ti-brand-youtube" style="margin-right: 0.5em;"></i>
<span>{{ title ?? 'YouTube' }}</span> <span>{{ title ?? 'YouTube' }}</span>

2
packages/frontend/src/components/global/MkAcct.vue
View file

@ -1,5 +1,5 @@
<template> <template>
<MkCondensedLine v-if="defaultStore.state.enableCondensedLineForAcct" :min-scale="2 / 3"> <MkCondensedLine v-if="defaultStore.state.enableCondensedLineForAcct" :minScale="2 / 3">
<span>@{{ user.username }}</span> <span>@{{ user.username }}</span>
<span v-if="user.host || detail || defaultStore.state.showFullAcct" style="opacity: 0.5;">@{{ user.host || host }}</span> <span v-if="user.host || detail || defaultStore.state.showFullAcct" style="opacity: 0.5;">@{{ user.host || host }}</span>
</MkCondensedLine> </MkCondensedLine>

2
packages/frontend/src/components/global/MkAvatar.vue
View file

@ -24,13 +24,13 @@
<script lang="ts" setup> <script lang="ts" setup>
import { watch } from 'vue'; import { watch } from 'vue';
import * as misskey from 'misskey-js'; import * as misskey from 'misskey-js';
import MkImgWithBlurhash from '../MkImgWithBlurhash.vue';
import MkA from './MkA.vue'; import MkA from './MkA.vue';
import { getStaticImageUrl } from '@/scripts/media-proxy'; import { getStaticImageUrl } from '@/scripts/media-proxy';
import { extractAvgColorFromBlurhash } from '@/scripts/extract-avg-color-from-blurhash'; import { extractAvgColorFromBlurhash } from '@/scripts/extract-avg-color-from-blurhash';
import { acct, userPage } from '@/filters/user'; import { acct, userPage } from '@/filters/user';
import MkUserOnlineIndicator from '@/components/MkUserOnlineIndicator.vue'; import MkUserOnlineIndicator from '@/components/MkUserOnlineIndicator.vue';
import { defaultStore } from '@/store'; import { defaultStore } from '@/store';
import MkImgWithBlurhash from '../MkImgWithBlurhash.vue';
const animation = $ref(defaultStore.state.animation); const animation = $ref(defaultStore.state.animation);
const squareAvatars = $ref(defaultStore.state.squareAvatars); const squareAvatars = $ref(defaultStore.state.squareAvatars);

4
packages/frontend/src/components/global/MkPageHeader.tabs.vue
View file

@ -15,8 +15,8 @@
{{ t.title }} {{ t.title }}
</div> </div>
<Transition <Transition
v-else mode="in-out" @enter="enter" @after-enter="afterEnter" @leave="leave" v-else mode="in-out" @enter="enter" @afterEnter="afterEnter" @leave="leave"
@after-leave="afterLeave" @afterLeave="afterLeave"
> >
<div v-show="t.key === tab" :class="[$style.tabTitle, $style.animate]">{{ t.title }}</div> <div v-show="t.key === tab" :class="[$style.tabTitle, $style.animate]">{{ t.title }}</div>
</Transition> </Transition>

4
packages/frontend/src/components/global/MkPageHeader.vue
View file

@ -21,7 +21,7 @@
</div> </div>
</div> </div>
</div> </div>
<XTabs v-if="!narrow || hideTitle" :class="$style.tabs" :tab="tab" :tabs="tabs" :root-el="el" @update:tab="key => emit('update:tab', key)" @tab-click="onTabClick"/> <XTabs v-if="!narrow || hideTitle" :class="$style.tabs" :tab="tab" :tabs="tabs" :rootEl="el" @update:tab="key => emit('update:tab', key)" @tabClick="onTabClick"/>
</template> </template>
<div v-if="(!thin_ && narrow && !hideTitle) || (actions && actions.length > 0)" :class="$style.buttonsRight"> <div v-if="(!thin_ && narrow && !hideTitle) || (actions && actions.length > 0)" :class="$style.buttonsRight">
<template v-for="action in actions"> <template v-for="action in actions">
@ -30,7 +30,7 @@
</div> </div>
</div> </div>
<div v-if="(narrow && !hideTitle) && hasTabs" :class="[$style.lower, { [$style.slim]: narrow, [$style.thin]: thin_ }]"> <div v-if="(narrow && !hideTitle) && hasTabs" :class="[$style.lower, { [$style.slim]: narrow, [$style.thin]: thin_ }]">
<XTabs :class="$style.tabs" :tab="tab" :tabs="tabs" :root-el="el" @update:tab="key => emit('update:tab', key)" @tab-click="onTabClick"/> <XTabs :class="$style.tabs" :tab="tab" :tabs="tabs" :rootEl="el" @update:tab="key => emit('update:tab', key)" @tabClick="onTabClick"/>
</div> </div>
</div> </div>
</template> </template>

2
packages/frontend/src/components/global/MkUserName.vue
View file

@ -1,5 +1,5 @@
<template> <template>
<Mfm :text="user.name ?? user.username" :author="user" :plain="true" :nowrap="nowrap" :emoji-urls="user.emojis"/> <Mfm :text="user.name ?? user.username" :author="user" :plain="true" :nowrap="nowrap" :emojiUrls="user.emojis"/>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>