143 lines
3.7 KiB
Vue
143 lines
3.7 KiB
Vue
<template>
|
|
<div class="netlist-right-nav">
|
|
|
|
<div class="horizontal-scalable-wrapper" :style="resizerWrapperStyle"
|
|
v-show="controlPanel.currentIndex > -1">
|
|
<div class="horizontal-resizer"
|
|
@mousedown="horizontalResizer.mousedown()"
|
|
@mouseenter="horizontalResizer.hover = true"
|
|
@mouseleave="horizontalResizer.hover = false"
|
|
:class="{ 'active': horizontalResizer.active || horizontalResizer.hover }"
|
|
></div>
|
|
<div class="netlist-function-panel">
|
|
<TreeView
|
|
v-show="controlPanel.currentIndex === 0"></TreeView>
|
|
<Setting
|
|
v-show="controlPanel.currentIndex === 1"></Setting>
|
|
<About
|
|
v-show="controlPanel.currentIndex === 2"></About>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="netlist-function-option">
|
|
<div class="netlist-control-panel-wrapper">
|
|
<div class="netlist-control-panel-icon digital-ide-icon" />
|
|
</div>
|
|
<hr>
|
|
<div class="netlist-control-panel-wrapper"
|
|
v-for="(section, index) of controlPanel.sections" :key="index"
|
|
@click="controlPanel.click(index)"
|
|
>
|
|
<div :class="controlPanel.currentIndex === index ? 'netlist-control-panel-active': ''"><span
|
|
class="netlist-control-panel-icon"
|
|
:class="section.iconClass"
|
|
></span></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { computed, defineComponent, onMounted, reactive } from 'vue';
|
|
|
|
import TreeView from '@/components/treeview';
|
|
import Setting from '@/components/setting';
|
|
import About from '@/components/about';
|
|
import { emitter } from '@/hook/global';
|
|
import { controlPanel, horizontalResizer, resize } from './right-nav';
|
|
|
|
defineComponent({ name: 'right-nav' });
|
|
|
|
emitter.on('right-nav', index => {
|
|
if (controlPanel.currentIndex === index) {
|
|
controlPanel.currentIndex = -1;
|
|
} else {
|
|
controlPanel.currentIndex = index;
|
|
}
|
|
});
|
|
|
|
|
|
onMounted(() => {
|
|
document.addEventListener('mouseup', () => {
|
|
horizontalResizer.active = false;
|
|
document.removeEventListener('mousemove', resize);
|
|
});
|
|
});
|
|
|
|
const resizerWrapperStyle = computed(() => ({
|
|
width: horizontalResizer.width + 'px'
|
|
}));
|
|
|
|
</script>
|
|
|
|
<style>
|
|
.netlist-right-nav {
|
|
display: flex;
|
|
position: fixed;
|
|
top: 0;
|
|
right: 0;
|
|
z-index: 230;
|
|
}
|
|
|
|
.netlist-function-panel {
|
|
display: flex;
|
|
background-color: var(--sidebar);
|
|
height: 100vh;
|
|
box-shadow: var(--gray-box-shadow-1);
|
|
z-index: 200;
|
|
width: 100vw;
|
|
user-select: none;
|
|
}
|
|
|
|
.horizontal-scalable-wrapper {
|
|
position: relative;
|
|
}
|
|
|
|
.horizontal-resizer {
|
|
position: absolute;
|
|
left: 0;
|
|
width: 2px;
|
|
height: 100%;
|
|
cursor: ew-resize;
|
|
transition: var(--animation-5s);
|
|
z-index: 201;
|
|
}
|
|
|
|
.horizontal-resizer.active {
|
|
background-color: var(--main-color);
|
|
transition: var(--animation-5s);
|
|
}
|
|
|
|
.netlist-function-option {
|
|
width: fit-content;
|
|
height: 100vh;
|
|
background-color: var(--sidebar);
|
|
box-shadow: var(--gray-box-shadow-1);
|
|
z-index: 201;
|
|
}
|
|
|
|
.netlist-control-panel-wrapper {
|
|
width: var(--right-nav-width);
|
|
height: var(--right-nav-width);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-around;
|
|
cursor: pointer;
|
|
margin-top: 10px;
|
|
color: var(--vscode-foreground);
|
|
}
|
|
|
|
.netlist-control-panel-wrapper:hover {
|
|
color: var(--vscode-icon-foreground);
|
|
}
|
|
|
|
.netlist-control-panel-icon {
|
|
width: 45px;
|
|
height: 45px;
|
|
font-size: 30px;
|
|
}
|
|
|
|
.netlist-control-panel-active {
|
|
color: var(--main-color);
|
|
}
|
|
</style> |