Skip to content

P
purescript-gargantext
Commit d0e45551 authored by Przemyslaw Kaminski's avatar Przemyslaw Kaminski
Browse files
Options

[tree] styling fixes

parent 4aa80407
Hide whitespace changes
Inline Side-by-side
Showing with 50 additions and 48 deletions
dist/styles/Tree.css
View file @ d0e45551
...@@ -54,15 +54,15 @@ li .leaf:hover a.settings { ...@@ -54,15 +54,15 @@ li .leaf:hover a.settings {
margin-right: 19px; margin-right: 19px;
} }
.tree .lefthanded ul li { .tree .lefthanded ul li {
margin-right: 15px; margin-right: 10px;
padding-right: 5px; padding-right: 5px;
} }
.tree .lefthanded ul li::after { .tree .lefthanded ul li.with-children::after {
background-color: #000; background-color: #000;
right: -10px; right: -10px;
width: 10px; width: 5px;
} }
.tree .lefthanded ul li::before { .tree .lefthanded ul li.with-children::before {
background-color: #000; background-color: #000;
right: -10px; right: -10px;
width: 1px; width: 1px;
...@@ -74,20 +74,20 @@ li .leaf:hover a.settings { ...@@ -74,20 +74,20 @@ li .leaf:hover a.settings {
margin-left: 19px; margin-left: 19px;
} }
.tree .righthanded ul li { .tree .righthanded ul li {
margin-left: 15px; margin-left: 10px;
padding-left: 5px; padding-left: 5px;
} }
.tree .righthanded ul li::after { .tree .righthanded ul li.with-children::after {
background-color: #000; background-color: #000;
left: -10px; left: -10px;
width: 10px; width: 5px;
} }
.tree .righthanded ul li::before { .tree .righthanded ul li.with-children::before {
background-color: #000; background-color: #000;
left: -10px; left: -10px;
width: 1px; width: 1px;
} }
.tree .righthanded ul li:only::before { .tree .righthanded ul li.with-children:only::before {
background-color: #000; background-color: #000;
right: 10px; right: 10px;
} }
......
dist/styles/Tree.sass
View file @ d0e45551
...@@ -48,37 +48,39 @@ li ...@@ -48,37 +48,39 @@ li
ul ul
margin-right : 19px margin-right : 19px
li li
margin-right: 15px margin-right: 10px
padding-right: 5px padding-right: 5px
&::after &.with-children
background-color: #000 &::after
right: -10px background-color: #000
width: 10px right: -10px
&::before width: 5px
background-color: #000 &::before
right: -10px background-color: #000
width: 1px right: -10px
&:only-child::before width: 1px
//right: 1px &:only-child::before
//right: 1px
.leaf .leaf
justify-content : flex-end justify-content : flex-end
.righthanded .righthanded
ul ul
margin-left : 19px margin-left : 19px
li li
margin-left: 15px margin-left: 10px
padding-left: 5px padding-left: 5px
&::after &.with-children
background-color: #000 &::after
left: -10px background-color: #000
width: 10px left: -10px
&::before width: 5px
background-color: #000 &::before
left: -10px background-color: #000
width: 1px left: -10px
&:only::before width: 1px
background-color: #000 &:only::before
right: 10px background-color: #000
right: 10px
.leaf .leaf
justify-content : flex-start justify-content : flex-start
......
src/Gargantext/Components/Forest/Tree.purs
View file @ d0e45551
...@@ -199,7 +199,7 @@ toHtml p@{ asyncTasks ...@@ -199,7 +199,7 @@ toHtml p@{ asyncTasks
let withId (NTree (LNode {id: id'}) _) = id' let withId (NTree (LNode {id: id'}) _) = id'
pure $ H.li {} $ pure $ H.li { className: if A.null ary then "no-children" else "with-children" } $
[ nodeMainSpan (A.null ary) [ nodeMainSpan (A.null ary)
{ id { id
, dispatch: pAction , dispatch: pAction
......
src/Gargantext/Components/Forest/Tree/Node.purs
View file @ d0e45551
...@@ -74,16 +74,16 @@ nodeMainSpan isLeaf p@{ dispatch, folderOpen, frontends, handed, session } = R.c ...@@ -74,16 +74,16 @@ nodeMainSpan isLeaf p@{ dispatch, folderOpen, frontends, handed, session } = R.c
[ folderIcon nodeType folderOpen [ folderIcon nodeType folderOpen
, chevronIcon isLeaf handed nodeType folderOpen , chevronIcon isLeaf handed nodeType folderOpen
, nodeLink { frontends , nodeLink { frontends
, id , id
, isSelected: mCurrentRoute , isSelected: mCurrentRoute
== Routes.nodeTypeAppRoute == Routes.nodeTypeAppRoute
nodeType nodeType
(sessionId session) id (sessionId session) id
, name: name' props , name: name' props
, nodeType , nodeType
, session , session
, handed , handed
} }
, fileTypeView { dispatch, droppedFile, id, isDragOver, nodeType } , fileTypeView { dispatch, droppedFile, id, isDragOver, nodeType }
, H.div {} (map (\t -> asyncProgressBar { asyncTask: t , H.div {} (map (\t -> asyncProgressBar { asyncTask: t
...@@ -93,7 +93,7 @@ nodeMainSpan isLeaf p@{ dispatch, folderOpen, frontends, handed, session } = R.c ...@@ -93,7 +93,7 @@ nodeMainSpan isLeaf p@{ dispatch, folderOpen, frontends, handed, session } = R.c
, session , session
} }
) tasks ) tasks
) )
, if nodeType == GT.NodeUser , if nodeType == GT.NodeUser
then GV.versionView {session} then GV.versionView {session}
else H.div {} [] else H.div {} []
...@@ -111,10 +111,10 @@ nodeMainSpan isLeaf p@{ dispatch, folderOpen, frontends, handed, session } = R.c ...@@ -111,10 +111,10 @@ nodeMainSpan isLeaf p@{ dispatch, folderOpen, frontends, handed, session } = R.c
, nodeActions { id , nodeActions { id
, nodeType , nodeType
, refreshTree: const $ dispatch RefreshTree , refreshTree: const $ dispatch RefreshTree
, session , session
} }
] ]
......
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