finish sidebar
This commit is contained in:
parent
b120bc39b7
commit
b3f20fd55c
@ -1,27 +1,16 @@
|
||||
:root {
|
||||
--display-signal-info-height: 50px;
|
||||
--signal-default-color: #4CAF50;
|
||||
--main-color: #CB81DA;
|
||||
}
|
||||
|
||||
html, body {
|
||||
background-color: var(--background);
|
||||
color: var(--foreground);
|
||||
}
|
||||
|
||||
.vcd-sidebar {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
left: 0px;
|
||||
background-color: var(--sidebar);
|
||||
border: solid 1px var(--sidebar-border);
|
||||
min-width: var(--sidebar-min-width);
|
||||
}
|
||||
|
||||
.vcd-sidebar-item {
|
||||
color: var(--sidebar-item-text);
|
||||
}
|
||||
|
||||
.vcd-toolbar {
|
||||
|
||||
}
|
||||
|
||||
.vcd-render {
|
||||
|
||||
body::-webkit-scrollbar {
|
||||
width: 0;
|
||||
}
|
||||
|
||||
* hr {
|
||||
@ -70,7 +59,8 @@ html, body {
|
||||
.el-select-dropdown {
|
||||
min-width: 300px !important;
|
||||
background-color: var(--sidebar);
|
||||
border: 1px solid var(--main-color);
|
||||
border: 1.0px solid var(--main-color);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.el-checkbox-button__inner {
|
||||
|
||||
@ -144,8 +144,6 @@
|
||||
--color-orange: #ffab40;
|
||||
--color-deepOrange: #ff6e40;
|
||||
|
||||
--main-color: #CB81DA;
|
||||
|
||||
/* Settings */
|
||||
--settings-action-background: var(--background);
|
||||
}
|
||||
23
src/App.vue
23
src/App.vue
@ -1,11 +1,8 @@
|
||||
<template>
|
||||
<div class="vcd-wrapper">
|
||||
<!-- 左上角的 sidebar，用于显示 -->
|
||||
<div class="vcd-sidebar">
|
||||
<div class="vcd-sidebar-item">hello</div>
|
||||
<div class="vcd-sidebar-item">hello</div>
|
||||
<div class="vcd-sidebar-item">hello</div>
|
||||
</div>
|
||||
<Sidebar></Sidebar>
|
||||
|
||||
<!-- 工具栏 -->
|
||||
<div class="vcd-toolbar">
|
||||
|
||||
@ -17,20 +14,21 @@
|
||||
<!-- 显示当前信号树形关系 -->
|
||||
<!-- 右侧工具合集 -->
|
||||
<RightNav :topModules="VcdInfo.topModules"></RightNav>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { onMounted, reactive } from 'vue';
|
||||
import { getVcdStream, readVcdFile } from '@/hook/utils';
|
||||
import { emitter, globalLookup } from '@/hook/global';
|
||||
import { emitter, globalLookup, globalSetting } from '@/hook/global';
|
||||
|
||||
import Sidebar from '@/components/sidebar.vue';
|
||||
import RightNav from '@/components/right-nav.vue';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
RightNav
|
||||
RightNav,
|
||||
Sidebar
|
||||
},
|
||||
setup() {
|
||||
|
||||
@ -50,7 +48,15 @@ export default {
|
||||
document.body.style.setProperty('--el-fill-color-blank', 'var(--sidebar)');
|
||||
document.body.style.setProperty('--el-fill-color-light', 'var(--vscode-button-hoverBackground)');
|
||||
document.body.style.setProperty('--el-switch-on-color', 'var(--main-color)');
|
||||
document.body.style.setProperty('--el-border', 'var(--sidebar)');
|
||||
document.body.style.setProperty('--el-border-color-light', 'var(--sidebar)');
|
||||
document.body.style.setProperty('--el-border-color-lighter', 'var(--sidebar)');
|
||||
document.body.style.setProperty('--el-bg-color-overlay', 'transplant');
|
||||
|
||||
|
||||
// signal height
|
||||
document.body.style.setProperty('--display-signal-info-height', globalSetting.displaySignalHeight + 'px');
|
||||
|
||||
|
||||
const uint8array = await readVcdFile();
|
||||
const vcdstream = await getVcdStream();
|
||||
@ -91,4 +97,5 @@ export default {
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
@ -34,6 +34,8 @@ import { reactive } from 'vue';
|
||||
import TreeView from '@/components/treeview';
|
||||
import Setting from '@/components/setting';
|
||||
import About from '@/components/about';
|
||||
import { emitter } from '@/hook/global';
|
||||
|
||||
|
||||
export default {
|
||||
name: 'right-nav',
|
||||
@ -71,6 +73,14 @@ export default {
|
||||
}
|
||||
});
|
||||
|
||||
emitter.on('right-nav', index => {
|
||||
if (controlPanel.currentIndex === index) {
|
||||
controlPanel.currentIndex = -1;
|
||||
} else {
|
||||
controlPanel.currentIndex = index;
|
||||
}
|
||||
})
|
||||
|
||||
return {
|
||||
props,
|
||||
controlPanel
|
||||
@ -82,7 +92,7 @@ export default {
|
||||
<style>
|
||||
.vcd-right-nav {
|
||||
display: flex;
|
||||
position: absolute;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
@ -3,11 +3,17 @@
|
||||
<div class="setting-section">
|
||||
<h2>{{ t('search-setting') }}</h2>
|
||||
<div class="setting-option">
|
||||
<span class="option-title">{{ t('case-sensitivity') }}</span>
|
||||
<el-switch v-model="globalSetting.caseSensitivity" />
|
||||
<span class="option-title">{{ t('search-case-sensitivity') }}</span>
|
||||
<el-switch v-model="globalSetting.caseSensitivity" size="large"/>
|
||||
</div>
|
||||
|
||||
<br>
|
||||
|
||||
<div class="setting-option">
|
||||
<span class="option-title">{{ t('search-display-parent-only') }}</span>
|
||||
<el-switch v-model="globalSetting.displayParentOnly" size="large"/>
|
||||
</div>
|
||||
|
||||
|
||||
<br>
|
||||
|
||||
<div class="setting-option">
|
||||
@ -26,7 +32,6 @@
|
||||
<h2>{{ t('general-setting') }}</h2>
|
||||
<div class="setting-option" style="width: 300px;">
|
||||
<span class="option-title">{{ t('language-setting') }}</span>
|
||||
|
||||
<el-select name="language-setting" class="language-setting" v-model="locale">
|
||||
<el-option
|
||||
v-for="option in languageSetting.options"
|
||||
@ -36,7 +41,16 @@
|
||||
</el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
|
||||
<div class="setting-section">
|
||||
<h2>{{ t('appearance-setting') }}</h2>
|
||||
<div class="setting-option">
|
||||
<span class="option-title">{{ t('display-wave-height') }}</span>
|
||||
<el-input-number v-model="globalSetting.displaySignalHeight" :min="1" :max="100" @change="safeModifySignalTrackHeight" size="large"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@ -45,6 +59,7 @@
|
||||
import { reactive } from 'vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { globalSetting } from '@/hook/global';
|
||||
import { debounceWrapper } from '@/hook/utils';
|
||||
|
||||
export default {
|
||||
name: 'dide-setting',
|
||||
@ -64,10 +79,18 @@ export default {
|
||||
]
|
||||
});
|
||||
|
||||
function modifySignalTrackHeight() {
|
||||
document.body.style.setProperty('--display-signal-info-height', globalSetting.displaySignalHeight + 'px');
|
||||
}
|
||||
|
||||
const safeModifySignalTrackHeight = debounceWrapper(modifySignalTrackHeight, 200);
|
||||
|
||||
|
||||
return {
|
||||
t,
|
||||
languageSetting,
|
||||
globalSetting,
|
||||
safeModifySignalTrackHeight,
|
||||
locale
|
||||
}
|
||||
}
|
||||
|
||||
118
src/components/sidebar.vue
Normal file
118
src/components/sidebar.vue
Normal file
@ -0,0 +1,118 @@
|
||||
<template>
|
||||
<div class="vcd-sidebar-wrapper">
|
||||
<div class="display-signal-wrapper">
|
||||
<div class="display-signal-item"
|
||||
v-for="(signal, index) in globalLookup.currentWires" :key="index">
|
||||
<div class="signal-color-vendor">
|
||||
<span class="iconfont icon-wave-square"></span>
|
||||
</div>
|
||||
<div class="signal-info">
|
||||
{{ signal.name }}
|
||||
</div>
|
||||
<div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="add-signal-button" @click="addSignal">
|
||||
<span class="iconfont icon-Collections"></span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
/* eslint-disable */
|
||||
import { reactive } from 'vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { emitter, globalLookup } from '@/hook/global';
|
||||
|
||||
export default {
|
||||
name: 'sidebar',
|
||||
setup() {
|
||||
const { t } = useI18n();
|
||||
|
||||
function addSignal() {
|
||||
emitter.emit('right-nav', 0);
|
||||
}
|
||||
|
||||
return {
|
||||
t,
|
||||
globalLookup,
|
||||
addSignal
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.vcd-sidebar-wrapper {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
}
|
||||
|
||||
.add-signal-button {
|
||||
margin: 10px;
|
||||
padding: 10px 25px;
|
||||
background-color: var(--color-deepPurple);
|
||||
border-radius: 0 0 1.5em 1.5em;
|
||||
color: var(--sidebar-item-text);
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
.add-signal-button > span {
|
||||
font-size: 30px;
|
||||
}
|
||||
|
||||
.display-signal-wrapper {
|
||||
margin: 10px;
|
||||
padding: 10px;
|
||||
background-color: var(--sidebar);
|
||||
border: solid 1px var(--sidebar-border);
|
||||
min-width: var(--sidebar-min-width);
|
||||
min-height: 50vh;
|
||||
box-shadow: 0 0 15px 1px rgb(16, 16, 16);
|
||||
}
|
||||
|
||||
.display-signal-item {
|
||||
border-radius: .5em;
|
||||
background-color: var(--background);
|
||||
margin: 5px;
|
||||
height: var(--display-signal-info-height);
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.display-signal-item::selection {
|
||||
background-color: none;
|
||||
}
|
||||
|
||||
.signal-color-vendor {
|
||||
width: 30px;
|
||||
height: 100%;
|
||||
margin: 0 10px 0 0;
|
||||
border-radius: .4em 0 0 .4em;
|
||||
background-color: #7CA532;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.signal-color-vendor > span {
|
||||
font-size: 15px;
|
||||
color: var(--background);
|
||||
}
|
||||
|
||||
.signal-info {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.signal-info::selection {
|
||||
background: none;
|
||||
cursor: none;
|
||||
}
|
||||
|
||||
</style>
|
||||
@ -71,12 +71,14 @@ export default {
|
||||
border-radius: 1.0em;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
transition: height .5s ease-in-out;
|
||||
}
|
||||
|
||||
.vcd-module-wrapper {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
overflow: scroll;
|
||||
transition: flex .5s ease-in-out;
|
||||
}
|
||||
|
||||
</style>
|
||||
@ -53,13 +53,15 @@ export default {
|
||||
const stacks = [ { name: '', body: globalLookup.topModules } ];
|
||||
const searchRule = new Set(globalSetting.searchScope);
|
||||
const caseSensitivity = globalSetting.caseSensitivity;
|
||||
const displayParentOnly = globalSetting.displayParentOnly;
|
||||
|
||||
while (stacks.length > 0) {
|
||||
const p = stacks.pop();
|
||||
if (p.body && p.body.length) {
|
||||
p.body.forEach(mod => stacks.push(mod));
|
||||
}
|
||||
|
||||
const searchResultItem = makeSearchResultItem(searchString, p, searchRule, caseSensitivity);
|
||||
const searchResultItem = makeSearchResultItem(searchString, p, searchRule, caseSensitivity, displayParentOnly);
|
||||
if (searchResultItem) {
|
||||
searchManage.searchResult.push(searchResultItem);
|
||||
}
|
||||
@ -95,6 +97,7 @@ export default {
|
||||
.tree-view-search-wrapper {
|
||||
min-height: 30px;
|
||||
padding: 10px;
|
||||
transition: flex .5s ease-in-out;
|
||||
}
|
||||
|
||||
.search-result {
|
||||
|
||||
@ -9,8 +9,8 @@
|
||||
:class="globalLookup.currentWires.has(signal) ? 'vcd-treeview-selected' : ''">
|
||||
<div><span class="iconfont icon-wave-square"></span> {{ signal.name }}</div>
|
||||
<div>
|
||||
<div :class="signal.caption ? 'vcd-signal-signal-caption' : ''">
|
||||
{{ signal.caption }}
|
||||
<div :class="signal.size > 1 ? 'vcd-signal-signal-caption' : ''">
|
||||
{{ makeSignalCaption(signal) }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -38,15 +38,13 @@ export default {
|
||||
|
||||
emitter.on('tree-view', sendWires => {
|
||||
signals.content.length = 0;
|
||||
for (const signal of sendWires) {
|
||||
const caption = signal.size === 1 ? '' : `${signal.size - 1}:0`;
|
||||
signals.content.push({
|
||||
name: signal.name,
|
||||
caption
|
||||
});
|
||||
}
|
||||
signals.content = sendWires;
|
||||
});
|
||||
|
||||
function makeSignalCaption(signal) {
|
||||
return signal.size === 1 ? '' : `${signal.size - 1}:0`;
|
||||
}
|
||||
|
||||
function clickItem(signal) {
|
||||
if (globalLookup.currentWires.has(signal)) {
|
||||
globalLookup.currentWires.delete(signal);
|
||||
@ -59,6 +57,7 @@ export default {
|
||||
signals,
|
||||
clickItem,
|
||||
globalLookup,
|
||||
makeSignalCaption,
|
||||
t
|
||||
}
|
||||
}
|
||||
@ -67,7 +66,7 @@ export default {
|
||||
|
||||
<style>
|
||||
.icon-wave-square {
|
||||
color: #00F600;
|
||||
color: var(--signal-default-color);
|
||||
}
|
||||
|
||||
.vcd-signal-signals-display {
|
||||
|
||||
@ -27,6 +27,8 @@ const globalLookup = reactive({
|
||||
|
||||
const globalSetting = reactive({
|
||||
caseSensitivity: false,
|
||||
displayParentOnly: false,
|
||||
displaySignalHeight: 50,
|
||||
searchMode: 'so', // so, mo, sm
|
||||
searchScope: ['wire', 'reg']
|
||||
})
|
||||
|
||||
@ -51,9 +51,10 @@ function debounceWrapper(fn, delay) {
|
||||
* }} module
|
||||
* @param { Set<string> } searchScope
|
||||
* @param { boolean } caseSensitivity
|
||||
* @param { boolean } displayParentOnly
|
||||
* @returns { { htmlString: string, module } | null }
|
||||
*/
|
||||
function makeSearchResultItem(searchString, module, searchScope, caseSensitivity) {
|
||||
function makeSearchResultItem(searchString, module, searchScope, caseSensitivity, displayParentOnly) {
|
||||
if (searchScope.has(module.type)) {
|
||||
let pattern = module.name;
|
||||
if (!caseSensitivity) {
|
||||
@ -62,13 +63,18 @@ function makeSearchResultItem(searchString, module, searchScope, caseSensitivity
|
||||
}
|
||||
if (pattern.includes(searchString)) {
|
||||
let p = module;
|
||||
|
||||
const deps = [];
|
||||
while (p) {
|
||||
if (p.name && p.type) {
|
||||
deps.push(p);
|
||||
}
|
||||
p = p.parent;
|
||||
if (displayParentOnly && deps.length == 2) {
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
let htmlString = '';
|
||||
for (let i = deps.length - 1; i >= 0; -- i) {
|
||||
const mod = deps[i];
|
||||
|
||||
@ -3,15 +3,22 @@
|
||||
"signal": "Signals",
|
||||
"search-signal": "Search Signal",
|
||||
"language-setting": "Language",
|
||||
|
||||
"search-setting": "Search",
|
||||
"case-sensitivity": "case sensitivity",
|
||||
"search-case-sensitivity": "Case Sensitivity",
|
||||
"search-mode": "search mode",
|
||||
"search-scope": "search scope",
|
||||
"search-scope": "Search Scope",
|
||||
"search-display-parent-only": "Display Parent Module Only",
|
||||
"search-nothing": "Find Nothing",
|
||||
|
||||
"signal-only": "Signal Only",
|
||||
"module-only": "Module Only",
|
||||
"signal-module": "Signal + Module",
|
||||
"general-setting": "General",
|
||||
|
||||
"appearance-setting": "Appearance",
|
||||
"display-wave-height": "Height of Wave Track",
|
||||
|
||||
"current-version": "current version",
|
||||
"search-nothing": "find nothing",
|
||||
"copyright": "The copyright of this software belongs to <a href=\"https://github.com/Digital-EDA\" target=\"_blank\">Digital-IDE</a> project team. Welcome to <a href=\"https://github.com/Digital-EDA/Digital-IDE\">Star</a>."
|
||||
}
|
||||
@ -3,15 +3,22 @@
|
||||
"signal": "信号",
|
||||
"search-signal": "搜索信号",
|
||||
"language-setting": "语言",
|
||||
|
||||
"search-setting": "搜索",
|
||||
"case-sensitivity": "区分大小写",
|
||||
"search-case-sensitivity": "区分大小写",
|
||||
"search-mode": "搜索模式",
|
||||
"search-scope": "搜索范围",
|
||||
"search-display-parent-only": "只展示父模块",
|
||||
"search-nothing": "没有找到任何符号",
|
||||
|
||||
"signal-only": "信号",
|
||||
"module-only": "模块",
|
||||
"signal-module": "信号 + 模块",
|
||||
"general-setting": "通用",
|
||||
|
||||
"appearance-setting": "外观",
|
||||
"display-wave-height": "波形轨道的高度",
|
||||
|
||||
"current-version": "当前版本",
|
||||
"search-nothing": "没有找到任何符号",
|
||||
"copyright": "本软件版权归 <a href=\"https://github.com/Digital-EDA\" target=\"_blank\">Digital-IDE</a> 项目组所有，欢迎 <a href=\"https://github.com/Digital-EDA/Digital-IDE\">Star</a>。"
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user