Commit db9ffc69 authored by Przemyslaw Kaminski's avatar Przemyslaw Kaminski

[Graph] fixes to tree/controls/sidebar layout

Now opening one of them doesn't move the graph.
parent b083b6c3
......@@ -10,6 +10,16 @@
display: flex;
max-width: 200px;
}
#graph-explorer .row.controls {
height: 79px;
}
#graph-explorer .graph-tree {
position: absolute;
top: 120px;
max-height: 600px;
overflow-y: scroll;
z-index: 1;
}
#graph-explorer #sp-container {
position: absolute;
left: 70%;
......@@ -17,6 +27,8 @@
z-index: 1;
border: 1px white solid;
background-color: white;
max-height: 600px;
overflow-y: scroll;
}
#graph-explorer #sp-container #myTab {
marginBottom: 18px;
......
......@@ -9,6 +9,15 @@
li
display: flex
max-width: 200px
.row.controls
height: 79px
.graph-tree
position: absolute
top: 120px
max-height: 600px
overflow-y: scroll
z-index: 1
#sp-container
position: absolute
......@@ -17,6 +26,8 @@
z-index: 1
border: 1px white solid
background-color: white
max-height: 600px
overflow-y: scroll
#myTab
marginBottom: 18px
......
......@@ -108,7 +108,7 @@ explorerCpt = R.hooksComponent "G.C.GraphExplorer.explorer" cpt
, col [ Toggle.controlsToggleButton controls.showControls ]
, col [ pullRight [ Toggle.sidebarToggleButton controls.showSidePanel ] ]
]
, row [ Controls.controls controls ]
, rowControls [ Controls.controls controls ]
, row [ tree (fst controls.showTree) {sessions, mCurrentRoute, frontends} (snd showLogin)
, RH.div { ref: graphRef, id: "graph-view", className: graphClassName controls, style: {height: "95%"} } [] -- graph container
, graphView { controls
......@@ -117,29 +117,29 @@ explorerCpt = R.hooksComponent "G.C.GraphExplorer.explorer" cpt
, graph
, multiSelectEnabledRef
}
, mSidebar graph mMetaData { frontends
, mSidebar mMetaData { frontends
, graph
, session
, selectedNodeIds: controls.selectedNodeIds
, showSidePanel: fst controls.showSidePanel
}
]
, row [
]
]
]
]
]
graphClassName :: Record Controls.Controls -> String
graphClassName {showSidePanel: (GET.Opened /\ _), showTree: (true /\ _)} = "col-md-8"
graphClassName {showTree: (true /\ _)} = "col-md-10"
graphClassName {showSidePanel: (GET.Opened /\ _)} = "col-md-10"
--graphClassName {showSidePanel: (GET.Opened /\ _), showTree: (true /\ _)} = "col-md-8"
--graphClassName {showTree: (true /\ _)} = "col-md-10"
--graphClassName {showSidePanel: (GET.Opened /\ _)} = "col-md-10"
graphClassName _ = "col-md-12"
outer = RH.div { className: "col-md-12" }
inner = RH.div { className: "container-fluid", style: { paddingTop: "90px" } }
row1 = RH.div { className: "row", style: { paddingBottom: "10px", marginTop: "-24px" } }
row = RH.div { className: "row" }
rowControls = RH.div { className: "row controls" }
col = RH.div { className: "col-md-4" }
pullLeft = RH.div { className: "pull-left" }
pullRight = RH.div { className: "pull-right" }
......@@ -150,18 +150,17 @@ explorerCpt = R.hooksComponent "G.C.GraphExplorer.explorer" cpt
-> R.Element
tree false _ _ = RH.div { id: "tree" } []
tree true {sessions, mCurrentRoute: route, frontends} showLogin =
RH.div {className: "col-md-2", style: {paddingTop: "60px"}}
[forest {sessions, route, frontends, showLogin}]
RH.div {className: "col-md-2 graph-tree"} [forest {sessions, route, frontends, showLogin}]
mSidebar :: SigmaxTypes.SGraph
-> Maybe GET.MetaData
mSidebar :: Maybe GET.MetaData
-> { frontends :: Frontends
, graph :: SigmaxTypes.SGraph
, showSidePanel :: GET.SidePanelState
, selectedNodeIds :: R.State SigmaxTypes.SelectedNodeIds
, session :: Session }
-> R.Element
mSidebar _ Nothing _ = RH.div {} []
mSidebar graph (Just metaData) {frontends, session, selectedNodeIds, showSidePanel} =
mSidebar Nothing _ = RH.div {} []
mSidebar (Just metaData) {frontends, graph, session, selectedNodeIds, showSidePanel} =
Sidebar.sidebar { frontends
, graph
, metaData
......
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