Commit 93060de4 authored by Przemyslaw Kaminski's avatar Przemyslaw Kaminski

[tree] left/right handed implementation

parent c48c056e
module Gargantext.Components.App where module Gargantext.Components.App where
import Data.Array (fromFoldable) import Data.Array (fromFoldable, reverse)
import Data.Foldable (intercalate) import Data.Foldable (intercalate)
import Data.Maybe (Maybe(..), maybe') import Data.Maybe (Maybe(..), maybe')
import Data.Tuple (fst, snd) import Data.Tuple (fst, snd)
import Prelude import Data.Tuple.Nested ((/\))
import Reactix as R import Reactix as R
import Reactix.DOM.HTML as H import Reactix.DOM.HTML as H
import Gargantext.Prelude
import Gargantext.Components.Forest (forest) import Gargantext.Components.Forest (forest)
import Gargantext.Components.GraphExplorer (explorerLayout) import Gargantext.Components.GraphExplorer (explorerLayout)
import Gargantext.Components.Lang (LandingLang(..)) import Gargantext.Components.Lang (LandingLang(..))
...@@ -29,6 +31,7 @@ import Gargantext.Router (router) ...@@ -29,6 +31,7 @@ import Gargantext.Router (router)
import Gargantext.Routes (AppRoute(..)) import Gargantext.Routes (AppRoute(..))
import Gargantext.Sessions (Sessions, useSessions) import Gargantext.Sessions (Sessions, useSessions)
import Gargantext.Sessions as Sessions import Gargantext.Sessions as Sessions
import Gargantext.Types as GT
import Gargantext.Utils.Reactix as R2 import Gargantext.Utils.Reactix as R2
-- TODO (what does this mean?) -- TODO (what does this mean?)
...@@ -49,10 +52,13 @@ appCpt = R.hooksComponent "G.C.App.app" cpt where ...@@ -49,10 +52,13 @@ appCpt = R.hooksComponent "G.C.App.app" cpt where
treeReload <- R.useState' 0 treeReload <- R.useState' 0
handed <- R.useState' GT.RightHanded
let backends = fromFoldable defaultBackends let backends = fromFoldable defaultBackends
let ff f session = R.fragment [ f session, footer { session } ] let ff f session = R.fragment [ f session, footer { session } ]
let forested child = forestLayout { child let forested child = forestLayout { child
, frontends , frontends
, handed
, reload: treeReload , reload: treeReload
, route: fst route , route: fst route
, sessions: fst sessions , sessions: fst sessions
...@@ -88,9 +94,10 @@ appCpt = R.hooksComponent "G.C.App.app" cpt where ...@@ -88,9 +94,10 @@ appCpt = R.hooksComponent "G.C.App.app" cpt where
PGraphExplorer sid graphId -> PGraphExplorer sid graphId ->
withSession sid $ withSession sid $
\session -> \session ->
simpleLayout $ simpleLayout handed $
explorerLayout { frontends explorerLayout { frontends
, graphId , graphId
, handed: fst handed
, mCurrentRoute , mCurrentRoute
, session , session
, sessions: (fst sessions) , sessions: (fst sessions)
...@@ -100,6 +107,7 @@ appCpt = R.hooksComponent "G.C.App.app" cpt where ...@@ -100,6 +107,7 @@ appCpt = R.hooksComponent "G.C.App.app" cpt where
type ForestLayoutProps = type ForestLayoutProps =
( child :: R.Element ( child :: R.Element
, frontends :: Frontends , frontends :: Frontends
, handed :: R.State GT.Handed
, reload :: R.State Int , reload :: R.State Int
, route :: AppRoute , route :: AppRoute
, sessions :: Sessions , sessions :: Sessions
...@@ -112,8 +120,8 @@ forestLayout props = R.createElement forestLayoutCpt props [] ...@@ -112,8 +120,8 @@ forestLayout props = R.createElement forestLayoutCpt props []
forestLayoutCpt :: R.Component ForestLayoutProps forestLayoutCpt :: R.Component ForestLayoutProps
forestLayoutCpt = R.hooksComponent "G.C.A.forestLayout" cpt forestLayoutCpt = R.hooksComponent "G.C.A.forestLayout" cpt
where where
cpt props _ = do cpt props@{ handed } _ = do
pure $ R.fragment [ topBar {}, forestLayoutMain props ] pure $ R.fragment [ topBar { handed }, forestLayoutMain props ]
forestLayoutMain :: Record ForestLayoutProps -> R.Element forestLayoutMain :: Record ForestLayoutProps -> R.Element
forestLayoutMain props = R.createElement forestLayoutMainCpt props [] forestLayoutMain props = R.createElement forestLayoutMainCpt props []
...@@ -121,16 +129,21 @@ forestLayoutMain props = R.createElement forestLayoutMainCpt props [] ...@@ -121,16 +129,21 @@ forestLayoutMain props = R.createElement forestLayoutMainCpt props []
forestLayoutMainCpt :: R.Component ForestLayoutProps forestLayoutMainCpt :: R.Component ForestLayoutProps
forestLayoutMainCpt = R.hooksComponent "G.C.A.forestLayoutMain" cpt forestLayoutMainCpt = R.hooksComponent "G.C.A.forestLayoutMain" cpt
where where
cpt { child, frontends, reload, route, sessions, showLogin } _ = do cpt { child, frontends, handed, reload, route, sessions, showLogin } _ = do
pure $ R2.row [ let ordering =
case fst handed of
GT.LeftHanded -> reverse
GT.RightHanded -> identity
pure $ R2.row $ ordering [
H.div { className: "col-md-2", style: { paddingTop: "60px" } } H.div { className: "col-md-2", style: { paddingTop: "60px" } }
[ forest { frontends, reload, route, sessions, showLogin } ] [ forest { frontends, handed: fst handed, reload, route, sessions, showLogin } ]
, mainPage child , mainPage child
] ]
-- Simple layout does not accommodate the tree -- Simple layout does not accommodate the tree
simpleLayout :: R.Element -> R.Element simpleLayout :: R.State GT.Handed -> R.Element -> R.Element
simpleLayout child = R.fragment [ topBar {}, child, license] simpleLayout handed child = R.fragment [ topBar { handed }, child, license]
mainPage :: R.Element -> R.Element mainPage :: R.Element -> R.Element
mainPage child = mainPage child =
...@@ -138,16 +151,58 @@ mainPage child = ...@@ -138,16 +151,58 @@ mainPage child =
[ H.div {id: "page-wrapper"} [ H.div {id: "page-wrapper"}
[ H.div {className: "container-fluid"} [ child ] ] ] [ H.div {className: "container-fluid"} [ child ] ] ]
topBar :: {} -> R.Element type TopBarProps = (
topBar _ = handed :: R.State GT.Handed
H.div { id: "dafixedtop", role: "navigation" )
, className: "navbar navbar-inverse navbar-fixed-top" }
[ H.div { className: "container-fluid" } topBar :: Record TopBarProps -> R.Element
[ H.div { className: "navbar-inner" } topBar props = R.createElement topBarCpt props []
[ logo
, H.div { className: "collapse navbar-collapse" } topBarCpt :: R.Component TopBarProps
[ divDropdownLeft ] ] ] ] topBarCpt = R.hooksComponent "G.C.A.topBar" cpt
-- SB.searchBar {session, databases: allDatabases} where
cpt { handed } _ = do
pure $ H.div { id: "dafixedtop"
, role: "navigation"
, className: "navbar navbar-inverse navbar-fixed-top" }
[ H.div { className: "container-fluid" }
[ H.div { className: "navbar-inner" }
[ logo
, H.div { className: "collapse navbar-collapse" } [
H.ul { className: "nav navbar-nav" } [
divDropdownLeft
, handedChooser { handed }
]
]
]
]
]
-- SB.searchBar {session, databases: allDatabases}
type HandedChooserProps = (
handed :: R.State GT.Handed
)
handedChooser :: Record HandedChooserProps -> R.Element
handedChooser props = R.createElement handedChooserCpt props []
handedChooserCpt :: R.Component HandedChooserProps
handedChooserCpt = R.hooksComponent "G.C.A.handedChooser" cpt
where
cpt { handed } _ = do
pure $ H.li {} [
H.a {} [
H.span { className: handedClass handed
, on: { click: onClick handed } } []
]
]
handedClass (GT.LeftHanded /\ _) = "fa fa-hand-o-left"
handedClass (GT.RightHanded /\ _) = "fa fa-hand-o-right"
onClick (_ /\ setHanded) = setHanded $ \h -> case h of
GT.LeftHanded -> GT.RightHanded
GT.RightHanded -> GT.LeftHanded
logo :: R.Element logo :: R.Element
logo = logo =
...@@ -163,14 +218,12 @@ divDropdownLeft = ...@@ -163,14 +218,12 @@ divDropdownLeft =
divDropdownLeft' $ divDropdownLeft' $
LiNav { title : "About Gargantext" LiNav { title : "About Gargantext"
, href : "#" , href : "#"
, icon : "glyphicon glyphicon-info-sign" , icon : "fa fa-info-circle"
, text : "Info" } , text : "Info" }
divDropdownLeft' :: LiNav -> R.Element divDropdownLeft' :: LiNav -> R.Element
divDropdownLeft' mb = divDropdownLeft' mb =
H.ul {className: "nav navbar-nav"} H.li {className: "dropdown"} [ menuButton mb, menuElements' ]
[ H.ul {className: "nav navbar-nav pull-left"}
[ H.li {className: "dropdown"} [ menuButton mb, menuElements' ] ] ]
menuButton :: LiNav -> R.Element menuButton :: LiNav -> R.Element
menuButton (LiNav { title, href, icon, text } ) = menuButton (LiNav { title, href, icon, text } ) =
......
...@@ -15,12 +15,13 @@ import Gargantext.Components.Forest.Tree (treeView) ...@@ -15,12 +15,13 @@ import Gargantext.Components.Forest.Tree (treeView)
import Gargantext.Ends (Frontends) import Gargantext.Ends (Frontends)
import Gargantext.Routes (AppRoute) import Gargantext.Routes (AppRoute)
import Gargantext.Sessions (Session(..), Sessions, OpenNodes, unSessions) import Gargantext.Sessions (Session(..), Sessions, OpenNodes, unSessions)
import Gargantext.Types (Reload, Handed(..)) import Gargantext.Types (Reload, Handed)
import Gargantext.Utils.Reactix as R2 import Gargantext.Utils.Reactix as R2
type Props = type Props =
( frontends :: Frontends ( frontends :: Frontends
, reload :: R.State Int , handed :: Handed
, reload :: R.State Int
, route :: AppRoute , route :: AppRoute
, sessions :: Sessions , sessions :: Sessions
, showLogin :: R2.Setter Boolean , showLogin :: R2.Setter Boolean
...@@ -31,7 +32,7 @@ forest props = R.createElement forestCpt props [] ...@@ -31,7 +32,7 @@ forest props = R.createElement forestCpt props []
forestCpt :: R.Component Props forestCpt :: R.Component Props
forestCpt = R.hooksComponent "G.C.Forest.forest" cpt where forestCpt = R.hooksComponent "G.C.Forest.forest" cpt where
cpt { frontends, reload: extReload, route, sessions, showLogin } _ = do cpt { frontends, handed, reload: extReload, route, sessions, showLogin } _ = do
-- NOTE: this is a hack to reload the tree view on demand -- NOTE: this is a hack to reload the tree view on demand
reload <- R.useState' (0 :: Reload) reload <- R.useState' (0 :: Reload)
openNodes <- R2.useLocalStorageState R2.openNodesKey (Set.empty :: OpenNodes) openNodes <- R2.useLocalStorageState R2.openNodesKey (Set.empty :: OpenNodes)
...@@ -44,9 +45,10 @@ forestCpt = R.hooksComponent "G.C.Forest.forest" cpt where ...@@ -44,9 +45,10 @@ forestCpt = R.hooksComponent "G.C.Forest.forest" cpt where
/\ fst extReload /\ fst extReload
/\ fst reload /\ fst reload
/\ fst asyncTasks /\ fst asyncTasks
/\ handed
) )
(cpt' openNodes asyncTasks reload showLogin) (cpt' openNodes asyncTasks reload showLogin)
cpt' openNodes asyncTasks reload showLogin (frontends /\ route /\ sessions /\ _ /\ _ /\ _ /\ _) = do cpt' openNodes asyncTasks reload showLogin (frontends /\ route /\ sessions /\ _ /\ _ /\ _ /\ _ /\ handed) = do
pure $ R.fragment $ A.cons (plus showLogin) trees pure $ R.fragment $ A.cons (plus showLogin) trees
where where
trees = tree <$> unSessions sessions trees = tree <$> unSessions sessions
...@@ -54,11 +56,11 @@ forestCpt = R.hooksComponent "G.C.Forest.forest" cpt where ...@@ -54,11 +56,11 @@ forestCpt = R.hooksComponent "G.C.Forest.forest" cpt where
treeView { root: treeId treeView { root: treeId
, asyncTasks , asyncTasks
, frontends , frontends
, handed
, mCurrentRoute: Just route , mCurrentRoute: Just route
, openNodes , openNodes
, reload , reload
, session: s , session: s
, handed: RightHanded -- TODO enabling user to change it and save locally
} }
plus :: R2.Setter Boolean -> R.Element plus :: R2.Setter Boolean -> R.Element
......
...@@ -63,20 +63,20 @@ treeView props = R.createElement treeViewCpt props [] ...@@ -63,20 +63,20 @@ treeView props = R.createElement treeViewCpt props []
cpt { root cpt { root
, asyncTasks , asyncTasks
, frontends , frontends
, handed
, mCurrentRoute , mCurrentRoute
, openNodes , openNodes
, reload , reload
, session , session
, handed
} _children = pure } _children = pure
$ treeLoadView { root $ treeLoadView { root
, asyncTasks , asyncTasks
, frontends , frontends
, handed
, mCurrentRoute , mCurrentRoute
, openNodes , openNodes
, reload , reload
, session , session
, handed
} }
treeLoadView :: Record Props -> R.Element treeLoadView :: Record Props -> R.Element
...@@ -88,22 +88,22 @@ treeLoadView p = R.createElement treeLoadViewCpt p [] ...@@ -88,22 +88,22 @@ treeLoadView p = R.createElement treeLoadViewCpt p []
cpt { root cpt { root
, asyncTasks , asyncTasks
, frontends , frontends
, handed
, mCurrentRoute , mCurrentRoute
, openNodes , openNodes
, reload , reload
, session , session
, handed
} _children = do } _children = do
let fetch _ = getNodeTree session root let fetch _ = getNodeTree session root
let paint loaded = loadedTreeView { asyncTasks let paint loaded = loadedTreeView { asyncTasks
, frontends , frontends
, handed
, mCurrentRoute , mCurrentRoute
, openNodes , openNodes
, reload , reload
, session , session
, tasks: tasksStruct root asyncTasks reload , tasks: tasksStruct root asyncTasks reload
, tree: loaded , tree: loaded
, handed
} }
useLoader { root, counter: fst reload } fetch paint useLoader { root, counter: fst reload } fetch paint
...@@ -126,26 +126,26 @@ loadedTreeView p = R.createElement loadedTreeViewCpt p [] ...@@ -126,26 +126,26 @@ loadedTreeView p = R.createElement loadedTreeViewCpt p []
where where
cpt { asyncTasks cpt { asyncTasks
, frontends , frontends
, handed
, mCurrentRoute , mCurrentRoute
, openNodes , openNodes
, reload , reload
, session , session
, tasks , tasks
, tree , tree
, handed
} _ = pure $ H.ul { className: "tree " <> if handed == GT.RightHanded } _ = pure $ H.ul { className: "tree " <> if handed == GT.RightHanded
then "flex-start" then "flex-start"
else "flex-end" else "flex-end"
} }
[ toHtml { asyncTasks [ toHtml { asyncTasks
, frontends , frontends
, handed
, mCurrentRoute , mCurrentRoute
, openNodes , openNodes
, reload , reload
, session , session
, tasks , tasks
, tree , tree
, handed: GT.RightHanded -- TODO enabling user to change it
} }
] ]
...@@ -198,12 +198,12 @@ toHtml p@{ asyncTasks ...@@ -198,12 +198,12 @@ toHtml p@{ asyncTasks
, dispatch: pAction , dispatch: pAction
, folderOpen , folderOpen
, frontends , frontends
, handed
, mCurrentRoute , mCurrentRoute
, name , name
, nodeType , nodeType
, session , session
, tasks , tasks
, handed
} ] } ]
<> childNodes ( Record.merge commonProps <> childNodes ( Record.merge commonProps
{ asyncTasks { asyncTasks
...@@ -230,9 +230,9 @@ childNodes { folderOpen: (false /\ _) } = [] ...@@ -230,9 +230,9 @@ childNodes { folderOpen: (false /\ _) } = []
childNodes props@{ asyncTasks, children, reload, handed } = childNodes props@{ asyncTasks, children, reload, handed } =
map (\ctree@(NTree (LNode {id}) _) -> H.ul {} [ map (\ctree@(NTree (LNode {id}) _) -> H.ul {} [
toHtml (Record.merge commonProps { asyncTasks toHtml (Record.merge commonProps { asyncTasks
, handed
, tasks: tasksStruct id asyncTasks reload , tasks: tasksStruct id asyncTasks reload
, tree: ctree , tree: ctree
, handed
} }
)] )]
) $ sorted children ) $ sorted children
......
...@@ -51,7 +51,7 @@ type NodeMainSpanProps = ...@@ -51,7 +51,7 @@ type NodeMainSpanProps =
nodeMainSpan :: Record NodeMainSpanProps nodeMainSpan :: Record NodeMainSpanProps
-> R.Element -> R.Element
nodeMainSpan p@{ dispatch, folderOpen, frontends, session, handed} = R.createElement el p [] nodeMainSpan p@{ dispatch, folderOpen, frontends, handed, session } = R.createElement el p []
where where
el = R.hooksComponent "G.C.F.T.N.NodeMainSpan" cpt el = R.hooksComponent "G.C.F.T.N.NodeMainSpan" cpt
cpt props@{id, mCurrentRoute, name, nodeType, tasks: { onTaskFinish, tasks }} _ = do cpt props@{id, mCurrentRoute, name, nodeType, tasks: { onTaskFinish, tasks }} _ = do
...@@ -61,11 +61,13 @@ nodeMainSpan p@{ dispatch, folderOpen, frontends, session, handed} = R.createEle ...@@ -61,11 +61,13 @@ nodeMainSpan p@{ dispatch, folderOpen, frontends, session, handed} = R.createEle
popoverRef <- R.useRef null popoverRef <- R.useRef null
let ordering =
case handed of
GT.LeftHanded -> reverse
GT.RightHanded -> identity
pure $ H.span (dropProps droppedFile isDragOver) pure $ H.span (dropProps droppedFile isDragOver)
$ (if handed == GT.LeftHanded $ ordering
then reverse
else identity)
$
[ chevronIcon nodeType folderOpen [ chevronIcon nodeType folderOpen
, folderIcon nodeType folderOpen , folderIcon nodeType folderOpen
, if showBox then , if showBox then
......
...@@ -42,6 +42,7 @@ type GraphId = Int ...@@ -42,6 +42,7 @@ type GraphId = Int
type LayoutProps = type LayoutProps =
( frontends :: Frontends ( frontends :: Frontends
, graphId :: GraphId , graphId :: GraphId
, handed :: Types.Handed
, mCurrentRoute :: AppRoute , mCurrentRoute :: AppRoute
, session :: Session , session :: Session
, sessions :: Sessions , sessions :: Sessions
...@@ -86,7 +87,17 @@ explorer props = R.createElement explorerCpt props [] ...@@ -86,7 +87,17 @@ explorer props = R.createElement explorerCpt props []
explorerCpt :: R.Component Props explorerCpt :: R.Component Props
explorerCpt = R.hooksComponent "G.C.GraphExplorer.explorer" cpt explorerCpt = R.hooksComponent "G.C.GraphExplorer.explorer" cpt
where where
cpt props@{frontends, graph, graphId, graphVersion, mCurrentRoute, mMetaData, session, sessions, showLogin, treeReload } _ = do cpt props@{ frontends
, graph
, graphId
, graphVersion
, handed
, mCurrentRoute
, mMetaData
, session
, sessions
, showLogin
, treeReload } _ = do
dataRef <- R.useRef graph dataRef <- R.useRef graph
graphRef <- R.useRef null graphRef <- R.useRef null
graphVersionRef <- R.useRef (fst graphVersion) graphVersionRef <- R.useRef (fst graphVersion)
...@@ -125,6 +136,7 @@ explorerCpt = R.hooksComponent "G.C.GraphExplorer.explorer" cpt ...@@ -125,6 +136,7 @@ explorerCpt = R.hooksComponent "G.C.GraphExplorer.explorer" cpt
[ rowControls [ Controls.controls controls ] [ rowControls [ Controls.controls controls ]
, R2.row [ , R2.row [
tree { frontends tree { frontends
, handed
, mCurrentRoute , mCurrentRoute
, reload: props.treeReload , reload: props.treeReload
, sessions , sessions
...@@ -165,9 +177,9 @@ explorerCpt = R.hooksComponent "G.C.GraphExplorer.explorer" cpt ...@@ -165,9 +177,9 @@ explorerCpt = R.hooksComponent "G.C.GraphExplorer.explorer" cpt
tree :: Record TreeProps -> R.Element tree :: Record TreeProps -> R.Element
tree { show: false } = RH.div { id: "tree" } [] tree { show: false } = RH.div { id: "tree" } []
tree { frontends, mCurrentRoute: route, reload, sessions, showLogin } = tree { frontends, handed, mCurrentRoute: route, reload, sessions, showLogin } =
RH.div {className: "col-md-2 graph-tree"} [ RH.div {className: "col-md-2 graph-tree"} [
forest { frontends, reload, route, sessions, showLogin } forest { frontends, handed, reload, route, sessions, showLogin }
] ]
mSidebar :: Maybe GET.MetaData mSidebar :: Maybe GET.MetaData
...@@ -180,6 +192,7 @@ explorerCpt = R.hooksComponent "G.C.GraphExplorer.explorer" cpt ...@@ -180,6 +192,7 @@ explorerCpt = R.hooksComponent "G.C.GraphExplorer.explorer" cpt
type TreeProps = type TreeProps =
( (
frontends :: Frontends frontends :: Frontends
, handed :: Types.Handed
, mCurrentRoute :: AppRoute , mCurrentRoute :: AppRoute
, reload :: R.State Int , reload :: R.State Int
, sessions :: Sessions , sessions :: Sessions
......
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