kirigaya/digital-vcd-render
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

optimise search | list

Browse Source
This commit is contained in:
锦恢 2024-02-28 15:35:10 +08:00
parent b3f20fd55c
commit 75421ea39f
6 changed files with 73 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
public/vcd.css
View File

@ -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;
}

2
src/components/sidebar.vue
View File

@ -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;

22
src/components/treeview/index.vue
View File

@ -7,10 +7,13 @@
<div class="vcd-module-info">
<div>{{ t('module') }}</div>
<hr>
<Modules v-for="mod of props.topModules"
:key="mod.name"
:module="mod"
></Modules>
<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>
@ -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;
}

4
src/components/treeview/modules.vue
View File

@ -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;
}

54
src/components/treeview/search.vue
View File

@ -9,19 +9,22 @@
@input="safeSearch"
/>
</div>
<div class="search-result" v-if="searchManage.content.trim().length > 0">
<div v-if="searchManage.searchResult.length > 0">
<div class="search-result-item"
v-for="(searchResult, index) in searchManage.searchResult"
:key="index"
:class="globalLookup.currentWires.has(searchResult.module) ? 'vcd-treeview-selected' : ''"
v-html="searchResult.htmlString"
@click="clickItem(searchResult.module)">
<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"
:key="index"
:class="globalLookup.currentWires.has(searchResult.module) ? 'vcd-treeview-selected' : ''"
v-html="searchResult.htmlString"
@click="clickItem(searchResult.module)">
</div>
</div>
<div v-else>
{{ t('search-nothing') }}
</div>
</div>
<div v-else>
{{ t('search-nothing') }}
</div>
</div>
</div>
</template>
@ -29,7 +32,7 @@
<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,11 +66,15 @@ export default {
const searchResultItem = makeSearchResultItem(searchString, p, searchRule, caseSensitivity, displayParentOnly);
if (searchResultItem) {
searchManage.searchResult.push(searchResultItem);
emitter.emit('signal-search', searchResultItem);
}
}
}
emitter.on('signal-search', searchResultItem => {
searchManage.searchResult.push(searchResultItem);
});
function clickItem(signal) {
if (!signal.link) {
return;
@ -100,12 +107,23 @@ export default {
transition: flex .5s ease-in-out;
}
.search-result {
overflow-x: hidden;
overflow-y: scroll;
.search-result-wrapper {
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;
}

10
src/components/treeview/signals.vue
View File

@ -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;
}