chore: format

This commit is contained in:
ThatOneCalculator 2023-04-30 13:27:27 -07:00
parent 1eb19b6988
commit 1fb5635a4d
16 changed files with 110 additions and 53 deletions

View file

@ -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);
} }

View file

@ -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<{

View file

@ -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;

View file

@ -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;

View file

@ -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;

View file

@ -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(

View file

@ -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");

View file

@ -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);
} }

View file

@ -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 {

View file

@ -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>

View file

@ -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;
} }

View file

@ -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>

View file

@ -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(