[ACCESSIBILTY] SubTree handed (needs SASS/CSS fix).

dist/styles/Login.css

@@ -202,16 +202,4 @@ a:focus, a:hover {
   cursor: pointer;
 }
 
-.copy-from-corpus .tree .node {
-  padding-left: 10px;
-  margin-top: 5px;
-}
-.copy-from-corpus .tree .node .name.clickable {
-  color: #337ab7;
-  cursor: pointer;
-}
-.copy-from-corpus .tree .node .name.clickable:hover {
-  text-decoration: underline;
-}
-
 /*# sourceMappingURL=Login.css.map */

dist/styles/Login.sass

@@ -183,19 +183,6 @@ li
   display: flex
   justify-content: space-between
 
-
-
 a:focus, a:hover
   cursor: pointer
 
-.copy-from-corpus
-  .tree
-    .node
-      padding-left: 10px
-      margin-top: 5px
-      .name
-        &.clickable
-          color: #337ab7
-          cursor: pointer
-          &:hover
-            text-decoration: underline

dist/styles/Tree.css

@@ -13,6 +13,17 @@
 .tree .node-actions .update-button.disabled {
   cursor: wait;
 }
+.tree .node {
+  padding-left: 10px;
+  margin-top: 1px;
+}
+.tree .node .name.clickable {
+  color: #337ab7;
+  cursor: pointer;
+}
+.tree .node .name.clickable:hover {
+  text-decoration: underline;
+}
 .tree .lefthanded ul {
   margin-right: 19px;
 }

dist/styles/Tree.sass

@@ -9,6 +9,15 @@
         cursor: pointer
       &.disabled
         cursor: wait
+  .node
+    padding-left: 10px
+    margin-top: 1px
+    .name
+      &.clickable
+        color: #337ab7
+        cursor: pointer
+        &:hover
+          text-decoration: underline
   .lefthanded
     ul
       margin-right : 19px
@@ -21,7 +30,6 @@
       .leaf
         justify-content : flex-start
 
-
 // based on https://codeburst.io/how-to-pure-css-pie-charts-w-css-variables-38287aea161e
 .progress-pie
   background: rgba(51, 122, 183, 0.1)

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

@@ -44,7 +44,6 @@ type NodeMainSpanProps =
   , name          :: Name
   , nodeType      :: GT.NodeType
   , tasks         :: Record Tasks
-  , handed        :: GT.Handed
   | CommonProps
   )
 
@@ -77,7 +76,9 @@ nodeMainSpan p@{ dispatch, folderOpen, frontends, handed, session } = R.createEl
                                         (sessionId session) id
                         , name: name' props
                         , nodeType
-                        , session }
+                        , session
+                        , handed 
+                        }
 
              , fileTypeView { dispatch, droppedFile, id, isDragOver, nodeType }
              , H.div {} (map (\t -> asyncProgressBar { asyncTask: t
@@ -148,6 +149,7 @@ nodeMainSpan p@{ dispatch, folderOpen, frontends, handed, session } = R.createEl
                     , nodeType
                     , onPopoverClose
                     , session
+                    , handed : props.handed
                     }
 
     dropProps droppedFile isDragOver =

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

@@ -58,7 +58,7 @@ linkNode p = R.createElement linkNodeCpt p []
 linkNodeCpt :: R.Component SubTreeParamsIn
 linkNodeCpt = R.hooksComponent "G.C.F.T.N.A.L.linkNode" cpt
   where
-    cpt p@{dispatch, subTreeParams, id, nodeType, session} _ = do
+    cpt p@{dispatch, subTreeParams, id, nodeType, session, handed} _ = do
 
       action@(valAction /\ setAction) :: R.State Action <- R.useState' (LinkNode {nodeType:Nothing,params:Nothing})
 
@@ -75,5 +75,6 @@ linkNodeCpt = R.hooksComponent "G.C.F.T.N.A.L.linkNode" cpt
                       , nodeType
                       , session
                       , subTreeParams
+                      , handed
                       }
               ] button

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

