heartles/egirlskey
1
0
Fork 0
Code Issues 1 Pull requests Projects Releases Packages Wiki Activity

merge: Another batch of UI tweaks (!393)

Browse source 
View MR for information: https://activitypub.software/TransFem-org/Sharkey/-/merge_requests/393

Approved-by: Amelia Yukii <amelia.yukii@shourai.de>
Approved-by: Marie <marie@kaifa.ch>
Approved-by: dakkar <dakkar@thenautilus.net>
This commit is contained in:
Amelia Yukii 2024-02-04 12:31:02 +00:00
commit a149211bb4
15 changed files with 94 additions and 86 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
packages/frontend/src/components/MkLink.vue
View file

@ -7,6 +7,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<component
:is="self ? 'MkA' : 'a'" ref="el" style="word-break: break-all;" class="_link" :[attr]="self ? url.substring(local.length) : url" :rel="rel ?? 'nofollow noopener'" :target="target"
:title="url"
@click.stop
>
<slot></slot>
<i v-if="target === '_blank'" class="ph-arrow-square-out ph-bold ph-lg" :class="$style.icon"></i>

3
packages/frontend/src/components/MkMediaAudio.vue
View file

@ -32,6 +32,9 @@ SPDX-License-Identifier: AGPL-3.0-only
</button>
</div>
<div :class="[$style.controlsChild, $style.controlsRight]">
<a class="_button" :class="$style.controlButton" :href="audio.url" :download="audio.name" target="_blank">
<i class="ph-download ph-bold ph-lg"></i>
</a>
<button class="_button" :class="$style.controlButton" @click="showMenu">
<i class="ph-gear ph-bold ph-lg"></i>
</button>

6
packages/frontend/src/components/MkMediaVideo.vue
View file

