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 @@
<link href="styles/CodeEditor.css" rel="stylesheet" type="text/css" />
<link href="styles/range-slider.css" rel="stylesheet" type="text/css" />
<style>
* {margin: 0; padding: 0; list-style: none;}
.tree ul li {
margin-left: 15px;
position: relative;
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>
.tree { margin: 0; padding: 0; border: 0; }
.tree LI { list-style: none; }
.tree UL { margin: 0 0 0 1.5em; border: 0; padding: 0; }
</style>
</head>
<body>
<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 []
, tasks
, tree
, session
} _ = pure $ H.div { className: "tree"}
} _ = pure $ H.ul { className: "tree"}
[ toHtml { asyncTasks
, frontends
, mCurrentRoute
......@@ -168,27 +168,23 @@ toHtml p@{ asyncTasks
let withId (NTree (LNode {id: id'}) _) = id'
pure $ H.ul {}
[ H.li {}
( [ nodeMainSpan { id
, dispatch: pAction
, folderOpen
, frontends
, mCurrentRoute
, name
, nodeType
, session
, tasks
} ]
<> childNodes (Record.merge commonProps
{ asyncTasks
, children: ary
, folderOpen
}
)
)
]
pure $ H.li {} $
[ nodeMainSpan { id
, dispatch: pAction
, folderOpen
, frontends
, mCurrentRoute
, name
, nodeType
, session
, tasks
} ]
<> childNodes ( Record.merge commonProps
{ asyncTasks
, children: ary
, folderOpen
}
)
type ChildNodesProps =
( asyncTasks :: R.State GAT.Storage
......@@ -201,12 +197,12 @@ childNodes :: Record ChildNodesProps -> Array R.Element
childNodes { children: [] } = []
childNodes { folderOpen: (false /\ _) } = []
childNodes props@{ asyncTasks, children, reload } =
map (\ctree@(NTree (LNode {id}) _) ->
map (\ctree@(NTree (LNode {id}) _) -> H.ul {} [
toHtml (Record.merge commonProps { asyncTasks
, tasks: tasksStruct id asyncTasks reload
, tree: ctree
}
)
)]
) $ sorted children
where
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
popoverRef <- R.useRef null
pure $ H.span (dropProps droppedFile isDragOver) $
[ folderIcon nodeType folderOpen
[ chevronIcon nodeType folderOpen
, folderIcon nodeType folderOpen
, if showBox then
Popover.popover { arrow: false
, open: false
......@@ -94,6 +95,15 @@ nodeMainSpan p@{ dispatch, folderOpen, frontends, session } = R.createElement el
name' {name, nodeType} = if nodeType == GT.NodeUser
then show session
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 /\ _) =
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