@@ -25,7 +25,7 @@ mergeNode p = R.createElement mergeNodeCpt p []
 mergeNodeCpt :: R.Component SubTreeParamsIn
 mergeNodeCpt = R.hooksComponent "G.C.F.T.N.A.M.mergeNode" cpt
   where
-    cpt p@{dispatch, subTreeParams, id, nodeType, session} _ = do
+    cpt p@{dispatch, subTreeParams, id, nodeType, session, handed} _ = do
       action@(valAction /\ setAction) :: R.State Action <- R.useState' (MergeNode {params:Nothing})
 
       merge   <- R.useState' false
@@ -44,6 +44,7 @@ mergeNodeCpt = R.hooksComponent "G.C.F.T.N.A.M.mergeNode" cpt
                       , nodeType
                       , session
                       , subTreeParams
+                      , handed
                       }
         , H.div { className:"panel panel-primary"}
                 [ H.text "Merge which list?"

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

@@ -24,7 +24,7 @@ moveNode p = R.createElement moveNodeCpt p []
 moveNodeCpt :: R.Component SubTreeParamsIn
 moveNodeCpt = R.hooksComponent "G.C.F.T.N.A.M.moveNode" cpt
   where
-    cpt p@{dispatch, subTreeParams, id, nodeType, session} _ = do
+    cpt p@{dispatch, subTreeParams, id, nodeType, session, handed} _ = do
       action@(valAction /\ setAction) :: R.State Action <- R.useState' (MoveNode {params: Nothing})
 
       let button = case valAction of
@@ -39,5 +39,6 @@ moveNodeCpt = R.hooksComponent "G.C.F.T.N.A.M.moveNode" cpt
                                  , nodeType
                                  , session
                                  , subTreeParams
+                                 , handed
                                  }
               ] button

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

@@ -57,7 +57,7 @@ shareNode p = R.createElement shareNodeCpt p []
 shareNodeCpt :: R.Component SubTreeParamsIn
 shareNodeCpt = R.hooksComponent "G.C.F.T.N.A.M.shareNode" cpt
   where
-    cpt p@{dispatch, subTreeParams, id, nodeType, session} _ = do
+    cpt p@{dispatch, subTreeParams, id, nodeType, session, handed} _ = do
       action@(valAction /\ setAction) :: R.State Action <- R.useState' (Action.SharePublic {params: Nothing})
 
       let button = case valAction of
@@ -67,11 +67,12 @@ shareNodeCpt = R.hooksComponent "G.C.F.T.N.A.M.shareNode" cpt
               _   -> H.div {} []
 
       pure $ Tools.panel [ subTreeView { action
-                                 , dispatch
-                                 , id
-                                 , nodeType
-                                 , session
-                                 , subTreeParams
-                                 }
+                                       , dispatch
+                                       , id
+                                       , nodeType
+                                       , session
+                                       , subTreeParams
+                                       , handed
+                                       }
               ] button
 

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

@@ -180,6 +180,7 @@ nodePopupCpt = R.hooksComponent "G.C.F.T.N.B.nodePopupView" cpt
                         , nodePopup: Just NodePopup
                         , nodeType : props.nodeType
                         , session  : props.session
+                        , handed   : props.handed
                         }
 
 type ActionState =
@@ -252,6 +253,7 @@ type PanelActionProps =
   , nodePopup :: Maybe NodePopup
   , nodeType  :: GT.NodeType
   , session   :: Session
+  , handed    :: GT.Handed
   )
 
 panelAction :: Record PanelActionProps -> R.Element
@@ -275,14 +277,14 @@ panelActionCpt = R.hooksComponent "G.C.F.T.N.B.panelAction" cpt
 
 -----------
     -- Functions using SubTree
