Merge pull request 'Tweak note tabs + add follow button to header + other minor stuff' (#10172) from Freeplay/calckey:notes into develop
Reviewed-on: https://codeberg.org/calckey/calckey/pulls/10172
This commit is contained in:
Kainoa Kanter
commit
47b122536b
|
|
@ -57,7 +57,7 @@ sendMessage: "Send a message"
|
|||
copyUsername: "Copy username"
|
||||
searchUser: "Search for a user"
|
||||
reply: "Reply"
|
||||
jumpToReply: "Jump to Reply"
|
||||
jumpToPrevious: "Jump to previous"
|
||||
loadMore: "Load more"
|
||||
showMore: "Show more"
|
||||
newer: "newer"
|
||||
|
|
|
|||
|
|
@ -111,11 +111,12 @@ function onMousedown(evt: MouseEvent): void {
|
|||
z-index: 1; // 他コンポーネントのbox-shadowに隠されないようにするため
|
||||
display: block;
|
||||
min-width: 100px;
|
||||
min-height: 35px;
|
||||
width: max-content;
|
||||
padding: 8px 16px;
|
||||
text-align: center;
|
||||
font-weight: normal;
|
||||
font-size: 1em;
|
||||
font-size: max(12px, 1em);
|
||||
box-shadow: none;
|
||||
text-decoration: none;
|
||||
background: var(--buttonBg);
|
||||
|
|
@ -193,7 +194,7 @@ function onMousedown(evt: MouseEvent): void {
|
|||
|
||||
&.mini {
|
||||
padding: 4px 8px;
|
||||
font-size: 0.9em;
|
||||
font-size: max(12px, .9em);
|
||||
border-radius: 100px;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
<template>
|
||||
<button
|
||||
class="kpoogebi _button"
|
||||
v-if="$i != null && $i.id != user.id"
|
||||
class="kpoogebi _button follow-button"
|
||||
:class="{
|
||||
wait,
|
||||
active: isFollowing || hasPendingFollowRequestFromYou,
|
||||
|
|
@ -10,40 +11,41 @@
|
|||
}"
|
||||
:disabled="wait"
|
||||
@click="onClick"
|
||||
:aria-label=" `${state} ${user.name || user.username}` "
|
||||
>
|
||||
<template v-if="!wait">
|
||||
<template v-if="isBlocking">
|
||||
<span v-if="full">{{ i18n.ts.blocked }}</span
|
||||
<span v-if="full">{{ state = i18n.ts.blocked }}</span
|
||||
><i class="ph-prohibit ph-bold ph-lg"></i>
|
||||
</template>
|
||||
<template
|
||||
v-else-if="hasPendingFollowRequestFromYou && user.isLocked"
|
||||
>
|
||||
<span v-if="full">{{ i18n.ts.followRequestPending }}</span
|
||||
<span v-if="full">{{ state = i18n.ts.followRequestPending }}</span
|
||||
><i class="ph-hourglass-medium ph-bold ph-lg"></i>
|
||||
</template>
|
||||
<template
|
||||
v-else-if="hasPendingFollowRequestFromYou && !user.isLocked"
|
||||
>
|
||||
<!-- つまりリモートフォローの場合。 -->
|
||||
<span v-if="full">{{ i18n.ts.processing }}</span
|
||||
<span v-if="full">{{ state = i18n.ts.processing }}</span
|
||||
><i class="ph-circle-notch ph-bold ph-lg fa-pulse"></i>
|
||||
</template>
|
||||
<template v-else-if="isFollowing">
|
||||
<span v-if="full">{{ i18n.ts.unfollow }}</span
|
||||
<span v-if="full">{{ state = i18n.ts.unfollow }}</span
|
||||
><i class="ph-minus ph-bold ph-lg"></i>
|
||||
</template>
|
||||
<template v-else-if="!isFollowing && user.isLocked">
|
||||
<span v-if="full">{{ i18n.ts.followRequest }}</span
|
||||
<span v-if="full">{{ state = i18n.ts.followRequest }}</span
|
||||
><i class="ph-plus ph-bold ph-lg"></i>
|
||||
</template>
|
||||
<template v-else-if="!isFollowing && !user.isLocked">
|
||||
<span v-if="full">{{ i18n.ts.follow }}</span
|
||||
<span v-if="full">{{ state = i18n.ts.follow }}</span
|
||||
><i class="ph-plus ph-bold ph-lg"></i>
|
||||
</template>
|
||||
</template>
|
||||
<template v-else>
|
||||
<span v-if="full">{{ i18n.ts.processing }}</span
|
||||
<span v-if="full">{{ state = i18n.ts.processing }}</span
|
||||
><i class="ph-circle-notch ph-bold ph-lg fa-pulse ph-fw ph-lg"></i>
|
||||
</template>
|
||||
</button>
|
||||
|
|
@ -55,6 +57,7 @@ import type * as Misskey from "calckey-js";
|
|||
import * as os from "@/os";
|
||||
import { stream } from "@/stream";
|
||||
import { i18n } from "@/i18n";
|
||||
import { $i } from "@/account";
|
||||
|
||||
const emit = defineEmits(["refresh"]);
|
||||
const props = withDefaults(
|
||||
|
|
@ -71,6 +74,8 @@ const props = withDefaults(
|
|||
|
||||
const isBlocking = computed(() => props.user.isBlocking);
|
||||
|
||||
let state = $ref(i18n.ts.processing);
|
||||
|
||||
let isFollowing = $ref(props.user.isFollowing);
|
||||
let hasPendingFollowRequestFromYou = $ref(
|
||||
props.user.hasPendingFollowRequestFromYou
|
||||
|
|
@ -155,7 +160,7 @@ onBeforeUnmount(() => {
|
|||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.kpoogebi {
|
||||
.follow-button {
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
|
|
@ -164,13 +169,15 @@ onBeforeUnmount(() => {
|
|||
color: var(--accent);
|
||||
border: solid 1px var(--accent);
|
||||
padding: 0;
|
||||
height: 31px;
|
||||
font-size: 16px;
|
||||
border-radius: 32px;
|
||||
width: 2em;
|
||||
height: 2em;
|
||||
border-radius: 100px;
|
||||
background: var(--bg);
|
||||
|
||||
&.full {
|
||||
padding: 0 8px 0 12px;
|
||||
padding: 0.2em .7em;
|
||||
width: auto;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
|
|
@ -207,7 +214,7 @@ onBeforeUnmount(() => {
|
|||
}
|
||||
|
||||
&.active {
|
||||
color: #fff;
|
||||
color: var(--fgOnAccent);
|
||||
background: var(--accent);
|
||||
|
||||
&:hover {
|
||||
|
|
|
|||
|
|
@ -34,39 +34,29 @@
|
|||
></MkNote>
|
||||
|
||||
<MkTab v-model="tab" :style="'underline'" @update:modelValue="loadTab">
|
||||
<option value="replies">
|
||||
<option value="replies" v-if="appearNote.repliesCount > 0">
|
||||
<i class="ph-arrow-u-up-left ph-bold ph-lg"></i>
|
||||
<template v-if="appearNote.repliesCount > 0">
|
||||
<span class="count">{{ appearNote.repliesCount }}</span>
|
||||
</template>
|
||||
<span class="count">{{ appearNote.repliesCount }}</span>
|
||||
{{ i18n.ts._notification._types.reply }}
|
||||
</option>
|
||||
<option value="renotes">
|
||||
<option value="renotes" v-if="appearNote.renoteCount > 0">
|
||||
<i class="ph-repeat ph-bold ph-lg"></i>
|
||||
<template v-if="appearNote.renoteCount > 0">
|
||||
<span class="count">{{ appearNote.renoteCount }}</span>
|
||||
</template>
|
||||
<span class="count">{{ appearNote.renoteCount }}</span>
|
||||
{{ i18n.ts._notification._types.renote }}
|
||||
</option>
|
||||
<option value="quotes">
|
||||
<i class="ph-quotes ph-bold ph-lg"></i>
|
||||
<template v-if="directQuotes?.length > 0">
|
||||
<span class="count">{{ directQuotes.length }}</span>
|
||||
</template>
|
||||
{{ i18n.ts._notification._types.quote }}
|
||||
</option>
|
||||
<option value="reactions">
|
||||
<option value="reactions" v-if="reactionsCount > 0">
|
||||
<i class="ph-smiley ph-bold ph-lg"></i>
|
||||
<template v-if="reactionsCount > 0">
|
||||
<span class="count">{{ reactionsCount }}</span>
|
||||
</template>
|
||||
<span class="count">{{ reactionsCount }}</span>
|
||||
{{ i18n.ts.reaction }}
|
||||
</option>
|
||||
<option value="clips">
|
||||
<option value="quotes" v-if="directQuotes?.length > 0">
|
||||
<i class="ph-quotes ph-bold ph-lg"></i>
|
||||
<span class="count">{{ directQuotes.length }}</span>
|
||||
{{ i18n.ts._notification._types.quote }}
|
||||
</option>
|
||||
<option value="clips" v-if="clips?.length > 0">
|
||||
<i class="ph-paperclip ph-bold ph-lg"></i>
|
||||
<template v-if="clips?.length > 0">
|
||||
<span class="count">{{ clips.length }}</span>
|
||||
</template>
|
||||
<span class="count">{{ clips.length }}</span>
|
||||
{{ i18n.ts.clips }}
|
||||
</option>
|
||||
</MkTab>
|
||||
|
|
@ -518,6 +508,10 @@ 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;
|
||||
|
|
@ -632,7 +626,7 @@ onUnmounted(() => {
|
|||
}
|
||||
|
||||
> :deep(.note-container) {
|
||||
padding: 6px 0 0 0;
|
||||
padding: 12px 0 0 0;
|
||||
> .header > .body {
|
||||
padding-left: 10px;
|
||||
}
|
||||
|
|
@ -642,7 +636,7 @@ onUnmounted(() => {
|
|||
> :deep(.reacted-users > *) {
|
||||
padding-inline: 16px !important;
|
||||
}
|
||||
> .chips {
|
||||
> :deep(.underline) {
|
||||
padding-left: 16px !important;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div
|
||||
<article
|
||||
v-if="!muted.muted || muted.what === 'reply'"
|
||||
ref="el"
|
||||
v-size="{ max: [450, 500] }"
|
||||
|
|
@ -150,7 +150,7 @@
|
|||
></MkA>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</article>
|
||||
<div v-else class="muted" @click="muted.muted = false">
|
||||
<I18n :src="softMuteReasonI18nSrc(muted.what)" tag="small">
|
||||
<template #name>
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@
|
|||
!note.replyId
|
||||
"
|
||||
:to="`/notes/${note.renoteId}`"
|
||||
v-tooltip="i18n.ts.jumpToReply"
|
||||
v-tooltip="i18n.ts.jumpToPrevious"
|
||||
class="reply-icon"
|
||||
@click.stop
|
||||
>
|
||||
|
|
@ -70,7 +70,7 @@
|
|||
v-if="!detailed && note.replyId"
|
||||
:to="`#${note.replyId}`"
|
||||
behavior="browser"
|
||||
v-tooltip="i18n.ts.jumpToReply"
|
||||
v-tooltip="i18n.ts.jumpToPrevious"
|
||||
class="reply-icon"
|
||||
@click.stop
|
||||
>
|
||||
|
|
|
|||
|
|
@ -86,6 +86,10 @@ export default defineComponent({
|
|||
> .icon {
|
||||
margin-right: 6px;
|
||||
}
|
||||
|
||||
&:empty {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
&.chips, &.underline {
|
||||
|
|
@ -124,6 +128,7 @@ export default defineComponent({
|
|||
&.underline {
|
||||
padding-block: 0 !important;
|
||||
margin-bottom: -1px;
|
||||
border-radius: 0;
|
||||
button {
|
||||
background: none !important;
|
||||
border-radius: 0 !important;
|
||||
|
|
|
|||
|
|
@ -85,6 +85,18 @@
|
|||
</nav>
|
||||
</template>
|
||||
<div class="buttons right">
|
||||
<template v-if="metadata.avatar">
|
||||
<MkFollowButton
|
||||
v-if="narrow"
|
||||
:user="metadata.avatar"
|
||||
:full="false"
|
||||
></MkFollowButton>
|
||||
<MkFollowButton
|
||||
v-else
|
||||
:user="metadata.avatar"
|
||||
:full="true"
|
||||
></MkFollowButton>
|
||||
</template>
|
||||
<template v-for="action in actions">
|
||||
<button
|
||||
v-tooltip.noDelay="action.text"
|
||||
|
|
@ -113,6 +125,7 @@ import {
|
|||
reactive,
|
||||
} from "vue";
|
||||
import tinycolor from "tinycolor2";
|
||||
import MkFollowButton from "@/components/MkFollowButton.vue";
|
||||
import { popupMenu } from "@/os";
|
||||
import { scrollToTop } from "@/scripts/scroll";
|
||||
import { globalEvents } from "@/events";
|
||||
|
|
@ -379,6 +392,9 @@ onUnmounted(() => {
|
|||
|
||||
&.right {
|
||||
margin-left: auto;
|
||||
:deep(.follow-button) {
|
||||
margin-right: 6px;
|
||||
}
|
||||
}
|
||||
|
||||
&:empty {
|
||||
|
|
|
|||
|
|
@ -27,11 +27,10 @@
|
|||
v-if="!showNext && hasNext"
|
||||
class="load next"
|
||||
@click="showNext = true"
|
||||
v-tooltip="
|
||||
`${i18n.ts.loadMore} (${i18n.ts.newer})`
|
||||
"
|
||||
><i class="ph-caret-up ph-bold ph-lg"></i
|
||||
></MkButton>
|
||||
>
|
||||
<i class="ph-caret-up ph-bold ph-lg"></i>
|
||||
{{ `${i18n.ts.loadMore} (${i18n.ts.newer})` }}
|
||||
</MkButton>
|
||||
<div class="note _gap">
|
||||
<MkRemoteCaution
|
||||
v-if="note.user.host != null"
|
||||
|
|
@ -47,11 +46,10 @@
|
|||
v-if="!showPrev && hasPrev"
|
||||
class="load prev"
|
||||
@click="showPrev = true"
|
||||
v-tooltip="
|
||||
`${i18n.ts.loadMore} (${i18n.ts.older})`
|
||||
"
|
||||
><i class="ph-caret-down ph-bold ph-lg"></i
|
||||
></MkButton>
|
||||
>
|
||||
<i class="ph-caret-down ph-bold ph-lg"></i>
|
||||
{{ `${i18n.ts.loadMore} (${i18n.ts.older})` }}
|
||||
</MkButton>
|
||||
</div>
|
||||
|
||||
<div v-if="showPrev" class="_gap">
|
||||
|
|
|
|||
|
|
@ -135,7 +135,6 @@
|
|||
<div class="follow-container">
|
||||
<div class="actions">
|
||||
<MkFollowButton
|
||||
v-if="$i != null && $i.id != user.id"
|
||||
:user="user"
|
||||
@refresh="emit('refresh')"
|
||||
:inline="true"
|
||||
|
|
|
|||
Loading…
Reference in New Issue