Skip to content

P
purescript-gargantext
Commit 73610ff5 authored by Przemyslaw Kaminski's avatar Przemyslaw Kaminski
Browse files
Options

[boostrap v4] some more work on graph explorer

parent 7b463fdd
Show whitespace changes
Inline Side-by-side
Showing with 179 additions and 170 deletions
dist/styles/sass.css
View file @ 73610ff5
......@@ -85,6 +85,10 @@
#graph-explorer {
padding-top: 0px;
}
.graph-container {
position: absolute;
/* #toggle-container */
/* position: fixed */
/* z-index: 999 // needs to appear above solid menu bar */
......@@ -94,46 +98,7 @@
/* .container-fluid */
/* padding-top: 90px */
}
#graph-explorer #toolbar {
display: flex;
flex-direction: column;
}
#graph-explorer #toolbar ul {
display: flex;
flex-direction: row;
margin: 0;
}
#graph-explorer #toolbar ul li {
display: flex;
max-width: 200px;
}
#graph-explorer #controls-container {
position: fixed;
z-index: 999;
backdrop-filter: blur(4px);
background: rgba(255, 255, 255, 0.75);
overflow: auto;
left: 0;
right: 0;
top: 60px;
}
#graph-explorer .graph-tree {
position: absolute;
max-height: 600px;
top: 170px;
background-color: #fff;
z-index: 1;
}
#graph-explorer .lefthanded .graph-tree {
left: 80%;
}
#graph-explorer .righthanded .graph-tree {
left: 0%;
}
#graph-explorer #graph-view {
height: 95%;
}
#graph-explorer #sp-container {
.graph-container #sp-container {
position: absolute;
max-height: 600px;
top: 170px;
......@@ -142,25 +107,66 @@
width: 28%;
z-index: 15;
}
#graph-explorer #sp-container #myTab {
.graph-container #sp-container #myTab {
marginBottom: 18px;
marginTop: 18px;
}
#graph-explorer #sp-container #myTabContent {
.graph-container #sp-container #myTabContent {
borderBottom: 1px solid black;
paddingBottom: 19px;
}
#graph-explorer #sp-container #horizontal-checkbox ul {
.graph-container #sp-container #horizontal-checkbox ul {
display: inline;
float: left;
}
#graph-explorer .lefthanded #sp-container {
.graph-container .lefthanded #sp-container {
left: 0%;
}
#graph-explorer .righthanded #sp-container {
.graph-container .righthanded #sp-container {
left: 70%;
}
#graph-explorer #tree {
.graph-container .graph-tree {
position: absolute;
max-height: 600px;
top: 170px;
background-color: #fff;
z-index: 1;
}
.graph-container .lefthanded .graph-tree {
left: 80%;
}
.graph-container .righthanded .graph-tree {
left: 0%;
}
.graph-container #controls-container {
position: fixed;
z-index: 999;
backdrop-filter: blur(4px);
background: rgba(255, 255, 255, 0.75);
overflow: auto;
left: 0;
right: 0;
top: 60px;
}
.graph-container #controls-container #toolbar {
display: flex;
flex-direction: column;
}
.graph-container #controls-container #toolbar ul {
display: flex;
flex-direction: row;
margin: 0;
}
.graph-container #controls-container #toolbar ul li {
max-width: 200px;
}
.graph-container #graph-view {
display: block;
height: 500px;
position: relative;
width: 500px;
}
.graph-container #tree {
position: absolute;
z-index: 1;
}
......
dist/styles/sass.css.map
View file @ 73610ff5
{"version":3,"sourceRoot":"","sources":["../../src/sass/_menu.sass","../../src/sass/_context_menu.sass","../../src/sass/_graph.sass","../../src/sass/_login.sass","../../src/sass/_tree.sass","../../src/sass/_code_editor.sass","../../src/sass/_styles.sass","../../src/sass/_range_slider.sass"],"names":[],"mappings":"AAAA;AAEA;AACA;AACA;AACA;AACA;AAEA;EACI;EACA;;;AAEJ;EACI;EACA;EACA;EACA;;;AAEJ;EACE;;;AAEF;AACI;EACA;;;AAEJ;AACI;EACA;;;AAGJ;AACA;EACI;;;AAEJ;EACI;EACA;EACA;EACA;;;AAEJ;EACE;EACA;;;AAEF;EACE;;;AC7CF;EACE;EACA;EACA;EACA;EACA;;;AAEF;EACE;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;;;AClBF;EACE;AAcA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAnBA;EACE;EACA;;AAEA;EACE;EACA;EACA;;AACA;EACE;EACA;;AAWN;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EAxCA;EACA;EAEA;EAuCE;EACA;;AACF;EACE;;AACF;EACE;;AAEF;EACE;;AAEF;EApDA;EACA;EAEA;EAmDE;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAEF;EACE;EACA;;AAGA;EACE;EACA;;AACN;EACE;;AACF;EACE;;AAEF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;ACvFJ;EACE;;;AAOF;EACE;;AACA;EACE;EACA;;;AAEJ;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAGF;EACE;;AAEE;EACE;EACA;;AACA;EACE;;;AAIJ;EACE;EACA;EACA;EACA;;;AAKJ;EACE;EACA;EACA;;;AAGJ;EACE;EACA;EACA;EACA;EACA;;AACA;EACE;EACA;;AACF;EACE;EACA;;AACA;EACE;EACA;EACA;;AACA;EACE;;AACF;EACE;EACA;EACA;EACA;;AACA;EACE;;AACN;EACE;EACA;EACA;EACA;;;AAGN;EACE;EACA;EACA;EACA;EACA;;AAGE;EACE;;;AAEN;EACE;EACA;EACA;EACA;EACA;;AAGE;EACE;;;AAEN;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;;AAEJ;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;;AACA;EACE;EACA;;;AAGF;EACE;;;AAEJ;EACI;EACA;;;AAEJ;EACI;EACA;;;AAGF;EACE;;;AAEJ;EACE;;;AAEF;EACE;EACA;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;EACA;;;AAEF;EACE;;;AC1KF;EACE;;;AAGA;EACE;EACA;;AACA;EACE;;AACF;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;;AAER;EACE;;AAEE;EACE;;AACA;EACE;EACA;EACA;EACA;;AACF;EACE;EACA;EACA;EACA;EACA;;AACF;EACE;;AACF;EACE;EACA;EACA;EAEA;EACA;EACA;;AAEA;EACE;;AACF;EACE;;AAGN;EACE;;AACF;EACE;;AACA;EACE;EACA;;AAEE;EACE;EACA;;AACF;EACE;EACA;;AAIR;EACE;;AACF;EACE;;AACA;EACE;EACA;;AAEE;EACE;EACA;;AACF;EACE;EACA;;AACF;EACE;EACA;;AAEV;EACE;;AACF;EACE;;AAEE;EACE;;AACF;EACE;;AACN;EACE;;AAEE;EACE;EACA;;;AAGR;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EAEE;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;;AAEF;EACE;;;AAIF;EACE;;AAEA;EACE;;;AC/HR;EACE;;AAEA;EACE;;AACA;EACE;;AACJ;EACE;EACA;;;AAGF;EACE;EACA;EACA;;AACF;EACE;EACA;;AACA;EACE;EACA;EACA;EACA;;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EArDR;EACA;EACA;EACA;EACA;EACA;EACA;EAlBA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AA2DM;EACE;EACA;EACA;EACA;EACA;EA7DR;EACA;EACA;EACA;EACA;EACA;EACA;EAlBA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAmEE;EACE;EACA;EACA;EACA;EACA;EACA;;AACF;EACE;EACA;EACA;;AACA;EACE;EACA;;AACF;EACE;EACA;;AACF;EACE;EACA;;AAGE;EACE;;AAEF;EACE;;;ACtGV;EACE;;AACF;EACE;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;;AAGE;EACE;EACA;;AAEF;EACE;EACA;;;AAEV;EACE;;AACA;EACE;EACA;EACA;;;AAKE;EACE;EACA;;AACF;EACE;;AACA;EACE;;AACJ;EACE;;;AAER;EACE;;;AAEF;EACE;;;AAEF;EACE;;;ACjDF;EACE;AACA;EACA;;AAEA;EACE;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EAEA;EAEA;;AAEA;EACE;EAEA;EACA;EACA","file":"sass.css"}
\ No newline at end of file
{"version":3,"sourceRoot":"","sources":["../../src/sass/_menu.sass","../../src/sass/_context_menu.sass","../../src/sass/_graph.sass","../../src/sass/_login.sass","../../src/sass/_tree.sass","../../src/sass/_code_editor.sass","../../src/sass/_styles.sass","../../src/sass/_range_slider.sass"],"names":[],"mappings":"AAAA;AAEA;AACA;AACA;AACA;AACA;AAEA;EACI;EACA;;;AAEJ;EACI;EACA;EACA;EACA;;;AAEJ;EACE;;;AAEF;AACI;EACA;;;AAEJ;AACI;EACA;;;AAGJ;AACA;EACI;;;AAEJ;EACI;EACA;EACA;EACA;;;AAEJ;EACE;EACA;;;AAEF;EACE;;;AC7CF;EACE;EACA;EACA;EACA;EACA;;;AAEF;EACE;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;;;AClBF;EACE;;;AAEF;EACE;AAmCA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAxCA;EAZA;EACA;EAEA;EAWE;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAEF;EACE;EACA;;AAGA;EACE;EACA;;AACN;EACE;;AACF;EACE;;AAEF;EApCA;EACA;EAEA;EAmCE;EACA;;AACF;EACE;;AACF;EACE;;AAWF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAEA;EACE;EACA;EACA;;AACA;EACE;;AAER;EACE;EAEA;EACA;EACA;;AAEF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AC7FJ;EACE;;;AAOF;EACE;;AACA;EACE;EACA;;;AAEJ;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAGF;EACE;;AAEE;EACE;EACA;;AACA;EACE;;;AAIJ;EACE;EACA;EACA;EACA;;;AAKJ;EACE;EACA;EACA;;;AAGJ;EACE;EACA;EACA;EACA;EACA;;AACA;EACE;EACA;;AACF;EACE;EACA;;AACA;EACE;EACA;EACA;;AACA;EACE;;AACF;EACE;EACA;EACA;EACA;;AACA;EACE;;AACN;EACE;EACA;EACA;EACA;;;AAGN;EACE;EACA;EACA;EACA;EACA;;AAGE;EACE;;;AAEN;EACE;EACA;EACA;EACA;EACA;;AAGE;EACE;;;AAEN;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;;AAEJ;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;;AACA;EACE;EACA;;;AAGF;EACE;;;AAEJ;EACI;EACA;;;AAEJ;EACI;EACA;;;AAGF;EACE;;;AAEJ;EACE;;;AAEF;EACE;EACA;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;EACA;;;AAEF;EACE;;;AC1KF;EACE;;;AAGA;EACE;EACA;;AACA;EACE;;AACF;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;;AAER;EACE;;AAEE;EACE;;AACA;EACE;EACA;EACA;EACA;;AACF;EACE;EACA;EACA;EACA;EACA;;AACF;EACE;;AACF;EACE;EACA;EACA;EAEA;EACA;EACA;;AAEA;EACE;;AACF;EACE;;AAGN;EACE;;AACF;EACE;;AACA;EACE;EACA;;AAEE;EACE;EACA;;AACF;EACE;EACA;;AAIR;EACE;;AACF;EACE;;AACA;EACE;EACA;;AAEE;EACE;EACA;;AACF;EACE;EACA;;AACF;EACE;EACA;;AAEV;EACE;;AACF;EACE;;AAEE;EACE;;AACF;EACE;;AACN;EACE;;AAEE;EACE;EACA;;;AAGR;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EAEE;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;;AAEF;EACE;;;AAIF;EACE;;AAEA;EACE;;;AC/HR;EACE;;AAEA;EACE;;AACA;EACE;;AACJ;EACE;EACA;;;AAGF;EACE;EACA;EACA;;AACF;EACE;EACA;;AACA;EACE;EACA;EACA;EACA;;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EArDR;EACA;EACA;EACA;EACA;EACA;EACA;EAlBA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AA2DM;EACE;EACA;EACA;EACA;EACA;EA7DR;EACA;EACA;EACA;EACA;EACA;EACA;EAlBA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAmEE;EACE;EACA;EACA;EACA;EACA;EACA;;AACF;EACE;EACA;EACA;;AACA;EACE;EACA;;AACF;EACE;EACA;;AACF;EACE;EACA;;AAGE;EACE;;AAEF;EACE;;;ACtGV;EACE;;AACF;EACE;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;;AAGE;EACE;EACA;;AAEF;EACE;EACA;;;AAEV;EACE;;AACA;EACE;EACA;EACA;;;AAKE;EACE;EACA;;AACF;EACE;;AACA;EACE;;AACJ;EACE;;;AAER;EACE;;;AAEF;EACE;;;AAEF;EACE;;;ACjDF;EACE;AACA;EACA;;AAEA;EACE;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EAEA;EAEA;;AAEA;EACE;EAEA;EACA;EACA","file":"sass.css"}
\ No newline at end of file
src/Gargantext/Components/GraphExplorer.purs
View file @ 73610ff5
......@@ -147,17 +147,18 @@ explorerCpt = R.hooksComponentWithModule thisModule "explorer" cpt
snd controls.showSidePanel $ const GET.InitialClosed
pure $
RH.div
{ id: "graph-explorer"
, className: "fixed-top navbar navbar-expand-lg" }
RH.div { className: "graph-meta-container" } [
RH.div { className: "fixed-top navbar navbar-expand-lg"
, id: "graph-explorer" }
[ rowToggle
[ col [ spaces [ Toggle.treeToggleButton controls.showTree ]]
, col [ spaces [ Toggle.controlsToggleButton controls.showControls ]]
, col [ spaces [ Toggle.sidebarToggleButton controls.showSidePanel ]]
], R2.row
[ outer
[ inner handed
[ rowControls [ Controls.controls controls ]
]
]
, RH.div { className: "graph-container" } [
inner handed [
rowControls [ Controls.controls controls ]
, R2.row $ mainLayout handed $
tree { asyncTasksRef
, backend
......@@ -195,7 +196,6 @@ explorerCpt = R.hooksComponentWithModule thisModule "explorer" cpt
]
]
]
]
mainLayout Types.RightHanded (tree' /\ gc /\ gv /\ sdb) = [tree', gc, gv, sdb]
mainLayout Types.LeftHanded (tree' /\ gc /\ gv /\ sdb) = [sdb, gc, gv, tree']
......
src/Gargantext/Components/GraphExplorer/Controls.purs
View file @ 73610ff5
......@@ -141,10 +141,8 @@ controlsCpt = R.hooksComponentWithModule thisModule "controls" cpt
pure $ case getShowControls props of
false -> RH.div {} []
true -> RH.div {}
[ R2.menu { id: "toolbar" }
[ RH.ul {}
[ -- change type button (?)
true -> R2.menu { id: "toolbar" } [
RH.ul {} [ -- change type button (?)
RH.li {} [ centerButton props.sigmaRef ]
, RH.li {} [ pauseForceAtlasButton {state: props.forceAtlasState} ]
, RH.li {} [ edgesToggleButton {state: props.showEdges} ]
......@@ -172,7 +170,6 @@ controlsCpt = R.hooksComponentWithModule thisModule "controls" cpt
, treeReload: props.treeReload } ]
]
]
]
useGraphControls :: { forceAtlasS :: SigmaxT.ForceAtlasState
, graph :: SigmaxT.SGraph
......
src/Gargantext/Components/GraphExplorer/Sidebar.purs
View file @ 73610ff5
......@@ -53,10 +53,10 @@ type Props =
sidebar :: Record Props -> R.Element
sidebar props = R.createElement sidebarCpt props []
sidebarCpt :: R.Component Props
sidebarCpt = R.hooksComponentWithModule thisModule "sidebar" cpt
where
sidebarCpt :: R.Component Props
sidebarCpt = R.hooksComponentWithModule thisModule "sidebar" cpt
cpt {showSidePanel: (GET.Closed /\ _)} _children = do
pure $ RH.div {} []
cpt {showSidePanel: (GET.InitialClosed /\ _)} _children = do
......
src/sass/_graph.sass
View file @ 73610ff5
......@@ -8,48 +8,8 @@
#graph-explorer
padding-top: 0px
#toolbar
display: flex
flex-direction: column
ul
display: flex
flex-direction: row
margin: 0
li
display: flex
max-width: 200px
/* #toggle-container
/* position: fixed
/* z-index: 999 // needs to appear above solid menu bar
/* right: 25%
/* top: 10px
/* width: 50%
/* .container-fluid
/* padding-top: 90px
#controls-container
position: fixed
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
top: 60px
.graph-tree
@include sidePanelCommon
background-color: #fff
z-index: 1
.lefthanded .graph-tree
left: 80%
.righthanded .graph-tree
left: 0%
#graph-view
height: 95%
.graph-container
position: absolute
#sp-container
@include sidePanelCommon
......@@ -75,6 +35,52 @@
.righthanded #sp-container
left: 70%
.graph-tree
@include sidePanelCommon
background-color: #fff
z-index: 1
.lefthanded .graph-tree
left: 80%
.righthanded .graph-tree
left: 0%
/* #toggle-container
/* position: fixed
/* z-index: 999 // needs to appear above solid menu bar
/* right: 25%
/* top: 10px
/* width: 50%
/* .container-fluid
/* padding-top: 90px
#controls-container
position: fixed
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
top: 60px
#toolbar
display: flex
flex-direction: column
ul
display: flex
flex-direction: row
margin: 0
li
max-width: 200px
#graph-view
display: block
//height: 95%
height: 500px
position: relative
width: 500px
#tree
position: absolute
z-index: 1
......
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