[Accessibility] Handed user (Left or Right), todo: Tree to right and...

[Accessibility] Handed user (Left or Right), todo: Tree to right and text-align right or left accordingly

src/Gargantext/Components/Forest.purs

@@ -15,7 +15,7 @@ import Gargantext.Components.Forest.Tree (treeView)
 import Gargantext.Ends (Frontends)
 import Gargantext.Routes (AppRoute)
 import Gargantext.Sessions (Session(..), Sessions, OpenNodes, unSessions)
-import Gargantext.Types (Reload)
+import Gargantext.Types (Reload, Handed(..))
 import Gargantext.Utils.Reactix as R2
 
 type Props =
@@ -58,6 +58,7 @@ forestCpt = R.hooksComponent "G.C.Forest.forest" cpt where
                  , openNodes
                  , reload
                  , session: s
+                 , handed: RightHanded -- TODO enabling user to change it and save locally
                  }
 
 plus :: R2.Setter Boolean -> R.Element

src/Gargantext/Components/Forest/Tree.purs

@@ -31,7 +31,7 @@ import Gargantext.Components.Forest.Tree.Node.Tools.FTree (FTree, LNode(..), NTr
 import Gargantext.Components.Forest.Tree.Node.Tools.Task (Tasks, tasksStruct)
 import Gargantext.Ends (Frontends)
 import Gargantext.Hooks.Loader (useLoader)
-import Gargantext.Prelude (Unit, bind, discard, map, pure, void, ($), (+), (<>))
+import Gargantext.Prelude (Unit, bind, discard, map, pure, void, ($), (+), (<>), (==))
 import Gargantext.Routes (AppRoute)
 import Gargantext.Sessions (OpenNodes, Session, mkNodeId, get)
 import Gargantext.Types (ID, Reload, isPublic, publicize)
@@ -45,6 +45,7 @@ type CommonProps =
   , openNodes     :: R.State OpenNodes
   , reload        :: R.State Reload
   , session       :: Session
+  , handed        :: GT.Handed
   )
 
 ------------------------------------------------------------------------
@@ -66,6 +67,7 @@ treeView props = R.createElement treeViewCpt props []
             , openNodes
             , reload
             , session
+            , handed
             } _children = pure
                         $ treeLoadView { root
                                        , asyncTasks
@@ -74,6 +76,7 @@ treeView props = R.createElement treeViewCpt props []
                                        , openNodes
                                        , reload
                                        , session
+                                       , handed
                                        }
 
 treeLoadView :: Record Props -> R.Element
@@ -89,6 +92,7 @@ treeLoadView p = R.createElement treeLoadViewCpt p []
             , openNodes
             , reload
             , session
+            , handed
             } _children = do
           let fetch _ = getNodeTree session root
           let paint loaded = loadedTreeView { asyncTasks
@@ -99,6 +103,7 @@ treeLoadView p = R.createElement treeLoadViewCpt p []
                                             , session
                                             , tasks: tasksStruct root asyncTasks reload
                                             , tree: loaded
+                                            , handed
                                             }
           useLoader { root, counter: fst reload } fetch paint
 
@@ -127,7 +132,11 @@ loadedTreeView p = R.createElement loadedTreeViewCpt p []
             , session
             , tasks
             , tree
-          } _ = pure $ H.ul { className: "tree"}
+            , handed
+          } _ = pure $ H.ul { className: "tree " <> if handed == GT.RightHanded
+                                                      then "flex-start"
+                                                      else "flex-end"
+                                                    }
                              [ toHtml { asyncTasks
                                       , frontends
                                       , mCurrentRoute
@@ -136,10 +145,13 @@ loadedTreeView p = R.createElement loadedTreeViewCpt p []
                                       , session
                                       , tasks
                                       , tree
+                                      , handed: GT.RightHanded -- TODO enabling user to change it
                                       }
                              ]
 
 ------------------------------------------------------------------------
