Add simple tree style navigation

2021-08-07 18:53:23 -04:00 · 2021-08-07 18:53:23 -04:00 · d9a9f97751
parent 8c0deb905e
commit d9a9f97751
8 changed files with 113 additions and 20 deletions
--- a/src/components/conversation/conversation.js
+++ b/src/components/conversation/conversation.js
@ -80,7 +80,10 @@ const conversation = {
      return this.$store.state.config.conversationDisplay
    },
    isTreeView () {
-      return this.displayStyle === 'tree'
+      return this.displayStyle === 'tree' || this.displayStyle === 'simple_tree'
+    },
+    treeViewIsSimple () {
+      return this.displayStyle === 'simple_tree'
    },
    isLinearView () {
      return this.displayStyle === 'linear'
@ -297,6 +300,14 @@ const conversation = {
    },
    canDive () {
      return this.isTreeView && this.isExpanded
+    },
+    focused () {
+      return (id) => {
+        return (this.isExpanded) && id === this.highlight
+      }
+    },
+    maybeHighlight () {
+      return this.isExpanded ? this.highlight : null
    }
  },
  components: {
@ -316,6 +327,9 @@ const conversation = {
    expanded (value) {
      if (value) {
        this.fetchConversation()
+      } else {
+        // if we collapse it, we should reset the dive
+        this._diven = false
      }
    },
    virtualHidden (value) {
@ -323,6 +337,9 @@ const conversation = {
        'setVirtualHeight',
        { statusId: this.statusId, height: `${this.$el.clientHeight}px` }
      )
+    },
+    highlight (value, old) {
+      console.log('highlight:', old, ' => ', value)
    }
  },
  methods: {
@ -341,7 +358,8 @@ const conversation = {
          'this.threadDisplayStatus ', this.threadDisplayStatus,
          'this.statusId', this.statusId)
        if (this.threadDisplayStatus[this.statusId] === 'hidden') {
-          this.diveIntoStatus(parentOrSelf)
+          this.diveIntoStatus(parentOrSelf, /* preventScroll */ true)
+          this.tryScrollTo(this.statusId)
        }
      }
    },
