commit: 863255d52fdcbbabe45c86c7e36ebafc0f7e1c53
parent c4bd004cbcde96aa438d81c77d00099b1b8937b4
Author: Tusooa Zhu <tusooa@kazv.moe>
Date: Sun, 5 Sep 2021 16:35:47 -0400
Make position of other replies button a pref
Diffstat:
8 files changed, 63 insertions(+), 17 deletions(-)
diff --git a/src/components/conversation/conversation.js b/src/components/conversation/conversation.js
@@ -92,6 +92,15 @@ const conversation = {
isLinearView () {
return this.displayStyle === 'linear'
},
+ otherRepliesButtonPosition () {
+ return this.$store.getters.mergedConfig.conversationOtherRepliesButton
+ },
+ showOtherRepliesButtonBelowStatus () {
+ return this.otherRepliesButtonPosition === 'below'
+ },
+ showOtherRepliesButtonInsideStatus () {
+ return this.otherRepliesButtonPosition === 'inside'
+ },
hideStatus () {
if (this.$refs.statusComponent && this.$refs.statusComponent[0]) {
return this.virtualHidden && this.$refs.statusComponent[0].suspendable
diff --git a/src/components/conversation/conversation.vue b/src/components/conversation/conversation.vue
@@ -66,13 +66,14 @@
:profile-user-id="profileUserId"
class="conversation-status status-fadein panel-body"
- :simple="treeViewIsSimple"
+ :simple-tree="treeViewIsSimple"
:toggle-thread-display="toggleThreadDisplay"
:thread-display-status="threadDisplayStatus"
:show-thread-recursively="showThreadRecursively"
:total-reply-count="totalReplyCount"
:total-reply-depth="totalReplyDepth"
- :dive="(!treeViewIsSimple) ? () => diveIntoStatus(status.id) : null"
+ :show-other-replies-as-button="showOtherRepliesButtonInsideStatus"
+ :dive="() => diveIntoStatus(status.id)"
:controlled-showing-tall="statusContentProperties[status.id].showingTall"
:controlled-expanding-subject="statusContentProperties[status.id].expandingSubject"
@@ -85,7 +86,7 @@
@toggleExpanded="toggleExpanded"
/>
<div
- v-if="getReplies(status.id).length > 1"
+ v-if="showOtherRepliesButtonBelowStatus && getReplies(status.id).length > 1"
class="thread-ancestor-dive-box"
>
<div
diff --git a/src/components/settings_modal/tabs/general_tab.js b/src/components/settings_modal/tabs/general_tab.js
@@ -25,6 +25,11 @@ const GeneralTab = {
value: mode,
label: this.$t(`settings.conversation_display_${mode}`)
})),
+ conversationOtherRepliesButtonOptions: ['below', 'inside'].map(mode => ({
+ key: mode,
+ value: mode,
+ label: this.$t(`settings.conversation_other_replies_button_${mode}`)
+ })),
mentionLinkDisplayOptions: ['short', 'full_for_remote', 'full'].map(mode => ({
key: mode,
value: mode,
diff --git a/src/components/settings_modal/tabs/general_tab.vue b/src/components/settings_modal/tabs/general_tab.vue
@@ -161,19 +161,33 @@
{{ $t('settings.conversation_display') }}
</ChoiceSetting>
</li>
- <li v-if="conversationDisplay !== 'linear'">
- <label for="maxDepthInThread">
- {{ $t('settings.max_depth_in_thread') }}
- </label>
- <input
- id="maxDepthInThread"
- path.number="maxDepthInThread"
- class="number-input"
- type="number"
- min="3"
- step="1"
- >
- </li>
+ <ul
+ v-if="conversationDisplay !== 'linear'"
+ class="setting-list suboptions"
+ >
+ <li>
+ <label for="maxDepthInThread">
+ {{ $t('settings.max_depth_in_thread') }}
+ </label>
+ <input
+ id="maxDepthInThread"
+ path.number="maxDepthInThread"
+ class="number-input"
+ type="number"
+ min="3"
+ step="1"
+ >
+ </li>
+ <li>
+ <ChoiceSetting
+ id="conversationOtherRepliesButton"
+ path="conversationOtherRepliesButton"
+ :options="conversationOtherRepliesButtonOptions"
+ >
+ {{ $t('settings.conversation_other_replies_button') }}
+ </ChoiceSetting>
+ </li>
+ </ul>
<li>
<ChoiceSetting
id="mentionLinkDisplay"
diff --git a/src/components/status/status.js b/src/components/status/status.js
@@ -100,6 +100,7 @@ const Status = {
'simpleTree',
'controlledThreadDisplayStatus',
'controlledToggleThreadDisplay',
+ 'showOtherRepliesAsButton',
'controlledShowingTall',
'controlledToggleShowingTall',
diff --git a/src/components/status/status.vue b/src/components/status/status.vue
@@ -346,7 +346,20 @@
v-if="inConversation && !isPreview && replies && replies.length"
class="replies"
>
- <span class="faint">{{ $t('status.replies_list') }}</span>
+ <button
+ v-if="showOtherRepliesAsButton"
+ class="button-unstyled -link faint"
+ :title="$tc('status.ancestor_follow', replies.length - 1, { numReplies: replies.length - 1 })"
+ @click.prevent="dive"
+ >
+ {{ $t('status.replies_list') }}
+ </button>
+ <span
+ v-else
+ class="faint"
+ >
+ {{ $t('status.replies_list') }}
+ </span>
<StatusPopover
v-for="reply in replies"
:key="reply.id"
diff --git a/src/modules/config.js b/src/modules/config.js
@@ -13,6 +13,7 @@ export const multiChoiceProperties = [
'postContentType',
'subjectLineBehavior',
'conversationDisplay', // tree | linear
+ 'conversationOtherRepliesButton', // below | inside
'mentionLinkDisplay' // short | full_for_remote | full
]
@@ -84,6 +85,7 @@ export const defaultState = {
virtualScrolling: undefined, // instance default
sensitiveByDefault: undefined, // instance default
conversationDisplay: undefined, // instance default
+ conversationOtherRepliesButton: undefined, // instance default
maxDepthInThread: 6
}
diff --git a/src/modules/instance.js b/src/modules/instance.js
@@ -54,6 +54,7 @@ const defaultState = {
virtualScrolling: true,
sensitiveByDefault: false,
conversationDisplay: 'simple_tree',
+ conversationOtherRepliesButton: 'below',
maxDepthInThread: 6,
// Nasty stuff
