Skip to content

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

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

parent c2ae2ae4
Hide whitespace changes
Inline Side-by-side
Showing with 87 additions and 64 deletions
dist/styles/Login.css
View file @ cfae041b
......@@ -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
View file @ cfae041b
......@@ -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
View file @ cfae041b
......@@ -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
View file @ cfae041b
......@@ -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
View file @ cfae041b
......@@ -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
View file @ cfae041b
......@@ -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
View file @ cfae041b
......@@ -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
View file @ cfae041b
......@@ -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
View file @ cfae041b
......@@ -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
View file @ cfae041b
......@@ -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
View file @ cfae041b
......@@ -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
View file @ cfae041b
......@@ -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
View file @ cfae041b
......@@ -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
......
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