diff --git a/src/components/conversation/conversation.js b/src/components/conversation/conversation.js
index 6fc86b2c..584f310c 100644
--- a/src/components/conversation/conversation.js
+++ b/src/components/conversation/conversation.js
@@ -2,6 +2,17 @@ import { reduce, filter, findIndex, clone, get } from 'lodash'
import Status from '../status/status.vue'
import ThreadTree from '../thread_tree/thread_tree.vue'
+import { library } from '@fortawesome/fontawesome-svg-core'
+import {
+ faAngleDoubleDown,
+ faAngleDoubleLeft
+} from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+ faAngleDoubleDown,
+ faAngleDoubleLeft
+)
+
// const debug = console.log
const debug = () => {}
@@ -41,7 +52,8 @@ const conversation = {
highlight: null,
expanded: false,
threadDisplayStatusObject: {}, // id => 'showing' | 'hidden'
- statusContentPropertiesObject: {}
+ statusContentPropertiesObject: {},
+ diveRoot: null
}
},
props: [
@@ -195,6 +207,18 @@ const conversation = {
debug("toplevel =", topLevel)
return topLevel
},
+ showingTopLevel () {
+ if (this.diveRoot) {
+ return [this.conversation.filter(k => this.diveRoot === k.id)[0]]
+ }
+ return this.topLevel
+ },
+ diveDepth () {
+ return this.diveRoot ? this.depths[this.diveRoot] : 0
+ },
+ diveMode () {
+ return !!this.diveRoot
+ },
replies () {
let i = 1
// eslint-disable-next-line camelcase
@@ -359,6 +383,12 @@ const conversation = {
},
toggleStatusContentProperty (id, name) {
this.setStatusContentProperty(id, name, !this.statusContentProperties[id][name])
+ },
+ diveIntoStatus (id) {
+ this.diveRoot = id
+ },
+ undive () {
+ this.diveRoot = null
}
}
}
diff --git a/src/components/conversation/conversation.vue b/src/components/conversation/conversation.vue
index 08cb72d0..84e8d8b2 100644
--- a/src/components/conversation/conversation.vue
+++ b/src/components/conversation/conversation.vue
@@ -18,9 +18,22 @@
{{ $t('timeline.collapse') }}
+
+
+
+
+
@@ -65,6 +79,16 @@
:in-profile="inProfile"
:profile-user-id="profileUserId"
class="conversation-status status-fadein panel-body"
+
+ :toggle-thread-display="toggleThreadDisplay"
+ :thread-display-status="threadDisplayStatus"
+ :show-thread-recursively="showThreadRecursively"
+ :total-reply-count="totalReplyCount"
+ :total-reply-depth="totalReplyDepth"
+ :status-content-properties="statusContentProperties"
+ :set-status-content-property="setStatusContentProperty"
+ :toggle-status-content-property="toggleStatusContentProperty"
+
@goto="setHighlight"
@toggleExpanded="toggleExpanded"
/>
@@ -82,6 +106,10 @@
@import '../../_variables.scss';
.Conversation {
+ .conversation-undive-box {
+ padding: 1em;
+ }
+ .conversation-undive-box,
.conversation-status {
border-bottom-width: 1px;
border-bottom-style: solid;
diff --git a/src/components/status/status.js b/src/components/status/status.js
index d5ee7d4e..f119f42e 100644
--- a/src/components/status/status.js
+++ b/src/components/status/status.js
@@ -36,8 +36,9 @@ import {
faEyeSlash,
faEye,
faThumbtack,
- faAngleDoubleUp,
- faAngleDoubleDown
+ faChevronUp,
+ faChevronDown,
+ faAngleDoubleRight
} from '@fortawesome/free-solid-svg-icons'
library.add(
@@ -55,8 +56,9 @@ library.add(
faEyeSlash,
faEye,
faThumbtack,
- faAngleDoubleUp,
- faAngleDoubleDown
+ faChevronUp,
+ faChevronDown,
+ faAngleDoubleRight
)
const Status = {
@@ -103,7 +105,8 @@ const Status = {
'controlledExpandingSubject',
'controlledToggleExpandingSubject',
'controlledShowingLongSubject',
- 'controlledToggleShowingLongSubject'
+ 'controlledToggleShowingLongSubject',
+ 'dive'
],
data () {
return {
diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index 8fdebe44..c2df6021 100644
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@@ -229,7 +229,19 @@
+
+
diff --git a/src/components/thread_tree/thread_tree.js b/src/components/thread_tree/thread_tree.js
index 46245bdf..3e8eedb1 100644
--- a/src/components/thread_tree/thread_tree.js
+++ b/src/components/thread_tree/thread_tree.js
@@ -31,7 +31,8 @@ const ThreadTree = {
totalReplyDepth: Object,
statusContentProperties: Object,
setStatusContentProperty: Function,
- toggleStatusContentProperty: Function
+ toggleStatusContentProperty: Function,
+ dive: Function
},
computed: {
reverseLookupTable () {
diff --git a/src/components/thread_tree/thread_tree.vue b/src/components/thread_tree/thread_tree.vue
index d7077bfd..adf7bcdf 100644
--- a/src/components/thread_tree/thread_tree.vue
+++ b/src/components/thread_tree/thread_tree.vue
@@ -24,6 +24,7 @@
:controlled-toggle-showing-tall="() => toggleCurrentProp('ShowingTall')"
:controlled-toggle-expanding-subject="() => toggleCurrentProp('expandingSubject')"
:controlled-toggle-showing-long-subject="() => toggleCurrentProp('showingLongSubject')"
+ :dive="dive ? () => dive(status.id) : undefined"
@goto="setHighlight"
@toggleExpanded="toggleExpanded"
@@ -60,18 +61,24 @@
:status-content-properties="statusContentProperties"
:set-status-content-property="setStatusContentProperty"
:toggle-status-content-property="toggleStatusContentProperty"
+ :dive="dive"
/>
-
+
+
+ {{ $tc('status.thread_show_full', totalReplyCount[status.id], { numStatus: totalReplyCount[status.id], depth: totalReplyDepth[status.id] }) }}
+
+