optimise search | list

public/vcd.css

@@ -21,7 +21,7 @@ body::-webkit-scrollbar {
 }
 
 ::-webkit-scrollbar {
-    width: 15px;
+    width: 12px;
 }
 
 ::-webkit-scrollbar-track {
@@ -29,7 +29,17 @@ body::-webkit-scrollbar {
 }
 
 ::-webkit-scrollbar-thumb {
-    background: #3D4450;
+    background: var(--scrollbar-background);
+    border-radius: .3em;
+}
+
+::-webkit-scrollbar-thumb:hover {
+    background: var(--scrollbar-hover);
+    border-radius: .3em;
+}
+
+::-webkit-scrollbar-thumb:active {
+    background: var(--scrollbar-active);
     border-radius: .3em;
 }
 

src/components/sidebar.vue

@@ -55,7 +55,7 @@ export default {
     margin: 10px;
     padding: 10px 25px;
     background-color: var(--color-deepPurple);
-    border-radius: 0 0 1.5em 1.5em;
+    border-radius: 0 0 .8em .8em;
     color: var(--sidebar-item-text);
     cursor: pointer;
     display: flex;

src/components/treeview/index.vue

@@ -7,11 +7,14 @@
         <div class="vcd-module-info">
             <div>{{ t('module') }}</div>
             <hr>
+            <div class="vcd-module-display-wrapper">
                 <Modules v-for="mod of props.topModules"
                         :key="mod.name"
                         :module="mod"
                 ></Modules>
             </div>
+
+        </div>
         <div class="vcd-module-wires">
             <Signals></Signals>
         </div>
@@ -52,15 +55,16 @@ export default {
 
 <style>
 .vcd-module-info {
-    height: 80vh;
     width: 300px;
     padding-right: 5px;
-    overflow-x: scroll;
 }
 
 .vcd-module-wires {
-    height: 80vh;
     width: 300px;
+}
+
+.vcd-module-display-wrapper {
+    height: 80vh;
     overflow-x: scroll;
 }
 
@@ -77,7 +81,9 @@ export default {
 .vcd-module-wrapper {
     flex: 1;
     display: flex;
-    overflow: scroll;
+    z-index: 5;
+    max-height: 98vh;
+    /* overflow: scroll; */
     transition: flex .5s ease-in-out;
 }
 

src/components/treeview/modules.vue

@@ -104,12 +104,12 @@ export default {
 }
 
 .vcd-treeview-item:hover {
-    background-color: var(--vscode-button-hoverBackground);
+    background-color: var(--sidebar-item-selected);
     border-radius: .3em;
 }
 
 .vcd-treeview-selected {
-    background-color: var(--vscode-button-hoverBackground);
+    background-color: var(--button-active) !important;
     border-radius: .3em;
 }
 

src/components/treeview/search.vue

@@ -9,7 +9,8 @@
                 @input="safeSearch"
             />
         </div>
-        <div class="search-result" v-if="searchManage.content.trim().length > 0">
+        <div class="search-result-wrapper" v-if="searchManage.content.trim().length > 0">
+            <div class="search-result">
                 <div v-if="searchManage.searchResult.length > 0">
                     <div class="search-result-item" 
                         v-for="(searchResult, index) in searchManage.searchResult"
@@ -23,13 +24,15 @@
                     {{ t('search-nothing') }}
                 </div>
             </div>
+
+        </div>
     </div>
 </template>
 
 <script>
 import { reactive } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { globalSetting, globalLookup } from '@/hook/global';
+import { globalSetting, globalLookup, emitter } from '@/hook/global';
 import { debounceWrapper, makeSearchResultItem } from '@/hook/utils';
 
 export default {
@@ -63,10 +66,14 @@ export default {
 
                 const searchResultItem = makeSearchResultItem(searchString, p, searchRule, caseSensitivity, displayParentOnly);
                 if (searchResultItem) {
+                    emitter.emit('signal-search', searchResultItem);
+                }
+            }
+        }
+
+        emitter.on('signal-search', searchResultItem => {
             searchManage.searchResult.push(searchResultItem);
-                }
+        });
-            }
-        }
 
         function clickItem(signal) {
             if (!signal.link) {
@@ -100,12 +107,23 @@ export default {
     transition: flex .5s ease-in-out;
 }
 
-.search-result {
+.search-result-wrapper {
-    overflow-x: hidden;
-    overflow-y: scroll;
     padding: 10px;
     margin: 10px;
-    max-height: 40vh;
+    background-color: var(--sidebar);
+    border: 1.5px solid var(--main-color);
+    color: var(--sidebar-item-text);
+    border-radius: .5em;
+    min-width: 500px;
+    position: absolute;
+    z-index: 10;
+}
+
+.search-result {
+    overflow-x: scroll;
+    overflow-y: scroll;
+    max-height: 80vh;
+    padding-right: 5px;
 }
 
 .search-result-item {
@@ -118,7 +136,7 @@ export default {
 }
 
 .search-result-item:hover {
-    background-color: var(--vscode-button-hoverBackground);
+    background-color: var(--sidebar-item-selected);
     border-radius: .3em;
 }
 

src/components/treeview/signals.vue

@@ -1,6 +1,6 @@
 <template>
     <div>
-        <div>{{ t('signal') }}({{signals.content.length}})</div>
+        <div class="vcd-signal-title">{{ t('signal') }}({{signals.content.length}})</div>
         <hr>
         <div class="vcd-signal-signals-display">
             <div v-for="(signal, index) in signals.content" :key="index"
@@ -65,6 +65,10 @@ export default {
 </script>
 
 <style>
+.vcd-signal-title {
+    margin-left: 5px;
+}
+
 .icon-wave-square {
     color: var(--signal-default-color);
 }
@@ -72,6 +76,8 @@ export default {
 .vcd-signal-signals-display {
     color: var(--sidebar-item-text);
     padding: 0px 8px;
+    height: 80vh;
+    overflow-x: scroll;
 }
 
 .vcd-signal-signal-item {
@@ -90,7 +96,7 @@ export default {
 }
 
 .vcd-signal-signal-item:hover {
-    background-color: var(--vscode-button-hoverBackground);
+    background-color: var(--sidebar-item-selected);
     border-radius: .3em;
 }