natty
/
calckey
1
0
Fork 0
Code Issues 1 Pull Requests Packages Projects Releases Wiki Activity

chore: formatting

This commit is contained in:
Kainoa Kanter 2023-05-19 15:41:59 -07:00
parent 4bf3501668
commit 6d3a5d63cc
13 changed files with 82 additions and 68 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/client/src/components/MkButton.vue
View File

@ -193,7 +193,7 @@ function onMousedown(evt: MouseEvent): void {
&.mini { &.mini {
padding: 4px 8px; padding: 4px 8px;
font-size: .9em; font-size: 0.9em;
border-radius: 100px; border-radius: 100px;
} }

3
packages/client/src/components/MkGalleryPostPreview.vue
View File

@ -34,7 +34,8 @@ const props = defineProps<{
position: relative; position: relative;
height: 200px; height: 200px;
&:hover, &:focus { &:hover,
&:focus {
text-decoration: none; text-decoration: none;
color: var(--accent); color: var(--accent);

4
packages/client/src/components/MkMediaList.vue
View File

@ -168,11 +168,11 @@ onMounted(() => {
addEventListener("popstate", close); addEventListener("popstate", close);
// This is a workaround. Not sure why, but when clicking to open, it doesn't move focus to the photoswipe. Preventing using esc to close. However when using keyboard to open it already focuses the lightbox fine. // This is a workaround. Not sure why, but when clicking to open, it doesn't move focus to the photoswipe. Preventing using esc to close. However when using keyboard to open it already focuses the lightbox fine.
lightbox.pswp.element.focus(); lightbox.pswp.element.focus();
}) });
lightbox.on("close", () => { lightbox.on("close", () => {
removeEventListener("popstate", close); removeEventListener("popstate", close);
history.back(); history.back();
}) });
lightbox.init(); lightbox.init();

6
packages/client/src/components/MkNote.vue
View File

@ -130,7 +130,9 @@
@click="reply()" @click="reply()"
> >
<i class="ph-arrow-u-up-left ph-bold ph-lg"></i> <i class="ph-arrow-u-up-left ph-bold ph-lg"></i>
<template v-if="appearNote.repliesCount > 0 && !detailedView"> <template
v-if="appearNote.repliesCount > 0 && !detailedView"
>
<p class="count">{{ appearNote.repliesCount }}</p> <p class="count">{{ appearNote.repliesCount }}</p>
</template> </template>
</button> </button>
@ -672,7 +674,7 @@ defineExpose({
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
flex-wrap: wrap; flex-wrap: wrap;
gap: .7em; gap: 0.7em;
margin-top: 16px; margin-top: 16px;
opacity: 0.7; opacity: 0.7;
font-size: 0.9em; font-size: 0.9em;

72
packages/client/src/components/MkNoteDetailed.vue
View File

@ -33,11 +33,7 @@
detailedView detailedView
></MkNote> ></MkNote>
<MkTab <MkTab v-model="tab" :style="'chips'" @update:modelValue="loadTab">
v-model="tab"
:style="'chips'"
@update:modelValue="loadTab"
>
<option value="replies"> <option value="replies">
<i class="ph-arrow-u-up-left ph-bold ph-lg"></i> <i class="ph-arrow-u-up-left ph-bold ph-lg"></i>
<template v-if="appearNote.repliesCount > 0"> <template v-if="appearNote.repliesCount > 0">
@ -77,8 +73,10 @@
:conversation="replies" :conversation="replies"
:detailedView="true" :detailedView="true"
/> />
<MkLoading v-else-if="tab === 'replies' && appearNote.repliesCount > 0" /> <MkLoading
v-else-if="tab === 'replies' && appearNote.repliesCount > 0"
/>
<MkNoteSub <MkNoteSub
v-if="directQuotes && tab === 'quotes'" v-if="directQuotes && tab === 'quotes'"
v-for="note in directQuotes" v-for="note in directQuotes"
@ -89,27 +87,26 @@
:detailedView="true" :detailedView="true"
/> />
<MkLoading v-else-if="tab === 'quotes' && directQuotes.length > 0" /> <MkLoading v-else-if="tab === 'quotes' && directQuotes.length > 0" />
<!-- <MkPagination <!-- <MkPagination
v-if="tab === 'renotes'" v-if="tab === 'renotes'"
v-slot="{ items }" v-slot="{ items }"
ref="pagingComponent" ref="pagingComponent"
:pagination="pagination" :pagination="pagination"
> --> > -->
<MkUserCardMini <MkUserCardMini
v-if="tab === 'renotes' && renotes" v-if="tab === 'renotes' && renotes"
v-for="item in renotes" v-for="item in renotes"
:key="item.user.id" :key="item.user.id"
:user="item.user" :user="item.user"
:with-chart="false" :with-chart="false"
/> />
<!-- </MkPagination> --> <!-- </MkPagination> -->
<MkLoading v-else-if="tab === 'renotes' && appearNote.renoteCount > 0" /> <MkLoading
v-else-if="tab === 'renotes' && appearNote.renoteCount > 0"
/>
<div <div v-if="tab === 'clips' && clips.length > 0" class="_content clips">
v-if="tab === 'clips' && clips.length > 0"
class="_content clips"
>
<MkA <MkA
v-for="item in clips" v-for="item in clips"
:key="item.id" :key="item.id"
@ -117,10 +114,7 @@
class="item _panel" class="item _panel"
> >
<b>{{ item.name }}</b> <b>{{ item.name }}</b>
<div <div v-if="item.description" class="description">
v-if="item.description"
class="description"
>
{{ item.description }} {{ item.description }}
</div> </div>
<div class="user"> <div class="user">
@ -129,10 +123,7 @@
class="avatar" class="avatar"
:show-indicator="true" :show-indicator="true"
/> />
<MkUserName <MkUserName :user="item.user" :nowrap="false" />
:user="item.user"
:nowrap="false"
/>
</div> </div>
</MkA> </MkA>
</div> </div>
@ -358,16 +349,9 @@ os.api("notes/children", {
}).then((res) => { }).then((res) => {
replies.value = res; replies.value = res;
directReplies = res directReplies = res
.filter( .filter((note) => note.replyId === appearNote.id)
(note) =>
note.replyId === appearNote.id
)
.reverse(); .reverse();
directQuotes = res directQuotes = res.filter((note) => note.renoteId === appearNote.id);
.filter(
(note) =>
note.renoteId === appearNote.id
);
}); });
conversation = null; conversation = null;
@ -404,7 +388,7 @@ function loadTab() {
limit: 100, limit: 100,
}).then((res) => { }).then((res) => {
renotes = res; renotes = res;
}) });
} }
} }
@ -627,7 +611,9 @@ onUnmounted(() => {
padding-left: 10px; padding-left: 10px;
} }
} }
> .clips, > .chips, > :deep(.user-card-mini) { > .clips,
> .chips,
> :deep(.user-card-mini) {
padding-inline: 16px !important; padding-inline: 16px !important;
} }
} }
@ -643,7 +629,8 @@ onUnmounted(() => {
opacity: 0.7; opacity: 0.7;
} }
.clips { // want to redesign at some point .clips {
// want to redesign at some point
padding: 24px 32px; padding: 24px 32px;
padding-top: 0; padding-top: 0;
> .item { > .item {
@ -652,8 +639,9 @@ onUnmounted(() => {
// background: var(--buttonBg); // background: var(--buttonBg);
border: 1px solid var(--divider); border: 1px solid var(--divider);
margin-bottom: var(--margin); margin-bottom: var(--margin);
transition: background .2s; transition: background 0.2s;
&:hover, &:focus-within { &:hover,
&:focus-within {
background: var(--panelHighlight); background: var(--panelHighlight);
} }

2
packages/client/src/components/MkNoteSub.vue
View File

@ -135,7 +135,7 @@
:key="reply.id" :key="reply.id"
:note="reply" :note="reply"
class="reply" class="reply"
:class="{single: replies.length == 1}" :class="{ single: replies.length == 1 }"
:conversation="conversation" :conversation="conversation"
:depth="replies.lenght == 1 ? depth : depth + 1" :depth="replies.lenght == 1 ? depth : depth + 1"
:replyLevel="replyLevel + 1" :replyLevel="replyLevel + 1"

7
packages/client/src/components/MkShowMoreButton.vue
View File

@ -1,5 +1,10 @@
<template> <template>
<button ref="el" class="_button" :class="{ fade: modelValue, showLess: !modelValue }" @click.stop="toggle"> <button
ref="el"
class="_button"
:class="{ fade: modelValue, showLess: !modelValue }"
@click.stop="toggle"
>
<span>{{ modelValue ? i18n.ts.showMore : i18n.ts.showLess }}</span> <span>{{ modelValue ? i18n.ts.showMore : i18n.ts.showLess }}</span>
</button> </button>
</template> </template>

16
packages/client/src/components/MkSubNoteContent.vue
View File

@ -125,16 +125,26 @@
</div> </div>
</template> </template>
<div <div
v-if="note.cw && !showContent || showMoreButton && collapsed" v-if="
(note.cw && !showContent) ||
(showMoreButton && collapsed)
"
tabindex="0" tabindex="0"
v-on:focus="cwButton?.focus(); showMoreButton?.focus()" v-on:focus="
cwButton?.focus();
showMoreButton?.focus();
"
></div> ></div>
</div> </div>
<XShowMoreButton <XShowMoreButton
v-if="isLong && !collapsed" v-if="isLong && !collapsed"
v-model="collapsed" v-model="collapsed"
></XShowMoreButton> ></XShowMoreButton>
<XCwButton v-if="note.cw && showContent" v-model="showContent" :note="note" /> <XCwButton
v-if="note.cw && showContent"
v-model="showContent"
:note="note"
/>
</div> </div>
<MkButton <MkButton
v-if="hasMfm && defaultStore.state.animatedMfm" v-if="hasMfm && defaultStore.state.animatedMfm"

16
packages/client/src/components/MkTab.vue
View File

@ -16,10 +16,7 @@ export default defineComponent({
return h( return h(
"div", "div",
{ {
class: [ class: ["pxhvhrfw", { chips: this.style === "chips" }],
"pxhvhrfw",
{ chips: this.style === "chips" },
],
role: "tablist", role: "tablist",
}, },
options.map((option) => options.map((option) =>
@ -30,7 +27,10 @@ export default defineComponent({
class: "_button", class: "_button",
role: "tab", role: "tab",
key: option.key, key: option.key,
'aria-selected': this.modelValue === option.props?.value ? "true" : "false", "aria-selected":
this.modelValue === option.props?.value
? "true"
: "false",
onClick: () => { onClick: () => {
this.$emit( this.$emit(
"update:modelValue", "update:modelValue",
@ -87,7 +87,7 @@ export default defineComponent({
&.chips { &.chips {
padding: 12px 32px; padding: 12px 32px;
font-size: .85em; font-size: 0.85em;
overflow-x: auto; overflow-x: auto;
> button { > button {
display: flex; display: flex;
@ -96,11 +96,11 @@ export default defineComponent({
flex: unset; flex: unset;
margin: 0; margin: 0;
margin-right: 8px; margin-right: 8px;
padding: .5em 1em; padding: 0.5em 1em;
border-radius: 100px; border-radius: 100px;
background: var(--buttonBg); background: var(--buttonBg);
> i { > i {
margin-top: -.1em; margin-top: -0.1em;
} }
} }
} }

5
packages/client/src/components/MkTutorialDialog.vue
View File

@ -103,7 +103,10 @@
</template> </template>
</I18n> </I18n>
<br /> <br />
<XPostForm class="post-form _block" :show-mfm-cheat-sheet="false"/> <XPostForm
class="post-form _block"
:show-mfm-cheat-sheet="false"
/>
</section> </section>
<section <section
v-else-if="tutorial === 4" v-else-if="tutorial === 4"

8
packages/client/src/components/MkUserCardMini.vue
View File

@ -29,7 +29,8 @@ import MkMiniChart from "@/components/MkMiniChart.vue";
import * as os from "@/os"; import * as os from "@/os";
import { acct, userPage } from "@/filters/user"; import { acct, userPage } from "@/filters/user";
const props = withDefaults(defineProps<{ const props = withDefaults(
defineProps<{
user: misskey.entities.User; user: misskey.entities.User;
withChart?: boolean; withChart?: boolean;
}>(), }>(),
@ -63,7 +64,7 @@ if (props.withChart) {
padding: 16px; padding: 16px;
background: var(--panel); background: var(--panel);
border-radius: 8px; border-radius: 8px;
transition: background .2s; transition: background 0.2s;
> :global(.avatar) { > :global(.avatar) {
display: block; display: block;
@ -104,7 +105,8 @@ if (props.withChart) {
height: 30px; height: 30px;
} }
&:hover, &:focus { &:hover,
&:focus {
background: var(--panelHighlight); background: var(--panelHighlight);
} }

1
packages/client/src/components/global/MkA.vue
View File

@ -99,7 +99,6 @@ function popout() {
function nav(ev: MouseEvent) { function nav(ev: MouseEvent) {
if (!ev.ctrlKey && props.behavior !== "browser") { if (!ev.ctrlKey && props.behavior !== "browser") {
ev.preventDefault(); ev.preventDefault();
if (props.behavior) { if (props.behavior) {

8
packages/client/src/pages/note.vue
View File

@ -27,7 +27,9 @@
v-if="!showNext && hasNext" v-if="!showNext && hasNext"
class="load next" class="load next"
@click="showNext = true" @click="showNext = true"
v-tooltip="`${i18n.ts.loadMore} (${i18n.ts.newer})`" v-tooltip="
`${i18n.ts.loadMore} (${i18n.ts.newer})`
"
><i class="ph-caret-up ph-bold ph-lg"></i ><i class="ph-caret-up ph-bold ph-lg"></i
></MkButton> ></MkButton>
<div class="note _gap"> <div class="note _gap">
@ -45,7 +47,9 @@
v-if="!showPrev && hasPrev" v-if="!showPrev && hasPrev"
class="load prev" class="load prev"
@click="showPrev = true" @click="showPrev = true"
v-tooltip="`${i18n.ts.loadMore} (${i18n.ts.older})`" v-tooltip="
`${i18n.ts.loadMore} (${i18n.ts.older})`
"
><i class="ph-caret-down ph-bold ph-lg"></i ><i class="ph-caret-down ph-bold ph-lg"></i
></MkButton> ></MkButton>
</div> </div>