mirrors/barkey
1
0
Fork 0
mirror of https://codeberg.org/yeentown/barkey.git synced 2025-07-07 20:44:34 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

merge: Allow note footer bar to shrink responsively and scroll on overflow (resolves #1057) (!1094)

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

Closes #1057

Approved-by: dakkar <dakkar@thenautilus.net>
Approved-by: Marie <github@yuugi.dev>
This commit is contained in:
Hazelnoot 2025-06-05 11:55:18 +00:00
commit c6874c4983
10 changed files with 48 additions and 169 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
locales/index.d.ts vendored
View file

@ -13241,6 +13241,10 @@ export interface Locale extends ILocale {
* Enabled (copy CW and prepend "RE:") * Enabled (copy CW and prepend "RE:")
*/ */
"keepCwPrependRe": string; "keepCwPrependRe": string;
/**
* Note controls
*/
"noteFooterLabel": string;
} }
declare const locales: { declare const locales: {
[lang: string]: Locale; [lang: string]: Locale;

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

@ -113,7 +113,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<MkA :to="`/notes/${appearNote.id}/reactions`" :class="[$style.reactionOmitted]">{{ i18n.ts.more }}</MkA> <MkA :to="`/notes/${appearNote.id}/reactions`" :class="[$style.reactionOmitted]">{{ i18n.ts.more }}</MkA>
</template> </template>
</MkReactionsViewer> </MkReactionsViewer>
<footer :class="$style.footer"> <footer :class="$style.footer" class="_gaps _h_gaps" tabindex="0" role="group" :aria-label="i18n.ts.noteFooterLabel">
<button :class="$style.footerButton" class="_button" @click.stop @click="reply()"> <button :class="$style.footerButton" class="_button" @click.stop @click="reply()">
<i class="ti ti-arrow-back-up"></i> <i class="ti ti-arrow-back-up"></i>
<p v-if="appearNote.repliesCount > 0" :class="$style.footerButtonCount">{{ number(appearNote.repliesCount) }}</p> <p v-if="appearNote.repliesCount > 0" :class="$style.footerButtonCount">{{ number(appearNote.repliesCount) }}</p>
@ -913,11 +913,11 @@ function emitUpdReaction(emoji: string, delta: number) {
.footer { .footer {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: flex-start;
position: relative; position: relative;
z-index: 1; z-index: 1;
margin-top: 0.4em; margin-top: 0.4em;
max-width: 400px; overflow-x: auto;
} }
&:hover > .article > .main > .footer > .footerButton { &:hover > .article > .main > .footer > .footerButton {
@ -1203,10 +1203,6 @@ function emitUpdReaction(emoji: string, delta: number) {
padding: 8px; padding: 8px;
opacity: 0.7; opacity: 0.7;
&:not(:last-child) {
margin-right: 1.5em;
}
&:hover { &:hover {
color: var(--MI_THEME-fgHighlighted); color: var(--MI_THEME-fgHighlighted);
} }
@ -1290,25 +1286,7 @@ function emitUpdReaction(emoji: string, delta: number) {
} }
} }
@container (max-width: 400px) {
.root:not(.showActionsOnlyHover) {
.footerButton {
&:not(:last-child) {
margin-right: 0.2em;
}
}
}
}
@container (max-width: 350px) { @container (max-width: 350px) {
.root:not(.showActionsOnlyHover) {
.footerButton {
&:not(:last-child) {
margin-right: 0.1em;
}
}
}
.colorBar { .colorBar {
top: 6px; top: 6px;
left: 6px; left: 6px;

30
packages/frontend/src/components/MkNoteDetailed.vue
View file

@ -118,7 +118,7 @@ SPDX-License-Identifier: AGPL-3.0-only
</div> </div>
<MkA v-if="appearNote.channel && !inChannel" :class="$style.channel" :to="`/channels/${appearNote.channel.id}`"><i class="ti ti-device-tv"></i> {{ appearNote.channel.name }}</MkA> <MkA v-if="appearNote.channel && !inChannel" :class="$style.channel" :to="`/channels/${appearNote.channel.id}`"><i class="ti ti-device-tv"></i> {{ appearNote.channel.name }}</MkA>
</div> </div>
<footer :class="$style.footer"> <footer :class="$style.footer" class="_gaps _h_gaps" tabindex="0" role="group" :aria-label="i18n.ts.noteFooterLabel">
<div :class="$style.noteFooterInfo"> <div :class="$style.noteFooterInfo">
<div v-if="appearNote.updatedAt"> <div v-if="appearNote.updatedAt">
{{ i18n.ts.edited }}: <MkTime :time="appearNote.updatedAt" mode="detail"/> {{ i18n.ts.edited }}: <MkTime :time="appearNote.updatedAt" mode="detail"/>
@ -886,12 +886,10 @@ function animatedMFM() {
} }
.footer { .footer {
position: relative; position: relative;
z-index: 1; z-index: 1;
margin-top: 0.4em; margin-top: 0.4em;
width: max-content; overflow-x: auto;
min-width: min-content;
max-width: fit-content;
} }
.replyTo { .replyTo {
@ -1083,10 +1081,6 @@ function animatedMFM() {
padding: 8px; padding: 8px;
opacity: 0.7; opacity: 0.7;
&:not(:last-child) {
margin-right: 1.5em;
}
&:hover { &:hover {
color: var(--MI_THEME-fgHighlighted); color: var(--MI_THEME-fgHighlighted);
} }
@ -1169,14 +1163,6 @@ function animatedMFM() {
} }
} }
@container (max-width: 350px) {
.noteFooterButton {
&:not(:last-child) {
margin-right: 0.1em;
}
}
}
@container (max-width: 300px) { @container (max-width: 300px) {
.root { .root {
font-size: 0.825em; font-size: 0.825em;
@ -1186,12 +1172,6 @@ function animatedMFM() {
width: 50px; width: 50px;
height: 50px; height: 50px;
} }
.noteFooterButton {
&:not(:last-child) {
margin-right: 0.1em;
}
}
} }
.muted { .muted {

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

@ -19,7 +19,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<MkSubNoteContent :class="$style.text" :note="note" :translating="translating" :translation="translation" :expandAllCws="props.expandAllCws"/> <MkSubNoteContent :class="$style.text" :note="note" :translating="translating" :translation="translation" :expandAllCws="props.expandAllCws"/>
</div> </div>
</div> </div>
<footer :class="$style.footer"> <footer :class="$style.footer" class="_gaps _h_gaps" tabindex="0" role="group" :aria-label="i18n.ts.noteFooterLabel">
<MkReactionsViewer ref="reactionsViewer" :note="note"/> <MkReactionsViewer ref="reactionsViewer" :note="note"/>
<button class="_button" :class="$style.noteFooterButton" @click="reply()"> <button class="_button" :class="$style.noteFooterButton" @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>
@ -419,12 +419,10 @@ if (props.detail) {
} }
.footer { .footer {
position: relative; position: relative;
z-index: 1; z-index: 1;
margin-top: 0.4em; margin-top: 0.4em;
width: max-content; overflow-x: auto;
min-width: min-content;
max-width: fit-content;
} }
.main { .main {
@ -469,23 +467,11 @@ if (props.detail) {
padding-top: 10px; padding-top: 10px;
opacity: 0.7; opacity: 0.7;
&:not(:last-child) {
margin-right: 1.5em;
}
&:hover { &:hover {
color: var(--MI_THEME-fgHighlighted); color: var(--MI_THEME-fgHighlighted);
} }
} }
@container (max-width: 400px) {
.noteFooterButton {
&:not(:last-child) {
margin-right: 0.7em;
}
}
}
.noteFooterButtonCount { .noteFooterButtonCount {
display: inline; display: inline;
margin: 0 0 0 8px; margin: 0 0 0 8px;

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

@ -114,7 +114,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<MkA :to="`/notes/${appearNote.id}/reactions`" :class="[$style.reactionOmitted]">{{ i18n.ts.more }}</MkA> <MkA :to="`/notes/${appearNote.id}/reactions`" :class="[$style.reactionOmitted]">{{ i18n.ts.more }}</MkA>
</template> </template>
</MkReactionsViewer> </MkReactionsViewer>
<footer :class="$style.footer"> <footer :class="$style.footer" class="_gaps _h_gaps" tabindex="0" role="group" :aria-label="i18n.ts.noteFooterLabel">
<button :class="$style.footerButton" class="_button" @click.stop @click="reply()"> <button :class="$style.footerButton" class="_button" @click.stop @click="reply()">
<i class="ti ti-arrow-back-up"></i> <i class="ti ti-arrow-back-up"></i>
<p v-if="appearNote.repliesCount > 0" :class="$style.footerButtonCount">{{ number(appearNote.repliesCount) }}</p> <p v-if="appearNote.repliesCount > 0" :class="$style.footerButtonCount">{{ number(appearNote.repliesCount) }}</p>
@ -921,11 +921,11 @@ function emitUpdReaction(emoji: string, delta: number) {
.footer { .footer {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: flex-start;
position: relative; position: relative;
z-index: 1; z-index: 1;
margin-top: 0.4em; margin-top: 0.4em;
max-width: 400px; overflow-x: auto;
} }
&:hover > .article > .main > .footer > .footerButton { &:hover > .article > .main > .footer > .footerButton {
@ -947,10 +947,6 @@ function emitUpdReaction(emoji: string, delta: number) {
.footerButton { .footerButton {
font-size: 90%; font-size: 90%;
&:not(:last-child) {
margin-right: 0;
}
} }
} }
@ -1238,10 +1234,6 @@ function emitUpdReaction(emoji: string, delta: number) {
padding: 8px; padding: 8px;
opacity: 0.7; opacity: 0.7;
&:not(:last-child) {
margin-right: 1.5em;
}
&:hover { &:hover {
color: var(--MI_THEME-fgHighlighted); color: var(--MI_THEME-fgHighlighted);
} }
@ -1358,25 +1350,7 @@ function emitUpdReaction(emoji: string, delta: number) {
} }
} }
@container (max-width: 400px) {
.root:not(.showActionsOnlyHover) {
.footerButton {
&:not(:last-child) {
margin-right: 0.2em;
}
}
}
}
@container (max-width: 350px) { @container (max-width: 350px) {
.root:not(.showActionsOnlyHover) {
.footerButton {
&:not(:last-child) {
margin-right: 0.1em;
}
}
}
.colorBar { .colorBar {
top: 6px; top: 6px;
left: 6px; left: 6px;
@ -1385,16 +1359,6 @@ function emitUpdReaction(emoji: string, delta: number) {
} }
} }
@container (max-width: 300px) {
.root:not(.showActionsOnlyHover) {
.footerButton {
&:not(:last-child) {
margin-right: 0.1em;
}
}
}
}
@container (max-width: 250px) { @container (max-width: 250px) {
.quoteNote { .quoteNote {
padding: 12px; padding: 12px;

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

@ -132,7 +132,7 @@ SPDX-License-Identifier: AGPL-3.0-only
</MkA> </MkA>
</div> </div>
<MkReactionsViewer v-if="appearNote.reactionAcceptance !== 'likeOnly'" ref="reactionsViewer" style="margin-top: 6px;" :note="appearNote"/> <MkReactionsViewer v-if="appearNote.reactionAcceptance !== 'likeOnly'" ref="reactionsViewer" style="margin-top: 6px;" :note="appearNote"/>
<footer :class="$style.footer"> <footer :class="$style.footer" class="_gaps _h_gaps" tabindex="0" role="group" :aria-label="i18n.ts.noteFooterLabel">
<button class="_button" :class="$style.noteFooterButton" @click="reply()"> <button class="_button" :class="$style.noteFooterButton" @click="reply()">
<i class="ti ti-arrow-back-up"></i> <i class="ti ti-arrow-back-up"></i>
<p v-if="appearNote.repliesCount > 0" :class="$style.noteFooterButtonCount">{{ number(appearNote.repliesCount) }}</p> <p v-if="appearNote.repliesCount > 0" :class="$style.noteFooterButtonCount">{{ number(appearNote.repliesCount) }}</p>
@ -918,13 +918,13 @@ onUnmounted(() => {
} }
.footer { .footer {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: flex-start;
position: relative; position: relative;
z-index: 1; z-index: 1;
margin-top: 0.4em; margin-top: 0.4em;
max-width: 400px; overflow-x: auto;
} }
.replyTo { .replyTo {
@ -1141,10 +1141,6 @@ onUnmounted(() => {
padding: 8px; padding: 8px;
opacity: 0.7; opacity: 0.7;
&:not(:last-child) {
margin-right: 1.5em;
}
&:hover { &:hover {
color: var(--MI_THEME-fgHighlighted); color: var(--MI_THEME-fgHighlighted);
} }
@ -1234,14 +1230,6 @@ onUnmounted(() => {
} }
} }
@container (max-width: 350px) {
.noteFooterButton {
&:not(:last-child) {
margin-right: 0.1em;
}
}
}
@container (max-width: 300px) { @container (max-width: 300px) {
.root { .root {
font-size: 0.825em; font-size: 0.825em;
@ -1251,12 +1239,6 @@ onUnmounted(() => {
width: 50px; width: 50px;
height: 50px; height: 50px;
} }
.noteFooterButton {
&:not(:last-child) {
margin-right: 0.1em;
}
}
} }
.avatar { .avatar {

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

@ -28,7 +28,7 @@ SPDX-License-Identifier: AGPL-3.0-only
</div> </div>
</div> </div>
<MkReactionsViewer ref="reactionsViewer" :note="note"/> <MkReactionsViewer ref="reactionsViewer" :note="note"/>
<footer :class="$style.footer"> <footer :class="$style.footer" class="_gaps _h_gaps" tabindex="0" role="group" :aria-label="i18n.ts.noteFooterLabel">
<button class="_button" :class="$style.noteFooterButton" @click="reply()"> <button class="_button" :class="$style.noteFooterButton" @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>
<p v-if="note.repliesCount > 0" :class="$style.noteFooterButtonCount">{{ note.repliesCount }}</p> <p v-if="note.repliesCount > 0" :class="$style.noteFooterButtonCount">{{ note.repliesCount }}</p>
@ -449,11 +449,11 @@ if (props.detail) {
.footer { .footer {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: flex-start;
position: relative; position: relative;
z-index: 1; z-index: 1;
margin-top: 0.4em; margin-top: 0.4em;
max-width: 400px; overflow-x: auto;
} }
.main { .main {
@ -559,14 +559,6 @@ if (props.detail) {
} }
} }
@container (max-width: 400px) {
.noteFooterButton {
&:not(:last-child) {
margin-right: 0.7em;
}
}
}
.noteFooterButtonCount { .noteFooterButtonCount {
display: inline; display: inline;
margin: 0 0 0 8px; margin: 0 0 0 8px;

31
packages/frontend/src/components/SkOldNoteWindow.vue
View file

@ -52,7 +52,7 @@ SPDX-License-Identifier: AGPL-3.0-only
</div> </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> <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> </div>
<footer :class="$style.footer"> <footer :class="$style.footer" class="_gaps _h_gaps" tabindex="0" role="group" :aria-label="i18n.ts.noteFooterLabel">
<div :class="$style.noteFooterInfo"> <div :class="$style.noteFooterInfo">
<MkTime :time="appearNote.createdAt" mode="detail"/> <MkTime :time="appearNote.createdAt" mode="detail"/>
</div> </div>
@ -163,11 +163,12 @@ const showTicker = (prefer.s.instanceTicker === 'always') || (prefer.s.instanceT
} }
.footer { .footer {
position: relative; position: relative;
z-index: 1; z-index: 1;
margin-top: 0.4em; margin-top: 0.4em;
width: max-content; width: max-content;
min-width: max-content; min-width: max-content;
overflow-x: auto;
} }
.note { .note {
@ -280,23 +281,11 @@ const showTicker = (prefer.s.instanceTicker === 'always') || (prefer.s.instanceT
padding: 8px; padding: 8px;
opacity: 0.7; opacity: 0.7;
&:not(:last-child) {
margin-right: 1.5em;
}
&:hover { &:hover {
color: var(--MI_THEME-fgHighlighted); color: var(--MI_THEME-fgHighlighted);
} }
} }
@container (max-width: 350px) {
.noteFooterButton {
&:not(:last-child) {
margin-right: 0.1em;
}
}
}
@container (max-width: 500px) { @container (max-width: 500px) {
.root { .root {
font-size: 0.9em; font-size: 0.9em;
@ -323,11 +312,5 @@ const showTicker = (prefer.s.instanceTicker === 'always') || (prefer.s.instanceT
width: 50px; width: 50px;
height: 50px; height: 50px;
} }
.noteFooterButton {
&:not(:last-child) {
margin-right: 0.1em;
}
}
} }
</style> </style>

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

@ -428,6 +428,14 @@ rt {
gap: var(--MI-margin); gap: var(--MI-margin);
} }
/**
* Use with _gaps, _gaps_m, or _gaps_s.
* Place the other class *first*!
*/
._h_gaps {
flex-direction: row;
}
._buttons { ._buttons {
display: flex; display: flex;
gap: 8px; gap: 8px;

2
sharkey-locales/en-US.yml
View file

@ -622,3 +622,5 @@ keepCwDescription: "When replying to a post with a Content Warning, automaticall
keepCwDisabled: "Disabled (do not copy CWs)" keepCwDisabled: "Disabled (do not copy CWs)"
keepCwEnabled: "Enabled (copy CWs verbatim)" keepCwEnabled: "Enabled (copy CWs verbatim)"
keepCwPrependRe: "Enabled (copy CW and prepend \"RE:\")" keepCwPrependRe: "Enabled (copy CW and prepend \"RE:\")"
noteFooterLabel: "Note controls"