chore: format
This commit is contained in:
parent
4b1fa90c8f
commit
121ddedce8
|
@ -52,7 +52,7 @@ function focus() {
|
||||||
}
|
}
|
||||||
|
|
||||||
defineExpose({
|
defineExpose({
|
||||||
focus
|
focus,
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
@ -73,7 +73,8 @@ defineExpose({
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
&:hover > span, &:focus > span {
|
&:hover > span,
|
||||||
|
&:focus > span {
|
||||||
background: var(--cwFg) !important;
|
background: var(--cwFg) !important;
|
||||||
color: var(--cwBg) !important;
|
color: var(--cwBg) !important;
|
||||||
}
|
}
|
||||||
|
@ -93,7 +94,8 @@ defineExpose({
|
||||||
border-radius: 999px;
|
border-radius: 999px;
|
||||||
box-shadow: 0 2px 6px rgb(0 0 0 / 20%);
|
box-shadow: 0 2px 6px rgb(0 0 0 / 20%);
|
||||||
}
|
}
|
||||||
&:hover, &:focus {
|
&:hover,
|
||||||
|
&:focus {
|
||||||
> span {
|
> span {
|
||||||
background: var(--panelHighlight);
|
background: var(--panelHighlight);
|
||||||
}
|
}
|
||||||
|
|
|
@ -174,7 +174,7 @@ import { deviceKind } from "@/scripts/device-kind";
|
||||||
import { emojiCategories, instance } from "@/instance";
|
import { emojiCategories, instance } from "@/instance";
|
||||||
import { i18n } from "@/i18n";
|
import { i18n } from "@/i18n";
|
||||||
import { defaultStore } from "@/store";
|
import { defaultStore } from "@/store";
|
||||||
import { FocusTrap } from 'focus-trap-vue';
|
import { FocusTrap } from "focus-trap-vue";
|
||||||
|
|
||||||
const props = withDefaults(
|
const props = withDefaults(
|
||||||
defineProps<{
|
defineProps<{
|
||||||
|
|
|
@ -139,7 +139,8 @@ function close() {
|
||||||
height: 100px;
|
height: 100px;
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
|
|
||||||
&:hover, &:focus-visible {
|
&:hover,
|
||||||
|
&:focus-visible {
|
||||||
color: var(--accent);
|
color: var(--accent);
|
||||||
background: var(--accentedBg);
|
background: var(--accentedBg);
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
|
|
|
@ -14,7 +14,9 @@
|
||||||
<template v-for="(item, i) in items2">
|
<template v-for="(item, i) in items2">
|
||||||
<div v-if="item === null" class="divider"></div>
|
<div v-if="item === null" class="divider"></div>
|
||||||
<span v-else-if="item.type === 'label'" class="label item">
|
<span v-else-if="item.type === 'label'" class="label item">
|
||||||
<span :style="item.textStyle || ''">{{ item.text }}</span>
|
<span :style="item.textStyle || ''">{{
|
||||||
|
item.text
|
||||||
|
}}</span>
|
||||||
</span>
|
</span>
|
||||||
<span
|
<span
|
||||||
v-else-if="item.type === 'pending'"
|
v-else-if="item.type === 'pending'"
|
||||||
|
@ -48,7 +50,9 @@
|
||||||
class="avatar"
|
class="avatar"
|
||||||
disableLink
|
disableLink
|
||||||
/>
|
/>
|
||||||
<span :style="item.textStyle || ''">{{ item.text }}</span>
|
<span :style="item.textStyle || ''">{{
|
||||||
|
item.text
|
||||||
|
}}</span>
|
||||||
<span v-if="item.indicate" class="indicator"
|
<span v-if="item.indicate" class="indicator"
|
||||||
><i class="ph-circle ph-fill"></i
|
><i class="ph-circle ph-fill"></i
|
||||||
></span>
|
></span>
|
||||||
|
@ -75,7 +79,9 @@
|
||||||
:class="icon"
|
:class="icon"
|
||||||
></i>
|
></i>
|
||||||
</span>
|
</span>
|
||||||
<span :style="item.textStyle || ''">{{ item.text }}</span>
|
<span :style="item.textStyle || ''">{{
|
||||||
|
item.text
|
||||||
|
}}</span>
|
||||||
<span v-if="item.indicate" class="indicator"
|
<span v-if="item.indicate" class="indicator"
|
||||||
><i class="ph-circle ph-fill"></i
|
><i class="ph-circle ph-fill"></i
|
||||||
></span>
|
></span>
|
||||||
|
@ -89,9 +95,11 @@
|
||||||
@mouseenter.passive="onItemMouseEnter(item)"
|
@mouseenter.passive="onItemMouseEnter(item)"
|
||||||
@mouseleave.passive="onItemMouseLeave(item)"
|
@mouseleave.passive="onItemMouseLeave(item)"
|
||||||
>
|
>
|
||||||
<MkAvatar :user="item.user" class="avatar" disableLink /><MkUserName
|
<MkAvatar
|
||||||
:user="item.user"
|
:user="item.user"
|
||||||
/>
|
class="avatar"
|
||||||
|
disableLink
|
||||||
|
/><MkUserName :user="item.user" />
|
||||||
<span v-if="item.indicate" class="indicator"
|
<span v-if="item.indicate" class="indicator"
|
||||||
><i class="ph-circle ph-fill"></i
|
><i class="ph-circle ph-fill"></i
|
||||||
></span>
|
></span>
|
||||||
|
@ -129,9 +137,13 @@
|
||||||
:class="icon"
|
:class="icon"
|
||||||
></i>
|
></i>
|
||||||
</span>
|
</span>
|
||||||
<span :style="item.textStyle || ''">{{ item.text }}</span>
|
<span :style="item.textStyle || ''">{{
|
||||||
|
item.text
|
||||||
|
}}</span>
|
||||||
<span class="caret"
|
<span class="caret"
|
||||||
><i class="ph-caret-right ph-bold ph-lg ph-fw ph-lg"></i
|
><i
|
||||||
|
class="ph-caret-right ph-bold ph-lg ph-fw ph-lg"
|
||||||
|
></i
|
||||||
></span>
|
></span>
|
||||||
</button>
|
</button>
|
||||||
<button
|
<button
|
||||||
|
@ -161,7 +173,9 @@
|
||||||
class="avatar"
|
class="avatar"
|
||||||
disableLink
|
disableLink
|
||||||
/>
|
/>
|
||||||
<span :style="item.textStyle || ''">{{ item.text }}</span>
|
<span :style="item.textStyle || ''">{{
|
||||||
|
item.text
|
||||||
|
}}</span>
|
||||||
<span v-if="item.indicate" class="indicator"
|
<span v-if="item.indicate" class="indicator"
|
||||||
><i class="ph-circle ph-fill"></i
|
><i class="ph-circle ph-fill"></i
|
||||||
></span>
|
></span>
|
||||||
|
@ -203,7 +217,7 @@ import FormSwitch from "@/components/form/switch.vue";
|
||||||
import { MenuItem, InnerMenuItem, MenuPending, MenuAction } from "@/types/menu";
|
import { MenuItem, InnerMenuItem, MenuPending, MenuAction } from "@/types/menu";
|
||||||
import * as os from "@/os";
|
import * as os from "@/os";
|
||||||
import { i18n } from "@/i18n";
|
import { i18n } from "@/i18n";
|
||||||
import { FocusTrap } from 'focus-trap-vue';
|
import { FocusTrap } from "focus-trap-vue";
|
||||||
|
|
||||||
const XChild = defineAsyncComponent(() => import("./MkMenu.child.vue"));
|
const XChild = defineAsyncComponent(() => import("./MkMenu.child.vue"));
|
||||||
const focusTrap = ref();
|
const focusTrap = ref();
|
||||||
|
@ -383,7 +397,8 @@ onBeforeUnmount(() => {
|
||||||
transform: translateY(0em);
|
transform: translateY(0em);
|
||||||
}
|
}
|
||||||
|
|
||||||
&:not(:disabled):hover, &:focus-visible {
|
&:not(:disabled):hover,
|
||||||
|
&:focus-visible {
|
||||||
color: var(--accent);
|
color: var(--accent);
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
|
|
||||||
|
|
|
@ -26,13 +26,16 @@
|
||||||
$style.root,
|
$style.root,
|
||||||
{
|
{
|
||||||
[$style.drawer]: type === 'drawer',
|
[$style.drawer]: type === 'drawer',
|
||||||
[$style.dialog]: type === 'dialog' || type === 'dialog:top',
|
[$style.dialog]:
|
||||||
|
type === 'dialog' || type === 'dialog:top',
|
||||||
[$style.popup]: type === 'popup',
|
[$style.popup]: type === 'popup',
|
||||||
},
|
},
|
||||||
]"
|
]"
|
||||||
:style="{
|
:style="{
|
||||||
zIndex,
|
zIndex,
|
||||||
pointerEvents: (manualShowing != null ? manualShowing : showing)
|
pointerEvents: (
|
||||||
|
manualShowing != null ? manualShowing : showing
|
||||||
|
)
|
||||||
? 'auto'
|
? 'auto'
|
||||||
: 'none',
|
: 'none',
|
||||||
'--transformOrigin': transformOrigin,
|
'--transformOrigin': transformOrigin,
|
||||||
|
@ -76,7 +79,7 @@ import * as os from "@/os";
|
||||||
import { isTouchUsing } from "@/scripts/touch";
|
import { isTouchUsing } from "@/scripts/touch";
|
||||||
import { defaultStore } from "@/store";
|
import { defaultStore } from "@/store";
|
||||||
import { deviceKind } from "@/scripts/device-kind";
|
import { deviceKind } from "@/scripts/device-kind";
|
||||||
import { FocusTrap } from 'focus-trap-vue';
|
import { FocusTrap } from "focus-trap-vue";
|
||||||
|
|
||||||
function getFixedContainer(el: Element | null): Element | null {
|
function getFixedContainer(el: Element | null): Element | null {
|
||||||
if (el == null || el.tagName === "BODY") return null;
|
if (el == null || el.tagName === "BODY") return null;
|
||||||
|
|
|
@ -60,7 +60,7 @@
|
||||||
|
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import { onMounted, onUnmounted } from "vue";
|
import { onMounted, onUnmounted } from "vue";
|
||||||
import { FocusTrap } from 'focus-trap-vue';
|
import { FocusTrap } from "focus-trap-vue";
|
||||||
import MkModal from "./MkModal.vue";
|
import MkModal from "./MkModal.vue";
|
||||||
|
|
||||||
const props = withDefaults(
|
const props = withDefaults(
|
||||||
|
|
|
@ -35,10 +35,19 @@
|
||||||
class="content"
|
class="content"
|
||||||
:class="{ collapsed, isLong, showContent: note.cw && !showContent }"
|
:class="{ collapsed, isLong, showContent: note.cw && !showContent }"
|
||||||
>
|
>
|
||||||
<XCwButton ref="cwButton" v-if="note.cw && !showContent" v-model="showContent" :note="note" v-on:keydown="focusFooter" />
|
<XCwButton
|
||||||
|
ref="cwButton"
|
||||||
|
v-if="note.cw && !showContent"
|
||||||
|
v-model="showContent"
|
||||||
|
:note="note"
|
||||||
|
v-on:keydown="focusFooter"
|
||||||
|
/>
|
||||||
<div
|
<div
|
||||||
class="body"
|
class="body"
|
||||||
v-bind="{ 'aria-label': !showContent ? '' : null, 'tabindex': !showContent ? '-1' : null }"
|
v-bind="{
|
||||||
|
'aria-label': !showContent ? '' : null,
|
||||||
|
tabindex: !showContent ? '-1' : null,
|
||||||
|
}"
|
||||||
>
|
>
|
||||||
<span v-if="note.deletedAt" style="opacity: 0.5"
|
<span v-if="note.deletedAt" style="opacity: 0.5"
|
||||||
>({{ i18n.ts.deleted }})</span
|
>({{ i18n.ts.deleted }})</span
|
||||||
|
@ -106,8 +115,15 @@
|
||||||
v-on:focus="cwButton?.focus()"
|
v-on:focus="cwButton?.focus()"
|
||||||
></div>
|
></div>
|
||||||
</div>
|
</div>
|
||||||
<XShowMoreButton v-if="isLong" v-model="collapsed"></XShowMoreButton>
|
<XShowMoreButton
|
||||||
<XCwButton v-if="note.cw && showContent" v-model="showContent" :note="note" />
|
v-if="isLong"
|
||||||
|
v-model="collapsed"
|
||||||
|
></XShowMoreButton>
|
||||||
|
<XCwButton
|
||||||
|
v-if="note.cw && showContent"
|
||||||
|
v-model="showContent"
|
||||||
|
:note="note"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
@ -150,7 +166,6 @@ const urls = props.note.text
|
||||||
|
|
||||||
let showContent = $ref(false);
|
let showContent = $ref(false);
|
||||||
|
|
||||||
|
|
||||||
function focusFooter(ev) {
|
function focusFooter(ev) {
|
||||||
if (ev.key == "Tab" && !ev.getModifierState("Shift")) {
|
if (ev.key == "Tab" && !ev.getModifierState("Shift")) {
|
||||||
emit("focusfooter");
|
emit("focusfooter");
|
||||||
|
|
|
@ -96,7 +96,8 @@ export default defineComponent({
|
||||||
font-size: 0.9em;
|
font-size: 0.9em;
|
||||||
margin-bottom: 0.3rem;
|
margin-bottom: 0.3rem;
|
||||||
|
|
||||||
&:hover, &:focus-visible {
|
&:hover,
|
||||||
|
&:focus-visible {
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
background: var(--panelHighlight);
|
background: var(--panelHighlight);
|
||||||
}
|
}
|
||||||
|
|
|
@ -46,7 +46,10 @@
|
||||||
/></MkA>
|
/></MkA>
|
||||||
<p class="username"><MkAcct :user="user" /></p>
|
<p class="username"><MkAcct :user="user" /></p>
|
||||||
</div>
|
</div>
|
||||||
<div class="description" :class="{ collapsed: isLong && collapsed }">
|
<div
|
||||||
|
class="description"
|
||||||
|
:class="{ collapsed: isLong && collapsed }"
|
||||||
|
>
|
||||||
<Mfm
|
<Mfm
|
||||||
v-if="user.description"
|
v-if="user.description"
|
||||||
:text="user.description"
|
:text="user.description"
|
||||||
|
@ -149,14 +152,15 @@ let user = $ref<misskey.entities.UserDetailed | null>(null);
|
||||||
let top = $ref(0);
|
let top = $ref(0);
|
||||||
let left = $ref(0);
|
let left = $ref(0);
|
||||||
|
|
||||||
|
|
||||||
let isLong = $ref(false);
|
let isLong = $ref(false);
|
||||||
let collapsed = $ref(!isLong);
|
let collapsed = $ref(!isLong);
|
||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
if (typeof props.q === "object") {
|
if (typeof props.q === "object") {
|
||||||
user = props.q;
|
user = props.q;
|
||||||
isLong = (user.description.split("\n").length > 9 || user.description.length > 400);
|
isLong =
|
||||||
|
user.description.split("\n").length > 9 ||
|
||||||
|
user.description.length > 400;
|
||||||
} else {
|
} else {
|
||||||
const query = props.q.startsWith("@")
|
const query = props.q.startsWith("@")
|
||||||
? Acct.parse(props.q.substr(1))
|
? Acct.parse(props.q.substr(1))
|
||||||
|
@ -165,11 +169,12 @@ onMounted(() => {
|
||||||
os.api("users/show", query).then((res) => {
|
os.api("users/show", query).then((res) => {
|
||||||
if (!props.showing) return;
|
if (!props.showing) return;
|
||||||
user = res;
|
user = res;
|
||||||
isLong = (user.description.split("\n").length > 9 || user.description.length > 400);
|
isLong =
|
||||||
|
user.description.split("\n").length > 9 ||
|
||||||
|
user.description.length > 400;
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
const rect = props.source.getBoundingClientRect();
|
const rect = props.source.getBoundingClientRect();
|
||||||
const x =
|
const x =
|
||||||
rect.left + props.source.offsetWidth / 2 - 300 / 2 + window.pageXOffset;
|
rect.left + props.source.offsetWidth / 2 - 300 / 2 + window.pageXOffset;
|
||||||
|
@ -313,7 +318,7 @@ onMounted(() => {
|
||||||
|
|
||||||
> .fields {
|
> .fields {
|
||||||
padding: 0 16px;
|
padding: 0 16px;
|
||||||
font-size: .8em;
|
font-size: 0.8em;
|
||||||
margin-top: 1em;
|
margin-top: 1em;
|
||||||
|
|
||||||
> .field {
|
> .field {
|
||||||
|
|
|
@ -7,7 +7,7 @@
|
||||||
v-bind="Object.fromEntries(currentPageProps)"
|
v-bind="Object.fromEntries(currentPageProps)"
|
||||||
tabindex="-1"
|
tabindex="-1"
|
||||||
v-focus
|
v-focus
|
||||||
style="outline: none;"
|
style="outline: none"
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<template #fallback>
|
<template #fallback>
|
||||||
|
|
|
@ -313,7 +313,9 @@ onUnmounted(() => {
|
||||||
font-weight: normal;
|
font-weight: normal;
|
||||||
opacity: 0.7;
|
opacity: 0.7;
|
||||||
|
|
||||||
&:hover, &:focus-visible, &.active {
|
&:hover,
|
||||||
|
&:focus-visible,
|
||||||
|
&.active {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -12,7 +12,12 @@
|
||||||
class="user"
|
class="user"
|
||||||
:to="`/user-info/${user.id}`"
|
:to="`/user-info/${user.id}`"
|
||||||
>
|
>
|
||||||
<MkAvatar :user="user" class="avatar" indicator disableLink />
|
<MkAvatar
|
||||||
|
:user="user"
|
||||||
|
class="avatar"
|
||||||
|
indicator
|
||||||
|
disableLink
|
||||||
|
/>
|
||||||
</MkA>
|
</MkA>
|
||||||
</div>
|
</div>
|
||||||
</Transition>
|
</Transition>
|
||||||
|
|
|
@ -441,7 +441,9 @@ let preview_blockCode = $ref(
|
||||||
let preview_inlineMath = $ref("\\(x= \\frac{-b' \\pm \\sqrt{(b')^2-ac}}{a}\\)");
|
let preview_inlineMath = $ref("\\(x= \\frac{-b' \\pm \\sqrt{(b')^2-ac}}{a}\\)");
|
||||||
let preview_blockMath = $ref("\\[x= \\frac{-b' \\pm \\sqrt{(b')^2-ac}}{a}\\]");
|
let preview_blockMath = $ref("\\[x= \\frac{-b' \\pm \\sqrt{(b')^2-ac}}{a}\\]");
|
||||||
let preview_quote = $ref(`> ${i18n.ts._mfm.dummy}`);
|
let preview_quote = $ref(`> ${i18n.ts._mfm.dummy}`);
|
||||||
let preview_search = $ref(`${i18n.ts._mfm.dummy} [search]\n${i18n.ts._mfm.dummy} [検索]\n${i18n.ts._mfm.dummy} 検索`);
|
let preview_search = $ref(
|
||||||
|
`${i18n.ts._mfm.dummy} [search]\n${i18n.ts._mfm.dummy} [検索]\n${i18n.ts._mfm.dummy} 検索`
|
||||||
|
);
|
||||||
let preview_jelly = $ref("$[jelly 🍮] $[jelly.speed=5s 🍮]");
|
let preview_jelly = $ref("$[jelly 🍮] $[jelly.speed=5s 🍮]");
|
||||||
let preview_tada = $ref("$[tada 🍮] $[tada.speed=5s 🍮]");
|
let preview_tada = $ref("$[tada 🍮] $[tada.speed=5s 🍮]");
|
||||||
let preview_jump = $ref("$[jump 🍮] $[jump.speed=5s 🍮]");
|
let preview_jump = $ref("$[jump 🍮] $[jump.speed=5s 🍮]");
|
||||||
|
@ -463,9 +465,15 @@ let preview_x4 = $ref("$[x4 🍮]");
|
||||||
let preview_blur = $ref(`$[blur ${i18n.ts._mfm.dummy}]`);
|
let preview_blur = $ref(`$[blur ${i18n.ts._mfm.dummy}]`);
|
||||||
let preview_rainbow = $ref("$[rainbow 🍮] $[rainbow.speed=5s 🍮]");
|
let preview_rainbow = $ref("$[rainbow 🍮] $[rainbow.speed=5s 🍮]");
|
||||||
let preview_sparkle = $ref("$[sparkle 🍮]");
|
let preview_sparkle = $ref("$[sparkle 🍮]");
|
||||||
let preview_rotate = $ref("$[rotate 🍮]\n$[rotate.deg=45 🍮]\n$[rotate.x,deg=45 Hello, world!]");
|
let preview_rotate = $ref(
|
||||||
let preview_position = $ref("$[position.y=-1 Positioning]\n$[position.x=-1 Positioning]");
|
"$[rotate 🍮]\n$[rotate.deg=45 🍮]\n$[rotate.x,deg=45 Hello, world!]"
|
||||||
let preview_scale = $ref("$[scale.x=1.3 Scaling]\n$[scale.x=1.3,y=2 Scaling]\n$[scale.y=0.3 Tiny scaling]");
|
);
|
||||||
|
let preview_position = $ref(
|
||||||
|
"$[position.y=-1 Positioning]\n$[position.x=-1 Positioning]"
|
||||||
|
);
|
||||||
|
let preview_scale = $ref(
|
||||||
|
"$[scale.x=1.3 Scaling]\n$[scale.x=1.3,y=2 Scaling]\n$[scale.y=0.3 Tiny scaling]"
|
||||||
|
);
|
||||||
let preview_fg = $ref("$[fg.color=ff0000 Text color]");
|
let preview_fg = $ref("$[fg.color=ff0000 Text color]");
|
||||||
let preview_bg = $ref("$[bg.color=ff0000 Background color]");
|
let preview_bg = $ref("$[bg.color=ff0000 Background color]");
|
||||||
let preview_plain = $ref(
|
let preview_plain = $ref(
|
||||||
|
|
Loading…
Reference in New Issue