feat: added shell resizing (#2648)

frontend/public/themes/dark.css

@@ -174,6 +174,12 @@ table th {
   background: var(--surfacePrimary);
   color: var(--textPrimary);
 }
+.shell__divider {
+  background: rgba(255, 255, 255, 0.1);
+}
+.shell__divider:hover {
+  background: rgba(255, 255, 255, 0.4);
+}
 .shell__result {
   border-top: 1px solid var(--divider);
 }

frontend/src/components/Shell.vue

@@ -1,37 +1,54 @@
 <template>
   <div
-    @click="focus"
     class="shell"
-    ref="scrollable"
     :class="{ ['shell--hidden']: !showShell }"
+    :style="{ height: `${this.shellHeight}em` }"
   >
-    <div v-for="(c, index) in content" :key="index" class="shell__result">
-      <div class="shell__prompt">
-        <i class="material-icons">chevron_right</i>
+    <div
+      @pointerdown="startDrag()"
+      @pointerup="stopDrag()"
+      class="shell__divider"
+      :style="this.shellDrag ? { background: `${checkTheme()}` } : ''"
+    ></div>
+    <div @click="focus" class="shell__content" ref="scrollable">
+      <div v-for="(c, index) in content" :key="index" class="shell__result">
+        <div class="shell__prompt">
+          <i class="material-icons">chevron_right</i>
+        </div>
+        <pre class="shell__text">{{ c.text }}</pre>
       </div>
-      <pre class="shell__text">{{ c.text }}</pre>
-    </div>
 
-    <div class="shell__result" :class="{ 'shell__result--hidden': !canInput }">
-      <div class="shell__prompt">
-        <i class="material-icons">chevron_right</i>
+      <div
+        class="shell__result"
+        :class="{ 'shell__result--hidden': !canInput }"
+      >
+        <div class="shell__prompt">
+          <i class="material-icons">chevron_right</i>
+        </div>
+        <pre
+          tabindex="0"
+          ref="input"
+          class="shell__text"
+          contenteditable="true"
+          @keydown.prevent.38="historyUp"
+          @keydown.prevent.40="historyDown"
+          @keypress.prevent.enter="submit"
+        />
       </div>
-      <pre
-        tabindex="0"
-        ref="input"
-        class="shell__text"
-        contenteditable="true"
-        @keydown.prevent.38="historyUp"
-        @keydown.prevent.40="historyDown"
-        @keypress.prevent.enter="submit"
-      />
     </div>
+    <div
+      @pointerup="stopDrag()"
+      class="shell__overlay"
+      v-show="this.shellDrag"
+    ></div>
   </div>
 </template>
 
 <script>
 import { mapMutations, mapState, mapGetters } from "vuex";
 import { commands } from "@/api";
+import { throttle } from "lodash";
+import { theme } from "@/utils/constants";
 
 export default {
   name: "shell",
@@ -51,9 +68,55 @@ export default {
     history: [],
     historyPos: 0,
     canInput: true,
+    shellDrag: false,
+    shellHeight: 25,
+    fontsize: parseFloat(getComputedStyle(document.documentElement).fontSize),
   }),
+  mounted() {
+    window.addEventListener("resize", this.resize);
+  },
+  beforeDestroy() {
+    window.removeEventListener("resize", this.resize);
+  },
   methods: {
     ...mapMutations(["toggleShell"]),
+    checkTheme() {
+      if (theme == "dark") {
+        return "rgba(255, 255, 255, 0.4)";
+      }
+      return "rgba(127, 127, 127, 0.4)";
+    },
+    startDrag() {
+      document.addEventListener("pointermove", this.handleDrag);
+      this.shellDrag = true;
+    },
+    stopDrag() {
+      document.removeEventListener("pointermove", this.handleDrag);
+      this.shellDrag = false;
+    },
+    handleDrag: throttle(function (event) {
+      const top = window.innerHeight / this.fontsize - 4;
+      const userPos = (window.innerHeight - event.clientY) / this.fontsize;
+      const bottom =
+        2.25 +
+        document.querySelector(".shell__divider").offsetHeight / this.fontsize;
+
+      if (userPos <= top && userPos >= bottom) {
+        this.shellHeight = userPos.toFixed(2);
+      }
+    }, 32),
+    resize: throttle(function () {
+      const top = window.innerHeight / this.fontsize - 4;
+      const bottom =
+        2.25 +
+        document.querySelector(".shell__divider").offsetHeight / this.fontsize;
+
+      if (this.shellHeight > top) {
+        this.shellHeight = top;
+      } else if (this.shellHeight < bottom) {
+        this.shellHeight = bottom;
+      }
+    }, 32),
     scroll: function () {
       this.$refs.scrollable.scrollTop = this.$refs.scrollable.scrollHeight;
     },

frontend/src/css/_shell.css

@@ -2,21 +2,49 @@
   position: fixed;
   bottom: 0;
   left: 0;
-  height: 25em;
   max-height: calc(100% - 4em);
   background: white;
   color: #212121;
-  z-index: 9999;
+  z-index: 9997;
   width: 100%;
+  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
+  transition: .2s ease transform;
+}
+
+.shell__divider {
+  position: relative;
+  height: 8px;
+  z-index: 9999;
+  background: rgba(127, 127, 127, 0.1);
+  transition: 0.2s ease background;
+  cursor: ns-resize;
+  touch-action: none;
+  user-select: none;
+}
+
+.shell__divider:hover {
+  background: rgba(127, 127, 127, 0.4);
+}
+
+.shell__content {
+  height: 100%;
   font-family: monospace;
   overflow: auto;
   font-size: 1rem;
   cursor: text;
-  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
-  transition: .2s ease transform;
 }
 
-body.rtl .shell {
+.shell__overlay {
+  position: fixed;
+  width: 100%;
+  height: 100%;
+  top: 0px;
+  left: 0px;
+  z-index: 9998;
+  background-color: rgba(0, 0, 0, 0.05);
+}
+
+body.rtl .shell-content {
   direction: ltr;
 }
 

frontend/src/css/mobile.css

@@ -120,6 +120,10 @@
     right: 0;
   }
 
+  .shell__divider {
+    height: 12px;
+  }
+
   header .search-button,
   header .menu-button {
     display: inherit;

frontend/src/store/mutations.js

@@ -6,6 +6,7 @@ const mutations = {
     state.prompts.pop();
   },
   toggleShell: (state) => {
+    state.show = null;
     state.showShell = !state.showShell;
   },
   showHover: (state, value) => {