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

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 2023-05-22 01:08:21 +00:00
parent 1a076a5956 88f39b2b02
commit 47b122536b
10 changed files with 76 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
locales/en-US.yml
View File

@ -57,7 +57,7 @@ sendMessage: "Send a message"
copyUsername: "Copy username" copyUsername: "Copy username"
searchUser: "Search for a user" searchUser: "Search for a user"
reply: "Reply" reply: "Reply"
jumpToReply: "Jump to Reply" jumpToPrevious: "Jump to previous"
loadMore: "Load more" loadMore: "Load more"
showMore: "Show more" showMore: "Show more"
newer: "newer" newer: "newer"

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

@ -111,11 +111,12 @@ function onMousedown(evt: MouseEvent): void {
z-index: 1; // 他コンポーネントのbox-shadowに隠されないようにするため z-index: 1; // 他コンポーネントのbox-shadowに隠されないようにするため
display: block; display: block;
min-width: 100px; min-width: 100px;
min-height: 35px;
width: max-content; width: max-content;
padding: 8px 16px; padding: 8px 16px;
text-align: center; text-align: center;
font-weight: normal; font-weight: normal;
font-size: 1em; font-size: max(12px, 1em);
box-shadow: none; box-shadow: none;
text-decoration: none; text-decoration: none;
background: var(--buttonBg); background: var(--buttonBg);
@ -193,7 +194,7 @@ function onMousedown(evt: MouseEvent): void {
&.mini { &.mini {
padding: 4px 8px; padding: 4px 8px;
font-size: 0.9em; font-size: max(12px, .9em);
border-radius: 100px; border-radius: 100px;
} }

33
packages/client/src/components/MkFollowButton.vue
View File

@ -1,6 +1,7 @@
<template> <template>
<button <button
class="kpoogebi _button" v-if="$i != null && $i.id != user.id"
class="kpoogebi _button follow-button"
:class="{ :class="{
wait, wait,
active: isFollowing || hasPendingFollowRequestFromYou, active: isFollowing || hasPendingFollowRequestFromYou,
@ -10,40 +11,41 @@
}" }"
:disabled="wait" :disabled="wait"
@click="onClick" @click="onClick"
:aria-label=" `${state} ${user.name || user.username}` "
> >
<template v-if="!wait"> <template v-if="!wait">
<template v-if="isBlocking"> <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> ><i class="ph-prohibit ph-bold ph-lg"></i>
</template> </template>
<template <template
v-else-if="hasPendingFollowRequestFromYou && user.isLocked" 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> ><i class="ph-hourglass-medium ph-bold ph-lg"></i>
</template> </template>
<template <template
v-else-if="hasPendingFollowRequestFromYou && !user.isLocked" 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> ><i class="ph-circle-notch ph-bold ph-lg fa-pulse"></i>
</template> </template>
<template v-else-if="isFollowing"> <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> ><i class="ph-minus ph-bold ph-lg"></i>
</template> </template>
<template v-else-if="!isFollowing && user.isLocked"> <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> ><i class="ph-plus ph-bold ph-lg"></i>
</template> </template>
<template v-else-if="!isFollowing && !user.isLocked"> <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> ><i class="ph-plus ph-bold ph-lg"></i>
</template> </template>
</template> </template>
<template v-else> <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> ><i class="ph-circle-notch ph-bold ph-lg fa-pulse ph-fw ph-lg"></i>
</template> </template>
</button> </button>
@ -55,6 +57,7 @@ import type * as Misskey from "calckey-js";
import * as os from "@/os"; import * as os from "@/os";
import { stream } from "@/stream"; import { stream } from "@/stream";
import { i18n } from "@/i18n"; import { i18n } from "@/i18n";
import { $i } from "@/account";
const emit = defineEmits(["refresh"]); const emit = defineEmits(["refresh"]);
const props = withDefaults( const props = withDefaults(
@ -71,6 +74,8 @@ const props = withDefaults(
const isBlocking = computed(() => props.user.isBlocking); const isBlocking = computed(() => props.user.isBlocking);
let state = $ref(i18n.ts.processing);
let isFollowing = $ref(props.user.isFollowing); let isFollowing = $ref(props.user.isFollowing);
let hasPendingFollowRequestFromYou = $ref( let hasPendingFollowRequestFromYou = $ref(
props.user.hasPendingFollowRequestFromYou props.user.hasPendingFollowRequestFromYou
@ -155,7 +160,7 @@ onBeforeUnmount(() => {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.kpoogebi { .follow-button {
position: relative; position: relative;
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
@ -164,13 +169,15 @@ onBeforeUnmount(() => {
color: var(--accent); color: var(--accent);
border: solid 1px var(--accent); border: solid 1px var(--accent);
padding: 0; padding: 0;
height: 31px;
font-size: 16px; font-size: 16px;
border-radius: 32px; width: 2em;
height: 2em;
border-radius: 100px;
background: var(--bg); background: var(--bg);
&.full { &.full {
padding: 0 8px 0 12px; padding: 0.2em .7em;
width: auto;
font-size: 14px; font-size: 14px;
} }
@ -207,7 +214,7 @@ onBeforeUnmount(() => {
} }
&.active { &.active {
color: #fff; color: var(--fgOnAccent);
background: var(--accent); background: var(--accent);
&:hover { &:hover {

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

@ -34,39 +34,29 @@
></MkNote> ></MkNote>
<MkTab v-model="tab" :style="'underline'" @update:modelValue="loadTab"> <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> <i class="ph-arrow-u-up-left ph-bold ph-lg"></i>
<template v-if="appearNote.repliesCount > 0"> <span class="count">{{ appearNote.repliesCount }}</span>
<span class="count">{{ appearNote.repliesCount }}</span>
</template>
{{ i18n.ts._notification._types.reply }} {{ i18n.ts._notification._types.reply }}
</option> </option>
<option value="renotes"> <option value="renotes" v-if="appearNote.renoteCount > 0">
<i class="ph-repeat ph-bold ph-lg"></i> <i class="ph-repeat ph-bold ph-lg"></i>
<template v-if="appearNote.renoteCount > 0"> <span class="count">{{ appearNote.renoteCount }}</span>
<span class="count">{{ appearNote.renoteCount }}</span>
</template>
{{ i18n.ts._notification._types.renote }} {{ i18n.ts._notification._types.renote }}
</option> </option>
<option value="quotes"> <option value="reactions" v-if="reactionsCount > 0">
<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">
<i class="ph-smiley ph-bold ph-lg"></i> <i class="ph-smiley ph-bold ph-lg"></i>
<template v-if="reactionsCount > 0"> <span class="count">{{ reactionsCount }}</span>
<span class="count">{{ reactionsCount }}</span>
</template>
{{ i18n.ts.reaction }} {{ i18n.ts.reaction }}
</option> </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> <i class="ph-paperclip ph-bold ph-lg"></i>
<template v-if="clips?.length > 0"> <span class="count">{{ clips.length }}</span>
<span class="count">{{ clips.length }}</span>
</template>
{{ i18n.ts.clips }} {{ i18n.ts.clips }}
</option> </option>
</MkTab> </MkTab>
@ -518,6 +508,10 @@ onUnmounted(() => {
overflow: clip; overflow: clip;
outline: none; outline: none;
scroll-margin-top: calc(var(--stickyTop) + 20vh); scroll-margin-top: calc(var(--stickyTop) + 20vh);
&:not(:last-child) {
border-bottom: 1px solid var(--divider);
margin-bottom: 4px;
}
.article { .article {
cursor: unset; cursor: unset;
padding-bottom: 0; padding-bottom: 0;
@ -632,7 +626,7 @@ onUnmounted(() => {
} }
> :deep(.note-container) { > :deep(.note-container) {
padding: 6px 0 0 0; padding: 12px 0 0 0;
> .header > .body { > .header > .body {
padding-left: 10px; padding-left: 10px;
} }
@ -642,7 +636,7 @@ onUnmounted(() => {
> :deep(.reacted-users > *) { > :deep(.reacted-users > *) {
padding-inline: 16px !important; padding-inline: 16px !important;
} }
> .chips { > :deep(.underline) {
padding-left: 16px !important; padding-left: 16px !important;
} }
} }

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

@ -1,5 +1,5 @@
<template> <template>
<div <article
v-if="!muted.muted || muted.what === 'reply'" v-if="!muted.muted || muted.what === 'reply'"
ref="el" ref="el"
v-size="{ max: [450, 500] }" v-size="{ max: [450, 500] }"
@ -150,7 +150,7 @@
></MkA> ></MkA>
</div> </div>
</template> </template>
</div> </article>
<div v-else class="muted" @click="muted.muted = false"> <div v-else class="muted" @click="muted.muted = false">
<I18n :src="softMuteReasonI18nSrc(muted.what)" tag="small"> <I18n :src="softMuteReasonI18nSrc(muted.what)" tag="small">
<template #name> <template #name>

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

@ -17,7 +17,7 @@
!note.replyId !note.replyId
" "
:to="`/notes/${note.renoteId}`" :to="`/notes/${note.renoteId}`"
v-tooltip="i18n.ts.jumpToReply" v-tooltip="i18n.ts.jumpToPrevious"
class="reply-icon" class="reply-icon"
@click.stop @click.stop
> >
@ -70,7 +70,7 @@
v-if="!detailed && note.replyId" v-if="!detailed && note.replyId"
:to="`#${note.replyId}`" :to="`#${note.replyId}`"
behavior="browser" behavior="browser"
v-tooltip="i18n.ts.jumpToReply" v-tooltip="i18n.ts.jumpToPrevious"
class="reply-icon" class="reply-icon"
@click.stop @click.stop
> >

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

@ -86,6 +86,10 @@ export default defineComponent({
> .icon { > .icon {
margin-right: 6px; margin-right: 6px;
} }
&:empty {
display: none !important;
}
} }
&.chips, &.underline { &.chips, &.underline {
@ -124,6 +128,7 @@ export default defineComponent({
&.underline { &.underline {
padding-block: 0 !important; padding-block: 0 !important;
margin-bottom: -1px; margin-bottom: -1px;
border-radius: 0;
button { button {
background: none !important; background: none !important;
border-radius: 0 !important; border-radius: 0 !important;

16
packages/client/src/components/global/MkPageHeader.vue
View File

@ -85,6 +85,18 @@
</nav> </nav>
</template> </template>
<div class="buttons right"> <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"> <template v-for="action in actions">
<button <button
v-tooltip.noDelay="action.text" v-tooltip.noDelay="action.text"
@ -113,6 +125,7 @@ import {
reactive, reactive,
} from "vue"; } from "vue";
import tinycolor from "tinycolor2"; import tinycolor from "tinycolor2";
import MkFollowButton from "@/components/MkFollowButton.vue";
import { popupMenu } from "@/os"; import { popupMenu } from "@/os";
import { scrollToTop } from "@/scripts/scroll"; import { scrollToTop } from "@/scripts/scroll";
import { globalEvents } from "@/events"; import { globalEvents } from "@/events";
@ -379,6 +392,9 @@ onUnmounted(() => {
&.right { &.right {
margin-left: auto; margin-left: auto;
:deep(.follow-button) {
margin-right: 6px;
}
} }
&:empty { &:empty {

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

@ -27,11 +27,10 @@
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})` <i class="ph-caret-up ph-bold ph-lg"></i>
" {{ `${i18n.ts.loadMore} (${i18n.ts.newer})` }}
><i class="ph-caret-up ph-bold ph-lg"></i </MkButton>
></MkButton>
<div class="note _gap"> <div class="note _gap">
<MkRemoteCaution <MkRemoteCaution
v-if="note.user.host != null" v-if="note.user.host != null"
@ -47,11 +46,10 @@
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})` <i class="ph-caret-down ph-bold ph-lg"></i>
" {{ `${i18n.ts.loadMore} (${i18n.ts.older})` }}
><i class="ph-caret-down ph-bold ph-lg"></i </MkButton>
></MkButton>
</div> </div>
<div v-if="showPrev" class="_gap"> <div v-if="showPrev" class="_gap">

1
packages/client/src/pages/user/home.vue
View File

@ -135,7 +135,6 @@
<div class="follow-container"> <div class="follow-container">
<div class="actions"> <div class="actions">
<MkFollowButton <MkFollowButton
v-if="$i != null && $i.id != user.id"
:user="user" :user="user"
@refresh="emit('refresh')" @refresh="emit('refresh')"
:inline="true" :inline="true"