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

allow note toolbar to scroll

Browse source 
https://developer.mozilla.org/en-US/docs/Web/CSS/overflow#accessibility
This commit is contained in:
Hazelnoot 2025-06-04 15:03:01 -04:00
parent 4d024d1165
commit 25174e837a
9 changed files with 34 additions and 31 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
locales/index.d.ts vendored
View file

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

6
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>
</template>
</MkReactionsViewer>
<footer :class="$style.footer" class="_gaps _h_gaps">
<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()">
<i class="ti ti-arrow-back-up"></i>
<p v-if="appearNote.repliesCount > 0" :class="$style.footerButtonCount">{{ number(appearNote.repliesCount) }}</p>
@ -913,11 +913,11 @@ function emitUpdReaction(emoji: string, delta: number) {
.footer {
display: flex;
align-items: center;
justify-content: space-between;
justify-content: flex-start;
position: relative;
z-index: 1;
margin-top: 0.4em;
max-width: 400px;
overflow-x: auto;
}
&:hover > .article > .main > .footer > .footerButton {

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

@ -118,7 +118,7 @@ SPDX-License-Identifier: AGPL-3.0-only
</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>
</div>
<footer :class="$style.footer" class="_gaps _h_gaps">
<footer :class="$style.footer" class="_gaps _h_gaps" tabindex="0" role="group" :aria-label="i18n.ts.noteFooterLabel">
<div :class="$style.noteFooterInfo">
<div v-if="appearNote.updatedAt">
{{ i18n.ts.edited }}: <MkTime :time="appearNote.updatedAt" mode="detail"/>
@ -889,9 +889,7 @@ function animatedMFM() {
position: relative;
z-index: 1;
margin-top: 0.4em;
width: max-content;
min-width: min-content;
max-width: fit-content;
overflow-x: auto;
}
.replyTo {

6
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"/>
</div>
</div>
<footer :class="$style.footer" class="_gaps _h_gaps">
<footer :class="$style.footer" class="_gaps _h_gaps" tabindex="0" role="group" :aria-label="i18n.ts.noteFooterLabel">
<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>
@ -422,9 +422,7 @@ if (props.detail) {
position: relative;
z-index: 1;
margin-top: 0.4em;
width: max-content;
min-width: min-content;
max-width: fit-content;
overflow-x: auto;
}
.main {

6
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>
</template>
</MkReactionsViewer>
<footer :class="$style.footer" class="_gaps _h_gaps">
<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()">
<i class="ti ti-arrow-back-up"></i>
<p v-if="appearNote.repliesCount > 0" :class="$style.footerButtonCount">{{ number(appearNote.repliesCount) }}</p>
@ -921,11 +921,11 @@ function emitUpdReaction(emoji: string, delta: number) {
.footer {
display: flex;
align-items: center;
justify-content: space-between;
justify-content: flex-start;
position: relative;
z-index: 1;
margin-top: 0.4em;
max-width: 400px;
overflow-x: auto;
}
&:hover > .article > .main > .footer > .footerButton {

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

@ -132,7 +132,7 @@ SPDX-License-Identifier: AGPL-3.0-only
</MkA>
</div>
<MkReactionsViewer v-if="appearNote.reactionAcceptance !== 'likeOnly'" ref="reactionsViewer" style="margin-top: 6px;" :note="appearNote"/>
<footer :class="$style.footer" class="_gaps _h_gaps">
<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()">
<i class="ti ti-arrow-back-up"></i>
<p v-if="appearNote.repliesCount > 0" :class="$style.noteFooterButtonCount">{{ number(appearNote.repliesCount) }}</p>
@ -918,13 +918,13 @@ onUnmounted(() => {
}
.footer {
display: flex;
align-items: center;
justify-content: space-between;
position: relative;
z-index: 1;
margin-top: 0.4em;
max-width: 400px;
display: flex;
align-items: center;
justify-content: flex-start;
position: relative;
z-index: 1;
margin-top: 0.4em;
overflow-x: auto;
}
.replyTo {

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

@ -28,7 +28,7 @@ SPDX-License-Identifier: AGPL-3.0-only
</div>
</div>
<MkReactionsViewer ref="reactionsViewer" :note="note"/>
<footer :class="$style.footer" class="_gaps _h_gaps">
<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()">
<i class="ph-arrow-u-up-left ph-bold ph-lg"></i>
<p v-if="note.repliesCount > 0" :class="$style.noteFooterButtonCount">{{ note.repliesCount }}</p>
@ -449,11 +449,11 @@ if (props.detail) {
.footer {
display: flex;
align-items: center;
justify-content: space-between;
justify-content: flex-start;
position: relative;
z-index: 1;
margin-top: 0.4em;
max-width: 400px;
overflow-x: auto;
}
.main {

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

@ -52,7 +52,7 @@ 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" class="_gaps _h_gaps">
<footer :class="$style.footer" class="_gaps _h_gaps" tabindex="0" role="group" :aria-label="i18n.ts.noteFooterLabel">
<div :class="$style.noteFooterInfo">
<MkTime :time="appearNote.createdAt" mode="detail"/>
</div>
@ -163,11 +163,12 @@ const showTicker = (prefer.s.instanceTicker === 'always') || (prefer.s.instanceT
}
.footer {
position: relative;
z-index: 1;
margin-top: 0.4em;
width: max-content;
min-width: max-content;
position: relative;
z-index: 1;
margin-top: 0.4em;
width: max-content;
min-width: max-content;
overflow-x: auto;
}
.note {

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

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