limepotato/jormungandr-bite
1
0
Fork 0
mirror of https://iceshrimp.dev/limepotato/jormungandr-bite.git synced 2024-11-22 09:57:29 -07:00
Code Issues Projects Releases Packages Wiki Activity Actions

Revert "Rename Vue files for consistency"

Browse source 
This reverts commit dad096ee4c4d085670b64c929bf46f65cd4c9c30.
This commit is contained in:
Laura Hausmann 2023-10-25 20:30:32 +02:00
parent 949cac91bd
commit a63ad0c132
No known key found for this signature in database
GPG key ID: D044E84C5BE01605
454 changed files with 4260 additions and 4530 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/SigninDialog.vue")), defineAsyncComponent(() => import("@/components/MkSigninDialog.vue")),
{}, {},
{ {
done: (res) => { done: (res) => {
@ -171,7 +171,7 @@ export async function openAccountMenu(
function createAccount() { function createAccount() {
popup( popup(
defineAsyncComponent(() => import("@/components/SignupDialog.vue")), defineAsyncComponent(() => import("@/components/MkSignupDialog.vue")),
{}, {},
{ {
done: (res) => { done: (res) => {

37
packages/client/src/components/AbuseReport.vue → packages/client/src/components/MkAbuseReport.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">
<A <MkA
v-user-preview="report.targetUserId" v-user-preview="report.targetUserId"
class="info" class="info"
:to="`/user-info/${report.targetUserId}`" :to="`/user-info/${report.targetUserId}`"
> >
<Avatar <MkAvatar
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">
<UserName class="name" :user="report.targetUser" /> <MkUserName class="name" :user="report.targetUser" />
<Acct <MkAcct
class="acct" class="acct"
:user="report.targetUser" :user="report.targetUser"
style="display: block" style="display: block"
/> />
</div> </div>
</A> </MkA>
<KeyValue class="_formBlock"> <MkKeyValue 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()
}} }}
(<Time :time="report.targetUser.createdAt" />)</template (<MkTime :time="report.targetUser.createdAt" />)</template
> >
</KeyValue> </MkKeyValue>
</div> </div>
<div class="detail"> <div class="detail">
<div> <div>
@ -37,16 +37,15 @@
</div> </div>
<hr /> <hr />
<div> <div>
{{ i18n.ts.reporter }}: {{ i18n.ts.reporter }}: <MkAcct :user="report.reporter" />
<Acct :user="report.reporter" />
</div> </div>
<div v-if="report.assignee"> <div v-if="report.assignee">
{{ i18n.ts.moderator }}: {{ i18n.ts.moderator }}:
<Acct :user="report.assignee" /> <MkAcct :user="report.assignee" />
</div> </div>
<div><Time :time="report.createdAt" /></div> <div><MkTime :time="report.createdAt" /></div>
<div class="action"> <div class="action">
<Switch <MkSwitch
v-model="forward" v-model="forward"
:disabled=" :disabled="
report.targetUser.host == null || report.resolved report.targetUser.host == null || report.resolved
@ -56,19 +55,19 @@
<template #caption>{{ <template #caption>{{
i18n.ts.forwardReportIsAnonymous i18n.ts.forwardReportIsAnonymous
}}</template> }}</template>
</Switch> </MkSwitch>
<Button v-if="!report.resolved" primary @click="resolve">{{ <MkButton v-if="!report.resolved" primary @click="resolve">{{
i18n.ts.abuseMarkAsResolved i18n.ts.abuseMarkAsResolved
}}</Button> }}</MkButton>
</div> </div>
</div> </div>
</div> </div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import Button from "@/components/Button.vue"; import MkButton from "@/components/MkButton.vue";
import Switch from "@/components/form/Switch.vue"; import MkSwitch from "@/components/form/switch.vue";
import KeyValue from "@/components/KeyValue.vue"; import MkKeyValue from "@/components/MkKeyValue.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/AbuseReportWindow.vue → packages/client/src/components/MkAbuseReportWindow.vue
View file

@ -13,28 +13,26 @@
></i> ></i>
<I18n :src="i18n.ts.reportAbuseOf" tag="span"> <I18n :src="i18n.ts.reportAbuseOf" tag="span">
<template #name> <template #name>
<b> <b><MkAcct :user="user" /></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">
<Textarea v-model="comment"> <MkTextarea 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>
</Textarea> </MkTextarea>
</div> </div>
<div class="_section"> <div class="_section">
<Button <MkButton
primary primary
full full
:disabled="comment.length === 0" :disabled="comment.length === 0"
@click="send" @click="send"
>{{ i18n.ts.send }}</Button >{{ i18n.ts.send }}</MkButton
> >
</div> </div>
</div> </div>
@ -44,9 +42,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/Window.vue"; import XWindow from "@/components/MkWindow.vue";
import Textarea from "@/components/form/Textarea.vue"; import MkTextarea from "@/components/form/textarea.vue";
import Button from "@/components/Button.vue"; import MkButton from "@/components/MkButton.vue";
import * as os from "@/os"; import * as os from "@/os";
import { i18n } from "@/i18n"; import { i18n } from "@/i18n";

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

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

@ -1,15 +1,15 @@
<template> <template>
<Modal ref="modal" :z-priority="'middle'" @closed="$emit('closed')"> <MkModal ref="modal" :z-priority="'middle'" @closed="$emit('closed')">
<div :class="$style.root"> <div :class="$style.root">
<div :class="$style.title"> <div :class="$style.title">
<Sparkle v-if="isGoodNews">{{ title }}</Sparkle> <MkSparkle v-if="isGoodNews">{{ title }}</MkSparkle>
<p v-else>{{ title }}</p> <p v-else>{{ title }}</p>
</div> </div>
<div :class="$style.time"> <div :class="$style.time">
<Time :time="announcement.createdAt" /> <MkTime :time="announcement.createdAt" />
<div v-if="announcement.updatedAt"> <div v-if="announcement.updatedAt">
{{ i18n.ts.updatedAt }}: {{ i18n.ts.updatedAt }}:
<Time :time="announcement.createdAt" /> <MkTime :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"
/> />
<Button :class="$style.gotIt" primary full @click="gotIt()">{{ <MkButton :class="$style.gotIt" primary full @click="gotIt()">{{
i18n.ts.gotIt i18n.ts.gotIt
}}</Button> }}</MkButton>
</div> </div>
</Modal> </MkModal>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { shallowRef } from "vue"; import { shallowRef } from "vue";
import Modal from "@/components/Modal.vue"; import MkModal from "@/components/MkModal.vue";
import Sparkle from "@/components/Sparkle.vue"; import MkSparkle from "@/components/MkSparkle.vue";
import Button from "@/components/Button.vue"; import MkButton from "@/components/MkButton.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 Modal>>(); const modal = shallowRef<InstanceType<typeof MkModal>>();
const gotIt = () => { const gotIt = () => {
modal.value.close(); modal.value.close();

2
packages/client/src/components/Autocomplete.vue → packages/client/src/components/MkAutocomplete.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">
<UserName :key="user.id" :user="user" /> <MkUserName :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/Avatars.vue → packages/client/src/components/MkAvatars.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">
<Avatar :user="user" :show-indicator="true" class="avatar" /> <MkAvatar :user="user" :show-indicator="true" class="avatar" />
</div> </div>
</div> </div>
</template> </template>

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

@ -12,7 +12,7 @@
<slot></slot> <slot></slot>
</div> </div>
</button> </button>
<A <MkA
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>
</A> </MkA>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>

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

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

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

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

@ -1,5 +1,5 @@
<template> <template>
<Pagination :pagination="pagination"> <MkPagination :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 }">
<ChannelPreview <MkChannelPreview
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>
</Pagination> </MkPagination>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import ChannelPreview from "@/components/ChannelPreview.vue"; import MkChannelPreview from "@/components/MkChannelPreview.vue";
import type { Paging } from "@/components/Pagination.vue"; import type { Paging } from "@/components/MkPagination.vue";
import Pagination from "@/components/Pagination.vue"; import MkPagination from "@/components/MkPagination.vue";
import { i18n } from "@/i18n"; import { i18n } from "@/i18n";
import {instance} from "@/instance"; import {instance} from "@/instance";

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

@ -1,5 +1,5 @@
<template> <template>
<A :to="`/channels/${channel.id}`" class="eftoefju _panel" tabindex="-1"> <MkA :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 }}: <Time :time="channel.lastNotedAt" /> {{ i18n.ts.updatedAt }}: <MkTime :time="channel.lastNotedAt" />
</span> </span>
</footer> </footer>
</A> </MkA>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>

2
packages/client/src/components/Chart.vue → packages/client/src/components/MkChart.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">
<Loading /> <MkLoading />
</div> </div>
</div> </div>
</template> </template>

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

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

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

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

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

@ -11,8 +11,8 @@
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import XModalWindow from "@/components/ModalWindow.vue"; import XModalWindow from "@/components/MkModalWindow.vue";
import XCheatSheet from "@/pages/MfmCheatsheet.vue"; import XCheatSheet from "@/pages/mfm-cheat-sheet.vue";
import { i18n } from "@/i18n"; import { i18n } from "@/i18n";
const emit = defineEmits<{ const emit = defineEmits<{
@ -32,7 +32,6 @@ 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;

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

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

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

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

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

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

@ -6,15 +6,15 @@
:style="{ zIndex }" :style="{ zIndex }"
@contextmenu.prevent.stop="() => {}" @contextmenu.prevent.stop="() => {}"
> >
<Menu :items="items" :align="'left'" @close="$emit('closed')" /> <MkMenu :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 Menu from "./Menu.vue"; import MkMenu from "./MkMenu.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/CropperDialog.vue → packages/client/src/components/MkCropperDialog.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">
<Loading /> <MkLoading />
</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/ModalWindow.vue"; import XModalWindow from "@/components/MkModalWindow.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,7 +144,6 @@ 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/CwButton.vue → packages/client/src/components/MkCwButton.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/DateSeparatedList.vue → packages/client/src/components/MkDateSeparatedList.vue
View file

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

@ -1,5 +1,5 @@
<template> <template>
<Modal <MkModal
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>
<Loading <MkLoading
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>
<Input <MkInput
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>
</Input> </MkInput>
<Textarea <MkTextarea
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"
> >
</Textarea> </MkTextarea>
<Select v-if="select" v-model="selectedValue" autofocus> <MkSelect 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>
</Select> </MkSelect>
<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">
<Button <MkButton
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
}}</Button }}</MkButton
> >
<Button <MkButton
v-if="showCancelButton || input || select" v-if="showCancelButton || input || select"
inline inline
@click="cancel" @click="cancel"
>{{ i18n.ts.cancel }}</Button >{{ i18n.ts.cancel }}</MkButton
> >
</div> </div>
<div v-else> <div v-else>
<Button <MkButton
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 }}
</Button> </MkButton>
<Button <MkButton
v-if="showCancelButton || input || select" v-if="showCancelButton || input || select"
inline inline
@click="cancel" @click="cancel"
>{{ i18n.ts.no }}</Button >{{ i18n.ts.no }}</MkButton
> >
</div> </div>
</div> </div>
<div v-if="actions" :class="$style.buttons"> <div v-if="actions" :class="$style.buttons">
<Button <MkButton
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 }}</Button >{{ action.text }}</MkButton
> >
</div> </div>
</div> </div>
</Modal> </MkModal>
</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 Modal from "@/components/Modal.vue"; import MkModal from "@/components/MkModal.vue";
import Button from "@/components/Button.vue"; import MkButton from "@/components/MkButton.vue";
import Input from "@/components/form/Input.vue"; import MkInput from "@/components/form/input.vue";
import Textarea from "@/components/form/Textarea.vue"; import MkTextarea from "@/components/form/textarea.vue";
import Select from "@/components/form/Select.vue"; import MkSelect 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 Modal>>(); const modal = shallowRef<InstanceType<typeof MkModal>>();
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 Input>(); const inputEl = ref<typeof MkInput>();
function done(canceled: boolean, result?) { function done(canceled: boolean, result?) {
emit("done", { canceled, result }); emit("done", { canceled, result });

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

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

@ -22,7 +22,7 @@
<p>{{ i18n.ts.nsfw }}</p> <p>{{ i18n.ts.nsfw }}</p>
</div> </div>
<DriveFileThumbnail class="thumbnail" :file="file" fit="contain" /> <MkDriveFileThumbnail 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 DriveFileThumbnail from "@/components/DriveFileThumbnail.vue"; import MkDriveFileThumbnail from "@/components/MkDriveFileThumbnail.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/MediaCaption.vue")), defineAsyncComponent(() => import("@/components/MkMediaCaption.vue")),
{ {
title: i18n.ts.describeFile, title: i18n.ts.describeFile,
input: { input: {

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

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

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

20
packages/client/src/components/Drive.vue → packages/client/src/components/MkDrive.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>
<Button v-if="moreFolders" ref="moreFolders">{{ <MkButton v-if="moreFolders" ref="moreFolders">{{
i18n.ts.loadMore i18n.ts.loadMore
}}</Button> }}</MkButton>
</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>
<Button <MkButton
v-show="moreFiles" v-show="moreFiles"
ref="loadMoreFiles" ref="loadMoreFiles"
@click="fetchMoreFiles" @click="fetchMoreFiles"
>{{ i18n.ts.loadMore }}</Button >{{ i18n.ts.loadMore }}</MkButton
> >
</div> </div>
<div <div
@ -116,7 +116,7 @@
</p> </p>
</div> </div>
</div> </div>
<Loading v-if="fetching" /> <MkLoading 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 Button from "./Button.vue"; import MkButton from "./MkButton.vue";
import XNavFolder from "@/components/DriveNavFolder.vue"; import XNavFolder from "@/components/MkDrive.navFolder.vue";
import XFolder from "@/components/DriveFolder.vue"; import XFolder from "@/components/MkDrive.folder.vue";
import XFile from "@/components/DriveFile.vue"; import XFile from "@/components/MkDrive.file.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 Button>>(); const loadMoreFiles = ref<InstanceType<typeof MkButton>>();
const fileInput = ref<HTMLInputElement>(); const fileInput = ref<HTMLInputElement>();
const folder = ref<Misskey.entities.DriveFolder | null>(null); const folder = ref<Misskey.entities.DriveFolder | null>(null);

2
packages/client/src/components/DriveFileThumbnail.vue → packages/client/src/components/MkDriveFileThumbnail.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/ImgWithBlurhash.vue"; import ImgWithBlurhash from "@/components/MkImgWithBlurhash.vue";
const props = defineProps<{ const props = defineProps<{
file: Misskey.entities.DriveFile; file: Misskey.entities.DriveFile;

4
packages/client/src/components/DriveSelectDialog.vue → packages/client/src/components/MkDriveSelectDialog.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/Drive.vue"; import XDrive from "@/components/MkDrive.vue";
import XModalWindow from "@/components/ModalWindow.vue"; import XModalWindow from "@/components/MkModalWindow.vue";
import number from "@/filters/number"; import number from "@/filters/number";
import { i18n } from "@/i18n"; import { i18n } from "@/i18n";

4
packages/client/src/components/DriveWindow.vue → packages/client/src/components/MkDriveWindow.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/Drive.vue"; import XDrive from "@/components/MkDrive.vue";
import XWindow from "@/components/Window.vue"; import XWindow from "@/components/MkWindow.vue";
import { i18n } from "@/i18n"; import { i18n } from "@/i18n";
defineProps<{ defineProps<{

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

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

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

@ -28,7 +28,7 @@
tabindex="0" tabindex="0"
@click="chosen(emoji, $event)" @click="chosen(emoji, $event)"
> >
<!--<Emoji v-if="emoji.char != null" :emoji="emoji.char"/>--> <!--<MkEmoji 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)"
> >
<Emoji class="emoji" :emoji="emoji.emoji" /> <MkEmoji 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)"
> >
<Emoji <MkEmoji
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)"
> >
<Emoji <MkEmoji
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/EmojiPickerSection.vue"; import XSection from "@/components/MkEmojiPicker.section.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/Ripple.vue"; import Ripple from "@/components/MkRipple.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/EmojiPickerDialog.vue → packages/client/src/components/MkEmojiPickerDialog.vue
View file

@ -1,5 +1,5 @@
<template> <template>
<Modal <MkModal
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')"
> >
<EmojiPicker <MkEmojiPicker
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"
/> />
</Modal> </MkModal>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { ref, onMounted, onBeforeUnmount } from "vue"; import { ref, onMounted, onBeforeUnmount } from "vue";
import Modal from "@/components/Modal.vue"; import MkModal from "@/components/MkModal.vue";
import EmojiPicker from "@/components/EmojiPicker.vue"; import MkEmojiPicker from "@/components/MkEmojiPicker.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 Modal>>(); const modal = ref<InstanceType<typeof MkModal>>();
const picker = ref<InstanceType<typeof EmojiPicker>>(); const picker = ref<InstanceType<typeof MkEmojiPicker>>();
function checkForShift(ev?: MouseEvent) { function checkForShift(ev?: MouseEvent) {
if (ev?.shiftKey) return; if (ev?.shiftKey) return;

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

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

@ -1,12 +1,12 @@
<template> <template>
<div> <div>
<Pagination <MkPagination
v-slot="{ items }" v-slot="{ items }"
:pagination="pagination" :pagination="pagination"
class="urempief" class="urempief"
:class="{ grid: viewMode === 'grid' }" :class="{ grid: viewMode === 'grid' }"
> >
<A <MkA
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>
<DriveFileThumbnail <MkDriveFileThumbnail
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>
<Acct v-if="file.user" :user="file.user" /> <MkAcct 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 }}:
<Time :time="file.createdAt" mode="detail" <MkTime :time="file.createdAt" mode="detail"
/></span> /></span>
</div> </div>
</div> </div>
</A> </MkA>
</Pagination> </MkPagination>
</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 Switch from "@/components/ui/Switch.vue"; import MkSwitch from "@/components/ui/switch.vue";
import Pagination from "@/components/Pagination.vue"; import MkPagination from "@/components/MkPagination.vue";
import DriveFileThumbnail from "@/components/DriveFileThumbnail.vue"; import MkDriveFileThumbnail from "@/components/MkDriveFileThumbnail.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,7 +72,6 @@ const props = defineProps<{
0% { 0% {
opacity: 1; opacity: 1;
} }
50% { 50% {
opacity: 0; opacity: 0;
} }

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

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

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

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

@ -14,7 +14,7 @@
@submit.prevent="onSubmit" @submit.prevent="onSubmit"
> >
<div class="main _formRoot"> <div class="main _formRoot">
<Input <MkInput
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>
</Input> </MkInput>
<Input <MkInput
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>
</Input> </MkInput>
<Button <MkButton
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 }}</Button >{{ i18n.ts.send }}</MkButton
> >
</div> </div>
<div class="sub"> <div class="sub">
<A to="/about" class="_link">{{ <MkA to="/about" class="_link">{{
i18n.ts._forgotPassword.ifNoEmail i18n.ts._forgotPassword.ifNoEmail
}}</A> }}</MkA>
</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/ModalWindow.vue"; import XModalWindow from "@/components/MkModalWindow.vue";
import Button from "@/components/Button.vue"; import MkButton from "@/components/MkButton.vue";
import Input from "@/components/form/Input.vue"; import MkInput 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/FormDialog.vue → packages/client/src/components/MkFormDialog.vue
View file

@ -14,7 +14,7 @@
{{ title }} {{ title }}
</template> </template>
<Spacer :margin-min="20" :margin-max="32"> <MkSpacer :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>
<Button <MkButton
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>
</Button> </MkButton>
</template> </template>
</div> </div>
</Spacer> </MkSpacer>
</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 Button from "./Button.vue"; import MkButton from "./MkButton.vue";
import FormRadios from "./form/Radios.vue"; import FormRadios from "./form/radios.vue";
import XModalWindow from "@/components/ModalWindow.vue"; import XModalWindow from "@/components/MkModalWindow.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,
Button, MkButton,
FormRadios, FormRadios,
}, },

2
packages/client/src/components/Formula.vue → packages/client/src/components/MkFormula.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/FormulaCore.vue"), () => import("@/components/MkFormulaCore.vue"),
), ),
}, },
props: { props: {

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

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

@ -1,5 +1,5 @@
<template> <template>
<A :to="`/gallery/${post.id}`" class="ttasepnz _panel"> <MkA :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>
<Avatar :user="post.user" class="avatar" /> <MkAvatar :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>
</A> </MkA>
</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/ImgWithBlurhash.vue"; import ImgWithBlurhash from "@/components/MkImgWithBlurhash.vue";
const props = defineProps<{ const props = defineProps<{
post: any; post: any;

7
packages/client/src/components/WebSearch.vue → packages/client/src/components/MkGoogle.vue
View file

@ -11,7 +11,7 @@
<script lang="ts" setup> <script lang="ts" setup>
import { ref } from "vue"; import { ref } from "vue";
import { i18n } from "@/i18n"; import { i18n } from "@/i18n";
import { searchEngine } from "@/config"; import { searchEngine } from "@/config"
const props = defineProps<{ const props = defineProps<{
q: string; q: string;
@ -20,7 +20,10 @@ const props = defineProps<{
const query = ref(props.q); const query = ref(props.q);
const search = () => { const search = () => {
window.open(`${searchEngine}${query.value}`, "_blank"); window.open(
`${searchEngine}${query.value}`,
"_blank",
);
}; };
</script> </script>

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

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

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

@ -1,5 +1,5 @@
<template> <template>
<Modal <MkModal
ref="modal" ref="modal"
:z-priority="'middle'" :z-priority="'middle'"
@click="modal.close()" @click="modal.close()"
@ -22,7 +22,7 @@
> >
</footer> </footer>
</div> </div>
</Modal> </MkModal>
</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 Modal from "@/components/Modal.vue"; import MkModal from "@/components/MkModal.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 Modal>>(); const modal = $ref<InstanceType<typeof MkModal>>();
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>

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

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

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

@ -19,13 +19,13 @@
{{ instance.softwareVersion }}</span {{ instance.softwareVersion }}</span
> >
</div> </div>
<MiniChart v-if="chartValues" class="chart" :src="chartValues" /> <MkMiniChart 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 MiniChart from "@/components/MiniChart.vue"; import MkMiniChart from "@/components/MkMiniChart.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/InstanceSelectDialog.vue → packages/client/src/components/MkInstanceSelectDialog.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">
<Input <MkInput
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>
</Input> </MkInput>
</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 Input from "@/components/form/Input.vue"; import MkInput from "@/components/form/input.vue";
import XModalWindow from "@/components/ModalWindow.vue"; import XModalWindow from "@/components/MkModalWindow.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/InstanceStats.vue → packages/client/src/components/MkInstanceStats.vue
View file

@ -1,10 +1,10 @@
<template> <template>
<div :class="$style.root"> <div :class="$style.root">
<Folder class="item"> <MkFolder class="item">
<template #header>Chart</template> <template #header>Chart</template>
<div :class="$style.chart"> <div :class="$style.chart">
<div class="selects"> <div class="selects">
<Select v-model="chartSrc" style="margin: 0; flex: 1"> <MkSelect 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>
</Select> </MkSelect>
<Select v-model="chartSpan" style="margin: 0 0 0 10px"> <MkSelect 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>
</Select> </MkSelect>
</div> </div>
<div class="chart _panel"> <div class="chart _panel">
<ChartComp <MkChart
:src="chartSrc" :src="chartSrc"
:span="chartSpan" :span="chartSpan"
:limit="chartLimit" :limit="chartLimit"
:detailed="true" :detailed="true"
></ChartComp> ></MkChart>
</div> </div>
</div> </div>
</Folder> </MkFolder>
<Folder class="item"> <MkFolder class="item">
<template #header>Active users heatmap</template> <template #header>Active users heatmap</template>
<Select v-model="heatmapSrc" style="margin: 0 0 12px 0"> <MkSelect 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>
</Select> </MkSelect>
<div class="_panel" :class="$style.heatmap"> <div class="_panel" :class="$style.heatmap">
<Heatmap :src="heatmapSrc" /> <MkHeatmap :src="heatmapSrc" />
</div> </div>
</Folder> </MkFolder>
<Folder class="item"> <MkFolder 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>
</Folder> </MkFolder>
</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 Select from "@/components/form/Select.vue"; import MkSelect from "@/components/form/select.vue";
import ChartComp from "@/components/Chart.vue"; import MkChart from "@/components/MkChart.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 Heatmap from "@/components/Heatmap.vue"; import MkHeatmap from "@/components/MkHeatmap.vue";
import Folder from "@/components/Folder.vue"; import MkFolder from "@/components/MkFolder.vue";
import { initChart } from "@/scripts/init-chart"; import { initChart } from "@/scripts/init-chart";
initChart(); initChart();

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

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

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

@ -1,5 +1,5 @@
<template> <template>
<Modal <MkModal
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>
<A <MkA
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>
</A> </MkA>
</template> </template>
</div> </div>
</div> </div>
</Modal> </MkModal>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import {} from "vue"; import {} from "vue";
import Modal from "@/components/Modal.vue"; import MkModal from "@/components/MkModal.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 Modal>>(); const modal = $ref<InstanceType<typeof MkModal>>();
const menu = defaultStore.state.menu; const menu = defaultStore.state.menu;

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

@ -1,6 +1,6 @@
<template> <template>
<component <component
:is="self ? 'A' : 'a'" :is="self ? 'MkA' : '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,7 +39,9 @@ const el = $ref();
useTooltip($$(el), (showing) => { useTooltip($$(el), (showing) => {
os.popup( os.popup(
defineAsyncComponent(() => import("@/components/UrlPreviewPopup.vue")), defineAsyncComponent(
() => import("@/components/MkUrlPreviewPopup.vue"),
),
{ {
showing, showing,
url: props.url, url: props.url,

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

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

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

12
packages/client/src/components/Media.vue → packages/client/src/components/MkMedia.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/ImgWithBlurhash.vue"; import ImgWithBlurhash from "@/components/MkImgWithBlurhash.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,7 +190,6 @@ 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));
@ -212,7 +211,6 @@ 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);
} }
@ -232,19 +230,16 @@ 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;
@ -252,11 +247,9 @@ 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;
@ -266,11 +259,9 @@ 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,
@ -278,7 +269,6 @@ 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/MediaBanner.vue → packages/client/src/components/MkMediaBanner.vue
View file

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

@ -1,5 +1,5 @@
<template> <template>
<Modal ref="modal" @click="done(true)" @closed="$emit('closed')"> <MkModal 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"
> >
<Button <MkButton
inline inline
primary primary
:disabled="remainingLength < 0" :disabled="remainingLength < 0"
@click="ok" @click="ok"
>{{ i18n.ts.ok }}</Button >{{ i18n.ts.ok }}</MkButton
> >
<Button inline @click="caption">{{ <MkButton inline @click="caption">{{
i18n.ts.caption i18n.ts.caption
}}</Button> }}</MkButton>
<Button inline @click="cancel">{{ <MkButton inline @click="cancel">{{
i18n.ts.cancel i18n.ts.cancel
}}</Button> }}</MkButton>
</div> </div>
</div> </div>
</div> </div>
@ -62,7 +62,7 @@
</footer> </footer>
</div> </div>
</div> </div>
</Modal> </MkModal>
</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 Modal from "@/components/Modal.vue"; import MkModal from "@/components/MkModal.vue";
import Button from "@/components/Button.vue"; import MkButton from "@/components/MkButton.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: {
Modal, MkModal,
Button, MkButton,
}, },
props: { props: {
@ -210,22 +210,18 @@ 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;
@ -286,7 +282,6 @@ export default defineComponent({
} }
} }
} }
.hdrwpsaf { .hdrwpsaf {
display: flex; display: flex;
flex-direction: column; flex-direction: column;

6
packages/client/src/components/MediaList.vue → packages/client/src/components/MkMediaList.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/MediaBanner.vue"; import XBanner from "@/components/MkMediaBanner.vue";
import XMedia from "@/components/Media.vue"; import XMedia from "@/components/MkMedia.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,7 +198,6 @@ 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;
@ -279,7 +278,6 @@ 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/Mention.vue → packages/client/src/components/MkMention.vue
View file

@ -1,5 +1,5 @@
<template> <template>
<A <MkA
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>
</A> </MkA>
<a <a
v-else v-else
class="mention" class="mention"

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

@ -1,6 +1,6 @@
<template> <template>
<div ref="el" class="sfhdhdhr" tabindex="-1"> <div ref="el" class="sfhdhdhr" tabindex="-1">
<Menu <MkMenu
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 Menu from "./Menu.vue"; import MkMenu from "./MkMenu.vue";
import { MenuItem } from "@/types/menu"; import { MenuItem } from "@/types/menu";
const props = defineProps<{ const props = defineProps<{

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

@ -28,11 +28,9 @@
v-else-if="item.type === 'pending'" v-else-if="item.type === 'pending'"
class="pending item" class="pending item"
> >
<span> <span><MkEllipsis /></span>
<Ellipsis />
</span> </span>
</span> <MkA
<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"
@ -45,7 +43,7 @@
class="ph-fw ph-lg" class="ph-fw ph-lg"
:class="item.icon" :class="item.icon"
></i> ></i>
<Avatar <MkAvatar
v-if="item.avatar" v-if="item.avatar"
:user="item.avatar" :user="item.avatar"
class="avatar" class="avatar"
@ -62,7 +60,7 @@
}" }"
><i class="ph-circle ph-fill"></i ><i class="ph-circle ph-fill"></i
></span> ></span>
</A> </MkA>
<a <a
v-else-if="item.type === 'a'" v-else-if="item.type === 'a'"
:href="item.href" :href="item.href"
@ -99,8 +97,11 @@
@mouseenter.passive="onItemMouseEnter(item)" @mouseenter.passive="onItemMouseEnter(item)"
@mouseleave.passive="onItemMouseLeave(item)" @mouseleave.passive="onItemMouseLeave(item)"
> >
<Avatar :user="item.user" class="avatar" disableLink /> <MkAvatar
<UserName :user="item.user" /> :user="item.user"
class="avatar"
disableLink
/><MkUserName :user="item.user" />
<span <span
v-if="item.indicate" v-if="item.indicate"
class="indicator" class="indicator"
@ -141,8 +142,10 @@
}}</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; margin-right: unset" style="margin-left: auto;
></i> margin-right: unset;"
></i
>
</button> </button>
<button <button
v-else-if="!item.hidden" v-else-if="!item.hidden"
@ -162,7 +165,7 @@
class="ph-fw ph-lg" class="ph-fw ph-lg"
:class="item.icon" :class="item.icon"
></i> ></i>
<Avatar <MkAvatar
v-if="item.avatar" v-if="item.avatar"
:user="item.avatar" :user="item.avatar"
class="avatar" class="avatar"
@ -214,13 +217,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("./MenuChild.vue")); const XChild = defineAsyncComponent(() => import("./MkMenu.child.vue"));
const focusTrap = ref(); const focusTrap = ref();
const props = defineProps<{ const props = defineProps<{
@ -389,7 +392,6 @@ onBeforeUnmount(() => {
background: var(--accentedBg); background: var(--accentedBg);
} }
} }
&:focus-visible:before { &:focus-visible:before {
outline: auto; outline: auto;
} }

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

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

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

@ -1,5 +1,5 @@
<template> <template>
<Modal ref="modal" @click="$emit('click')" @closed="$emit('closed')"> <MkModal ref="modal" @click="$emit('click')" @closed="$emit('closed')">
<div <div
ref="rootEl" ref="rootEl"
class="hrmcaedk _narrow_" class="hrmcaedk _narrow_"
@ -35,26 +35,25 @@
</button> </button>
</div> </div>
<div class="body"> <div class="body">
<StickyContainer> <MkStickyContainer>
<template #header> <template #header
<PageHeader ><MkPageHeader
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" />
</StickyContainer> </MkStickyContainer>
</div> </div>
</div> </div>
</Modal> </MkModal>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { ComputedRef, provide } from "vue"; import { ComputedRef, provide } from "vue";
import Modal from "@/components/Modal.vue"; import MkModal from "@/components/MkModal.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";
@ -83,7 +82,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 Modal>>(); let modal = $ref<InstanceType<typeof MkModal>>();
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/ModalWindow.vue → packages/client/src/components/MkModalWindow.vue
View file

@ -1,5 +1,5 @@
<template> <template>
<Modal <MkModal
ref="modal" ref="modal"
:prefer-type="'dialog'" :prefer-type="'dialog'"
@click="onBgClick" @click="onBgClick"
@ -58,12 +58,12 @@
</div> </div>
</div> </div>
</FocusTrap> </FocusTrap>
</Modal> </MkModal>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { FocusTrap } from "focus-trap-vue"; import { FocusTrap } from "focus-trap-vue";
import Modal from "./Modal.vue"; import MkModal from "./MkModal.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 Modal>>(); let modal = $shallowRef<InstanceType<typeof MkModal>>();
let rootEl = $shallowRef<HTMLElement>(); let rootEl = $shallowRef<HTMLElement>();
let headerEl = $shallowRef<HTMLElement>(); let headerEl = $shallowRef<HTMLElement>();

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

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

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

@ -11,7 +11,7 @@
:class="{ renote: isRenote }" :class="{ renote: isRenote }"
:id="appearNote.id" :id="appearNote.id"
> >
<NoteSub <MkNoteSub
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>
<A <MkA
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
> >
<UserName :user="note.user" /> <MkUserName :user="note.user" />
</A> </MkA>
</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>
<Time :time="note.createdAt" /> <MkTime :time="note.createdAt" />
</button> </button>
<Visibility :note="note" /> <MkVisibility :note="note" />
</div> </div>
</div> </div>
<div v-if="collapsedReply && appearNote.reply" class="info"> <div v-if="collapsedReply && appearNote.reply" class="info">
<Avatar class="avatar" :user="appearNote.reply.user" /> <MkAvatar class="avatar" :user="appearNote.reply.user" />
<UserName <MkUserName
class="username" class="username"
:user="appearNote.reply.user" :user="appearNote.reply.user"
></UserName> ></MkUserName>
<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">
<Avatar class="avatar" :user="appearNote.user" /> <MkAvatar class="avatar" :user="appearNote.user" />
<XNoteHeader class="header" :note="appearNote" /> <XNoteHeader class="header" :note="appearNote" />
</div> </div>
<div class="body"> <div class="body">
<SubNoteContent <MkSubNoteContent
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)"
></SubNoteContent> ></MkSubNoteContent>
<div v-if="translating || translation" class="translation"> <div v-if="translating || translation" class="translation">
<Loading v-if="translating" mini /> <MkLoading 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"
> >
<A <MkA
v-if="detailedView" v-if="detailedView"
class="created-at" class="created-at"
:to="notePage(appearNote)" :to="notePage(appearNote)"
> >
<Time :time="appearNote.createdAt" mode="absolute" /> <MkTime :time="appearNote.createdAt" mode="absolute" />
</A> </MkA>
<A <MkA
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 }}</A {{ appearNote.channel.name }}</MkA
> >
</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>
<A <MkA
v-user-preview="note.userId" v-user-preview="note.userId"
class="name" class="name"
:to="userPage(note.user)" :to="userPage(note.user)"
> >
<UserName :user="note.user" /> <MkUserName :user="note.user" />
</A> </MkA>
</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 NoteSub from "@/components/NoteSub.vue"; import MkNoteSub from "@/components/MkNoteSub.vue";
import SubNoteContent from "./SubNoteContent.vue"; import MkSubNoteContent from "./MkSubNoteContent.vue";
import XNoteHeader from "@/components/NoteHeader.vue"; import XNoteHeader from "@/components/MkNoteHeader.vue";
import XNoteSimple from "@/components/NoteSimple.vue"; import XNoteSimple from "@/components/MkNoteSimple.vue";
import XMediaList from "@/components/MediaList.vue"; import XMediaList from "@/components/MkMediaList.vue";
import XCwButton from "@/components/CwButton.vue"; import XCwButton from "@/components/MkCwButton.vue";
import XPoll from "@/components/Poll.vue"; import XPoll from "@/components/MkPoll.vue";
import XRenoteButton from "@/components/RenoteButton.vue"; import XRenoteButton from "@/components/MkRenoteButton.vue";
import XReactionsViewer from "@/components/ReactionsViewer.vue"; import XReactionsViewer from "@/components/MkReactionsViewer.vue";
import XStarButton from "@/components/StarButton.vue"; import XStarButton from "@/components/MkStarButton.vue";
import XStarButtonNoEmoji from "@/components/StarButtonNoEmoji.vue"; import XStarButtonNoEmoji from "@/components/MkStarButtonNoEmoji.vue";
import XQuoteButton from "@/components/QuoteButton.vue"; import XQuoteButton from "@/components/MkQuoteButton.vue";
import UrlPreview from "@/components/UrlPreview.vue"; import MkUrlPreview from "@/components/MkUrlPreview.vue";
import Visibility from "@/components/Visibility.vue"; import MkVisibility from "@/components/MkVisibility.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,18 +668,15 @@ 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;
@ -694,7 +691,6 @@ 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;
@ -744,7 +740,6 @@ 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;
} }
@ -755,7 +750,6 @@ defineExpose({
&.collapsedReply { &.collapsedReply {
.line { .line {
opacity: 0.25; opacity: 0.25;
&::after { &::after {
content: ""; content: "";
position: absolute; position: absolute;
@ -768,12 +762,10 @@ 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;
@ -782,17 +774,14 @@ 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 {
@ -822,7 +811,6 @@ 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;
@ -833,36 +821,30 @@ 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);
@ -870,7 +852,6 @@ defineExpose({
} }
} }
} }
> .info { > .info {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
@ -880,31 +861,26 @@ 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;
@ -914,21 +890,17 @@ 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);
} }
@ -959,32 +931,25 @@ 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));
@ -1006,7 +971,6 @@ 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/NoteDetailed.vue → packages/client/src/components/MkNoteDetailed.vue
View file

@ -9,7 +9,7 @@
:tabindex="!isDeleted ? '-1' : null" :tabindex="!isDeleted ? '-1' : null"
:class="{ renote: isRenote }" :class="{ renote: isRenote }"
> >
<NoteSub <MkNoteSub
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"
/> />
<Loading v-else-if="note.reply" mini /> <MkLoading v-else-if="note.reply" mini />
<NoteSub <MkNoteSub
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"
/> />
<Note <MkNote
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"
></Note> ></MkNote>
<Tab v-model="tab" :style="'underline'" @update:modelValue="loadTab"> <MkTab 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>
</Tab> </MkTab>
<NoteSub <MkNoteSub
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"
/> />
<Loading v-else-if="tab === 'replies' && note.repliesCount > 0" /> <MkLoading v-else-if="tab === 'replies' && note.repliesCount > 0" />
<NoteSub <MkNoteSub
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"
/> />
<Loading v-else-if="tab === 'quotes' && directQuotes.length > 0" /> <MkLoading v-else-if="tab === 'quotes' && directQuotes.length > 0" />
<!-- <Pagination <!-- <MkPagination
v-if="tab === 'renotes'" v-if="tab === 'renotes'"
v-slot="{ items }" v-slot="{ items }"
ref="pagingComponent" ref="pagingComponent"
:pagination="pagination" :pagination="pagination"
> --> > -->
<UserCardMini <MkUserCardMini
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"
/> />
<!-- </Pagination> --> <!-- </MkPagination> -->
<Loading v-else-if="tab === 'renotes' && note.renoteCount > 0" /> <MkLoading 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">
<A <MkA
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">
<Avatar <MkAvatar
:user="item.user" :user="item.user"
class="avatar" class="avatar"
:show-indicator="true" :show-indicator="true"
/> />
<UserName :user="item.user" :nowrap="false" /> <MkUserName :user="item.user" :nowrap="false" />
</div> </div>
</A> </MkA>
</div> </div>
<Loading v-else-if="tab === 'clips' && clips.length > 0" /> <MkLoading v-else-if="tab === 'clips' && clips.length > 0" />
<ReactedUsers <MkReactedUsers
v-if="tab === 'reactions' && reactionsCount > 0" v-if="tab === 'reactions' && reactionsCount > 0"
:note-id="note.id" :note-id="note.id"
></ReactedUsers> ></MkReactedUsers>
</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>
<A <MkA
v-user-preview="note.userId" v-user-preview="note.userId"
class="name" class="name"
:to="userPage(note.user)" :to="userPage(note.user)"
> >
<UserName :user="note.user" /> <MkUserName :user="note.user" />
</A> </MkA>
</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 Tab from "@/components/Tab.vue"; import MkTab from "@/components/MkTab.vue";
import Note from "@/components/Note.vue"; import MkNote from "@/components/MkNote.vue";
import NoteSub from "@/components/NoteSub.vue"; import MkNoteSub from "@/components/MkNoteSub.vue";
import XStarButton from "@/components/StarButton.vue"; import XStarButton from "@/components/MkStarButton.vue";
import XRenoteButton from "@/components/RenoteButton.vue"; import XRenoteButton from "@/components/MkRenoteButton.vue";
import Pagination from "@/components/Pagination.vue"; import MkPagination from "@/components/MkPagination.vue";
import UserCardMini from "@/components/UserCardMini.vue"; import MkUserCardMini from "@/components/MkUserCardMini.vue";
import ReactedUsers from "@/components/ReactedUsers.vue"; import MkReactedUsers from "@/components/MkReactedUsers.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 Pagination>>(); // const pagingComponent = $ref<InstanceType<typeof MkPagination>>();
renotes = null; renotes = null;
function loadTab() { function loadTab() {
@ -420,10 +420,7 @@ 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.splice(replies.value.findIndex(p => p.id == id), 1);
replies.value.findIndex((p) => p.id == id),
1,
);
} }
break; break;
} }
@ -494,17 +491,14 @@ 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;
} }
@ -513,19 +507,16 @@ 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;
} }
@ -541,7 +532,6 @@ onUnmounted(() => {
.reply-to, .reply-to,
:deep(.more) { :deep(.more) {
position: relative; position: relative;
&::before { &::before {
content: ""; content: "";
position: absolute; position: absolute;
@ -555,25 +545,20 @@ 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;
@ -587,17 +572,14 @@ 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;
@ -609,29 +591,23 @@ 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;
} }
@ -641,18 +617,15 @@ 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;
} }
@ -673,7 +646,6 @@ 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;
@ -681,7 +653,6 @@ 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/NoteHeader.vue → packages/client/src/components/MkNoteHeader.vue
View file

@ -2,24 +2,22 @@
<header class="kkwtjztg"> <header class="kkwtjztg">
<div class="user-info"> <div class="user-info">
<div> <div>
<A <MkA
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
> >
<UserName :user="note.user" class="mkusername"> <MkUserName :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>
</UserName> </MkUserName>
</A> </MkA>
<div class="username"> <div class="username"><MkAcct :user="note.user" /></div>
<Acct :user="note.user" />
</div>
</div> </div>
<div> <div>
<div class="info"> <div class="info">
<A class="created-at" :to="notePage(note)"> <MkA class="created-at" :to="notePage(note)">
<Time :time="note.createdAt" /> <MkTime :time="note.createdAt" />
<i <i
v-if="note.updatedAt" v-if="note.updatedAt"
v-tooltip.noDelay=" v-tooltip.noDelay="
@ -35,10 +33,10 @@
class="ph-pencil ph-bold" class="ph-pencil ph-bold"
style="margin-left: 0.4rem" style="margin-left: 0.4rem"
></i> ></i>
</A> </MkA>
<Visibility :note="note" /> <MkVisibility :note="note" />
</div> </div>
<InstanceTicker <MkInstanceTicker
v-if="showTicker" v-if="showTicker"
class="ticker" class="ticker"
:instance="note.user.instance" :instance="note.user.instance"
@ -52,8 +50,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 Visibility from "@/components/Visibility.vue"; import MkVisibility from "@/components/MkVisibility.vue";
import InstanceTicker from "@/components/InstanceTicker.vue"; import MkInstanceTicker from "@/components/MkInstanceTicker.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";
@ -80,20 +78,17 @@ 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;
@ -102,27 +97,22 @@ 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;
@ -162,7 +152,6 @@ 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;
@ -174,7 +163,6 @@ 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/NotePreview.vue → packages/client/src/components/MkNotePreview.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">
<Avatar class="avatar" :user="$i" disableLink /> <MkAvatar class="avatar" :user="$i" disableLink />
<div class="main"> <div class="main">
<div class="header"> <div class="header">
<UserName :user="$i" /> <MkUserName :user="$i" />
</div> </div>
<div class="body"> <div class="body">
<div class="content"> <div class="content">

8
packages/client/src/components/NoteSimple.vue → packages/client/src/components/MkNoteSimple.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">
<Avatar class="avatar" :user="note.user" /> <MkAvatar 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">
<SubNoteContent class="text" :note="note" /> <MkSubNoteContent 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/NoteHeader.vue"; import XNoteHeader from "@/components/MkNoteHeader.vue";
import SubNoteContent from "@/components/SubNoteContent.vue"; import MkSubNoteContent from "@/components/MkSubNoteContent.vue";
const props = defineProps<{ const props = defineProps<{
note: misskey.entities.Note; note: misskey.entities.Note;

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

@ -20,7 +20,7 @@
:style="{ cursor: expandOnNoteClick ? 'pointer' : '' }" :style="{ cursor: expandOnNoteClick ? 'pointer' : '' }"
> >
<div class="avatar-container"> <div class="avatar-container">
<Avatar class="avatar" :user="appearNote.user" /> <MkAvatar 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">
<SubNoteContent <MkSubNoteContent
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">
<Loading v-if="translating" mini /> <MkLoading 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">
<NoteSub <MkNoteSub
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>
<A class="text _link" :to="notePage(note)" <MkA 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
></A> ></MkA>
</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>
<A <MkA
v-user-preview="note.userId" v-user-preview="note.userId"
class="name" class="name"
:to="userPage(note.user)" :to="userPage(note.user)"
> >
<UserName :user="note.user" /> <MkUserName :user="note.user" />
</A> </MkA>
</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/NoteHeader.vue"; import XNoteHeader from "@/components/MkNoteHeader.vue";
import SubNoteContent from "@/components/SubNoteContent.vue"; import MkSubNoteContent from "@/components/MkSubNoteContent.vue";
import XReactionsViewer from "@/components/ReactionsViewer.vue"; import XReactionsViewer from "@/components/MkReactionsViewer.vue";
import XStarButton from "@/components/StarButton.vue"; import XStarButton from "@/components/MkStarButton.vue";
import XStarButtonNoEmoji from "@/components/StarButtonNoEmoji.vue"; import XStarButtonNoEmoji from "@/components/MkStarButtonNoEmoji.vue";
import XRenoteButton from "@/components/RenoteButton.vue"; import XRenoteButton from "@/components/MkRenoteButton.vue";
import XQuoteButton from "@/components/QuoteButton.vue"; import XQuoteButton from "@/components/MkQuoteButton.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,16 +257,14 @@ 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[] = $computed( const replies: misskey.entities.Note[] =
() => $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;
@ -420,7 +418,6 @@ 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;
@ -438,7 +435,6 @@ 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;
@ -455,7 +451,6 @@ 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;
} }
@ -473,7 +468,6 @@ function noteClick(e) {
margin-top: 8px; margin-top: 8px;
} }
} }
> .footer { > .footer {
position: relative; position: relative;
z-index: 2; z-index: 2;
@ -485,18 +479,15 @@ 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;
@ -506,21 +497,17 @@ 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);
} }
@ -546,12 +533,10 @@ 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 {
@ -564,7 +549,6 @@ 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);
@ -573,22 +557,17 @@ 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;
} }
@ -599,7 +578,6 @@ 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;
@ -607,27 +585,22 @@ 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;
} }
@ -648,11 +621,9 @@ 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;
} }
@ -663,7 +634,6 @@ 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;
@ -671,7 +641,6 @@ 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);
@ -679,7 +648,6 @@ function noteClick(e) {
} }
} }
} }
.line { .line {
position: relative; position: relative;
z-index: 2; z-index: 2;
@ -689,7 +657,6 @@ 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;
@ -701,25 +668,21 @@ 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;
@ -727,18 +690,15 @@ 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;
@ -751,21 +711,17 @@ 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);
@ -775,27 +731,22 @@ 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,
@ -803,12 +754,10 @@ 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;
@ -816,11 +765,9 @@ 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/Notes.vue → packages/client/src/components/MkNotes.vue
View file

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

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

@ -6,12 +6,12 @@
:class="notification.type" :class="notification.type"
> >
<div class="head"> <div class="head">
<Avatar <MkAvatar
v-if="notification.type === 'pollEnded'" v-if="notification.type === 'pollEnded'"
class="icon" class="icon"
:user="notification.note.user" :user="notification.note.user"
/> />
<Avatar <MkAvatar
v-else-if="notification.user" v-else-if="notification.user"
class="icon" class="icon"
:user="notification.user" :user="notification.user"
@ -94,22 +94,21 @@
<span v-if="notification.type === 'pollEnded'">{{ <span v-if="notification.type === 'pollEnded'">{{
i18n.ts._notification.pollEnded i18n.ts._notification.pollEnded
}}</span> }}</span>
<A <MkA
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"
<UserName :user="notification.user" /> /></MkA>
</A>
<span v-else>{{ notification.header }}</span> <span v-else>{{ notification.header }}</span>
<Time <MkTime
v-if="withTime" v-if="withTime"
:time="notification.createdAt" :time="notification.createdAt"
class="time" class="time"
/> />
</header> </header>
<A <MkA
v-if="notification.type === 'reaction'" v-if="notification.type === 'reaction'"
class="text" class="text"
:to="notePage(notification.note)" :to="notePage(notification.note)"
@ -124,8 +123,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>
</A> </MkA>
<A <MkA
v-if="notification.type === 'renote'" v-if="notification.type === 'renote'"
class="text" class="text"
:to="notePage(notification.note)" :to="notePage(notification.note)"
@ -140,8 +139,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>
</A> </MkA>
<A <MkA
v-if="notification.type === 'reply'" v-if="notification.type === 'reply'"
class="text" class="text"
:to="notePage(notification.note)" :to="notePage(notification.note)"
@ -153,8 +152,8 @@
:nowrap="!full" :nowrap="!full"
:custom-emojis="notification.note.emojis" :custom-emojis="notification.note.emojis"
/> />
</A> </MkA>
<A <MkA
v-if="notification.type === 'mention'" v-if="notification.type === 'mention'"
class="text" class="text"
:to="notePage(notification.note)" :to="notePage(notification.note)"
@ -166,8 +165,8 @@
:nowrap="!full" :nowrap="!full"
:custom-emojis="notification.note.emojis" :custom-emojis="notification.note.emojis"
/> />
</A> </MkA>
<A <MkA
v-if="notification.type === 'quote'" v-if="notification.type === 'quote'"
class="text" class="text"
:to="notePage(notification.note)" :to="notePage(notification.note)"
@ -179,8 +178,8 @@
:nowrap="!full" :nowrap="!full"
:custom-emojis="notification.note.emojis" :custom-emojis="notification.note.emojis"
/> />
</A> </MkA>
<A <MkA
v-if="notification.type === 'pollVote'" v-if="notification.type === 'pollVote'"
class="text" class="text"
:to="notePage(notification.note)" :to="notePage(notification.note)"
@ -195,8 +194,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>
</A> </MkA>
<A <MkA
v-if="notification.type === 'pollEnded'" v-if="notification.type === 'pollEnded'"
class="text" class="text"
:to="notePage(notification.note)" :to="notePage(notification.note)"
@ -210,20 +209,19 @@
: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>
</A> </MkA>
<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">
<FollowButton <MkFollowButton
:user="notification.user" :user="notification.user"
:full="true" :full="true"
:hideMenu="true" :hideMenu="true"
/> /></div
</div> ></span>
</span>
<span <span
v-if="notification.type === 'followRequestAccepted'" v-if="notification.type === 'followRequestAccepted'"
class="text" class="text"
@ -243,8 +241,8 @@
<button class="_textButton" @click="rejectFollowRequest()"> <button class="_textButton" @click="rejectFollowRequest()">
{{ i18n.ts.reject }} {{ i18n.ts.reject }}
</button> </button>
</div> </div></span
</span> >
<span <span
v-if="notification.type === 'groupInvited'" v-if="notification.type === 'groupInvited'"
class="text" class="text"
@ -265,8 +263,8 @@
> >
{{ i18n.ts.reject }} {{ i18n.ts.reject }}
</button> </button>
</div> </div></span
</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>
@ -277,9 +275,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/ReactionIcon.vue"; import XReactionIcon from "@/components/MkReactionIcon.vue";
import FollowButton from "@/components/FollowButton.vue"; import MkFollowButton from "@/components/MkFollowButton.vue";
import XReactionTooltip from "@/components/ReactionTooltip.vue"; import XReactionTooltip from "@/components/MkReactionTooltip.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";
@ -399,7 +397,6 @@ 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;
} }
@ -522,7 +519,6 @@ useTooltip(reactionRef, (showing) => {
> span:first-child { > span:first-child {
opacity: 0.7; opacity: 0.7;
&::after { &::after {
content: ": "; content: ": ";
} }

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

@ -12,29 +12,27 @@
<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">
<Switch v-model="useGlobalSetting"> <MkSwitch v-model="useGlobalSetting">
{{ i18n.ts.useGlobalSetting }} {{ i18n.ts.useGlobalSetting }}
<template #caption>{{ <template #caption>{{
i18n.ts.useGlobalSettingDesc i18n.ts.useGlobalSettingDesc
}}</template> }}</template>
</Switch> </MkSwitch>
</div> </div>
<div v-if="!useGlobalSetting" class="_section _formRoot"> <div v-if="!useGlobalSetting" class="_section _formRoot">
<Info class="_formBlock">{{ <MkInfo class="_formBlock">{{ i18n.ts.notificationSettingDesc }}</MkInfo>
i18n.ts.notificationSettingDesc <MkButton inline @click="disableAll">{{
}}</Info>
<Button inline @click="disableAll">{{
i18n.ts.disableAll i18n.ts.disableAll
}}</Button> }}</MkButton>
<Button inline @click="enableAll">{{ <MkButton inline @click="enableAll">{{
i18n.ts.enableAll i18n.ts.enableAll
}}</Button> }}</MkButton>
<Switch <MkSwitch
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}`) }}</Switch >{{ i18n.t(`_notification._types.${ntype}`) }}</MkSwitch
> >
</div> </div>
</div> </div>
@ -44,10 +42,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 Switch from "./form/Switch.vue"; import MkSwitch from "./form/switch.vue";
import Info from "./Info.vue"; import MkInfo from "./MkInfo.vue";
import Button from "./Button.vue"; import MkButton from "./MkButton.vue";
import XModalWindow from "@/components/ModalWindow.vue"; import XModalWindow from "@/components/MkModalWindow.vue";
import { i18n } from "@/i18n"; import { i18n } from "@/i18n";
const emit = defineEmits<{ const emit = defineEmits<{

3
packages/client/src/components/NotificationToast.vue → packages/client/src/components/MkNotificationToast.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/Notification.vue"; import XNotification from "@/components/MkNotification.vue";
import * as os from "@/os"; import * as os from "@/os";
defineProps<{ defineProps<{
@ -44,7 +44,6 @@ 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/Notifications.vue → packages/client/src/components/MkNotifications.vue
View file

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

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

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

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

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

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

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

@ -1,5 +1,5 @@
<template> <template>
<A <MkA
: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>
</A> </MkA>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>

2
packages/client/src/components/PageWindow.vue → packages/client/src/components/MkPageWindow.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/Window.vue"; import XWindow from "@/components/MkWindow.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/Pagination.vue → packages/client/src/components/MkPagination.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">
<Loading v-if="fetching" /> <MkLoading v-if="fetching" />
<Error v-else-if="error" @retry="init()" /> <MkError 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"
> >
<Button <MkButton
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 }}
</Button> </MkButton>
<Loading v-else class="loading" /> <MkLoading 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"
> >
<Button <MkButton
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 }}
</Button> </MkButton>
<Loading v-else class="loading" /> <MkLoading 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 Button from "@/components/Button.vue"; import MkButton from "@/components/MkButton.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,7 +506,6 @@ 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;
@ -518,11 +517,9 @@ 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/Poll.vue → packages/client/src/components/MkPoll.vue
View file

44
packages/client/src/components/PollEditor.vue → packages/client/src/components/MkPollEditor.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">
<Input <MkInput
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)"
> >
</Input> </MkInput>
<button <button
class="_button" class="_button"
@click="remove(i)" @click="remove(i)"
@ -23,38 +23,42 @@
</button> </button>
</li> </li>
</ul> </ul>
<Button v-if="choices.length < 10" class="add" @click="add">{{ <MkButton v-if="choices.length < 10" class="add" @click="add">{{
i18n.ts.add i18n.ts.add
}}</Button> }}</MkButton>
<Button v-else class="add" disabled>{{ i18n.ts._poll.noMore }}</Button> <MkButton v-else class="add" disabled>{{
<Switch v-model="multiple">{{ i18n.ts._poll.canMultipleVote }}</Switch> i18n.ts._poll.noMore
}}</MkButton>
<MkSwitch v-model="multiple">{{
i18n.ts._poll.canMultipleVote
}}</MkSwitch>
<section> <section>
<div> <div>
<Select v-model="expiration" small> <MkSelect 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>
</Select> </MkSelect>
<section v-if="expiration === 'at'"> <section v-if="expiration === 'at'">
<Input v-model="atDate" small type="date" class="input"> <MkInput v-model="atDate" small type="date" class="input">
<template #label>{{ <template #label>{{
i18n.ts._poll.deadlineDate i18n.ts._poll.deadlineDate
}}</template> }}</template>
</Input> </MkInput>
<Input v-model="atTime" small type="time" class="input"> <MkInput v-model="atTime" small type="time" class="input">
<template #label>{{ <template #label>{{
i18n.ts._poll.deadlineTime i18n.ts._poll.deadlineTime
}}</template> }}</template>
</Input> </MkInput>
</section> </section>
<section v-else-if="expiration === 'after'"> <section v-else-if="expiration === 'after'">
<Input v-model="after" small type="number" class="input"> <MkInput v-model="after" small type="number" class="input">
<template #label>{{ i18n.ts._poll.duration }}</template> <template #label>{{ i18n.ts._poll.duration }}</template>
</Input> </MkInput>
<Select v-model="unit" small> <MkSelect v-model="unit" small>
<option value="second"> <option value="second">
{{ i18n.ts._time.second }} {{ i18n.ts._time.second }}
</option> </option>
@ -63,7 +67,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>
</Select> </MkSelect>
</section> </section>
</div> </div>
</section> </section>
@ -72,10 +76,10 @@
<script lang="ts" setup> <script lang="ts" setup>
import { ref, watch } from "vue"; import { ref, watch } from "vue";
import Input from "./form/Input.vue"; import MkInput from "./form/input.vue";
import Select from "./form/Select.vue"; import MkSelect from "./form/select.vue";
import Switch from "./form/Switch.vue"; import MkSwitch from "./form/switch.vue";
import Button from "./Button.vue"; import MkButton from "./MkButton.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/PopupMenu.vue → packages/client/src/components/MkPopupMenu.vue
View file

@ -1,5 +1,5 @@
<template> <template>
<Modal <MkModal
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"
> >
<Menu <MkMenu
: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()"
/> />
</Modal> </MkModal>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import {} from "vue"; import {} from "vue";
import Modal from "./Modal.vue"; import MkModal from "./MkModal.vue";
import Menu from "./Menu.vue"; import MkMenu from "./MkMenu.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 Modal>>(); let modal = $ref<InstanceType<typeof MkModal>>();
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>

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

@ -20,7 +20,7 @@
class="account _button" class="account _button"
@click="openAccountMenu" @click="openAccountMenu"
> >
<Avatar :user="postAccount ?? $i" class="avatar" /> <MkAvatar :user="postAccount ?? $i" class="avatar" />
</button> </button>
<div class="right"> <div class="right">
<span <span
@ -33,11 +33,7 @@
></span> ></span>
<button <button
ref="visibilityButton" ref="visibilityButton"
v-tooltip=" v-tooltip="$props.editId != null ? i18n.ts.cannotChangeScopeWhenEditing : i18n.ts.visibility"
$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"
@ -100,7 +96,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">
<Acct :user="u" /> <MkAcct :user="u" />
<button <button
class="_button" class="_button"
@click="removeVisibleUser(u)" @click="removeVisibleUser(u)"
@ -114,15 +110,15 @@
</button> </button>
</div> </div>
</div> </div>
<Info <MkInfo
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> </button></MkInfo
</Info> >
<input <input
v-show="useCw" v-show="useCw"
ref="cwInputEl" ref="cwInputEl"
@ -245,10 +241,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/NoteSimple.vue"; import XNoteSimple from "@/components/MkNoteSimple.vue";
import XNotePreview from "@/components/NotePreview.vue"; import XNotePreview from "@/components/MkNotePreview.vue";
import XPostFormAttaches from "@/components/PostFormAttaches.vue"; import XPostFormAttaches from "@/components/MkPostFormAttaches.vue";
import XPollEditor from "@/components/PollEditor.vue"; import XPollEditor from "@/components/MkPollEditor.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";
@ -258,7 +254,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 Info from "@/components/Info.vue"; import MkInfo from "@/components/MkInfo.vue";
import { i18n } from "@/i18n"; import { i18n } from "@/i18n";
import { instance } from "@/instance"; import { instance } from "@/instance";
import { import {
@ -268,7 +264,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/CheatSheetDialog.vue"; import XCheatSheet from "@/components/MkCheatSheetDialog.vue";
import { preprocess } from "@/scripts/preprocess"; import { preprocess } from "@/scripts/preprocess";
const modal = inject("modal"); const modal = inject("modal");
@ -640,7 +636,9 @@ function setVisibility() {
} }
os.popup( os.popup(
defineAsyncComponent(() => import("@/components/VisibilityPicker.vue")), defineAsyncComponent(
() => import("@/components/MkVisibilityPicker.vue"),
),
{ {
currentVisibility: visibility, currentVisibility: visibility,
currentLocalOnly: localOnly, currentLocalOnly: localOnly,
@ -729,12 +727,7 @@ async function onPaste(ev: ClipboardEvent) {
const paste = ev.clipboardData.getData("text"); const paste = ev.clipboardData.getData("text");
if ( if (!props.renote && !quoteId && paste.startsWith(url + "/notes/") && !props.editId) {
!props.renote &&
!quoteId &&
paste.startsWith(url + "/notes/") &&
!props.editId
) {
ev.preventDefault(); ev.preventDefault();
os.yesno({ os.yesno({
@ -1044,7 +1037,6 @@ onMounted(() => {
.right { .right {
float: right; float: right;
} }
.gafaadew { .gafaadew {
position: relative; position: relative;

6
packages/client/src/components/PostFormAttaches.vue → packages/client/src/components/MkPostFormAttaches.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)"
> >
<DriveFileThumbnail <MkDriveFileThumbnail
: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 DriveFileThumbnail from "@/components/DriveFileThumbnail.vue"; import MkDriveFileThumbnail from "@/components/MkDriveFileThumbnail.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/MediaCaption.vue")), defineAsyncComponent(() => import("@/components/MkMediaCaption.vue")),
{ {
title: i18n.ts.describeFile, title: i18n.ts.describeFile,
input: { input: {

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

@ -1,11 +1,11 @@
<template> <template>
<Modal <MkModal
ref="modal" ref="modal"
:prefer-type="'dialog'" :prefer-type="'dialog'"
@click="modal.close()" @click="modal.close()"
@closed="onModalClosed()" @closed="onModalClosed()"
> >
<PostForm <MkPostForm
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()"
/> />
</Modal> </MkModal>
</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 Modal from "@/components/Modal.vue"; import MkModal from "@/components/MkModal.vue";
import PostForm from "@/components/PostForm.vue"; import MkPostForm from "@/components/MkPostForm.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 Modal>>(); let modal = $shallowRef<InstanceType<typeof MkModal>>();
let form = $shallowRef<InstanceType<typeof PostForm>>(); let form = $shallowRef<InstanceType<typeof MkPostForm>>();
function onPosted() { function onPosted() {
modal.close({ modal.close({

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

@ -1,5 +1,5 @@
<template> <template>
<Button <MkButton
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 }}
</Button> </MkButton>
<Button <MkButton
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 }}
</Button> </MkButton>
<Button <MkButton
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 }}
</Button> </MkButton>
<Button <MkButton
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 }}
</Button> </MkButton>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { $i, getAccounts } from "@/account"; import { $i, getAccounts } from "@/account";
import Button from "@/components/Button.vue"; import MkButton from "@/components/MkButton.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/QuoteButton.vue → packages/client/src/components/MkQuoteButton.vue
View file

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

@ -8,7 +8,7 @@
class="_button" class="_button"
@click="tab = reaction" @click="tab = reaction"
> >
<ReactionIcon <MkReactionIcon
ref="reactionRef" ref="reactionRef"
:reaction=" :reaction="
reaction reaction
@ -22,7 +22,7 @@
}}</span> }}</span>
</button> </button>
</div> </div>
<UserCardMini <MkUserCardMini
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>
<Loading /> <MkLoading />
</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 ReactionIcon from "@/components/ReactionIcon.vue"; import MkReactionIcon from "@/components/MkReactionIcon.vue";
import UserCardMini from "@/components/UserCardMini.vue"; import MkUserCardMini from "@/components/MkUserCardMini.vue";
import { i18n } from "@/i18n"; import { i18n } from "@/i18n";
import * as os from "@/os"; import * as os from "@/os";

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

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

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

@ -1,5 +1,5 @@
<template> <template>
<Tooltip <MkTooltip
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>
</Tooltip> </MkTooltip>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import {} from "vue"; import {} from "vue";
import Tooltip from "./Tooltip.vue"; import MkTooltip from "./MkTooltip.vue";
import XReactionIcon from "@/components/ReactionIcon.vue"; import XReactionIcon from "@/components/MkReactionIcon.vue";
const props = defineProps<{ const props = defineProps<{
reaction: string; reaction: string;

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