-    cpt {action: Merge {subTreeParams}, dispatch, id, nodeType, session} _ = do
-      pure $ mergeNode {dispatch, id, nodeType, session, subTreeParams}
+    cpt {action: Merge {subTreeParams}, dispatch, id, nodeType, session, handed} _ = do
+      pure $ mergeNode {dispatch, id, nodeType, session, subTreeParams, handed}
 
-    cpt {action: Move {subTreeParams}, dispatch, id, nodeType, session} _ = do
-      pure $ moveNode {dispatch, id, nodeType, session, subTreeParams}
+    cpt {action: Move {subTreeParams}, dispatch, id, nodeType, session, handed} _ = do
+      pure $ moveNode {dispatch, id, nodeType, session, subTreeParams, handed}
 
-    cpt {action: Link {subTreeParams}, dispatch, id, nodeType, session} _ = do
-      pure $ linkNode {dispatch, id, nodeType, session, subTreeParams}
+    cpt {action: Link {subTreeParams}, dispatch, id, nodeType, session, handed} _ = do
+      pure $ linkNode {dispatch, id, nodeType, session, subTreeParams, handed}
 -----------
 
     cpt {action : Share, dispatch, id, name } _ = do
@@ -308,8 +310,8 @@ panelActionCpt = R.hooksComponent "G.C.F.T.N.B.panelAction" cpt
 
 
 
-    cpt {action : Publish {subTreeParams}, dispatch, id, nodeType, session } _ = do
-      pure $ Share.shareNode {dispatch, id, nodeType, session, subTreeParams}
+    cpt {action : Publish {subTreeParams}, dispatch, id, nodeType, session, handed} _ = do
+      pure $ Share.shareNode {dispatch, id, nodeType, session, subTreeParams, handed}
 
 
     cpt props@{action: SearchBox, id, session, dispatch, nodePopup} _ =

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

@@ -14,6 +14,7 @@ import Gargantext.Types as GT
 type CommonProps =
   ( dispatch :: Action -> Aff Unit
   , session :: Session
+  , handed  :: GT.Handed
   )
 
 type NodePopupProps =

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

@@ -273,6 +273,7 @@ type NodeLinkProps = (
   , name :: Name
   , nodeType :: GT.NodeType
   , session :: Session
+  , handed :: GT.Handed
   )
 
 nodeLink :: Record NodeLinkProps -> R.Element
@@ -281,7 +282,7 @@ nodeLink p = R.createElement nodeLinkCpt p []
 nodeLinkCpt :: R.Component NodeLinkProps
 nodeLinkCpt = R.hooksComponent "G.C.F.T.N.T.nodeLink" cpt
   where
-    cpt { frontends, id, isSelected, name, nodeType, session } _ = do
+    cpt { frontends, id, isSelected, name, nodeType, session, handed} _ = do
       popoverRef <- R.useRef null
 
       pure $
@@ -289,6 +290,7 @@ nodeLinkCpt = R.hooksComponent "G.C.F.T.N.T.nodeLink" cpt
                  , href: url frontends $ GT.NodePath (sessionId session) nodeType (Just id) }
                                        [ nodeText { isSelected
                                                   , name
+                                                  , handed
                                                   }
                                        ]
                  , ReactTooltip.reactTooltip { id: tooltipId }
@@ -308,6 +310,7 @@ nodeLinkCpt = R.hooksComponent "G.C.F.T.N.T.nodeLink" cpt
 type NodeTextProps =
   ( isSelected :: Boolean
   , name       :: Name
+  , handed     :: GT.Handed
   )
 
 nodeText :: Record NodeTextProps -> R.Element
@@ -322,8 +325,10 @@ nodeTextCpt = R.hooksComponent "G.C.F.T.N.T.nodeText" cpt
            H.text ("| " <> name15 name <> " |    ")
          ]
         ]
