Skip to content

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

[tree] style fixes for left/right handed

parent 727ea08d
Hide whitespace changes
Inline Side-by-side
Showing with 238 additions and 194 deletions
dist/index.html
View file @ a9c140b9
......@@ -20,47 +20,7 @@
<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>
</style>
</head>
<body>
<div id="app" class ="container-fluid"></div>
......
dist/styles/Login.css
View file @ a9c140b9
......@@ -32,9 +32,16 @@
color: white;
}
#toolbar {
display: inline;
}
#toolbar ul li {
display: inline;
margin-right: 19px;
}
#toolbar ul li form {
display: inline;
}
#horizontal-checkbox ul li {
display: inline;
......@@ -110,26 +117,6 @@ li#rename #rename-a {
min-width: 200px;
}
li .leaf {
display: flex;
flex-direction: row;
justify-content: flex-start;
}
li .leaf .folder-icon {
padding: 0 2 0 2;
}
li .leaf a.settings {
cursor: pointer;
display: block;
padding: 0 2 0 2;
text-decoration: none;
visibility: hidden;
z-index: 1;
}
li .leaf:hover a.settings {
visibility: visible;
}
.glyphitem {
top: 0;
display: inline-block;
......
dist/styles/Login.sass
View file @ a9c140b9
......@@ -26,9 +26,13 @@
#toolbar
display: inline
ul
li
display: inline
margin-right : 19px
form
display: inline
#horizontal-checkbox
ul
......@@ -101,28 +105,6 @@ li#rename
select
min-width: 200px
li
.leaf
display: flex
flex-direction: row
justify-content: flex-start
.folder-icon
padding: 0 2 0 2
a.settings
cursor: pointer
display: block
padding: 0 2 0 2
text-decoration: none
visibility: hidden
z-index: 1
&:hover
a.settings
visibility: visible
.glyphitem
top: 0
display: inline-block
......
dist/styles/Tree.css
View file @ a9c140b9
body > .tree ul > li:first-child::before {
top: 12px;
}
li .leaf {
display: flex;
flex-direction: row;
}
li .leaf .folder-icon {
padding: 0 2 0 2;
}
li .leaf a.settings {
cursor: pointer;
display: block;
padding: 0 2 0 2;
text-decoration: none;
visibility: hidden;
z-index: 1;
}
li .leaf:hover a.settings {
visibility: visible;
}
.tree {
margin-top: 10px;
margin-top: 20px;
}
.tree ul li {
position: relative;
}
.tree ul li::after {
content: " ";
height: 1px;
position: absolute;
top: 12px;
}
.tree ul li::before {
bottom: -12px;
content: " ";
position: absolute;
top: 5px;
}
.tree ul li:not(:first-child):last-child::before {
display: none;
}
.tree ul li:only-child::before {
bottom: 7px;
content: " ";
display: list-item;
position: absolute;
width: 1px;
top: 5px;
}
.tree .lefthanded ul {
margin-right: 19px;
}
.tree .lefthanded ul li {
margin-right: 15px;
padding-right: 5px;
}
.tree .lefthanded ul li::after {
background-color: #000;
right: -10px;
width: 10px;
}
.tree .lefthanded ul li::before {
background-color: #000;
right: -10px;
width: 1px;
}
.tree .lefthanded ul li .leaf {
justify-content: flex-end;
}
.tree .righthanded ul {
margin-left: 19px;
}
.tree .righthanded ul li {
margin-left: 15px;
padding-left: 5px;
}
.tree .righthanded ul li::after {
background-color: #000;
left: -10px;
width: 10px;
}
.tree .righthanded ul li::before {
background-color: #000;
left: -10px;
width: 1px;
}
.tree .righthanded ul li:only::before {
background-color: #000;
right: 10px;
}
.tree .righthanded ul li .leaf {
justify-content: flex-start;
}
.tree .file-dropped {
background-color: #d8dfe5;
......@@ -20,15 +113,6 @@
color: blue;
text-decoration: underline;
}
.tree .lefthanded ul {
margin-right: 19px;
}
.tree .lefthanded li .leaf {
justify-content: flex-end;
}
.tree .righthanded li .leaf {
justify-content: flex-start;
}
.progress-pie {
background: rgba(51, 122, 183, 0.1);
......
dist/styles/Tree.sass
View file @ a9c140b9
body > .tree ul > li:first-child::before
top: 12px
li
.leaf
display: flex
flex-direction: row
.folder-icon
padding: 0 2 0 2
a.settings
cursor: pointer
display: block
padding: 0 2 0 2
text-decoration: none
visibility: hidden
z-index: 1
&:hover
a.settings
visibility: visible
.tree
margin-top: 10px
margin-top: 20px
ul
li
position: relative
&::after
content: " "
height: 1px
position: absolute
top: 12px
&::before
bottom: -12px
content: " "
position: absolute
top: 5px
&:not(:first-child):last-child::before
display: none
&:only-child::before
bottom: 7px
content: " "
display: list-item
//height: 7px
position: absolute
width: 1px
top: 5px
.lefthanded
ul
margin-right : 19px
li
margin-right: 15px
padding-right: 5px
&::after
background-color: #000
right: -10px
width: 10px
&::before
background-color: #000
right: -10px
width: 1px
&:only-child::before
//right: 1px
.leaf
justify-content : flex-end
.righthanded
ul
margin-left : 19px
li
margin-left: 15px
padding-left: 5px
&::after
background-color: #000
left: -10px
width: 10px
&::before
background-color: #000
left: -10px
width: 1px
&:only::before
background-color: #000
right: 10px
.leaf
justify-content : flex-start
.file-dropped
background-color: #d8dfe5
.node-actions
......@@ -15,17 +97,6 @@
.text
color: blue
text-decoration: underline
.lefthanded
ul
margin-right : 19px
li
.leaf
justify-content : flex-end
.righthanded
li
.leaf
justify-content : flex-start
// based on https://codeburst.io/how-to-pure-css-pie-charts-w-css-variables-38287aea161e
.progress-pie
......
src/Gargantext/Components/Forest/Tree/Node.purs
View file @ a9c140b9
......@@ -70,54 +70,54 @@ nodeMainSpan isLeaf p@{ dispatch, folderOpen, frontends, handed, session } = R.c
GT.RightHanded -> identity
pure $ H.span (dropProps droppedFile isDragOver)
$ ordering
[ folderIcon nodeType folderOpen
, chevronIcon isLeaf handed nodeType folderOpen
, nodeLink { frontends
, id
, isSelected: mCurrentRoute
== Routes.nodeTypeAppRoute
nodeType
(sessionId session) id
, name: name' props
, nodeType
, session
, handed
}
, fileTypeView { dispatch, droppedFile, id, isDragOver, nodeType }
, H.div {} (map (\t -> asyncProgressBar { asyncTask: t
, barType: Pie
, corpusId: id
, onFinish: const $ onTaskFinish t
, session
}
) tasks
)
, if nodeType == GT.NodeUser
then GV.versionView {session}
else H.div {} []
, if showBox then
Popover.popover { arrow: false
, open: false
, onClose: \_ -> pure unit
, onOpen: \_ -> pure unit
, ref: popoverRef } [
popOverIcon
, mNodePopupView props (onPopoverClose popoverRef)
]
else H.div {} []
, nodeActions { id
, nodeType
, refreshTree: const $ dispatch RefreshTree
, session
}
]
$ ordering
[ folderIcon nodeType folderOpen
, chevronIcon isLeaf handed nodeType folderOpen
, nodeLink { frontends
, id
, isSelected: mCurrentRoute
== Routes.nodeTypeAppRoute
nodeType
(sessionId session) id
, name: name' props
, nodeType
, session
, handed
}
, fileTypeView { dispatch, droppedFile, id, isDragOver, nodeType }
, H.div {} (map (\t -> asyncProgressBar { asyncTask: t
, barType: Pie
, corpusId: id
, onFinish: const $ onTaskFinish t
, session
}
) tasks
)
, if nodeType == GT.NodeUser
then GV.versionView {session}
else H.div {} []
, if showBox then
Popover.popover { arrow: false
, open: false
, onClose: \_ -> pure unit
, onOpen: \_ -> pure unit
, ref: popoverRef } [
popOverIcon
, mNodePopupView props (onPopoverClose popoverRef)
]
else H.div {} []
, nodeActions { id
, nodeType
, refreshTree: const $ dispatch RefreshTree
, session
}
]
where
SettingsBox {show: showBox} = settingsBox nodeType
onPopoverClose popoverRef _ = Popover.setOpen popoverRef false
......
src/index.html
View file @ a9c140b9
......@@ -20,47 +20,7 @@
<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>
</style>
</head>
<body>
<div id="app" class ="container-fluid"></div>
......
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