Make position of other replies button a pref

This commit is contained in:
Tusooa Zhu 2021-09-05 16:35:47 -04:00
parent c4bd004cbc
commit 863255d52f
No known key found for this signature in database
GPG key ID: 7B467EDE43A08224
8 changed files with 63 additions and 17 deletions

View file

@ -92,6 +92,15 @@ const conversation = {
isLinearView () { isLinearView () {
return this.displayStyle === 'linear' return this.displayStyle === 'linear'
}, },
otherRepliesButtonPosition () {
return this.$store.getters.mergedConfig.conversationOtherRepliesButton
},
showOtherRepliesButtonBelowStatus () {
return this.otherRepliesButtonPosition === 'below'
},
showOtherRepliesButtonInsideStatus () {
return this.otherRepliesButtonPosition === 'inside'
},
hideStatus () { hideStatus () {
if (this.$refs.statusComponent && this.$refs.statusComponent[0]) { if (this.$refs.statusComponent && this.$refs.statusComponent[0]) {
return this.virtualHidden && this.$refs.statusComponent[0].suspendable return this.virtualHidden && this.$refs.statusComponent[0].suspendable

View file

@ -66,13 +66,14 @@
:profile-user-id="profileUserId" :profile-user-id="profileUserId"
class="conversation-status status-fadein panel-body" class="conversation-status status-fadein panel-body"
:simple="treeViewIsSimple" :simple-tree="treeViewIsSimple"
:toggle-thread-display="toggleThreadDisplay" :toggle-thread-display="toggleThreadDisplay"
:thread-display-status="threadDisplayStatus" :thread-display-status="threadDisplayStatus"
:show-thread-recursively="showThreadRecursively" :show-thread-recursively="showThreadRecursively"
:total-reply-count="totalReplyCount" :total-reply-count="totalReplyCount"
:total-reply-depth="totalReplyDepth" :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-showing-tall="statusContentProperties[status.id].showingTall"
:controlled-expanding-subject="statusContentProperties[status.id].expandingSubject" :controlled-expanding-subject="statusContentProperties[status.id].expandingSubject"
@ -85,7 +86,7 @@
@toggleExpanded="toggleExpanded" @toggleExpanded="toggleExpanded"
/> />
<div <div
v-if="getReplies(status.id).length > 1" v-if="showOtherRepliesButtonBelowStatus && getReplies(status.id).length > 1"
class="thread-ancestor-dive-box" class="thread-ancestor-dive-box"
> >
<div <div

View file

@ -25,6 +25,11 @@ const GeneralTab = {
value: mode, value: mode,
label: this.$t(`settings.conversation_display_${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 => ({ mentionLinkDisplayOptions: ['short', 'full_for_remote', 'full'].map(mode => ({
key: mode, key: mode,
value: mode, value: mode,

View file

@ -161,19 +161,33 @@
{{ $t('settings.conversation_display') }} {{ $t('settings.conversation_display') }}
</ChoiceSetting> </ChoiceSetting>
</li> </li>
<li v-if="conversationDisplay !== 'linear'"> <ul
<label for="maxDepthInThread"> v-if="conversationDisplay !== 'linear'"
{{ $t('settings.max_depth_in_thread') }} class="setting-list suboptions"
</label> >
<input <li>
id="maxDepthInThread" <label for="maxDepthInThread">
path.number="maxDepthInThread" {{ $t('settings.max_depth_in_thread') }}
class="number-input" </label>
type="number" <input
min="3" id="maxDepthInThread"
step="1" path.number="maxDepthInThread"
> class="number-input"
</li> 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> <li>
<ChoiceSetting <ChoiceSetting
id="mentionLinkDisplay" id="mentionLinkDisplay"

View file

@ -100,6 +100,7 @@ const Status = {
'simpleTree', 'simpleTree',
'controlledThreadDisplayStatus', 'controlledThreadDisplayStatus',
'controlledToggleThreadDisplay', 'controlledToggleThreadDisplay',
'showOtherRepliesAsButton',
'controlledShowingTall', 'controlledShowingTall',
'controlledToggleShowingTall', 'controlledToggleShowingTall',

View file

@ -346,7 +346,20 @@
v-if="inConversation && !isPreview && replies && replies.length" v-if="inConversation && !isPreview && replies && replies.length"
class="replies" 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 <StatusPopover
v-for="reply in replies" v-for="reply in replies"
:key="reply.id" :key="reply.id"

View file

@ -13,6 +13,7 @@ export const multiChoiceProperties = [
'postContentType', 'postContentType',
'subjectLineBehavior', 'subjectLineBehavior',
'conversationDisplay', // tree | linear 'conversationDisplay', // tree | linear
'conversationOtherRepliesButton', // below | inside
'mentionLinkDisplay' // short | full_for_remote | full 'mentionLinkDisplay' // short | full_for_remote | full
] ]
@ -84,6 +85,7 @@ export const defaultState = {
virtualScrolling: undefined, // instance default virtualScrolling: undefined, // instance default
sensitiveByDefault: undefined, // instance default sensitiveByDefault: undefined, // instance default
conversationDisplay: undefined, // instance default conversationDisplay: undefined, // instance default
conversationOtherRepliesButton: undefined, // instance default
maxDepthInThread: 6 maxDepthInThread: 6
} }

View file

@ -54,6 +54,7 @@ const defaultState = {
virtualScrolling: true, virtualScrolling: true,
sensitiveByDefault: false, sensitiveByDefault: false,
conversationDisplay: 'simple_tree', conversationDisplay: 'simple_tree',
conversationOtherRepliesButton: 'below',
maxDepthInThread: 6, maxDepthInThread: 6,
// Nasty stuff // Nasty stuff