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 @@ ...@@ -20,47 +20,7 @@
<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;} * {margin: 0; padding: 0; list-style: none;}
.tree ul li { </style>
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>
</head> </head>
<body> <body>
<div id="app" class ="container-fluid"></div> <div id="app" class ="container-fluid"></div>
......
dist/styles/Login.css
View file @ a9c140b9
...@@ -32,9 +32,16 @@ ...@@ -32,9 +32,16 @@
color: white; color: white;
} }
#toolbar {
display: inline;
}
#toolbar ul li { #toolbar ul li {
display: inline;
margin-right: 19px; margin-right: 19px;
} }
#toolbar ul li form {
display: inline;
}
#horizontal-checkbox ul li { #horizontal-checkbox ul li {
display: inline; display: inline;
...@@ -110,26 +117,6 @@ li#rename #rename-a { ...@@ -110,26 +117,6 @@ li#rename #rename-a {
min-width: 200px; 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 { .glyphitem {
top: 0; top: 0;
display: inline-block; display: inline-block;
......
dist/styles/Login.sass
View file @ a9c140b9
...@@ -26,9 +26,13 @@ ...@@ -26,9 +26,13 @@
#toolbar #toolbar
display: inline
ul ul
li li
display: inline
margin-right : 19px margin-right : 19px
form
display: inline
#horizontal-checkbox #horizontal-checkbox
ul ul
...@@ -101,28 +105,6 @@ li#rename ...@@ -101,28 +105,6 @@ li#rename
select select
min-width: 200px 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 .glyphitem
top: 0 top: 0
display: inline-block 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 { .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 { .tree .file-dropped {
background-color: #d8dfe5; background-color: #d8dfe5;
...@@ -20,15 +113,6 @@ ...@@ -20,15 +113,6 @@
color: blue; color: blue;
text-decoration: underline; 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 { .progress-pie {
background: rgba(51, 122, 183, 0.1); 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 .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 .file-dropped
background-color: #d8dfe5 background-color: #d8dfe5
.node-actions .node-actions
...@@ -15,17 +97,6 @@ ...@@ -15,17 +97,6 @@
.text .text
color: blue color: blue
text-decoration: underline 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 // based on https://codeburst.io/how-to-pure-css-pie-charts-w-css-variables-38287aea161e
.progress-pie .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 ...@@ -70,54 +70,54 @@ nodeMainSpan isLeaf p@{ dispatch, folderOpen, frontends, handed, session } = R.c
GT.RightHanded -> identity GT.RightHanded -> identity
pure $ H.span (dropProps droppedFile isDragOver) pure $ H.span (dropProps droppedFile isDragOver)
$ ordering $ ordering
[ 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
, barType: Pie , barType: Pie
, corpusId: id , corpusId: id
, onFinish: const $ onTaskFinish t , onFinish: const $ onTaskFinish t
, 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 {} []
, if showBox then , if showBox then
Popover.popover { arrow: false Popover.popover { arrow: false
, open: false , open: false
, onClose: \_ -> pure unit , onClose: \_ -> pure unit
, onOpen: \_ -> pure unit , onOpen: \_ -> pure unit
, ref: popoverRef } [ , ref: popoverRef } [
popOverIcon popOverIcon
, mNodePopupView props (onPopoverClose popoverRef) , mNodePopupView props (onPopoverClose popoverRef)
] ]
else H.div {} [] else H.div {} []
, nodeActions { id , nodeActions { id
, nodeType , nodeType
, refreshTree: const $ dispatch RefreshTree , refreshTree: const $ dispatch RefreshTree
, session , session
} }
] ]
where where
SettingsBox {show: showBox} = settingsBox nodeType SettingsBox {show: showBox} = settingsBox nodeType
onPopoverClose popoverRef _ = Popover.setOpen popoverRef false onPopoverClose popoverRef _ = Popover.setOpen popoverRef false
......
src/index.html
View file @ a9c140b9
...@@ -20,47 +20,7 @@ ...@@ -20,47 +20,7 @@
<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;} * {margin: 0; padding: 0; list-style: none;}
.tree ul li { </style>
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>
</head> </head>
<body> <body>
<div id="app" class ="container-fluid"></div> <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