From 9d17bd7c737fde0d9e8b15b67aa734df1ef07eec Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Joaqu=C3=ADn=20S=C3=A1nchez?= <joaquin.sanchez@fi2net.es>
Date: Mon, 3 Jan 2022 13:45:33 +0100
Subject: [PATCH] feat(ui): add scrolls (#391)

---
 packages/ui/client/components/CodeMirror.vue  |  3 +-
 packages/ui/client/components/FileDetails.vue | 42 ++++++-----
 packages/ui/client/components/Navigation.vue  |  2 +-
 packages/ui/client/components/Suites.vue      |  2 +-
 packages/ui/client/components/TasksList.vue   | 58 ++++++++-------
 .../components/views/ViewModuleGraph.vue      | 74 +++++++++----------
 .../ui/client/components/views/ViewReport.vue |  2 +-
 packages/ui/client/styles/main.css            | 41 ++++++++++
 8 files changed, 136 insertions(+), 88 deletions(-)

diff --git a/packages/ui/client/components/CodeMirror.vue b/packages/ui/client/components/CodeMirror.vue
index 561143b62..1d7859fbf 100644
--- a/packages/ui/client/components/CodeMirror.vue
+++ b/packages/ui/client/components/CodeMirror.vue
@@ -53,9 +53,8 @@ onMounted(async() => {
   <div
     relative
     font-mono
-    overflow-auto
     text-sm
-    h-full
+    class="scrolls"
   >
     <textarea ref="el" />
   </div>
diff --git a/packages/ui/client/components/FileDetails.vue b/packages/ui/client/components/FileDetails.vue
index 4e00ec00d..eddbb743c 100644
--- a/packages/ui/client/components/FileDetails.vue
+++ b/packages/ui/client/components/FileDetails.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { client, current } from '~/composables/client'
+import type { Params } from '~/composables/params'
 import { viewMode } from '~/composables/params'
 import { useModuleGraph } from '~/composables/module-graph'
 
@@ -16,30 +17,35 @@ const data = asyncComputed(async() => {
 })
 
 const graph = useModuleGraph(data)
+const changeViewMode = (view: Params['view']) => {
+  viewMode.value = view
+}
 </script>
 
 <template>
-  <div v-if="current" h-full w-full overflow="hidden">
-    <div p="2" h-10 flex="~ gap-2" items-center bg-header border="b base">
-      <StatusIcon :task="current" />
-      <div flex-1 font-light op-50 ws-nowrap tuncate text-sm>
-        {{ current?.filepath }}
+  <div v-if="current" h-full>
+    <div>
+      <div p="2" h-10 flex="~ gap-2" items-center bg-header border="b base">
+        <StatusIcon :task="current" />
+        <div flex-1 font-light op-50 ws-nowrap truncate text-sm>
+          {{ current?.filepath }}
+        </div>
+        <div class="flex text-lg">
+          <IconButton icon="i-carbon-launch" :disabled="!current?.filepath" :onclick="open" />
+        </div>
       </div>
-      <div class="flex text-lg">
-        <IconButton icon="i-carbon-launch" :disabled="!current?.filepath" :onclick="open" />
+      <div flex="~" items-center bg-header border="b base" text-sm h-37px>
+        <button tab-button :class="{ 'tab-button-active': viewMode == null }" @click="changeViewMode(null)">
+          Report
+        </button>
+        <button tab-button :class="{ 'tab-button-active': viewMode === 'graph' }" @click="changeViewMode('graph')">
+          Module Graph
+        </button>
+        <button tab-button :class="{ 'tab-button-active': viewMode === 'editor' }" @click="changeViewMode('editor')">
+          Code
+        </button>
       </div>
     </div>
-    <div flex="~" items-center bg-header border="b base" text-sm h-37px>
-      <button tab-button :class="{ 'tab-button-active': viewMode == null }" @click="viewMode = null">
-        Report
-      </button>
-      <button tab-button :class="{ 'tab-button-active': viewMode === 'graph' }" @click="viewMode = 'graph'">
-        Module Graph
-      </button>
-      <button tab-button :class="{ 'tab-button-active': viewMode === 'editor' }" @click="viewMode = 'editor'">
-        Code
-      </button>
-    </div>
     <ViewModuleGraph v-show="viewMode === 'graph'" :graph="graph" />
     <ViewEditor v-if="viewMode === 'editor'" :file="current" />
     <ViewReport v-else :file="current" />
diff --git a/packages/ui/client/components/Navigation.vue b/packages/ui/client/components/Navigation.vue
index ca9d4a979..4e4179d0e 100644
--- a/packages/ui/client/components/Navigation.vue
+++ b/packages/ui/client/components/Navigation.vue
@@ -10,7 +10,7 @@ function onItemClick(task: Task) {
 </script>
 
 <template>
-  <nav overflow-y-auto>
+  <nav border="r base">
     <TasksList
       :tasks="files"
       :on-item-click="onItemClick"
diff --git a/packages/ui/client/components/Suites.vue b/packages/ui/client/components/Suites.vue
index 6d9b48fdb..03875f3ee 100644
--- a/packages/ui/client/components/Suites.vue
+++ b/packages/ui/client/components/Suites.vue
@@ -5,7 +5,7 @@ const name = computed(() => current.value?.name.split(/\//g).pop())
 </script>
 
 <template>
-  <div v-if="current" overflow-auto>
+  <div v-if="current" border="r base">
     <TasksList
       :tasks="current.tasks"
       :nested="true"
diff --git a/packages/ui/client/components/TasksList.vue b/packages/ui/client/components/TasksList.vue
index 4bb9a2a16..cda2cf480 100644
--- a/packages/ui/client/components/TasksList.vue
+++ b/packages/ui/client/components/TasksList.vue
@@ -22,37 +22,39 @@ export default {
 </script>
 
 <template>
-  <div flex="~ col" h="full" overflow="hidden">
-    <div
-      p="2"
-      h-10
-      flex="~ gap-2"
-      items-center
-      bg-header
-      border="b base"
-    >
-      <slot name="header" />
-    </div>
-    <div
-      p="x4 y2"
-      flex="~ gap-2"
-      items-center
-      bg-header
-      border="b base"
-    >
-      <div i-carbon:search flex-shrink-0 />
-      <input
-        v-model="search"
-        placeholder="Search..."
-        outline="none"
-        bg="transparent"
-        font="light"
-        text="sm"
-        :op="search.length ? '100' : '50'"
+  <div h="full">
+    <div>
+      <div
+        p="2"
+        h-10
+        flex="~ gap-2"
+        items-center
+        bg-header
+        border="b base"
+      >
+        <slot name="header" />
+      </div>
+      <div
+        p="x4 y2"
+        flex="~ gap-2"
+        items-center
+        bg-header
+        border="b base"
       >
+        <div i-carbon:search flex-shrink-0 />
+        <input
+          v-model="search"
+          placeholder="Search..."
+          outline="none"
+          bg="transparent"
+          font="light"
+          text="sm"
+          :op="search.length ? '100' : '50'"
+        >
+      </div>
     </div>
 
-    <div overflow="auto">
+    <div class="scrolls">
       <TaskTree
         v-for="task in tasks"
         :key="task.id"
diff --git a/packages/ui/client/components/views/ViewModuleGraph.vue b/packages/ui/client/components/views/ViewModuleGraph.vue
index 802866545..b5925490b 100644
--- a/packages/ui/client/components/views/ViewModuleGraph.vue
+++ b/packages/ui/client/components/views/ViewModuleGraph.vue
@@ -1,40 +1,3 @@
-<template>
-  <div h-full overflow="hidden">
-    <div>
-      <div flex items-center gap-4 px-3 py-2>
-        <div v-for="node of controller?.nodeTypes.sort()" :key="node" flex="~ gap-1" items-center select-none>
-          <input
-            :id="`type-${node}`"
-            type="checkbox"
-            :checked="controller?.nodeTypeFilter.includes(node)"
-            @change="setFilter(node, ($event as any).target.checked)"
-          >
-          <label
-            font-light
-            text-sm
-            ws-nowrap
-            overflow-hidden
-            capitalize
-            truncate :for="`type-${node}`"
-            border-b-2
-            :style="{ 'border-color': `var(--color-node-${node})`}"
-          >
-            {{ node }} Modules
-          </label>
-        </div>
-        <div flex-auto />
-        <div>
-          <IconButton
-            icon="i-carbon-reset"
-            :onclick="resetGraphController"
-          />
-        </div>
-      </div>
-    </div>
-    <div ref="el" class="graph" />
-  </div>
-</template>
-
 <script setup lang="ts">
 import { GraphController } from 'd3-graph-controller'
 import type { ModuleGraph, ModuleGraphController, ModuleType } from '~/composables/module-graph'
@@ -90,6 +53,43 @@ function debounce(cb: () => void) {
 }
 </script>
 
+<template>
+  <div h-full overflow="hidden">
+    <div>
+      <div flex items-center gap-4 px-3 py-2>
+        <div v-for="node of controller?.nodeTypes.sort()" :key="node" flex="~ gap-1" items-center select-none>
+          <input
+            :id="`type-${node}`"
+            type="checkbox"
+            :checked="controller?.nodeTypeFilter.includes(node)"
+            @change="setFilter(node, ($event as any).target.checked)"
+          >
+          <label
+            font-light
+            text-sm
+            ws-nowrap
+            overflow-hidden
+            capitalize
+            truncate :for="`type-${node}`"
+            border-b-2
+            :style="{ 'border-color': `var(--color-node-${node})`}"
+          >
+            {{ node }} Modules
+          </label>
+        </div>
+        <div flex-auto />
+        <div>
+          <IconButton
+            icon="i-carbon-reset"
+            :onclick="resetGraphController"
+          />
+        </div>
+      </div>
+    </div>
+    <div ref="el" class="graph" />
+  </div>
+</template>
+
 <style>
 :root {
   --color-link-label: var(--color-text);
diff --git a/packages/ui/client/components/views/ViewReport.vue b/packages/ui/client/components/views/ViewReport.vue
index 5d1239db4..737907c7e 100644
--- a/packages/ui/client/components/views/ViewReport.vue
+++ b/packages/ui/client/components/views/ViewReport.vue
@@ -16,7 +16,7 @@ function relative(p: string) {
 </script>
 
 <template>
-  <div>
+  <div class="scrolls">
     <template v-if="failed.length">
       <div v-for="task of failed" :key="task.id">
         <div bg="red-500/10" text="red-500 sm" p="x3 y2" m-2 rounded>
diff --git a/packages/ui/client/styles/main.css b/packages/ui/client/styles/main.css
index 7537f4a87..ae74bbfbd 100644
--- a/packages/ui/client/styles/main.css
+++ b/packages/ui/client/styles/main.css
@@ -49,6 +49,9 @@ html.dark {
   --cm-regex: #ab5e3f;
   --cm-json-property: #698c96;
   --cm-line-number-gutter: #f8f8f8;
+  /* scrollbars colors */
+  --cm-ttc-c-thumb: #ddd;
+  --cm-ttc-c-track: white;
 }
 
 html.dark {
@@ -76,6 +79,9 @@ html.dark {
   --cm-line-number-gutter: #161616;
   --cm-line-highlight-background: #444444;
   --cm-selection-background: #44444450;
+  /* scrollbars colors */
+  --cm-ttc-c-thumb: #666;
+  --cm-ttc-c-track: black;
 }
 
 .splitpanes__pane {
@@ -118,3 +124,38 @@ html.dark {
 .splitpanes.loading .splitpanes__pane {
   transition: none !important;
 }
+.CodeMirror-scroll::-webkit-scrollbar,
+.scrolls::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+.CodeMirror-scroll,
+.scrolls {
+  overflow: auto !important;
+  height: calc(100vh - 78px) !important;
+  scrollbar-width: thin;
+  scrollbar-color: var(--cm-ttc-c-thumb) var(--cm-ttc-c-track);
+}
+.CodeMirror-scroll::-webkit-scrollbar-track,
+.scrolls::-webkit-scrollbar-track {
+  background: var(--cm-ttc-c-track);
+}
+.CodeMirror-scroll::-webkit-scrollbar-thumb,
+.scrolls::-webkit-scrollbar-thumb {
+  background-color: var(--cm-ttc-c-thumb);
+  border-radius: 3px;
+  border: 2px solid var(--cm-ttc-c-thumb);
+}
+.CodeMirror {
+  overflow: unset !important;
+}
+.CodeMirror-vscrollbar,
+.CodeMirror-hscrollbar {
+  display: none !important;
+}
+.CodeMirror-scroll {
+  margin-bottom: unset !important;
+  margin-right: unset !important;
+  padding-bottom: unset !important;
+}
+
-- 
2.51.2