imacat/lucia-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Discover: sidebarTraces layout done.

Browse Source
This commit is contained in:
chiayin
2023-03-20 15:21:01 +08:00
parent 4f107a80dd
commit 1653b85afc
6 changed files with 304 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
src/views/Discover/index.vue
View File

@@ -2,26 +2,26 @@
<!-- Sidebar: Switch data type -->
<div class="flex flex-col justify-between py-4 w-14 h-screen-main absolute bottom-0 left-0 z-10" :class="sidebarLeftValue? 'bg-neutral-100':''">
<ul class="space-y-4 flex flex-col justify-center items-center">
<li class="inline-flex items-center justify-center border border-neutral-500 rounded-full w-9 h-9 cursor-pointer bg-neutral-100 drop-shadow" @click="sidebarView = true">
<span class="material-symbols-outlined text-2xl text-neutral-500">
<li class="inline-flex items-center justify-center border border-neutral-500 rounded-full w-9 h-9 cursor-pointer bg-neutral-100 drop-shadow hover:border-primary" @click="sidebarView = true" :class="{'border-primary': sidebarView}">
<span class="material-symbols-outlined text-2xl hover:text-primary p-1.5" :class="[sidebarView ? 'text-primary' : 'text-neutral-500']">
track_changes
</span>
</li>
<li class="inline-flex items-center justify-center border border-neutral-500 rounded-full w-9 h-9 cursor-pointer bg-neutral-100 drop-shadow">
<span class="material-symbols-outlined text-2xl text-neutral-500">
<li class="inline-flex items-center justify-center border border-neutral-500 rounded-full w-9 h-9 cursor-pointer bg-neutral-100 drop-shadow hover:border-primary">
<span class="material-symbols-outlined text-2xl text-neutral-500 hover:text-primary p-1.5">
tornado
</span>
</li>
<li class="inline-flex items-center justify-center border border-neutral-500 rounded-full w-9 h-9 cursor-pointer bg-neutral-100 drop-shadow" @click="sidebarTraces = true">
<span class="material-symbols-outlined text-2xl text-neutral-500">
<li class="inline-flex items-center justify-center border border-neutral-500 rounded-full w-9 h-9 cursor-pointer bg-neutral-100 drop-shadow hover:border-primary" @click="sidebarTraces = true" :class="{'border-primary': sidebarTraces}">
<span class="material-symbols-outlined text-2xl hover:text-primary p-1.5" :class="[sidebarTraces ? 'text-primary' : 'text-neutral-500']">
rebase
</span>
</li>
</ul>
<ul class="flex flex-col justify-center items-center">
<li class="inline-flex items-center justify-center border border-neutral-500 rounded-full w-9 h-9 cursor-pointer bg-neutral-100 drop-shadow">
<span class="material-symbols-outlined text-2xl text-neutral-500">
<li class="inline-flex items-center justify-center border border-neutral-500 rounded-full w-9 h-9 cursor-pointer bg-neutral-100 drop-shadow hover:border-primary">
<span class="material-symbols-outlined text-2xl text-neutral-500 hover:text-primary p-1.5">
highlight
</span>
</li>
@@ -36,8 +36,8 @@
<!-- Sidebar: State -->
<div class="bg-transparent py-4 w-14 h-screen-main z-10 bottom-0 right-0 absolute">
<ul class="flex flex-col justify-center items-center">
<li class="inline-flex items-center justify-center border border-neutral-500 rounded-full w-9 h-9 cursor-pointer bg-neutral-100 drop-shadow" @click="sidebarState = true">
<span class="material-symbols-outlined text-2xl text-neutral-500">
<li class="inline-flex items-center justify-center border border-neutral-500 rounded-full w-9 h-9 cursor-pointer bg-neutral-100 drop-shadow hover:border-primary" @click="sidebarState = true" :class="{'border-primary': sidebarState}">
<span class="material-symbols-outlined text-2xl text-neutral-500 hover:text-primary p-1.5" :class="[sidebarState ? 'text-primary' : 'text-neutral-500']">
info
</span>
</li>
@@ -47,27 +47,7 @@
<!-- Sidebar Model -->
<SidebarView v-model:visible="sidebarView" @switch-map-type="switchMapType" @switch-curve-styles="switchCurveStyles" @switch-rank="switchRank" @switch-data-layer-type="switchDataLayerType" ></SidebarView>
<SidebarState v-model:visible="sidebarState" :insights="insights" :stats="stats"></SidebarState>
<Sidebar v-model:visible="sidebarTraces" :closeIcon="'pi pi-chevron-left'" :modal="false" position="left" :dismissable="true" class="!w-11/12">
<template #header>
<p class="h1">Traces</p>
</template>
<div class="p-4">
<!-- Trace List -->
<section>
<p class="h2">Trace List (25)</p>
<p class="text-primary"><span class="material-symbols-outlined">info</span>Click trace number to see more.</p>
</section>
<!-- Trace item Table -->
<section></section>
</div>
</Sidebar>
<SidebarTraces v-model:visible="sidebarTraces"></SidebarTraces>
</template>
<script>
@@ -77,6 +57,7 @@ import AllMapDataStore from '@/stores/allMapData.js';
import cytoscapeMap from '@/module/cytoscapeMap.js';
import SidebarView from '@/components/Discover/sidebarView.vue';
import SidebarState from '@/components/Discover/sidebarState.vue';
import SidebarTraces from '@/components/Discover/sidebarTraces.vue';
export default {
setup() {
@@ -97,6 +78,7 @@ export default {
components: {
SidebarView,
SidebarState,
SidebarTraces,
},
data() {
return {