@ -51,8 +51,11 @@ SPDX-License-Identifier: AGPL-3.0-only
</button>
</div>
<div :class="[$style.controlsChild, $style.controlsRight]">
<a class="_button" :class="$style.controlButton" :href="video.url" :download="video.name" target="_blank">
<i class="ph-download ph-bold ph-lg"></i>
</a>
<button class="_button" :class="$style.controlButton" @click="showMenu">
<i class="ph-settings ph-bold ph-lg"></i>
<i class="ph-gear ph-bold ph-lg"></i>
</button>
<button class="_button" :class="$style.controlButton" @click="toggleFullscreen">
<i v-if="isFullscreen" class="ph-arrows-in ph-bold ph-lg"></i>
@ -427,7 +430,6 @@ onDeactivated(() => {
display: block;
height: 100%;
width: 100%;
pointer-events: none;
}
.videoOverlayPlayButton {

1
packages/frontend/src/components/MkMention.vue
View file

@ -51,6 +51,7 @@ const avatarUrl = computed(() => defaultStore.state.disableShowingAnimatedImages
padding: 4px 8px 4px 4px;
border-radius: var(--radius-ellipse);
color: var(--mention);
white-space: nowrap;
&.isMe {
color: var(--mentionMe);

10
packages/frontend/src/components/MkNote.vue
View file

@ -49,7 +49,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<article v-else :class="$style.article" @contextmenu.stop="onContextmenu">
<div v-if="appearNote.channel" :class="$style.colorBar" :style="{ background: appearNote.channel.color }"></div>
<MkAvatar :class="$style.avatar" :user="appearNote.user" :link="!mock" :preview="!mock"/>
<div :class="[$style.main, { [$style.clickToOpen]: defaultStore.state.clickToOpen }]" @click="defaultStore.state.clickToOpen ? noteclick(appearNote.id) : undefined">
<div :class="[$style.main, { [$style.clickToOpen]: defaultStore.state.clickToOpen }]" @click.stop="defaultStore.state.clickToOpen ? noteclick(appearNote.id) : undefined">
<MkNoteHeader :note="appearNote" :mini="true" @click.stop/>
<MkInstanceTicker v-if="showTicker" :instance="appearNote.user.instance"/>
<div style="container-type: inline-size;">
@ -854,12 +854,13 @@ function emitUpdReaction(emoji: string, delta: number) {
}
.footer {
display: flex;
align-items: center;
justify-content: space-between;
position: relative;
z-index: 1;
margin-top: 0.4em;
width: max-content;
min-width: min-content;
max-width: fit-content;
max-width: 400px;
}
&:hover > .article > .main > .footer > .footerButton {
@ -1278,5 +1279,6 @@ function emitUpdReaction(emoji: string, delta: number) {
.clickToOpen {
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
</style>

2
packages/frontend/src/components/MkNoteSimple.vue
View file

@ -14,7 +14,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<MkCwButton v-model="showContent" :text="note.text" :files="note.files" :poll="note.poll" @click.stop/>
</p>
<div v-show="note.cw == null || showContent">
<MkSubNoteContent :hideFiles="hideFiles" :class="$style.text" :note="note"/>
<MkSubNoteContent :hideFiles="hideFiles" :class="$style.text" :note="note" :expandAllCws="props.expandAllCws"/>
</div>
</div>
</div>

2
packages/frontend/src/components/MkNoteSub.vue
View file

@ -16,7 +16,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<MkCwButton v-model="showContent" :text="note.text" :files="note.files" :poll="note.poll"/>
</p>
<div v-show="note.cw == null || showContent">
<MkSubNoteContent :class="$style.text" :note="note" :translating="translating" :translation="translation"/>
<MkSubNoteContent :class="$style.text" :note="note" :translating="translating" :translation="translation" :expandAllCws="props.expandAllCws"/>
</div>
</div>
<footer :class="$style.footer">

14
packages/frontend/src/components/MkSubNoteContent.vue
View file

@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<template>
<div :class="[$style.root, { [$style.collapsed]: collapsed }]">
<div :class="{ [$style.clickToOpen]: defaultStore.state.clickToOpen }" @click="defaultStore.state.clickToOpen ? noteclick(note.id) : undefined">
<div :class="{ [$style.clickToOpen]: defaultStore.state.clickToOpen }" @click.stop="defaultStore.state.clickToOpen ? noteclick(note.id) : undefined">
<span v-if="note.isHidden" style="opacity: 0.5">({{ i18n.ts.private }})</span>
<span v-if="note.deletedAt" style="opacity: 0.5">({{ i18n.ts.deletedNote }})</span>
<MkA v-if="note.replyId" :class="$style.reply" :to="`/notes/${note.replyId}`" @click.stop><i class="ph-arrow-bend-left-up ph-bold ph-lg"></i></MkA>
@ -29,17 +29,17 @@ SPDX-License-Identifier: AGPL-3.0-only
<summary>{{ i18n.ts.poll }}</summary>
<MkPoll :noteId="note.id" :poll="note.poll"/>
</details>
<button v-if="isLong && collapsed" :class="$style.fade" class="_button" @click="collapsed = false">
<button v-if="isLong && collapsed" :class="$style.fade" class="_button" @click.stop="collapsed = false">
<span :class="$style.fadeLabel">{{ i18n.ts.showMore }}</span>
</button>
<button v-else-if="isLong && !collapsed" :class="$style.showLess" class="_button" @click="collapsed = true">
<button v-else-if="isLong && !collapsed" :class="$style.showLess" class="_button" @click.stop="collapsed = true">
<span :class="$style.showLessLabel">{{ i18n.ts.showLess }}</span>
</button>
</div>
</template>
<script lang="ts" setup>
import { ref, computed } from 'vue';
import { ref, computed, watch } from 'vue';
import * as Misskey from 'misskey-js';
import * as mfm from '@transfem-org/sfm-js';
import MkMediaList from '@/components/MkMediaList.vue';
@ -57,6 +57,7 @@ const props = defineProps<{
translating?: boolean;
translation?: any;
hideFiles?: boolean;
expandAllCws?: boolean;
}>();
const router = useRouter();
@ -87,6 +88,10 @@ function animatedMFM() {
}
const collapsed = ref(isLong);
watch(() => props.expandAllCws, (expandAllCws) => {
if (expandAllCws) collapsed.value = false;
});
</script>
<style lang="scss" module>
@ -165,5 +170,6 @@ const collapsed = ref(isLong);
.clickToOpen {
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
</style>

10
packages/frontend/src/components/SkNote.vue
View file

@ -54,7 +54,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<SkNoteHeader :note="appearNote" :mini="true"/>
</div>
</div>
<div :class="[{ [$style.clickToOpen]: defaultStore.state.clickToOpen }]" @click="defaultStore.state.clickToOpen ? noteclick(appearNote.id) : undefined">
<div :class="[{ [$style.clickToOpen]: defaultStore.state.clickToOpen }]" @click.stop="defaultStore.state.clickToOpen ? noteclick(appearNote.id) : undefined">
<div style="container-type: inline-size;">
<p v-if="appearNote.cw != null" :class="$style.cw">
<Mfm v-if="appearNote.cw != ''" style="margin-right: 8px;" :text="appearNote.cw" :author="appearNote.user" :nyaize="'respect'"/>
@ -855,12 +855,13 @@ function emitUpdReaction(emoji: string, delta: number) {
}
.footer {
display: flex;
align-items: center;
justify-content: space-between;
position: relative;
z-index: 1;
margin-top: 0.4em;
width: max-content;
min-width: min-content;
max-width: fit-content;
max-width: 400px;
}
&:hover > .article > .main > .footer > .footerButton {
@ -1312,5 +1313,6 @@ function emitUpdReaction(emoji: string, delta: number) {
.clickToOpen {
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
</style>

42
packages/frontend/src/components/SkNoteDetailed.vue
View file

@ -40,9 +40,9 @@ SPDX-License-Identifier: AGPL-3.0-only
</div>
</div>
<template v-if="appearNote.reply && appearNote.reply.replyId">
<SkNoteSub v-for="note in conversation" :key="note.id" :class="$style.replyToMore" :note="note" :expandAllCws="props.expandAllCws"/>
<SkNoteSub v-for="note in conversation" :key="note.id" :class="$style.replyToMore" :note="note" :expandAllCws="props.expandAllCws" detailed/>
</template>
<SkNoteSub v-if="appearNote.reply" :note="appearNote.reply" :class="$style.replyTo" :expandAllCws="props.expandAllCws"/>
<SkNoteSub v-if="appearNote.reply" :note="appearNote.reply" :class="$style.replyTo" :expandAllCws="props.expandAllCws" detailed/>
<article :id="appearNote.id" ref="noteEl" :class="$style.note" tabindex="-1" @contextmenu.stop="onContextmenu">
<header :class="$style.noteHeader">
<MkAvatar :class="$style.noteHeaderAvatar" :user="appearNote.user" indicator link preview/>
@ -112,16 +112,16 @@ SPDX-License-Identifier: AGPL-3.0-only
</div>
<MkA v-if="appearNote.channel && !inChannel" :class="$style.channel" :to="`/channels/${appearNote.channel.id}`"><i class="ph-television ph-bold ph-lg"></i> {{ appearNote.channel.name }}</MkA>
</div>
<footer :class="$style.footer">
<div :class="$style.noteFooterInfo">
<div v-if="appearNote.updatedAt">
{{ i18n.ts.edited }}: <MkTime :time="appearNote.updatedAt" mode="detail"/>
</div>
<MkA :to="notePage(appearNote)">
<MkTime :time="appearNote.createdAt" mode="detail" colored/>
</MkA>
<div :class="$style.noteFooterInfo">
<div v-if="appearNote.updatedAt">
{{ i18n.ts.edited }}: <MkTime :time="appearNote.updatedAt" mode="detail"/>
</div>
<MkReactionsViewer ref="reactionsViewer" :note="appearNote"/>
<MkA :to="notePage(appearNote)">
<MkTime :time="appearNote.createdAt" mode="detail" colored/>
</MkA>
</div>
<MkReactionsViewer ref="reactionsViewer" :note="appearNote"/>
<footer :class="$style.footer">
<button class="_button" :class="$style.noteFooterButton" @click="reply()">
<i class="ph-arrow-u-up-left ph-bold ph-lg"></i>
<p v-if="appearNote.repliesCount > 0" :class="$style.noteFooterButtonCount">{{ appearNote.repliesCount }}</p>
@ -178,7 +178,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<div v-if="!repliesLoaded" style="padding: 16px">
<MkButton style="margin: 0 auto;" primary rounded @click="loadReplies">{{ i18n.ts.loadReplies }}</MkButton>
</div>
<SkNoteSub v-for="note in replies" :key="note.id" :note="note" :class="$style.reply" :detail="true" :expandAllCws="props.expandAllCws" :onDeleteCallback="removeReply"/>
<SkNoteSub v-for="note in replies" :key="note.id" :note="note" :class="$style.reply" :detail="true" :expandAllCws="props.expandAllCws" :onDeleteCallback="removeReply" :isReply="true"/>
</div>
<div v-else-if="tab === 'renotes'" :class="$style.tab_renotes">
<MkPagination :pagination="renotesPagination" :disableAutoLoad="true">
@ -195,7 +195,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<div v-if="!quotesLoaded" style="padding: 16px">
<MkButton style="margin: 0 auto;" primary rounded @click="loadQuotes">{{ i18n.ts.loadReplies }}</MkButton>
</div>
<SkNoteSub v-for="note in quotes" :key="note.id" :note="note" :class="$style.reply" :detail="true" :expandAllCws="props.expandAllCws"/>
<SkNoteSub v-for="note in quotes" :key="note.id" :note="note" :class="$style.reply" :detail="true" :expandAllCws="props.expandAllCws" :reply="true"/>
</div>
<div v-else-if="tab === 'reactions'" :class="$style.tab_reactions">
<div :class="$style.reactionTabs">
@ -836,12 +836,13 @@ onUnmounted(() => {
}
.footer {
display: flex;
align-items: center;
justify-content: space-between;
position: relative;
z-index: 1;
margin-top: 0.4em;
width: max-content;
min-width: min-content;
max-width: fit-content;
max-width: 400px;
}
.replyTo {
@ -849,7 +850,7 @@ onUnmounted(() => {
}
.replyToMore {
}
.renote {
@ -1081,10 +1082,17 @@ onUnmounted(() => {
}
.tab {
display: flex;
align-items: center;
justify-content: center;
flex: 1;
padding: 12px 8px;
border-top: solid 2px transparent;
border-bottom: solid 2px transparent;
> i {
margin-right: 8px;
}
}
.tabActive {

7
packages/frontend/src/components/SkNoteSimple.vue
View file

@ -14,7 +14,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<MkCwButton v-model="showContent" :text="note.text" :files="note.files" :poll="note.poll" @click.stop/>
</p>
<div v-show="note.cw == null || showContent">
<MkSubNoteContent :hideFiles="hideFiles" :class="$style.text" :note="note"/>
<MkSubNoteContent :hideFiles="hideFiles" :class="$style.text" :note="note" :expandAllCws="props.expandAllCws"/>
</div>
</div>
</div>
@ -48,6 +48,11 @@ watch(() => props.expandAllCws, (expandAllCws) => {
margin: 0;
padding: 0;
font-size: 0.95em;
&:hover, &:focus-within {
background: var(--panelHighlight);
transition: background .2s;
}
}
.avatar {

74
packages/frontend/src/components/SkNoteSub.vue
View file

@ -4,7 +4,7 @@ SPDX-License-Identifier: AGPL-3.0-only
-->
<template>
<div v-show="!isDeleted" v-if="!muted" ref="el" :class="[$style.root, { [$style.children]: depth > 1 }]">
<div v-show="!isDeleted" v-if="!muted" ref="el" :class="[$style.root, { [$style.children]: depth > 1, [$style.isReply]: props.isReply, [$style.detailed]: props.detailed }]">
<div v-if="!hideLine" :class="$style.line"></div>
<div :class="$style.main">
<div v-if="note.channel" :class="$style.colorBar" :style="{ background: note.channel.color }"></div>
@ -24,11 +24,11 @@ SPDX-License-Identifier: AGPL-3.0-only
<MkCwButton v-model="showContent" :text="note.text" :files="note.files" :poll="note.poll"/>
</p>
<div v-show="note.cw == null || showContent">
<MkSubNoteContent :class="$style.text" :note="note" :translating="translating" :translation="translation"/>
<MkSubNoteContent :class="$style.text" :note="note" :translating="translating" :translation="translation" :expandAllCws="props.expandAllCws"/>
</div>
</div>
<MkReactionsViewer ref="reactionsViewer" :note="note"/>
<footer :class="$style.footer">
<MkReactionsViewer ref="reactionsViewer" :note="note"/>
<button class="_button" :class="$style.noteFooterButton" @click="reply()">
<i class="ph-arrow-u-up-left ph-bold ph-lg"></i>
<p v-if="note.repliesCount > 0" :class="$style.noteFooterButtonCount">{{ note.repliesCount }}</p>
@ -73,7 +73,7 @@ SPDX-License-Identifier: AGPL-3.0-only
</div>
</div>
<template v-if="depth < numberOfReplies">
<SkNoteSub v-for="reply in replies" :key="reply.id" :note="reply" :class="[$style.reply, { [$style.single]: replies.length === 1 }]" :detail="true" :depth="depth + 1" :expandAllCws="props.expandAllCws" :onDeleteCallback="removeReply"/>
<SkNoteSub v-for="reply in replies" :key="reply.id" :note="reply" :class="[$style.reply, { [$style.single]: replies.length === 1 }]" :detail="true" :depth="depth + 1" :expandAllCws="props.expandAllCws" :onDeleteCallback="removeReply" :isReply="props.isReply"/>
</template>
<div v-else :class="$style.more">
<MkA class="_link" :to="notePage(note)">{{ i18n.ts.continueThread }} <i class="ph-caret-double-right ph-bold ph-lg"></i></MkA>
@ -125,8 +125,13 @@ const props = withDefaults(defineProps<{
// how many notes are in between this one and the note being viewed in detail
depth?: number;
isReply?: boolean;
detailed?: boolean;
}>(), {
depth: 1,
isReply: false,
detailed: false,
});
const el = shallowRef<HTMLElement>();
@ -439,7 +444,12 @@ if (props.detail) {
--reply-indent: calc(.5 * var(--avatar));
&.children {
padding: 10px 0 0 16px;
padding: 10px 0 0 8px;
}
&.isReply {
/* @link https://utopia.fyi/clamp/calculator?a=450,580,26—36 */
--avatar: clamp(26px, -8.6154px + 7.6923cqi, 36px);
}
}
@ -453,19 +463,20 @@ if (props.detail) {
}
.footer {
display: flex;
align-items: center;
justify-content: space-between;
position: relative;
z-index: 1;
margin-top: 0.4em;
width: max-content;
min-width: min-content;
max-width: fit-content;
max-width: 400px;
}
.main {
position: relative;
display: flex;
&::after {
:is(.detailed, .replyRoot) &::after {
content: "";
position: absolute;
top: -12px;
@ -478,9 +489,9 @@ if (props.detail) {
transition: opacity .2s, background .2s;
z-index: -1;
}
&:hover::after,
&:focus-within::after {
:is(.detailed, .replyRoot) &:hover::after,
:is(.detailed, .replyRoot) &:focus-within::after {
opacity: 1;
}
}
@ -528,10 +539,6 @@ if (props.detail) {
padding-top: 10px;
opacity: 0.7;
&:not(:last-child) {
margin-right: 1.5em;
}
&:hover {
color: var(--fgHighlighted);
}
@ -610,10 +617,6 @@ if (props.detail) {
@container (max-width: 480px) {
.root {
padding: 22px 24px;
&.children {
padding: 10px 0 0 8px;
}
}
.line {
@ -683,35 +686,4 @@ if (props.detail) {
border-bottom: unset;
}
}
@container (max-width: 580px) {
.threadLine, .reply {
margin-left: 25px;
}
.reply::before {
height: 45px;
}
.single::before {
left: 25px;
}
.single {
margin-left: 0;
}
}
@container (max-width: 450px) {
.threadLine, .reply {
margin-left: 23px;
}
.reply::before {
height: 43px;
}
.single::before {
left: 23px;
width: 9px;
}
.single {
margin-left: 0;
}
}
</style>

1
packages/frontend/src/components/global/MkUrl.vue
View file

@ -7,6 +7,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<component
:is="self ? 'MkA' : 'a'" ref="el" :class="$style.root" class="_link" :[attr]="self ? props.url.substring(local.length) : props.url" :rel="rel ?? 'nofollow noopener'" :target="target"
@contextmenu.stop="() => {}"
@click.stop
>
<template v-if="!self">
<span :class="$style.schema">{{ schema }}//</span>

3
packages/frontend/src/index.html
View file

@ -27,10 +27,11 @@
/>
<meta property="og:site_name" content="[DEV BUILD] Misskey" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="theme-color-orig" content="#86b300">
</head>
<body>
<div id="misskey_app"></div>
<div id="sharkey_app"></div>
<script type="module" src="./_dev_boot_.ts"></script>
</body>
</html>

4
packages/frontend/src/style.scss
View file

@ -253,6 +253,10 @@ rt {
line-height: inherit;
max-width: 100%;
&:hover {
text-decoration: none;
}
&:focus-visible {
outline: none;
}