Skip to content

P
purescript-gargantext
Commit 4fc20136 authored by Peter Corlett's avatar Peter Corlett
Browse files
Options

[UI] First draft of adding clearer visual indicator to tree expander: 

* Added a "chevron" arrow to indicate open or closed status. This
  technically resolves the ticket, but I think it now makes it too
  busy and some further design work is necessary. (Hence "first
  draft".)
* Minor refactor to generate more correct UL/LI HTML hierarchy.
* Rip-and-replace nasty CSS hacks in index.html now that UL/LI is
  sane.
parent 8c872d4b
Hide whitespace changes
Inline Side-by-side
Showing with 35 additions and 67 deletions
dist/index.html
View file @ 4fc20136
...@@ -18,48 +18,10 @@ ...@@ -18,48 +18,10 @@
<link href="styles/CodeEditor.css" rel="stylesheet" type="text/css" /> <link href="styles/CodeEditor.css" rel="stylesheet" type="text/css" />
<link href="styles/range-slider.css" rel="stylesheet" type="text/css" /> <link href="styles/range-slider.css" rel="stylesheet" type="text/css" />
<style> <style>
* {margin: 0; padding: 0; list-style: none;} .tree { margin: 0; padding: 0; border: 0; }
.tree ul li { .tree LI { list-style: none; }
margin-left: 15px; .tree UL { margin: 0 0 0 1.5em; border: 0; padding: 0; }
position: relative; </style>
padding-left: 5px;
}
#toolbar {display : inline;}
#toolbar ul li {display : inline }
#toolbar ul li form {display : inline}
.tree { margin-top : 20px;}
.tree ul li::before {
content: " ";
position: absolute;
width: 1px;
background-color: #000;
top: 5px;
bottom: -12px;
left: -10px;
}
body > .tree ul > li:first-child::before {top: 12px;}
.tree ul li:not(:first-child):last-child::before {display: none;}
.tree ul li:only-child::before {
display: list-item;
content: " ";
position: absolute;
width: 1px;
background-color: "#000";
top: 5px;
bottom: 7px;
height: 7px;
left: -10px;
}
.tree ul li::after {
content: " ";
position: absolute;
left: -10px;
width: 10px;
height: 1px;
background-color: "#000";
top: 12px;
}
</style>
</head> </head>
<body> <body>
<div id="app" class ="container-fluid"></div> <div id="app" class ="container-fluid"></div>
......
src/Gargantext/Components/Forest/Tree.purs
View file @ 4fc20136
...@@ -115,7 +115,7 @@ loadedTreeView p = R.createElement loadedTreeViewCpt p [] ...@@ -115,7 +115,7 @@ loadedTreeView p = R.createElement loadedTreeViewCpt p []
, tasks , tasks
, tree , tree
, session , session
} _ = pure $ H.div { className: "tree"} } _ = pure $ H.ul { className: "tree"}
[ toHtml { asyncTasks [ toHtml { asyncTasks
, frontends , frontends
, mCurrentRoute , mCurrentRoute
...@@ -168,27 +168,23 @@ toHtml p@{ asyncTasks ...@@ -168,27 +168,23 @@ toHtml p@{ asyncTasks
let withId (NTree (LNode {id: id'}) _) = id' let withId (NTree (LNode {id: id'}) _) = id'
pure $ H.ul {} pure $ H.li {} $
[ H.li {} [ nodeMainSpan { id
( [ nodeMainSpan { id , dispatch: pAction
, dispatch: pAction , folderOpen
, folderOpen , frontends
, frontends , mCurrentRoute
, mCurrentRoute , name
, name , nodeType
, nodeType , session
, session , tasks
, tasks } ]
} ] <> childNodes ( Record.merge commonProps
<> childNodes (Record.merge commonProps { asyncTasks
{ asyncTasks , children: ary
, children: ary , folderOpen
, folderOpen }
} )
)
)
]
type ChildNodesProps = type ChildNodesProps =
( asyncTasks :: R.State GAT.Storage ( asyncTasks :: R.State GAT.Storage
...@@ -201,12 +197,12 @@ childNodes :: Record ChildNodesProps -> Array R.Element ...@@ -201,12 +197,12 @@ childNodes :: Record ChildNodesProps -> Array R.Element
childNodes { children: [] } = [] childNodes { children: [] } = []
childNodes { folderOpen: (false /\ _) } = [] childNodes { folderOpen: (false /\ _) } = []
childNodes props@{ asyncTasks, children, reload } = childNodes props@{ asyncTasks, children, reload } =
map (\ctree@(NTree (LNode {id}) _) -> map (\ctree@(NTree (LNode {id}) _) -> H.ul {} [
toHtml (Record.merge commonProps { asyncTasks toHtml (Record.merge commonProps { asyncTasks
, tasks: tasksStruct id asyncTasks reload , tasks: tasksStruct id asyncTasks reload
, tree: ctree , tree: ctree
} }
) )]
) $ sorted children ) $ sorted children
where where
commonProps = RecordE.pick props :: Record CommonProps commonProps = RecordE.pick props :: Record CommonProps
......
src/Gargantext/Components/Forest/Tree/Node.purs
View file @ 4fc20136
...@@ -57,7 +57,8 @@ nodeMainSpan p@{ dispatch, folderOpen, frontends, session } = R.createElement el ...@@ -57,7 +57,8 @@ nodeMainSpan p@{ dispatch, folderOpen, frontends, session } = R.createElement el
popoverRef <- R.useRef null popoverRef <- R.useRef null
pure $ H.span (dropProps droppedFile isDragOver) $ pure $ H.span (dropProps droppedFile isDragOver) $
[ folderIcon nodeType folderOpen [ chevronIcon nodeType folderOpen
, folderIcon nodeType folderOpen
, if showBox then , if showBox then
Popover.popover { arrow: false Popover.popover { arrow: false
, open: false , open: false
...@@ -94,6 +95,15 @@ nodeMainSpan p@{ dispatch, folderOpen, frontends, session } = R.createElement el ...@@ -94,6 +95,15 @@ nodeMainSpan p@{ dispatch, folderOpen, frontends, session } = R.createElement el
name' {name, nodeType} = if nodeType == GT.NodeUser name' {name, nodeType} = if nodeType == GT.NodeUser
then show session then show session
else name else name
chevronIcon nodeType folderOpen'@(open /\ _) =
H.a { className: "chevron-icon"
, onClick: R2.effToggler folderOpen'
}
[ H.i {
className: if open
then "fa fa-chevron-down"
else "fa fa-chevron-right"
} [] ]
folderIcon nodeType folderOpen'@(open /\ _) = folderIcon nodeType folderOpen'@(open /\ _) =
H.a { className: "folder-icon" H.a { className: "folder-icon"
......
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