Skip to content

P
purescript-gargantext
Commit 4eb2785d authored by Alexandre Delanoë's avatar Alexandre Delanoë
Browse files
Options

Merge branch '286-dev-css-fix-for-graph-height' of... 

Merge branch '286-dev-css-fix-for-graph-height' of ssh://gitlab.iscpif.fr:20022/gargantext/purescript-gargantext into dev-merge
parents e5d313ec 7e6102b9
Hide whitespace changes
Inline Side-by-side
Showing with 288 additions and 241 deletions
dist/styles/sass.css
View file @ 4eb2785d
......@@ -535,8 +535,20 @@ li .leaf:hover a.settings {
color: black;
}
.forest-layout-raw-tree {
padding-top: 60px;
.forest-layout {
background-color: #fff;
position: fixed;
top: 3.7em;
width: 15%;
z-index: 999;
}
.left-handed .forest-layout {
left: 80%;
}
.right-handed .forest-layout {
left: 2%;
}
.code-editor .editor .code-area {
......@@ -646,22 +658,42 @@ li .leaf:hover a.settings {
cursor: pointer;
}
.side-panel {
.left-handed .side-panel {
left: 2%;
padding: 0.3em;
position: fixed;
top: 3.7em;
background-color: #fff;
width: 28%;
}
.left-handed .side-panel .header {
float: left;
}
.left-handed .side-panel .corpus-doc-view .annotated-field-wrapper .annotated-field-runs {
max-height: 200px;
overflow-y: scroll;
}
.left-handed .side-panel .corpus-doc-view .list-group .list-group-item-heading {
display: inline-block;
width: 60px;
}
.right-handed .side-panel {
left: 70%;
padding: 5px;
padding: 0.3em;
position: fixed;
top: 60px;
top: 3.7em;
background-color: #fff;
width: 28%;
}
.side-panel .header {
.right-handed .side-panel .header {
float: right;
}
.side-panel .corpus-doc-view .annotated-field-wrapper .annotated-field-runs {
.right-handed .side-panel .corpus-doc-view .annotated-field-wrapper .annotated-field-runs {
max-height: 200px;
overflow-y: scroll;
}
.side-panel .corpus-doc-view .list-group .list-group-item-heading {
.right-handed .side-panel .corpus-doc-view .list-group .list-group-item-heading {
display: inline-block;
width: 60px;
}
......
dist/styles/sass.css.map
View file @ 4eb2785d
{"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","../../src/sass/_annotation.sass","../../src/sass/_folder_view.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;EACA;EACA;;;AAEF;AAkCE;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;EAEE;EACA;EACA;EACA;EAEA;EACA;EACA;;AAEA;EACE;;AAEJ;EACE;;AAEA;EACE;;AAEJ;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;ACrFJ;EAEE;;;AAQF;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;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;;;AAGF;EACE;;;AAEJ;EACE;;;AAEF;EACE;EACA;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;EACA;;;AAEF;EACE;;;ACzKF;EACE;;;AAGA;EACE;EACA;EACA;;AAEA;EACE;EACA;;AAGA;EACE;;AACF;EACE;;AAEJ;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;;AAGN;EACE;;;AAIA;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;;;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;;;AAGN;EACE;;AACF;EACE;;AACF;EACE;;;AAEJ;EACE;;;ACpJE;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;EApCR;EACA;EACA;EACA;EACA;EACA;EACA;EAlBA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AA0CM;EACE;EACA;EACA;EACA;EACA;EA5CR;EACA;EACA;EACA;EACA;EACA;EACA;EAlBA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAkDE;EACE;EACA;EACA;EACA;EACA;EACA;;AACF;EACE;EACA;EACA;;AACA;EACE;EACA;;AACF;EACE;EACA;;AACF;EACE;EACA;;AAGE;EACE;;AAEF;EACE;;;ACtFZ;EACE;;;AACF;EAEE;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;;AAGE;EACE;EACA;;AAEF;EACE;EACA;;;AAER;EACE;;AACA;EACE;;AACF;EACE;EACA;EACA;;;AAIA;EACE;;AACA;EACE;EACA;;AACF;EACE;;AACA;EACE;;AACJ;EACE;;;AAER;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;AAGI;EACE;;AACF;EACE;;;AAEN;EACE;EACA;EACA;;;AAIA;EACE;;AACF;EACE;;;AAEJ;EACE;;AACA;EACE;;;AAEJ;EACE;EACA;;;ACjFF;EACE;AACA;EACA;;AAEA;EACE;EACA;;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;;;AAGN;EACE;;;ACxBJ;EACE;;AAEA;EANE;EACA;;AAQF;EAbE;EACA;;AAeF;EAhBE;EACA;;AAkBF;EAnBE;EACA;;AAqBF;EA1BE;EACA,kBANyB;;AAkC3B;EA7BE;EACA,kBAPqB;;AAsCvB;EAhCE;EACA,kBAJoB;;;AAuCtB;EApCE;EACA,kBANyB;;AA4C3B;EAvCE;EACA,kBAPqB;;AAgDvB;EA1CE;EACA,kBAJoB;;;ACRxB;EACE;EACA;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","../../src/sass/_annotation.sass","../../src/sass/_folder_view.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;EACA;EACA;;;AAEF;AAkCE;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;EAEE;EACA;EACA;EACA;EAEA;EACA;EACA;;AAEA;EACE;;AAEJ;EACE;;AAEA;EACE;;AAEJ;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;ACrFJ;EAEE;;;AAQF;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;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;;;AAGF;EACE;;;AAEJ;EACE;;;AAEF;EACE;EACA;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;EACA;;;AAEF;EACE;;;ACzKF;EACE;;;AAGA;EACE;EACA;EACA;;AAEA;EACE;EACA;;AAGA;EACE;;AACF;EACE;;AAEJ;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;;AAGN;EACE;;;AAIA;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;;;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;;;AAGN;EACE;;AACF;EACE;;AACF;EACE;;;AAEJ;EACE;EACA;EACA;EACA;EACA;;;AAEA;EACE;;;AAEF;EACE;;;AC9JA;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;EApCR;EACA;EACA;EACA;EACA;EACA;EACA;EAlBA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AA0CM;EACE;EACA;EACA;EACA;EACA;EA5CR;EACA;EACA;EACA;EACA;EACA;EACA;EAlBA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAkDE;EACE;EACA;EACA;EACA;EACA;EACA;;AACF;EACE;EACA;EACA;;AACA;EACE;EACA;;AACF;EACE;EACA;;AACF;EACE;EACA;;AAGE;EACE;;AAEF;EACE;;;ACtFZ;EACE;;;AAEA;EAEE;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;;AAGE;EACE;EACA;;AAEF;EACE;EACA;;;AAER;EAEE;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;;AAGE;EACE;EACA;;AAEF;EACE;EACA;;;AAEV;EACE;;AACA;EACE;;AACF;EACE;EACA;EACA;;;AAIA;EACE;;AACA;EACE;EACA;;AACF;EACE;;AACA;EACE;;AACJ;EACE;;;AAER;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;AAGI;EACE;;AACF;EACE;;;AAEN;EACE;EACA;EACA;;;AAIA;EACE;;AACF;EACE;;;AAEJ;EACE;;AACA;EACE;;;AAEJ;EACE;EACA;;;ACtGF;EACE;AACA;EACA;;AAEA;EACE;EACA;;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;;;AAGN;EACE;;;ACxBJ;EACE;;AAEA;EANE;EACA;;AAQF;EAbE;EACA;;AAeF;EAhBE;EACA;;AAkBF;EAnBE;EACA;;AAqBF;EA1BE;EACA,kBANyB;;AAkC3B;EA7BE;EACA,kBAPqB;;AAsCvB;EAhCE;EACA,kBAJoB;;;AAuCtB;EApCE;EACA,kBANyB;;AA4C3B;EAvCE;EACA,kBAPqB;;AAgDvB;EA1CE;EACA,kBAJoB;;;ACRxB;EACE;EACA;EACA;EACA","file":"sass.css"}
\ No newline at end of file
src/Gargantext/Components/Forest.purs
View file @ 4eb2785d
module Gargantext.Components.Forest
( forest
, forestLayout
, forestLayoutWithTopBar
, forestLayoutMain
, forestLayoutRaw
, Common
, Props
) where
import Data.Array as A
import Data.Maybe (Maybe, fromMaybe)
import Data.Tuple.Nested ((/\))
import Reactix as R
import Reactix.DOM.HTML as H
import Record.Extra as RX
import Toestand as T
import Gargantext.Prelude
import Data.Array as A
import Data.Maybe (Maybe)
import Gargantext.AsyncTasks as GAT
import Gargantext.Components.Forest.Tree (treeLoader)
import Gargantext.Components.TopBar (topBar)
import Gargantext.Ends (Frontends, Backend)
import Gargantext.Prelude
import Gargantext.Routes (AppRoute)
import Gargantext.Sessions (Session(..), Sessions, OpenNodes, unSessions)
import Gargantext.Types (Handed, reverseHanded, switchHanded)
import Gargantext.Types (Handed, switchHanded)
import Gargantext.Utils.Reactix as R2
import Gargantext.Utils.Toestand as T2
import Reactix as R
import Reactix.DOM.HTML as H
import Record.Extra as RX
import Toestand as T
here :: R2.Here
here = R2.here "Gargantext.Components.Forest"
......@@ -40,13 +35,13 @@ type Common =
)
type Props =
( backend :: T.Box (Maybe Backend)
, forestOpen :: T.Box OpenNodes
, reloadForest :: T2.ReloadS
, sessions :: T.Box Sessions
, showLogin :: T.Box Boolean
, showTree :: T.Box Boolean
, tasks :: T.Box GAT.Storage
( backend :: T.Box (Maybe Backend)
, forestOpen :: T.Box OpenNodes
, reloadForest :: T2.ReloadS
, sessions :: T.Box Sessions
, showLogin :: T.Box Boolean
, showTree :: T.Box Boolean
, tasks :: T.Box GAT.Storage
| Common
)
......@@ -56,7 +51,6 @@ type TreeExtra = (
forest :: R2.Component Props
forest = R.createElement forestCpt
forestCpt :: R.Component Props
forestCpt = here.component "forest" cpt where
cpt props@{ backend
......@@ -86,7 +80,7 @@ forestCpt = here.component "forest" cpt where
-- TODO If `reloadForest` is set, `reload` state should be updated
-- TODO fix tasks ref
pure $ H.div { className: "forest " <> if showTree' then "" else "d-none" }
(A.cons (plus handed' showLogin) (trees handed' sessions'))
(A.cons (plus { handed, showLogin }) (trees handed' sessions'))
where
common = RX.pick props :: Record Common
trees handed' sessions' = (tree handed') <$> unSessions sessions'
......@@ -102,107 +96,41 @@ forestCpt = here.component "forest" cpt where
, session: s
, tasks } []
plus :: Handed -> T.Box Boolean -> R.Element
plus handed showLogin = H.div { className: "row" }
[ H.button { className: buttonClass
, on: { click }
, title }
[ H.div { className: divClass } [ H.text " Log in/out " ] -- fa-lg
, H.div {} [ H.text " " ] ]
]
type Plus =
( handed :: T.Box Handed
, showLogin :: T.Box Boolean )
plus :: R2.Leaf Plus
plus p = R.createElement plusCpt p []
plusCpt :: R.Component Plus
plusCpt = here.component "plus" cpt where
cpt { handed, showLogin } _ = do
handed' <- T.useLive T.unequal handed
pure $ H.div { className: "row" }
[ H.button { className: buttonClass handed'
, on: { click }
, title }
[ H.div { className: divClass } [ H.text " Log in/out " ] -- fa-lg
, H.div {} [ H.text " " ] ]
]
--, H.div { "type": "", className: "fa fa-plus-circle fa-lg"} []
--, H.div { "type": "", className: "fa fa-minus-circle fa-lg"} []
-- TODO same as the one in the Login Modal (same CSS)
-- [ H.i { className: "material-icons md-36"} [] ]
where
click _ = do
-- _ <- T.write Nothing backend
T.write_ true showLogin
title = "Add or remove connections to the server(s)."
divClass = "fa fa-universal-access"
buttonClass =
"btn btn-primary col-5 " <> switchHanded "mr-1 ml-auto" "ml-1 mr-auto" handed
where
click _ = do
-- _ <- T.write Nothing backend
T.write_ true showLogin
title = "Add or remove connections to the server(s)."
divClass = "fa fa-universal-access"
buttonClass handed' =
"btn btn-primary col-5 " <> switchHanded "mr-1 ml-auto" "ml-1 mr-auto" handed'
forestLayout :: R2.Component Props
forestLayout = R.createElement forestLayoutCpt
forestLayoutCpt :: R.Component Props
forestLayoutCpt = here.component "forestLayout" cpt where
cpt props@{ handed } children =
pure $ R.fragment
[ topBar { handed } []
, forestLayoutMain props children ]
-- Renders its first child component in the top bar and the rest in
-- the main view.
forestLayoutWithTopBar :: R2.Component Props
forestLayoutWithTopBar = R.createElement forestLayoutWithTopBarCpt
forestLayoutWithTopBarCpt :: R.Component Props
forestLayoutWithTopBarCpt = here.component "forestLayoutWithTopBar" cpt where
cpt props@{ handed } children = do
let { head: topBarChild, tail: mainChildren } =
fromMaybe { head: H.div {} [], tail: [] } $ A.uncons children
pure $ R.fragment
[ topBar { handed } [ topBarChild ]
, forestLayoutMain props mainChildren ]
forestLayoutMain :: R2.Component Props
forestLayoutMain = R.createElement forestLayoutMainCpt
forestLayoutMainCpt :: R.Component Props
forestLayoutMainCpt = here.component "forestLayoutMain" cpt where
cpt props@{ reloadMainPage } children =
pure $ forestLayoutRaw props [ mainPage {} children ]
forestLayoutRaw :: R2.Component Props
forestLayoutRaw = R.createElement forestLayoutRawCpt
forestLayoutRawCpt :: R.Component Props
forestLayoutRawCpt = here.component "forestLayoutRaw" cpt where
cpt p@{ backend
, forestOpen
, frontends
, reloadForest
, reloadMainPage
, reloadRoot
, route
, sessions
, showTree
, showLogin
, tasks } children = do
handed' <- T.useLive T.unequal p.handed
pure $ R2.row $ reverseHanded handed' $
[ H.div { className: "col-md-2 forest-layout-raw-tree" }
[ forest' p.handed ]
] <> children
where
forest' handed =
forest { backend
, frontends
, forestOpen
, handed
, reloadForest
, reloadMainPage
, reloadRoot
, route
, sessions
, showTree
, showLogin
, tasks } []
mainPage :: R2.Component ()
mainPage = R.createElement mainPageCpt
-- mainPageCpt :: R.Memo ()
-- mainPageCpt = R.memo (here.component "mainPage" cpt) where
mainPageCpt :: R.Component ()
mainPageCpt = here.component "mainPage" cpt
where
cpt _ children = do
pure $ H.div { className: "col-md-10" }
[ H.div { id: "page-wrapper" }
[ H.div { className: "container-fluid" } children ]
]
cpt p _ = do
pure $ H.div { className: "forest-layout" }
[ forest p [] ]
src/Gargantext/Components/GraphExplorer.purs
View file @ 4eb2785d
......@@ -2,7 +2,6 @@ module Gargantext.Components.GraphExplorer where
import Gargantext.Prelude hiding (max,min)
import DOM.Simple.Types (Element)
import Data.Array as A
import Data.FoldableWithIndex (foldMapWithIndex)
import Data.Int (toNumber)
......@@ -12,7 +11,16 @@ import Data.Nullable (null, Nullable)
import Data.Sequence as Seq
import Data.Set as Set
import Data.Tuple (Tuple(..))
import DOM.Simple.Types (Element)
import Effect.Aff (Aff)
import Math as Math
import Partial.Unsafe (unsafePartial)
import Reactix as R
import Reactix.DOM.HTML as RH
import Record as Record
import Record.Extra as RX
import Toestand as T
import Gargantext.AsyncTasks as GAT
import Gargantext.Components.App.Data (Boxes)
import Gargantext.Components.Graph as Graph
......@@ -32,13 +40,6 @@ import Gargantext.Types as Types
import Gargantext.Utils.Range as Range
import Gargantext.Utils.Reactix as R2
import Gargantext.Utils.Toestand as T2
import Math as Math
import Partial.Unsafe (unsafePartial)
import Reactix as R
import Reactix.DOM.HTML as RH
import Record as Record
import Record.Extra as RX
import Toestand as T
here :: R2.Here
here = R2.here "Gargantext.Components.GraphExplorer"
......
src/Gargantext/Components/MainPage.purs 0 → 100644
View file @ 4eb2785d
module Gargantext.Components.MainPage where
import Gargantext.Prelude
import Data.Tuple.Nested ((/\))
import Reactix as R
import Reactix.DOM.HTML as H
import Toestand as T
import Web.HTML.Event.EventTypes (offline)
import Gargantext.Components.App.Data (Boxes)
import Gargantext.Routes as GR
import Gargantext.Types as GT
import Gargantext.Utils.Reactix as R2
here :: R2.Here
here = R2.here "Gargantext.Components.MainPage"
type MainPage =
(
boxes :: Boxes
)
mainPage :: R2.Component MainPage
mainPage = R.createElement mainPageCpt
mainPageCpt :: R.Component MainPage
mainPageCpt = here.component "mainPage" cpt
where
cpt { boxes: { handed
, route } } children = do
handed' <- T.useLive T.unequal handed
route' <- T.useLive T.unequal route
let classNameOffsetPre /\ className /\ classNameOffsetPost = case route' of
GR.PGraphExplorer _ _ -> "" /\ "col-md-12" /\ ""
_ -> case handed' of
GT.LeftHanded -> "" /\ "col-md-10" /\ "col-md-2"
GT.RightHanded -> "col-md-2" /\ "col-md-10" /\ ""
pure $ H.div { className: "row" }
[ H.div { className: classNameOffsetPre } []
, H.div { className }
[ H.div { id: "page-wrapper" }
[ H.div { className: "container-fluid" } children ]
]
, H.div { className: classNameOffsetPost } []
]
src/Gargantext/Components/Router.purs
View file @ 4eb2785d
......@@ -2,7 +2,7 @@ module Gargantext.Components.Router (router) where
import Gargantext.Prelude
import Data.Array (fromFoldable)
import Data.Array as A
import Data.Maybe (Maybe(..))
import Data.Tuple.Nested ((/\))
import Reactix as R
......@@ -19,6 +19,7 @@ import Gargantext.Components.GraphExplorer.Sidebar as GES
import Gargantext.Components.GraphExplorer.Sidebar.Types as GEST
import Gargantext.Components.Lang (LandingLang(LL_EN))
import Gargantext.Components.Login (login)
import Gargantext.Components.MainPage as MainPage
import Gargantext.Components.Nodes.Annuaire (annuaireLayout)
import Gargantext.Components.Nodes.Annuaire.User (userLayout)
import Gargantext.Components.Nodes.Annuaire.User.Contact (contactLayout)
......@@ -35,9 +36,9 @@ import Gargantext.Config (defaultFrontends, defaultBackends)
import Gargantext.Ends (Backend)
import Gargantext.Routes (AppRoute)
import Gargantext.Routes as GR
import Gargantext.Sessions as Sessions
import Gargantext.Sessions (Session, WithSession)
import Gargantext.Types (CorpusId, ListId, NodeID, NodeType(..), SessionId, SidePanelState(..))
import Gargantext.Sessions as Sessions
import Gargantext.Types (CorpusId, Handed(..), ListId, NodeID, NodeType(..), SessionId, SidePanelState(..), reverseHanded)
import Gargantext.Utils.Reactix as R2
here :: R2.Here
......@@ -52,56 +53,28 @@ type Props' = ( backend :: Backend, route' :: AppRoute | Props )
router :: R2.Leaf Props
router props = R.createElement routerCpt props []
routerCpt :: R.Component Props
routerCpt = here.component "router" cpt where
cpt props@{ boxes } _ = do
pure $ R.fragment
[ loginModal { boxes } []
, topBar { boxes } []
, forest { boxes } []
, sidePanel { boxes } []
]
renderRoute :: R2.Component Props
renderRoute = R.createElement renderRouteCpt
renderRouteCpt :: R.Component Props
renderRouteCpt = here.component "renderRoute" cpt where
cpt props@{ boxes } _ = do
let sessionNodeProps sId nId = Record.merge { nodeId: nId, sessionId: sId } props
cpt props@{ boxes: boxes@{ handed } } _ = do
handed' <- T.useLive T.unequal handed
route' <- T.useLive T.unequal boxes.route
let handedClassName = case handed' of
LeftHanded -> "left-handed"
RightHanded -> "right-handed"
pure $ R.fragment
[ case route' of
GR.Annuaire s n -> annuaire (sessionNodeProps s n) []
GR.ContactPage s a n -> contact (Record.merge { annuaireId: a } $ sessionNodeProps s n) []
GR.Corpus s n -> corpus (sessionNodeProps s n) []
GR.CorpusDocument s c l n -> corpusDocument (Record.merge { corpusId: c, listId: l } $ sessionNodeProps s n) []
GR.Dashboard s n -> dashboard (sessionNodeProps s n) []
GR.Document s l n -> document (Record.merge { listId: l } $ sessionNodeProps s n) []
GR.Folder s n -> corpus (sessionNodeProps s n) []
GR.FolderPrivate s n -> corpus (sessionNodeProps s n) []
GR.FolderPublic s n -> corpus (sessionNodeProps s n) []
GR.FolderShared s n -> corpus (sessionNodeProps s n) []
GR.Home -> home { boxes } []
GR.Lists s n -> lists (sessionNodeProps s n) []
GR.Login -> login' boxes
GR.PGraphExplorer s g -> graphExplorer (sessionNodeProps s g) []
GR.RouteFile s n -> routeFile (sessionNodeProps s n) []
GR.RouteFrameCalc s n -> routeFrame (Record.merge { nodeType: NodeFrameCalc } $ sessionNodeProps s n) []
GR.RouteFrameCode s n -> routeFrame (Record.merge { nodeType: NodeFrameNotebook } $ sessionNodeProps s n) []
GR.RouteFrameWrite s n -> routeFrame (Record.merge { nodeType: NodeFrameWrite } $ sessionNodeProps s n) []
GR.Team s n -> team (sessionNodeProps s n) []
GR.Texts s n -> texts (sessionNodeProps s n) []
GR.UserPage s n -> user (sessionNodeProps s n) []
]
([ loginModal { boxes } []
, topBar { boxes } [] ] <>
[ H.div { className: handedClassName } $ reverseHanded handed' $
[ forest { boxes } []
, mainPage { boxes } []
, sidePanel { boxes } []
]
])
loginModal :: R2.Component Props
loginModal = R.createElement loginModalCpt
loginModalCpt :: R.Component Props
loginModalCpt = here.component "loginModal" cpt
where
......@@ -110,33 +83,8 @@ loginModalCpt = here.component "loginModal" cpt
pure $ if showLogin' then login' boxes else H.div {} []
type AuthedProps =
( content :: Session -> R.Element
| SessionProps )
authed :: R2.Component AuthedProps
authed = R.createElement authedCpt
authedCpt :: R.Component AuthedProps
authedCpt = here.component "authed" cpt where
cpt props@{ boxes: { session, sessions }
, content
, sessionId } _ = do
sessions' <- T.useLive T.unequal sessions
let session' = Sessions.lookup sessionId sessions'
R.useEffect' $ do
T.write_ session' session
case session' of
Nothing -> pure $ home homeProps []
Just s -> pure $ R.fragment [ content s, footer {} [] ]
where
homeProps = RE.pick props :: Record Props
topBar :: R2.Component Props
topBar = R.createElement topBarCpt
topBarCpt :: R.Component Props
topBarCpt = here.component "topBar" cpt where
cpt props@{ boxes: boxes@{ handed
......@@ -149,10 +97,15 @@ topBarCpt = here.component "topBar" cpt where
pure $ TopBar.topBar { handed } children
mainPage :: R2.Component Props
mainPage = R.createElement mainPageCpt
mainPageCpt :: R.Component Props
mainPageCpt = here.component "mainPage" cpt where
cpt { boxes } _ = do
pure $ MainPage.mainPage { boxes } [ renderRoute { boxes } [] ]
forest :: R2.Component Props
forest = R.createElement forestCpt
forestCpt :: R.Component Props
forestCpt = here.component "forest" cpt where
cpt props@{ boxes: boxes@{ backend
......@@ -165,24 +118,22 @@ forestCpt = here.component "forest" cpt where
, sessions
, showLogin
, showTree
, tasks }
} _ = do
pure $ Forest.forestLayoutMain { backend
, forestOpen
, frontends: defaultFrontends
, handed
, reloadForest
, reloadMainPage
, reloadRoot
, route
, sessions
, showLogin
, showTree
, tasks } [ renderRoute { boxes } [] ]
, tasks } } _ = do
pure $ Forest.forestLayout { backend
, forestOpen
, frontends: defaultFrontends
, handed
, reloadForest
, reloadMainPage
, reloadRoot
, route
, sessions
, showLogin
, showTree
, tasks } []
sidePanel :: R2.Component Props
sidePanel = R.createElement sidePanelCpt
sidePanelCpt :: R.Component Props
sidePanelCpt = here.component "sidePanel" cpt where
cpt props@{ boxes: boxes@{ graphVersion
......@@ -202,6 +153,63 @@ sidePanelCpt = here.component "sidePanel" cpt where
Opened -> pure $ openedSidePanel (Record.merge { session: s } props) []
_ -> pure $ H.div {} []
renderRoute :: R2.Component Props
renderRoute = R.createElement renderRouteCpt
renderRouteCpt :: R.Component Props
renderRouteCpt = here.component "renderRoute" cpt where
cpt props@{ boxes } _ = do
let sessionNodeProps sId nId = Record.merge { nodeId: nId, sessionId: sId } props
route' <- T.useLive T.unequal boxes.route
pure $ R.fragment
[ case route' of
GR.Annuaire s n -> annuaire (sessionNodeProps s n) []
GR.ContactPage s a n -> contact (Record.merge { annuaireId: a } $ sessionNodeProps s n) []
GR.Corpus s n -> corpus (sessionNodeProps s n) []
GR.CorpusDocument s c l n -> corpusDocument (Record.merge { corpusId: c, listId: l } $ sessionNodeProps s n) []
GR.Dashboard s n -> dashboard (sessionNodeProps s n) []
GR.Document s l n -> document (Record.merge { listId: l } $ sessionNodeProps s n) []
GR.Folder s n -> corpus (sessionNodeProps s n) []
GR.FolderPrivate s n -> corpus (sessionNodeProps s n) []
GR.FolderPublic s n -> corpus (sessionNodeProps s n) []
GR.FolderShared s n -> corpus (sessionNodeProps s n) []
GR.Home -> home { boxes } []
GR.Lists s n -> lists (sessionNodeProps s n) []
GR.Login -> login' boxes
GR.PGraphExplorer s g -> graphExplorer (sessionNodeProps s g) []
GR.RouteFile s n -> routeFile (sessionNodeProps s n) []
GR.RouteFrameCalc s n -> routeFrame (Record.merge { nodeType: NodeFrameCalc } $ sessionNodeProps s n) []
GR.RouteFrameCode s n -> routeFrame (Record.merge { nodeType: NodeFrameNotebook } $ sessionNodeProps s n) []
GR.RouteFrameWrite s n -> routeFrame (Record.merge { nodeType: NodeFrameWrite } $ sessionNodeProps s n) []
GR.Team s n -> team (sessionNodeProps s n) []
GR.Texts s n -> texts (sessionNodeProps s n) []
GR.UserPage s n -> user (sessionNodeProps s n) []
]
type AuthedProps =
( content :: Session -> R.Element
| SessionProps )
authed :: R2.Component AuthedProps
authed = R.createElement authedCpt
authedCpt :: R.Component AuthedProps
authedCpt = here.component "authed" cpt where
cpt props@{ boxes: { session, sessions }
, content
, sessionId } _ = do
sessions' <- T.useLive T.unequal sessions
let session' = Sessions.lookup sessionId sessions'
R.useEffect' $ do
T.write_ session' session
case session' of
Nothing -> pure $ home homeProps []
Just s -> pure $ R.fragment [ content s, footer {} [] ]
where
homeProps = RE.pick props :: Record Props
openedSidePanel :: R2.Component (WithSession Props)
openedSidePanel = R.createElement openedSidePanelCpt
......@@ -389,7 +397,7 @@ listsCpt = here.component "lists" cpt where
login' :: Boxes -> R.Element
login' { backend, sessions, showLogin: visible } =
login { backend
, backends: fromFoldable defaultBackends
, backends: A.fromFoldable defaultBackends
, sessions
, visible }
......
src/sass/_styles.sass
View file @ 4eb2785d
.cache-toggle
cursor: pointer
.side-panel
//background-color: $dark
left: 70%
padding: 5px
position: fixed
top: 60px
background-color: #fff
width: 28%
.header
float: right
.corpus-doc-view
.annotated-field-wrapper
.annotated-field-runs
max-height: 200px
overflow-y: scroll
.list-group
.list-group-item-heading
display: inline-block
width: 60px
.left-handed
.side-panel
//background-color: $dark
left: 2%
padding: 0.3em
position: fixed
top: 3.7em
background-color: #fff
width: 28%
.header
float: left
.corpus-doc-view
.annotated-field-wrapper
.annotated-field-runs
max-height: 200px
overflow-y: scroll
.list-group
.list-group-item-heading
display: inline-block
width: 60px
.right-handed
.side-panel
//background-color: $dark
left: 70%
padding: 0.3em
position: fixed
top: 3.7em
background-color: #fff
width: 28%
.header
float: right
.corpus-doc-view
.annotated-field-wrapper
.annotated-field-runs
max-height: 200px
overflow-y: scroll
.list-group
.list-group-item-heading
display: inline-block
width: 60px
.simple-layout
height: 100%
......
src/sass/_tree.sass
View file @ 4eb2785d
......@@ -168,5 +168,15 @@ li
.ok-to-use
color: black
.forest-layout-raw-tree
padding-top: 60px
.forest-layout
background-color: #fff
position: fixed
top: 3.7em
width: 15%
z-index: 999
.left-handed
.forest-layout
left: 80%
.right-handed
.forest-layout
left: 2%
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