+
+
 type ToHtmlProps =
   ( asyncTasks :: R.State GAT.Storage
   , tasks      :: Record Tasks
@@ -163,7 +175,8 @@ toHtml p@{ asyncTasks
                                     , nodeType
                                     }
                               ) ary
-                      ) 
+                      )
+         , handed
          } =
   R.createElement el {} []
     where
@@ -190,6 +203,7 @@ toHtml p@{ asyncTasks
                          , nodeType
                          , session
                          , tasks
+                         , handed
                          } ]
           <> childNodes ( Record.merge commonProps
                           { asyncTasks
@@ -199,6 +213,7 @@ toHtml p@{ asyncTasks
                                                             ) t) ary
                                          else ary
                           , folderOpen
+                          , handed
                           }
                         )
 
@@ -212,11 +227,12 @@ type ChildNodesProps =
 childNodes :: Record ChildNodesProps -> Array R.Element
 childNodes { children: []                       } = []
 childNodes { folderOpen: (false /\ _)           } = []
-childNodes props@{ asyncTasks, children, reload } =
+childNodes props@{ asyncTasks, children, reload, handed } =
   map (\ctree@(NTree (LNode {id}) _) -> H.ul {} [
         toHtml (Record.merge commonProps { asyncTasks
                                          , tasks: tasksStruct id asyncTasks reload
                                          , tree: ctree
+                                         , handed
                                          }
                )]
       ) $ sorted children

src/Gargantext/Components/Forest/Tree/Node.purs

 module Gargantext.Components.Forest.Tree.Node where
 
+import Data.Array (reverse)
 import Data.Maybe (Maybe(..))
 import Data.Nullable (null)
 import Data.Tuple.Nested ((/\))
@@ -25,7 +26,7 @@ import Gargantext.Components.Lang (Lang(EN))
 import Gargantext.Components.Nodes.Corpus (loadCorpusWithChild)
 import Gargantext.Ends (Frontends, url)
 import Gargantext.Hooks.Loader (useLoader)
-import Gargantext.Prelude (Unit, bind, const, discard, map, pure, show, unit, void, ($), (<>), (==))
+import Gargantext.Prelude (Unit, bind, const, discard, map, pure, show, unit, void, ($), (<>), (==), identity)
 import Gargantext.Routes as Routes
 import Gargantext.Version as GV
 import Gargantext.Sessions (Session, sessionId)
@@ -44,12 +45,13 @@ type NodeMainSpanProps =
   , name          :: Name
   , nodeType      :: GT.NodeType
   , tasks         :: Record Tasks
+  , handed        :: GT.Handed
   | CommonProps
   )
 
 nodeMainSpan :: Record NodeMainSpanProps
              -> R.Element
-nodeMainSpan p@{ dispatch, folderOpen, frontends, session } = R.createElement el p []
+nodeMainSpan p@{ dispatch, folderOpen, frontends, session, handed} = R.createElement el p []
   where
     el = R.hooksComponent "G.C.F.T.N.NodeMainSpan" cpt
     cpt props@{id, mCurrentRoute, name, nodeType, tasks: { onTaskFinish, tasks }} _ = do
@@ -59,7 +61,11 @@ nodeMainSpan p@{ dispatch, folderOpen, frontends, session } = R.createElement el
 
       popoverRef    <- R.useRef null
 
-      pure $ H.span (dropProps droppedFile isDragOver) $
+      pure $ H.span (dropProps droppedFile isDragOver)
+           $ (if handed == GT.LeftHanded
+                then reverse
+                else identity)
+           $
         [ chevronIcon nodeType folderOpen
         , folderIcon nodeType folderOpen
         , if showBox then

src/Gargantext/Types.purs

@@ -15,6 +15,17 @@ import Prelude
 import Prim.Row (class Union)
 import URI.Query (Query)
 
+
+
+data Handed = LeftHanded | RightHanded
+
+derive instance genericHanded :: Generic Handed _
+
+instance eqHanded :: Eq Handed where
+  eq = genericEq
+
+
+-------------------------------------------------------------------------
 type ID     = Int
 type Name   = String
 type Reload = Int