-    cpt {isSelected: false, name} _ = do
-      pure $ H.text (name15 name)
+    cpt {isSelected: false, name, handed} _ = do
+      pure $ if handed == GT.RightHanded
+                then H.text "..." <> H.text (name15 name)
+                else H.text (name15 name) <> H.text "..."
 
     name len n = if S.length n < len then
                  n

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

@@ -10,7 +10,7 @@ import Gargantext.Components.Forest.Tree.Node.Tools.SubTree.Types (SubTreeParams
 import Gargantext.Components.Forest.Tree.Node.Tools.FTree (FTree, LNode(..), NTree(..))
 import Gargantext.Components.Forest.Tree.Node.Tools (nodeText)
 import Gargantext.Hooks.Loader (useLoader)
-import Gargantext.Prelude (map, pure, show, ($), (&&), (/=), (<>), const, (==){-, discard, bind, void-})
+import Gargantext.Prelude (map, pure, show, ($), (&&), (/=), (<>), const, (==), identity{-, discard, bind, void-})
 import Gargantext.Routes as GR
 import Gargantext.Sessions (Session(..), get)
 import Gargantext.Types as GT
@@ -19,6 +19,7 @@ import Reactix.DOM.HTML as H
 
 type SubTreeParamsIn =
   ( subTreeParams :: SubTreeParams
+  , handed    :: GT.Handed
   | Props
   )
 
@@ -40,6 +41,7 @@ subTreeViewCpt = R.hooksComponent "G.C.F.T.N.A.U.subTreeView" cpt
                , session
                , subTreeParams
                , action
+               , handed
                } _ =
       do
         let
@@ -56,6 +58,7 @@ subTreeViewCpt = R.hooksComponent "G.C.F.T.N.A.U.subTreeView" cpt
                               , tree
                               , subTreeParams
                               , action
+                              , handed
                               }
 
 loadSubTree :: Array GT.NodeType -> Session -> Aff FTree
@@ -82,9 +85,9 @@ subTreeViewLoadedCpt = R.hooksComponent "G.C.F.T.N.A.U.subTreeViewLoadedCpt" cpt
   where
     cpt p@{dispatch, id, nodeType, session, tree} _ = do
       pure $ H.div {className:"panel panel-primary"}
-                   [H.div { className: "copy-from-corpus" }
-                          [ H.div { className: "tree" }
-                                  [subTreeTreeView p]
+                   [H.div { className: "tree" }
+                          [ H.div { className: "" }
+                                  [ subTreeTreeView p ]
                           ]
                    ]
 
@@ -103,18 +106,30 @@ subTreeTreeViewCpt = R.hooksComponent "G.C.F.T.N.A.U.subTreeTreeViewCpt" cpt
           , subTreeParams
           , dispatch
           , action
+          , handed
           } _ = do
-            pure $ H.div {} [ H.div { className: "node " <> GT.fldr nodeType true} 
-                                    ( [ H.span { className: "name " <> clickable
-                                               , on: { click: onClick }
-                                               } [ nodeText { isSelected: isSelected targetId valAction
-                                                            , name: " " <> name
-                                                            }
-                                                 ]
-
-                                    ] <> children
-                                  )
-                       ]
+            let ordering =
+                  case handed of
+                    GT.LeftHanded  -> A.reverse
+                    GT.RightHanded -> identity
+
+            pure $ H.div { className: if handed == GT.RightHanded
+                                                         then "righthanded"
+                                                         else "lefthanded"
+                         } $ (ordering [ H.div { className: "node " <> GT.fldr nodeType true} []
+                                               , H.span { style : if validNodeType 
+                                                                    then { color : "blue", "text-decoration": "underline"}
+                                                                    else { color : "" , "text-decoration": "none"}
+                                                        , on: { click: onClick }
+                                                        }
+                                                        [ nodeText { isSelected: isSelected targetId valAction
+                                                                               , name: " " <> name
+                                                                               , handed
+                                                                               }
+                                                        ]
+                                       ]
+                            )
+                            <> children
       where
 
         SubTreeParams { valitypes } = subTreeParams