Skip to content

Commit

Permalink
NN-366 Redesign/implement & organize the concept maintoolbar
Browse files Browse the repository at this point in the history 
-created new structure for windows/toolbar
-created new design & alignment
  • Loading branch information
@TripZz
TripZz committed Oct 17, 2023
1 parent add0fda commit 3d18db0
Show file tree
Hide file tree
Showing 15 changed files with 176 additions and 304 deletions.
Binary file added frontend/src/assets/toolbar/proteinselect.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
8 changes: 4 additions & 4 deletions frontend/src/components/term_graph/TermToolBar.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -65,13 +65,13 @@

<script>
import ExportScreen from '@/components/toolbar/ExportScreen.vue'
import NodeLabelSelect from '@/components/toolbar/NodeLabelSelect.vue'
import ExportScreen from '@/components/toolbar/modules/ExportScreen.vue'
import NodeLabelSelect from '@/components/toolbar/modules/NodeLabelSelect.vue'
import TermConnectedGraph from '@/components/term_graph/TermConnectedGraph.vue'
import TermSearch from '@/components/term_graph/TermSearch.vue'
import FDRValue from '@/components/term_graph/FDRValue.vue'
import SelectionWindow from '@/components/toolbar/SelectionWindow.vue'
import SelectionList from '@/components/toolbar/SelectionList.vue'
import SelectionWindow from '@/components/toolbar/modules/SelectionWindow.vue'
import SelectionList from '@/components/toolbar/modules/SelectionList.vue'
export default {
Expand Down
193 changes: 40 additions & 153 deletions frontend/src/components/toolbar/MainToolBar.vue
View file
Original file line number Diff line number Diff line change
@@ -1,19 +1,19 @@
<template >
<div>
<ul class="menu-bar">
<ul class="menu-bar" :class="{ full: tools_active == true }">
<li v-on:click="switch_home()">
<img src="@/assets/toolbar/home.png" alt="Home Icon">
</li>
<li v-on:mouseover="search_active=true"
v-on:mouseleave="search_active=false">
<img src="@/assets/toolbar/search.png" alt="Search Icon">
<li v-on:click="protein_active=true">
<img src="@/assets/toolbar/proteinselect.png" alt="Search Icon">
</li>
<li v-on:mouseover="tools_active=true"
v-on:mouseleave="tools_active=false">
<img src="@/assets/toolbar/menu-burger.png" alt="Tool Icon">
</li>
<li v-on:click="switch_terms()">
<img src="@/assets/toolbar/share.png" alt="Graph Icon">
<li v-on:mouseover="tools_active=true"
v-on:mouseleave="tools_active=false">
<img src="@/assets/toolbar/settings-sliders.png" alt="Graph Icon">
</li>
<li v-on:click="center()">
<img src="@/assets/toolbar/expand.png" alt="Center Icon">
Expand All @@ -22,109 +22,35 @@
<img src="@/assets/toolbar/3d-icon.png" alt="3D Icon">
</li>
</ul>
<div class="menu-window" v-show="tools_active == true"
v-on:mouseleave="tools_active = false;"
v-on:mouseover="tools_active=true;">

<div class="menu-items">
<ExportScreen
:type="screen_type"
></ExportScreen>
<ExportGraph></ExportGraph>
<NodeLabelSelect
:type="screen_type"
></NodeLabelSelect>
<ProteinList
:protein_list='protein_list'
@status_changed = 'status = $event'
></ProteinList>
<SelectionWindow
@selection_status_changed = 'selection_status = $event'
></SelectionWindow>
<EdgeOpacity></EdgeOpacity>
<DEValue></DEValue>

</div>



</div>
<div class="search-window" v-show="search_active == true"
v-on:mouseleave="search_active = false;"
v-on:mouseover="search_active=true;">

<div class="search-item">
<SearchBar
:gephi_data='gephi_data'
></SearchBar>
</div>
</div>
<div id="protein_highlight" v-show="status === true " class="highlight_list">
<div id="protein_highlight_header">
<div class="text">
<div class="headertext">
<span>Highlight Proteins</span>
<button v-on:click="status=false" id="highlight-btn-min"></button>
</div>
</div>
</div>
<div class="highlight_main">
<textarea v-model="raw_text" rows="10" cols="30" autofocus></textarea>
<button v-on:click="highlight(raw_text)" id="highlight_protein">Go</button>
</div>
</div>
<div id="selection_highlight" v-show="selection_status === true " class="highlight_list">
<div id="selection_highlight_header">
<div class="text">
<div class="headertext">
<span>Selection Window</span>
<button v-on:click="selection_status=false" id="highlight-btn-min"></button>
</div>
</div>
</div>
<div class="highlight_main">
<SelectionList
:gephi_data='gephi_data'
></SelectionList>

</div>
</div>
<MenuWindow v-if="tools_active"
:tools_active = 'tools_active'
@tools_active_changed = 'tools_active = $event'
></MenuWindow>
<ProteinList v-if="protein_active"
@protein_active_changed = 'protein_active = $event'>
</ProteinList>

</div>
</template>

<script>
import ExportScreen from '@/components/toolbar/ExportScreen.vue'
import DEValue from '@/components/toolbar/DEValue.vue'
import ExportGraph from '@/components/toolbar/ExportGraph.vue'
import NodeLabelSelect from '@/components/toolbar/NodeLabelSelect.vue'
import ProteinList from '@/components/toolbar/ProteinList.vue'
import SelectionWindow from '@/components/toolbar/SelectionWindow.vue'
import SearchBar from '@/components/toolbar/SearchBar.vue'
import EdgeOpacity from '@/components/toolbar/EdgeOpacity.vue'
import SelectionList from '@/components/toolbar/SelectionList.vue'
import MenuWindow from '@/components/toolbar/windows/MenuWindow.vue'
// import ProteinList from '@/components/toolbar/ProteinList.vue'
import ProteinList from '@/components/toolbar/modules/ProteinList.vue'
export default {
name: 'MainToolBar',
props: ['gephi_data'],
emits:['active_subset_changed'],
components: {
ExportScreen,
DEValue,
ExportGraph,
MenuWindow,
ProteinList,
SelectionWindow,
SearchBar,
EdgeOpacity,
SelectionList,
NodeLabelSelect
},
data() {
return {
tools_active: false,
search_active: false,
protein_active: false,
screen_type: "protein",
snapshot: null,
status: false,
Expand Down Expand Up @@ -162,31 +88,40 @@ export default {
},
threeview() {
this.emitter.emit("threeView");
},
open_proteinlist() {
}
}
}
</script>

<style>
.menu-bar {
position: fixed;
border-radius: 25px;
height: fit-content;
display: inline-flex;
background-color: hsla(0,0%,100%,.15);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
align-items: center;
padding: 0 10px;
margin: 10px 0 0 0;
position: absolute;
left: 3.515%;
border-radius: 5px;
height: 3.98%;
width: 22%;
display: inline-flex;
background: #D9D9D9;
backdrop-filter: blur(7.5px);
-webkit-backdrop-filter: blur(7.5px);
align-items: center;
padding: 0 10px;
z-index: 99;
}
.full {
border-radius: 5px 5px 0 0;
}
.menu-bar li {
list-style: none;
color: white;
color: #0A0A1A;
font-family: sans-serif;
font-weight: bold;
padding: 12px;
padding: 10px;
margin: 0 8px;
position: relative;
cursor: pointer;
Expand All @@ -206,7 +141,7 @@ export default {
width: 100%;
z-index:-1;
transition: .2s;
border-radius: 25px;
border-radius: 5px;
}
.menu-bar li:hover::before {
background: linear-gradient(to bottom, #e8edec, #d2d1d3);
Expand All @@ -224,52 +159,4 @@ export default {
color: black;
}
.menu-window {
background-color: hsla(0,0%,100%,.1);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
width: 280px;
margin: 10px 0 0 17.5px;
height: 600px;
position: fixed;
border-radius: 20px;
justify-content: center;
}
.search-window {
background-color: hsla(0,0%,100%,.1);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
width: 280px;
margin: 10px 0 0 17.5px;
height: 400px;
position: fixed;
border-radius: 20px;
justify-content: center;
}
.menu-items {
margin-top: 50px;
width: 100%;
text-align: center;
color: white;
}
.search-item {
display: flex;
position: relative;
margin-top: 50px;
width: 100%;
align-content: center;
justify-content: center;
}
.menu-bar li img {
width: 30px;
filter: invert(1);
}
.menu-bar li:hover img {
filter: invert(0);
}
</style>
117 changes: 0 additions & 117 deletions frontend/src/components/toolbar/SearchBar.vue
View file

This file was deleted.

0 frontend/src/components/toolbar/DEValue.vue → ...rc/components/toolbar/modules/DEValue.vue
View file
File renamed without changes.
0 ...nd/src/components/toolbar/EdgeOpacity.vue → ...omponents/toolbar/modules/EdgeOpacity.vue
View file
File renamed without changes.
Loading

0 comments on commit 3d18db0

Please sign in to comment.