161sh/trashposs
1
0
Fork 0
mirror of https://iceshrimp.dev/crimekillz/trashposs synced 2024-11-22 00:43:49 +01:00
Code Issues Packages Projects Releases Wiki Activity

Rename Vue files for consistency

Browse Source
This commit is contained in:
Aylam 2023-09-25 19:34:29 +03:00 committed by Laura Hausmann
parent a58e1c4e7f
commit 38412e5b48
No known key found for this signature in database
GPG Key ID: D044E84C5BE01605
454 changed files with 4530 additions and 4260 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
packages/client/src/account.ts
View File

@ -157,7 +157,7 @@ export async function openAccountMenu(
) { ) {
function showSigninDialog() { function showSigninDialog() {
popup( popup(
defineAsyncComponent(() => import("@/components/MkSigninDialog.vue")), defineAsyncComponent(() => import("@/components/SigninDialog.vue")),
{}, {},
{ {
done: (res) => { done: (res) => {
@ -171,7 +171,7 @@ export async function openAccountMenu(
function createAccount() { function createAccount() {
popup( popup(
defineAsyncComponent(() => import("@/components/MkSignupDialog.vue")), defineAsyncComponent(() => import("@/components/SignupDialog.vue")),
{}, {},
{ {
done: (res) => { done: (res) => {

37
packages/client/src/components/MkAbuseReport.vue → packages/client/src/components/AbuseReport.vue
View File

@ -1,35 +1,35 @@
<template> <template>
<div class="bcekxzvu _gap _panel"> <div class="bcekxzvu _gap _panel">
<div class="target"> <div class="target">
<MkA <A
v-user-preview="report.targetUserId" v-user-preview="report.targetUserId"
class="info" class="info"
:to="`/user-info/${report.targetUserId}`" :to="`/user-info/${report.targetUserId}`"
> >
<MkAvatar <Avatar
class="avatar" class="avatar"
:user="report.targetUser" :user="report.targetUser"
:show-indicator="true" :show-indicator="true"
:disable-link="true" :disable-link="true"
/> />
<div class="names"> <div class="names">
<MkUserName class="name" :user="report.targetUser" /> <UserName class="name" :user="report.targetUser" />
<MkAcct <Acct
class="acct" class="acct"
:user="report.targetUser" :user="report.targetUser"
style="display: block" style="display: block"
/> />
</div> </div>
</MkA> </A>
<MkKeyValue class="_formBlock"> <KeyValue class="_formBlock">
<template #key>{{ i18n.ts.registeredDate }}</template> <template #key>{{ i18n.ts.registeredDate }}</template>
<template #value <template #value
>{{ >{{
new Date(report.targetUser.createdAt).toLocaleString() new Date(report.targetUser.createdAt).toLocaleString()
}} }}
(<MkTime :time="report.targetUser.createdAt" />)</template (<Time :time="report.targetUser.createdAt" />)</template
> >
</MkKeyValue> </KeyValue>
</div> </div>
<div class="detail"> <div class="detail">
<div> <div>
@ -37,15 +37,16 @@
</div> </div>
<hr /> <hr />
<div> <div>
{{ i18n.ts.reporter }}: <MkAcct :user="report.reporter" /> {{ i18n.ts.reporter }}:
<Acct :user="report.reporter" />
</div> </div>
<div v-if="report.assignee"> <div v-if="report.assignee">
{{ i18n.ts.moderator }}: {{ i18n.ts.moderator }}:
<MkAcct :user="report.assignee" /> <Acct :user="report.assignee" />
</div> </div>
<div><MkTime :time="report.createdAt" /></div> <div><Time :time="report.createdAt" /></div>
<div class="action"> <div class="action">
<MkSwitch <Switch
v-model="forward" v-model="forward"
:disabled=" :disabled="
report.targetUser.host == null || report.resolved report.targetUser.host == null || report.resolved
@ -55,19 +56,19 @@
<template #caption>{{ <template #caption>{{
i18n.ts.forwardReportIsAnonymous i18n.ts.forwardReportIsAnonymous
}}</template> }}</template>
</MkSwitch> </Switch>
<MkButton v-if="!report.resolved" primary @click="resolve">{{ <Button v-if="!report.resolved" primary @click="resolve">{{
i18n.ts.abuseMarkAsResolved i18n.ts.abuseMarkAsResolved
}}</MkButton> }}</Button>
</div> </div>
</div> </div>
</div> </div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import MkButton from "@/components/MkButton.vue"; import Button from "@/components/Button.vue";
import MkSwitch from "@/components/form/switch.vue"; import Switch from "@/components/form/Switch.vue";
import MkKeyValue from "@/components/MkKeyValue.vue"; import KeyValue from "@/components/KeyValue.vue";
import { acct, userPage } from "@/filters/user"; import { acct, userPage } from "@/filters/user";
import * as os from "@/os"; import * as os from "@/os";
import { i18n } from "@/i18n"; import { i18n } from "@/i18n";

18
packages/client/src/components/MkAbuseReportWindow.vue → packages/client/src/components/AbuseReportWindow.vue
View File

@ -13,26 +13,28 @@
></i> ></i>
<I18n :src="i18n.ts.reportAbuseOf" tag="span"> <I18n :src="i18n.ts.reportAbuseOf" tag="span">
<template #name> <template #name>
<b><MkAcct :user="user" /></b> <b>
<Acct :user="user" />
</b>
</template> </template>
</I18n> </I18n>
</template> </template>
<div class="dpvffvvy _monolithic_"> <div class="dpvffvvy _monolithic_">
<div class="_section"> <div class="_section">
<MkTextarea v-model="comment"> <Textarea v-model="comment">
<template #label>{{ i18n.ts.details }}</template> <template #label>{{ i18n.ts.details }}</template>
<template #caption>{{ <template #caption>{{
i18n.ts.fillAbuseReportDescription i18n.ts.fillAbuseReportDescription
}}</template> }}</template>
</MkTextarea> </Textarea>
</div> </div>
<div class="_section"> <div class="_section">
<MkButton <Button
primary primary
full full
:disabled="comment.length === 0" :disabled="comment.length === 0"
@click="send" @click="send"
>{{ i18n.ts.send }}</MkButton >{{ i18n.ts.send }}</Button
> >
</div> </div>
</div> </div>
@ -42,9 +44,9 @@
<script setup lang="ts"> <script setup lang="ts">
import { ref } from "vue"; import { ref } from "vue";
import type * as Misskey from "iceshrimp-js"; import type * as Misskey from "iceshrimp-js";
import XWindow from "@/components/MkWindow.vue"; import XWindow from "@/components/Window.vue";
import MkTextarea from "@/components/form/textarea.vue"; import Textarea from "@/components/form/Textarea.vue";
import MkButton from "@/components/MkButton.vue"; import Button from "@/components/Button.vue";
import * as os from "@/os"; import * as os from "@/os";
import { i18n } from "@/i18n"; import { i18n } from "@/i18n";

0
packages/client/src/components/MkAnalogClock.vue → packages/client/src/components/AnalogClock.vue
View File

22
packages/client/src/components/MkAnnouncement.vue → packages/client/src/components/Announcement.vue
View File

@ -1,15 +1,15 @@
<template> <template>
<MkModal ref="modal" :z-priority="'middle'" @closed="$emit('closed')"> <Modal ref="modal" :z-priority="'middle'" @closed="$emit('closed')">
<div :class="$style.root"> <div :class="$style.root">
<div :class="$style.title"> <div :class="$style.title">
<MkSparkle v-if="isGoodNews">{{ title }}</MkSparkle> <Sparkle v-if="isGoodNews">{{ title }}</Sparkle>
<p v-else>{{ title }}</p> <p v-else>{{ title }}</p>
</div> </div>
<div :class="$style.time"> <div :class="$style.time">
<MkTime :time="announcement.createdAt" /> <Time :time="announcement.createdAt" />
<div v-if="announcement.updatedAt"> <div v-if="announcement.updatedAt">
{{ i18n.ts.updatedAt }}: {{ i18n.ts.updatedAt }}:
<MkTime :time="announcement.createdAt" /> <Time :time="announcement.createdAt" />
</div> </div>
</div> </div>
<Mfm :text="text" /> <Mfm :text="text" />
@ -19,18 +19,18 @@
:src="imageUrl" :src="imageUrl"
alt="attached image" alt="attached image"
/> />
<MkButton :class="$style.gotIt" primary full @click="gotIt()">{{ <Button :class="$style.gotIt" primary full @click="gotIt()">{{
i18n.ts.gotIt i18n.ts.gotIt
}}</MkButton> }}</Button>
</div> </div>
</MkModal> </Modal>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { shallowRef } from "vue"; import { shallowRef } from "vue";
import MkModal from "@/components/MkModal.vue"; import Modal from "@/components/Modal.vue";
import MkSparkle from "@/components/MkSparkle.vue"; import Sparkle from "@/components/Sparkle.vue";
import MkButton from "@/components/MkButton.vue"; import Button from "@/components/Button.vue";
import { i18n } from "@/i18n"; import { i18n } from "@/i18n";
import * as os from "@/os"; import * as os from "@/os";
@ -40,7 +40,7 @@ const props = defineProps<{
const { id, text, title, imageUrl, isGoodNews } = props.announcement; const { id, text, title, imageUrl, isGoodNews } = props.announcement;
const modal = shallowRef<InstanceType<typeof MkModal>>(); const modal = shallowRef<InstanceType<typeof Modal>>();
const gotIt = () => { const gotIt = () => {
modal.value.close(); modal.value.close();

2
packages/client/src/components/MkAutocomplete.vue → packages/client/src/components/Autocomplete.vue
View File

@ -15,7 +15,7 @@
> >
<img class="avatar" :src="user.avatarUrl" /> <img class="avatar" :src="user.avatarUrl" />
<span class="name"> <span class="name">
<MkUserName :key="user.id" :user="user" /> <UserName :key="user.id" :user="user" />
</span> </span>
<span class="username">@{{ acct(user) }}</span> <span class="username">@{{ acct(user) }}</span>
</li> </li>

2
packages/client/src/components/MkAvatars.vue → packages/client/src/components/Avatars.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<div class="defgtij"> <div class="defgtij">
<div v-for="user in users" :key="user.id" class="avatar-holder"> <div v-for="user in users" :key="user.id" class="avatar-holder">
<MkAvatar :user="user" :show-indicator="true" class="avatar" /> <Avatar :user="user" :show-indicator="true" class="avatar" />
</div> </div>
</div> </div>
</template> </template>

4
packages/client/src/components/MkButton.vue → packages/client/src/components/Button.vue
View File

@ -12,7 +12,7 @@
<slot></slot> <slot></slot>
</div> </div>
</button> </button>
<MkA <A
v-else v-else
class="bghgjjyj _button" class="bghgjjyj _button"
:class="{ inline, primary, gradate, danger, rounded, full, mini }" :class="{ inline, primary, gradate, danger, rounded, full, mini }"
@ -23,7 +23,7 @@
<div class="content"> <div class="content">
<slot></slot> <slot></slot>
</div> </div>
</MkA> </A>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>

5
packages/client/src/components/MkCaptcha.vue → packages/client/src/components/Captcha.vue
View File

@ -1,6 +1,9 @@
<template> <template>
<div> <div>
<span v-if="!available">{{ i18n.ts.waiting }}<MkEllipsis /></span> <span v-if="!available"
>{{ i18n.ts.waiting }}
<Ellipsis />
</span>
<div ref="captchaEl"></div> <div ref="captchaEl"></div>
</div> </div>
</template> </template>

0
packages/client/src/components/MkChannelFollowButton.vue → packages/client/src/components/ChannelFollowButton.vue
View File

12
packages/client/src/components/MkChannelList.vue → packages/client/src/components/ChannelList.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<MkPagination :pagination="pagination"> <Pagination :pagination="pagination">
<template #empty> <template #empty>
<div class="_fullinfo"> <div class="_fullinfo">
<img <img
@ -12,20 +12,20 @@
</template> </template>
<template #default="{ items }"> <template #default="{ items }">
<MkChannelPreview <ChannelPreview
v-for="item in items" v-for="item in items"
:key="item.id" :key="item.id"
class="_margin" class="_margin"
:channel="extractor(item)" :channel="extractor(item)"
/> />
</template> </template>
</MkPagination> </Pagination>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import MkChannelPreview from "@/components/MkChannelPreview.vue"; import ChannelPreview from "@/components/ChannelPreview.vue";
import type { Paging } from "@/components/MkPagination.vue"; import type { Paging } from "@/components/Pagination.vue";
import MkPagination from "@/components/MkPagination.vue"; import Pagination from "@/components/Pagination.vue";
import { i18n } from "@/i18n"; import { i18n } from "@/i18n";
import { instance } from "@/instance"; import { instance } from "@/instance";

6
packages/client/src/components/MkChannelPreview.vue → packages/client/src/components/ChannelPreview.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<MkA :to="`/channels/${channel.id}`" class="eftoefju _panel" tabindex="-1"> <A :to="`/channels/${channel.id}`" class="eftoefju _panel" tabindex="-1">
<div class="banner" :style="bannerStyle"> <div class="banner" :style="bannerStyle">
<div class="fade"></div> <div class="fade"></div>
<div class="name"> <div class="name">
@ -43,10 +43,10 @@
</article> </article>
<footer> <footer>
<span v-if="channel.lastNotedAt"> <span v-if="channel.lastNotedAt">
{{ i18n.ts.updatedAt }}: <MkTime :time="channel.lastNotedAt" /> {{ i18n.ts.updatedAt }}: <Time :time="channel.lastNotedAt" />
</span> </span>
</footer> </footer>
</MkA> </A>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>

2
packages/client/src/components/MkChart.vue → packages/client/src/components/Chart.vue
View File

@ -2,7 +2,7 @@
<div class="cbbedffa"> <div class="cbbedffa">
<canvas ref="chartEl"></canvas> <canvas ref="chartEl"></canvas>
<div v-if="fetching" class="fetching"> <div v-if="fetching" class="fetching">
<MkLoading /> <Loading />
</div> </div>
</div> </div>
</template> </template>

6
packages/client/src/components/MkChartTooltip.vue → packages/client/src/components/ChartTooltip.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<MkTooltip <Tooltip
ref="tooltip" ref="tooltip"
:showing="showing" :showing="showing"
:x="x" :x="x"
@ -24,12 +24,12 @@
</div> </div>
</template> </template>
</div> </div>
</MkTooltip> </Tooltip>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import {} from "vue"; import {} from "vue";
import MkTooltip from "./MkTooltip.vue"; import Tooltip from "./Tooltip.vue";
const props = defineProps<{ const props = defineProps<{
showing: boolean; showing: boolean;

21
packages/client/src/components/MkChatPreview.vue → packages/client/src/components/ChatPreview.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<MkA <A
class="rivslvers" class="rivslvers"
:class="{ :class="{
isMe: isMe(message), isMe: isMe(message),
@ -16,7 +16,7 @@
" "
> >
<div class="message _block"> <div class="message _block">
<MkAvatar <Avatar
class="avatar" class="avatar"
:user=" :user="
message.groupId message.groupId
@ -30,21 +30,20 @@
/> />
<header v-if="message.groupId"> <header v-if="message.groupId">
<span class="name">{{ message.group.name }}</span> <span class="name">{{ message.group.name }}</span>
<MkTime :time="message.createdAt" class="time" /> <Time :time="message.createdAt" class="time" />
</header> </header>
<header v-else> <header v-else>
<span class="name" <span class="name">
><MkUserName <UserName
:user=" :user="isMe(message) ? message.recipient : message.user"
isMe(message) ? message.recipient : message.user />
" </span>
/></span>
<span class="username" <span class="username"
>@{{ >@{{
acct(isMe(message) ? message.recipient : message.user) acct(isMe(message) ? message.recipient : message.user)
}}</span }}</span
> >
<MkTime :time="message.createdAt" class="time" /> <Time :time="message.createdAt" class="time" />
</header> </header>
<div class="body"> <div class="body">
<p class="text"> <p class="text">
@ -59,7 +58,7 @@
</p> </p>
</div> </div>
</div> </div>
</MkA> </A>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>

5
packages/client/src/components/MkCheatSheetDialog.vue → packages/client/src/components/CheatSheetDialog.vue
View File

@ -11,8 +11,8 @@
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import XModalWindow from "@/components/MkModalWindow.vue"; import XModalWindow from "@/components/ModalWindow.vue";
import XCheatSheet from "@/pages/mfm-cheat-sheet.vue"; import XCheatSheet from "@/pages/MfmCheatsheet.vue";
import { i18n } from "@/i18n"; import { i18n } from "@/i18n";
const emit = defineEmits<{ const emit = defineEmits<{
@ -32,6 +32,7 @@ function close(res) {
.fade-leave-active { .fade-leave-active {
transition: opacity 0.2s ease-in-out; transition: opacity 0.2s ease-in-out;
} }
.fade-enter-from, .fade-enter-from,
.fade-leave-to { .fade-leave-to {
opacity: 0; opacity: 0;

4
packages/client/src/components/MkCode.vue → packages/client/src/components/Code.vue
View File

@ -11,7 +11,5 @@ defineProps<{
inline?: boolean; inline?: boolean;
}>(); }>();
const XCode = defineAsyncComponent( const XCode = defineAsyncComponent(() => import("@/components/CodeCore.vue"));
() => import("@/components/MkCode.core.vue"),
);
</script> </script>

0
packages/client/src/components/MkCode.core.vue → packages/client/src/components/CodeCore.vue
View File

6
packages/client/src/components/MkContainer.vue → packages/client/src/components/Container.vue
View File

@ -259,7 +259,11 @@ export default defineComponent({
left: 0; left: 0;
width: 100%; width: 100%;
height: 64px; height: 64px;
background: linear-gradient(0deg, var(--panel), var(--panelFade)); background: linear-gradient(
0deg,
var(--panel),
var(--panelFade)
);
> span { > span {
display: inline-block; display: inline-block;

6
packages/client/src/components/MkContextMenu.vue → packages/client/src/components/ContextMenu.vue
View File

@ -6,15 +6,15 @@
:style="{ zIndex }" :style="{ zIndex }"
@contextmenu.prevent.stop="() => {}" @contextmenu.prevent.stop="() => {}"
> >
<MkMenu :items="items" :align="'left'" @close="$emit('closed')" /> <Menu :items="items" :align="'left'" @close="$emit('closed')" />
</div> </div>
</transition> </transition>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { onBeforeUnmount, onMounted } from "vue"; import { onBeforeUnmount, onMounted } from "vue";
import MkMenu from "./MkMenu.vue"; import Menu from "./Menu.vue";
import type { MenuItem } from "./types/menu.vue"; import type { MenuItem } from "./types/Menu.vue";
import contains from "@/scripts/contains"; import contains from "@/scripts/contains";
import * as os from "@/os"; import * as os from "@/os";

5
packages/client/src/components/MkCropperDialog.vue → packages/client/src/components/CropperDialog.vue
View File

@ -19,7 +19,7 @@
> >
<Transition name="fade"> <Transition name="fade">
<div v-if="loading" class="loading"> <div v-if="loading" class="loading">
<MkLoading /> <Loading />
</div> </div>
</Transition> </Transition>
<div class="container"> <div class="container">
@ -40,7 +40,7 @@ import { nextTick, onMounted } from "vue";
import type * as misskey from "iceshrimp-js"; import type * as misskey from "iceshrimp-js";
import Cropper from "cropperjs"; import Cropper from "cropperjs";
import tinycolor from "tinycolor2"; import tinycolor from "tinycolor2";
import XModalWindow from "@/components/MkModalWindow.vue"; import XModalWindow from "@/components/ModalWindow.vue";
import * as os from "@/os"; import * as os from "@/os";
import { $i } from "@/account"; import { $i } from "@/account";
import { defaultStore } from "@/store"; import { defaultStore } from "@/store";
@ -144,6 +144,7 @@ onMounted(() => {
.fade-leave-active { .fade-leave-active {
transition: opacity 0.5s ease 0.5s; transition: opacity 0.5s ease 0.5s;
} }
.fade-enter-from, .fade-enter-from,
.fade-leave-to { .fade-leave-to {
opacity: 0; opacity: 0;

6
packages/client/src/components/MkCwButton.vue → packages/client/src/components/CwButton.vue
View File

@ -2,7 +2,7 @@
<button <button
ref="el" ref="el"
class="_button" class="_button"
:class="[cwButton, { showLess: modelValue, fade: !modelValue, }]" :class="[cwButton, { showLess: modelValue, fade: !modelValue }]"
@click.stop="toggle" @click.stop="toggle"
> >
<span class="cw-toggle-text" <span class="cw-toggle-text"
@ -203,11 +203,11 @@ defineExpose({
font-weight: normal; font-weight: normal;
&:before { &:before {
content: '('; content: "(";
} }
&:after { &:after {
content: ')'; content: ")";
} }
} }
} }

0
packages/client/src/components/MkDateSeparatedList.vue → packages/client/src/components/DateSeparatedList.vue
View File

52
packages/client/src/components/MkDialog.vue → packages/client/src/components/Dialog.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<MkModal <Modal
ref="modal" ref="modal"
:prefer-type="'dialog'" :prefer-type="'dialog'"
@click="done(true)" @click="done(true)"
@ -38,7 +38,7 @@
:class="$style.iconInner" :class="$style.iconInner"
class="ph-circle-question ph-bold ph-lg" class="ph-circle-question ph-bold ph-lg"
></i> ></i>
<MkLoading <Loading
v-else-if="type === 'waiting'" v-else-if="type === 'waiting'"
:class="$style.iconInner" :class="$style.iconInner"
:em="true" :em="true"
@ -56,7 +56,7 @@
<div v-if="text" :class="$style.text"> <div v-if="text" :class="$style.text">
<Mfm :text="text" /> <Mfm :text="text" />
</div> </div>
<MkInput <Input
v-if="input && input.type !== 'paragraph'" v-if="input && input.type !== 'paragraph'"
ref="inputEl" ref="inputEl"
v-model="inputValue" v-model="inputValue"
@ -107,16 +107,16 @@
<i class="ph-funnel ph-bold"></i> <i class="ph-funnel ph-bold"></i>
</button> </button>
</template> </template>
</MkInput> </Input>
<MkTextarea <Textarea
v-if="input && input.type === 'paragraph'" v-if="input && input.type === 'paragraph'"
v-model="inputValue" v-model="inputValue"
autofocus autofocus
:type="paragraph" :type="paragraph"
:placeholder="input.placeholder || undefined" :placeholder="input.placeholder || undefined"
> >
</MkTextarea> </Textarea>
<MkSelect v-if="select" v-model="selectedValue" autofocus> <Select v-if="select" v-model="selectedValue" autofocus>
<template v-if="select.items"> <template v-if="select.items">
<option v-for="item in select.items" :value="item.value"> <option v-for="item in select.items" :value="item.value">
{{ item.text }} {{ item.text }}
@ -135,14 +135,14 @@
</option> </option>
</optgroup> </optgroup>
</template> </template>
</MkSelect> </Select>
<div <div
v-if="(showOkButton || showCancelButton) && !actions" v-if="(showOkButton || showCancelButton) && !actions"
:class="$style.buttons" :class="$style.buttons"
> >
<div v-if="!isYesNo"> <div v-if="!isYesNo">
<MkButton <Button
v-if="showOkButton" v-if="showOkButton"
inline inline
primary primary
@ -153,34 +153,34 @@
showCancelButton || input || select showCancelButton || input || select
? i18n.ts.ok ? i18n.ts.ok
: i18n.ts.gotIt : i18n.ts.gotIt
}}</MkButton }}</Button
> >
<MkButton <Button
v-if="showCancelButton || input || select" v-if="showCancelButton || input || select"
inline inline
@click="cancel" @click="cancel"
>{{ i18n.ts.cancel }}</MkButton >{{ i18n.ts.cancel }}</Button
> >
</div> </div>
<div v-else> <div v-else>
<MkButton <Button
v-if="showOkButton" v-if="showOkButton"
inline inline
primary primary
:autofocus="!input && !select" :autofocus="!input && !select"
@click="ok" @click="ok"
>{{ i18n.ts.yes }} >{{ i18n.ts.yes }}
</MkButton> </Button>
<MkButton <Button
v-if="showCancelButton || input || select" v-if="showCancelButton || input || select"
inline inline
@click="cancel" @click="cancel"
>{{ i18n.ts.no }}</MkButton >{{ i18n.ts.no }}</Button
> >
</div> </div>
</div> </div>
<div v-if="actions" :class="$style.buttons"> <div v-if="actions" :class="$style.buttons">
<MkButton <Button
v-for="action in actions" v-for="action in actions"
:key="action.text" :key="action.text"
inline inline
@ -191,21 +191,21 @@
modal?.close(); modal?.close();
} }
" "
>{{ action.text }}</MkButton >{{ action.text }}</Button
> >
</div> </div>
</div> </div>
</MkModal> </Modal>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { onBeforeUnmount, onMounted, ref, shallowRef } from "vue"; import { onBeforeUnmount, onMounted, ref, shallowRef } from "vue";
import * as Acct from "iceshrimp-js/built/acct"; import * as Acct from "iceshrimp-js/built/acct";
import MkModal from "@/components/MkModal.vue"; import Modal from "@/components/Modal.vue";
import MkButton from "@/components/MkButton.vue"; import Button from "@/components/Button.vue";
import MkInput from "@/components/form/input.vue"; import Input from "@/components/form/Input.vue";
import MkTextarea from "@/components/form/textarea.vue"; import Textarea from "@/components/form/Textarea.vue";
import MkSelect from "@/components/form/select.vue"; import Select from "@/components/form/Select.vue";
import * as os from "@/os"; import * as os from "@/os";
import { i18n } from "@/i18n"; import { i18n } from "@/i18n";
@ -276,7 +276,7 @@ const emit = defineEmits<{
(ev: "closed"): void; (ev: "closed"): void;
}>(); }>();
const modal = shallowRef<InstanceType<typeof MkModal>>(); const modal = shallowRef<InstanceType<typeof Modal>>();
const inputValue = ref<string | number | null>(props.input?.default ?? null); const inputValue = ref<string | number | null>(props.input?.default ?? null);
const selectedValue = ref(props.select?.default ?? null); const selectedValue = ref(props.select?.default ?? null);
@ -308,7 +308,7 @@ const okButtonDisabled = $computed<boolean>(() => {
return false; return false;
}); });
const inputEl = ref<typeof MkInput>(); const inputEl = ref<typeof Input>();
function done(canceled: boolean, result?) { function done(canceled: boolean, result?) {
emit("done", { canceled, result }); emit("done", { canceled, result });

0
packages/client/src/components/MkDigitalClock.vue → packages/client/src/components/DigitalClock.vue
View File

20
packages/client/src/components/MkDrive.vue → packages/client/src/components/Drive.vue
View File

@ -70,9 +70,9 @@
/> />
<!-- SEE: https://stackoverflow.com/questions/18744164/flex-box-align-last-row-to-grid --> <!-- SEE: https://stackoverflow.com/questions/18744164/flex-box-align-last-row-to-grid -->
<div v-for="(n, i) in 16" :key="i" class="padding"></div> <div v-for="(n, i) in 16" :key="i" class="padding"></div>
<MkButton v-if="moreFolders" ref="moreFolders">{{ <Button v-if="moreFolders" ref="moreFolders">{{
i18n.ts.loadMore i18n.ts.loadMore
}}</MkButton> }}</Button>
</div> </div>
<div <div
v-show="files.length > 0" v-show="files.length > 0"
@ -95,11 +95,11 @@
/> />
<!-- SEE: https://stackoverflow.com/questions/18744164/flex-box-align-last-row-to-grid --> <!-- SEE: https://stackoverflow.com/questions/18744164/flex-box-align-last-row-to-grid -->
<div v-for="(n, i) in 16" :key="i" class="padding"></div> <div v-for="(n, i) in 16" :key="i" class="padding"></div>
<MkButton <Button
v-show="moreFiles" v-show="moreFiles"
ref="loadMoreFiles" ref="loadMoreFiles"
@click="fetchMoreFiles" @click="fetchMoreFiles"
>{{ i18n.ts.loadMore }}</MkButton >{{ i18n.ts.loadMore }}</Button
> >
</div> </div>
<div <div
@ -116,7 +116,7 @@
</p> </p>
</div> </div>
</div> </div>
<MkLoading v-if="fetching" /> <Loading v-if="fetching" />
</div> </div>
<div v-if="draghover" class="dropzone"></div> <div v-if="draghover" class="dropzone"></div>
<input <input
@ -141,10 +141,10 @@ import {
watch, watch,
} from "vue"; } from "vue";
import * as Misskey from "iceshrimp-js"; import * as Misskey from "iceshrimp-js";
import MkButton from "./MkButton.vue"; import Button from "./Button.vue";
import XNavFolder from "@/components/MkDrive.navFolder.vue"; import XNavFolder from "@/components/DriveNavFolder.vue";
import XFolder from "@/components/MkDrive.folder.vue"; import XFolder from "@/components/DriveFolder.vue";
import XFile from "@/components/MkDrive.file.vue"; import XFile from "@/components/DriveFile.vue";
import * as os from "@/os"; import * as os from "@/os";
import { stream } from "@/stream"; import { stream } from "@/stream";
import { defaultStore } from "@/store"; import { defaultStore } from "@/store";
@ -178,7 +178,7 @@ const emit = defineEmits<{
(ev: "open-folder", v: Misskey.entities.DriveFolder): void; (ev: "open-folder", v: Misskey.entities.DriveFolder): void;
}>(); }>();
const loadMoreFiles = ref<InstanceType<typeof MkButton>>(); const loadMoreFiles = ref<InstanceType<typeof Button>>();
const fileInput = ref<HTMLInputElement>(); const fileInput = ref<HTMLInputElement>();
const folder = ref<Misskey.entities.DriveFolder | null>(null); const folder = ref<Misskey.entities.DriveFolder | null>(null);

6
packages/client/src/components/MkDrive.file.vue → packages/client/src/components/DriveFile.vue
View File

@ -22,7 +22,7 @@
<p>{{ i18n.ts.nsfw }}</p> <p>{{ i18n.ts.nsfw }}</p>
</div> </div>
<MkDriveFileThumbnail class="thumbnail" :file="file" fit="contain" /> <DriveFileThumbnail class="thumbnail" :file="file" fit="contain" />
<p class="name"> <p class="name">
<span>{{ <span>{{
@ -41,7 +41,7 @@
import { computed, defineAsyncComponent, ref } from "vue"; import { computed, defineAsyncComponent, ref } from "vue";
import * as Misskey from "iceshrimp-js"; import * as Misskey from "iceshrimp-js";
import copyToClipboard from "@/scripts/copy-to-clipboard"; import copyToClipboard from "@/scripts/copy-to-clipboard";
import MkDriveFileThumbnail from "@/components/MkDriveFileThumbnail.vue"; import DriveFileThumbnail from "@/components/DriveFileThumbnail.vue";
import bytes from "@/filters/bytes"; import bytes from "@/filters/bytes";
import * as os from "@/os"; import * as os from "@/os";
import { i18n } from "@/i18n"; import { i18n } from "@/i18n";
@ -167,7 +167,7 @@ function rename() {
function describe() { function describe() {
os.popup( os.popup(
defineAsyncComponent(() => import("@/components/MkMediaCaption.vue")), defineAsyncComponent(() => import("@/components/MediaCaption.vue")),
{ {
title: i18n.ts.describeFile, title: i18n.ts.describeFile,
input: { input: {

2
packages/client/src/components/MkDriveFileThumbnail.vue → packages/client/src/components/DriveFileThumbnail.vue
View File

@ -42,7 +42,7 @@
<script lang="ts" setup> <script lang="ts" setup>
import { computed } from "vue"; import { computed } from "vue";
import type * as Misskey from "iceshrimp-js"; import type * as Misskey from "iceshrimp-js";
import ImgWithBlurhash from "@/components/MkImgWithBlurhash.vue"; import ImgWithBlurhash from "@/components/ImgWithBlurhash.vue";
const props = defineProps<{ const props = defineProps<{
file: Misskey.entities.DriveFile; file: Misskey.entities.DriveFile;

2
packages/client/src/components/MkDrive.folder.vue → packages/client/src/components/DriveFolder.vue
View File

@ -256,7 +256,7 @@ function onContextmenu(ev: MouseEvent) {
action: () => { action: () => {
os.popup( os.popup(
defineAsyncComponent( defineAsyncComponent(
() => import("@/components/MkDriveWindow.vue"), () => import("@/components/DriveWindow.vue"),
), ),
{ {
initialFolder: props.folder, initialFolder: props.folder,

0
packages/client/src/components/MkDrive.navFolder.vue → packages/client/src/components/DriveNavFolder.vue
View File

4
packages/client/src/components/MkDriveSelectDialog.vue → packages/client/src/components/DriveSelectDialog.vue
View File

@ -38,8 +38,8 @@
<script lang="ts" setup> <script lang="ts" setup>
import { ref } from "vue"; import { ref } from "vue";
import * as Misskey from "iceshrimp-js"; import * as Misskey from "iceshrimp-js";
import XDrive from "@/components/MkDrive.vue"; import XDrive from "@/components/Drive.vue";
import XModalWindow from "@/components/MkModalWindow.vue"; import XModalWindow from "@/components/ModalWindow.vue";
import number from "@/filters/number"; import number from "@/filters/number";
import { i18n } from "@/i18n"; import { i18n } from "@/i18n";

4
packages/client/src/components/MkDriveWindow.vue → packages/client/src/components/DriveWindow.vue
View File

@ -16,8 +16,8 @@
<script lang="ts" setup> <script lang="ts" setup>
import {} from "vue"; import {} from "vue";
import * as Misskey from "iceshrimp-js"; import * as Misskey from "iceshrimp-js";
import XDrive from "@/components/MkDrive.vue"; import XDrive from "@/components/Drive.vue";
import XWindow from "@/components/MkWindow.vue"; import XWindow from "@/components/Window.vue";
import { i18n } from "@/i18n"; import { i18n } from "@/i18n";
defineProps<{ defineProps<{

12
packages/client/src/components/MkEmojiPicker.vue → packages/client/src/components/EmojiPicker.vue
View File

@ -28,7 +28,7 @@
tabindex="0" tabindex="0"
@click="chosen(emoji, $event)" @click="chosen(emoji, $event)"
> >
<!--<MkEmoji v-if="emoji.char != null" :emoji="emoji.char"/>--> <!--<Emoji v-if="emoji.char != null" :emoji="emoji.char"/>-->
<img <img
class="emoji" class="emoji"
:src=" :src="
@ -48,7 +48,7 @@
tabindex="0" tabindex="0"
@click="chosen(emoji, $event)" @click="chosen(emoji, $event)"
> >
<MkEmoji class="emoji" :emoji="emoji.emoji" /> <Emoji class="emoji" :emoji="emoji.emoji" />
</button> </button>
</div> </div>
</section> </section>
@ -63,7 +63,7 @@
tabindex="0" tabindex="0"
@click="chosen(emoji, $event)" @click="chosen(emoji, $event)"
> >
<MkEmoji <Emoji
class="emoji" class="emoji"
:emoji="emoji" :emoji="emoji"
:normal="true" :normal="true"
@ -84,7 +84,7 @@
class="_button item" class="_button item"
@click="chosen(emoji, $event)" @click="chosen(emoji, $event)"
> >
<MkEmoji <Emoji
class="emoji" class="emoji"
:emoji="emoji" :emoji="emoji"
:normal="true" :normal="true"
@ -165,7 +165,7 @@
<script lang="ts" setup> <script lang="ts" setup>
import { ref, computed, watch, onMounted } from "vue"; import { ref, computed, watch, onMounted } from "vue";
import * as Misskey from "iceshrimp-js"; import * as Misskey from "iceshrimp-js";
import XSection from "@/components/MkEmojiPicker.section.vue"; import XSection from "@/components/EmojiPickerSection.vue";
import { import {
emojilist, emojilist,
unicodeEmojiCategories, unicodeEmojiCategories,
@ -173,7 +173,7 @@ import {
getNicelyLabeledCategory, getNicelyLabeledCategory,
} from "@/scripts/emojilist"; } from "@/scripts/emojilist";
import { getStaticImageUrl } from "@/scripts/get-static-image-url"; import { getStaticImageUrl } from "@/scripts/get-static-image-url";
import Ripple from "@/components/MkRipple.vue"; import Ripple from "@/components/Ripple.vue";
import * as os from "@/os"; import * as os from "@/os";
import { isTouchUsing } from "@/scripts/touch"; import { isTouchUsing } from "@/scripts/touch";
import { deviceKind } from "@/scripts/device-kind"; import { deviceKind } from "@/scripts/device-kind";

14
packages/client/src/components/MkEmojiPickerDialog.vue → packages/client/src/components/EmojiPickerDialog.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<MkModal <Modal
ref="modal" ref="modal"
v-slot="{ type, maxHeight }" v-slot="{ type, maxHeight }"
:z-priority="'middle'" :z-priority="'middle'"
@ -17,7 +17,7 @@
@close="emit('close')" @close="emit('close')"
@closed="emit('closed')" @closed="emit('closed')"
> >
<MkEmojiPicker <EmojiPicker
ref="picker" ref="picker"
class="ryghynhb _popup _shadow" class="ryghynhb _popup _shadow"
:class="{ drawer: type === 'drawer' }" :class="{ drawer: type === 'drawer' }"
@ -27,13 +27,13 @@
:max-height="maxHeight" :max-height="maxHeight"
@chosen="chosen" @chosen="chosen"
/> />
</MkModal> </Modal>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { ref, onMounted, onBeforeUnmount } from "vue"; import { ref, onMounted, onBeforeUnmount } from "vue";
import MkModal from "@/components/MkModal.vue"; import Modal from "@/components/Modal.vue";
import MkEmojiPicker from "@/components/MkEmojiPicker.vue"; import EmojiPicker from "@/components/EmojiPicker.vue";
import { defaultStore } from "@/store"; import { defaultStore } from "@/store";
withDefaults( withDefaults(
@ -56,8 +56,8 @@ const emit = defineEmits<{
(ev: "closed"): void; (ev: "closed"): void;
}>(); }>();
const modal = ref<InstanceType<typeof MkModal>>(); const modal = ref<InstanceType<typeof Modal>>();
const picker = ref<InstanceType<typeof MkEmojiPicker>>(); const picker = ref<InstanceType<typeof EmojiPicker>>();
function checkForShift(ev?: MouseEvent) { function checkForShift(ev?: MouseEvent) {
if (ev?.shiftKey) return; if (ev?.shiftKey) return;

2
packages/client/src/components/MkEmojiPicker.section.vue → packages/client/src/components/EmojiPickerSection.vue
View File

@ -41,7 +41,7 @@
class="_button item" class="_button item"
@click="emit('chosen', emoji, $event)" @click="emit('chosen', emoji, $event)"
> >
<MkEmoji class="emoji" :emoji="emoji" :normal="true" /> <Emoji class="emoji" :emoji="emoji" :normal="true" />
</button> </button>
</div> </div>
</section> </section>

0
packages/client/src/components/MkFeaturedPhotos.vue → packages/client/src/components/FeaturedPhotos.vue
View File

21
packages/client/src/components/MkFileListForAdmin.vue → packages/client/src/components/FileListForAdmin.vue
View File

@ -1,12 +1,12 @@
<template> <template>
<div> <div>
<MkPagination <Pagination
v-slot="{ items }" v-slot="{ items }"
:pagination="pagination" :pagination="pagination"
class="urempief" class="urempief"
:class="{ grid: viewMode === 'grid' }" :class="{ grid: viewMode === 'grid' }"
> >
<MkA <A
v-for="file in items" v-for="file in items"
:key="file.id" :key="file.id"
v-tooltip.mfm=" v-tooltip.mfm="
@ -22,7 +22,7 @@
<div v-if="file.isSensitive" class="sensitive-label"> <div v-if="file.isSensitive" class="sensitive-label">
{{ i18n.ts.sensitive }} {{ i18n.ts.sensitive }}
</div> </div>
<MkDriveFileThumbnail <DriveFileThumbnail
class="thumbnail" class="thumbnail"
:file="file" :file="file"
fit="contain" fit="contain"
@ -32,7 +32,7 @@
<small style="opacity: 0.7">{{ file.name }}</small> <small style="opacity: 0.7">{{ file.name }}</small>
</div> </div>
<div> <div>
<MkAcct v-if="file.user" :user="file.user" /> <Acct v-if="file.user" :user="file.user" />
<div v-else>{{ i18n.ts.system }}</div> <div v-else>{{ i18n.ts.system }}</div>
</div> </div>
<div> <div>
@ -42,21 +42,21 @@
<div> <div>
<span <span
>{{ i18n.ts.registeredDate }}: >{{ i18n.ts.registeredDate }}:
<MkTime :time="file.createdAt" mode="detail" <Time :time="file.createdAt" mode="detail"
/></span> /></span>
</div> </div>
</div> </div>
</MkA> </A>
</MkPagination> </Pagination>
</div> </div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { computed } from "vue"; import { computed } from "vue";
import * as Acct from "iceshrimp-js/built/acct"; import * as Acct from "iceshrimp-js/built/acct";
import MkSwitch from "@/components/ui/switch.vue"; import Switch from "@/components/ui/Switch.vue";
import MkPagination from "@/components/MkPagination.vue"; import Pagination from "@/components/Pagination.vue";
import MkDriveFileThumbnail from "@/components/MkDriveFileThumbnail.vue"; import DriveFileThumbnail from "@/components/DriveFileThumbnail.vue";
import bytes from "@/filters/bytes"; import bytes from "@/filters/bytes";
import * as os from "@/os"; import * as os from "@/os";
import { i18n } from "@/i18n"; import { i18n } from "@/i18n";
@ -72,6 +72,7 @@ const props = defineProps<{
0% { 0% {
opacity: 1; opacity: 1;
} }
50% { 50% {
opacity: 0; opacity: 0;
} }

0
packages/client/src/components/MkFileTypeIcon.vue → packages/client/src/components/FileTypeIcon.vue
View File

0
packages/client/src/components/MkFolder.vue → packages/client/src/components/Folder.vue
View File

0
packages/client/src/components/MkFollowButton.vue → packages/client/src/components/FollowButton.vue
View File

22
packages/client/src/components/MkForgotPassword.vue → packages/client/src/components/ForgotPassword.vue
View File

@ -14,7 +14,7 @@
@submit.prevent="onSubmit" @submit.prevent="onSubmit"
> >
<div class="main _formRoot"> <div class="main _formRoot">
<MkInput <Input
v-model="username" v-model="username"
class="_formBlock" class="_formBlock"
type="text" type="text"
@ -25,9 +25,9 @@
> >
<template #label>{{ i18n.ts.username }}</template> <template #label>{{ i18n.ts.username }}</template>
<template #prefix>@</template> <template #prefix>@</template>
</MkInput> </Input>
<MkInput <Input
v-model="email" v-model="email"
class="_formBlock" class="_formBlock"
type="email" type="email"
@ -38,21 +38,21 @@
<template #caption>{{ <template #caption>{{
i18n.ts._forgotPassword.enterEmail i18n.ts._forgotPassword.enterEmail
}}</template> }}</template>
</MkInput> </Input>
<MkButton <Button
class="_formBlock" class="_formBlock"
type="submit" type="submit"
:disabled="processing" :disabled="processing"
primary primary
style="margin: 0 auto" style="margin: 0 auto"
>{{ i18n.ts.send }}</MkButton >{{ i18n.ts.send }}</Button
> >
</div> </div>
<div class="sub"> <div class="sub">
<MkA to="/about" class="_link">{{ <A to="/about" class="_link">{{
i18n.ts._forgotPassword.ifNoEmail i18n.ts._forgotPassword.ifNoEmail
}}</MkA> }}</A>
</div> </div>
</form> </form>
<div v-else class="bafecedb"> <div v-else class="bafecedb">
@ -63,9 +63,9 @@
<script lang="ts" setup> <script lang="ts" setup>
import {} from "vue"; import {} from "vue";
import XModalWindow from "@/components/MkModalWindow.vue"; import XModalWindow from "@/components/ModalWindow.vue";
import MkButton from "@/components/MkButton.vue"; import Button from "@/components/Button.vue";
import MkInput from "@/components/form/input.vue"; import Input from "@/components/form/Input.vue";
import * as os from "@/os"; import * as os from "@/os";
import { instance } from "@/instance"; import { instance } from "@/instance";
import { i18n } from "@/i18n"; import { i18n } from "@/i18n";

26
packages/client/src/components/MkFormDialog.vue → packages/client/src/components/FormDialog.vue
View File

@ -14,7 +14,7 @@
{{ title }} {{ title }}
</template> </template>
<MkSpacer :margin-min="20" :margin-max="32"> <Spacer :margin-min="20" :margin-max="32">
<div class="xkpnjxcv _formRoot"> <div class="xkpnjxcv _formRoot">
<template <template
v-for="item in Object.keys(form).filter( v-for="item in Object.keys(form).filter(
@ -141,29 +141,29 @@
form[item].description form[item].description
}}</template> }}</template>
</FormRange> </FormRange>
<MkButton <Button
v-else-if="form[item].type === 'button'" v-else-if="form[item].type === 'button'"
class="_formBlock" class="_formBlock"
@click="form[item].action($event, values)" @click="form[item].action($event, values)"
> >
<span v-text="form[item].content || item"></span> <span v-text="form[item].content || item"></span>
</MkButton> </Button>
</template> </template>
</div> </div>
</MkSpacer> </Spacer>
</XModalWindow> </XModalWindow>
</template> </template>
<script lang="ts"> <script lang="ts">
import { defineComponent } from "vue"; import { defineComponent } from "vue";
import FormInput from "./form/input.vue"; import FormInput from "./form/Input.vue";
import FormTextarea from "./form/textarea.vue"; import FormTextarea from "./form/Textarea.vue";
import FormSwitch from "./form/switch.vue"; import FormSwitch from "./form/Switch.vue";
import FormSelect from "./form/select.vue"; import FormSelect from "./form/Select.vue";
import FormRange from "./form/range.vue"; import FormRange from "./form/Range.vue";
import MkButton from "./MkButton.vue"; import Button from "./Button.vue";
import FormRadios from "./form/radios.vue"; import FormRadios from "./form/Radios.vue";
import XModalWindow from "@/components/MkModalWindow.vue"; import XModalWindow from "@/components/ModalWindow.vue";
import { i18n } from "@/i18n"; import { i18n } from "@/i18n";
export default defineComponent({ export default defineComponent({
@ -174,7 +174,7 @@ export default defineComponent({
FormSwitch, FormSwitch,
FormSelect, FormSelect,
FormRange, FormRange,
MkButton, Button,
FormRadios, FormRadios,
}, },

2
packages/client/src/components/MkFormula.vue → packages/client/src/components/Formula.vue
View File

@ -9,7 +9,7 @@ import * as os from "@/os";
export default defineComponent({ export default defineComponent({
components: { components: {
XFormula: defineAsyncComponent( XFormula: defineAsyncComponent(
() => import("@/components/MkFormulaCore.vue"), () => import("@/components/FormulaCore.vue"),
), ),
}, },
props: { props: {

0
packages/client/src/components/MkFormulaCore.vue → packages/client/src/components/FormulaCore.vue
View File

8
packages/client/src/components/MkGalleryPostPreview.vue → packages/client/src/components/GalleryPostPreview.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<MkA :to="`/gallery/${post.id}`" class="ttasepnz _panel"> <A :to="`/gallery/${post.id}`" class="ttasepnz _panel">
<div class="thumbnail"> <div class="thumbnail">
<ImgWithBlurhash <ImgWithBlurhash
class="img" class="img"
@ -9,19 +9,19 @@
</div> </div>
<article> <article>
<header> <header>
<MkAvatar :user="post.user" class="avatar" /> <Avatar :user="post.user" class="avatar" />
</header> </header>
<footer> <footer>
<span class="title">{{ post.title }}</span> <span class="title">{{ post.title }}</span>
</footer> </footer>
</article> </article>
</MkA> </A>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import {} from "vue"; import {} from "vue";
import { userName } from "@/filters/user"; import { userName } from "@/filters/user";
import ImgWithBlurhash from "@/components/MkImgWithBlurhash.vue"; import ImgWithBlurhash from "@/components/ImgWithBlurhash.vue";
const props = defineProps<{ const props = defineProps<{
post: any; post: any;

2
packages/client/src/components/MkHeatmap.vue → packages/client/src/components/Heatmap.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<div ref="rootEl"> <div ref="rootEl">
<MkLoading v-if="fetching" /> <Loading v-if="fetching" />
<div v-else> <div v-else>
<canvas ref="chartEl"></canvas> <canvas ref="chartEl"></canvas>
</div> </div>

8
packages/client/src/components/MkImageViewer.vue → packages/client/src/components/ImageViewer.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<MkModal <Modal
ref="modal" ref="modal"
:z-priority="'middle'" :z-priority="'middle'"
@click="modal.close()" @click="modal.close()"
@ -22,7 +22,7 @@
> >
</footer> </footer>
</div> </div>
</MkModal> </Modal>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
@ -30,7 +30,7 @@ import {} from "vue";
import type * as misskey from "iceshrimp-js"; import type * as misskey from "iceshrimp-js";
import bytes from "@/filters/bytes"; import bytes from "@/filters/bytes";
import number from "@/filters/number"; import number from "@/filters/number";
import MkModal from "@/components/MkModal.vue"; import Modal from "@/components/Modal.vue";
const props = withDefaults( const props = withDefaults(
defineProps<{ defineProps<{
@ -43,7 +43,7 @@ const emit = defineEmits<{
(ev: "closed"): void; (ev: "closed"): void;
}>(); }>();
const modal = $ref<InstanceType<typeof MkModal>>(); const modal = $ref<InstanceType<typeof Modal>>();
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>

0
packages/client/src/components/MkImgWithBlurhash.vue → packages/client/src/components/ImgWithBlurhash.vue
View File

0
packages/client/src/components/MkInfo.vue → packages/client/src/components/Info.vue
View File

4
packages/client/src/components/MkInstanceCardMini.vue → packages/client/src/components/InstanceCardMini.vue
View File

@ -19,13 +19,13 @@
{{ instance.softwareVersion }}</span {{ instance.softwareVersion }}</span
> >
</div> </div>
<MkMiniChart v-if="chartValues" class="chart" :src="chartValues" /> <MiniChart v-if="chartValues" class="chart" :src="chartValues" />
</div> </div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import * as iceshrimp from "iceshrimp-js"; import * as iceshrimp from "iceshrimp-js";
import MkMiniChart from "@/components/MkMiniChart.vue"; import MiniChart from "@/components/MiniChart.vue";
import * as os from "@/os"; import * as os from "@/os";
import { getProxiedImageUrlNullable } from "@/scripts/media-proxy"; import { getProxiedImageUrlNullable } from "@/scripts/media-proxy";

8
packages/client/src/components/MkInstanceSelectDialog.vue → packages/client/src/components/InstanceSelectDialog.vue
View File

@ -11,13 +11,13 @@
<template #header>{{ i18n.ts.selectInstance }}</template> <template #header>{{ i18n.ts.selectInstance }}</template>
<div class="mehkoush"> <div class="mehkoush">
<div class="form"> <div class="form">
<MkInput <Input
v-model="hostname" v-model="hostname"
:autofocus="true" :autofocus="true"
@update:modelValue="search" @update:modelValue="search"
> >
<template #label>{{ i18n.ts.instance }}</template> <template #label>{{ i18n.ts.instance }}</template>
</MkInput> </Input>
</div> </div>
<div <div
v-if="hostname != ''" v-if="hostname != ''"
@ -56,8 +56,8 @@
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import MkInput from "@/components/form/input.vue"; import Input from "@/components/form/Input.vue";
import XModalWindow from "@/components/MkModalWindow.vue"; import XModalWindow from "@/components/ModalWindow.vue";
import * as os from "@/os"; import * as os from "@/os";
import { i18n } from "@/i18n"; import { i18n } from "@/i18n";
import { Instance } from "iceshrimp-js/built/entities"; import { Instance } from "iceshrimp-js/built/entities";

38
packages/client/src/components/MkInstanceStats.vue → packages/client/src/components/InstanceStats.vue
View File

@ -1,10 +1,10 @@
<template> <template>
<div :class="$style.root"> <div :class="$style.root">
<MkFolder class="item"> <Folder class="item">
<template #header>Chart</template> <template #header>Chart</template>
<div :class="$style.chart"> <div :class="$style.chart">
<div class="selects"> <div class="selects">
<MkSelect v-model="chartSrc" style="margin: 0; flex: 1"> <Select v-model="chartSrc" style="margin: 0; flex: 1">
<optgroup :label="i18n.ts.federation"> <optgroup :label="i18n.ts.federation">
<option value="federation"> <option value="federation">
{{ i18n.ts._charts.federation }} {{ i18n.ts._charts.federation }}
@ -46,26 +46,26 @@
{{ i18n.ts._charts.storageUsageIncDec }} {{ i18n.ts._charts.storageUsageIncDec }}
</option> </option>
</optgroup> </optgroup>
</MkSelect> </Select>
<MkSelect v-model="chartSpan" style="margin: 0 0 0 10px"> <Select v-model="chartSpan" style="margin: 0 0 0 10px">
<option value="hour">{{ i18n.ts.perHour }}</option> <option value="hour">{{ i18n.ts.perHour }}</option>
<option value="day">{{ i18n.ts.perDay }}</option> <option value="day">{{ i18n.ts.perDay }}</option>
</MkSelect> </Select>
</div> </div>
<div class="chart _panel"> <div class="chart _panel">
<MkChart <ChartComp
:src="chartSrc" :src="chartSrc"
:span="chartSpan" :span="chartSpan"
:limit="chartLimit" :limit="chartLimit"
:detailed="true" :detailed="true"
></MkChart> ></ChartComp>
</div> </div>
</div> </div>
</MkFolder> </Folder>
<MkFolder class="item"> <Folder class="item">
<template #header>Active users heatmap</template> <template #header>Active users heatmap</template>
<MkSelect v-model="heatmapSrc" style="margin: 0 0 12px 0"> <Select v-model="heatmapSrc" style="margin: 0 0 12px 0">
<option value="active-users">Active users</option> <option value="active-users">Active users</option>
<option value="notes">Posts</option> <option value="notes">Posts</option>
<option value="ap-requests-inbox-received"> <option value="ap-requests-inbox-received">
@ -77,13 +77,13 @@
<option value="ap-requests-deliver-failed"> <option value="ap-requests-deliver-failed">
Fediverse Requests: deliverFailed Fediverse Requests: deliverFailed
</option> </option>
</MkSelect> </Select>
<div class="_panel" :class="$style.heatmap"> <div class="_panel" :class="$style.heatmap">
<MkHeatmap :src="heatmapSrc" /> <Heatmap :src="heatmapSrc" />
</div> </div>
</MkFolder> </Folder>
<MkFolder class="item"> <Folder class="item">
<template #header>Federation</template> <template #header>Federation</template>
<div :class="$style.federation"> <div :class="$style.federation">
<div class="pies"> <div class="pies">
@ -97,20 +97,20 @@
</div> </div>
</div> </div>
</div> </div>
</MkFolder> </Folder>
</div> </div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { onMounted } from "vue"; import { onMounted } from "vue";
import { Chart } from "chart.js"; import { Chart } from "chart.js";
import MkSelect from "@/components/form/select.vue"; import Select from "@/components/form/Select.vue";
import MkChart from "@/components/MkChart.vue"; import ChartComp from "@/components/Chart.vue";
import { useChartTooltip } from "@/scripts/use-chart-tooltip"; import { useChartTooltip } from "@/scripts/use-chart-tooltip";
import * as os from "@/os"; import * as os from "@/os";
import { i18n } from "@/i18n"; import { i18n } from "@/i18n";
import MkHeatmap from "@/components/MkHeatmap.vue"; import Heatmap from "@/components/Heatmap.vue";
import MkFolder from "@/components/MkFolder.vue"; import Folder from "@/components/Folder.vue";
import { initChart } from "@/scripts/init-chart"; import { initChart } from "@/scripts/init-chart";
initChart(); initChart();

0
packages/client/src/components/MkInstanceTicker.vue → packages/client/src/components/InstanceTicker.vue
View File

0
packages/client/src/components/MkKeyValue.vue → packages/client/src/components/KeyValue.vue
View File

12
packages/client/src/components/MkLaunchPad.vue → packages/client/src/components/LaunchPad.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<MkModal <Modal
ref="modal" ref="modal"
v-slot="{ type, maxHeight }" v-slot="{ type, maxHeight }"
:prefer-type="preferedModalType" :prefer-type="preferedModalType"
@ -38,7 +38,7 @@
><i class="ph-circle ph-fill"></i ><i class="ph-circle ph-fill"></i
></span> ></span>
</button> </button>
<MkA <A
v-else v-else
v-click-anime v-click-anime
:to="item.to" :to="item.to"
@ -54,16 +54,16 @@
}" }"
><i class="ph-circle ph-fill"></i ><i class="ph-circle ph-fill"></i
></span> ></span>
</MkA> </A>
</template> </template>
</div> </div>
</div> </div>
</MkModal> </Modal>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import {} from "vue"; import {} from "vue";
import MkModal from "@/components/MkModal.vue"; import Modal from "@/components/Modal.vue";
import { navbarItemDef } from "@/navbar"; import { navbarItemDef } from "@/navbar";
import { instanceName } from "@/config"; import { instanceName } from "@/config";
import { defaultStore } from "@/store"; import { defaultStore } from "@/store";
@ -92,7 +92,7 @@ const preferedModalType =
? "drawer" ? "drawer"
: "dialog"; : "dialog";
const modal = $ref<InstanceType<typeof MkModal>>(); const modal = $ref<InstanceType<typeof Modal>>();
const menu = defaultStore.state.menu; const menu = defaultStore.state.menu;

6
packages/client/src/components/MkLink.vue → packages/client/src/components/Link.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<component <component
:is="self ? 'MkA' : 'a'" :is="self ? 'A' : 'a'"
ref="el" ref="el"
class="xlcxczvw _link" class="xlcxczvw _link"
:[attr]="self ? url.substr(local.length) : url" :[attr]="self ? url.substr(local.length) : url"
@ -39,9 +39,7 @@ const el = $ref();
useTooltip($$(el), (showing) => { useTooltip($$(el), (showing) => {
os.popup( os.popup(
defineAsyncComponent( defineAsyncComponent(() => import("@/components/UrlPreviewPopup.vue")),
() => import("@/components/MkUrlPreviewPopup.vue"),
),
{ {
showing, showing,
url: props.url, url: props.url,

14
packages/client/src/components/MkManyAnnouncements.vue → packages/client/src/components/ManyAnnouncements.vue
View File

@ -1,28 +1,28 @@
<template> <template>
<MkModal ref="modal" :z-priority="'middle'" @closed="$emit('closed')"> <Modal ref="modal" :z-priority="'middle'" @closed="$emit('closed')">
<div :class="$style.root"> <div :class="$style.root">
<p :class="$style.title"> <p :class="$style.title">
{{ i18n.ts.youHaveUnreadAnnouncements }} {{ i18n.ts.youHaveUnreadAnnouncements }}
</p> </p>
<MkButton <Button
:class="$style.gotIt" :class="$style.gotIt"
primary primary
full full
@click="checkAnnouncements()" @click="checkAnnouncements()"
>{{ i18n.ts.gotIt }}</MkButton >{{ i18n.ts.gotIt }}</Button
> >
</div> </div>
</MkModal> </Modal>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { shallowRef } from "vue"; import { shallowRef } from "vue";
import MkModal from "@/components/MkModal.vue"; import Modal from "@/components/Modal.vue";
import MkButton from "@/components/MkButton.vue"; import Button from "@/components/Button.vue";
import { i18n } from "@/i18n"; import { i18n } from "@/i18n";
import * as os from "@/os"; import * as os from "@/os";
const modal = shallowRef<InstanceType<typeof MkModal>>(); const modal = shallowRef<InstanceType<typeof Modal>>();
const checkAnnouncements = () => { const checkAnnouncements = () => {
modal.value.close(); modal.value.close();
location.href = "/announcements"; location.href = "/announcements";

0
packages/client/src/components/MkMarquee.vue → packages/client/src/components/Marquee.vue
View File

12
packages/client/src/components/MkMedia.vue → packages/client/src/components/Media.vue
View File

@ -92,7 +92,7 @@ import VuePlyr from "vue-plyr";
import "vue-plyr/dist/vue-plyr.css"; import "vue-plyr/dist/vue-plyr.css";
import type * as misskey from "iceshrimp-js"; import type * as misskey from "iceshrimp-js";
import { getStaticImageUrl } from "@/scripts/get-static-image-url"; import { getStaticImageUrl } from "@/scripts/get-static-image-url";
import ImgWithBlurhash from "@/components/MkImgWithBlurhash.vue"; import ImgWithBlurhash from "@/components/ImgWithBlurhash.vue";
import { defaultStore } from "@/store"; import { defaultStore } from "@/store";
import { i18n } from "@/i18n"; import { i18n } from "@/i18n";
import * as os from "@/os"; import * as os from "@/os";
@ -190,6 +190,7 @@ watch(
overflow: hidden; overflow: hidden;
top: 12px; top: 12px;
right: 12px; right: 12px;
> * { > * {
background-color: var(--accentedBg); background-color: var(--accentedBg);
-webkit-backdrop-filter: var(--blur, blur(15px)); -webkit-backdrop-filter: var(--blur, blur(15px));
@ -211,6 +212,7 @@ watch(
background-size: contain; background-size: contain;
background-repeat: no-repeat; background-repeat: no-repeat;
box-sizing: border-box; box-sizing: border-box;
&:focus-visible { &:focus-visible {
border: 2px solid var(--accent); border: 2px solid var(--accent);
} }
@ -230,16 +232,19 @@ watch(
pointer-events: none; pointer-events: none;
} }
} }
:deep(.plyr__controls) { :deep(.plyr__controls) {
contain: strict; contain: strict;
height: 24px; height: 24px;
box-sizing: content-box; box-sizing: content-box;
} }
:deep(.plyr__volume) { :deep(.plyr__volume) {
display: flex; display: flex;
min-width: max-content; min-width: max-content;
width: 110px; width: 110px;
transition: width 0.2s cubic-bezier(0, 0, 0, 1); transition: width 0.2s cubic-bezier(0, 0, 0, 1);
[data-plyr="volume"] { [data-plyr="volume"] {
width: 0; width: 0;
flex-grow: 1; flex-grow: 1;
@ -247,9 +252,11 @@ watch(
margin 0.3s, margin 0.3s,
opacity 0.2s 0.2s; opacity 0.2s 0.2s;
} }
&:not(:hover):not(:focus-within) { &:not(:hover):not(:focus-within) {
width: 0px; width: 0px;
transition: width 0.2s; transition: width 0.2s;
[data-plyr="volume"] { [data-plyr="volume"] {
margin-inline: 0px; margin-inline: 0px;
opacity: 0; opacity: 0;
@ -259,9 +266,11 @@ watch(
} }
} }
} }
&.max-width_350px { &.max-width_350px {
:deep(.plyr:not(:fullscreen)) { :deep(.plyr:not(:fullscreen)) {
min-width: unset !important; min-width: unset !important;
.plyr__control--overlaid, .plyr__control--overlaid,
.plyr__progress__container, .plyr__progress__container,
.plyr__volume, .plyr__volume,
@ -269,6 +278,7 @@ watch(
display: none; display: none;
} }
} }
:deep(.plyr__time) { :deep(.plyr__time) {
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;

0
packages/client/src/components/MkMediaBanner.vue → packages/client/src/components/MediaBanner.vue
View File

29
packages/client/src/components/MkMediaCaption.vue → packages/client/src/components/MediaCaption.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<MkModal ref="modal" @click="done(true)" @closed="$emit('closed')"> <Modal ref="modal" @click="done(true)" @closed="$emit('closed')">
<div class="container"> <div class="container">
<div class="fullwidth top-caption"> <div class="fullwidth top-caption">
<div class="mk-dialog"> <div class="mk-dialog">
@ -27,19 +27,19 @@
" "
class="buttons" class="buttons"
> >
<MkButton <Button
inline inline
primary primary
:disabled="remainingLength < 0" :disabled="remainingLength < 0"
@click="ok" @click="ok"
>{{ i18n.ts.ok }}</MkButton >{{ i18n.ts.ok }}</Button
> >
<MkButton inline @click="caption">{{ <Button inline @click="caption">{{
i18n.ts.caption i18n.ts.caption
}}</MkButton> }}</Button>
<MkButton inline @click="cancel">{{ <Button inline @click="cancel">{{
i18n.ts.cancel i18n.ts.cancel
}}</MkButton> }}</Button>
</div> </div>
</div> </div>
</div> </div>
@ -62,7 +62,7 @@
</footer> </footer>
</div> </div>
</div> </div>
</MkModal> </Modal>
</template> </template>
<script lang="ts"> <script lang="ts">
@ -70,8 +70,8 @@ import { defineComponent } from "vue";
import insertTextAtCursor from "insert-text-at-cursor"; import insertTextAtCursor from "insert-text-at-cursor";
import { length } from "stringz"; import { length } from "stringz";
import * as os from "@/os"; import * as os from "@/os";
import MkModal from "@/components/MkModal.vue"; import Modal from "@/components/Modal.vue";
import MkButton from "@/components/MkButton.vue"; import Button from "@/components/Button.vue";
import bytes from "@/filters/bytes"; import bytes from "@/filters/bytes";
import number from "@/filters/number"; import number from "@/filters/number";
import { i18n } from "@/i18n"; import { i18n } from "@/i18n";
@ -79,8 +79,8 @@ import { instance } from "@/instance";
export default defineComponent({ export default defineComponent({
components: { components: {
MkModal, Modal,
MkButton, Button,
}, },
props: { props: {
@ -210,18 +210,22 @@ export default defineComponent({
left: 0; left: 0;
top: 0; top: 0;
} }
@media (max-width: 850px) { @media (max-width: 850px) {
.container { .container {
flex-direction: column; flex-direction: column;
} }
.top-caption { .top-caption {
padding-bottom: 8px; padding-bottom: 8px;
} }
} }
.fullwidth { .fullwidth {
width: 100%; width: 100%;
margin: auto; margin: auto;
} }
.mk-dialog { .mk-dialog {
position: relative; position: relative;
padding: 32px; padding: 32px;
@ -282,6 +286,7 @@ export default defineComponent({
} }
} }
} }
.hdrwpsaf { .hdrwpsaf {
display: flex; display: flex;
flex-direction: column; flex-direction: column;

6
packages/client/src/components/MkMediaList.vue → packages/client/src/components/MediaList.vue
View File

@ -33,8 +33,8 @@ import * as misskey from "iceshrimp-js";
import PhotoSwipeLightbox from "photoswipe/lightbox"; import PhotoSwipeLightbox from "photoswipe/lightbox";
import PhotoSwipe from "photoswipe"; import PhotoSwipe from "photoswipe";
import "photoswipe/style.css"; import "photoswipe/style.css";
import XBanner from "@/components/MkMediaBanner.vue"; import XBanner from "@/components/MediaBanner.vue";
import XMedia from "@/components/MkMedia.vue"; import XMedia from "@/components/Media.vue";
import * as os from "@/os"; import * as os from "@/os";
import { FILE_TYPE_BROWSERSAFE } from "@/const"; import { FILE_TYPE_BROWSERSAFE } from "@/const";
import { defaultStore } from "@/store"; import { defaultStore } from "@/store";
@ -198,6 +198,7 @@ const previewableCount = props.mediaList.filter((media) =>
&[data-count] { &[data-count] {
padding-top: 56.25%; // 16:9; padding-top: 56.25%; // 16:9;
> div { > div {
position: absolute; position: absolute;
inset: 0; inset: 0;
@ -278,6 +279,7 @@ const previewableCount = props.mediaList.filter((media) =>
//z-index: v-bind(pswpZIndex); //z-index: v-bind(pswpZIndex);
z-index: 2000000; z-index: 2000000;
} }
.pwsp__alt-text-container { .pwsp__alt-text-container {
display: flex; display: flex;
flex-direction: row; flex-direction: row;

4
packages/client/src/components/MkMention.vue → packages/client/src/components/Mention.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<MkA <A
v-if="url.startsWith('/')" v-if="url.startsWith('/')"
v-user-preview="canonical" v-user-preview="canonical"
class="mention" class="mention"
@ -16,7 +16,7 @@
>@{{ toUnicode(host) }}</span >@{{ toUnicode(host) }}</span
> >
</span> </span>
</MkA> </A>
<a <a
v-else v-else
class="mention" class="mention"

30
packages/client/src/components/MkMenu.vue → packages/client/src/components/Menu.vue
View File

@ -28,9 +28,11 @@
v-else-if="item.type === 'pending'" v-else-if="item.type === 'pending'"
class="pending item" class="pending item"
> >
<span><MkEllipsis /></span> <span>
<Ellipsis />
</span> </span>
<MkA </span>
<A
v-else-if="item.type === 'link'" v-else-if="item.type === 'link'"
:to="item.to" :to="item.to"
class="_button item" class="_button item"
@ -43,7 +45,7 @@
class="ph-fw ph-lg" class="ph-fw ph-lg"
:class="item.icon" :class="item.icon"
></i> ></i>
<MkAvatar <Avatar
v-if="item.avatar" v-if="item.avatar"
:user="item.avatar" :user="item.avatar"
class="avatar" class="avatar"
@ -60,7 +62,7 @@
}" }"
><i class="ph-circle ph-fill"></i ><i class="ph-circle ph-fill"></i
></span> ></span>
</MkA> </A>
<a <a
v-else-if="item.type === 'a'" v-else-if="item.type === 'a'"
:href="item.href" :href="item.href"
@ -97,11 +99,8 @@
@mouseenter.passive="onItemMouseEnter(item)" @mouseenter.passive="onItemMouseEnter(item)"
@mouseleave.passive="onItemMouseLeave(item)" @mouseleave.passive="onItemMouseLeave(item)"
> >
<MkAvatar <Avatar :user="item.user" class="avatar" disableLink />
:user="item.user" <UserName :user="item.user" />
class="avatar"
disableLink
/><MkUserName :user="item.user" />
<span <span
v-if="item.indicate" v-if="item.indicate"
class="indicator" class="indicator"
@ -142,10 +141,8 @@
}}</span> }}</span>
<i <i
class="ph-caret-right ph-bold ph-lg ph-fw ph-lg" class="ph-caret-right ph-bold ph-lg ph-fw ph-lg"
style="margin-left: auto; style="margin-left: auto; margin-right: unset"
margin-right: unset;" ></i>
></i
>
</button> </button>
<button <button
v-else-if="!item.hidden" v-else-if="!item.hidden"
@ -165,7 +162,7 @@
class="ph-fw ph-lg" class="ph-fw ph-lg"
:class="item.icon" :class="item.icon"
></i> ></i>
<MkAvatar <Avatar
v-if="item.avatar" v-if="item.avatar"
:user="item.avatar" :user="item.avatar"
class="avatar" class="avatar"
@ -217,13 +214,13 @@ import {
watch, watch,
} from "vue"; } from "vue";
import { focusPrev, focusNext } from "@/scripts/focus"; import { focusPrev, focusNext } from "@/scripts/focus";
import FormSwitch from "@/components/form/switch.vue"; import FormSwitch from "@/components/form/Switch.vue";
import { MenuItem, InnerMenuItem, MenuPending, MenuAction } from "@/types/menu"; import { MenuItem, InnerMenuItem, MenuPending, MenuAction } from "@/types/menu";
import * as os from "@/os"; import * as os from "@/os";
import { i18n } from "@/i18n"; import { i18n } from "@/i18n";
import { FocusTrap } from "focus-trap-vue"; import { FocusTrap } from "focus-trap-vue";
const XChild = defineAsyncComponent(() => import("./MkMenu.child.vue")); const XChild = defineAsyncComponent(() => import("./MenuChild.vue"));
const focusTrap = ref(); const focusTrap = ref();
const props = defineProps<{ const props = defineProps<{
@ -392,6 +389,7 @@ onBeforeUnmount(() => {
background: var(--accentedBg); background: var(--accentedBg);
} }
} }
&:focus-visible:before { &:focus-visible:before {
outline: auto; outline: auto;
} }

4
packages/client/src/components/MkMenu.child.vue → packages/client/src/components/MenuChild.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<div ref="el" class="sfhdhdhr" tabindex="-1"> <div ref="el" class="sfhdhdhr" tabindex="-1">
<MkMenu <Menu
ref="menu" ref="menu"
:items="items" :items="items"
:align="align" :align="align"
@ -21,7 +21,7 @@ import {
ref, ref,
watch, watch,
} from "vue"; } from "vue";
import MkMenu from "./MkMenu.vue"; import Menu from "./Menu.vue";
import { MenuItem } from "@/types/menu"; import { MenuItem } from "@/types/menu";
const props = defineProps<{ const props = defineProps<{

0
packages/client/src/components/MkMiniChart.vue → packages/client/src/components/MiniChart.vue
View File

0
packages/client/src/components/MkModal.vue → packages/client/src/components/Modal.vue
View File

19
packages/client/src/components/MkModalPageWindow.vue → packages/client/src/components/ModalPageWindow.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<MkModal ref="modal" @click="$emit('click')" @closed="$emit('closed')"> <Modal ref="modal" @click="$emit('click')" @closed="$emit('closed')">
<div <div
ref="rootEl" ref="rootEl"
class="hrmcaedk _narrow_" class="hrmcaedk _narrow_"
@ -35,25 +35,26 @@
</button> </button>
</div> </div>
<div class="body"> <div class="body">
<MkStickyContainer> <StickyContainer>
<template #header <template #header>
><MkPageHeader <PageHeader
v-if=" v-if="
pageMetadata?.value && pageMetadata?.value &&
!pageMetadata?.value.hideHeader !pageMetadata?.value.hideHeader
" "
:info="pageMetadata?.value" :info="pageMetadata?.value"
/></template> />
</template>
<RouterView :router="router" /> <RouterView :router="router" />
</MkStickyContainer> </StickyContainer>
</div> </div>
</div> </div>
</MkModal> </Modal>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { ComputedRef, provide } from "vue"; import { ComputedRef, provide } from "vue";
import MkModal from "@/components/MkModal.vue"; import Modal from "@/components/Modal.vue";
import { popout as _popout } from "@/scripts/popout"; import { popout as _popout } from "@/scripts/popout";
import copyToClipboard from "@/scripts/copy-to-clipboard"; import copyToClipboard from "@/scripts/copy-to-clipboard";
import { url } from "@/config"; import { url } from "@/config";
@ -82,7 +83,7 @@ router.addListener("push", (ctx) => {});
let pageMetadata = $ref<null | ComputedRef<PageMetadata>>(); let pageMetadata = $ref<null | ComputedRef<PageMetadata>>();
let rootEl = $ref(); let rootEl = $ref();
let modal = $ref<InstanceType<typeof MkModal>>(); let modal = $ref<InstanceType<typeof Modal>>();
let path = $ref(props.initialPath); let path = $ref(props.initialPath);
let width = $ref(860); let width = $ref(860);
let height = $ref(660); let height = $ref(660);

8
packages/client/src/components/MkModalWindow.vue → packages/client/src/components/ModalWindow.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<MkModal <Modal
ref="modal" ref="modal"
:prefer-type="'dialog'" :prefer-type="'dialog'"
@click="onBgClick" @click="onBgClick"
@ -58,12 +58,12 @@
</div> </div>
</div> </div>
</FocusTrap> </FocusTrap>
</MkModal> </Modal>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { FocusTrap } from "focus-trap-vue"; import { FocusTrap } from "focus-trap-vue";
import MkModal from "./MkModal.vue"; import Modal from "./Modal.vue";
import { i18n } from "@/i18n"; import { i18n } from "@/i18n";
const props = withDefaults( const props = withDefaults(
@ -90,7 +90,7 @@ const emit = defineEmits<{
(event: "ok"): void; (event: "ok"): void;
}>(); }>();
let modal = $shallowRef<InstanceType<typeof MkModal>>(); let modal = $shallowRef<InstanceType<typeof Modal>>();
let rootEl = $shallowRef<HTMLElement>(); let rootEl = $shallowRef<HTMLElement>();
let headerEl = $shallowRef<HTMLElement>(); let headerEl = $shallowRef<HTMLElement>();

4
packages/client/src/components/MkMoved.vue → packages/client/src/components/Moved.vue
View File

@ -5,12 +5,12 @@
style="margin-right: 8px" style="margin-right: 8px"
/> />
{{ i18n.ts.accountMoved }} {{ i18n.ts.accountMoved }}
<MkMention class="link" :username="acct" :host="host" /> <Mention class="link" :username="acct" :host="host" />
</div> </div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import MkMention from "./MkMention.vue"; import Mention from "./Mention.vue";
import { i18n } from "@/i18n"; import { i18n } from "@/i18n";
defineProps<{ defineProps<{

106
packages/client/src/components/MkNote.vue → packages/client/src/components/Note.vue
View File

@ -11,7 +11,7 @@
:class="{ renote: isRenote }" :class="{ renote: isRenote }"
:id="appearNote.id" :id="appearNote.id"
> >
<MkNoteSub <NoteSub
v-if="appearNote.reply && !detailedView && !collapsedReply" v-if="appearNote.reply && !detailedView && !collapsedReply"
:note="appearNote.reply" :note="appearNote.reply"
:forceExpandCw="props.forceExpandCw" :forceExpandCw="props.forceExpandCw"
@ -46,14 +46,14 @@
<i class="ph-repeat ph-bold ph-lg"></i> <i class="ph-repeat ph-bold ph-lg"></i>
<I18n :src="i18n.ts.renotedBy" tag="span"> <I18n :src="i18n.ts.renotedBy" tag="span">
<template #user> <template #user>
<MkA <A
v-user-preview="note.userId" v-user-preview="note.userId"
class="name" class="name"
:to="userPage(note.user)" :to="userPage(note.user)"
@click.stop @click.stop
> >
<MkUserName :user="note.user" /> <UserName :user="note.user" />
</MkA> </A>
</template> </template>
</I18n> </I18n>
<div class="info"> <div class="info">
@ -66,17 +66,17 @@
v-if="isMyRenote" v-if="isMyRenote"
class="ph-dots-three-outline ph-bold ph-lg dropdownIcon" class="ph-dots-three-outline ph-bold ph-lg dropdownIcon"
></i> ></i>
<MkTime :time="note.createdAt" /> <Time :time="note.createdAt" />
</button> </button>
<MkVisibility :note="note" /> <Visibility :note="note" />
</div> </div>
</div> </div>
<div v-if="collapsedReply && appearNote.reply" class="info"> <div v-if="collapsedReply && appearNote.reply" class="info">
<MkAvatar class="avatar" :user="appearNote.reply.user" /> <Avatar class="avatar" :user="appearNote.reply.user" />
<MkUserName <UserName
class="username" class="username"
:user="appearNote.reply.user" :user="appearNote.reply.user"
></MkUserName> ></UserName>
<Mfm <Mfm
class="summary" class="summary"
:text="getNoteSummary(appearNote.reply)" :text="getNoteSummary(appearNote.reply)"
@ -96,11 +96,11 @@
> >
<div class="main"> <div class="main">
<div class="header-container"> <div class="header-container">
<MkAvatar class="avatar" :user="appearNote.user" /> <Avatar class="avatar" :user="appearNote.user" />
<XNoteHeader class="header" :note="appearNote" /> <XNoteHeader class="header" :note="appearNote" />
</div> </div>
<div class="body"> <div class="body">
<MkSubNoteContent <SubNoteContent
class="text" class="text"
:note="appearNote" :note="appearNote"
:detailed="true" :detailed="true"
@ -110,9 +110,9 @@
@push="(e) => router.push(notePage(e))" @push="(e) => router.push(notePage(e))"
@focusfooter="footerEl.focus()" @focusfooter="footerEl.focus()"
@expanded="(e) => setPostExpanded(e)" @expanded="(e) => setPostExpanded(e)"
></MkSubNoteContent> ></SubNoteContent>
<div v-if="translating || translation" class="translation"> <div v-if="translating || translation" class="translation">
<MkLoading v-if="translating" mini /> <Loading v-if="translating" mini />
<div v-else class="translated"> <div v-else class="translated">
<b <b
>{{ >{{
@ -134,20 +134,20 @@
v-if="detailedView || (appearNote.channel && !inChannel)" v-if="detailedView || (appearNote.channel && !inChannel)"
class="info" class="info"
> >
<MkA <A
v-if="detailedView" v-if="detailedView"
class="created-at" class="created-at"
:to="notePage(appearNote)" :to="notePage(appearNote)"
> >
<MkTime :time="appearNote.createdAt" mode="absolute" /> <Time :time="appearNote.createdAt" mode="absolute" />
</MkA> </A>
<MkA <A
v-if="appearNote.channel && !inChannel" v-if="appearNote.channel && !inChannel"
class="channel" class="channel"
:to="`/channels/${appearNote.channel.id}`" :to="`/channels/${appearNote.channel.id}`"
@click.stop @click.stop
><i class="ph-television ph-bold"></i> ><i class="ph-television ph-bold"></i>
{{ appearNote.channel.name }}</MkA {{ appearNote.channel.name }}</A
> >
</div> </div>
<footer ref="footerEl" class="footer" tabindex="-1"> <footer ref="footerEl" class="footer" tabindex="-1">
@ -241,13 +241,13 @@
> >
<I18n :src="softMuteReasonI18nSrc(muted.what)" tag="small"> <I18n :src="softMuteReasonI18nSrc(muted.what)" tag="small">
<template #name> <template #name>
<MkA <A
v-user-preview="note.userId" v-user-preview="note.userId"
class="name" class="name"
:to="userPage(note.user)" :to="userPage(note.user)"
> >
<MkUserName :user="note.user" /> <UserName :user="note.user" />
</MkA> </A>
</template> </template>
<template #reason> <template #reason>
<b class="_blur_text">{{ muted.matched.join(", ") }}</b> <b class="_blur_text">{{ muted.matched.join(", ") }}</b>
@ -261,20 +261,20 @@ import { computed, inject, onMounted, onUnmounted, reactive, ref } from "vue";
import * as mfm from "mfm-js"; import * as mfm from "mfm-js";
import type { Ref } from "vue"; import type { Ref } from "vue";
import type * as misskey from "iceshrimp-js"; import type * as misskey from "iceshrimp-js";
import MkNoteSub from "@/components/MkNoteSub.vue"; import NoteSub from "@/components/NoteSub.vue";
import MkSubNoteContent from "./MkSubNoteContent.vue"; import SubNoteContent from "./SubNoteContent.vue";
import XNoteHeader from "@/components/MkNoteHeader.vue"; import XNoteHeader from "@/components/NoteHeader.vue";
import XNoteSimple from "@/components/MkNoteSimple.vue"; import XNoteSimple from "@/components/NoteSimple.vue";
import XMediaList from "@/components/MkMediaList.vue"; import XMediaList from "@/components/MediaList.vue";
import XCwButton from "@/components/MkCwButton.vue"; import XCwButton from "@/components/CwButton.vue";
import XPoll from "@/components/MkPoll.vue"; import XPoll from "@/components/Poll.vue";
import XRenoteButton from "@/components/MkRenoteButton.vue"; import XRenoteButton from "@/components/RenoteButton.vue";
import XReactionsViewer from "@/components/MkReactionsViewer.vue"; import XReactionsViewer from "@/components/ReactionsViewer.vue";
import XStarButton from "@/components/MkStarButton.vue"; import XStarButton from "@/components/StarButton.vue";
import XStarButtonNoEmoji from "@/components/MkStarButtonNoEmoji.vue"; import XStarButtonNoEmoji from "@/components/StarButtonNoEmoji.vue";
import XQuoteButton from "@/components/MkQuoteButton.vue"; import XQuoteButton from "@/components/QuoteButton.vue";
import MkUrlPreview from "@/components/MkUrlPreview.vue"; import UrlPreview from "@/components/UrlPreview.vue";
import MkVisibility from "@/components/MkVisibility.vue"; import Visibility from "@/components/Visibility.vue";
import copyToClipboard from "@/scripts/copy-to-clipboard"; import copyToClipboard from "@/scripts/copy-to-clipboard";
import { url } from "@/config"; import { url } from "@/config";
import { pleaseLogin } from "@/scripts/please-login"; import { pleaseLogin } from "@/scripts/please-login";
@ -668,15 +668,18 @@ defineExpose({
padding: 0 32px 0 32px; padding: 0 32px 0 32px;
display: flex; display: flex;
z-index: 1; z-index: 1;
&:first-child { &:first-child {
margin-top: 20px; margin-top: 20px;
} }
> :not(.line) { > :not(.line) {
width: 0; width: 0;
flex-grow: 1; flex-grow: 1;
position: relative; position: relative;
line-height: 28px; line-height: 28px;
} }
> .line { > .line {
position: relative; position: relative;
z-index: 2; z-index: 2;
@ -691,6 +694,7 @@ defineExpose({
> div > i { > div > i {
margin-left: -0.5px; margin-left: -0.5px;
} }
> .info { > .info {
display: flex; display: flex;
align-items: center; align-items: center;
@ -740,6 +744,7 @@ defineExpose({
color: inherit; color: inherit;
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
> .dropdownIcon { > .dropdownIcon {
margin-right: 4px; margin-right: 4px;
} }
@ -750,6 +755,7 @@ defineExpose({
&.collapsedReply { &.collapsedReply {
.line { .line {
opacity: 0.25; opacity: 0.25;
&::after { &::after {
content: ""; content: "";
position: absolute; position: absolute;
@ -762,10 +768,12 @@ defineExpose({
height: calc(50% + 5px); height: calc(50% + 5px);
} }
} }
.info { .info {
color: var(--fgTransparentWeak); color: var(--fgTransparentWeak);
transition: color 0.2s; transition: color 0.2s;
} }
.avatar { .avatar {
width: 1.2em; width: 1.2em;
height: 1.2em; height: 1.2em;
@ -774,14 +782,17 @@ defineExpose({
margin-right: 0.4em; margin-right: 0.4em;
background: var(--panelHighlight); background: var(--panelHighlight);
} }
.username { .username {
font-weight: 700; font-weight: 700;
flex-shrink: 0; flex-shrink: 0;
max-width: 30%; max-width: 30%;
&::after { &::after {
content: ": "; content: ": ";
} }
} }
&:hover, &:hover,
&:focus-within { &:focus-within {
.info { .info {
@ -811,6 +822,7 @@ defineExpose({
display: flex; display: flex;
position: relative; position: relative;
z-index: 2; z-index: 2;
> .avatar { > .avatar {
flex-shrink: 0; flex-shrink: 0;
display: block; display: block;
@ -821,30 +833,36 @@ defineExpose({
top: 0; top: 0;
left: 0; left: 0;
} }
> .header { > .header {
width: 0; width: 0;
flex-grow: 1; flex-grow: 1;
} }
} }
> .main { > .main {
flex: 1; flex: 1;
min-width: 0; min-width: 0;
> .body { > .body {
margin-top: 0.7em; margin-top: 0.7em;
> .translation { > .translation {
border: solid 0.5px var(--divider); border: solid 0.5px var(--divider);
border-radius: var(--radius); border-radius: var(--radius);
padding: 12px; padding: 12px;
margin-top: 8px; margin-top: 8px;
} }
> .renote { > .renote {
padding-top: 8px; padding-top: 8px;
> * { > * {
padding: 16px; padding: 16px;
border: solid 1px var(--renote); border: solid 1px var(--renote);
border-radius: 8px; border-radius: 8px;
transition: background 0.2s; transition: background 0.2s;
&:hover, &:hover,
&:focus-within { &:focus-within {
background-color: var(--panelHighlight); background-color: var(--panelHighlight);
@ -852,6 +870,7 @@ defineExpose({
} }
} }
} }
> .info { > .info {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
@ -861,26 +880,31 @@ defineExpose({
opacity: 0.7; opacity: 0.7;
font-size: 0.9em; font-size: 0.9em;
} }
> .footer { > .footer {
position: relative; position: relative;
z-index: 2; z-index: 2;
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
margin-top: 0.4em; margin-top: 0.4em;
> :deep(.button) { > :deep(.button) {
position: relative; position: relative;
margin: 0; margin: 0;
padding: 8px; padding: 8px;
opacity: 0.7; opacity: 0.7;
&:disabled { &:disabled {
opacity: 0.5 !important; opacity: 0.5 !important;
} }
flex-grow: 1; flex-grow: 1;
max-width: 3.5em; max-width: 3.5em;
width: max-content; width: max-content;
min-width: max-content; min-width: max-content;
height: auto; height: auto;
transition: opacity 0.2s; transition: opacity 0.2s;
&::before { &::before {
content: ""; content: "";
position: absolute; position: absolute;
@ -890,17 +914,21 @@ defineExpose({
z-index: -1; z-index: -1;
transition: background 0.2s; transition: background 0.2s;
} }
&:first-of-type { &:first-of-type {
margin-left: -0.5em; margin-left: -0.5em;
&::before { &::before {
border-radius: 100px 0 0 100px; border-radius: 100px 0 0 100px;
} }
} }
&:last-of-type { &:last-of-type {
&::before { &::before {
border-radius: 0 100px 100px 0; border-radius: 0 100px 100px 0;
} }
} }
&:hover { &:hover {
color: var(--fgHighlighted); color: var(--fgHighlighted);
} }
@ -931,25 +959,32 @@ defineExpose({
font-size: 0.975em; font-size: 0.975em;
--avatarSize: 46px; --avatarSize: 46px;
padding-top: 6px; padding-top: 6px;
> .note-context { > .note-context {
padding-inline: 16px; padding-inline: 16px;
margin-top: 8px; margin-top: 8px;
> :not(.line) { > :not(.line) {
margin-top: 0px; margin-top: 0px;
} }
> .line { > .line {
margin-right: 10px; margin-right: 10px;
&::before { &::before {
margin-top: 8px; margin-top: 8px;
} }
} }
} }
> .article { > .article {
padding: 18px 16px 8px; padding: 18px 16px 8px;
&:first-child, &:first-child,
&:nth-child(2) { &:nth-child(2) {
padding-top: 104px; padding-top: 104px;
} }
> .main > .header-container > .avatar { > .main > .header-container > .avatar {
margin-right: 10px; margin-right: 10px;
// top: calc(14px + var(--stickyTop, 0px)); // top: calc(14px + var(--stickyTop, 0px));
@ -971,6 +1006,7 @@ defineExpose({
._blur_text { ._blur_text {
pointer-events: auto; pointer-events: auto;
} }
&:active ._blur_text { &:active ._blur_text {
filter: blur(0px); filter: blur(0px);
} }

99
packages/client/src/components/MkNoteDetailed.vue → packages/client/src/components/NoteDetailed.vue
View File

@ -9,7 +9,7 @@
:tabindex="!isDeleted ? '-1' : null" :tabindex="!isDeleted ? '-1' : null"
:class="{ renote: isRenote }" :class="{ renote: isRenote }"
> >
<MkNoteSub <NoteSub
v-if="conversation" v-if="conversation"
v-for="note in conversation" v-for="note in conversation"
:key="note.id" :key="note.id"
@ -18,8 +18,8 @@
:detailedView="true" :detailedView="true"
:forceExpandCw="props.expandAllCws" :forceExpandCw="props.expandAllCws"
/> />
<MkLoading v-else-if="note.reply" mini /> <Loading v-else-if="note.reply" mini />
<MkNoteSub <NoteSub
v-if="note.reply" v-if="note.reply"
:note="note.reply" :note="note.reply"
class="reply-to" class="reply-to"
@ -27,16 +27,16 @@
:forceExpandCw="props.expandAllCws" :forceExpandCw="props.expandAllCws"
/> />
<MkNote <Note
ref="noteEl" ref="noteEl"
@contextmenu.stop="onContextmenu" @contextmenu.stop="onContextmenu"
tabindex="-1" tabindex="-1"
:note="note" :note="note"
detailedView detailedView
:forceExpandCw="props.expandAllCws" :forceExpandCw="props.expandAllCws"
></MkNote> ></Note>
<MkTab v-model="tab" :style="'underline'" @update:modelValue="loadTab"> <Tab v-model="tab" :style="'underline'" @update:modelValue="loadTab">
<option value="replies"> <option value="replies">
<!-- <i class="ph-arrow-u-up-left ph-bold ph-lg"></i> --> <!-- <i class="ph-arrow-u-up-left ph-bold ph-lg"></i> -->
<span v-if="note.repliesCount > 0" class="count">{{ <span v-if="note.repliesCount > 0" class="count">{{
@ -64,9 +64,9 @@
<span class="count">{{ clips.length }}</span> <span class="count">{{ clips.length }}</span>
{{ i18n.ts.clips }} {{ i18n.ts.clips }}
</option> </option>
</MkTab> </Tab>
<MkNoteSub <NoteSub
v-if="directReplies && tab === 'replies'" v-if="directReplies && tab === 'replies'"
v-for="note in directReplies" v-for="note in directReplies"
:key="note.id" :key="note.id"
@ -77,9 +77,9 @@
:parentId="note.id" :parentId="note.id"
:forceExpandCw="props.expandAllCws" :forceExpandCw="props.expandAllCws"
/> />
<MkLoading v-else-if="tab === 'replies' && note.repliesCount > 0" /> <Loading v-else-if="tab === 'replies' && note.repliesCount > 0" />
<MkNoteSub <NoteSub
v-if="directQuotes && tab === 'quotes'" v-if="directQuotes && tab === 'quotes'"
v-for="note in directQuotes" v-for="note in directQuotes"
:key="note.id" :key="note.id"
@ -90,26 +90,26 @@
:parentId="note.id" :parentId="note.id"
:forceExpandCw="props.expandAllCws" :forceExpandCw="props.expandAllCws"
/> />
<MkLoading v-else-if="tab === 'quotes' && directQuotes.length > 0" /> <Loading v-else-if="tab === 'quotes' && directQuotes.length > 0" />
<!-- <MkPagination <!-- <Pagination
v-if="tab === 'renotes'" v-if="tab === 'renotes'"
v-slot="{ items }" v-slot="{ items }"
ref="pagingComponent" ref="pagingComponent"
:pagination="pagination" :pagination="pagination"
> --> > -->
<MkUserCardMini <UserCardMini
v-if="tab === 'renotes' && renotes" v-if="tab === 'renotes' && renotes"
v-for="item in renotes" v-for="item in renotes"
:key="item.user.id" :key="item.user.id"
:user="item.user" :user="item.user"
:with-chart="false" :with-chart="false"
/> />
<!-- </MkPagination> --> <!-- </Pagination> -->
<MkLoading v-else-if="tab === 'renotes' && note.renoteCount > 0" /> <Loading v-else-if="tab === 'renotes' && note.renoteCount > 0" />
<div v-if="tab === 'clips' && clips.length > 0" class="_content clips"> <div v-if="tab === 'clips' && clips.length > 0" class="_content clips">
<MkA <A
v-for="item in clips" v-for="item in clips"
:key="item.id" :key="item.id"
:to="`/clips/${item.id}`" :to="`/clips/${item.id}`"
@ -120,32 +120,32 @@
{{ item.description }} {{ item.description }}
</div> </div>
<div class="user"> <div class="user">
<MkAvatar <Avatar
:user="item.user" :user="item.user"
class="avatar" class="avatar"
:show-indicator="true" :show-indicator="true"
/> />
<MkUserName :user="item.user" :nowrap="false" /> <UserName :user="item.user" :nowrap="false" />
</div> </div>
</MkA> </A>
</div> </div>
<MkLoading v-else-if="tab === 'clips' && clips.length > 0" /> <Loading v-else-if="tab === 'clips' && clips.length > 0" />
<MkReactedUsers <ReactedUsers
v-if="tab === 'reactions' && reactionsCount > 0" v-if="tab === 'reactions' && reactionsCount > 0"
:note-id="note.id" :note-id="note.id"
></MkReactedUsers> ></ReactedUsers>
</div> </div>
<div v-else class="_panel muted" @click="muted.muted = false"> <div v-else class="_panel muted" @click="muted.muted = false">
<I18n :src="softMuteReasonI18nSrc(muted.what)" tag="small"> <I18n :src="softMuteReasonI18nSrc(muted.what)" tag="small">
<template #name> <template #name>
<MkA <A
v-user-preview="note.userId" v-user-preview="note.userId"
class="name" class="name"
:to="userPage(note.user)" :to="userPage(note.user)"
> >
<MkUserName :user="note.user" /> <UserName :user="note.user" />
</MkA> </A>
</template> </template>
<template #reason> <template #reason>
<b class="_blur_text">{{ muted.matched.join(", ") }}</b> <b class="_blur_text">{{ muted.matched.join(", ") }}</b>
@ -165,14 +165,14 @@ import {
ref, ref,
} from "vue"; } from "vue";
import * as misskey from "iceshrimp-js"; import * as misskey from "iceshrimp-js";
import MkTab from "@/components/MkTab.vue"; import Tab from "@/components/Tab.vue";
import MkNote from "@/components/MkNote.vue"; import Note from "@/components/Note.vue";
import MkNoteSub from "@/components/MkNoteSub.vue"; import NoteSub from "@/components/NoteSub.vue";
import XStarButton from "@/components/MkStarButton.vue"; import XStarButton from "@/components/StarButton.vue";
import XRenoteButton from "@/components/MkRenoteButton.vue"; import XRenoteButton from "@/components/RenoteButton.vue";
import MkPagination from "@/components/MkPagination.vue"; import Pagination from "@/components/Pagination.vue";
import MkUserCardMini from "@/components/MkUserCardMini.vue"; import UserCardMini from "@/components/UserCardMini.vue";
import MkReactedUsers from "@/components/MkReactedUsers.vue"; import ReactedUsers from "@/components/ReactedUsers.vue";
import { pleaseLogin } from "@/scripts/please-login"; import { pleaseLogin } from "@/scripts/please-login";
import { getWordSoftMute } from "@/scripts/check-word-mute"; import { getWordSoftMute } from "@/scripts/check-word-mute";
import { userPage } from "@/filters/user"; import { userPage } from "@/filters/user";
@ -386,7 +386,7 @@ os.api("notes/clips", {
// limit: 10, // limit: 10,
// }; // };
// const pagingComponent = $ref<InstanceType<typeof MkPagination>>(); // const pagingComponent = $ref<InstanceType<typeof Pagination>>();
renotes = null; renotes = null;
function loadTab() { function loadTab() {
@ -420,7 +420,10 @@ async function onNoteUpdated(noteData: NoteUpdatedEvent): Promise<void> {
if (id === note.id) { if (id === note.id) {
isDeleted.value = true; isDeleted.value = true;
} else { } else {
replies.value.splice(replies.value.findIndex(p => p.id == id), 1); replies.value.splice(
replies.value.findIndex((p) => p.id == id),
1,
);
} }
break; break;
} }
@ -491,14 +494,17 @@ onUnmounted(() => {
overflow: clip; overflow: clip;
outline: none; outline: none;
scroll-margin-top: calc(var(--stickyTop) + 20vh); scroll-margin-top: calc(var(--stickyTop) + 20vh);
&:not(:last-child) { &:not(:last-child) {
border-bottom: 1px solid var(--divider); border-bottom: 1px solid var(--divider);
margin-bottom: 4px; margin-bottom: 4px;
} }
.article { .article {
cursor: unset; cursor: unset;
padding-bottom: 0; padding-bottom: 0;
} }
&:first-child { &:first-child {
padding-top: 28px; padding-top: 28px;
} }
@ -507,16 +513,19 @@ onUnmounted(() => {
> :deep(.chips) { > :deep(.chips) {
padding-block: 6px 12px; padding-block: 6px 12px;
padding-left: 32px; padding-left: 32px;
&:last-child { &:last-child {
margin-bottom: 12px; margin-bottom: 12px;
} }
} }
> :deep(.user-card-mini), > :deep(.user-card-mini),
> :deep(.reacted-users > *) { > :deep(.reacted-users > *) {
padding-inline: 32px; padding-inline: 32px;
border-top: 1px solid var(--divider); border-top: 1px solid var(--divider);
border-radius: 0; border-radius: 0;
} }
> :deep(.reacted-users > div) { > :deep(.reacted-users > div) {
padding-block: 12px; padding-block: 12px;
} }
@ -532,6 +541,7 @@ onUnmounted(() => {
.reply-to, .reply-to,
:deep(.more) { :deep(.more) {
position: relative; position: relative;
&::before { &::before {
content: ""; content: "";
position: absolute; position: absolute;
@ -545,20 +555,25 @@ onUnmounted(() => {
background 0.2s; background 0.2s;
z-index: -1; z-index: -1;
} }
&.reply-to { &.reply-to {
&::before { &::before {
inset: 0px 8px; inset: 0px 8px;
} }
&:not(.max-width_500px)::before { &:not(.max-width_500px)::before {
bottom: 16px; bottom: 16px;
} }
&:first-of-type::before { &:first-of-type::before {
top: 12px; top: 12px;
} }
&.reply.max-width_500px:first-of-type::before { &.reply.max-width_500px:first-of-type::before {
top: 4px; top: 4px;
} }
} }
// &::after { // &::after {
// content: ""; // content: "";
// position: absolute; // position: absolute;
@ -572,14 +587,17 @@ onUnmounted(() => {
&.more::before { &.more::before {
inset: 0 !important; inset: 0 !important;
} }
&:hover, &:hover,
&:focus-within { &:focus-within {
--panel: var(--panelHighlight); --panel: var(--panelHighlight);
&::before { &::before {
opacity: 1; opacity: 1;
background: var(--panelHighlight) !important; background: var(--panelHighlight) !important;
} }
} }
// @media (pointer: coarse) { // @media (pointer: coarse) {
// &:has(.button:focus-within) { // &:has(.button:focus-within) {
// z-index: 2; // z-index: 2;
@ -591,23 +609,29 @@ onUnmounted(() => {
// } // }
// } // }
} }
:deep(.reply:target > .main), :deep(.reply:target > .main),
:deep(.reply-to:target) { :deep(.reply-to:target) {
z-index: 2; z-index: 2;
&::before { &::before {
outline: auto; outline: auto;
opacity: 1; opacity: 1;
background: none; background: none;
} }
} }
&.max-width_500px { &.max-width_500px {
font-size: 0.975em; font-size: 0.975em;
> .reply-to { > .reply-to {
&::before { &::before {
inset-inline: -24px; inset-inline: -24px;
} }
&:first-child { &:first-child {
padding-top: 14px; padding-top: 14px;
&::before { &::before {
top: -24px; top: -24px;
} }
@ -617,15 +641,18 @@ onUnmounted(() => {
> :deep(.note-container) { > :deep(.note-container) {
padding: 12px 0 0 0; padding: 12px 0 0 0;
font-size: 1.05rem; font-size: 1.05rem;
> .header > .body { > .header > .body {
padding-left: 10px; padding-left: 10px;
} }
} }
> .clips, > .clips,
> :deep(.user-card-mini), > :deep(.user-card-mini),
> :deep(.reacted-users > *) { > :deep(.reacted-users > *) {
padding-inline: 16px !important; padding-inline: 16px !important;
} }
> :deep(.underline) { > :deep(.underline) {
padding-left: 16px !important; padding-left: 16px !important;
} }
@ -646,6 +673,7 @@ onUnmounted(() => {
// want to redesign at some point // want to redesign at some point
padding: 24px 32px; padding: 24px 32px;
padding-top: 0; padding-top: 0;
> .item { > .item {
display: block; display: block;
padding: 16px; padding: 16px;
@ -653,6 +681,7 @@ onUnmounted(() => {
border: 1px solid var(--divider); border: 1px solid var(--divider);
margin-bottom: var(--margin); margin-bottom: var(--margin);
transition: background 0.2s; transition: background 0.2s;
&:hover, &:hover,
&:focus-within { &:focus-within {
background: var(--panelHighlight); background: var(--panelHighlight);

36
packages/client/src/components/MkNoteHeader.vue → packages/client/src/components/NoteHeader.vue
View File

@ -2,22 +2,24 @@
<header class="kkwtjztg"> <header class="kkwtjztg">
<div class="user-info"> <div class="user-info">
<div> <div>
<MkA <A
v-user-preview="note.user.id" v-user-preview="note.user.id"
class="name" class="name"
:to="userPage(note.user)" :to="userPage(note.user)"
@click.stop @click.stop
> >
<MkUserName :user="note.user" class="mkusername"> <UserName :user="note.user" class="mkusername">
<span v-if="note.user.isBot" class="is-bot">bot</span> <span v-if="note.user.isBot" class="is-bot">bot</span>
</MkUserName> </UserName>
</MkA> </A>
<div class="username"><MkAcct :user="note.user" /></div> <div class="username">
<Acct :user="note.user" />
</div>
</div> </div>
<div> <div>
<div class="info"> <div class="info">
<MkA class="created-at" :to="notePage(note)"> <A class="created-at" :to="notePage(note)">
<MkTime :time="note.createdAt" /> <Time :time="note.createdAt" />
<i <i
v-if="note.updatedAt" v-if="note.updatedAt"
v-tooltip.noDelay=" v-tooltip.noDelay="
@ -33,10 +35,10 @@
class="ph-pencil ph-bold" class="ph-pencil ph-bold"
style="margin-left: 0.4rem" style="margin-left: 0.4rem"
></i> ></i>
</MkA> </A>
<MkVisibility :note="note" /> <Visibility :note="note" />
</div> </div>
<MkInstanceTicker <InstanceTicker
v-if="showTicker" v-if="showTicker"
class="ticker" class="ticker"
:instance="note.user.instance" :instance="note.user.instance"
@ -50,8 +52,8 @@
import {} from "vue"; import {} from "vue";
import type * as misskey from "iceshrimp-js"; import type * as misskey from "iceshrimp-js";
import { defaultStore, noteViewInterruptors } from "@/store"; import { defaultStore, noteViewInterruptors } from "@/store";
import MkVisibility from "@/components/MkVisibility.vue"; import Visibility from "@/components/Visibility.vue";
import MkInstanceTicker from "@/components/MkInstanceTicker.vue"; import InstanceTicker from "@/components/InstanceTicker.vue";
import { notePage } from "@/filters/note"; import { notePage } from "@/filters/note";
import { userPage } from "@/filters/user"; import { userPage } from "@/filters/user";
import { i18n } from "@/i18n"; import { i18n } from "@/i18n";
@ -78,17 +80,20 @@ const showTicker =
justify-self: flex-end; justify-self: flex-end;
border-radius: 100px; border-radius: 100px;
font-size: 0.8em; font-size: 0.8em;
> .avatar { > .avatar {
width: 3.7em; width: 3.7em;
height: 3.7em; height: 3.7em;
margin-right: 1em; margin-right: 1em;
} }
> .user-info { > .user-info {
width: 0; width: 0;
flex-grow: 1; flex-grow: 1;
line-height: 1.5; line-height: 1.5;
display: flex; display: flex;
font-size: 1.2em; font-size: 1.2em;
> div { > div {
&:first-child { &:first-child {
flex-grow: 1; flex-grow: 1;
@ -97,22 +102,27 @@ const showTicker =
text-overflow: ellipsis; text-overflow: ellipsis;
gap: 0.1em 0; gap: 0.1em 0;
} }
&:last-child { &:last-child {
max-width: 50%; max-width: 50%;
gap: 0.3em 0.5em; gap: 0.3em 0.5em;
} }
.article > .main & { .article > .main & {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: flex-start; align-items: flex-start;
&:last-child { &:last-child {
align-items: flex-end; align-items: flex-end;
} }
> * { > * {
max-width: 100%; max-width: 100%;
} }
} }
} }
.name { .name {
// flex: 1 1 0px; // flex: 1 1 0px;
display: inline; display: inline;
@ -152,6 +162,7 @@ const showTicker =
flex-shrink: 0; flex-shrink: 0;
margin-left: 0.5em; margin-left: 0.5em;
font-size: 0.9em; font-size: 0.9em;
.created-at { .created-at {
max-width: 100%; max-width: 100%;
overflow: hidden; overflow: hidden;
@ -163,6 +174,7 @@ const showTicker =
display: inline-flex; display: inline-flex;
margin-left: 0.5em; margin-left: 0.5em;
vertical-align: middle; vertical-align: middle;
> .name { > .name {
display: none; display: none;
} }

4
packages/client/src/components/MkNotePreview.vue → packages/client/src/components/NotePreview.vue
View File

@ -1,9 +1,9 @@
<template> <template>
<div v-size="{ min: [350, 500] }" class="fefdfafb"> <div v-size="{ min: [350, 500] }" class="fefdfafb">
<MkAvatar class="avatar" :user="$i" disableLink /> <Avatar class="avatar" :user="$i" disableLink />
<div class="main"> <div class="main">
<div class="header"> <div class="header">
<MkUserName :user="$i" /> <UserName :user="$i" />
</div> </div>
<div class="body"> <div class="body">
<div class="content"> <div class="content">

8
packages/client/src/components/MkNoteSimple.vue → packages/client/src/components/NoteSimple.vue
View File

@ -1,10 +1,10 @@
<template> <template>
<div v-size="{ min: [350, 500] }" class="yohlumlk"> <div v-size="{ min: [350, 500] }" class="yohlumlk">
<MkAvatar class="avatar" :user="note.user" /> <Avatar class="avatar" :user="note.user" />
<div class="main"> <div class="main">
<XNoteHeader class="header" :note="note" :mini="true" /> <XNoteHeader class="header" :note="note" :mini="true" />
<div class="body"> <div class="body">
<MkSubNoteContent class="text" :note="note" /> <SubNoteContent class="text" :note="note" />
</div> </div>
</div> </div>
</div> </div>
@ -13,8 +13,8 @@
<script lang="ts" setup> <script lang="ts" setup>
import {} from "vue"; import {} from "vue";
import * as misskey from "iceshrimp-js"; import * as misskey from "iceshrimp-js";
import XNoteHeader from "@/components/MkNoteHeader.vue"; import XNoteHeader from "@/components/NoteHeader.vue";
import MkSubNoteContent from "@/components/MkSubNoteContent.vue"; import SubNoteContent from "@/components/SubNoteContent.vue";
const props = defineProps<{ const props = defineProps<{
note: misskey.entities.Note; note: misskey.entities.Note;

91
packages/client/src/components/MkNoteSub.vue → packages/client/src/components/NoteSub.vue
View File

@ -20,7 +20,7 @@
:style="{ cursor: expandOnNoteClick ? 'pointer' : '' }" :style="{ cursor: expandOnNoteClick ? 'pointer' : '' }"
> >
<div class="avatar-container"> <div class="avatar-container">
<MkAvatar class="avatar" :user="appearNote.user" /> <Avatar class="avatar" :user="appearNote.user" />
<div <div
v-if="!conversation || replies.length > 0" v-if="!conversation || replies.length > 0"
class="line" class="line"
@ -29,7 +29,7 @@
<div class="body"> <div class="body">
<XNoteHeader class="header" :note="note" :mini="true" /> <XNoteHeader class="header" :note="note" :mini="true" />
<div class="body"> <div class="body">
<MkSubNoteContent <SubNoteContent
class="text" class="text"
:note="note" :note="note"
:parentId="parentId" :parentId="parentId"
@ -39,7 +39,7 @@
@focusfooter="footerEl.focus()" @focusfooter="footerEl.focus()"
/> />
<div v-if="translating || translation" class="translation"> <div v-if="translating || translation" class="translation">
<MkLoading v-if="translating" mini /> <Loading v-if="translating" mini />
<div v-else class="translated"> <div v-else class="translated">
<b <b
>{{ >{{
@ -137,7 +137,7 @@
</div> </div>
</div> </div>
<template v-if="conversation"> <template v-if="conversation">
<MkNoteSub <NoteSub
v-if="replyLevel < 11 && depth < 5" v-if="replyLevel < 11 && depth < 5"
v-for="reply in replies" v-for="reply in replies"
:key="reply.id" :key="reply.id"
@ -153,23 +153,23 @@
/> />
<div v-else-if="replies.length > 0" class="more"> <div v-else-if="replies.length > 0" class="more">
<div class="line"></div> <div class="line"></div>
<MkA class="text _link" :to="notePage(note)" <A class="text _link" :to="notePage(note)"
>{{ i18n.ts.continueThread }} >{{ i18n.ts.continueThread }}
<i class="ph-caret-double-right ph-bold ph-lg"></i <i class="ph-caret-double-right ph-bold ph-lg"></i
></MkA> ></A>
</div> </div>
</template> </template>
</article> </article>
<div v-else class="muted" @click="muted.muted = false"> <div v-else class="muted" @click="muted.muted = false">
<I18n :src="softMuteReasonI18nSrc(muted.what)" tag="small"> <I18n :src="softMuteReasonI18nSrc(muted.what)" tag="small">
<template #name> <template #name>
<MkA <A
v-user-preview="note.userId" v-user-preview="note.userId"
class="name" class="name"
:to="userPage(note.user)" :to="userPage(note.user)"
> >
<MkUserName :user="note.user" /> <UserName :user="note.user" />
</MkA> </A>
</template> </template>
<template #reason> <template #reason>
<b class="_blur_text">{{ muted.matched.join(", ") }}</b> <b class="_blur_text">{{ muted.matched.join(", ") }}</b>
@ -182,13 +182,13 @@
import { inject, ref } from "vue"; import { inject, ref } from "vue";
import type { Ref } from "vue"; import type { Ref } from "vue";
import * as misskey from "iceshrimp-js"; import * as misskey from "iceshrimp-js";
import XNoteHeader from "@/components/MkNoteHeader.vue"; import XNoteHeader from "@/components/NoteHeader.vue";
import MkSubNoteContent from "@/components/MkSubNoteContent.vue"; import SubNoteContent from "@/components/SubNoteContent.vue";
import XReactionsViewer from "@/components/MkReactionsViewer.vue"; import XReactionsViewer from "@/components/ReactionsViewer.vue";
import XStarButton from "@/components/MkStarButton.vue"; import XStarButton from "@/components/StarButton.vue";
import XStarButtonNoEmoji from "@/components/MkStarButtonNoEmoji.vue"; import XStarButtonNoEmoji from "@/components/StarButtonNoEmoji.vue";
import XRenoteButton from "@/components/MkRenoteButton.vue"; import XRenoteButton from "@/components/RenoteButton.vue";
import XQuoteButton from "@/components/MkQuoteButton.vue"; import XQuoteButton from "@/components/QuoteButton.vue";
import copyToClipboard from "@/scripts/copy-to-clipboard"; import copyToClipboard from "@/scripts/copy-to-clipboard";
import { url } from "@/config"; import { url } from "@/config";
import { pleaseLogin } from "@/scripts/please-login"; import { pleaseLogin } from "@/scripts/please-login";
@ -257,14 +257,16 @@ const isDeleted = ref(false);
const muted = ref(getWordSoftMute(note, $i, defaultStore.state.mutedWords)); const muted = ref(getWordSoftMute(note, $i, defaultStore.state.mutedWords));
const translation = ref(null); const translation = ref(null);
const translating = ref(false); const translating = ref(false);
const replies: misskey.entities.Note[] = const replies: misskey.entities.Note[] = $computed(
$computed(() => props.conversation () =>
props.conversation
?.filter( ?.filter(
(item) => (item) =>
item.replyId === props.note.id || item.replyId === props.note.id ||
item.renoteId === props.note.id, item.renoteId === props.note.id,
) )
.reverse() ?? []); .reverse() ?? [],
);
const enableEmojiReactions = defaultStore.state.enableEmojiReactions; const enableEmojiReactions = defaultStore.state.enableEmojiReactions;
const expandOnNoteClick = defaultStore.state.expandOnNoteClick; const expandOnNoteClick = defaultStore.state.expandOnNoteClick;
@ -418,6 +420,7 @@ function noteClick(e) {
.wrpstxzv { .wrpstxzv {
padding: 16px 32px; padding: 16px 32px;
outline: none; outline: none;
&.children { &.children {
padding: 10px 0 0 var(--indent); padding: 10px 0 0 var(--indent);
padding-left: var(--indent) !important; padding-left: var(--indent) !important;
@ -435,6 +438,7 @@ function noteClick(e) {
> .avatar-container { > .avatar-container {
margin-right: 8px; margin-right: 8px;
z-index: 2; z-index: 2;
> .avatar { > .avatar {
flex-shrink: 0; flex-shrink: 0;
display: block; display: block;
@ -451,6 +455,7 @@ function noteClick(e) {
margin: 0 -200px; margin: 0 -200px;
padding: 0 200px; padding: 0 200px;
overflow: clip; overflow: clip;
@media (pointer: coarse) { @media (pointer: coarse) {
cursor: default; cursor: default;
} }
@ -468,6 +473,7 @@ function noteClick(e) {
margin-top: 8px; margin-top: 8px;
} }
} }
> .footer { > .footer {
position: relative; position: relative;
z-index: 2; z-index: 2;
@ -479,15 +485,18 @@ function noteClick(e) {
margin: 0; margin: 0;
padding: 8px; padding: 8px;
opacity: 0.7; opacity: 0.7;
&:disabled { &:disabled {
opacity: 0.5 !important; opacity: 0.5 !important;
} }
flex-grow: 1; flex-grow: 1;
max-width: 3.5em; max-width: 3.5em;
width: max-content; width: max-content;
min-width: max-content; min-width: max-content;
height: auto; height: auto;
transition: opacity 0.2s; transition: opacity 0.2s;
&::before { &::before {
content: ""; content: "";
position: absolute; position: absolute;
@ -497,17 +506,21 @@ function noteClick(e) {
z-index: -1; z-index: -1;
transition: background 0.2s; transition: background 0.2s;
} }
&:first-of-type { &:first-of-type {
margin-left: -0.5em; margin-left: -0.5em;
&::before { &::before {
border-radius: 100px 0 0 100px; border-radius: 100px 0 0 100px;
} }
} }
&:last-of-type { &:last-of-type {
&::before { &::before {
border-radius: 0 100px 100px 0; border-radius: 0 100px 100px 0;
} }
} }
&:hover { &:hover {
color: var(--fgHighlighted); color: var(--fgHighlighted);
} }
@ -533,10 +546,12 @@ function noteClick(e) {
&.reply > .main { &.reply > .main {
margin-inline: -200px; margin-inline: -200px;
padding-inline: 200px; padding-inline: 200px;
&::before { &::before {
inset-inline: 176px !important; inset-inline: 176px !important;
} }
} }
&.reply, &.reply,
&.reply-to { &.reply-to {
> .main > .body { > .main > .body {
@ -549,6 +564,7 @@ function noteClick(e) {
border-radius: var(--radius); border-radius: var(--radius);
} }
} }
&.reply-to { &.reply-to {
> .main > .body { > .main > .body {
margin-left: calc(0px - var(--avatarSize) - 38px); margin-left: calc(0px - var(--avatarSize) - 38px);
@ -557,17 +573,22 @@ function noteClick(e) {
padding-top: 16px; padding-top: 16px;
} }
} }
&.reply { &.reply {
--avatarSize: 38px; --avatarSize: 38px;
.avatar-container { .avatar-container {
margin-right: 8px !important; margin-right: 8px !important;
} }
} }
> .reply, > .reply,
> .more { > .more {
margin-top: 10px; margin-top: 10px;
&.single { &.single {
padding: 0 !important; padding: 0 !important;
> .line { > .line {
display: none; display: none;
} }
@ -578,6 +599,7 @@ function noteClick(e) {
display: flex; display: flex;
padding-block: 10px; padding-block: 10px;
font-weight: 600; font-weight: 600;
> .line { > .line {
position: relative; position: relative;
z-index: 2; z-index: 2;
@ -585,22 +607,27 @@ function noteClick(e) {
margin-top: -10px !important; margin-top: -10px !important;
margin-bottom: 10px !important; margin-bottom: 10px !important;
margin-right: 10px !important; margin-right: 10px !important;
&::before { &::before {
border-left-style: dashed !important; border-left-style: dashed !important;
border-bottom-left-radius: 100px !important; border-bottom-left-radius: 100px !important;
} }
} }
i { i {
font-size: 1em !important; font-size: 1em !important;
vertical-align: middle !important; vertical-align: middle !important;
} }
a { a {
position: static; position: static;
&::before { &::before {
content: ""; content: "";
position: absolute; position: absolute;
inset: 0; inset: 0;
} }
&::after { &::after {
content: unset; content: unset;
} }
@ -621,9 +648,11 @@ function noteClick(e) {
&.reply-to, &.reply-to,
&.reply-to-more { &.reply-to-more {
padding-bottom: 0; padding-bottom: 0;
&:first-child { &:first-child {
padding-top: 24px; padding-top: 24px;
} }
.line::before { .line::before {
margin-bottom: -16px; margin-bottom: -16px;
} }
@ -634,6 +663,7 @@ function noteClick(e) {
&.reply-to, &.reply-to,
&.reply-to-more { &.reply-to-more {
--indent: calc(var(--avatarSize) - 5px); --indent: calc(var(--avatarSize) - 5px);
> .main { > .main {
> .avatar-container { > .avatar-container {
display: flex; display: flex;
@ -641,6 +671,7 @@ function noteClick(e) {
align-items: center; align-items: center;
margin-right: 14px; margin-right: 14px;
width: var(--avatarSize); width: var(--avatarSize);
> .avatar { > .avatar {
width: var(--avatarSize); width: var(--avatarSize);
height: var(--avatarSize); height: var(--avatarSize);
@ -648,6 +679,7 @@ function noteClick(e) {
} }
} }
} }
.line { .line {
position: relative; position: relative;
z-index: 2; z-index: 2;
@ -657,6 +689,7 @@ function noteClick(e) {
margin-bottom: -10px; margin-bottom: -10px;
pointer-events: none; pointer-events: none;
opacity: 0.25; opacity: 0.25;
&::before { &::before {
content: ""; content: "";
position: absolute; position: absolute;
@ -668,21 +701,25 @@ function noteClick(e) {
} }
} }
} }
&.reply-to, &.reply-to,
&.reply-to-more { &.reply-to-more {
> .main > .avatar-container > .line { > .main > .avatar-container > .line {
margin-bottom: 0px !important; margin-bottom: 0px !important;
} }
} }
&.single, &.single,
&.singleStart { &.singleStart {
> .main > .avatar-container > .line { > .main > .avatar-container > .line {
margin-bottom: -10px !important; margin-bottom: -10px !important;
} }
} }
.reply.children:not(:last-child) { .reply.children:not(:last-child) {
// Line that goes through multiple replies // Line that goes through multiple replies
position: relative; position: relative;
> .line { > .line {
position: absolute; position: absolute;
top: 0; top: 0;
@ -690,15 +727,18 @@ function noteClick(e) {
bottom: 0; bottom: 0;
} }
} }
// Reply line connectors // Reply line connectors
.reply.children:not(.single) { .reply.children:not(.single) {
position: relative; position: relative;
> .line { > .line {
position: absolute; position: absolute;
z-index: 2; z-index: 2;
left: 0; left: 0;
top: 0; top: 0;
opacity: 0.25; opacity: 0.25;
&::after { &::after {
content: ""; content: "";
position: absolute; position: absolute;
@ -711,17 +751,21 @@ function noteClick(e) {
top: 8px; top: 8px;
} }
} }
&:not(:last-child) > .line::after { &:not(:last-child) > .line::after {
mask: linear-gradient(to right, transparent 2px, black 2px); mask: linear-gradient(to right, transparent 2px, black 2px);
-webkit-mask: linear-gradient(to right, transparent 2px, black 2px); -webkit-mask: linear-gradient(to right, transparent 2px, black 2px);
} }
} }
// End Reply Divider // End Reply Divider
.children > .main:last-child { .children > .main:last-child {
padding-bottom: 1em; padding-bottom: 1em;
&::before { &::before {
bottom: 1em; bottom: 1em;
} }
// &::after { // &::after {
// content: ""; // content: "";
// border-top: 1px solid var(--dividerHovered); // border-top: 1px solid var(--dividerHovered);
@ -731,22 +775,27 @@ function noteClick(e) {
// inset-inline: 0; // inset-inline: 0;
// } // }
} }
&.firstColumn > .children:last-child > .main { &.firstColumn > .children:last-child > .main {
padding-bottom: 0 !important; padding-bottom: 0 !important;
&::before { &::before {
bottom: 0 !important; bottom: 0 !important;
} }
// &::after { content: unset } // &::after { content: unset }
} }
&.max-width_500px { &.max-width_500px {
padding: 14px 16px; padding: 14px 16px;
:not(.reply) > & { :not(.reply) > & {
.reply { .reply {
--avatarSize: 24px; --avatarSize: 24px;
--indent: calc(var(--avatarSize) - 4px); --indent: calc(var(--avatarSize) - 4px);
} }
} }
&.firstColumn { &.firstColumn {
> .main, > .main,
> .line, > .line,
@ -754,10 +803,12 @@ function noteClick(e) {
--avatarSize: 35px; --avatarSize: 35px;
--indent: 35px; --indent: 35px;
} }
> .children:not(.single) { > .children:not(.single) {
padding-left: 28px !important; padding-left: 28px !important;
} }
} }
&.reply-to { &.reply-to {
--avatarSize: 46px; --avatarSize: 46px;
padding: 14px 16px; padding: 14px 16px;
@ -765,9 +816,11 @@ function noteClick(e) {
padding-bottom: 0 !important; padding-bottom: 0 !important;
margin-bottom: 0 !important; margin-bottom: 0 !important;
} }
> .main > .avatar-container { > .main > .avatar-container {
margin-right: 10px; margin-right: 10px;
} }
&:first-child > .main > .body { &:first-child > .main > .body {
margin-top: -20px; margin-top: -20px;
padding-top: 22px; padding-top: 22px;

21
packages/client/src/components/MkNotes.vue → packages/client/src/components/Notes.vue
View File

@ -1,12 +1,8 @@
<template> <template>
<MkPagination ref="pagingComponent" :pagination="pagination"> <Pagination ref="pagingComponent" :pagination="pagination">
<template #empty> <template #empty>
<div class="_fullinfo"> <div class="_fullinfo">
<img <img :src="instance.images.info" class="_ghost" alt="Info" />
:src="instance.images.info"
class="_ghost"
alt="Info"
/>
<div>{{ i18n.ts.noNotes }}</div> <div>{{ i18n.ts.noNotes }}</div>
</div> </div>
</template> </template>
@ -30,15 +26,15 @@
</XList> </XList>
</div> </div>
</template> </template>
</MkPagination> </Pagination>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { ref } from "vue"; import { ref } from "vue";
import type { Paging } from "@/components/MkPagination.vue"; import type { Paging } from "@/components/Pagination.vue";
import XNote from "@/components/MkNote.vue"; import XNote from "@/components/Note.vue";
import XList from "@/components/MkDateSeparatedList.vue"; import XList from "@/components/DateSeparatedList.vue";
import MkPagination from "@/components/MkPagination.vue"; import Pagination from "@/components/Pagination.vue";
import { i18n } from "@/i18n"; import { i18n } from "@/i18n";
import { scroll } from "@/scripts/scroll"; import { scroll } from "@/scripts/scroll";
import { instance } from "@/instance"; import { instance } from "@/instance";
@ -50,7 +46,7 @@ const props = defineProps<{
noGap?: boolean; noGap?: boolean;
}>(); }>();
const pagingComponent = ref<InstanceType<typeof MkPagination>>(); const pagingComponent = ref<InstanceType<typeof Pagination>>();
function scrollTop() { function scrollTop() {
scroll(tlEl.value, { top: 0, behavior: "smooth" }); scroll(tlEl.value, { top: 0, behavior: "smooth" });
@ -70,6 +66,7 @@ defineExpose({
border-radius: var(--radius); border-radius: var(--radius);
} }
} }
&:not(.noGap) { &:not(.noGap) {
> .notes { > .notes {
.qtqtichx { .qtqtichx {

64
packages/client/src/components/MkNotification.vue → packages/client/src/components/Notification.vue
View File

@ -6,12 +6,12 @@
:class="notification.type" :class="notification.type"
> >
<div class="head"> <div class="head">
<MkAvatar <Avatar
v-if="notification.type === 'pollEnded'" v-if="notification.type === 'pollEnded'"
class="icon" class="icon"
:user="notification.note.user" :user="notification.note.user"
/> />
<MkAvatar <Avatar
v-else-if="notification.user" v-else-if="notification.user"
class="icon" class="icon"
:user="notification.user" :user="notification.user"
@ -94,21 +94,22 @@
<span v-if="notification.type === 'pollEnded'">{{ <span v-if="notification.type === 'pollEnded'">{{
i18n.ts._notification.pollEnded i18n.ts._notification.pollEnded
}}</span> }}</span>
<MkA <A
v-else-if="notification.user" v-else-if="notification.user"
v-user-preview="notification.user.id" v-user-preview="notification.user.id"
class="name" class="name"
:to="userPage(notification.user)" :to="userPage(notification.user)"
><MkUserName :user="notification.user" >
/></MkA> <UserName :user="notification.user" />
</A>
<span v-else>{{ notification.header }}</span> <span v-else>{{ notification.header }}</span>
<MkTime <Time
v-if="withTime" v-if="withTime"
:time="notification.createdAt" :time="notification.createdAt"
class="time" class="time"
/> />
</header> </header>
<MkA <A
v-if="notification.type === 'reaction'" v-if="notification.type === 'reaction'"
class="text" class="text"
:to="notePage(notification.note)" :to="notePage(notification.note)"
@ -123,8 +124,8 @@
:custom-emojis="notification.note.emojis" :custom-emojis="notification.note.emojis"
/> />
<i class="ph-quotes ph-fill ph-lg"></i> <i class="ph-quotes ph-fill ph-lg"></i>
</MkA> </A>
<MkA <A
v-if="notification.type === 'renote'" v-if="notification.type === 'renote'"
class="text" class="text"
:to="notePage(notification.note)" :to="notePage(notification.note)"
@ -139,8 +140,8 @@
:custom-emojis="notification.note.renote.emojis" :custom-emojis="notification.note.renote.emojis"
/> />
<i class="ph-quotes ph-fill ph-lg"></i> <i class="ph-quotes ph-fill ph-lg"></i>
</MkA> </A>
<MkA <A
v-if="notification.type === 'reply'" v-if="notification.type === 'reply'"
class="text" class="text"
:to="notePage(notification.note)" :to="notePage(notification.note)"
@ -152,8 +153,8 @@
:nowrap="!full" :nowrap="!full"
:custom-emojis="notification.note.emojis" :custom-emojis="notification.note.emojis"
/> />
</MkA> </A>
<MkA <A
v-if="notification.type === 'mention'" v-if="notification.type === 'mention'"
class="text" class="text"
:to="notePage(notification.note)" :to="notePage(notification.note)"
@ -165,8 +166,8 @@
:nowrap="!full" :nowrap="!full"
:custom-emojis="notification.note.emojis" :custom-emojis="notification.note.emojis"
/> />
</MkA> </A>
<MkA <A
v-if="notification.type === 'quote'" v-if="notification.type === 'quote'"
class="text" class="text"
:to="notePage(notification.note)" :to="notePage(notification.note)"
@ -178,8 +179,8 @@
:nowrap="!full" :nowrap="!full"
:custom-emojis="notification.note.emojis" :custom-emojis="notification.note.emojis"
/> />
</MkA> </A>
<MkA <A
v-if="notification.type === 'pollVote'" v-if="notification.type === 'pollVote'"
class="text" class="text"
:to="notePage(notification.note)" :to="notePage(notification.note)"
@ -194,8 +195,8 @@
:custom-emojis="notification.note.emojis" :custom-emojis="notification.note.emojis"
/> />
<i class="ph-quotes ph-fill ph-lg"></i> <i class="ph-quotes ph-fill ph-lg"></i>
</MkA> </A>
<MkA <A
v-if="notification.type === 'pollEnded'" v-if="notification.type === 'pollEnded'"
class="text" class="text"
:to="notePage(notification.note)" :to="notePage(notification.note)"
@ -209,19 +210,20 @@
:custom-emojis="notification.note.emojis" :custom-emojis="notification.note.emojis"
/> />
<i class="ph-quotes ph-fill ph-lg"></i> <i class="ph-quotes ph-fill ph-lg"></i>
</MkA> </A>
<span <span
v-if="notification.type === 'follow'" v-if="notification.type === 'follow'"
class="text" class="text"
style="opacity: 0.7" style="opacity: 0.7"
>{{ i18n.ts.youGotNewFollower }} >{{ i18n.ts.youGotNewFollower }}
<div v-if="full"> <div v-if="full">
<MkFollowButton <FollowButton
:user="notification.user" :user="notification.user"
:full="true" :full="true"
:hideMenu="true" :hideMenu="true"
/></div />
></span> </div>
</span>
<span <span
v-if="notification.type === 'followRequestAccepted'" v-if="notification.type === 'followRequestAccepted'"
class="text" class="text"
@ -241,8 +243,8 @@
<button class="_textButton" @click="rejectFollowRequest()"> <button class="_textButton" @click="rejectFollowRequest()">
{{ i18n.ts.reject }} {{ i18n.ts.reject }}
</button> </button>
</div></span </div>
> </span>
<span <span
v-if="notification.type === 'groupInvited'" v-if="notification.type === 'groupInvited'"
class="text" class="text"
@ -263,8 +265,8 @@
> >
{{ i18n.ts.reject }} {{ i18n.ts.reject }}
</button> </button>
</div></span </div>
> </span>
<span v-if="notification.type === 'app'" class="text"> <span v-if="notification.type === 'app'" class="text">
<Mfm :text="notification.body" :nowrap="!full" /> <Mfm :text="notification.body" :nowrap="!full" />
</span> </span>
@ -275,9 +277,9 @@
<script lang="ts" setup> <script lang="ts" setup>
import { ref, onMounted, onUnmounted, watch } from "vue"; import { ref, onMounted, onUnmounted, watch } from "vue";
import * as misskey from "iceshrimp-js"; import * as misskey from "iceshrimp-js";
import XReactionIcon from "@/components/MkReactionIcon.vue"; import XReactionIcon from "@/components/ReactionIcon.vue";
import MkFollowButton from "@/components/MkFollowButton.vue"; import FollowButton from "@/components/FollowButton.vue";
import XReactionTooltip from "@/components/MkReactionTooltip.vue"; import XReactionTooltip from "@/components/ReactionTooltip.vue";
import { getNoteSummary } from "@/scripts/get-note-summary"; import { getNoteSummary } from "@/scripts/get-note-summary";
import { notePage } from "@/filters/note"; import { notePage } from "@/filters/note";
import { userPage } from "@/filters/user"; import { userPage } from "@/filters/user";
@ -397,6 +399,7 @@ useTooltip(reactionRef, (showing) => {
padding-block: 16px; padding-block: 16px;
font-size: 0.9em; font-size: 0.9em;
} }
&.max-width_450px { &.max-width_450px {
padding: 12px 16px; padding: 12px 16px;
} }
@ -519,6 +522,7 @@ useTooltip(reactionRef, (showing) => {
> span:first-child { > span:first-child {
opacity: 0.7; opacity: 0.7;
&::after { &::after {
content: ": "; content: ": ";
} }

28
packages/client/src/components/MkNotificationSettingWindow.vue → packages/client/src/components/NotificationSettingWindow.vue
View File

@ -12,27 +12,29 @@
<template #header>{{ i18n.ts.notificationSetting }}</template> <template #header>{{ i18n.ts.notificationSetting }}</template>
<div class="_monolithic_"> <div class="_monolithic_">
<div v-if="showGlobalToggle" class="_section"> <div v-if="showGlobalToggle" class="_section">
<MkSwitch v-model="useGlobalSetting"> <Switch v-model="useGlobalSetting">
{{ i18n.ts.useGlobalSetting }} {{ i18n.ts.useGlobalSetting }}
<template #caption>{{ <template #caption>{{
i18n.ts.useGlobalSettingDesc i18n.ts.useGlobalSettingDesc
}}</template> }}</template>
</MkSwitch> </Switch>
</div> </div>
<div v-if="!useGlobalSetting" class="_section _formRoot"> <div v-if="!useGlobalSetting" class="_section _formRoot">
<MkInfo class="_formBlock">{{ i18n.ts.notificationSettingDesc }}</MkInfo> <Info class="_formBlock">{{
<MkButton inline @click="disableAll">{{ i18n.ts.notificationSettingDesc
}}</Info>
<Button inline @click="disableAll">{{
i18n.ts.disableAll i18n.ts.disableAll
}}</MkButton> }}</Button>
<MkButton inline @click="enableAll">{{ <Button inline @click="enableAll">{{
i18n.ts.enableAll i18n.ts.enableAll
}}</MkButton> }}</Button>
<MkSwitch <Switch
v-for="ntype in notificationTypes" v-for="ntype in notificationTypes"
class="_formBlock" class="_formBlock"
:key="ntype" :key="ntype"
v-model="typesMap[ntype]" v-model="typesMap[ntype]"
>{{ i18n.t(`_notification._types.${ntype}`) }}</MkSwitch >{{ i18n.t(`_notification._types.${ntype}`) }}</Switch
> >
</div> </div>
</div> </div>
@ -42,10 +44,10 @@
<script lang="ts" setup> <script lang="ts" setup>
import {} from "vue"; import {} from "vue";
import { notificationTypes } from "iceshrimp-js"; import { notificationTypes } from "iceshrimp-js";
import MkSwitch from "./form/switch.vue"; import Switch from "./form/Switch.vue";
import MkInfo from "./MkInfo.vue"; import Info from "./Info.vue";
import MkButton from "./MkButton.vue"; import Button from "./Button.vue";
import XModalWindow from "@/components/MkModalWindow.vue"; import XModalWindow from "@/components/ModalWindow.vue";
import { i18n } from "@/i18n"; import { i18n } from "@/i18n";
const emit = defineEmits<{ const emit = defineEmits<{

3
packages/client/src/components/MkNotificationToast.vue → packages/client/src/components/NotificationToast.vue
View File

@ -16,7 +16,7 @@
<script lang="ts" setup> <script lang="ts" setup>
import { onMounted } from "vue"; import { onMounted } from "vue";
import XNotification from "@/components/MkNotification.vue"; import XNotification from "@/components/Notification.vue";
import * as os from "@/os"; import * as os from "@/os";
defineProps<{ defineProps<{
@ -44,6 +44,7 @@ onMounted(() => {
opacity 0.3s, opacity 0.3s,
transform 0.3s !important; transform 0.3s !important;
} }
.notification-toast-enter-from, .notification-toast-enter-from,
.notification-toast-leave-to { .notification-toast-leave-to {
opacity: 0; opacity: 0;

20
packages/client/src/components/MkNotifications.vue → packages/client/src/components/Notifications.vue
View File

@ -1,12 +1,8 @@
<template> <template>
<MkPagination ref="pagingComponent" :pagination="pagination"> <Pagination ref="pagingComponent" :pagination="pagination">
<template #empty> <template #empty>
<div class="_fullinfo"> <div class="_fullinfo">
<img <img :src="instance.images.info" class="_ghost" alt="Info" />
:src="instance.images.info"
class="_ghost"
alt="Info"
/>
<div>{{ i18n.ts.noNotifications }}</div> <div>{{ i18n.ts.noNotifications }}</div>
</div> </div>
</template> </template>
@ -42,7 +38,7 @@
/> />
</XList> </XList>
</template> </template>
</MkPagination> </Pagination>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
@ -55,10 +51,10 @@ import {
ref, ref,
} from "vue"; } from "vue";
import { notificationTypes } from "iceshrimp-js"; import { notificationTypes } from "iceshrimp-js";
import MkPagination, { Paging } from "@/components/MkPagination.vue"; import Pagination, { Paging } from "@/components/Pagination.vue";
import XNotification from "@/components/MkNotification.vue"; import XNotification from "@/components/Notification.vue";
import XList from "@/components/MkDateSeparatedList.vue"; import XList from "@/components/DateSeparatedList.vue";
import XNote from "@/components/MkNote.vue"; import XNote from "@/components/Note.vue";
import * as os from "@/os"; import * as os from "@/os";
import { stream } from "@/stream"; import { stream } from "@/stream";
import { $i } from "@/account"; import { $i } from "@/account";
@ -70,7 +66,7 @@ const props = defineProps<{
unreadOnly?: boolean; unreadOnly?: boolean;
}>(); }>();
const pagingComponent = ref<InstanceType<typeof MkPagination>>(); const pagingComponent = ref<InstanceType<typeof Pagination>>();
const pagination: Paging = { const pagination: Paging = {
endpoint: "i/notifications" as const, endpoint: "i/notifications" as const,

0
packages/client/src/components/MkNumber.vue → packages/client/src/components/Number.vue
View File

0
packages/client/src/components/MkNumberDiff.vue → packages/client/src/components/NumberDiff.vue
View File

2
packages/client/src/components/MkObjectView.vue → packages/client/src/components/ObjectView.vue
View File

@ -6,7 +6,7 @@
<script lang="ts" setup> <script lang="ts" setup>
import {} from "vue"; import {} from "vue";
import XValue from "./MkObjectView.value.vue"; import XValue from "./ObjectViewValue.vue";
const props = defineProps<{ const props = defineProps<{
value: Record<string, unknown>; value: Record<string, unknown>;

0
packages/client/src/components/MkObjectView.value.vue → packages/client/src/components/ObjectViewValue.vue
View File

4
packages/client/src/components/MkPagePreview.vue → packages/client/src/components/PagePreview.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<MkA <A
:to="`/@${page.user.username}/pages/${page.name}`" :to="`/@${page.user.username}/pages/${page.name}`"
class="vhpxefrj _block" class="vhpxefrj _block"
tabindex="-1" tabindex="-1"
@ -30,7 +30,7 @@
<p>{{ userName(page.user) }}</p> <p>{{ userName(page.user) }}</p>
</footer> </footer>
</article> </article>
</MkA> </A>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>

2
packages/client/src/components/MkPageWindow.vue → packages/client/src/components/PageWindow.vue
View File

@ -32,7 +32,7 @@
<script lang="ts" setup> <script lang="ts" setup>
import { ComputedRef, inject, provide } from "vue"; import { ComputedRef, inject, provide } from "vue";
import RouterView from "@/components/global/RouterView.vue"; import RouterView from "@/components/global/RouterView.vue";
import XWindow from "@/components/MkWindow.vue"; import XWindow from "@/components/Window.vue";
import { popout as _popout } from "@/scripts/popout"; import { popout as _popout } from "@/scripts/popout";
import copyToClipboard from "@/scripts/copy-to-clipboard"; import copyToClipboard from "@/scripts/copy-to-clipboard";
import { url } from "@/config"; import { url } from "@/config";

31
packages/client/src/components/MkPagination.vue → packages/client/src/components/Pagination.vue
View File

@ -1,8 +1,8 @@
<template> <template>
<transition :name="$store.state.animation ? 'fade' : ''" mode="out-in"> <transition :name="$store.state.animation ? 'fade' : ''" mode="out-in">
<MkLoading v-if="fetching" /> <Loading v-if="fetching" />
<MkError v-else-if="error" @retry="init()" /> <Error v-else-if="error" @retry="init()" />
<div v-else-if="empty" key="_empty_" class="empty"> <div v-else-if="empty" key="_empty_" class="empty">
<slot name="empty"> <slot name="empty">
@ -23,7 +23,7 @@
key="_more_" key="_more_"
class="cxiknjgy _gap" class="cxiknjgy _gap"
> >
<MkButton <Button
v-if="!moreFetching" v-if="!moreFetching"
class="button" class="button"
:disabled="moreFetching" :disabled="moreFetching"
@ -32,8 +32,8 @@
@click="fetchMoreAhead" @click="fetchMoreAhead"
> >
{{ i18n.ts.loadMore }} {{ i18n.ts.loadMore }}
</MkButton> </Button>
<MkLoading v-else class="loading" /> <Loading v-else class="loading" />
</div> </div>
<slot :items="items"></slot> <slot :items="items"></slot>
<div <div
@ -41,7 +41,7 @@
key="_more_" key="_more_"
class="cxiknjgy _gap" class="cxiknjgy _gap"
> >
<MkButton <Button
v-if="!moreFetching" v-if="!moreFetching"
v-appear=" v-appear="
$store.state.enableInfiniteScroll && !disableAutoLoad $store.state.enableInfiniteScroll && !disableAutoLoad
@ -55,8 +55,8 @@
@click="fetchMore" @click="fetchMore"
> >
{{ i18n.ts.loadMore }} {{ i18n.ts.loadMore }}
</MkButton> </Button>
<MkLoading v-else class="loading" /> <Loading v-else class="loading" />
</div> </div>
</div> </div>
</transition> </transition>
@ -82,7 +82,7 @@ import {
getScrollPosition, getScrollPosition,
getScrollContainer, getScrollContainer,
} from "@/scripts/scroll"; } from "@/scripts/scroll";
import MkButton from "@/components/MkButton.vue"; import Button from "@/components/Button.vue";
import { i18n } from "@/i18n"; import { i18n } from "@/i18n";
import { instance } from "@/instance"; import { instance } from "@/instance";
@ -159,7 +159,7 @@ const init = async (): Promise<void> => {
}) })
.then( .then(
(res) => { (res) => {
if (props.pagination.endpoint == 'antennas/notes') { if (props.pagination.endpoint == "antennas/notes") {
redisPaginationStr = res.pagination; redisPaginationStr = res.pagination;
res = res.notes; res = res.notes;
} }
@ -259,7 +259,7 @@ const fetchMore = async (): Promise<void> => {
: props.pagination.params : props.pagination.params
: {}; : {};
if (props.pagination.endpoint == 'antennas/notes') { if (props.pagination.endpoint == "antennas/notes") {
params.pagination = redisPaginationStr; params.pagination = redisPaginationStr;
} }
@ -281,7 +281,7 @@ const fetchMore = async (): Promise<void> => {
}) })
.then( .then(
(res) => { (res) => {
if (props.pagination.endpoint == 'antennas/notes') { if (props.pagination.endpoint == "antennas/notes") {
redisPaginationStr = res.pagination; redisPaginationStr = res.pagination;
res = res.notes; res = res.notes;
} }
@ -330,7 +330,7 @@ const fetchMoreAhead = async (): Promise<void> => {
: props.pagination.params : props.pagination.params
: {}; : {};
if (props.pagination.endpoint == 'antennas/notes') { if (props.pagination.endpoint == "antennas/notes") {
params.pagination = redisPaginationStr; params.pagination = redisPaginationStr;
} }
@ -352,7 +352,7 @@ const fetchMoreAhead = async (): Promise<void> => {
}) })
.then( .then(
(res) => { (res) => {
if (props.pagination.endpoint == 'antennas/notes') { if (props.pagination.endpoint == "antennas/notes") {
redisPaginationStr = res.pagination; redisPaginationStr = res.pagination;
res = res.notes; res = res.notes;
} }
@ -506,6 +506,7 @@ defineExpose({
.fade-leave-active { .fade-leave-active {
transition: opacity 0.125s ease; transition: opacity 0.125s ease;
} }
.fade-enter-from, .fade-enter-from,
.fade-leave-to { .fade-leave-to {
opacity: 0; opacity: 0;
@ -517,9 +518,11 @@ defineExpose({
margin-right: auto; margin-right: auto;
} }
} }
.list > :deep(._button) { .list > :deep(._button) {
margin-inline: auto; margin-inline: auto;
margin-bottom: 16px; margin-bottom: 16px;
&:last-of-type:not(:first-child) { &:last-of-type:not(:first-child) {
margin-top: 16px; margin-top: 16px;
} }

0
packages/client/src/components/MkPoll.vue → packages/client/src/components/Poll.vue
View File

44
packages/client/src/components/MkPollEditor.vue → packages/client/src/components/PollEditor.vue
View File

@ -6,14 +6,14 @@
</p> </p>
<ul> <ul>
<li v-for="(choice, i) in choices" :key="i"> <li v-for="(choice, i) in choices" :key="i">
<MkInput <Input
class="input" class="input"
small small
:model-value="choice" :model-value="choice"
:placeholder="i18n.t('_poll.choiceN', { n: i + 1 })" :placeholder="i18n.t('_poll.choiceN', { n: i + 1 })"
@update:modelValue="onInput(i, $event)" @update:modelValue="onInput(i, $event)"
> >
</MkInput> </Input>
<button <button
class="_button" class="_button"
@click="remove(i)" @click="remove(i)"
@ -23,42 +23,38 @@
</button> </button>
</li> </li>
</ul> </ul>
<MkButton v-if="choices.length < 10" class="add" @click="add">{{ <Button v-if="choices.length < 10" class="add" @click="add">{{
i18n.ts.add i18n.ts.add
}}</MkButton> }}</Button>
<MkButton v-else class="add" disabled>{{ <Button v-else class="add" disabled>{{ i18n.ts._poll.noMore }}</Button>
i18n.ts._poll.noMore <Switch v-model="multiple">{{ i18n.ts._poll.canMultipleVote }}</Switch>
}}</MkButton>
<MkSwitch v-model="multiple">{{
i18n.ts._poll.canMultipleVote
}}</MkSwitch>
<section> <section>
<div> <div>
<MkSelect v-model="expiration" small> <Select v-model="expiration" small>
<template #label>{{ i18n.ts._poll.expiration }}</template> <template #label>{{ i18n.ts._poll.expiration }}</template>
<option value="infinite"> <option value="infinite">
{{ i18n.ts._poll.infinite }} {{ i18n.ts._poll.infinite }}
</option> </option>
<option value="at">{{ i18n.ts._poll.at }}</option> <option value="at">{{ i18n.ts._poll.at }}</option>
<option value="after">{{ i18n.ts._poll.after }}</option> <option value="after">{{ i18n.ts._poll.after }}</option>
</MkSelect> </Select>
<section v-if="expiration === 'at'"> <section v-if="expiration === 'at'">
<MkInput v-model="atDate" small type="date" class="input"> <Input v-model="atDate" small type="date" class="input">
<template #label>{{ <template #label>{{
i18n.ts._poll.deadlineDate i18n.ts._poll.deadlineDate
}}</template> }}</template>
</MkInput> </Input>
<MkInput v-model="atTime" small type="time" class="input"> <Input v-model="atTime" small type="time" class="input">
<template #label>{{ <template #label>{{
i18n.ts._poll.deadlineTime i18n.ts._poll.deadlineTime
}}</template> }}</template>
</MkInput> </Input>
</section> </section>
<section v-else-if="expiration === 'after'"> <section v-else-if="expiration === 'after'">
<MkInput v-model="after" small type="number" class="input"> <Input v-model="after" small type="number" class="input">
<template #label>{{ i18n.ts._poll.duration }}</template> <template #label>{{ i18n.ts._poll.duration }}</template>
</MkInput> </Input>
<MkSelect v-model="unit" small> <Select v-model="unit" small>
<option value="second"> <option value="second">
{{ i18n.ts._time.second }} {{ i18n.ts._time.second }}
</option> </option>
@ -67,7 +63,7 @@
</option> </option>
<option value="hour">{{ i18n.ts._time.hour }}</option> <option value="hour">{{ i18n.ts._time.hour }}</option>
<option value="day">{{ i18n.ts._time.day }}</option> <option value="day">{{ i18n.ts._time.day }}</option>
</MkSelect> </Select>
</section> </section>
</div> </div>
</section> </section>
@ -76,10 +72,10 @@
<script lang="ts" setup> <script lang="ts" setup>
import { ref, watch } from "vue"; import { ref, watch } from "vue";
import MkInput from "./form/input.vue"; import Input from "./form/Input.vue";
import MkSelect from "./form/select.vue"; import Select from "./form/Select.vue";
import MkSwitch from "./form/switch.vue"; import Switch from "./form/Switch.vue";
import MkButton from "./MkButton.vue"; import Button from "./Button.vue";
import { formatDateTimeString } from "@/scripts/format-time-string"; import { formatDateTimeString } from "@/scripts/format-time-string";
import { addTime } from "@/scripts/time"; import { addTime } from "@/scripts/time";
import { i18n } from "@/i18n"; import { i18n } from "@/i18n";

12
packages/client/src/components/MkPopupMenu.vue → packages/client/src/components/PopupMenu.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<MkModal <Modal
ref="modal" ref="modal"
v-slot="{ type, maxHeight }" v-slot="{ type, maxHeight }"
:z-priority="'high'" :z-priority="'high'"
@ -9,7 +9,7 @@
@closed="emit('closed')" @closed="emit('closed')"
tabindex="-1" tabindex="-1"
> >
<MkMenu <Menu
:items="items" :items="items"
:align="align" :align="align"
:width="width" :width="width"
@ -20,13 +20,13 @@
:no-return-focus="noReturnFocus" :no-return-focus="noReturnFocus"
@close="modal?.close()" @close="modal?.close()"
/> />
</MkModal> </Modal>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import {} from "vue"; import {} from "vue";
import MkModal from "./MkModal.vue"; import Modal from "./Modal.vue";
import MkMenu from "./MkMenu.vue"; import Menu from "./Menu.vue";
import { MenuItem } from "@/types/menu"; import { MenuItem } from "@/types/menu";
defineProps<{ defineProps<{
@ -42,7 +42,7 @@ const emit = defineEmits<{
(ev: "closed"): void; (ev: "closed"): void;
}>(); }>();
let modal = $ref<InstanceType<typeof MkModal>>(); let modal = $ref<InstanceType<typeof Modal>>();
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>

40
packages/client/src/components/MkPostForm.vue → packages/client/src/components/PostForm.vue
View File

@ -20,7 +20,7 @@
class="account _button" class="account _button"
@click="openAccountMenu" @click="openAccountMenu"
> >
<MkAvatar :user="postAccount ?? $i" class="avatar" /> <Avatar :user="postAccount ?? $i" class="avatar" />
</button> </button>
<div class="right"> <div class="right">
<span <span
@ -33,7 +33,11 @@
></span> ></span>
<button <button
ref="visibilityButton" ref="visibilityButton"
v-tooltip="$props.editId != null ? i18n.ts.cannotChangeScopeWhenEditing : i18n.ts.visibility" v-tooltip="
$props.editId != null
? i18n.ts.cannotChangeScopeWhenEditing
: i18n.ts.visibility
"
class="_button visibility" class="_button visibility"
:disabled="channel != null || $props.editId != null" :disabled="channel != null || $props.editId != null"
@click="setVisibility" @click="setVisibility"
@ -96,7 +100,7 @@
<span style="margin-right: 8px">{{ i18n.ts.recipient }}</span> <span style="margin-right: 8px">{{ i18n.ts.recipient }}</span>
<div class="visibleUsers"> <div class="visibleUsers">
<span v-for="u in visibleUsers" :key="u.id"> <span v-for="u in visibleUsers" :key="u.id">
<MkAcct :user="u" /> <Acct :user="u" />
<button <button
class="_button" class="_button"
@click="removeVisibleUser(u)" @click="removeVisibleUser(u)"
@ -110,15 +114,15 @@
</button> </button>
</div> </div>
</div> </div>
<MkInfo <Info
v-if="hasNotSpecifiedMentions" v-if="hasNotSpecifiedMentions"
warn warn
class="hasNotSpecifiedMentions" class="hasNotSpecifiedMentions"
>{{ i18n.ts.notSpecifiedMentionWarning }} - >{{ i18n.ts.notSpecifiedMentionWarning }} -
<button class="_textButton" @click="addMissingMention()"> <button class="_textButton" @click="addMissingMention()">
{{ i18n.ts.add }} {{ i18n.ts.add }}
</button></MkInfo </button>
> </Info>
<input <input
v-show="useCw" v-show="useCw"
ref="cwInputEl" ref="cwInputEl"
@ -241,10 +245,10 @@ import { length } from "stringz";
import { toASCII } from "punycode/"; import { toASCII } from "punycode/";
import * as Acct from "iceshrimp-js/built/acct"; import * as Acct from "iceshrimp-js/built/acct";
import { throttle } from "throttle-debounce"; import { throttle } from "throttle-debounce";
import XNoteSimple from "@/components/MkNoteSimple.vue"; import XNoteSimple from "@/components/NoteSimple.vue";
import XNotePreview from "@/components/MkNotePreview.vue"; import XNotePreview from "@/components/NotePreview.vue";
import XPostFormAttaches from "@/components/MkPostFormAttaches.vue"; import XPostFormAttaches from "@/components/PostFormAttaches.vue";
import XPollEditor from "@/components/MkPollEditor.vue"; import XPollEditor from "@/components/PollEditor.vue";
import { host, url } from "@/config"; import { host, url } from "@/config";
import { erase, unique } from "@/scripts/array"; import { erase, unique } from "@/scripts/array";
import { extractMentions } from "@/scripts/extract-mentions"; import { extractMentions } from "@/scripts/extract-mentions";
@ -254,7 +258,7 @@ import * as os from "@/os";
import { stream } from "@/stream"; import { stream } from "@/stream";
import { selectFiles } from "@/scripts/select-file"; import { selectFiles } from "@/scripts/select-file";
import { defaultStore, notePostInterruptors, postFormActions } from "@/store"; import { defaultStore, notePostInterruptors, postFormActions } from "@/store";
import MkInfo from "@/components/MkInfo.vue"; import Info from "@/components/Info.vue";
import { i18n } from "@/i18n"; import { i18n } from "@/i18n";
import { instance } from "@/instance"; import { instance } from "@/instance";
import { import {
@ -264,7 +268,7 @@ import {
} from "@/account"; } from "@/account";
import { uploadFile } from "@/scripts/upload"; import { uploadFile } from "@/scripts/upload";
import { deepClone } from "@/scripts/clone"; import { deepClone } from "@/scripts/clone";
import XCheatSheet from "@/components/MkCheatSheetDialog.vue"; import XCheatSheet from "@/components/CheatSheetDialog.vue";
import { preprocess } from "@/scripts/preprocess"; import { preprocess } from "@/scripts/preprocess";
const modal = inject("modal"); const modal = inject("modal");
@ -636,9 +640,7 @@ function setVisibility() {
} }
os.popup( os.popup(
defineAsyncComponent( defineAsyncComponent(() => import("@/components/VisibilityPicker.vue")),
() => import("@/components/MkVisibilityPicker.vue"),
),
{ {
currentVisibility: visibility, currentVisibility: visibility,
currentLocalOnly: localOnly, currentLocalOnly: localOnly,
@ -727,7 +729,12 @@ async function onPaste(ev: ClipboardEvent) {
const paste = ev.clipboardData.getData("text"); const paste = ev.clipboardData.getData("text");
if (!props.renote && !quoteId && paste.startsWith(url + "/notes/") && !props.editId) { if (
!props.renote &&
!quoteId &&
paste.startsWith(url + "/notes/") &&
!props.editId
) {
ev.preventDefault(); ev.preventDefault();
os.yesno({ os.yesno({
@ -1037,6 +1044,7 @@ onMounted(() => {
.right { .right {
float: right; float: right;
} }
.gafaadew { .gafaadew {
position: relative; position: relative;

6
packages/client/src/components/MkPostFormAttaches.vue → packages/client/src/components/PostFormAttaches.vue
View File

@ -14,7 +14,7 @@
@click="showFileMenu(element, $event)" @click="showFileMenu(element, $event)"
@contextmenu.prevent="showFileMenu(element, $event)" @contextmenu.prevent="showFileMenu(element, $event)"
> >
<MkDriveFileThumbnail <DriveFileThumbnail
:data-id="element.id" :data-id="element.id"
class="thumbnail" class="thumbnail"
:file="element" :file="element"
@ -32,7 +32,7 @@
<script lang="ts" setup> <script lang="ts" setup>
import { defineAsyncComponent, ref, computed } from "vue"; import { defineAsyncComponent, ref, computed } from "vue";
import { VueDraggable } from "vue-draggable-plus"; import { VueDraggable } from "vue-draggable-plus";
import MkDriveFileThumbnail from "@/components/MkDriveFileThumbnail.vue"; import DriveFileThumbnail from "@/components/DriveFileThumbnail.vue";
import * as os from "@/os"; import * as os from "@/os";
import { i18n } from "@/i18n"; import { i18n } from "@/i18n";
@ -93,7 +93,7 @@ async function rename(file) {
async function describe(file) { async function describe(file) {
os.popup( os.popup(
defineAsyncComponent(() => import("@/components/MkMediaCaption.vue")), defineAsyncComponent(() => import("@/components/MediaCaption.vue")),
{ {
title: i18n.ts.describeFile, title: i18n.ts.describeFile,
input: { input: {

14
packages/client/src/components/MkPostFormDialog.vue → packages/client/src/components/PostFormDialog.vue
View File

@ -1,11 +1,11 @@
<template> <template>
<MkModal <Modal
ref="modal" ref="modal"
:prefer-type="'dialog'" :prefer-type="'dialog'"
@click="modal.close()" @click="modal.close()"
@closed="onModalClosed()" @closed="onModalClosed()"
> >
<MkPostForm <PostForm
ref="form" ref="form"
style="margin: 0 auto auto auto" style="margin: 0 auto auto auto"
v-bind="props" v-bind="props"
@ -15,14 +15,14 @@
@cancel="modal.close()" @cancel="modal.close()"
@esc="modal.close()" @esc="modal.close()"
/> />
</MkModal> </Modal>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import {} from "vue"; import {} from "vue";
import * as misskey from "iceshrimp-js"; import * as misskey from "iceshrimp-js";
import MkModal from "@/components/MkModal.vue"; import Modal from "@/components/Modal.vue";
import MkPostForm from "@/components/MkPostForm.vue"; import PostForm from "@/components/PostForm.vue";
const props = defineProps<{ const props = defineProps<{
reply?: misskey.entities.Note; reply?: misskey.entities.Note;
@ -46,8 +46,8 @@ const emit = defineEmits<{
(ev: "closed"): void; (ev: "closed"): void;
}>(); }>();
let modal = $shallowRef<InstanceType<typeof MkModal>>(); let modal = $shallowRef<InstanceType<typeof Modal>>();
let form = $shallowRef<InstanceType<typeof MkPostForm>>(); let form = $shallowRef<InstanceType<typeof PostForm>>();
function onPosted() { function onPosted() {
modal.close({ modal.close({

18
packages/client/src/components/MkPushNotificationAllowButton.vue → packages/client/src/components/PushNotificationAllowButton.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<MkButton <Button
v-if="supported && !pushRegistrationInServer" v-if="supported && !pushRegistrationInServer"
type="button" type="button"
primary primary
@ -12,8 +12,8 @@
@click="subscribe" @click="subscribe"
> >
{{ i18n.ts.subscribePushNotification }} {{ i18n.ts.subscribePushNotification }}
</MkButton> </Button>
<MkButton <Button
v-else-if=" v-else-if="
!showOnlyToRegister && !showOnlyToRegister &&
($i ? pushRegistrationInServer : pushSubscription) ($i ? pushRegistrationInServer : pushSubscription)
@ -29,8 +29,8 @@
@click="unsubscribe" @click="unsubscribe"
> >
{{ i18n.ts.unsubscribePushNotification }} {{ i18n.ts.unsubscribePushNotification }}
</MkButton> </Button>
<MkButton <Button
v-else-if="$i && pushRegistrationInServer" v-else-if="$i && pushRegistrationInServer"
disabled disabled
:rounded="rounded" :rounded="rounded"
@ -39,8 +39,8 @@
:full="full" :full="full"
> >
{{ i18n.ts.pushNotificationAlreadySubscribed }} {{ i18n.ts.pushNotificationAlreadySubscribed }}
</MkButton> </Button>
<MkButton <Button
v-else-if="!supported" v-else-if="!supported"
disabled disabled
:rounded="rounded" :rounded="rounded"
@ -49,12 +49,12 @@
:full="full" :full="full"
> >
{{ i18n.ts.pushNotificationNotSupported }} {{ i18n.ts.pushNotificationNotSupported }}
</MkButton> </Button>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { $i, getAccounts } from "@/account"; import { $i, getAccounts } from "@/account";
import MkButton from "@/components/MkButton.vue"; import Button from "@/components/Button.vue";
import { instance } from "@/instance"; import { instance } from "@/instance";
import { api, apiWithDialog, promiseDialog } from "@/os"; import { api, apiWithDialog, promiseDialog } from "@/os";
import { i18n } from "@/i18n"; import { i18n } from "@/i18n";

0
packages/client/src/components/MkQuoteButton.vue → packages/client/src/components/QuoteButton.vue
View File

10
packages/client/src/components/MkReactedUsers.vue → packages/client/src/components/ReactedUsers.vue
View File

@ -8,7 +8,7 @@
class="_button" class="_button"
@click="tab = reaction" @click="tab = reaction"
> >
<MkReactionIcon <ReactionIcon
ref="reactionRef" ref="reactionRef"
:reaction=" :reaction="
reaction reaction
@ -22,7 +22,7 @@
}}</span> }}</span>
</button> </button>
</div> </div>
<MkUserCardMini <UserCardMini
v-for="user in users" v-for="user in users"
:key="user.id" :key="user.id"
:user="user" :user="user"
@ -30,15 +30,15 @@
/> />
</div> </div>
<div v-else> <div v-else>
<MkLoading /> <Loading />
</div> </div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { onMounted, watch } from "vue"; import { onMounted, watch } from "vue";
import * as misskey from "iceshrimp-js"; import * as misskey from "iceshrimp-js";
import MkReactionIcon from "@/components/MkReactionIcon.vue"; import ReactionIcon from "@/components/ReactionIcon.vue";
import MkUserCardMini from "@/components/MkUserCardMini.vue"; import UserCardMini from "@/components/UserCardMini.vue";
import { i18n } from "@/i18n"; import { i18n } from "@/i18n";
import * as os from "@/os"; import * as os from "@/os";

2
packages/client/src/components/MkReactionIcon.vue → packages/client/src/components/ReactionIcon.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<MkEmoji <Emoji
:emoji="reaction" :emoji="reaction"
:custom-emojis="customEmojis || []" :custom-emojis="customEmojis || []"
:is-reaction="true" :is-reaction="true"

8
packages/client/src/components/MkReactionTooltip.vue → packages/client/src/components/ReactionTooltip.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<MkTooltip <Tooltip
ref="tooltip" ref="tooltip"
:target-element="targetElement" :target-element="targetElement"
:max-width="340" :max-width="340"
@ -14,13 +14,13 @@
/> />
<div class="name">{{ reaction.replace("@.", "") }}</div> <div class="name">{{ reaction.replace("@.", "") }}</div>
</div> </div>
</MkTooltip> </Tooltip>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import {} from "vue"; import {} from "vue";
import MkTooltip from "./MkTooltip.vue"; import Tooltip from "./Tooltip.vue";
import XReactionIcon from "@/components/MkReactionIcon.vue"; import XReactionIcon from "@/components/ReactionIcon.vue";
const props = defineProps<{ const props = defineProps<{
reaction: string; reaction: string;

3
packages/client/src/components/MkReactionsViewer.vue → packages/client/src/components/ReactionsViewer.vue
View File

@ -20,7 +20,7 @@
import { computed, ref } from "vue"; import { computed, ref } from "vue";
import * as misskey from "iceshrimp-js"; import * as misskey from "iceshrimp-js";
import { $i } from "@/account"; import { $i } from "@/account";
import XReaction from "@/components/MkReactionsViewer.reaction.vue"; import XReaction from "@/components/ReactionsViewerReaction.vue";
const props = defineProps<{ const props = defineProps<{
note: misskey.entities.Note; note: misskey.entities.Note;
@ -55,6 +55,7 @@ const isMe = computed(() => $i && $i.id === props.note.userId);
); );
scrollbar-width: none; scrollbar-width: none;
pointer-events: none; pointer-events: none;
:deep(*) { :deep(*) {
pointer-events: all; pointer-events: all;
} }

Some files were not shown because too many files have changed in this diff Show More