@ -365,18 +383,16 @@ const conversation = {
    getReplies (id) {
      return this.replies[id] || []
    },
-    focused (id) {
-      return (this.isExpanded) && id === this.statusId
+    getHighlight () {
+      return this.isExpanded ? this.highlight : null
    },
    setHighlight (id) {
+      console.log('setHighlight', id)
      if (!id) return
      this.highlight = id
      this.$store.dispatch('fetchFavsAndRepeats', id)
      this.$store.dispatch('fetchEmojiReactionsBy', id)
    },
-    getHighlight () {
-      return this.isExpanded ? this.highlight : null
-    },
    toggleExpanded () {
      this.expanded = !this.expanded
    },
@ -420,14 +436,52 @@ const conversation = {
    toggleStatusContentProperty (id, name) {
      this.setStatusContentProperty(id, name, !this.statusContentProperties[id][name])
    },
-    diveIntoStatus (id) {
+    leastShowingAncestor (id) {
+      let cur = id
+      let parent = this.parentOf(cur)
+      while (cur) {
+        // if the parent is showing it means cur is visible
+        if (this.threadDisplayStatus[parent] === 'showing') {
+          return cur
+        }
+        parent = this.parentOf(parent)
+        cur = this.parentOf(cur)
+      }
+      // nothing found, fall back to toplevel
+      return topLevel[0].id
+    },
+    diveIntoStatus (id, preventScroll) {
      this.diveHistory = [...this.diveHistory, id]
+      if (!preventScroll) {
+        this.goToCurrent()
+      }
    },
    diveBack () {
+      const oldHighlight = this.highlight
      this.diveHistory = [...this.diveHistory.slice(0, this.diveHistory.length - 1)]
+      if (oldHighlight) {
+        this.tryScrollTo(this.leastShowingAncestor(oldHighlight))
+      }
    },
    undive () {
+      const oldHighlight = this.highlight
      this.diveHistory = []
+      if (oldHighlight) {
+        this.tryScrollTo(this.leastShowingAncestor(oldHighlight))
+      } else {
+        this.goToCurrent()
+      }
+    },
+    tryScrollTo (id) {
+      if (this.isPage) {
+        // set statusId
+        this.$router.push({ name: 'conversation', params: { id } })
+      }
+
+      this.setHighlight(id)
+    },
+    goToCurrent () {
+      this.tryScrollTo(this.diveRoot || this.topLevel[0].id)
    },
    statusById (id) {
      return this.statusMap[id]
--- a/src/components/conversation/conversation.vue
+++ b/src/components/conversation/conversation.vue
@ -61,10 +61,11 @@

        :focused="focused"
        :get-replies="getReplies"
-        :get-highlight="getHighlight"
+        :highlight="maybeHighlight"
        :set-highlight="setHighlight"
        :toggle-expanded="toggleExpanded"

+        :simple="treeViewIsSimple"
        :toggle-thread-display="toggleThreadDisplay"
        :thread-display-status="threadDisplayStatus"
        :show-thread-recursively="showThreadRecursively"
--- a/src/components/settings_modal/tabs/general_tab.js
+++ b/src/components/settings_modal/tabs/general_tab.js
@ -20,7 +20,7 @@ const GeneralTab = {
        value: mode,
        label: this.$t(`settings.subject_line_${mode === 'masto' ? 'mastodon' : mode}`)
      })),
-      conversationDisplayOptions: ['tree', 'linear'].map(mode => ({
+      conversationDisplayOptions: ['tree', 'simple_tree', 'linear'].map(mode => ({
        key: mode,
        value: mode,
        label: this.$t(`settings.conversation_display_${mode}`)
--- a/src/components/status/status.js
+++ b/src/components/status/status.js
@ -97,6 +97,7 @@ const Status = {
    'inProfile',
    'profileUserId',

+    'simpleTree',
    'controlledThreadDisplayStatus',
    'controlledToggleThreadDisplay',

@ -379,10 +380,9 @@ const Status = {
    },
    toggleThreadDisplay () {
      this.controlledToggleThreadDisplay()
-    }
-  },
-  watch: {
-    'highlight': function (id) {
+    },
+    scrollIfHighlighted (highlightId) {
+      const id = highlightId
      if (this.status.id === id) {
        let rect = this.$el.getBoundingClientRect()
        if (rect.top < 100) {
@ -396,6 +396,14 @@ const Status = {
          window.scrollBy(0, rect.bottom - window.innerHeight + 50)
        }
      }
+    }
+  },
+  mounted () {
+    this.scrollIfHighlighted(this.highlight)
+  },
+  watch: {
+    'highlight': function (id) {
+      this.scrollIfHighlighted(id)
    },
    'status.repeat_num': function (num) {
      // refetch repeats when repeat_num is changed in any way
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@ -220,7 +220,7 @@
                  />
                </button>
                <button
-                  v-if="inThreadForest && replies && replies.length && toggleThreadDisplay"
+                  v-if="inThreadForest && replies && replies.length && !simpleTree"
                  class="button-unstyled"
                  :title="threadShowing ? $t('status.thread_hide') : $t('status.thread_show')"
                  :aria-expanded="threadShowing ? 'true' : 'false'"
@ -233,7 +233,7 @@
                  />
                </button>
                <button
-                  v-if="dive"
+                  v-if="dive && !simpleTree"
                  class="button-unstyled"
                  :title="$t('status.show_only_conversation_under_this')"
                  @click.prevent="dive"
--- a/src/components/thread_tree/thread_tree.js
+++ b/src/components/thread_tree/thread_tree.js
@ -1,5 +1,16 @@
 import Status from '../status/status.vue'

+import { library } from '@fortawesome/fontawesome-svg-core'
+import {
+  faAngleDoubleDown,
+  faAngleDoubleRight
+} from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+  faAngleDoubleDown,
+  faAngleDoubleRight
+)
+
 // const debug = console.log
 const debug = () => {}

@ -19,11 +30,12 @@ const ThreadTree = {
    profileUserId: String,

    focused: Function,
-    getHighlight: Function,
+    highlight: String,
    getReplies: Function,
    setHighlight: Function,
    toggleExpanded: Function,

+    simple: Boolean,
    // to control display of the whole thread forest
    toggleThreadDisplay: Function,
    threadDisplayStatus: Object,
--- a/src/components/thread_tree/thread_tree.vue
+++ b/src/components/thread_tree/thread_tree.vue
@ -9,12 +9,13 @@
      :show-pinned="pinnedStatusIdsObject && pinnedStatusIdsObject[status.id]"
      :focused="focused(status.id)"
      :in-conversation="isExpanded"
-      :highlight="getHighlight()"
+      :highlight="highlight"
      :replies="getReplies(status.id)"
      :in-profile="inProfile"
      :profile-user-id="profileUserId"
      class="conversation-status conversation-status-treeview status-fadein panel-body"

+      :simple-tree="simple"
      :controlled-thread-display-status="threadDisplayStatus[status.id]"
      :controlled-toggle-thread-display="() => toggleThreadDisplay(status.id)"

@ -49,10 +50,11 @@

        :focused="focused"
        :get-replies="getReplies"
-        :get-highlight="getHighlight"
+        :highlight="highlight"
        :set-highlight="setHighlight"
        :toggle-expanded="toggleExpanded"

+        :simple="simple"
        :toggle-thread-display="toggleThreadDisplay"
        :thread-display-status="threadDisplayStatus"
        :show-thread-recursively="showThreadRecursively"
@ -69,6 +71,22 @@
      class="thread-tree-replies thread-tree-replies-hidden"
    >
      <i18n
+        v-if="simple"
+        tag="button"
+        path="status.thread_follow_with_icon"
+        class="button-unstyled -link thread-tree-show-replies-button"
+        @click.prevent="dive(status.id)"
+      >
+        <FAIcon
+          place="icon"
+          icon="angle-double-right"
+        />
+        <span place="text">
+          {{ $tc('status.thread_follow', totalReplyCount[status.id], { numStatus: totalReplyCount[status.id] }) }}
+        </span>
+      </i18n>
+      <i18n
+        v-else
        tag="button"
        path="status.thread_show_full_with_icon"
        class="button-unstyled -link thread-tree-show-replies-button"
--- a/src/modules/instance.js
+++ b/src/modules/instance.js
@ -53,7 +53,7 @@ const defaultState = {
  theme: 'pleroma-dark',
  virtualScrolling: true,
  sensitiveByDefault: false,
-  conversationDisplay: 'tree',
+  conversationDisplay: 'simple_tree',

  // Nasty stuff
  customEmoji: [],