feat(timeline): collapse panes

Author: Akryum

packages/app-frontend/src/features/layout/SplitPane.vue

@@ -1,7 +1,7 @@
 <script lang="ts">
-import { ref, computed, watch, defineComponent, PropType } from '@vue/composition-api'
-import { getStorage, setStorage } from '@vue-devtools/shared-utils'
+import { ref, computed, defineComponent, PropType } from '@vue/composition-api'
 import { useOrientation } from './orientation'
+import { useSavedRef } from '@front/util/reactivity'
 
 export default defineComponent({
   props: {
@@ -30,24 +30,33 @@ export default defineComponent({
       type: String,
       default: null,
     },
+
+    collapsableLeft: {
+      type: Boolean,
+      default: false,
+    },
+
+    collapsableRight: {
+      type: Boolean,
+      default: false,
+    },
   },
 
   setup (props) {
     const { orientation } = useOrientation()
 
     const split = ref(props.defaultSplit)
+    const leftCollapsed = ref(false)
+    const rightCollapsed = ref(false)
 
     if (props.saveId) {
-      const storageKey = `split-pane-${props.saveId}`
-
-      const savedValue = getStorage(storageKey)
-      if (savedValue != null && typeof savedValue === 'number') {
-        split.value = savedValue
+      useSavedRef(split, `split-pane-${props.saveId}`)
+      if (props.collapsableLeft) {
+        useSavedRef(leftCollapsed, `split-pane-collapsed-left-${props.saveId}`)
+      }
+      if (props.collapsableRight) {
+        useSavedRef(rightCollapsed, `split-pane-collapsed-right-${props.saveId}`)
       }
-
-      watch(split, value => {
-        setStorage(storageKey, value)
-      })
     }
 
     const boundSplit = computed(() => {
@@ -61,11 +70,11 @@ export default defineComponent({
     })
 
     const leftStyle = computed(() => ({
-      [orientation.value === 'landscape' ? 'width' : 'height']: `${boundSplit.value}%`,
+      [orientation.value === 'landscape' ? 'width' : 'height']: `${leftCollapsed.value ? 0 : rightCollapsed.value ? 100 : boundSplit.value}%`,
     }))
 
     const rightStyle = computed(() => ({
-      [orientation.value === 'landscape' ? 'width' : 'height']: `${100 - boundSplit.value}%`,
+      [orientation.value === 'landscape' ? 'width' : 'height']: `${rightCollapsed.value ? 0 : leftCollapsed.value ? 100 : 100 - boundSplit.value}%`,
     }))
 
     const dragging = ref(false)
@@ -99,6 +108,24 @@ export default defineComponent({
       dragging.value = false
     }
 
+    // Collapsing
+
+    function collapseLeft () {
+      if (rightCollapsed.value) {
+        rightCollapsed.value = false
+      } else {
+        leftCollapsed.value = true
+      }
+    }
+
+    function collapseRight () {
+      if (leftCollapsed.value) {
+        leftCollapsed.value = false
+      } else {
+        rightCollapsed.value = true
+      }
+    }
+
     return {
       el,
       dragging,
@@ -108,6 +135,10 @@ export default defineComponent({
       dragEnd,
       leftStyle,
       rightStyle,
+      leftCollapsed,
+      rightCollapsed,
+      collapseLeft,
+      collapseRight,
     }
   },
 })
@@ -131,13 +162,17 @@ export default defineComponent({
       class="relative top-0 left-0"
       :class="{
         'pointer-events-none': dragging,
-        'border-r border-gray-200 dark:border-gray-800': orientation === 'landscape'
+        'border-r border-gray-200 dark:border-gray-800': orientation === 'landscape' && !leftCollapsed && !rightCollapsed,
       }"
       :style="leftStyle"
     >
-      <slot name="left" />
+      <slot
+        v-if="!leftCollapsed"
+        name="left"
+      />
 
       <div
+        v-if="!leftCollapsed && !rightCollapsed"
         class="dragger absolute z-100 hover:bg-green-500 hover:bg-opacity-25 transition-colors duration-150 delay-150"
         :class="{
           'top-0 bottom-0 cursor-ew-resize': orientation === 'landscape',
@@ -146,6 +181,21 @@ export default defineComponent({
         }"
         @mousedown.prevent="dragStart"
       />
+
+      <div
+        v-if="(collapsableLeft && !leftCollapsed) || rightCollapsed"
+        class="collapse-btn absolute z-[101] flex items-center pointer-events-none"
+        :class="{
+          'top-0 bottom-0 right-0': orientation === 'landscape',
+          'left-0 right-0 bottom-0 flex-col': orientation === 'portrait',
+        }"
+      >
+        <VueButton
+          :icon-left="orientation === 'landscape' ? 'arrow_left': 'arrow_drop_up'"
+          class="block icon-button flat pointer-events-auto opacity-40 hover:opacity-100"
+          @click="collapseLeft()"
+        />
+      </div>
     </div>
     <div
       class="relative bottom-0 right-0"
@@ -155,7 +205,25 @@ export default defineComponent({
       }"
       :style="rightStyle"
     >
-      <slot name="right" />
+      <div
+        v-if="(collapsableRight && !rightCollapsed) || leftCollapsed"
+        class="collapse-btn absolute z-[101] flex items-center pointer-events-none"
+        :class="{
+          'top-0 bottom-0 left-0': orientation === 'landscape',
+          'left-0 right-0 top-0 flex-col': orientation === 'portrait',
+        }"
+      >
+        <VueButton
+          :icon-left="orientation === 'landscape' ? 'arrow_right': 'arrow_drop_down'"
+          class="block icon-button flat pointer-events-auto opacity-40 hover:opacity-100"
+          @click="collapseRight()"
+        />
+      </div>
+
+      <slot
+        v-if="!rightCollapsed"
+        name="right"
+      />
     </div>
   </div>
 </template>
@@ -200,4 +268,14 @@ export default defineComponent({
     }
   }
 }
+
+.collapse-btn {
+  .icon-button {
+    @apply w-2.5 h-6 rounded-sm !important;
+
+    .portrait & {
+      @apply w-6 h-2.5 !important;
+    }
+  }
+}
 </style>

packages/app-frontend/src/features/timeline/Timeline.vue

@@ -353,6 +353,8 @@ export default defineComponent({
           :default-split="50"
           :max="85"
           dragger-offset="after"
+          collapsable-left
+          collapsable-right
         >
           <template #left>
             <div class="h-full flex flex-col select-none">

packages/app-frontend/src/features/timeline/TimelineEventListItem.vue

@@ -35,7 +35,7 @@ export default defineComponent({
 
 <template>
   <div
-    class="event border-gray-100 dark:border-gray-900 border-b flex items-center space-x-2 px-2 text-xs cursor-pointer select-none"
+    class="event border-gray-100 dark:border-gray-900 border-b flex items-center space-x-2 pl-3 pr-2 text-xs cursor-pointer select-none"
     :class="{
       'inspected bg-green-500 text-white': isInspected,
       'hover:bg-blue-100 dark:hover:bg-blue-900 text-bluegray-800 dark:text-bluegray-200': !isInspected

packages/app-frontend/src/util/reactivity.ts

@@ -1,4 +1,5 @@
 import { Ref, watch } from '@vue/composition-api'
+import { getStorage, setStorage } from '@vue-devtools/shared-utils'
 
 export function nonReactive<T> (ref: Ref<T>) {
   const holder = {
@@ -24,3 +25,14 @@ export function addNonReactiveProperties<T = any> (target: T, props: Partial<T>)
     })
   }
 }
+
+export function useSavedRef<T> (ref: Ref<T>, storageKey: string) {
+  const savedValue = getStorage(storageKey)
+  if (savedValue != null) {
+    ref.value = savedValue
+  }
+
+  watch(ref, value => {
+    setStorage(storageKey, value)
+  })
+}