mirror of
https://iceshrimp.dev/crimekillz/trashposs
synced 2024-11-21 16:33:48 +01:00
Rename Vue files for consistency
This commit is contained in:
Aylam
Laura Hausmann
parent
a58e1c4e7f
commit
38412e5b48
@ -157,7 +157,7 @@ export async function openAccountMenu(
|
||||
) {
|
||||
function showSigninDialog() {
|
||||
popup(
|
||||
defineAsyncComponent(() => import("@/components/MkSigninDialog.vue")),
|
||||
defineAsyncComponent(() => import("@/components/SigninDialog.vue")),
|
||||
{},
|
||||
{
|
||||
done: (res) => {
|
||||
@ -171,7 +171,7 @@ export async function openAccountMenu(
|
||||
|
||||
function createAccount() {
|
||||
popup(
|
||||
defineAsyncComponent(() => import("@/components/MkSignupDialog.vue")),
|
||||
defineAsyncComponent(() => import("@/components/SignupDialog.vue")),
|
||||
{},
|
||||
{
|
||||
done: (res) => {
|
||||
|
||||
@ -1,35 +1,35 @@
|
||||
<template>
|
||||
<div class="bcekxzvu _gap _panel">
|
||||
<div class="target">
|
||||
<MkA
|
||||
<A
|
||||
v-user-preview="report.targetUserId"
|
||||
class="info"
|
||||
:to="`/user-info/${report.targetUserId}`"
|
||||
>
|
||||
<MkAvatar
|
||||
<Avatar
|
||||
class="avatar"
|
||||
:user="report.targetUser"
|
||||
:show-indicator="true"
|
||||
:disable-link="true"
|
||||
/>
|
||||
<div class="names">
|
||||
<MkUserName class="name" :user="report.targetUser" />
|
||||
<MkAcct
|
||||
<UserName class="name" :user="report.targetUser" />
|
||||
<Acct
|
||||
class="acct"
|
||||
:user="report.targetUser"
|
||||
style="display: block"
|
||||
/>
|
||||
</div>
|
||||
</MkA>
|
||||
<MkKeyValue class="_formBlock">
|
||||
</A>
|
||||
<KeyValue class="_formBlock">
|
||||
<template #key>{{ i18n.ts.registeredDate }}</template>
|
||||
<template #value
|
||||
>{{
|
||||
new Date(report.targetUser.createdAt).toLocaleString()
|
||||
}}
|
||||
(<MkTime :time="report.targetUser.createdAt" />)</template
|
||||
(<Time :time="report.targetUser.createdAt" />)</template
|
||||
>
|
||||
</MkKeyValue>
|
||||
</KeyValue>
|
||||
</div>
|
||||
<div class="detail">
|
||||
<div>
|
||||
@ -37,15 +37,16 @@
|
||||
</div>
|
||||
<hr />
|
||||
<div>
|
||||
{{ i18n.ts.reporter }}: <MkAcct :user="report.reporter" />
|
||||
{{ i18n.ts.reporter }}:
|
||||
<Acct :user="report.reporter" />
|
||||
</div>
|
||||
<div v-if="report.assignee">
|
||||
{{ i18n.ts.moderator }}:
|
||||
<MkAcct :user="report.assignee" />
|
||||
<Acct :user="report.assignee" />
|
||||
</div>
|
||||
<div><MkTime :time="report.createdAt" /></div>
|
||||
<div><Time :time="report.createdAt" /></div>
|
||||
<div class="action">
|
||||
<MkSwitch
|
||||
<Switch
|
||||
v-model="forward"
|
||||
:disabled="
|
||||
report.targetUser.host == null || report.resolved
|
||||
@ -55,19 +56,19 @@
|
||||
<template #caption>{{
|
||||
i18n.ts.forwardReportIsAnonymous
|
||||
}}</template>
|
||||
</MkSwitch>
|
||||
<MkButton v-if="!report.resolved" primary @click="resolve">{{
|
||||
</Switch>
|
||||
<Button v-if="!report.resolved" primary @click="resolve">{{
|
||||
i18n.ts.abuseMarkAsResolved
|
||||
}}</MkButton>
|
||||
}}</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import MkButton from "@/components/MkButton.vue";
|
||||
import MkSwitch from "@/components/form/switch.vue";
|
||||
import MkKeyValue from "@/components/MkKeyValue.vue";
|
||||
import Button from "@/components/Button.vue";
|
||||
import Switch from "@/components/form/Switch.vue";
|
||||
import KeyValue from "@/components/KeyValue.vue";
|
||||
import { acct, userPage } from "@/filters/user";
|
||||
import * as os from "@/os";
|
||||
import { i18n } from "@/i18n";
|
||||
@ -13,26 +13,28 @@
|
||||
></i>
|
||||
<I18n :src="i18n.ts.reportAbuseOf" tag="span">
|
||||
<template #name>
|
||||
<b><MkAcct :user="user" /></b>
|
||||
<b>
|
||||
<Acct :user="user" />
|
||||
</b>
|
||||
</template>
|
||||
</I18n>
|
||||
</template>
|
||||
<div class="dpvffvvy _monolithic_">
|
||||
<div class="_section">
|
||||
<MkTextarea v-model="comment">
|
||||
<Textarea v-model="comment">
|
||||
<template #label>{{ i18n.ts.details }}</template>
|
||||
<template #caption>{{
|
||||
i18n.ts.fillAbuseReportDescription
|
||||
}}</template>
|
||||
</MkTextarea>
|
||||
</Textarea>
|
||||
</div>
|
||||
<div class="_section">
|
||||
<MkButton
|
||||
<Button
|
||||
primary
|
||||
full
|
||||
:disabled="comment.length === 0"
|
||||
@click="send"
|
||||
>{{ i18n.ts.send }}</MkButton
|
||||
>{{ i18n.ts.send }}</Button
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
@ -42,9 +44,9 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from "vue";
|
||||
import type * as Misskey from "iceshrimp-js";
|
||||
import XWindow from "@/components/MkWindow.vue";
|
||||
import MkTextarea from "@/components/form/textarea.vue";
|
||||
import MkButton from "@/components/MkButton.vue";
|
||||
import XWindow from "@/components/Window.vue";
|
||||
import Textarea from "@/components/form/Textarea.vue";
|
||||
import Button from "@/components/Button.vue";
|
||||
import * as os from "@/os";
|
||||
import { i18n } from "@/i18n";
|
||||
|
||||
@ -1,15 +1,15 @@
|
||||
<template>
|
||||
<MkModal ref="modal" :z-priority="'middle'" @closed="$emit('closed')">
|
||||
<Modal ref="modal" :z-priority="'middle'" @closed="$emit('closed')">
|
||||
<div :class="$style.root">
|
||||
<div :class="$style.title">
|
||||
<MkSparkle v-if="isGoodNews">{{ title }}</MkSparkle>
|
||||
<Sparkle v-if="isGoodNews">{{ title }}</Sparkle>
|
||||
<p v-else>{{ title }}</p>
|
||||
</div>
|
||||
<div :class="$style.time">
|
||||
<MkTime :time="announcement.createdAt" />
|
||||
<Time :time="announcement.createdAt" />
|
||||
<div v-if="announcement.updatedAt">
|
||||
{{ i18n.ts.updatedAt }}:
|
||||
<MkTime :time="announcement.createdAt" />
|
||||
<Time :time="announcement.createdAt" />
|
||||
</div>
|
||||
</div>
|
||||
<Mfm :text="text" />
|
||||
@ -19,18 +19,18 @@
|
||||
:src="imageUrl"
|
||||
alt="attached image"
|
||||
/>
|
||||
<MkButton :class="$style.gotIt" primary full @click="gotIt()">{{
|
||||
<Button :class="$style.gotIt" primary full @click="gotIt()">{{
|
||||
i18n.ts.gotIt
|
||||
}}</MkButton>
|
||||
}}</Button>
|
||||
</div>
|
||||
</MkModal>
|
||||
</Modal>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { shallowRef } from "vue";
|
||||
import MkModal from "@/components/MkModal.vue";
|
||||
import MkSparkle from "@/components/MkSparkle.vue";
|
||||
import MkButton from "@/components/MkButton.vue";
|
||||
import Modal from "@/components/Modal.vue";
|
||||
import Sparkle from "@/components/Sparkle.vue";
|
||||
import Button from "@/components/Button.vue";
|
||||
import { i18n } from "@/i18n";
|
||||
import * as os from "@/os";
|
||||
|
||||
@ -40,7 +40,7 @@ const props = defineProps<{
|
||||
|
||||
const { id, text, title, imageUrl, isGoodNews } = props.announcement;
|
||||
|
||||
const modal = shallowRef<InstanceType<typeof MkModal>>();
|
||||
const modal = shallowRef<InstanceType<typeof Modal>>();
|
||||
|
||||
const gotIt = () => {
|
||||
modal.value.close();
|
||||
@ -15,7 +15,7 @@
|
||||
>
|
||||
<img class="avatar" :src="user.avatarUrl" />
|
||||
<span class="name">
|
||||
<MkUserName :key="user.id" :user="user" />
|
||||
<UserName :key="user.id" :user="user" />
|
||||
</span>
|
||||
<span class="username">@{{ acct(user) }}</span>
|
||||
</li>
|
||||
@ -255,10 +255,10 @@ function exec() {
|
||||
users.value = JSON.parse(cache);
|
||||
fetching.value = false;
|
||||
} else {
|
||||
const acct = Acct.parse(props.q);
|
||||
const acct = Acct.parse(props.q);
|
||||
os.api("users/search-by-username-and-host", {
|
||||
username: acct.username,
|
||||
host: acct.host ?? undefined,
|
||||
host: acct.host ?? undefined,
|
||||
limit: 10,
|
||||
detail: false,
|
||||
}).then((searchedUsers) => {
|
||||
@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div class="defgtij">
|
||||
<div v-for="user in users" :key="user.id" class="avatar-holder">
|
||||
<MkAvatar :user="user" :show-indicator="true" class="avatar" />
|
||||
<Avatar :user="user" :show-indicator="true" class="avatar" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@ -12,7 +12,7 @@
|
||||
<slot></slot>
|
||||
</div>
|
||||
</button>
|
||||
<MkA
|
||||
<A
|
||||
v-else
|
||||
class="bghgjjyj _button"
|
||||
:class="{ inline, primary, gradate, danger, rounded, full, mini }"
|
||||
@ -23,7 +23,7 @@
|
||||
<div class="content">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</MkA>
|
||||
</A>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
@ -1,6 +1,9 @@
|
||||
<template>
|
||||
<div>
|
||||
<span v-if="!available">{{ i18n.ts.waiting }}<MkEllipsis /></span>
|
||||
<span v-if="!available"
|
||||
>{{ i18n.ts.waiting }}
|
||||
<Ellipsis />
|
||||
</span>
|
||||
<div ref="captchaEl"></div>
|
||||
</div>
|
||||
</template>
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<MkPagination :pagination="pagination">
|
||||
<Pagination :pagination="pagination">
|
||||
<template #empty>
|
||||
<div class="_fullinfo">
|
||||
<img
|
||||
@ -12,22 +12,22 @@
|
||||
</template>
|
||||
|
||||
<template #default="{ items }">
|
||||
<MkChannelPreview
|
||||
<ChannelPreview
|
||||
v-for="item in items"
|
||||
:key="item.id"
|
||||
class="_margin"
|
||||
:channel="extractor(item)"
|
||||
/>
|
||||
</template>
|
||||
</MkPagination>
|
||||
</Pagination>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import MkChannelPreview from "@/components/MkChannelPreview.vue";
|
||||
import type { Paging } from "@/components/MkPagination.vue";
|
||||
import MkPagination from "@/components/MkPagination.vue";
|
||||
import ChannelPreview from "@/components/ChannelPreview.vue";
|
||||
import type { Paging } from "@/components/Pagination.vue";
|
||||
import Pagination from "@/components/Pagination.vue";
|
||||
import { i18n } from "@/i18n";
|
||||
import {instance} from "@/instance";
|
||||
import { instance } from "@/instance";
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<MkA :to="`/channels/${channel.id}`" class="eftoefju _panel" tabindex="-1">
|
||||
<A :to="`/channels/${channel.id}`" class="eftoefju _panel" tabindex="-1">
|
||||
<div class="banner" :style="bannerStyle">
|
||||
<div class="fade"></div>
|
||||
<div class="name">
|
||||
@ -43,10 +43,10 @@
|
||||
</article>
|
||||
<footer>
|
||||
<span v-if="channel.lastNotedAt">
|
||||
{{ i18n.ts.updatedAt }}: <MkTime :time="channel.lastNotedAt" />
|
||||
{{ i18n.ts.updatedAt }}: <Time :time="channel.lastNotedAt" />
|
||||
</span>
|
||||
</footer>
|
||||
</MkA>
|
||||
</A>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
@ -2,7 +2,7 @@
|
||||
<div class="cbbedffa">
|
||||
<canvas ref="chartEl"></canvas>
|
||||
<div v-if="fetching" class="fetching">
|
||||
<MkLoading />
|
||||
<Loading />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<MkTooltip
|
||||
<Tooltip
|
||||
ref="tooltip"
|
||||
:showing="showing"
|
||||
:x="x"
|
||||
@ -24,12 +24,12 @@
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</MkTooltip>
|
||||
</Tooltip>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import {} from "vue";
|
||||
import MkTooltip from "./MkTooltip.vue";
|
||||
import Tooltip from "./Tooltip.vue";
|
||||
|
||||
const props = defineProps<{
|
||||
showing: boolean;
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<MkA
|
||||
<A
|
||||
class="rivslvers"
|
||||
:class="{
|
||||
isMe: isMe(message),
|
||||
@ -16,7 +16,7 @@
|
||||
"
|
||||
>
|
||||
<div class="message _block">
|
||||
<MkAvatar
|
||||
<Avatar
|
||||
class="avatar"
|
||||
:user="
|
||||
message.groupId
|
||||
@ -30,21 +30,20 @@
|
||||
/>
|
||||
<header v-if="message.groupId">
|
||||
<span class="name">{{ message.group.name }}</span>
|
||||
<MkTime :time="message.createdAt" class="time" />
|
||||
<Time :time="message.createdAt" class="time" />
|
||||
</header>
|
||||
<header v-else>
|
||||
<span class="name"
|
||||
><MkUserName
|
||||
:user="
|
||||
isMe(message) ? message.recipient : message.user
|
||||
"
|
||||
/></span>
|
||||
<span class="name">
|
||||
<UserName
|
||||
:user="isMe(message) ? message.recipient : message.user"
|
||||
/>
|
||||
</span>
|
||||
<span class="username"
|
||||
>@{{
|
||||
acct(isMe(message) ? message.recipient : message.user)
|
||||
}}</span
|
||||
>
|
||||
<MkTime :time="message.createdAt" class="time" />
|
||||
<Time :time="message.createdAt" class="time" />
|
||||
</header>
|
||||
<div class="body">
|
||||
<p class="text">
|
||||
@ -59,7 +58,7 @@
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</MkA>
|
||||
</A>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
@ -11,8 +11,8 @@
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import XModalWindow from "@/components/MkModalWindow.vue";
|
||||
import XCheatSheet from "@/pages/mfm-cheat-sheet.vue";
|
||||
import XModalWindow from "@/components/ModalWindow.vue";
|
||||
import XCheatSheet from "@/pages/MfmCheatsheet.vue";
|
||||
import { i18n } from "@/i18n";
|
||||
|
||||
const emit = defineEmits<{
|
||||
@ -32,6 +32,7 @@ function close(res) {
|
||||
.fade-leave-active {
|
||||
transition: opacity 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
.fade-enter-from,
|
||||
.fade-leave-to {
|
||||
opacity: 0;
|
||||
@ -11,7 +11,5 @@ defineProps<{
|
||||
inline?: boolean;
|
||||
}>();
|
||||
|
||||
const XCode = defineAsyncComponent(
|
||||
() => import("@/components/MkCode.core.vue"),
|
||||
);
|
||||
const XCode = defineAsyncComponent(() => import("@/components/CodeCore.vue"));
|
||||
</script>
|
||||
@ -259,7 +259,11 @@ export default defineComponent({
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 64px;
|
||||
background: linear-gradient(0deg, var(--panel), var(--panelFade));
|
||||
background: linear-gradient(
|
||||
0deg,
|
||||
var(--panel),
|
||||
var(--panelFade)
|
||||
);
|
||||
|
||||
> span {
|
||||
display: inline-block;
|
||||
@ -6,15 +6,15 @@
|
||||
:style="{ zIndex }"
|
||||
@contextmenu.prevent.stop="() => {}"
|
||||
>
|
||||
<MkMenu :items="items" :align="'left'" @close="$emit('closed')" />
|
||||
<Menu :items="items" :align="'left'" @close="$emit('closed')" />
|
||||
</div>
|
||||
</transition>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { onBeforeUnmount, onMounted } from "vue";
|
||||
import MkMenu from "./MkMenu.vue";
|
||||
import type { MenuItem } from "./types/menu.vue";
|
||||
import Menu from "./Menu.vue";
|
||||
import type { MenuItem } from "./types/Menu.vue";
|
||||
import contains from "@/scripts/contains";
|
||||
import * as os from "@/os";
|
||||
|
||||
@ -19,7 +19,7 @@
|
||||
>
|
||||
<Transition name="fade">
|
||||
<div v-if="loading" class="loading">
|
||||
<MkLoading />
|
||||
<Loading />
|
||||
</div>
|
||||
</Transition>
|
||||
<div class="container">
|
||||
@ -40,7 +40,7 @@ import { nextTick, onMounted } from "vue";
|
||||
import type * as misskey from "iceshrimp-js";
|
||||
import Cropper from "cropperjs";
|
||||
import tinycolor from "tinycolor2";
|
||||
import XModalWindow from "@/components/MkModalWindow.vue";
|
||||
import XModalWindow from "@/components/ModalWindow.vue";
|
||||
import * as os from "@/os";
|
||||
import { $i } from "@/account";
|
||||
import { defaultStore } from "@/store";
|
||||
@ -144,6 +144,7 @@ onMounted(() => {
|
||||
.fade-leave-active {
|
||||
transition: opacity 0.5s ease 0.5s;
|
||||
}
|
||||
|
||||
.fade-enter-from,
|
||||
.fade-leave-to {
|
||||
opacity: 0;
|
||||
@ -2,7 +2,7 @@
|
||||
<button
|
||||
ref="el"
|
||||
class="_button"
|
||||
:class="[cwButton, { showLess: modelValue, fade: !modelValue, }]"
|
||||
:class="[cwButton, { showLess: modelValue, fade: !modelValue }]"
|
||||
@click.stop="toggle"
|
||||
>
|
||||
<span class="cw-toggle-text"
|
||||
@ -18,7 +18,7 @@ import { length } from "stringz";
|
||||
import type * as misskey from "iceshrimp-js";
|
||||
import { concat } from "@/scripts/array";
|
||||
import { i18n } from "@/i18n";
|
||||
import {defaultStore} from "@/store";
|
||||
import { defaultStore } from "@/store";
|
||||
|
||||
const props = defineProps<{
|
||||
modelValue: boolean;
|
||||
@ -44,7 +44,7 @@ const label = computed(() => {
|
||||
] as string[][]).join(", ");
|
||||
});
|
||||
|
||||
const cwButton = computed (() => `_button_${defaultStore.state.cwStyle}`);
|
||||
const cwButton = computed(() => `_button_${defaultStore.state.cwStyle}`);
|
||||
|
||||
const toggle = () => {
|
||||
emit("update:modelValue", !props.modelValue);
|
||||
@ -203,11 +203,11 @@ defineExpose({
|
||||
font-weight: normal;
|
||||
|
||||
&:before {
|
||||
content: '(';
|
||||
content: "(";
|
||||
}
|
||||
|
||||
&:after {
|
||||
content: ')';
|
||||
content: ")";
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<MkModal
|
||||
<Modal
|
||||
ref="modal"
|
||||
:prefer-type="'dialog'"
|
||||
@click="done(true)"
|
||||
@ -38,7 +38,7 @@
|
||||
:class="$style.iconInner"
|
||||
class="ph-circle-question ph-bold ph-lg"
|
||||
></i>
|
||||
<MkLoading
|
||||
<Loading
|
||||
v-else-if="type === 'waiting'"
|
||||
:class="$style.iconInner"
|
||||
:em="true"
|
||||
@ -56,7 +56,7 @@
|
||||
<div v-if="text" :class="$style.text">
|
||||
<Mfm :text="text" />
|
||||
</div>
|
||||
<MkInput
|
||||
<Input
|
||||
v-if="input && input.type !== 'paragraph'"
|
||||
ref="inputEl"
|
||||
v-model="inputValue"
|
||||
@ -107,16 +107,16 @@
|
||||
<i class="ph-funnel ph-bold"></i>
|
||||
</button>
|
||||
</template>
|
||||
</MkInput>
|
||||
<MkTextarea
|
||||
</Input>
|
||||
<Textarea
|
||||
v-if="input && input.type === 'paragraph'"
|
||||
v-model="inputValue"
|
||||
autofocus
|
||||
:type="paragraph"
|
||||
:placeholder="input.placeholder || undefined"
|
||||
>
|
||||
</MkTextarea>
|
||||
<MkSelect v-if="select" v-model="selectedValue" autofocus>
|
||||
</Textarea>
|
||||
<Select v-if="select" v-model="selectedValue" autofocus>
|
||||
<template v-if="select.items">
|
||||
<option v-for="item in select.items" :value="item.value">
|
||||
{{ item.text }}
|
||||
@ -135,14 +135,14 @@
|
||||
</option>
|
||||
</optgroup>
|
||||
</template>
|
||||
</MkSelect>
|
||||
</Select>
|
||||
|
||||
<div
|
||||
v-if="(showOkButton || showCancelButton) && !actions"
|
||||
:class="$style.buttons"
|
||||
>
|
||||
<div v-if="!isYesNo">
|
||||
<MkButton
|
||||
<Button
|
||||
v-if="showOkButton"
|
||||
inline
|
||||
primary
|
||||
@ -153,34 +153,34 @@
|
||||
showCancelButton || input || select
|
||||
? i18n.ts.ok
|
||||
: i18n.ts.gotIt
|
||||
}}</MkButton
|
||||
}}</Button
|
||||
>
|
||||
<MkButton
|
||||
<Button
|
||||
v-if="showCancelButton || input || select"
|
||||
inline
|
||||
@click="cancel"
|
||||
>{{ i18n.ts.cancel }}</MkButton
|
||||
>{{ i18n.ts.cancel }}</Button
|
||||
>
|
||||
</div>
|
||||
<div v-else>
|
||||
<MkButton
|
||||
<Button
|
||||
v-if="showOkButton"
|
||||
inline
|
||||
primary
|
||||
:autofocus="!input && !select"
|
||||
@click="ok"
|
||||
>{{ i18n.ts.yes }}
|
||||
</MkButton>
|
||||
<MkButton
|
||||
</Button>
|
||||
<Button
|
||||
v-if="showCancelButton || input || select"
|
||||
inline
|
||||
@click="cancel"
|
||||
>{{ i18n.ts.no }}</MkButton
|
||||
>{{ i18n.ts.no }}</Button
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="actions" :class="$style.buttons">
|
||||
<MkButton
|
||||
<Button
|
||||
v-for="action in actions"
|
||||
:key="action.text"
|
||||
inline
|
||||
@ -191,21 +191,21 @@
|
||||
modal?.close();
|
||||
}
|
||||
"
|
||||
>{{ action.text }}</MkButton
|
||||
>{{ action.text }}</Button
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</MkModal>
|
||||
</Modal>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { onBeforeUnmount, onMounted, ref, shallowRef } from "vue";
|
||||
import * as Acct from "iceshrimp-js/built/acct";
|
||||
import MkModal from "@/components/MkModal.vue";
|
||||
import MkButton from "@/components/MkButton.vue";
|
||||
import MkInput from "@/components/form/input.vue";
|
||||
import MkTextarea from "@/components/form/textarea.vue";
|
||||
import MkSelect from "@/components/form/select.vue";
|
||||
import Modal from "@/components/Modal.vue";
|
||||
import Button from "@/components/Button.vue";
|
||||
import Input from "@/components/form/Input.vue";
|
||||
import Textarea from "@/components/form/Textarea.vue";
|
||||
import Select from "@/components/form/Select.vue";
|
||||
import * as os from "@/os";
|
||||
import { i18n } from "@/i18n";
|
||||
|
||||
@ -276,7 +276,7 @@ const emit = defineEmits<{
|
||||
(ev: "closed"): void;
|
||||
}>();
|
||||
|
||||
const modal = shallowRef<InstanceType<typeof MkModal>>();
|
||||
const modal = shallowRef<InstanceType<typeof Modal>>();
|
||||
|
||||
const inputValue = ref<string | number | null>(props.input?.default ?? null);
|
||||
const selectedValue = ref(props.select?.default ?? null);
|
||||
@ -308,7 +308,7 @@ const okButtonDisabled = $computed<boolean>(() => {
|
||||
return false;
|
||||
});
|
||||
|
||||
const inputEl = ref<typeof MkInput>();
|
||||
const inputEl = ref<typeof Input>();
|
||||
|
||||
function done(canceled: boolean, result?) {
|
||||
emit("done", { canceled, result });
|
||||
@ -70,9 +70,9 @@
|
||||
/>
|
||||
<!-- 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>
|
||||
<MkButton v-if="moreFolders" ref="moreFolders">{{
|
||||
<Button v-if="moreFolders" ref="moreFolders">{{
|
||||
i18n.ts.loadMore
|
||||
}}</MkButton>
|
||||
}}</Button>
|
||||
</div>
|
||||
<div
|
||||
v-show="files.length > 0"
|
||||
@ -95,11 +95,11 @@
|
||||
/>
|
||||
<!-- 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>
|
||||
<MkButton
|
||||
<Button
|
||||
v-show="moreFiles"
|
||||
ref="loadMoreFiles"
|
||||
@click="fetchMoreFiles"
|
||||
>{{ i18n.ts.loadMore }}</MkButton
|
||||
>{{ i18n.ts.loadMore }}</Button
|
||||
>
|
||||
</div>
|
||||
<div
|
||||
@ -116,7 +116,7 @@
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<MkLoading v-if="fetching" />
|
||||
<Loading v-if="fetching" />
|
||||
</div>
|
||||
<div v-if="draghover" class="dropzone"></div>
|
||||
<input
|
||||
@ -141,10 +141,10 @@ import {
|
||||
watch,
|
||||
} from "vue";
|
||||
import * as Misskey from "iceshrimp-js";
|
||||
import MkButton from "./MkButton.vue";
|
||||
import XNavFolder from "@/components/MkDrive.navFolder.vue";
|
||||
import XFolder from "@/components/MkDrive.folder.vue";
|
||||
import XFile from "@/components/MkDrive.file.vue";
|
||||
import Button from "./Button.vue";
|
||||
import XNavFolder from "@/components/DriveNavFolder.vue";
|
||||
import XFolder from "@/components/DriveFolder.vue";
|
||||
import XFile from "@/components/DriveFile.vue";
|
||||
import * as os from "@/os";
|
||||
import { stream } from "@/stream";
|
||||
import { defaultStore } from "@/store";
|
||||
@ -178,7 +178,7 @@ const emit = defineEmits<{
|
||||
(ev: "open-folder", v: Misskey.entities.DriveFolder): void;
|
||||
}>();
|
||||
|
||||
const loadMoreFiles = ref<InstanceType<typeof MkButton>>();
|
||||
const loadMoreFiles = ref<InstanceType<typeof Button>>();
|
||||
const fileInput = ref<HTMLInputElement>();
|
||||
|
||||
const folder = ref<Misskey.entities.DriveFolder | null>(null);
|
||||
@ -22,7 +22,7 @@
|
||||
<p>{{ i18n.ts.nsfw }}</p>
|
||||
</div>
|
||||
|
||||
<MkDriveFileThumbnail class="thumbnail" :file="file" fit="contain" />
|
||||
<DriveFileThumbnail class="thumbnail" :file="file" fit="contain" />
|
||||
|
||||
<p class="name">
|
||||
<span>{{
|
||||
@ -41,7 +41,7 @@
|
||||
import { computed, defineAsyncComponent, ref } from "vue";
|
||||
import * as Misskey from "iceshrimp-js";
|
||||
import copyToClipboard from "@/scripts/copy-to-clipboard";
|
||||
import MkDriveFileThumbnail from "@/components/MkDriveFileThumbnail.vue";
|
||||
import DriveFileThumbnail from "@/components/DriveFileThumbnail.vue";
|
||||
import bytes from "@/filters/bytes";
|
||||
import * as os from "@/os";
|
||||
import { i18n } from "@/i18n";
|
||||
@ -167,7 +167,7 @@ function rename() {
|
||||
|
||||
function describe() {
|
||||
os.popup(
|
||||
defineAsyncComponent(() => import("@/components/MkMediaCaption.vue")),
|
||||
defineAsyncComponent(() => import("@/components/MediaCaption.vue")),
|
||||
{
|
||||
title: i18n.ts.describeFile,
|
||||
input: {
|
||||
@ -42,7 +42,7 @@
|
||||
<script lang="ts" setup>
|
||||
import { computed } from "vue";
|
||||
import type * as Misskey from "iceshrimp-js";
|
||||
import ImgWithBlurhash from "@/components/MkImgWithBlurhash.vue";
|
||||
import ImgWithBlurhash from "@/components/ImgWithBlurhash.vue";
|
||||
|
||||
const props = defineProps<{
|
||||
file: Misskey.entities.DriveFile;
|
||||
@ -256,7 +256,7 @@ function onContextmenu(ev: MouseEvent) {
|
||||
action: () => {
|
||||
os.popup(
|
||||
defineAsyncComponent(
|
||||
() => import("@/components/MkDriveWindow.vue"),
|
||||
() => import("@/components/DriveWindow.vue"),
|
||||
),
|
||||
{
|
||||
initialFolder: props.folder,
|
||||
@ -38,8 +38,8 @@
|
||||
<script lang="ts" setup>
|
||||
import { ref } from "vue";
|
||||
import * as Misskey from "iceshrimp-js";
|
||||
import XDrive from "@/components/MkDrive.vue";
|
||||
import XModalWindow from "@/components/MkModalWindow.vue";
|
||||
import XDrive from "@/components/Drive.vue";
|
||||
import XModalWindow from "@/components/ModalWindow.vue";
|
||||
import number from "@/filters/number";
|
||||
import { i18n } from "@/i18n";
|
||||
|
||||
@ -16,8 +16,8 @@
|
||||
<script lang="ts" setup>
|
||||
import {} from "vue";
|
||||
import * as Misskey from "iceshrimp-js";
|
||||
import XDrive from "@/components/MkDrive.vue";
|
||||
import XWindow from "@/components/MkWindow.vue";
|
||||
import XDrive from "@/components/Drive.vue";
|
||||
import XWindow from "@/components/Window.vue";
|
||||
import { i18n } from "@/i18n";
|
||||
|
||||
defineProps<{
|
||||
@ -28,7 +28,7 @@
|
||||
tabindex="0"
|
||||
@click="chosen(emoji, $event)"
|
||||
>
|
||||
<!--<MkEmoji v-if="emoji.char != null" :emoji="emoji.char"/>-->
|
||||
<!--<Emoji v-if="emoji.char != null" :emoji="emoji.char"/>-->
|
||||
<img
|
||||
class="emoji"
|
||||
:src="
|
||||
@ -48,7 +48,7 @@
|
||||
tabindex="0"
|
||||
@click="chosen(emoji, $event)"
|
||||
>
|
||||
<MkEmoji class="emoji" :emoji="emoji.emoji" />
|
||||
<Emoji class="emoji" :emoji="emoji.emoji" />
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
@ -63,7 +63,7 @@
|
||||
tabindex="0"
|
||||
@click="chosen(emoji, $event)"
|
||||
>
|
||||
<MkEmoji
|
||||
<Emoji
|
||||
class="emoji"
|
||||
:emoji="emoji"
|
||||
:normal="true"
|
||||
@ -84,7 +84,7 @@
|
||||
class="_button item"
|
||||
@click="chosen(emoji, $event)"
|
||||
>
|
||||
<MkEmoji
|
||||
<Emoji
|
||||
class="emoji"
|
||||
:emoji="emoji"
|
||||
:normal="true"
|
||||
@ -165,7 +165,7 @@
|
||||
<script lang="ts" setup>
|
||||
import { ref, computed, watch, onMounted } from "vue";
|
||||
import * as Misskey from "iceshrimp-js";
|
||||
import XSection from "@/components/MkEmojiPicker.section.vue";
|
||||
import XSection from "@/components/EmojiPickerSection.vue";
|
||||
import {
|
||||
emojilist,
|
||||
unicodeEmojiCategories,
|
||||
@ -173,7 +173,7 @@ import {
|
||||
getNicelyLabeledCategory,
|
||||
} from "@/scripts/emojilist";
|
||||
import { getStaticImageUrl } from "@/scripts/get-static-image-url";
|
||||
import Ripple from "@/components/MkRipple.vue";
|
||||
import Ripple from "@/components/Ripple.vue";
|
||||
import * as os from "@/os";
|
||||
import { isTouchUsing } from "@/scripts/touch";
|
||||
import { deviceKind } from "@/scripts/device-kind";
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<MkModal
|
||||
<Modal
|
||||
ref="modal"
|
||||
v-slot="{ type, maxHeight }"
|
||||
:z-priority="'middle'"
|
||||
@ -17,7 +17,7 @@
|
||||
@close="emit('close')"
|
||||
@closed="emit('closed')"
|
||||
>
|
||||
<MkEmojiPicker
|
||||
<EmojiPicker
|
||||
ref="picker"
|
||||
class="ryghynhb _popup _shadow"
|
||||
:class="{ drawer: type === 'drawer' }"
|
||||
@ -27,13 +27,13 @@
|
||||
:max-height="maxHeight"
|
||||
@chosen="chosen"
|
||||
/>
|
||||
</MkModal>
|
||||
</Modal>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, onMounted, onBeforeUnmount } from "vue";
|
||||
import MkModal from "@/components/MkModal.vue";
|
||||
import MkEmojiPicker from "@/components/MkEmojiPicker.vue";
|
||||
import Modal from "@/components/Modal.vue";
|
||||
import EmojiPicker from "@/components/EmojiPicker.vue";
|
||||
import { defaultStore } from "@/store";
|
||||
|
||||
withDefaults(
|
||||
@ -56,8 +56,8 @@ const emit = defineEmits<{
|
||||
(ev: "closed"): void;
|
||||
}>();
|
||||
|
||||
const modal = ref<InstanceType<typeof MkModal>>();
|
||||
const picker = ref<InstanceType<typeof MkEmojiPicker>>();
|
||||
const modal = ref<InstanceType<typeof Modal>>();
|
||||
const picker = ref<InstanceType<typeof EmojiPicker>>();
|
||||
|
||||
function checkForShift(ev?: MouseEvent) {
|
||||
if (ev?.shiftKey) return;
|
||||
@ -41,7 +41,7 @@
|
||||
class="_button item"
|
||||
@click="emit('chosen', emoji, $event)"
|
||||
>
|
||||
<MkEmoji class="emoji" :emoji="emoji" :normal="true" />
|
||||
<Emoji class="emoji" :emoji="emoji" :normal="true" />
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
@ -1,12 +1,12 @@
|
||||
<template>
|
||||
<div>
|
||||
<MkPagination
|
||||
<Pagination
|
||||
v-slot="{ items }"
|
||||
:pagination="pagination"
|
||||
class="urempief"
|
||||
:class="{ grid: viewMode === 'grid' }"
|
||||
>
|
||||
<MkA
|
||||
<A
|
||||
v-for="file in items"
|
||||
:key="file.id"
|
||||
v-tooltip.mfm="
|
||||
@ -22,7 +22,7 @@
|
||||
<div v-if="file.isSensitive" class="sensitive-label">
|
||||
{{ i18n.ts.sensitive }}
|
||||
</div>
|
||||
<MkDriveFileThumbnail
|
||||
<DriveFileThumbnail
|
||||
class="thumbnail"
|
||||
:file="file"
|
||||
fit="contain"
|
||||
@ -32,7 +32,7 @@
|
||||
<small style="opacity: 0.7">{{ file.name }}</small>
|
||||
</div>
|
||||
<div>
|
||||
<MkAcct v-if="file.user" :user="file.user" />
|
||||
<Acct v-if="file.user" :user="file.user" />
|
||||
<div v-else>{{ i18n.ts.system }}</div>
|
||||
</div>
|
||||
<div>
|
||||
@ -42,21 +42,21 @@
|
||||
<div>
|
||||
<span
|
||||
>{{ i18n.ts.registeredDate }}:
|
||||
<MkTime :time="file.createdAt" mode="detail"
|
||||
<Time :time="file.createdAt" mode="detail"
|
||||
/></span>
|
||||
</div>
|
||||
</div>
|
||||
</MkA>
|
||||
</MkPagination>
|
||||
</A>
|
||||
</Pagination>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { computed } from "vue";
|
||||
import * as Acct from "iceshrimp-js/built/acct";
|
||||
import MkSwitch from "@/components/ui/switch.vue";
|
||||
import MkPagination from "@/components/MkPagination.vue";
|
||||
import MkDriveFileThumbnail from "@/components/MkDriveFileThumbnail.vue";
|
||||
import Switch from "@/components/ui/Switch.vue";
|
||||
import Pagination from "@/components/Pagination.vue";
|
||||
import DriveFileThumbnail from "@/components/DriveFileThumbnail.vue";
|
||||
import bytes from "@/filters/bytes";
|
||||
import * as os from "@/os";
|
||||
import { i18n } from "@/i18n";
|
||||
@ -72,6 +72,7 @@ const props = defineProps<{
|
||||
0% {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
50% {
|
||||
opacity: 0;
|
||||
}
|
||||
@ -14,7 +14,7 @@
|
||||
@submit.prevent="onSubmit"
|
||||
>
|
||||
<div class="main _formRoot">
|
||||
<MkInput
|
||||
<Input
|
||||
v-model="username"
|
||||
class="_formBlock"
|
||||
type="text"
|
||||
@ -25,9 +25,9 @@
|
||||
>
|
||||
<template #label>{{ i18n.ts.username }}</template>
|
||||
<template #prefix>@</template>
|
||||
</MkInput>
|
||||
</Input>
|
||||
|
||||
<MkInput
|
||||
<Input
|
||||
v-model="email"
|
||||
class="_formBlock"
|
||||
type="email"
|
||||
@ -38,21 +38,21 @@
|
||||
<template #caption>{{
|
||||
i18n.ts._forgotPassword.enterEmail
|
||||
}}</template>
|
||||
</MkInput>
|
||||
</Input>
|
||||
|
||||
<MkButton
|
||||
<Button
|
||||
class="_formBlock"
|
||||
type="submit"
|
||||
:disabled="processing"
|
||||
primary
|
||||
style="margin: 0 auto"
|
||||
>{{ i18n.ts.send }}</MkButton
|
||||
>{{ i18n.ts.send }}</Button
|
||||
>
|
||||
</div>
|
||||
<div class="sub">
|
||||
<MkA to="/about" class="_link">{{
|
||||
<A to="/about" class="_link">{{
|
||||
i18n.ts._forgotPassword.ifNoEmail
|
||||
}}</MkA>
|
||||
}}</A>
|
||||
</div>
|
||||
</form>
|
||||
<div v-else class="bafecedb">
|
||||
@ -63,9 +63,9 @@
|
||||
|
||||
<script lang="ts" setup>
|
||||
import {} from "vue";
|
||||
import XModalWindow from "@/components/MkModalWindow.vue";
|
||||
import MkButton from "@/components/MkButton.vue";
|
||||
import MkInput from "@/components/form/input.vue";
|
||||
import XModalWindow from "@/components/ModalWindow.vue";
|
||||
import Button from "@/components/Button.vue";
|
||||
import Input from "@/components/form/Input.vue";
|
||||
import * as os from "@/os";
|
||||
import { instance } from "@/instance";
|
||||
import { i18n } from "@/i18n";
|
||||
@ -14,7 +14,7 @@
|
||||
{{ title }}
|
||||
</template>
|
||||
|
||||
<MkSpacer :margin-min="20" :margin-max="32">
|
||||
<Spacer :margin-min="20" :margin-max="32">
|
||||
<div class="xkpnjxcv _formRoot">
|
||||
<template
|
||||
v-for="item in Object.keys(form).filter(
|
||||
@ -141,29 +141,29 @@
|
||||
form[item].description
|
||||
}}</template>
|
||||
</FormRange>
|
||||
<MkButton
|
||||
<Button
|
||||
v-else-if="form[item].type === 'button'"
|
||||
class="_formBlock"
|
||||
@click="form[item].action($event, values)"
|
||||
>
|
||||
<span v-text="form[item].content || item"></span>
|
||||
</MkButton>
|
||||
</Button>
|
||||
</template>
|
||||
</div>
|
||||
</MkSpacer>
|
||||
</Spacer>
|
||||
</XModalWindow>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from "vue";
|
||||
import FormInput from "./form/input.vue";
|
||||
import FormTextarea from "./form/textarea.vue";
|
||||
import FormSwitch from "./form/switch.vue";
|
||||
import FormSelect from "./form/select.vue";
|
||||
import FormRange from "./form/range.vue";
|
||||
import MkButton from "./MkButton.vue";
|
||||
import FormRadios from "./form/radios.vue";
|
||||
import XModalWindow from "@/components/MkModalWindow.vue";
|
||||
import FormInput from "./form/Input.vue";
|
||||
import FormTextarea from "./form/Textarea.vue";
|
||||
import FormSwitch from "./form/Switch.vue";
|
||||
import FormSelect from "./form/Select.vue";
|
||||
import FormRange from "./form/Range.vue";
|
||||
import Button from "./Button.vue";
|
||||
import FormRadios from "./form/Radios.vue";
|
||||
import XModalWindow from "@/components/ModalWindow.vue";
|
||||
import { i18n } from "@/i18n";
|
||||
|
||||
export default defineComponent({
|
||||
@ -174,7 +174,7 @@ export default defineComponent({
|
||||
FormSwitch,
|
||||
FormSelect,
|
||||
FormRange,
|
||||
MkButton,
|
||||
Button,
|
||||
FormRadios,
|
||||
},
|
||||
|
||||
@ -9,7 +9,7 @@ import * as os from "@/os";
|
||||
export default defineComponent({
|
||||
components: {
|
||||
XFormula: defineAsyncComponent(
|
||||
() => import("@/components/MkFormulaCore.vue"),
|
||||
() => import("@/components/FormulaCore.vue"),
|
||||
),
|
||||
},
|
||||
props: {
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<MkA :to="`/gallery/${post.id}`" class="ttasepnz _panel">
|
||||
<A :to="`/gallery/${post.id}`" class="ttasepnz _panel">
|
||||
<div class="thumbnail">
|
||||
<ImgWithBlurhash
|
||||
class="img"
|
||||
@ -9,19 +9,19 @@
|
||||
</div>
|
||||
<article>
|
||||
<header>
|
||||
<MkAvatar :user="post.user" class="avatar" />
|
||||
<Avatar :user="post.user" class="avatar" />
|
||||
</header>
|
||||
<footer>
|
||||
<span class="title">{{ post.title }}</span>
|
||||
</footer>
|
||||
</article>
|
||||
</MkA>
|
||||
</A>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import {} from "vue";
|
||||
import { userName } from "@/filters/user";
|
||||
import ImgWithBlurhash from "@/components/MkImgWithBlurhash.vue";
|
||||
import ImgWithBlurhash from "@/components/ImgWithBlurhash.vue";
|
||||
|
||||
const props = defineProps<{
|
||||
post: any;
|
||||
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div ref="rootEl">
|
||||
<MkLoading v-if="fetching" />
|
||||
<Loading v-if="fetching" />
|
||||
<div v-else>
|
||||
<canvas ref="chartEl"></canvas>
|
||||
</div>
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<MkModal
|
||||
<Modal
|
||||
ref="modal"
|
||||
:z-priority="'middle'"
|
||||
@click="modal.close()"
|
||||
@ -22,7 +22,7 @@
|
||||
>
|
||||
</footer>
|
||||
</div>
|
||||
</MkModal>
|
||||
</Modal>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
@ -30,7 +30,7 @@ import {} from "vue";
|
||||
import type * as misskey from "iceshrimp-js";
|
||||
import bytes from "@/filters/bytes";
|
||||
import number from "@/filters/number";
|
||||
import MkModal from "@/components/MkModal.vue";
|
||||
import Modal from "@/components/Modal.vue";
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
@ -43,7 +43,7 @@ const emit = defineEmits<{
|
||||
(ev: "closed"): void;
|
||||
}>();
|
||||
|
||||
const modal = $ref<InstanceType<typeof MkModal>>();
|
||||
const modal = $ref<InstanceType<typeof Modal>>();
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@ -19,13 +19,13 @@
|
||||
{{ instance.softwareVersion }}</span
|
||||
>
|
||||
</div>
|
||||
<MkMiniChart v-if="chartValues" class="chart" :src="chartValues" />
|
||||
<MiniChart v-if="chartValues" class="chart" :src="chartValues" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import * as iceshrimp from "iceshrimp-js";
|
||||
import MkMiniChart from "@/components/MkMiniChart.vue";
|
||||
import MiniChart from "@/components/MiniChart.vue";
|
||||
import * as os from "@/os";
|
||||
import { getProxiedImageUrlNullable } from "@/scripts/media-proxy";
|
||||
|
||||
@ -11,13 +11,13 @@
|
||||
<template #header>{{ i18n.ts.selectInstance }}</template>
|
||||
<div class="mehkoush">
|
||||
<div class="form">
|
||||
<MkInput
|
||||
<Input
|
||||
v-model="hostname"
|
||||
:autofocus="true"
|
||||
@update:modelValue="search"
|
||||
>
|
||||
<template #label>{{ i18n.ts.instance }}</template>
|
||||
</MkInput>
|
||||
</Input>
|
||||
</div>
|
||||
<div
|
||||
v-if="hostname != ''"
|
||||
@ -56,8 +56,8 @@
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import MkInput from "@/components/form/input.vue";
|
||||
import XModalWindow from "@/components/MkModalWindow.vue";
|
||||
import Input from "@/components/form/Input.vue";
|
||||
import XModalWindow from "@/components/ModalWindow.vue";
|
||||
import * as os from "@/os";
|
||||
import { i18n } from "@/i18n";
|
||||
import { Instance } from "iceshrimp-js/built/entities";
|
||||
@ -1,10 +1,10 @@
|
||||
<template>
|
||||
<div :class="$style.root">
|
||||
<MkFolder class="item">
|
||||
<Folder class="item">
|
||||
<template #header>Chart</template>
|
||||
<div :class="$style.chart">
|
||||
<div class="selects">
|
||||
<MkSelect v-model="chartSrc" style="margin: 0; flex: 1">
|
||||
<Select v-model="chartSrc" style="margin: 0; flex: 1">
|
||||
<optgroup :label="i18n.ts.federation">
|
||||
<option value="federation">
|
||||
{{ i18n.ts._charts.federation }}
|
||||
@ -46,26 +46,26 @@
|
||||
{{ i18n.ts._charts.storageUsageIncDec }}
|
||||
</option>
|
||||
</optgroup>
|
||||
</MkSelect>
|
||||
<MkSelect v-model="chartSpan" style="margin: 0 0 0 10px">
|
||||
</Select>
|
||||
<Select v-model="chartSpan" style="margin: 0 0 0 10px">
|
||||
<option value="hour">{{ i18n.ts.perHour }}</option>
|
||||
<option value="day">{{ i18n.ts.perDay }}</option>
|
||||
</MkSelect>
|
||||
</Select>
|
||||
</div>
|
||||
<div class="chart _panel">
|
||||
<MkChart
|
||||
<ChartComp
|
||||
:src="chartSrc"
|
||||
:span="chartSpan"
|
||||
:limit="chartLimit"
|
||||
:detailed="true"
|
||||
></MkChart>
|
||||
></ChartComp>
|
||||
</div>
|
||||
</div>
|
||||
</MkFolder>
|
||||
</Folder>
|
||||
|
||||
<MkFolder class="item">
|
||||
<Folder class="item">
|
||||
<template #header>Active users heatmap</template>
|
||||
<MkSelect v-model="heatmapSrc" style="margin: 0 0 12px 0">
|
||||
<Select v-model="heatmapSrc" style="margin: 0 0 12px 0">
|
||||
<option value="active-users">Active users</option>
|
||||
<option value="notes">Posts</option>
|
||||
<option value="ap-requests-inbox-received">
|
||||
@ -77,13 +77,13 @@
|
||||
<option value="ap-requests-deliver-failed">
|
||||
Fediverse Requests: deliverFailed
|
||||
</option>
|
||||
</MkSelect>
|
||||
</Select>
|
||||
<div class="_panel" :class="$style.heatmap">
|
||||
<MkHeatmap :src="heatmapSrc" />
|
||||
<Heatmap :src="heatmapSrc" />
|
||||
</div>
|
||||
</MkFolder>
|
||||
</Folder>
|
||||
|
||||
<MkFolder class="item">
|
||||
<Folder class="item">
|
||||
<template #header>Federation</template>
|
||||
<div :class="$style.federation">
|
||||
<div class="pies">
|
||||
@ -97,20 +97,20 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</MkFolder>
|
||||
</Folder>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { onMounted } from "vue";
|
||||
import { Chart } from "chart.js";
|
||||
import MkSelect from "@/components/form/select.vue";
|
||||
import MkChart from "@/components/MkChart.vue";
|
||||
import Select from "@/components/form/Select.vue";
|
||||
import ChartComp from "@/components/Chart.vue";
|
||||
import { useChartTooltip } from "@/scripts/use-chart-tooltip";
|
||||
import * as os from "@/os";
|
||||
import { i18n } from "@/i18n";
|
||||
import MkHeatmap from "@/components/MkHeatmap.vue";
|
||||
import MkFolder from "@/components/MkFolder.vue";
|
||||
import Heatmap from "@/components/Heatmap.vue";
|
||||
import Folder from "@/components/Folder.vue";
|
||||
import { initChart } from "@/scripts/init-chart";
|
||||
|
||||
initChart();
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<MkModal
|
||||
<Modal
|
||||
ref="modal"
|
||||
v-slot="{ type, maxHeight }"
|
||||
:prefer-type="preferedModalType"
|
||||
@ -38,7 +38,7 @@
|
||||
><i class="ph-circle ph-fill"></i
|
||||
></span>
|
||||
</button>
|
||||
<MkA
|
||||
<A
|
||||
v-else
|
||||
v-click-anime
|
||||
:to="item.to"
|
||||
@ -54,16 +54,16 @@
|
||||
}"
|
||||
><i class="ph-circle ph-fill"></i
|
||||
></span>
|
||||
</MkA>
|
||||
</A>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</MkModal>
|
||||
</Modal>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import {} from "vue";
|
||||
import MkModal from "@/components/MkModal.vue";
|
||||
import Modal from "@/components/Modal.vue";
|
||||
import { navbarItemDef } from "@/navbar";
|
||||
import { instanceName } from "@/config";
|
||||
import { defaultStore } from "@/store";
|
||||
@ -92,7 +92,7 @@ const preferedModalType =
|
||||
? "drawer"
|
||||
: "dialog";
|
||||
|
||||
const modal = $ref<InstanceType<typeof MkModal>>();
|
||||
const modal = $ref<InstanceType<typeof Modal>>();
|
||||
|
||||
const menu = defaultStore.state.menu;
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<component
|
||||
:is="self ? 'MkA' : 'a'"
|
||||
:is="self ? 'A' : 'a'"
|
||||
ref="el"
|
||||
class="xlcxczvw _link"
|
||||
:[attr]="self ? url.substr(local.length) : url"
|
||||
@ -39,9 +39,7 @@ const el = $ref();
|
||||
|
||||
useTooltip($$(el), (showing) => {
|
||||
os.popup(
|
||||
defineAsyncComponent(
|
||||
() => import("@/components/MkUrlPreviewPopup.vue"),
|
||||
),
|
||||
defineAsyncComponent(() => import("@/components/UrlPreviewPopup.vue")),
|
||||
{
|
||||
showing,
|
||||
url: props.url,
|
||||
@ -1,28 +1,28 @@
|
||||
<template>
|
||||
<MkModal ref="modal" :z-priority="'middle'" @closed="$emit('closed')">
|
||||
<Modal ref="modal" :z-priority="'middle'" @closed="$emit('closed')">
|
||||
<div :class="$style.root">
|
||||
<p :class="$style.title">
|
||||
{{ i18n.ts.youHaveUnreadAnnouncements }}
|
||||
</p>
|
||||
<MkButton
|
||||
<Button
|
||||
:class="$style.gotIt"
|
||||
primary
|
||||
full
|
||||
@click="checkAnnouncements()"
|
||||
>{{ i18n.ts.gotIt }}</MkButton
|
||||
>{{ i18n.ts.gotIt }}</Button
|
||||
>
|
||||
</div>
|
||||
</MkModal>
|
||||
</Modal>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { shallowRef } from "vue";
|
||||
import MkModal from "@/components/MkModal.vue";
|
||||
import MkButton from "@/components/MkButton.vue";
|
||||
import Modal from "@/components/Modal.vue";
|
||||
import Button from "@/components/Button.vue";
|
||||
import { i18n } from "@/i18n";
|
||||
import * as os from "@/os";
|
||||
|
||||
const modal = shallowRef<InstanceType<typeof MkModal>>();
|
||||
const modal = shallowRef<InstanceType<typeof Modal>>();
|
||||
const checkAnnouncements = () => {
|
||||
modal.value.close();
|
||||
location.href = "/announcements";
|
||||
@ -92,7 +92,7 @@ import VuePlyr from "vue-plyr";
|
||||
import "vue-plyr/dist/vue-plyr.css";
|
||||
import type * as misskey from "iceshrimp-js";
|
||||
import { getStaticImageUrl } from "@/scripts/get-static-image-url";
|
||||
import ImgWithBlurhash from "@/components/MkImgWithBlurhash.vue";
|
||||
import ImgWithBlurhash from "@/components/ImgWithBlurhash.vue";
|
||||
import { defaultStore } from "@/store";
|
||||
import { i18n } from "@/i18n";
|
||||
import * as os from "@/os";
|
||||
@ -190,6 +190,7 @@ watch(
|
||||
overflow: hidden;
|
||||
top: 12px;
|
||||
right: 12px;
|
||||
|
||||
> * {
|
||||
background-color: var(--accentedBg);
|
||||
-webkit-backdrop-filter: var(--blur, blur(15px));
|
||||
@ -211,6 +212,7 @@ watch(
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
box-sizing: border-box;
|
||||
|
||||
&:focus-visible {
|
||||
border: 2px solid var(--accent);
|
||||
}
|
||||
@ -230,16 +232,19 @@ watch(
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.plyr__controls) {
|
||||
contain: strict;
|
||||
height: 24px;
|
||||
box-sizing: content-box;
|
||||
}
|
||||
|
||||
:deep(.plyr__volume) {
|
||||
display: flex;
|
||||
min-width: max-content;
|
||||
width: 110px;
|
||||
transition: width 0.2s cubic-bezier(0, 0, 0, 1);
|
||||
|
||||
[data-plyr="volume"] {
|
||||
width: 0;
|
||||
flex-grow: 1;
|
||||
@ -247,9 +252,11 @@ watch(
|
||||
margin 0.3s,
|
||||
opacity 0.2s 0.2s;
|
||||
}
|
||||
|
||||
&:not(:hover):not(:focus-within) {
|
||||
width: 0px;
|
||||
transition: width 0.2s;
|
||||
|
||||
[data-plyr="volume"] {
|
||||
margin-inline: 0px;
|
||||
opacity: 0;
|
||||
@ -259,9 +266,11 @@ watch(
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.max-width_350px {
|
||||
:deep(.plyr:not(:fullscreen)) {
|
||||
min-width: unset !important;
|
||||
|
||||
.plyr__control--overlaid,
|
||||
.plyr__progress__container,
|
||||
.plyr__volume,
|
||||
@ -269,6 +278,7 @@ watch(
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.plyr__time) {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<MkModal ref="modal" @click="done(true)" @closed="$emit('closed')">
|
||||
<Modal ref="modal" @click="done(true)" @closed="$emit('closed')">
|
||||
<div class="container">
|
||||
<div class="fullwidth top-caption">
|
||||
<div class="mk-dialog">
|
||||
@ -27,19 +27,19 @@
|
||||
"
|
||||
class="buttons"
|
||||
>
|
||||
<MkButton
|
||||
<Button
|
||||
inline
|
||||
primary
|
||||
:disabled="remainingLength < 0"
|
||||
@click="ok"
|
||||
>{{ i18n.ts.ok }}</MkButton
|
||||
>{{ i18n.ts.ok }}</Button
|
||||
>
|
||||
<MkButton inline @click="caption">{{
|
||||
<Button inline @click="caption">{{
|
||||
i18n.ts.caption
|
||||
}}</MkButton>
|
||||
<MkButton inline @click="cancel">{{
|
||||
}}</Button>
|
||||
<Button inline @click="cancel">{{
|
||||
i18n.ts.cancel
|
||||
}}</MkButton>
|
||||
}}</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -62,7 +62,7 @@
|
||||
</footer>
|
||||
</div>
|
||||
</div>
|
||||
</MkModal>
|
||||
</Modal>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
@ -70,8 +70,8 @@ import { defineComponent } from "vue";
|
||||
import insertTextAtCursor from "insert-text-at-cursor";
|
||||
import { length } from "stringz";
|
||||
import * as os from "@/os";
|
||||
import MkModal from "@/components/MkModal.vue";
|
||||
import MkButton from "@/components/MkButton.vue";
|
||||
import Modal from "@/components/Modal.vue";
|
||||
import Button from "@/components/Button.vue";
|
||||
import bytes from "@/filters/bytes";
|
||||
import number from "@/filters/number";
|
||||
import { i18n } from "@/i18n";
|
||||
@ -79,8 +79,8 @@ import { instance } from "@/instance";
|
||||
|
||||
export default defineComponent({
|
||||
components: {
|
||||
MkModal,
|
||||
MkButton,
|
||||
Modal,
|
||||
Button,
|
||||
},
|
||||
|
||||
props: {
|
||||
@ -210,18 +210,22 @@ export default defineComponent({
|
||||
left: 0;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
@media (max-width: 850px) {
|
||||
.container {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.top-caption {
|
||||
padding-bottom: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.fullwidth {
|
||||
width: 100%;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.mk-dialog {
|
||||
position: relative;
|
||||
padding: 32px;
|
||||
@ -282,6 +286,7 @@ export default defineComponent({
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.hdrwpsaf {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@ -33,8 +33,8 @@ import * as misskey from "iceshrimp-js";
|
||||
import PhotoSwipeLightbox from "photoswipe/lightbox";
|
||||
import PhotoSwipe from "photoswipe";
|
||||
import "photoswipe/style.css";
|
||||
import XBanner from "@/components/MkMediaBanner.vue";
|
||||
import XMedia from "@/components/MkMedia.vue";
|
||||
import XBanner from "@/components/MediaBanner.vue";
|
||||
import XMedia from "@/components/Media.vue";
|
||||
import * as os from "@/os";
|
||||
import { FILE_TYPE_BROWSERSAFE } from "@/const";
|
||||
import { defaultStore } from "@/store";
|
||||
@ -198,6 +198,7 @@ const previewableCount = props.mediaList.filter((media) =>
|
||||
|
||||
&[data-count] {
|
||||
padding-top: 56.25%; // 16:9;
|
||||
|
||||
> div {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
@ -278,6 +279,7 @@ const previewableCount = props.mediaList.filter((media) =>
|
||||
//z-index: v-bind(pswpZIndex);
|
||||
z-index: 2000000;
|
||||
}
|
||||
|
||||
.pwsp__alt-text-container {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<MkA
|
||||
<A
|
||||
v-if="url.startsWith('/')"
|
||||
v-user-preview="canonical"
|
||||
class="mention"
|
||||
@ -16,7 +16,7 @@
|
||||
>@{{ toUnicode(host) }}</span
|
||||
>
|
||||
</span>
|
||||
</MkA>
|
||||
</A>
|
||||
<a
|
||||
v-else
|
||||
class="mention"
|
||||
@ -28,9 +28,11 @@
|
||||
v-else-if="item.type === 'pending'"
|
||||
class="pending item"
|
||||
>
|
||||
<span><MkEllipsis /></span>
|
||||
<span>
|
||||
<Ellipsis />
|
||||
</span>
|
||||
</span>
|
||||
<MkA
|
||||
<A
|
||||
v-else-if="item.type === 'link'"
|
||||
:to="item.to"
|
||||
class="_button item"
|
||||
@ -43,7 +45,7 @@
|
||||
class="ph-fw ph-lg"
|
||||
:class="item.icon"
|
||||
></i>
|
||||
<MkAvatar
|
||||
<Avatar
|
||||
v-if="item.avatar"
|
||||
:user="item.avatar"
|
||||
class="avatar"
|
||||
@ -60,7 +62,7 @@
|
||||
}"
|
||||
><i class="ph-circle ph-fill"></i
|
||||
></span>
|
||||
</MkA>
|
||||
</A>
|
||||
<a
|
||||
v-else-if="item.type === 'a'"
|
||||
:href="item.href"
|
||||
@ -97,11 +99,8 @@
|
||||
@mouseenter.passive="onItemMouseEnter(item)"
|
||||
@mouseleave.passive="onItemMouseLeave(item)"
|
||||
>
|
||||
<MkAvatar
|
||||
:user="item.user"
|
||||
class="avatar"
|
||||
disableLink
|
||||
/><MkUserName :user="item.user" />
|
||||
<Avatar :user="item.user" class="avatar" disableLink />
|
||||
<UserName :user="item.user" />
|
||||
<span
|
||||
v-if="item.indicate"
|
||||
class="indicator"
|
||||
@ -141,11 +140,9 @@
|
||||
item.text
|
||||
}}</span>
|
||||
<i
|
||||
class="ph-caret-right ph-bold ph-lg ph-fw ph-lg"
|
||||
style="margin-left: auto;
|
||||
margin-right: unset;"
|
||||
></i
|
||||
>
|
||||
class="ph-caret-right ph-bold ph-lg ph-fw ph-lg"
|
||||
style="margin-left: auto; margin-right: unset"
|
||||
></i>
|
||||
</button>
|
||||
<button
|
||||
v-else-if="!item.hidden"
|
||||
@ -165,7 +162,7 @@
|
||||
class="ph-fw ph-lg"
|
||||
:class="item.icon"
|
||||
></i>
|
||||
<MkAvatar
|
||||
<Avatar
|
||||
v-if="item.avatar"
|
||||
:user="item.avatar"
|
||||
class="avatar"
|
||||
@ -217,13 +214,13 @@ import {
|
||||
watch,
|
||||
} from "vue";
|
||||
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 * as os from "@/os";
|
||||
import { i18n } from "@/i18n";
|
||||
import { FocusTrap } from "focus-trap-vue";
|
||||
|
||||
const XChild = defineAsyncComponent(() => import("./MkMenu.child.vue"));
|
||||
const XChild = defineAsyncComponent(() => import("./MenuChild.vue"));
|
||||
const focusTrap = ref();
|
||||
|
||||
const props = defineProps<{
|
||||
@ -392,6 +389,7 @@ onBeforeUnmount(() => {
|
||||
background: var(--accentedBg);
|
||||
}
|
||||
}
|
||||
|
||||
&:focus-visible:before {
|
||||
outline: auto;
|
||||
}
|
||||
@ -534,7 +532,7 @@ onBeforeUnmount(() => {
|
||||
margin-right: 14px;
|
||||
width: 24px;
|
||||
}
|
||||
|
||||
|
||||
> .avatar {
|
||||
height: 24px;
|
||||
}
|
||||
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div ref="el" class="sfhdhdhr" tabindex="-1">
|
||||
<MkMenu
|
||||
<Menu
|
||||
ref="menu"
|
||||
:items="items"
|
||||
:align="align"
|
||||
@ -21,7 +21,7 @@ import {
|
||||
ref,
|
||||
watch,
|
||||
} from "vue";
|
||||
import MkMenu from "./MkMenu.vue";
|
||||
import Menu from "./Menu.vue";
|
||||
import { MenuItem } from "@/types/menu";
|
||||
|
||||
const props = defineProps<{
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<MkModal ref="modal" @click="$emit('click')" @closed="$emit('closed')">
|
||||
<Modal ref="modal" @click="$emit('click')" @closed="$emit('closed')">
|
||||
<div
|
||||
ref="rootEl"
|
||||
class="hrmcaedk _narrow_"
|
||||
@ -35,25 +35,26 @@
|
||||
</button>
|
||||
</div>
|
||||
<div class="body">
|
||||
<MkStickyContainer>
|
||||
<template #header
|
||||
><MkPageHeader
|
||||
<StickyContainer>
|
||||
<template #header>
|
||||
<PageHeader
|
||||
v-if="
|
||||
pageMetadata?.value &&
|
||||
!pageMetadata?.value.hideHeader
|
||||
"
|
||||
:info="pageMetadata?.value"
|
||||
/></template>
|
||||
/>
|
||||
</template>
|
||||
<RouterView :router="router" />
|
||||
</MkStickyContainer>
|
||||
</StickyContainer>
|
||||
</div>
|
||||
</div>
|
||||
</MkModal>
|
||||
</Modal>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ComputedRef, provide } from "vue";
|
||||
import MkModal from "@/components/MkModal.vue";
|
||||
import Modal from "@/components/Modal.vue";
|
||||
import { popout as _popout } from "@/scripts/popout";
|
||||
import copyToClipboard from "@/scripts/copy-to-clipboard";
|
||||
import { url } from "@/config";
|
||||
@ -82,7 +83,7 @@ router.addListener("push", (ctx) => {});
|
||||
|
||||
let pageMetadata = $ref<null | ComputedRef<PageMetadata>>();
|
||||
let rootEl = $ref();
|
||||
let modal = $ref<InstanceType<typeof MkModal>>();
|
||||
let modal = $ref<InstanceType<typeof Modal>>();
|
||||
let path = $ref(props.initialPath);
|
||||
let width = $ref(860);
|
||||
let height = $ref(660);
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<MkModal
|
||||
<Modal
|
||||
ref="modal"
|
||||
:prefer-type="'dialog'"
|
||||
@click="onBgClick"
|
||||
@ -58,12 +58,12 @@
|
||||
</div>
|
||||
</div>
|
||||
</FocusTrap>
|
||||
</MkModal>
|
||||
</Modal>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { FocusTrap } from "focus-trap-vue";
|
||||
import MkModal from "./MkModal.vue";
|
||||
import Modal from "./Modal.vue";
|
||||
import { i18n } from "@/i18n";
|
||||
|
||||
const props = withDefaults(
|
||||
@ -90,7 +90,7 @@ const emit = defineEmits<{
|
||||
(event: "ok"): void;
|
||||
}>();
|
||||
|
||||
let modal = $shallowRef<InstanceType<typeof MkModal>>();
|
||||
let modal = $shallowRef<InstanceType<typeof Modal>>();
|
||||
let rootEl = $shallowRef<HTMLElement>();
|
||||
let headerEl = $shallowRef<HTMLElement>();
|
||||
|
||||
@ -5,12 +5,12 @@
|
||||
style="margin-right: 8px"
|
||||
/>
|
||||
{{ i18n.ts.accountMoved }}
|
||||
<MkMention class="link" :username="acct" :host="host" />
|
||||
<Mention class="link" :username="acct" :host="host" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import MkMention from "./MkMention.vue";
|
||||
import Mention from "./Mention.vue";
|
||||
import { i18n } from "@/i18n";
|
||||
|
||||
defineProps<{
|
||||
@ -11,7 +11,7 @@
|
||||
:class="{ renote: isRenote }"
|
||||
:id="appearNote.id"
|
||||
>
|
||||
<MkNoteSub
|
||||
<NoteSub
|
||||
v-if="appearNote.reply && !detailedView && !collapsedReply"
|
||||
:note="appearNote.reply"
|
||||
:forceExpandCw="props.forceExpandCw"
|
||||
@ -46,14 +46,14 @@
|
||||
<i class="ph-repeat ph-bold ph-lg"></i>
|
||||
<I18n :src="i18n.ts.renotedBy" tag="span">
|
||||
<template #user>
|
||||
<MkA
|
||||
<A
|
||||
v-user-preview="note.userId"
|
||||
class="name"
|
||||
:to="userPage(note.user)"
|
||||
@click.stop
|
||||
>
|
||||
<MkUserName :user="note.user" />
|
||||
</MkA>
|
||||
<UserName :user="note.user" />
|
||||
</A>
|
||||
</template>
|
||||
</I18n>
|
||||
<div class="info">
|
||||
@ -66,17 +66,17 @@
|
||||
v-if="isMyRenote"
|
||||
class="ph-dots-three-outline ph-bold ph-lg dropdownIcon"
|
||||
></i>
|
||||
<MkTime :time="note.createdAt" />
|
||||
<Time :time="note.createdAt" />
|
||||
</button>
|
||||
<MkVisibility :note="note" />
|
||||
<Visibility :note="note" />
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="collapsedReply && appearNote.reply" class="info">
|
||||
<MkAvatar class="avatar" :user="appearNote.reply.user" />
|
||||
<MkUserName
|
||||
<Avatar class="avatar" :user="appearNote.reply.user" />
|
||||
<UserName
|
||||
class="username"
|
||||
:user="appearNote.reply.user"
|
||||
></MkUserName>
|
||||
></UserName>
|
||||
<Mfm
|
||||
class="summary"
|
||||
:text="getNoteSummary(appearNote.reply)"
|
||||
@ -96,11 +96,11 @@
|
||||
>
|
||||
<div class="main">
|
||||
<div class="header-container">
|
||||
<MkAvatar class="avatar" :user="appearNote.user" />
|
||||
<Avatar class="avatar" :user="appearNote.user" />
|
||||
<XNoteHeader class="header" :note="appearNote" />
|
||||
</div>
|
||||
<div class="body">
|
||||
<MkSubNoteContent
|
||||
<SubNoteContent
|
||||
class="text"
|
||||
:note="appearNote"
|
||||
:detailed="true"
|
||||
@ -110,9 +110,9 @@
|
||||
@push="(e) => router.push(notePage(e))"
|
||||
@focusfooter="footerEl.focus()"
|
||||
@expanded="(e) => setPostExpanded(e)"
|
||||
></MkSubNoteContent>
|
||||
></SubNoteContent>
|
||||
<div v-if="translating || translation" class="translation">
|
||||
<MkLoading v-if="translating" mini />
|
||||
<Loading v-if="translating" mini />
|
||||
<div v-else class="translated">
|
||||
<b
|
||||
>{{
|
||||
@ -134,20 +134,20 @@
|
||||
v-if="detailedView || (appearNote.channel && !inChannel)"
|
||||
class="info"
|
||||
>
|
||||
<MkA
|
||||
<A
|
||||
v-if="detailedView"
|
||||
class="created-at"
|
||||
:to="notePage(appearNote)"
|
||||
>
|
||||
<MkTime :time="appearNote.createdAt" mode="absolute" />
|
||||
</MkA>
|
||||
<MkA
|
||||
<Time :time="appearNote.createdAt" mode="absolute" />
|
||||
</A>
|
||||
<A
|
||||
v-if="appearNote.channel && !inChannel"
|
||||
class="channel"
|
||||
:to="`/channels/${appearNote.channel.id}`"
|
||||
@click.stop
|
||||
><i class="ph-television ph-bold"></i>
|
||||
{{ appearNote.channel.name }}</MkA
|
||||
{{ appearNote.channel.name }}</A
|
||||
>
|
||||
</div>
|
||||
<footer ref="footerEl" class="footer" tabindex="-1">
|
||||
@ -241,13 +241,13 @@
|
||||
>
|
||||
<I18n :src="softMuteReasonI18nSrc(muted.what)" tag="small">
|
||||
<template #name>
|
||||
<MkA
|
||||
<A
|
||||
v-user-preview="note.userId"
|
||||
class="name"
|
||||
:to="userPage(note.user)"
|
||||
>
|
||||
<MkUserName :user="note.user" />
|
||||
</MkA>
|
||||
<UserName :user="note.user" />
|
||||
</A>
|
||||
</template>
|
||||
<template #reason>
|
||||
<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 type { Ref } from "vue";
|
||||
import type * as misskey from "iceshrimp-js";
|
||||
import MkNoteSub from "@/components/MkNoteSub.vue";
|
||||
import MkSubNoteContent from "./MkSubNoteContent.vue";
|
||||
import XNoteHeader from "@/components/MkNoteHeader.vue";
|
||||
import XNoteSimple from "@/components/MkNoteSimple.vue";
|
||||
import XMediaList from "@/components/MkMediaList.vue";
|
||||
import XCwButton from "@/components/MkCwButton.vue";
|
||||
import XPoll from "@/components/MkPoll.vue";
|
||||
import XRenoteButton from "@/components/MkRenoteButton.vue";
|
||||
import XReactionsViewer from "@/components/MkReactionsViewer.vue";
|
||||
import XStarButton from "@/components/MkStarButton.vue";
|
||||
import XStarButtonNoEmoji from "@/components/MkStarButtonNoEmoji.vue";
|
||||
import XQuoteButton from "@/components/MkQuoteButton.vue";
|
||||
import MkUrlPreview from "@/components/MkUrlPreview.vue";
|
||||
import MkVisibility from "@/components/MkVisibility.vue";
|
||||
import NoteSub from "@/components/NoteSub.vue";
|
||||
import SubNoteContent from "./SubNoteContent.vue";
|
||||
import XNoteHeader from "@/components/NoteHeader.vue";
|
||||
import XNoteSimple from "@/components/NoteSimple.vue";
|
||||
import XMediaList from "@/components/MediaList.vue";
|
||||
import XCwButton from "@/components/CwButton.vue";
|
||||
import XPoll from "@/components/Poll.vue";
|
||||
import XRenoteButton from "@/components/RenoteButton.vue";
|
||||
import XReactionsViewer from "@/components/ReactionsViewer.vue";
|
||||
import XStarButton from "@/components/StarButton.vue";
|
||||
import XStarButtonNoEmoji from "@/components/StarButtonNoEmoji.vue";
|
||||
import XQuoteButton from "@/components/QuoteButton.vue";
|
||||
import UrlPreview from "@/components/UrlPreview.vue";
|
||||
import Visibility from "@/components/Visibility.vue";
|
||||
import copyToClipboard from "@/scripts/copy-to-clipboard";
|
||||
import { url } from "@/config";
|
||||
import { pleaseLogin } from "@/scripts/please-login";
|
||||
@ -668,15 +668,18 @@ defineExpose({
|
||||
padding: 0 32px 0 32px;
|
||||
display: flex;
|
||||
z-index: 1;
|
||||
|
||||
&:first-child {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
> :not(.line) {
|
||||
width: 0;
|
||||
flex-grow: 1;
|
||||
position: relative;
|
||||
line-height: 28px;
|
||||
}
|
||||
|
||||
> .line {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
@ -691,6 +694,7 @@ defineExpose({
|
||||
> div > i {
|
||||
margin-left: -0.5px;
|
||||
}
|
||||
|
||||
> .info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@ -740,6 +744,7 @@ defineExpose({
|
||||
color: inherit;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
|
||||
> .dropdownIcon {
|
||||
margin-right: 4px;
|
||||
}
|
||||
@ -750,6 +755,7 @@ defineExpose({
|
||||
&.collapsedReply {
|
||||
.line {
|
||||
opacity: 0.25;
|
||||
|
||||
&::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
@ -762,10 +768,12 @@ defineExpose({
|
||||
height: calc(50% + 5px);
|
||||
}
|
||||
}
|
||||
|
||||
.info {
|
||||
color: var(--fgTransparentWeak);
|
||||
transition: color 0.2s;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
width: 1.2em;
|
||||
height: 1.2em;
|
||||
@ -774,14 +782,17 @@ defineExpose({
|
||||
margin-right: 0.4em;
|
||||
background: var(--panelHighlight);
|
||||
}
|
||||
|
||||
.username {
|
||||
font-weight: 700;
|
||||
flex-shrink: 0;
|
||||
max-width: 30%;
|
||||
|
||||
&::after {
|
||||
content: ": ";
|
||||
}
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus-within {
|
||||
.info {
|
||||
@ -811,6 +822,7 @@ defineExpose({
|
||||
display: flex;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
|
||||
> .avatar {
|
||||
flex-shrink: 0;
|
||||
display: block;
|
||||
@ -821,30 +833,36 @@ defineExpose({
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
> .header {
|
||||
width: 0;
|
||||
flex-grow: 1;
|
||||
}
|
||||
}
|
||||
|
||||
> .main {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
|
||||
> .body {
|
||||
margin-top: 0.7em;
|
||||
|
||||
> .translation {
|
||||
border: solid 0.5px var(--divider);
|
||||
border-radius: var(--radius);
|
||||
padding: 12px;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
> .renote {
|
||||
padding-top: 8px;
|
||||
|
||||
> * {
|
||||
padding: 16px;
|
||||
border: solid 1px var(--renote);
|
||||
border-radius: 8px;
|
||||
transition: background 0.2s;
|
||||
|
||||
&:hover,
|
||||
&:focus-within {
|
||||
background-color: var(--panelHighlight);
|
||||
@ -852,6 +870,7 @@ defineExpose({
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> .info {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
@ -861,26 +880,31 @@ defineExpose({
|
||||
opacity: 0.7;
|
||||
font-size: 0.9em;
|
||||
}
|
||||
|
||||
> .footer {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin-top: 0.4em;
|
||||
|
||||
> :deep(.button) {
|
||||
position: relative;
|
||||
margin: 0;
|
||||
padding: 8px;
|
||||
opacity: 0.7;
|
||||
|
||||
&:disabled {
|
||||
opacity: 0.5 !important;
|
||||
}
|
||||
|
||||
flex-grow: 1;
|
||||
max-width: 3.5em;
|
||||
width: max-content;
|
||||
min-width: max-content;
|
||||
height: auto;
|
||||
transition: opacity 0.2s;
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
@ -890,17 +914,21 @@ defineExpose({
|
||||
z-index: -1;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
|
||||
&:first-of-type {
|
||||
margin-left: -0.5em;
|
||||
|
||||
&::before {
|
||||
border-radius: 100px 0 0 100px;
|
||||
}
|
||||
}
|
||||
|
||||
&:last-of-type {
|
||||
&::before {
|
||||
border-radius: 0 100px 100px 0;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: var(--fgHighlighted);
|
||||
}
|
||||
@ -931,25 +959,32 @@ defineExpose({
|
||||
font-size: 0.975em;
|
||||
--avatarSize: 46px;
|
||||
padding-top: 6px;
|
||||
|
||||
> .note-context {
|
||||
padding-inline: 16px;
|
||||
margin-top: 8px;
|
||||
|
||||
> :not(.line) {
|
||||
margin-top: 0px;
|
||||
}
|
||||
|
||||
> .line {
|
||||
margin-right: 10px;
|
||||
|
||||
&::before {
|
||||
margin-top: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> .article {
|
||||
padding: 18px 16px 8px;
|
||||
|
||||
&:first-child,
|
||||
&:nth-child(2) {
|
||||
padding-top: 104px;
|
||||
}
|
||||
|
||||
> .main > .header-container > .avatar {
|
||||
margin-right: 10px;
|
||||
// top: calc(14px + var(--stickyTop, 0px));
|
||||
@ -971,6 +1006,7 @@ defineExpose({
|
||||
._blur_text {
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
&:active ._blur_text {
|
||||
filter: blur(0px);
|
||||
}
|
||||
@ -9,7 +9,7 @@
|
||||
:tabindex="!isDeleted ? '-1' : null"
|
||||
:class="{ renote: isRenote }"
|
||||
>
|
||||
<MkNoteSub
|
||||
<NoteSub
|
||||
v-if="conversation"
|
||||
v-for="note in conversation"
|
||||
:key="note.id"
|
||||
@ -18,8 +18,8 @@
|
||||
:detailedView="true"
|
||||
:forceExpandCw="props.expandAllCws"
|
||||
/>
|
||||
<MkLoading v-else-if="note.reply" mini />
|
||||
<MkNoteSub
|
||||
<Loading v-else-if="note.reply" mini />
|
||||
<NoteSub
|
||||
v-if="note.reply"
|
||||
:note="note.reply"
|
||||
class="reply-to"
|
||||
@ -27,16 +27,16 @@
|
||||
:forceExpandCw="props.expandAllCws"
|
||||
/>
|
||||
|
||||
<MkNote
|
||||
<Note
|
||||
ref="noteEl"
|
||||
@contextmenu.stop="onContextmenu"
|
||||
tabindex="-1"
|
||||
:note="note"
|
||||
detailedView
|
||||
:forceExpandCw="props.expandAllCws"
|
||||
></MkNote>
|
||||
></Note>
|
||||
|
||||
<MkTab v-model="tab" :style="'underline'" @update:modelValue="loadTab">
|
||||
<Tab v-model="tab" :style="'underline'" @update:modelValue="loadTab">
|
||||
<option value="replies">
|
||||
<!-- <i class="ph-arrow-u-up-left ph-bold ph-lg"></i> -->
|
||||
<span v-if="note.repliesCount > 0" class="count">{{
|
||||
@ -64,9 +64,9 @@
|
||||
<span class="count">{{ clips.length }}</span>
|
||||
{{ i18n.ts.clips }}
|
||||
</option>
|
||||
</MkTab>
|
||||
</Tab>
|
||||
|
||||
<MkNoteSub
|
||||
<NoteSub
|
||||
v-if="directReplies && tab === 'replies'"
|
||||
v-for="note in directReplies"
|
||||
:key="note.id"
|
||||
@ -77,9 +77,9 @@
|
||||
:parentId="note.id"
|
||||
:forceExpandCw="props.expandAllCws"
|
||||
/>
|
||||
<MkLoading v-else-if="tab === 'replies' && note.repliesCount > 0" />
|
||||
<Loading v-else-if="tab === 'replies' && note.repliesCount > 0" />
|
||||
|
||||
<MkNoteSub
|
||||
<NoteSub
|
||||
v-if="directQuotes && tab === 'quotes'"
|
||||
v-for="note in directQuotes"
|
||||
:key="note.id"
|
||||
@ -90,26 +90,26 @@
|
||||
:parentId="note.id"
|
||||
:forceExpandCw="props.expandAllCws"
|
||||
/>
|
||||
<MkLoading v-else-if="tab === 'quotes' && directQuotes.length > 0" />
|
||||
<Loading v-else-if="tab === 'quotes' && directQuotes.length > 0" />
|
||||
|
||||
<!-- <MkPagination
|
||||
<!-- <Pagination
|
||||
v-if="tab === 'renotes'"
|
||||
v-slot="{ items }"
|
||||
ref="pagingComponent"
|
||||
:pagination="pagination"
|
||||
> -->
|
||||
<MkUserCardMini
|
||||
<UserCardMini
|
||||
v-if="tab === 'renotes' && renotes"
|
||||
v-for="item in renotes"
|
||||
:key="item.user.id"
|
||||
:user="item.user"
|
||||
:with-chart="false"
|
||||
/>
|
||||
<!-- </MkPagination> -->
|
||||
<MkLoading v-else-if="tab === 'renotes' && note.renoteCount > 0" />
|
||||
<!-- </Pagination> -->
|
||||
<Loading v-else-if="tab === 'renotes' && note.renoteCount > 0" />
|
||||
|
||||
<div v-if="tab === 'clips' && clips.length > 0" class="_content clips">
|
||||
<MkA
|
||||
<A
|
||||
v-for="item in clips"
|
||||
:key="item.id"
|
||||
:to="`/clips/${item.id}`"
|
||||
@ -120,32 +120,32 @@
|
||||
{{ item.description }}
|
||||
</div>
|
||||
<div class="user">
|
||||
<MkAvatar
|
||||
<Avatar
|
||||
:user="item.user"
|
||||
class="avatar"
|
||||
:show-indicator="true"
|
||||
/>
|
||||
<MkUserName :user="item.user" :nowrap="false" />
|
||||
<UserName :user="item.user" :nowrap="false" />
|
||||
</div>
|
||||
</MkA>
|
||||
</A>
|
||||
</div>
|
||||
<MkLoading v-else-if="tab === 'clips' && clips.length > 0" />
|
||||
<Loading v-else-if="tab === 'clips' && clips.length > 0" />
|
||||
|
||||
<MkReactedUsers
|
||||
<ReactedUsers
|
||||
v-if="tab === 'reactions' && reactionsCount > 0"
|
||||
:note-id="note.id"
|
||||
></MkReactedUsers>
|
||||
></ReactedUsers>
|
||||
</div>
|
||||
<div v-else class="_panel muted" @click="muted.muted = false">
|
||||
<I18n :src="softMuteReasonI18nSrc(muted.what)" tag="small">
|
||||
<template #name>
|
||||
<MkA
|
||||
<A
|
||||
v-user-preview="note.userId"
|
||||
class="name"
|
||||
:to="userPage(note.user)"
|
||||
>
|
||||
<MkUserName :user="note.user" />
|
||||
</MkA>
|
||||
<UserName :user="note.user" />
|
||||
</A>
|
||||
</template>
|
||||
<template #reason>
|
||||
<b class="_blur_text">{{ muted.matched.join(", ") }}</b>
|
||||
@ -165,14 +165,14 @@ import {
|
||||
ref,
|
||||
} from "vue";
|
||||
import * as misskey from "iceshrimp-js";
|
||||
import MkTab from "@/components/MkTab.vue";
|
||||
import MkNote from "@/components/MkNote.vue";
|
||||
import MkNoteSub from "@/components/MkNoteSub.vue";
|
||||
import XStarButton from "@/components/MkStarButton.vue";
|
||||
import XRenoteButton from "@/components/MkRenoteButton.vue";
|
||||
import MkPagination from "@/components/MkPagination.vue";
|
||||
import MkUserCardMini from "@/components/MkUserCardMini.vue";
|
||||
import MkReactedUsers from "@/components/MkReactedUsers.vue";
|
||||
import Tab from "@/components/Tab.vue";
|
||||
import Note from "@/components/Note.vue";
|
||||
import NoteSub from "@/components/NoteSub.vue";
|
||||
import XStarButton from "@/components/StarButton.vue";
|
||||
import XRenoteButton from "@/components/RenoteButton.vue";
|
||||
import Pagination from "@/components/Pagination.vue";
|
||||
import UserCardMini from "@/components/UserCardMini.vue";
|
||||
import ReactedUsers from "@/components/ReactedUsers.vue";
|
||||
import { pleaseLogin } from "@/scripts/please-login";
|
||||
import { getWordSoftMute } from "@/scripts/check-word-mute";
|
||||
import { userPage } from "@/filters/user";
|
||||
@ -386,7 +386,7 @@ os.api("notes/clips", {
|
||||
// limit: 10,
|
||||
// };
|
||||
|
||||
// const pagingComponent = $ref<InstanceType<typeof MkPagination>>();
|
||||
// const pagingComponent = $ref<InstanceType<typeof Pagination>>();
|
||||
|
||||
renotes = null;
|
||||
function loadTab() {
|
||||
@ -420,7 +420,10 @@ async function onNoteUpdated(noteData: NoteUpdatedEvent): Promise<void> {
|
||||
if (id === note.id) {
|
||||
isDeleted.value = true;
|
||||
} else {
|
||||
replies.value.splice(replies.value.findIndex(p => p.id == id), 1);
|
||||
replies.value.splice(
|
||||
replies.value.findIndex((p) => p.id == id),
|
||||
1,
|
||||
);
|
||||
}
|
||||
break;
|
||||
}
|
||||
@ -491,14 +494,17 @@ onUnmounted(() => {
|
||||
overflow: clip;
|
||||
outline: none;
|
||||
scroll-margin-top: calc(var(--stickyTop) + 20vh);
|
||||
|
||||
&:not(:last-child) {
|
||||
border-bottom: 1px solid var(--divider);
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.article {
|
||||
cursor: unset;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
padding-top: 28px;
|
||||
}
|
||||
@ -507,16 +513,19 @@ onUnmounted(() => {
|
||||
> :deep(.chips) {
|
||||
padding-block: 6px 12px;
|
||||
padding-left: 32px;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
> :deep(.user-card-mini),
|
||||
> :deep(.reacted-users > *) {
|
||||
padding-inline: 32px;
|
||||
border-top: 1px solid var(--divider);
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
> :deep(.reacted-users > div) {
|
||||
padding-block: 12px;
|
||||
}
|
||||
@ -532,6 +541,7 @@ onUnmounted(() => {
|
||||
.reply-to,
|
||||
:deep(.more) {
|
||||
position: relative;
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
@ -545,20 +555,25 @@ onUnmounted(() => {
|
||||
background 0.2s;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
&.reply-to {
|
||||
&::before {
|
||||
inset: 0px 8px;
|
||||
}
|
||||
|
||||
&:not(.max-width_500px)::before {
|
||||
bottom: 16px;
|
||||
}
|
||||
|
||||
&:first-of-type::before {
|
||||
top: 12px;
|
||||
}
|
||||
|
||||
&.reply.max-width_500px:first-of-type::before {
|
||||
top: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
// &::after {
|
||||
// content: "";
|
||||
// position: absolute;
|
||||
@ -572,14 +587,17 @@ onUnmounted(() => {
|
||||
&.more::before {
|
||||
inset: 0 !important;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus-within {
|
||||
--panel: var(--panelHighlight);
|
||||
|
||||
&::before {
|
||||
opacity: 1;
|
||||
background: var(--panelHighlight) !important;
|
||||
}
|
||||
}
|
||||
|
||||
// @media (pointer: coarse) {
|
||||
// &:has(.button:focus-within) {
|
||||
// z-index: 2;
|
||||
@ -591,23 +609,29 @@ onUnmounted(() => {
|
||||
// }
|
||||
// }
|
||||
}
|
||||
|
||||
:deep(.reply:target > .main),
|
||||
:deep(.reply-to:target) {
|
||||
z-index: 2;
|
||||
|
||||
&::before {
|
||||
outline: auto;
|
||||
opacity: 1;
|
||||
background: none;
|
||||
}
|
||||
}
|
||||
|
||||
&.max-width_500px {
|
||||
font-size: 0.975em;
|
||||
|
||||
> .reply-to {
|
||||
&::before {
|
||||
inset-inline: -24px;
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
padding-top: 14px;
|
||||
|
||||
&::before {
|
||||
top: -24px;
|
||||
}
|
||||
@ -617,15 +641,18 @@ onUnmounted(() => {
|
||||
> :deep(.note-container) {
|
||||
padding: 12px 0 0 0;
|
||||
font-size: 1.05rem;
|
||||
|
||||
> .header > .body {
|
||||
padding-left: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
> .clips,
|
||||
> :deep(.user-card-mini),
|
||||
> :deep(.reacted-users > *) {
|
||||
padding-inline: 16px !important;
|
||||
}
|
||||
|
||||
> :deep(.underline) {
|
||||
padding-left: 16px !important;
|
||||
}
|
||||
@ -646,6 +673,7 @@ onUnmounted(() => {
|
||||
// want to redesign at some point
|
||||
padding: 24px 32px;
|
||||
padding-top: 0;
|
||||
|
||||
> .item {
|
||||
display: block;
|
||||
padding: 16px;
|
||||
@ -653,6 +681,7 @@ onUnmounted(() => {
|
||||
border: 1px solid var(--divider);
|
||||
margin-bottom: var(--margin);
|
||||
transition: background 0.2s;
|
||||
|
||||
&:hover,
|
||||
&:focus-within {
|
||||
background: var(--panelHighlight);
|
||||
@ -2,22 +2,24 @@
|
||||
<header class="kkwtjztg">
|
||||
<div class="user-info">
|
||||
<div>
|
||||
<MkA
|
||||
<A
|
||||
v-user-preview="note.user.id"
|
||||
class="name"
|
||||
:to="userPage(note.user)"
|
||||
@click.stop
|
||||
>
|
||||
<MkUserName :user="note.user" class="mkusername">
|
||||
<UserName :user="note.user" class="mkusername">
|
||||
<span v-if="note.user.isBot" class="is-bot">bot</span>
|
||||
</MkUserName>
|
||||
</MkA>
|
||||
<div class="username"><MkAcct :user="note.user" /></div>
|
||||
</UserName>
|
||||
</A>
|
||||
<div class="username">
|
||||
<Acct :user="note.user" />
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="info">
|
||||
<MkA class="created-at" :to="notePage(note)">
|
||||
<MkTime :time="note.createdAt" />
|
||||
<A class="created-at" :to="notePage(note)">
|
||||
<Time :time="note.createdAt" />
|
||||
<i
|
||||
v-if="note.updatedAt"
|
||||
v-tooltip.noDelay="
|
||||
@ -33,10 +35,10 @@
|
||||
class="ph-pencil ph-bold"
|
||||
style="margin-left: 0.4rem"
|
||||
></i>
|
||||
</MkA>
|
||||
<MkVisibility :note="note" />
|
||||
</A>
|
||||
<Visibility :note="note" />
|
||||
</div>
|
||||
<MkInstanceTicker
|
||||
<InstanceTicker
|
||||
v-if="showTicker"
|
||||
class="ticker"
|
||||
:instance="note.user.instance"
|
||||
@ -50,8 +52,8 @@
|
||||
import {} from "vue";
|
||||
import type * as misskey from "iceshrimp-js";
|
||||
import { defaultStore, noteViewInterruptors } from "@/store";
|
||||
import MkVisibility from "@/components/MkVisibility.vue";
|
||||
import MkInstanceTicker from "@/components/MkInstanceTicker.vue";
|
||||
import Visibility from "@/components/Visibility.vue";
|
||||
import InstanceTicker from "@/components/InstanceTicker.vue";
|
||||
import { notePage } from "@/filters/note";
|
||||
import { userPage } from "@/filters/user";
|
||||
import { i18n } from "@/i18n";
|
||||
@ -78,17 +80,20 @@ const showTicker =
|
||||
justify-self: flex-end;
|
||||
border-radius: 100px;
|
||||
font-size: 0.8em;
|
||||
|
||||
> .avatar {
|
||||
width: 3.7em;
|
||||
height: 3.7em;
|
||||
margin-right: 1em;
|
||||
}
|
||||
|
||||
> .user-info {
|
||||
width: 0;
|
||||
flex-grow: 1;
|
||||
line-height: 1.5;
|
||||
display: flex;
|
||||
font-size: 1.2em;
|
||||
|
||||
> div {
|
||||
&:first-child {
|
||||
flex-grow: 1;
|
||||
@ -97,22 +102,27 @@ const showTicker =
|
||||
text-overflow: ellipsis;
|
||||
gap: 0.1em 0;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
max-width: 50%;
|
||||
gap: 0.3em 0.5em;
|
||||
}
|
||||
|
||||
.article > .main & {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
|
||||
&:last-child {
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
> * {
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.name {
|
||||
// flex: 1 1 0px;
|
||||
display: inline;
|
||||
@ -152,6 +162,7 @@ const showTicker =
|
||||
flex-shrink: 0;
|
||||
margin-left: 0.5em;
|
||||
font-size: 0.9em;
|
||||
|
||||
.created-at {
|
||||
max-width: 100%;
|
||||
overflow: hidden;
|
||||
@ -163,6 +174,7 @@ const showTicker =
|
||||
display: inline-flex;
|
||||
margin-left: 0.5em;
|
||||
vertical-align: middle;
|
||||
|
||||
> .name {
|
||||
display: none;
|
||||
}
|
||||
@ -1,9 +1,9 @@
|
||||
<template>
|
||||
<div v-size="{ min: [350, 500] }" class="fefdfafb">
|
||||
<MkAvatar class="avatar" :user="$i" disableLink />
|
||||
<Avatar class="avatar" :user="$i" disableLink />
|
||||
<div class="main">
|
||||
<div class="header">
|
||||
<MkUserName :user="$i" />
|
||||
<UserName :user="$i" />
|
||||
</div>
|
||||
<div class="body">
|
||||
<div class="content">
|
||||
@ -1,10 +1,10 @@
|
||||
<template>
|
||||
<div v-size="{ min: [350, 500] }" class="yohlumlk">
|
||||
<MkAvatar class="avatar" :user="note.user" />
|
||||
<Avatar class="avatar" :user="note.user" />
|
||||
<div class="main">
|
||||
<XNoteHeader class="header" :note="note" :mini="true" />
|
||||
<div class="body">
|
||||
<MkSubNoteContent class="text" :note="note" />
|
||||
<SubNoteContent class="text" :note="note" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -13,8 +13,8 @@
|
||||
<script lang="ts" setup>
|
||||
import {} from "vue";
|
||||
import * as misskey from "iceshrimp-js";
|
||||
import XNoteHeader from "@/components/MkNoteHeader.vue";
|
||||
import MkSubNoteContent from "@/components/MkSubNoteContent.vue";
|
||||
import XNoteHeader from "@/components/NoteHeader.vue";
|
||||
import SubNoteContent from "@/components/SubNoteContent.vue";
|
||||
|
||||
const props = defineProps<{
|
||||
note: misskey.entities.Note;
|
||||
@ -20,7 +20,7 @@
|
||||
:style="{ cursor: expandOnNoteClick ? 'pointer' : '' }"
|
||||
>
|
||||
<div class="avatar-container">
|
||||
<MkAvatar class="avatar" :user="appearNote.user" />
|
||||
<Avatar class="avatar" :user="appearNote.user" />
|
||||
<div
|
||||
v-if="!conversation || replies.length > 0"
|
||||
class="line"
|
||||
@ -29,7 +29,7 @@
|
||||
<div class="body">
|
||||
<XNoteHeader class="header" :note="note" :mini="true" />
|
||||
<div class="body">
|
||||
<MkSubNoteContent
|
||||
<SubNoteContent
|
||||
class="text"
|
||||
:note="note"
|
||||
:parentId="parentId"
|
||||
@ -39,7 +39,7 @@
|
||||
@focusfooter="footerEl.focus()"
|
||||
/>
|
||||
<div v-if="translating || translation" class="translation">
|
||||
<MkLoading v-if="translating" mini />
|
||||
<Loading v-if="translating" mini />
|
||||
<div v-else class="translated">
|
||||
<b
|
||||
>{{
|
||||
@ -137,7 +137,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<template v-if="conversation">
|
||||
<MkNoteSub
|
||||
<NoteSub
|
||||
v-if="replyLevel < 11 && depth < 5"
|
||||
v-for="reply in replies"
|
||||
:key="reply.id"
|
||||
@ -153,23 +153,23 @@
|
||||
/>
|
||||
<div v-else-if="replies.length > 0" class="more">
|
||||
<div class="line"></div>
|
||||
<MkA class="text _link" :to="notePage(note)"
|
||||
<A class="text _link" :to="notePage(note)"
|
||||
>{{ i18n.ts.continueThread }}
|
||||
<i class="ph-caret-double-right ph-bold ph-lg"></i
|
||||
></MkA>
|
||||
></A>
|
||||
</div>
|
||||
</template>
|
||||
</article>
|
||||
<div v-else class="muted" @click="muted.muted = false">
|
||||
<I18n :src="softMuteReasonI18nSrc(muted.what)" tag="small">
|
||||
<template #name>
|
||||
<MkA
|
||||
<A
|
||||
v-user-preview="note.userId"
|
||||
class="name"
|
||||
:to="userPage(note.user)"
|
||||
>
|
||||
<MkUserName :user="note.user" />
|
||||
</MkA>
|
||||
<UserName :user="note.user" />
|
||||
</A>
|
||||
</template>
|
||||
<template #reason>
|
||||
<b class="_blur_text">{{ muted.matched.join(", ") }}</b>
|
||||
@ -182,13 +182,13 @@
|
||||
import { inject, ref } from "vue";
|
||||
import type { Ref } from "vue";
|
||||
import * as misskey from "iceshrimp-js";
|
||||
import XNoteHeader from "@/components/MkNoteHeader.vue";
|
||||
import MkSubNoteContent from "@/components/MkSubNoteContent.vue";
|
||||
import XReactionsViewer from "@/components/MkReactionsViewer.vue";
|
||||
import XStarButton from "@/components/MkStarButton.vue";
|
||||
import XStarButtonNoEmoji from "@/components/MkStarButtonNoEmoji.vue";
|
||||
import XRenoteButton from "@/components/MkRenoteButton.vue";
|
||||
import XQuoteButton from "@/components/MkQuoteButton.vue";
|
||||
import XNoteHeader from "@/components/NoteHeader.vue";
|
||||
import SubNoteContent from "@/components/SubNoteContent.vue";
|
||||
import XReactionsViewer from "@/components/ReactionsViewer.vue";
|
||||
import XStarButton from "@/components/StarButton.vue";
|
||||
import XStarButtonNoEmoji from "@/components/StarButtonNoEmoji.vue";
|
||||
import XRenoteButton from "@/components/RenoteButton.vue";
|
||||
import XQuoteButton from "@/components/QuoteButton.vue";
|
||||
import copyToClipboard from "@/scripts/copy-to-clipboard";
|
||||
import { url } from "@/config";
|
||||
import { pleaseLogin } from "@/scripts/please-login";
|
||||
@ -257,14 +257,16 @@ const isDeleted = ref(false);
|
||||
const muted = ref(getWordSoftMute(note, $i, defaultStore.state.mutedWords));
|
||||
const translation = ref(null);
|
||||
const translating = ref(false);
|
||||
const replies: misskey.entities.Note[] =
|
||||
$computed(() => props.conversation
|
||||
?.filter(
|
||||
(item) =>
|
||||
item.replyId === props.note.id ||
|
||||
item.renoteId === props.note.id,
|
||||
)
|
||||
.reverse() ?? []);
|
||||
const replies: misskey.entities.Note[] = $computed(
|
||||
() =>
|
||||
props.conversation
|
||||
?.filter(
|
||||
(item) =>
|
||||
item.replyId === props.note.id ||
|
||||
item.renoteId === props.note.id,
|
||||
)
|
||||
.reverse() ?? [],
|
||||
);
|
||||
const enableEmojiReactions = defaultStore.state.enableEmojiReactions;
|
||||
const expandOnNoteClick = defaultStore.state.expandOnNoteClick;
|
||||
|
||||
@ -418,6 +420,7 @@ function noteClick(e) {
|
||||
.wrpstxzv {
|
||||
padding: 16px 32px;
|
||||
outline: none;
|
||||
|
||||
&.children {
|
||||
padding: 10px 0 0 var(--indent);
|
||||
padding-left: var(--indent) !important;
|
||||
@ -435,6 +438,7 @@ function noteClick(e) {
|
||||
> .avatar-container {
|
||||
margin-right: 8px;
|
||||
z-index: 2;
|
||||
|
||||
> .avatar {
|
||||
flex-shrink: 0;
|
||||
display: block;
|
||||
@ -451,6 +455,7 @@ function noteClick(e) {
|
||||
margin: 0 -200px;
|
||||
padding: 0 200px;
|
||||
overflow: clip;
|
||||
|
||||
@media (pointer: coarse) {
|
||||
cursor: default;
|
||||
}
|
||||
@ -468,6 +473,7 @@ function noteClick(e) {
|
||||
margin-top: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
> .footer {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
@ -479,15 +485,18 @@ function noteClick(e) {
|
||||
margin: 0;
|
||||
padding: 8px;
|
||||
opacity: 0.7;
|
||||
|
||||
&:disabled {
|
||||
opacity: 0.5 !important;
|
||||
}
|
||||
|
||||
flex-grow: 1;
|
||||
max-width: 3.5em;
|
||||
width: max-content;
|
||||
min-width: max-content;
|
||||
height: auto;
|
||||
transition: opacity 0.2s;
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
@ -497,17 +506,21 @@ function noteClick(e) {
|
||||
z-index: -1;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
|
||||
&:first-of-type {
|
||||
margin-left: -0.5em;
|
||||
|
||||
&::before {
|
||||
border-radius: 100px 0 0 100px;
|
||||
}
|
||||
}
|
||||
|
||||
&:last-of-type {
|
||||
&::before {
|
||||
border-radius: 0 100px 100px 0;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: var(--fgHighlighted);
|
||||
}
|
||||
@ -533,10 +546,12 @@ function noteClick(e) {
|
||||
&.reply > .main {
|
||||
margin-inline: -200px;
|
||||
padding-inline: 200px;
|
||||
|
||||
&::before {
|
||||
inset-inline: 176px !important;
|
||||
}
|
||||
}
|
||||
|
||||
&.reply,
|
||||
&.reply-to {
|
||||
> .main > .body {
|
||||
@ -549,6 +564,7 @@ function noteClick(e) {
|
||||
border-radius: var(--radius);
|
||||
}
|
||||
}
|
||||
|
||||
&.reply-to {
|
||||
> .main > .body {
|
||||
margin-left: calc(0px - var(--avatarSize) - 38px);
|
||||
@ -557,17 +573,22 @@ function noteClick(e) {
|
||||
padding-top: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
&.reply {
|
||||
--avatarSize: 38px;
|
||||
|
||||
.avatar-container {
|
||||
margin-right: 8px !important;
|
||||
}
|
||||
}
|
||||
|
||||
> .reply,
|
||||
> .more {
|
||||
margin-top: 10px;
|
||||
|
||||
&.single {
|
||||
padding: 0 !important;
|
||||
|
||||
> .line {
|
||||
display: none;
|
||||
}
|
||||
@ -578,6 +599,7 @@ function noteClick(e) {
|
||||
display: flex;
|
||||
padding-block: 10px;
|
||||
font-weight: 600;
|
||||
|
||||
> .line {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
@ -585,22 +607,27 @@ function noteClick(e) {
|
||||
margin-top: -10px !important;
|
||||
margin-bottom: 10px !important;
|
||||
margin-right: 10px !important;
|
||||
|
||||
&::before {
|
||||
border-left-style: dashed !important;
|
||||
border-bottom-left-radius: 100px !important;
|
||||
}
|
||||
}
|
||||
|
||||
i {
|
||||
font-size: 1em !important;
|
||||
vertical-align: middle !important;
|
||||
}
|
||||
|
||||
a {
|
||||
position: static;
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: unset;
|
||||
}
|
||||
@ -621,9 +648,11 @@ function noteClick(e) {
|
||||
&.reply-to,
|
||||
&.reply-to-more {
|
||||
padding-bottom: 0;
|
||||
|
||||
&:first-child {
|
||||
padding-top: 24px;
|
||||
}
|
||||
|
||||
.line::before {
|
||||
margin-bottom: -16px;
|
||||
}
|
||||
@ -634,6 +663,7 @@ function noteClick(e) {
|
||||
&.reply-to,
|
||||
&.reply-to-more {
|
||||
--indent: calc(var(--avatarSize) - 5px);
|
||||
|
||||
> .main {
|
||||
> .avatar-container {
|
||||
display: flex;
|
||||
@ -641,6 +671,7 @@ function noteClick(e) {
|
||||
align-items: center;
|
||||
margin-right: 14px;
|
||||
width: var(--avatarSize);
|
||||
|
||||
> .avatar {
|
||||
width: var(--avatarSize);
|
||||
height: var(--avatarSize);
|
||||
@ -648,6 +679,7 @@ function noteClick(e) {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.line {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
@ -657,6 +689,7 @@ function noteClick(e) {
|
||||
margin-bottom: -10px;
|
||||
pointer-events: none;
|
||||
opacity: 0.25;
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
@ -668,21 +701,25 @@ function noteClick(e) {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.reply-to,
|
||||
&.reply-to-more {
|
||||
> .main > .avatar-container > .line {
|
||||
margin-bottom: 0px !important;
|
||||
}
|
||||
}
|
||||
|
||||
&.single,
|
||||
&.singleStart {
|
||||
> .main > .avatar-container > .line {
|
||||
margin-bottom: -10px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.reply.children:not(:last-child) {
|
||||
// Line that goes through multiple replies
|
||||
position: relative;
|
||||
|
||||
> .line {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
@ -690,15 +727,18 @@ function noteClick(e) {
|
||||
bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Reply line connectors
|
||||
.reply.children:not(.single) {
|
||||
position: relative;
|
||||
|
||||
> .line {
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
left: 0;
|
||||
top: 0;
|
||||
opacity: 0.25;
|
||||
|
||||
&::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
@ -711,17 +751,21 @@ function noteClick(e) {
|
||||
top: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
&:not(:last-child) > .line::after {
|
||||
mask: linear-gradient(to right, transparent 2px, black 2px);
|
||||
-webkit-mask: linear-gradient(to right, transparent 2px, black 2px);
|
||||
}
|
||||
}
|
||||
|
||||
// End Reply Divider
|
||||
.children > .main:last-child {
|
||||
padding-bottom: 1em;
|
||||
|
||||
&::before {
|
||||
bottom: 1em;
|
||||
}
|
||||
|
||||
// &::after {
|
||||
// content: "";
|
||||
// border-top: 1px solid var(--dividerHovered);
|
||||
@ -731,22 +775,27 @@ function noteClick(e) {
|
||||
// inset-inline: 0;
|
||||
// }
|
||||
}
|
||||
|
||||
&.firstColumn > .children:last-child > .main {
|
||||
padding-bottom: 0 !important;
|
||||
|
||||
&::before {
|
||||
bottom: 0 !important;
|
||||
}
|
||||
|
||||
// &::after { content: unset }
|
||||
}
|
||||
|
||||
&.max-width_500px {
|
||||
padding: 14px 16px;
|
||||
|
||||
:not(.reply) > & {
|
||||
.reply {
|
||||
--avatarSize: 24px;
|
||||
--indent: calc(var(--avatarSize) - 4px);
|
||||
}
|
||||
}
|
||||
|
||||
&.firstColumn {
|
||||
> .main,
|
||||
> .line,
|
||||
@ -754,10 +803,12 @@ function noteClick(e) {
|
||||
--avatarSize: 35px;
|
||||
--indent: 35px;
|
||||
}
|
||||
|
||||
> .children:not(.single) {
|
||||
padding-left: 28px !important;
|
||||
}
|
||||
}
|
||||
|
||||
&.reply-to {
|
||||
--avatarSize: 46px;
|
||||
padding: 14px 16px;
|
||||
@ -765,9 +816,11 @@ function noteClick(e) {
|
||||
padding-bottom: 0 !important;
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
|
||||
> .main > .avatar-container {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
&:first-child > .main > .body {
|
||||
margin-top: -20px;
|
||||
padding-top: 22px;
|
||||
@ -1,12 +1,8 @@
|
||||
<template>
|
||||
<MkPagination ref="pagingComponent" :pagination="pagination">
|
||||
<Pagination ref="pagingComponent" :pagination="pagination">
|
||||
<template #empty>
|
||||
<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>
|
||||
</template>
|
||||
@ -30,18 +26,18 @@
|
||||
</XList>
|
||||
</div>
|
||||
</template>
|
||||
</MkPagination>
|
||||
</Pagination>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref } from "vue";
|
||||
import type { Paging } from "@/components/MkPagination.vue";
|
||||
import XNote from "@/components/MkNote.vue";
|
||||
import XList from "@/components/MkDateSeparatedList.vue";
|
||||
import MkPagination from "@/components/MkPagination.vue";
|
||||
import type { Paging } from "@/components/Pagination.vue";
|
||||
import XNote from "@/components/Note.vue";
|
||||
import XList from "@/components/DateSeparatedList.vue";
|
||||
import Pagination from "@/components/Pagination.vue";
|
||||
import { i18n } from "@/i18n";
|
||||
import { scroll } from "@/scripts/scroll";
|
||||
import {instance} from "@/instance";
|
||||
import { instance } from "@/instance";
|
||||
|
||||
const tlEl = ref<HTMLElement>();
|
||||
|
||||
@ -50,7 +46,7 @@ const props = defineProps<{
|
||||
noGap?: boolean;
|
||||
}>();
|
||||
|
||||
const pagingComponent = ref<InstanceType<typeof MkPagination>>();
|
||||
const pagingComponent = ref<InstanceType<typeof Pagination>>();
|
||||
|
||||
function scrollTop() {
|
||||
scroll(tlEl.value, { top: 0, behavior: "smooth" });
|
||||
@ -70,6 +66,7 @@ defineExpose({
|
||||
border-radius: var(--radius);
|
||||
}
|
||||
}
|
||||
|
||||
&:not(.noGap) {
|
||||
> .notes {
|
||||
.qtqtichx {
|
||||
@ -6,12 +6,12 @@
|
||||
:class="notification.type"
|
||||
>
|
||||
<div class="head">
|
||||
<MkAvatar
|
||||
<Avatar
|
||||
v-if="notification.type === 'pollEnded'"
|
||||
class="icon"
|
||||
:user="notification.note.user"
|
||||
/>
|
||||
<MkAvatar
|
||||
<Avatar
|
||||
v-else-if="notification.user"
|
||||
class="icon"
|
||||
:user="notification.user"
|
||||
@ -94,21 +94,22 @@
|
||||
<span v-if="notification.type === 'pollEnded'">{{
|
||||
i18n.ts._notification.pollEnded
|
||||
}}</span>
|
||||
<MkA
|
||||
<A
|
||||
v-else-if="notification.user"
|
||||
v-user-preview="notification.user.id"
|
||||
class="name"
|
||||
:to="userPage(notification.user)"
|
||||
><MkUserName :user="notification.user"
|
||||
/></MkA>
|
||||
>
|
||||
<UserName :user="notification.user" />
|
||||
</A>
|
||||
<span v-else>{{ notification.header }}</span>
|
||||
<MkTime
|
||||
<Time
|
||||
v-if="withTime"
|
||||
:time="notification.createdAt"
|
||||
class="time"
|
||||
/>
|
||||
</header>
|
||||
<MkA
|
||||
<A
|
||||
v-if="notification.type === 'reaction'"
|
||||
class="text"
|
||||
:to="notePage(notification.note)"
|
||||
@ -123,8 +124,8 @@
|
||||
:custom-emojis="notification.note.emojis"
|
||||
/>
|
||||
<i class="ph-quotes ph-fill ph-lg"></i>
|
||||
</MkA>
|
||||
<MkA
|
||||
</A>
|
||||
<A
|
||||
v-if="notification.type === 'renote'"
|
||||
class="text"
|
||||
:to="notePage(notification.note)"
|
||||
@ -139,8 +140,8 @@
|
||||
:custom-emojis="notification.note.renote.emojis"
|
||||
/>
|
||||
<i class="ph-quotes ph-fill ph-lg"></i>
|
||||
</MkA>
|
||||
<MkA
|
||||
</A>
|
||||
<A
|
||||
v-if="notification.type === 'reply'"
|
||||
class="text"
|
||||
:to="notePage(notification.note)"
|
||||
@ -152,8 +153,8 @@
|
||||
:nowrap="!full"
|
||||
:custom-emojis="notification.note.emojis"
|
||||
/>
|
||||
</MkA>
|
||||
<MkA
|
||||
</A>
|
||||
<A
|
||||
v-if="notification.type === 'mention'"
|
||||
class="text"
|
||||
:to="notePage(notification.note)"
|
||||
@ -165,8 +166,8 @@
|
||||
:nowrap="!full"
|
||||
:custom-emojis="notification.note.emojis"
|
||||
/>
|
||||
</MkA>
|
||||
<MkA
|
||||
</A>
|
||||
<A
|
||||
v-if="notification.type === 'quote'"
|
||||
class="text"
|
||||
:to="notePage(notification.note)"
|
||||
@ -178,8 +179,8 @@
|
||||
:nowrap="!full"
|
||||
:custom-emojis="notification.note.emojis"
|
||||
/>
|
||||
</MkA>
|
||||
<MkA
|
||||
</A>
|
||||
<A
|
||||
v-if="notification.type === 'pollVote'"
|
||||
class="text"
|
||||
:to="notePage(notification.note)"
|
||||
@ -194,8 +195,8 @@
|
||||
:custom-emojis="notification.note.emojis"
|
||||
/>
|
||||
<i class="ph-quotes ph-fill ph-lg"></i>
|
||||
</MkA>
|
||||
<MkA
|
||||
</A>
|
||||
<A
|
||||
v-if="notification.type === 'pollEnded'"
|
||||
class="text"
|
||||
:to="notePage(notification.note)"
|
||||
@ -209,19 +210,20 @@
|
||||
:custom-emojis="notification.note.emojis"
|
||||
/>
|
||||
<i class="ph-quotes ph-fill ph-lg"></i>
|
||||
</MkA>
|
||||
</A>
|
||||
<span
|
||||
v-if="notification.type === 'follow'"
|
||||
class="text"
|
||||
style="opacity: 0.7"
|
||||
>{{ i18n.ts.youGotNewFollower }}
|
||||
<div v-if="full">
|
||||
<MkFollowButton
|
||||
<FollowButton
|
||||
:user="notification.user"
|
||||
:full="true"
|
||||
:hideMenu="true"
|
||||
/></div
|
||||
></span>
|
||||
/>
|
||||
</div>
|
||||
</span>
|
||||
<span
|
||||
v-if="notification.type === 'followRequestAccepted'"
|
||||
class="text"
|
||||
@ -241,8 +243,8 @@
|
||||
<button class="_textButton" @click="rejectFollowRequest()">
|
||||
{{ i18n.ts.reject }}
|
||||
</button>
|
||||
</div></span
|
||||
>
|
||||
</div>
|
||||
</span>
|
||||
<span
|
||||
v-if="notification.type === 'groupInvited'"
|
||||
class="text"
|
||||
@ -263,8 +265,8 @@
|
||||
>
|
||||
{{ i18n.ts.reject }}
|
||||
</button>
|
||||
</div></span
|
||||
>
|
||||
</div>
|
||||
</span>
|
||||
<span v-if="notification.type === 'app'" class="text">
|
||||
<Mfm :text="notification.body" :nowrap="!full" />
|
||||
</span>
|
||||
@ -275,9 +277,9 @@
|
||||
<script lang="ts" setup>
|
||||
import { ref, onMounted, onUnmounted, watch } from "vue";
|
||||
import * as misskey from "iceshrimp-js";
|
||||
import XReactionIcon from "@/components/MkReactionIcon.vue";
|
||||
import MkFollowButton from "@/components/MkFollowButton.vue";
|
||||
import XReactionTooltip from "@/components/MkReactionTooltip.vue";
|
||||
import XReactionIcon from "@/components/ReactionIcon.vue";
|
||||
import FollowButton from "@/components/FollowButton.vue";
|
||||
import XReactionTooltip from "@/components/ReactionTooltip.vue";
|
||||
import { getNoteSummary } from "@/scripts/get-note-summary";
|
||||
import { notePage } from "@/filters/note";
|
||||
import { userPage } from "@/filters/user";
|
||||
@ -397,6 +399,7 @@ useTooltip(reactionRef, (showing) => {
|
||||
padding-block: 16px;
|
||||
font-size: 0.9em;
|
||||
}
|
||||
|
||||
&.max-width_450px {
|
||||
padding: 12px 16px;
|
||||
}
|
||||
@ -519,6 +522,7 @@ useTooltip(reactionRef, (showing) => {
|
||||
|
||||
> span:first-child {
|
||||
opacity: 0.7;
|
||||
|
||||
&::after {
|
||||
content: ": ";
|
||||
}
|
||||
@ -12,27 +12,29 @@
|
||||
<template #header>{{ i18n.ts.notificationSetting }}</template>
|
||||
<div class="_monolithic_">
|
||||
<div v-if="showGlobalToggle" class="_section">
|
||||
<MkSwitch v-model="useGlobalSetting">
|
||||
<Switch v-model="useGlobalSetting">
|
||||
{{ i18n.ts.useGlobalSetting }}
|
||||
<template #caption>{{
|
||||
i18n.ts.useGlobalSettingDesc
|
||||
}}</template>
|
||||
</MkSwitch>
|
||||
</Switch>
|
||||
</div>
|
||||
<div v-if="!useGlobalSetting" class="_section _formRoot">
|
||||
<MkInfo class="_formBlock">{{ i18n.ts.notificationSettingDesc }}</MkInfo>
|
||||
<MkButton inline @click="disableAll">{{
|
||||
<Info class="_formBlock">{{
|
||||
i18n.ts.notificationSettingDesc
|
||||
}}</Info>
|
||||
<Button inline @click="disableAll">{{
|
||||
i18n.ts.disableAll
|
||||
}}</MkButton>
|
||||
<MkButton inline @click="enableAll">{{
|
||||
}}</Button>
|
||||
<Button inline @click="enableAll">{{
|
||||
i18n.ts.enableAll
|
||||
}}</MkButton>
|
||||
<MkSwitch
|
||||
}}</Button>
|
||||
<Switch
|
||||
v-for="ntype in notificationTypes"
|
||||
class="_formBlock"
|
||||
:key="ntype"
|
||||
v-model="typesMap[ntype]"
|
||||
>{{ i18n.t(`_notification._types.${ntype}`) }}</MkSwitch
|
||||
>{{ i18n.t(`_notification._types.${ntype}`) }}</Switch
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
@ -42,10 +44,10 @@
|
||||
<script lang="ts" setup>
|
||||
import {} from "vue";
|
||||
import { notificationTypes } from "iceshrimp-js";
|
||||
import MkSwitch from "./form/switch.vue";
|
||||
import MkInfo from "./MkInfo.vue";
|
||||
import MkButton from "./MkButton.vue";
|
||||
import XModalWindow from "@/components/MkModalWindow.vue";
|
||||
import Switch from "./form/Switch.vue";
|
||||
import Info from "./Info.vue";
|
||||
import Button from "./Button.vue";
|
||||
import XModalWindow from "@/components/ModalWindow.vue";
|
||||
import { i18n } from "@/i18n";
|
||||
|
||||
const emit = defineEmits<{
|
||||
@ -16,7 +16,7 @@
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { onMounted } from "vue";
|
||||
import XNotification from "@/components/MkNotification.vue";
|
||||
import XNotification from "@/components/Notification.vue";
|
||||
import * as os from "@/os";
|
||||
|
||||
defineProps<{
|
||||
@ -44,6 +44,7 @@ onMounted(() => {
|
||||
opacity 0.3s,
|
||||
transform 0.3s !important;
|
||||
}
|
||||
|
||||
.notification-toast-enter-from,
|
||||
.notification-toast-leave-to {
|
||||
opacity: 0;
|
||||
@ -1,12 +1,8 @@
|
||||
<template>
|
||||
<MkPagination ref="pagingComponent" :pagination="pagination">
|
||||
<Pagination ref="pagingComponent" :pagination="pagination">
|
||||
<template #empty>
|
||||
<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>
|
||||
</template>
|
||||
@ -42,7 +38,7 @@
|
||||
/>
|
||||
</XList>
|
||||
</template>
|
||||
</MkPagination>
|
||||
</Pagination>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
@ -55,22 +51,22 @@ import {
|
||||
ref,
|
||||
} from "vue";
|
||||
import { notificationTypes } from "iceshrimp-js";
|
||||
import MkPagination, { Paging } from "@/components/MkPagination.vue";
|
||||
import XNotification from "@/components/MkNotification.vue";
|
||||
import XList from "@/components/MkDateSeparatedList.vue";
|
||||
import XNote from "@/components/MkNote.vue";
|
||||
import Pagination, { Paging } from "@/components/Pagination.vue";
|
||||
import XNotification from "@/components/Notification.vue";
|
||||
import XList from "@/components/DateSeparatedList.vue";
|
||||
import XNote from "@/components/Note.vue";
|
||||
import * as os from "@/os";
|
||||
import { stream } from "@/stream";
|
||||
import { $i } from "@/account";
|
||||
import { i18n } from "@/i18n";
|
||||
import {instance} from "@/instance";
|
||||
import { instance } from "@/instance";
|
||||
|
||||
const props = defineProps<{
|
||||
includeTypes?: (typeof notificationTypes)[number][];
|
||||
unreadOnly?: boolean;
|
||||
}>();
|
||||
|
||||
const pagingComponent = ref<InstanceType<typeof MkPagination>>();
|
||||
const pagingComponent = ref<InstanceType<typeof Pagination>>();
|
||||
|
||||
const pagination: Paging = {
|
||||
endpoint: "i/notifications" as const,
|
||||
@ -6,7 +6,7 @@
|
||||
|
||||
<script lang="ts" setup>
|
||||
import {} from "vue";
|
||||
import XValue from "./MkObjectView.value.vue";
|
||||
import XValue from "./ObjectViewValue.vue";
|
||||
|
||||
const props = defineProps<{
|
||||
value: Record<string, unknown>;
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<MkA
|
||||
<A
|
||||
:to="`/@${page.user.username}/pages/${page.name}`"
|
||||
class="vhpxefrj _block"
|
||||
tabindex="-1"
|
||||
@ -30,7 +30,7 @@
|
||||
<p>{{ userName(page.user) }}</p>
|
||||
</footer>
|
||||
</article>
|
||||
</MkA>
|
||||
</A>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
@ -32,7 +32,7 @@
|
||||
<script lang="ts" setup>
|
||||
import { ComputedRef, inject, provide } from "vue";
|
||||
import RouterView from "@/components/global/RouterView.vue";
|
||||
import XWindow from "@/components/MkWindow.vue";
|
||||
import XWindow from "@/components/Window.vue";
|
||||
import { popout as _popout } from "@/scripts/popout";
|
||||
import copyToClipboard from "@/scripts/copy-to-clipboard";
|
||||
import { url } from "@/config";
|
||||
@ -1,8 +1,8 @@
|
||||
<template>
|
||||
<transition :name="$store.state.animation ? 'fade' : ''" mode="out-in">
|
||||
<MkLoading v-if="fetching" />
|
||||
<Loading v-if="fetching" />
|
||||
|
||||
<MkError v-else-if="error" @retry="init()" />
|
||||
<Error v-else-if="error" @retry="init()" />
|
||||
|
||||
<div v-else-if="empty" key="_empty_" class="empty">
|
||||
<slot name="empty">
|
||||
@ -23,7 +23,7 @@
|
||||
key="_more_"
|
||||
class="cxiknjgy _gap"
|
||||
>
|
||||
<MkButton
|
||||
<Button
|
||||
v-if="!moreFetching"
|
||||
class="button"
|
||||
:disabled="moreFetching"
|
||||
@ -32,8 +32,8 @@
|
||||
@click="fetchMoreAhead"
|
||||
>
|
||||
{{ i18n.ts.loadMore }}
|
||||
</MkButton>
|
||||
<MkLoading v-else class="loading" />
|
||||
</Button>
|
||||
<Loading v-else class="loading" />
|
||||
</div>
|
||||
<slot :items="items"></slot>
|
||||
<div
|
||||
@ -41,7 +41,7 @@
|
||||
key="_more_"
|
||||
class="cxiknjgy _gap"
|
||||
>
|
||||
<MkButton
|
||||
<Button
|
||||
v-if="!moreFetching"
|
||||
v-appear="
|
||||
$store.state.enableInfiniteScroll && !disableAutoLoad
|
||||
@ -55,8 +55,8 @@
|
||||
@click="fetchMore"
|
||||
>
|
||||
{{ i18n.ts.loadMore }}
|
||||
</MkButton>
|
||||
<MkLoading v-else class="loading" />
|
||||
</Button>
|
||||
<Loading v-else class="loading" />
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
@ -82,9 +82,9 @@ import {
|
||||
getScrollPosition,
|
||||
getScrollContainer,
|
||||
} from "@/scripts/scroll";
|
||||
import MkButton from "@/components/MkButton.vue";
|
||||
import Button from "@/components/Button.vue";
|
||||
import { i18n } from "@/i18n";
|
||||
import {instance} from "@/instance";
|
||||
import { instance } from "@/instance";
|
||||
|
||||
export type Paging<
|
||||
E extends keyof misskey.Endpoints = keyof misskey.Endpoints,
|
||||
@ -159,7 +159,7 @@ const init = async (): Promise<void> => {
|
||||
})
|
||||
.then(
|
||||
(res) => {
|
||||
if (props.pagination.endpoint == 'antennas/notes') {
|
||||
if (props.pagination.endpoint == "antennas/notes") {
|
||||
redisPaginationStr = res.pagination;
|
||||
res = res.notes;
|
||||
}
|
||||
@ -259,7 +259,7 @@ const fetchMore = async (): Promise<void> => {
|
||||
: props.pagination.params
|
||||
: {};
|
||||
|
||||
if (props.pagination.endpoint == 'antennas/notes') {
|
||||
if (props.pagination.endpoint == "antennas/notes") {
|
||||
params.pagination = redisPaginationStr;
|
||||
}
|
||||
|
||||
@ -281,7 +281,7 @@ const fetchMore = async (): Promise<void> => {
|
||||
})
|
||||
.then(
|
||||
(res) => {
|
||||
if (props.pagination.endpoint == 'antennas/notes') {
|
||||
if (props.pagination.endpoint == "antennas/notes") {
|
||||
redisPaginationStr = res.pagination;
|
||||
res = res.notes;
|
||||
}
|
||||
@ -330,7 +330,7 @@ const fetchMoreAhead = async (): Promise<void> => {
|
||||
: props.pagination.params
|
||||
: {};
|
||||
|
||||
if (props.pagination.endpoint == 'antennas/notes') {
|
||||
if (props.pagination.endpoint == "antennas/notes") {
|
||||
params.pagination = redisPaginationStr;
|
||||
}
|
||||
|
||||
@ -352,7 +352,7 @@ const fetchMoreAhead = async (): Promise<void> => {
|
||||
})
|
||||
.then(
|
||||
(res) => {
|
||||
if (props.pagination.endpoint == 'antennas/notes') {
|
||||
if (props.pagination.endpoint == "antennas/notes") {
|
||||
redisPaginationStr = res.pagination;
|
||||
res = res.notes;
|
||||
}
|
||||
@ -506,6 +506,7 @@ defineExpose({
|
||||
.fade-leave-active {
|
||||
transition: opacity 0.125s ease;
|
||||
}
|
||||
|
||||
.fade-enter-from,
|
||||
.fade-leave-to {
|
||||
opacity: 0;
|
||||
@ -517,9 +518,11 @@ defineExpose({
|
||||
margin-right: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.list > :deep(._button) {
|
||||
margin-inline: auto;
|
||||
margin-bottom: 16px;
|
||||
|
||||
&:last-of-type:not(:first-child) {
|
||||
margin-top: 16px;
|
||||
}
|
||||
@ -6,14 +6,14 @@
|
||||
</p>
|
||||
<ul>
|
||||
<li v-for="(choice, i) in choices" :key="i">
|
||||
<MkInput
|
||||
<Input
|
||||
class="input"
|
||||
small
|
||||
:model-value="choice"
|
||||
:placeholder="i18n.t('_poll.choiceN', { n: i + 1 })"
|
||||
@update:modelValue="onInput(i, $event)"
|
||||
>
|
||||
</MkInput>
|
||||
</Input>
|
||||
<button
|
||||
class="_button"
|
||||
@click="remove(i)"
|
||||
@ -23,42 +23,38 @@
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
<MkButton v-if="choices.length < 10" class="add" @click="add">{{
|
||||
<Button v-if="choices.length < 10" class="add" @click="add">{{
|
||||
i18n.ts.add
|
||||
}}</MkButton>
|
||||
<MkButton v-else class="add" disabled>{{
|
||||
i18n.ts._poll.noMore
|
||||
}}</MkButton>
|
||||
<MkSwitch v-model="multiple">{{
|
||||
i18n.ts._poll.canMultipleVote
|
||||
}}</MkSwitch>
|
||||
}}</Button>
|
||||
<Button v-else class="add" disabled>{{ i18n.ts._poll.noMore }}</Button>
|
||||
<Switch v-model="multiple">{{ i18n.ts._poll.canMultipleVote }}</Switch>
|
||||
<section>
|
||||
<div>
|
||||
<MkSelect v-model="expiration" small>
|
||||
<Select v-model="expiration" small>
|
||||
<template #label>{{ i18n.ts._poll.expiration }}</template>
|
||||
<option value="infinite">
|
||||
{{ i18n.ts._poll.infinite }}
|
||||
</option>
|
||||
<option value="at">{{ i18n.ts._poll.at }}</option>
|
||||
<option value="after">{{ i18n.ts._poll.after }}</option>
|
||||
</MkSelect>
|
||||
</Select>
|
||||
<section v-if="expiration === 'at'">
|
||||
<MkInput v-model="atDate" small type="date" class="input">
|
||||
<Input v-model="atDate" small type="date" class="input">
|
||||
<template #label>{{
|
||||
i18n.ts._poll.deadlineDate
|
||||
}}</template>
|
||||
</MkInput>
|
||||
<MkInput v-model="atTime" small type="time" class="input">
|
||||
</Input>
|
||||
<Input v-model="atTime" small type="time" class="input">
|
||||
<template #label>{{
|
||||
i18n.ts._poll.deadlineTime
|
||||
}}</template>
|
||||
</MkInput>
|
||||
</Input>
|
||||
</section>
|
||||
<section v-else-if="expiration === 'after'">
|
||||
<MkInput v-model="after" small type="number" class="input">
|
||||
<Input v-model="after" small type="number" class="input">
|
||||
<template #label>{{ i18n.ts._poll.duration }}</template>
|
||||
</MkInput>
|
||||
<MkSelect v-model="unit" small>
|
||||
</Input>
|
||||
<Select v-model="unit" small>
|
||||
<option value="second">
|
||||
{{ i18n.ts._time.second }}
|
||||
</option>
|
||||
@ -67,7 +63,7 @@
|
||||
</option>
|
||||
<option value="hour">{{ i18n.ts._time.hour }}</option>
|
||||
<option value="day">{{ i18n.ts._time.day }}</option>
|
||||
</MkSelect>
|
||||
</Select>
|
||||
</section>
|
||||
</div>
|
||||
</section>
|
||||
@ -76,10 +72,10 @@
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, watch } from "vue";
|
||||
import MkInput from "./form/input.vue";
|
||||
import MkSelect from "./form/select.vue";
|
||||
import MkSwitch from "./form/switch.vue";
|
||||
import MkButton from "./MkButton.vue";
|
||||
import Input from "./form/Input.vue";
|
||||
import Select from "./form/Select.vue";
|
||||
import Switch from "./form/Switch.vue";
|
||||
import Button from "./Button.vue";
|
||||
import { formatDateTimeString } from "@/scripts/format-time-string";
|
||||
import { addTime } from "@/scripts/time";
|
||||
import { i18n } from "@/i18n";
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<MkModal
|
||||
<Modal
|
||||
ref="modal"
|
||||
v-slot="{ type, maxHeight }"
|
||||
:z-priority="'high'"
|
||||
@ -9,7 +9,7 @@
|
||||
@closed="emit('closed')"
|
||||
tabindex="-1"
|
||||
>
|
||||
<MkMenu
|
||||
<Menu
|
||||
:items="items"
|
||||
:align="align"
|
||||
:width="width"
|
||||
@ -20,13 +20,13 @@
|
||||
:no-return-focus="noReturnFocus"
|
||||
@close="modal?.close()"
|
||||
/>
|
||||
</MkModal>
|
||||
</Modal>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import {} from "vue";
|
||||
import MkModal from "./MkModal.vue";
|
||||
import MkMenu from "./MkMenu.vue";
|
||||
import Modal from "./Modal.vue";
|
||||
import Menu from "./Menu.vue";
|
||||
import { MenuItem } from "@/types/menu";
|
||||
|
||||
defineProps<{
|
||||
@ -42,7 +42,7 @@ const emit = defineEmits<{
|
||||
(ev: "closed"): void;
|
||||
}>();
|
||||
|
||||
let modal = $ref<InstanceType<typeof MkModal>>();
|
||||
let modal = $ref<InstanceType<typeof Modal>>();
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@ -20,7 +20,7 @@
|
||||
class="account _button"
|
||||
@click="openAccountMenu"
|
||||
>
|
||||
<MkAvatar :user="postAccount ?? $i" class="avatar" />
|
||||
<Avatar :user="postAccount ?? $i" class="avatar" />
|
||||
</button>
|
||||
<div class="right">
|
||||
<span
|
||||
@ -33,7 +33,11 @@
|
||||
></span>
|
||||
<button
|
||||
ref="visibilityButton"
|
||||
v-tooltip="$props.editId != null ? i18n.ts.cannotChangeScopeWhenEditing : i18n.ts.visibility"
|
||||
v-tooltip="
|
||||
$props.editId != null
|
||||
? i18n.ts.cannotChangeScopeWhenEditing
|
||||
: i18n.ts.visibility
|
||||
"
|
||||
class="_button visibility"
|
||||
:disabled="channel != null || $props.editId != null"
|
||||
@click="setVisibility"
|
||||
@ -96,7 +100,7 @@
|
||||
<span style="margin-right: 8px">{{ i18n.ts.recipient }}</span>
|
||||
<div class="visibleUsers">
|
||||
<span v-for="u in visibleUsers" :key="u.id">
|
||||
<MkAcct :user="u" />
|
||||
<Acct :user="u" />
|
||||
<button
|
||||
class="_button"
|
||||
@click="removeVisibleUser(u)"
|
||||
@ -110,15 +114,15 @@
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<MkInfo
|
||||
<Info
|
||||
v-if="hasNotSpecifiedMentions"
|
||||
warn
|
||||
class="hasNotSpecifiedMentions"
|
||||
>{{ i18n.ts.notSpecifiedMentionWarning }} -
|
||||
<button class="_textButton" @click="addMissingMention()">
|
||||
{{ i18n.ts.add }}
|
||||
</button></MkInfo
|
||||
>
|
||||
</button>
|
||||
</Info>
|
||||
<input
|
||||
v-show="useCw"
|
||||
ref="cwInputEl"
|
||||
@ -241,10 +245,10 @@ import { length } from "stringz";
|
||||
import { toASCII } from "punycode/";
|
||||
import * as Acct from "iceshrimp-js/built/acct";
|
||||
import { throttle } from "throttle-debounce";
|
||||
import XNoteSimple from "@/components/MkNoteSimple.vue";
|
||||
import XNotePreview from "@/components/MkNotePreview.vue";
|
||||
import XPostFormAttaches from "@/components/MkPostFormAttaches.vue";
|
||||
import XPollEditor from "@/components/MkPollEditor.vue";
|
||||
import XNoteSimple from "@/components/NoteSimple.vue";
|
||||
import XNotePreview from "@/components/NotePreview.vue";
|
||||
import XPostFormAttaches from "@/components/PostFormAttaches.vue";
|
||||
import XPollEditor from "@/components/PollEditor.vue";
|
||||
import { host, url } from "@/config";
|
||||
import { erase, unique } from "@/scripts/array";
|
||||
import { extractMentions } from "@/scripts/extract-mentions";
|
||||
@ -254,7 +258,7 @@ import * as os from "@/os";
|
||||
import { stream } from "@/stream";
|
||||
import { selectFiles } from "@/scripts/select-file";
|
||||
import { defaultStore, notePostInterruptors, postFormActions } from "@/store";
|
||||
import MkInfo from "@/components/MkInfo.vue";
|
||||
import Info from "@/components/Info.vue";
|
||||
import { i18n } from "@/i18n";
|
||||
import { instance } from "@/instance";
|
||||
import {
|
||||
@ -264,7 +268,7 @@ import {
|
||||
} from "@/account";
|
||||
import { uploadFile } from "@/scripts/upload";
|
||||
import { deepClone } from "@/scripts/clone";
|
||||
import XCheatSheet from "@/components/MkCheatSheetDialog.vue";
|
||||
import XCheatSheet from "@/components/CheatSheetDialog.vue";
|
||||
import { preprocess } from "@/scripts/preprocess";
|
||||
|
||||
const modal = inject("modal");
|
||||
@ -636,9 +640,7 @@ function setVisibility() {
|
||||
}
|
||||
|
||||
os.popup(
|
||||
defineAsyncComponent(
|
||||
() => import("@/components/MkVisibilityPicker.vue"),
|
||||
),
|
||||
defineAsyncComponent(() => import("@/components/VisibilityPicker.vue")),
|
||||
{
|
||||
currentVisibility: visibility,
|
||||
currentLocalOnly: localOnly,
|
||||
@ -727,7 +729,12 @@ async function onPaste(ev: ClipboardEvent) {
|
||||
|
||||
const paste = ev.clipboardData.getData("text");
|
||||
|
||||
if (!props.renote && !quoteId && paste.startsWith(url + "/notes/") && !props.editId) {
|
||||
if (
|
||||
!props.renote &&
|
||||
!quoteId &&
|
||||
paste.startsWith(url + "/notes/") &&
|
||||
!props.editId
|
||||
) {
|
||||
ev.preventDefault();
|
||||
|
||||
os.yesno({
|
||||
@ -830,31 +837,31 @@ async function post() {
|
||||
|
||||
let postData = props.editId
|
||||
? {
|
||||
editId: props.editId,
|
||||
text: processedText === "" ? undefined : processedText,
|
||||
fileIds: files.length > 0 ? files.map((f) => f.id) : undefined,
|
||||
poll: poll,
|
||||
cw: useCw ? cw || "" : undefined,
|
||||
}
|
||||
editId: props.editId,
|
||||
text: processedText === "" ? undefined : processedText,
|
||||
fileIds: files.length > 0 ? files.map((f) => f.id) : undefined,
|
||||
poll: poll,
|
||||
cw: useCw ? cw || "" : undefined,
|
||||
}
|
||||
: {
|
||||
text: processedText === "" ? undefined : processedText,
|
||||
fileIds: files.length > 0 ? files.map((f) => f.id) : undefined,
|
||||
replyId: props.reply ? props.reply.id : undefined,
|
||||
renoteId: props.renote
|
||||
? props.renote.id
|
||||
: quoteId
|
||||
? quoteId
|
||||
: undefined,
|
||||
channelId: props.channel ? props.channel.id : undefined,
|
||||
poll: poll,
|
||||
cw: useCw ? cw || "" : undefined,
|
||||
localOnly: localOnly,
|
||||
visibility: visibility,
|
||||
visibleUserIds:
|
||||
visibility === "specified"
|
||||
? visibleUsers.map((u) => u.id)
|
||||
text: processedText === "" ? undefined : processedText,
|
||||
fileIds: files.length > 0 ? files.map((f) => f.id) : undefined,
|
||||
replyId: props.reply ? props.reply.id : undefined,
|
||||
renoteId: props.renote
|
||||
? props.renote.id
|
||||
: quoteId
|
||||
? quoteId
|
||||
: undefined,
|
||||
};
|
||||
channelId: props.channel ? props.channel.id : undefined,
|
||||
poll: poll,
|
||||
cw: useCw ? cw || "" : undefined,
|
||||
localOnly: localOnly,
|
||||
visibility: visibility,
|
||||
visibleUserIds:
|
||||
visibility === "specified"
|
||||
? visibleUsers.map((u) => u.id)
|
||||
: undefined,
|
||||
};
|
||||
|
||||
if (withHashtags && hashtags && hashtags.trim() !== "") {
|
||||
const hashtags_ = hashtags
|
||||
@ -1037,6 +1044,7 @@ onMounted(() => {
|
||||
.right {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.gafaadew {
|
||||
position: relative;
|
||||
|
||||
@ -14,7 +14,7 @@
|
||||
@click="showFileMenu(element, $event)"
|
||||
@contextmenu.prevent="showFileMenu(element, $event)"
|
||||
>
|
||||
<MkDriveFileThumbnail
|
||||
<DriveFileThumbnail
|
||||
:data-id="element.id"
|
||||
class="thumbnail"
|
||||
:file="element"
|
||||
@ -32,7 +32,7 @@
|
||||
<script lang="ts" setup>
|
||||
import { defineAsyncComponent, ref, computed } from "vue";
|
||||
import { VueDraggable } from "vue-draggable-plus";
|
||||
import MkDriveFileThumbnail from "@/components/MkDriveFileThumbnail.vue";
|
||||
import DriveFileThumbnail from "@/components/DriveFileThumbnail.vue";
|
||||
import * as os from "@/os";
|
||||
import { i18n } from "@/i18n";
|
||||
|
||||
@ -93,7 +93,7 @@ async function rename(file) {
|
||||
|
||||
async function describe(file) {
|
||||
os.popup(
|
||||
defineAsyncComponent(() => import("@/components/MkMediaCaption.vue")),
|
||||
defineAsyncComponent(() => import("@/components/MediaCaption.vue")),
|
||||
{
|
||||
title: i18n.ts.describeFile,
|
||||
input: {
|
||||
@ -1,11 +1,11 @@
|
||||
<template>
|
||||
<MkModal
|
||||
<Modal
|
||||
ref="modal"
|
||||
:prefer-type="'dialog'"
|
||||
@click="modal.close()"
|
||||
@closed="onModalClosed()"
|
||||
>
|
||||
<MkPostForm
|
||||
<PostForm
|
||||
ref="form"
|
||||
style="margin: 0 auto auto auto"
|
||||
v-bind="props"
|
||||
@ -15,14 +15,14 @@
|
||||
@cancel="modal.close()"
|
||||
@esc="modal.close()"
|
||||
/>
|
||||
</MkModal>
|
||||
</Modal>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import {} from "vue";
|
||||
import * as misskey from "iceshrimp-js";
|
||||
import MkModal from "@/components/MkModal.vue";
|
||||
import MkPostForm from "@/components/MkPostForm.vue";
|
||||
import Modal from "@/components/Modal.vue";
|
||||
import PostForm from "@/components/PostForm.vue";
|
||||
|
||||
const props = defineProps<{
|
||||
reply?: misskey.entities.Note;
|
||||
@ -46,8 +46,8 @@ const emit = defineEmits<{
|
||||
(ev: "closed"): void;
|
||||
}>();
|
||||
|
||||
let modal = $shallowRef<InstanceType<typeof MkModal>>();
|
||||
let form = $shallowRef<InstanceType<typeof MkPostForm>>();
|
||||
let modal = $shallowRef<InstanceType<typeof Modal>>();
|
||||
let form = $shallowRef<InstanceType<typeof PostForm>>();
|
||||
|
||||
function onPosted() {
|
||||
modal.close({
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<MkButton
|
||||
<Button
|
||||
v-if="supported && !pushRegistrationInServer"
|
||||
type="button"
|
||||
primary
|
||||
@ -12,8 +12,8 @@
|
||||
@click="subscribe"
|
||||
>
|
||||
{{ i18n.ts.subscribePushNotification }}
|
||||
</MkButton>
|
||||
<MkButton
|
||||
</Button>
|
||||
<Button
|
||||
v-else-if="
|
||||
!showOnlyToRegister &&
|
||||
($i ? pushRegistrationInServer : pushSubscription)
|
||||
@ -29,8 +29,8 @@
|
||||
@click="unsubscribe"
|
||||
>
|
||||
{{ i18n.ts.unsubscribePushNotification }}
|
||||
</MkButton>
|
||||
<MkButton
|
||||
</Button>
|
||||
<Button
|
||||
v-else-if="$i && pushRegistrationInServer"
|
||||
disabled
|
||||
:rounded="rounded"
|
||||
@ -39,8 +39,8 @@
|
||||
:full="full"
|
||||
>
|
||||
{{ i18n.ts.pushNotificationAlreadySubscribed }}
|
||||
</MkButton>
|
||||
<MkButton
|
||||
</Button>
|
||||
<Button
|
||||
v-else-if="!supported"
|
||||
disabled
|
||||
:rounded="rounded"
|
||||
@ -49,12 +49,12 @@
|
||||
:full="full"
|
||||
>
|
||||
{{ i18n.ts.pushNotificationNotSupported }}
|
||||
</MkButton>
|
||||
</Button>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { $i, getAccounts } from "@/account";
|
||||
import MkButton from "@/components/MkButton.vue";
|
||||
import Button from "@/components/Button.vue";
|
||||
import { instance } from "@/instance";
|
||||
import { api, apiWithDialog, promiseDialog } from "@/os";
|
||||
import { i18n } from "@/i18n";
|
||||
@ -8,7 +8,7 @@
|
||||
class="_button"
|
||||
@click="tab = reaction"
|
||||
>
|
||||
<MkReactionIcon
|
||||
<ReactionIcon
|
||||
ref="reactionRef"
|
||||
:reaction="
|
||||
reaction
|
||||
@ -22,7 +22,7 @@
|
||||
}}</span>
|
||||
</button>
|
||||
</div>
|
||||
<MkUserCardMini
|
||||
<UserCardMini
|
||||
v-for="user in users"
|
||||
:key="user.id"
|
||||
:user="user"
|
||||
@ -30,15 +30,15 @@
|
||||
/>
|
||||
</div>
|
||||
<div v-else>
|
||||
<MkLoading />
|
||||
<Loading />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { onMounted, watch } from "vue";
|
||||
import * as misskey from "iceshrimp-js";
|
||||
import MkReactionIcon from "@/components/MkReactionIcon.vue";
|
||||
import MkUserCardMini from "@/components/MkUserCardMini.vue";
|
||||
import ReactionIcon from "@/components/ReactionIcon.vue";
|
||||
import UserCardMini from "@/components/UserCardMini.vue";
|
||||
import { i18n } from "@/i18n";
|
||||
import * as os from "@/os";
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<MkEmoji
|
||||
<Emoji
|
||||
:emoji="reaction"
|
||||
:custom-emojis="customEmojis || []"
|
||||
:is-reaction="true"
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<MkTooltip
|
||||
<Tooltip
|
||||
ref="tooltip"
|
||||
:target-element="targetElement"
|
||||
:max-width="340"
|
||||
@ -14,13 +14,13 @@
|
||||
/>
|
||||
<div class="name">{{ reaction.replace("@.", "") }}</div>
|
||||
</div>
|
||||
</MkTooltip>
|
||||
</Tooltip>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import {} from "vue";
|
||||
import MkTooltip from "./MkTooltip.vue";
|
||||
import XReactionIcon from "@/components/MkReactionIcon.vue";
|
||||
import Tooltip from "./Tooltip.vue";
|
||||
import XReactionIcon from "@/components/ReactionIcon.vue";
|
||||
|
||||
const props = defineProps<{
|
||||
reaction: string;
|
||||
@ -20,7 +20,7 @@
|
||||
import { computed, ref } from "vue";
|
||||
import * as misskey from "iceshrimp-js";
|
||||
import { $i } from "@/account";
|
||||
import XReaction from "@/components/MkReactionsViewer.reaction.vue";
|
||||
import XReaction from "@/components/ReactionsViewerReaction.vue";
|
||||
|
||||
const props = defineProps<{
|
||||
note: misskey.entities.Note;
|
||||
@ -55,6 +55,7 @@ const isMe = computed(() => $i && $i.id === props.note.userId);
|
||||
);
|
||||
scrollbar-width: none;
|
||||
pointer-events: none;
|
||||
|
||||
:deep(*) {
|
||||
pointer-events: all;
|
||||
}
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue
Block a user