[Accessibility] Handed Symetric Tree is ok

dist/styles/Tree.css

@@ -13,6 +13,9 @@
 .tree .node-actions .update-button.disabled {
   cursor: wait;
 }
+.tree .lefthanded ul {
+  margin-right: 19px;
+}
 .tree .lefthanded li .leaf {
   justify-content: flex-end;
 }

dist/styles/Tree.sass

@@ -10,8 +10,10 @@
       &.disabled
         cursor: wait
   .lefthanded
-    li 
-      .leaf 
+    ul
+      margin-right : 19px
+    li
+      .leaf
         justify-content : flex-end
 
   .righthanded

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, Handed)
+import Gargantext.Types (Reload, Handed(..))
 import Gargantext.Utils.Reactix as R2
 
 type Props =
@@ -49,7 +49,8 @@ forestCpt = R.hooksComponent "G.C.Forest.forest" cpt where
       )
       (cpt' openNodes asyncTasks reload showLogin)
   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
+    pure $ R2.row $ [plus handed showLogin] <> trees
     where
       trees = tree <$> unSessions sessions
       tree s@(Session {treeId}) =
@@ -63,8 +64,11 @@ forestCpt = R.hooksComponent "G.C.Forest.forest" cpt where
                  , session: s
                  }
 
-plus :: R2.Setter Boolean -> R.Element
-plus showLogin =
+plus :: Handed -> R2.Setter Boolean -> R.Element
+plus handed showLogin = H.div {className: if handed == RightHanded
+                                             then "flex-start"
+                                             else "flex-end"
+                              } [
   H.button { on: {click}
            , className: "btn btn-default"
            }
@@ -75,6 +79,7 @@ plus showLogin =
   --, 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

src/Gargantext/Components/Forest/Tree.purs

@@ -133,7 +133,8 @@ loadedTreeView p = R.createElement loadedTreeViewCpt p []
             , session
             , tasks
             , tree
-          } _ = pure $ H.ul { className: "tree"}
+          } _ = pure $ H.ul { className: "tree"
+                            }
                              [ H.div { className: if handed == GT.RightHanded
                                                     then "righthanded"
                                                     else "lefthanded"

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

@@ -142,7 +142,8 @@ nodeMainSpan p@{ dispatch, folderOpen, frontends, handed, session } = R.createEl
       { className: "leaf " <> (dropClass droppedFile isDragOver)
       , on: { drop: dropHandler droppedFile
             , dragOver: onDragOverHandler isDragOver
-            , dragLeave: onDragLeave isDragOver } }
+            , dragLeave: onDragLeave isDragOver }
+      }
       where
         dropClass   (Just _  /\ _)        _          = "file-dropped"
         dropClass    _                   (true /\ _) = "file-dropped"