Commit ce957027 authored by arturo's avatar arturo

[tree] UI emphase selected node

* #424
parent 0487ad41
Pipeline #3029 failed with stage
......@@ -8120,7 +8120,8 @@ a:focus, a:hover {
display: flex;
align-items: center;
margin-bottom: 3px;
width: max-content;
min-width: max-content;
position: relative;
}
.right-handed .mainleaf {
flex-direction: row;
......@@ -8300,6 +8301,28 @@ a:focus, a:hover {
color: #FF550B;
font-weight: bold;
}
.mainleaf--selected::after {
content: "";
font-family: ForkAwesome;
width: 4px;
color: #FFFFFF;
background-color: #FF550B;
top: 0;
bottom: 0;
position: absolute;
}
.right-handed .mainleaf--selected::after {
right: 0;
border-top-left-radius: 0.25rem;
border-bottom-left-radius: 0.25rem;
}
.left-handed .mainleaf--selected::after {
left: 0;
border-top-right-radius: 0.25rem;
border-bottom-right-radius: 0.25rem;
}
.mainleaf--file-dropped .mainleaf__node-link::before {
content: "";
border: 1px dotted #303030;
......
......@@ -8073,7 +8073,8 @@ a:focus, a:hover {
display: flex;
align-items: center;
margin-bottom: 3px;
width: max-content;
min-width: max-content;
position: relative;
}
.right-handed .mainleaf {
flex-direction: row;
......@@ -8253,6 +8254,28 @@ a:focus, a:hover {
color: #005a9a;
font-weight: bold;
}
.mainleaf--selected::after {
content: "";
font-family: ForkAwesome;
width: 4px;
color: #FFFFFF;
background-color: #005a9a;
top: 0;
bottom: 0;
position: absolute;
}
.right-handed .mainleaf--selected::after {
right: 0;
border-top-left-radius: 0.25rem;
border-bottom-left-radius: 0.25rem;
}
.left-handed .mainleaf--selected::after {
left: 0;
border-top-right-radius: 0.25rem;
border-bottom-right-radius: 0.25rem;
}
.mainleaf--file-dropped .mainleaf__node-link::before {
content: "";
border: 1px dotted #007bff;
......
......@@ -7829,7 +7829,8 @@ a:focus, a:hover {
display: flex;
align-items: center;
margin-bottom: 3px;
width: max-content;
min-width: max-content;
position: relative;
}
.right-handed .mainleaf {
flex-direction: row;
......@@ -8009,6 +8010,28 @@ a:focus, a:hover {
color: #2f3c48;
font-weight: bold;
}
.mainleaf--selected::after {
content: "";
font-family: ForkAwesome;
width: 4px;
color: #FFFFFF;
background-color: #2f3c48;
top: 0;
bottom: 0;
position: absolute;
}
.right-handed .mainleaf--selected::after {
right: 0;
border-top-left-radius: 0.25rem;
border-bottom-left-radius: 0.25rem;
}
.left-handed .mainleaf--selected::after {
left: 0;
border-top-right-radius: 0.25rem;
border-bottom-right-radius: 0.25rem;
}
.mainleaf--file-dropped .mainleaf__node-link::before {
content: "";
border: 1px dotted #6f7f8c;
......
......@@ -8077,7 +8077,8 @@ a:focus, a:hover {
display: flex;
align-items: center;
margin-bottom: 3px;
width: max-content;
min-width: max-content;
position: relative;
}
.right-handed .mainleaf {
flex-direction: row;
......@@ -8257,6 +8258,28 @@ a:focus, a:hover {
color: #083358;
font-weight: bold;
}
.mainleaf--selected::after {
content: "";
font-family: ForkAwesome;
width: 4px;
color: #FFFFFF;
background-color: #083358;
top: 0;
bottom: 0;
position: absolute;
}
.right-handed .mainleaf--selected::after {
right: 0;
border-top-left-radius: 0.25rem;
border-bottom-left-radius: 0.25rem;
}
.left-handed .mainleaf--selected::after {
left: 0;
border-top-right-radius: 0.25rem;
border-bottom-right-radius: 0.25rem;
}
.mainleaf--file-dropped .mainleaf__node-link::before {
content: "";
border: 1px dotted #F67280;
......
......@@ -8078,7 +8078,8 @@ a:focus, a:hover {
display: flex;
align-items: center;
margin-bottom: 3px;
width: max-content;
min-width: max-content;
position: relative;
}
.right-handed .mainleaf {
flex-direction: row;
......@@ -8258,6 +8259,28 @@ a:focus, a:hover {
color: #222222;
font-weight: bold;
}
.mainleaf--selected::after {
content: "";
font-family: ForkAwesome;
width: 4px;
color: #FFFFFF;
background-color: #222222;
top: 0;
bottom: 0;
position: absolute;
}
.right-handed .mainleaf--selected::after {
right: 0;
border-top-left-radius: 0.25rem;
border-bottom-left-radius: 0.25rem;
}
.left-handed .mainleaf--selected::after {
left: 0;
border-top-right-radius: 0.25rem;
border-bottom-right-radius: 0.25rem;
}
.mainleaf--file-dropped .mainleaf__node-link::before {
content: "";
border: 1px dotted #666666;
......
......@@ -77,7 +77,10 @@ $node-popup-width: 544px
// forcing inline width to overflow its container width
// this is mainly due to the multi-level of nested folders that keeps
// increasing the mainleaf width
width: max-content
// (as a "min-width" rule instead of "width" to allow the relative stacking
// context used for the selected UI border)
min-width: max-content
position: relative
@include right-handed
flex-direction: row
......@@ -286,6 +289,30 @@ $node-popup-width: 544px
color: $primary
font-weight: bold
&--selected::after
content: ''
font-family: ForkAwesome
width: 4px
color: $white
background-color: $primary
top: 0
bottom: 0
position: absolute
@include right-handed
&--selected::after
right: 0
border-top-left-radius: $border-radius
border-bottom-left-radius: $border-radius
@include left-handed
&--selected::after
left: 0
border-top-right-radius: $border-radius
border-bottom-right-radius: $border-radius
//----------------------------
&--file-dropped
......
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