add click and drag handling on YnhConsole

app/src/components/YnhConsole.vue

@@ -2,7 +2,15 @@
   <div id="console">
     <b-list-group>
       <!-- HISTORY BAR -->
-      <b-list-group-item class="d-flex align-items-center" :class="{ 'bg-best text-white': open }">
+      <b-list-group-item
+        class="d-flex align-items-center"
+        :class="{ 'bg-best text-white': open }"
+        ref="history-button"
+        role="button" tabindex="0"
+        :aria-expanded="open ? 'true' : 'false'" aria-controls="console-collapse"
+        @mousedown.left.prevent="onHistoryBarClick"
+        @keyup.enter.space.prevent="open = !open"
+      >
         <h6 class="m-0">
           <icon iname="history" /> {{ $t('history.title') }}
         </h6>
@@ -13,13 +21,6 @@
             <u v-t="'history.last_action'" />
             {{ lastAction.uri | readableUri }} ({{ $t('history.methods.' + lastAction.method) }})
           </small>
-
-          <b-button
-            v-b-toggle:console-collapse
-            class="ml-2 px-1 py-0" size="sm" :variant="open ? 'light' : 'outline-dark'"
-          >
-            <icon iname="chevron-right" /><span class="sr-only">{{ $t('words.collapse') }}</span>
-          </b-button>
         </div>
       </b-list-group-item>
 
@@ -29,7 +30,7 @@
           <!-- ACTION -->
           <b-list-group v-for="(action, i) in history" :key="i" flush>
             <!-- ACTION DESC -->
-            <b-list-group-item class="sticky-top d-flex align-items-center" variant="dark">
+            <b-list-group-item class="sticky-top d-flex align-items-center">
               <div>
                 <strong>{{ $t('action') }}:</strong>
                 {{ action.uri | readableUri }}
@@ -40,9 +41,10 @@
             </b-list-group-item>
 
             <!-- ACTION MESSAGE -->
-            <b-list-group-item v-for="({ type, text }, j) in action.messages" :key="j">
+            <b-list-group-item
-              <icon iname="comment" :class="'text-' + type" /> <span v-html="text" />
+              v-for="({ type, text }, j) in action.messages" :key="j"
-            </b-list-group-item>
+              :variant="type" v-html="text"
+            />
           </b-list-group>
         </b-list-group-item>
       </b-collapse>
@@ -93,6 +95,52 @@ export default {
         const lastItem = lastActionGroup.lastElementChild || lastActionGroup
         historyElem.scrollTop = lastItem.offsetTop
       }
+    },
+
+    onHistoryBarClick (e) {
+      const history = this.$refs.history
+      let mousePos = e.clientY
+
+      const onMouseMove = ({ clientY }) => {
+        if (!this.open) {
+          history.style.height = '0px'
+          this.open = true
+        }
+        const currentHeight = history.offsetHeight
+        const nextSize = currentHeight + (mousePos - clientY)
+        if (nextSize < 10 && nextSize < currentHeight) {
+          // Close the console and reset its size if the user reduce it to less than 10px.
+          mousePos = e.clientY
+          history.style.height = null
+          onMouseUp()
+        } else {
+          history.style.height = nextSize + 'px'
+          mousePos = clientY
+        }
+      }
+
+      // Delay the mouse move listener to distinguish a click from a drag.
+      const listenToMouseMove = setTimeout(() => {
+        history.style.height = history.offsetHeight + 'px'
+        history.classList.remove('with-max')
+        window.addEventListener('mousemove', onMouseMove)
+      }, 200)
+
+      const onMouseUp = () => {
+        // Toggle opening if no mouse movement
+        if (mousePos === e.clientY) {
+          // add a max-height class if the box's height is not custom
+          if (!history.style.height) {
+            history.classList.add('with-max')
+          }
+          this.open = !this.open
+        }
+        clearTimeout(listenToMouseMove)
+        window.removeEventListener('mousemove', onMouseMove)
+        window.removeEventListener('mouseup', onMouseUp)
+      }
+
+      window.addEventListener('mouseup', onMouseUp)
     }
   },
 
@@ -127,16 +175,19 @@ export default {
   }
 }
 
-#history {
+#console-collapse {
-  overflow-y: auto;
-  max-height: 30vh;
-}
-
-#collapse {
   // disable collapse animation
   transition: none !important;
 }
 
+#history {
+  overflow-y: auto;
+
+  &.with-max {
+    max-height: 30vh;
+  }
+}
+
 .list-group-item {
   font-size: $font-size-sm;
   padding: $tooltip-padding-y $tooltip-padding-x;