Page MenuHomePhorge
Files F85804871

No OneTemporary
Actions

Size
11 KB
Referenced Files
None
Subscribers
None

View Options

diff --git a/src/App.scss b/src/App.scss
index 0a6fa90bcd..6d937129a6 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -153,6 +153,13 @@ a {
.button-unstyled {
+ text-decoration: underline dotted var(--icon);
+
+ &:hover,
+ &:focus {
+ text-decoration: underline solid;
+ }
+
&:focus-visible {
border-radius: var(--roundness);
outline: 2px solid var(--text);
@@ -502,11 +509,6 @@ header {
cursor: pointer;
box-sizing: content-box;
color: inherit;
-
- &.-link {
- /* stylelint-disable-next-line declaration-no-important */
- color: var(--link) !important;
- }
}
label {
diff --git a/src/components/activity_header/activity_header.js b/src/components/activity_header/activity_header.js
index ae62c0c29b..e60584ffc3 100644
--- a/src/components/activity_header/activity_header.js
+++ b/src/components/activity_header/activity_header.js
@@ -71,7 +71,7 @@ const ActivityHeader = {
// for notifications
nonMention: Boolean,
},
- emits: ['dive', 'toggleExpanded', 'toggleThreadDisplay', 'toggleMuted'],
+ emits: ['requestFocus', 'toggleExpanded', 'toggleThreadDisplay', 'toggleMuted'],
computed: {
// Whatever we're given to work with
status() {
diff --git a/src/components/activity_header/activity_header.vue b/src/components/activity_header/activity_header.vue
index 082ecc8236..3b81971fc5 100644
--- a/src/components/activity_header/activity_header.vue
+++ b/src/components/activity_header/activity_header.vue
@@ -121,7 +121,7 @@
v-if="!nonMention && expanded && isTreeView && !simpleTree"
class="button-unstyled"
:title="$t('status.show_only_conversation_under_this')"
- @click.prevent="$emit('dive')"
+ @click.prevent="$emit('requestFocus')"
>
<FAIcon
fixed-width
diff --git a/src/components/conversation/conversation.js b/src/components/conversation/conversation.js
index 18a061ee2b..eb8133d733 100644
--- a/src/components/conversation/conversation.js
+++ b/src/components/conversation/conversation.js
@@ -309,8 +309,7 @@ export default {
return linearScrollTo(ids)
}
}
- const diveIntoStatus = (id) => setFocused(id)
- const diveToTopLevel = () => setFocused(currentAncestors.value[0].id)
+ const focusTopLevel = () => setFocused(currentAncestors.value[0].id)
watch(focusedId, async (neu, old) => {
// Ignoring initial update (null -> id) since that is handled by scroll compensation
@@ -372,8 +371,7 @@ export default {
shouldShowAncestors,
// # Scrolling
- diveToTopLevel,
- diveIntoStatus,
+ focusTopLevel,
unsuspendableIds,
}
},
diff --git a/src/components/conversation/conversation.vue b/src/components/conversation/conversation.vue
index 8260635c11..af4709dc44 100644
--- a/src/components/conversation/conversation.vue
+++ b/src/components/conversation/conversation.vue
@@ -22,7 +22,7 @@
</component>
<button
v-if="!isPage"
- class="button-unstyled -link"
+ class="button-unstyled"
@click.prevent="toggleExpanded"
>
{{ $t('timeline.collapse') }}
@@ -72,9 +72,9 @@
<i18n-t
keypath="currentStatus.show_all_conversation_with_icon"
tag="button"
- class="button-unstyled -link"
+ class="button-unstyled"
scope="global"
- @click.prevent="diveToTopLevel"
+ @click.prevent="focusTopLevel"
>
<template #icon>
<FAIcon
@@ -112,8 +112,7 @@
:data-vs-top="element.top"
:data-vs-suspend="element.suspendable"
- @goto="setFocused"
- @dive="diveIntoStatus(element.id)"
+ @request-focus="setFocused"
@toggle-thread-display="toggleThreadDisplay"
@suspendable-state-change="changeSuspendStateAncestorsLocal"
@height-change="updateVirtualHeightAncestors"
@@ -131,8 +130,7 @@
:status-id="focusedId ?? currentStatus.id"
:depth="0"
- @goto="setFocused"
- @dive="diveIntoStatus"
+ @request-focus="setFocused"
@toggle-expanded="toggleExpanded"
@toggle-thread-display="toggleThreadDisplay"
@show-thread-recursively="showThreadRecursively"
@@ -161,7 +159,7 @@
:data-vs-height="element.height"
:data-vs-top="element.top"
- @goto="setFocused"
+ @request-focus="setFocused"
@toggle-expanded="toggleExpanded"
@toggle-thread-display="toggleThreadDisplay"
@suspendable-state-change="changeSuspendStateLinearLocal"
diff --git a/src/components/status/status.js b/src/components/status/status.js
index 159f74f6b4..0059bab3df 100644
--- a/src/components/status/status.js
+++ b/src/components/status/status.js
@@ -118,7 +118,7 @@ const Status = {
},
},
emits: [
- 'dive',
+ 'requestFocus',
'toggleExpanded',
'toggleThreadDisplay',
'suspendableStateChange',
diff --git a/src/components/status/status.scss b/src/components/status/status.scss
index 2a5a8a3115..5e7c03d4aa 100644
--- a/src/components/status/status.scss
+++ b/src/components/status/status.scss
@@ -110,16 +110,21 @@
margin-top: 0.25em;
line-height: 1.3;
font-size: 0.85em;
- display: flex;
- flex-wrap: wrap;
- & > * {
- margin-right: 0.4em;
+ .replies-list {
+ list-style: none;
+ display: inline;
+ margin: 0;
+ padding: 0;
+
+ li {
+ display: inline;
+ }
}
- }
- .reply-link {
- height: 17px;
+ .reply-link {
+ height: 1.2em;
+ }
}
.repeat-info {
diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index 7c73053723..ccbace51bf 100644
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@@ -63,6 +63,7 @@
:title="repeaterName"
>
<router-link
+ class="button-unstyled"
v-if="repeaterHtml"
:to="repeaterProfileLink"
>
@@ -132,10 +133,10 @@
:expanded="isExpanded"
:thread-display-state="threadDisplayState"
+ @request-focus="$emit('requestFocus', mainStatus.id)"
@toggle-muted="toggleMute"
@toggle-expanded="$emit('toggleExpanded')"
@toggle-thread-display="$emit('toggleThreadDisplay')"
- @dive="$emit('dive')"
/>
<div class="activity-subheader">
<div
@@ -194,12 +195,12 @@
<template #replyToWithIcon>
<StatusPopover
v-if="!isPreview"
- :status-id="mainStatus.parent_visible && mainStatus.in_reply_to_status_id"
class="reply-to-popover"
- style="min-width: 0;"
:class="{ '-strikethrough': !mainStatus.parent_visible }"
+ :status-id="mainStatus.parent_visible && mainStatus.in_reply_to_status_id"
+ :link="isPage"
:aria-label="$t('tool_tip.reply')"
- :link="isExpanded"
+ @navigate="$emit('requestFocus', mainStatus.parent_visible && mainStatus.in_reply_to_status_id)"
>
<i18n-t
keypath="status.reply_to_with_icon"
@@ -318,7 +319,7 @@
v-if="showOtherRepliesInside && replies.size > 1"
class="button-unstyled -link"
:title="$t('status.ancestor_follow', { numReplies: replies.size - 1 }, replies.size - 1)"
- @click.prevent="$emit('dive')"
+ @click.prevent="$emit('requestFocus', mainStatus.id)"
>
{{ $t('status.replies_list_with_others', { numReplies: replies.size - 1 }, replies.size - 1) }}
</button>
@@ -330,23 +331,27 @@
>
{{ $t('status.replies_list') }}
</span>
- <span role="list" :aria-label="$t('status.replies_list')">
- <span
+ {{ ' ' }}
+ <ol
+ class="replies-list"
+ :aria-label="$t('status.replies_list')"
+ >
+ <li
v-for="reply in replies.values()"
:key="reply.id"
- role="listitem"
:aria-label="reply.name"
>
<StatusPopover
:status-id="reply.id"
+ :link="isPage"
class="reply-link"
- link
+ @navigate="$emit('requestFocus', reply.id)"
>
{{ reply.name }}
</StatusPopover>
{{ ' ' }}
- </span>
- </span>
+ </li>
+ </ol>
</div>
<Transition name="fade">
diff --git a/src/components/status_popover/status_popover.js b/src/components/status_popover/status_popover.js
index 4c9fd4e13c..12272322ec 100644
--- a/src/components/status_popover/status_popover.js
+++ b/src/components/status_popover/status_popover.js
@@ -13,6 +13,7 @@ const StatusPopover = {
statusId: String,
link: Boolean,
},
+ emits: ['navigate'],
data() {
return {
error: false,
@@ -46,11 +47,15 @@ const StatusPopover = {
}
},
navigate() {
- if (!this.link) return
- this.$router.push({
- name: 'conversation',
- params: { statusId: this.statusId },
- })
+ if (this.link) {
+ this.$router.push({
+ name: 'conversation',
+ params: { statusId: this.statusId },
+ })
+ } else {
+ console.log(this.statusId)
+ this.$emit('navigate', this.statusId)
+ }
},
},
watch: {
diff --git a/src/components/thread_tree/thread_tree.js b/src/components/thread_tree/thread_tree.js
index 6bea1279ac..d6fb9a5493 100644
--- a/src/components/thread_tree/thread_tree.js
+++ b/src/components/thread_tree/thread_tree.js
@@ -18,8 +18,7 @@ const ThreadTree = {
},
emits: [
'suspendableStateChange',
- 'goto',
- 'dive',
+ 'requestFocus',
'toggleExpanded',
'toggleThreadDisplay',
'showThreadRecursively',
@@ -51,9 +50,6 @@ const ThreadTree = {
threadShowing() {
return this.threadDisplay.get(this.status.id) === 'showing'
},
- canDive() {
- return this.isExpanded
- },
},
methods: {
getReplies(id) {
diff --git a/src/components/thread_tree/thread_tree.vue b/src/components/thread_tree/thread_tree.vue
index 6fe9c955bb..84d3a3127f 100644
--- a/src/components/thread_tree/thread_tree.vue
+++ b/src/components/thread_tree/thread_tree.vue
@@ -14,8 +14,7 @@
:conversation-rank="depth === 0 ? 'current' : 'child'"
:thread-display-state="threadDisplay.get(statusId)"
- @dive="$emit('dive', statusId)"
- @goto="$emit('goto', statusId)"
+ @request-focus="(e) => $emit('requestFocus', e)"
@toggle-expanded="$emit('toggleExpanded', statusId)"
@toggle-thread-display="$emit('toggleThreadDisplay', statusId)"
@suspendable-state-change="(e) => $emit('suspendableStateChange', e)"
@@ -30,9 +29,8 @@
:depth="depth + 1"
:status-id="replyStatusId"
+ @request-focus="(e) => $emit('requestFocus', e)"
@show-thread-recursively="(e) => $emit('showThreadRecursively', e)"
- @goto="(e) => $emit('goto', e)"
- @dive="(e) => $emit('dive', e)"
@toggle-thread-display="e => $emit('toggleThreadDisplay', e)"
@suspendable-state-change="e => $emit('suspendableStateChange', e)"
@toggle-expanded="(e) => $emit('toggleExpanded', e)"

File Metadata

Mime Type
text/x-diff
Expires
Sat, Oct 10, 4:08 PM (1 d, 8 h)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
1785346
Default Alt Text
(11 KB)

Event Timeline