Commit 39031e0a authored by Peter Corlett's avatar Peter Corlett

[UI] #184 Tweaked layout of hide/show tree/control/sidebar buttons.

parent fbeac876
...@@ -5,13 +5,27 @@ ...@@ -5,13 +5,27 @@
#graph-explorer #toolbar ul { #graph-explorer #toolbar ul {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
margin: 0;
} }
#graph-explorer #toolbar ul li { #graph-explorer #toolbar ul li {
display: flex; display: flex;
max-width: 200px; max-width: 200px;
} }
#graph-explorer .row.controls { #graph-explorer #toggle-container {
height: 79px; position: absolute;
z-index: 999;
right: 15px;
top: 10px;
width: 70%;
}
#graph-explorer #controls-container {
position: absolute;
z-index: 999;
backdrop-filter: blur(4px);
background: rgba(255, 255, 255, 0.75);
overflow: auto;
left: 0;
right: 0;
} }
#graph-explorer .graph-tree { #graph-explorer .graph-tree {
position: absolute; position: absolute;
......
...@@ -13,12 +13,26 @@ ...@@ -13,12 +13,26 @@
ul ul
display: flex display: flex
flex-direction: row flex-direction: row
margin: 0
li li
display: flex display: flex
max-width: 200px max-width: 200px
.row.controls #toggle-container
height: 79px position: absolute
z-index: 999 // needs to appear above solid menu bar
right: 15px
top: 10px
width: 70%
#controls-container
position: absolute
z-index: 999 // needs to appear above graph elements
backdrop-filter: blur(4px)
background: rgba(255,255,255,75%)
overflow: auto
left: 0
right: 0
.graph-tree .graph-tree
@include sidePanelCommon @include sidePanelCommon
......
...@@ -115,15 +115,14 @@ explorerCpt = R.hooksComponent "G.C.GraphExplorer.explorer" cpt ...@@ -115,15 +115,14 @@ explorerCpt = R.hooksComponent "G.C.GraphExplorer.explorer" cpt
pure $ pure $
RH.div RH.div
{ id: "graph-explorer" } { id: "graph-explorer" }
[ R2.row [ rowToggle
[ outer
[ inner
[ row1
[ col [ pullLeft [ Toggle.treeToggleButton controls.showTree ] ] [ col [ pullLeft [ Toggle.treeToggleButton controls.showTree ] ]
, col [ Toggle.controlsToggleButton controls.showControls ] , col [ Toggle.controlsToggleButton controls.showControls ]
, col [ pullRight [ Toggle.sidebarToggleButton controls.showSidePanel ] ] , col [ pullRight [ Toggle.sidebarToggleButton controls.showSidePanel ] ]
] ], R2.row
, rowControls [ Controls.controls controls ] [ outer
[ inner
[ rowControls [ Controls.controls controls ]
, R2.row [ , R2.row [
tree { frontends tree { frontends
, mCurrentRoute , mCurrentRoute
...@@ -156,8 +155,8 @@ explorerCpt = R.hooksComponent "G.C.GraphExplorer.explorer" cpt ...@@ -156,8 +155,8 @@ explorerCpt = R.hooksComponent "G.C.GraphExplorer.explorer" cpt
outer = RH.div { className: "col-md-12" } outer = RH.div { className: "col-md-12" }
inner = RH.div { className: "container-fluid", style: { paddingTop: "90px" } } inner = RH.div { className: "container-fluid", style: { paddingTop: "90px" } }
row1 = RH.div { className: "row", style: { paddingBottom: "10px", marginTop: "-24px" } } rowToggle = RH.div { id: "toggle-container" }
rowControls = RH.div { className: "row controls" } rowControls = RH.div { id: "controls-container" }
col = RH.div { className: "col-md-4" } col = RH.div { className: "col-md-4" }
pullLeft = RH.div { className: "pull-left" } pullLeft = RH.div { className: "pull-left" }
pullRight = RH.div { className: "pull-right" } pullRight = RH.div { className: "pull-right" }
......
...@@ -134,7 +134,7 @@ controlsCpt = R.hooksComponent "GraphControls" cpt ...@@ -134,7 +134,7 @@ controlsCpt = R.hooksComponent "GraphControls" cpt
pure $ case getShowControls props of pure $ case getShowControls props of
false -> RH.div {} [] false -> RH.div {} []
true -> RH.div { className: "col-md-12", style: { paddingBottom: "10px" } } true -> RH.div {}
[ R2.menu { id: "toolbar" } [ R2.menu { id: "toolbar" }
[ RH.ul {} [ RH.ul {}
[ -- change type button (?) [ -- change type button (?)
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment