Commit 01f019e4 authored by Bas Lijnse's avatar Bas Lijnse

Merge branch 'tree' into 'master'

improve tree control

See merge request !287
parents ece290f8 cd348910
Pipeline #26969 passed with stage
in 5 minutes and 10 seconds
......@@ -1065,38 +1065,38 @@ div.itasks-exception {
list-style: none;
}
.itasks-choicetree li input {
display: none;
}
.itasks-choicetree li input + label {
display: inline-block;
background: url("/css/icons/toggle-small-expand.png") no-repeat;
width: 16px;
height: 16px;
position: absolute;
top: 0;
left: 0;
margin-left: 0;
opacity: 0;
z-index: 2;
cursor: pointer;
height: 1em;
width: 1em;
padding: 0;
}
.itasks-choicetree li input + ol {
margin: -15px 0 0 -44px;
display: block;
height: 1em;
background: url("/css/icons/toggle-small-expand.png") 42px -3px no-repeat;
.itasks-choicetree li input ~ ol {
margin: 0 0 0 -44px;
}
.itasks-choicetree li input + ol > li {
.itasks-choicetree li input ~ ol > li {
display: none;
margin-left: -24px !important;
padding-left: 1px;
}
.itasks-choicetree li input:checked + ol {
margin: -20px 0 0 -44px;
padding: 20px 0 0 80px;
.itasks-choicetree li input:checked + label {
background: url("/css/icons/toggle-small.png") no-repeat;
}
.itasks-choicetree li input:checked ~ ol {
padding: 0 0 0 80px;
height: auto;
background: url("/css/icons/toggle-small.png") 42px 0 no-repeat;
}
.itasks-choicetree li input:checked + ol > li {
.itasks-choicetree li input:checked ~ ol > li {
display: block;
margin: 0 0 2px;
}
.itasks-choicetree li input:checked + ol > li:last-child {
.itasks-choicetree li input:checked ~ ol > li:last-child {
margin: 0 0 1px;
}
.itasks-choicetree li.itasks-leaf > label {
......@@ -1113,8 +1113,9 @@ div.itasks-exception {
font-size: 12px;
padding-left: 37px;
background-color: #fff;
background-position: 15px 1px;
background-position: 15px 0px;
background-repeat: no-repeat;
height: 16px;
}
.itasks-choicetree li label.itasks-default-folder {
background-image: url("/css/icons/folder.png");
......
......@@ -1065,38 +1065,38 @@ div.itasks-exception {
list-style: none;
}
.itasks-choicetree li input {
display: none;
}
.itasks-choicetree li input + label {
display: inline-block;
background: url("/css/icons/toggle-small-expand.png") no-repeat;
width: 16px;
height: 16px;
position: absolute;
top: 0;
left: 0;
margin-left: 0;
opacity: 0;
z-index: 2;
cursor: pointer;
height: 1em;
width: 1em;
padding: 0;
}
.itasks-choicetree li input + ol {
margin: -15px 0 0 -44px;
display: block;
height: 1em;
background: url("/css/icons/toggle-small-expand.png") 42px -3px no-repeat;
.itasks-choicetree li input ~ ol {
margin: 0 0 0 -44px;
}
.itasks-choicetree li input + ol > li {
.itasks-choicetree li input ~ ol > li {
display: none;
margin-left: -24px !important;
padding-left: 1px;
}
.itasks-choicetree li input:checked + ol {
margin: -20px 0 0 -44px;
padding: 20px 0 0 80px;
.itasks-choicetree li input:checked + label {
background: url("/css/icons/toggle-small.png") no-repeat;
}
.itasks-choicetree li input:checked ~ ol {
padding: 0 0 0 80px;
height: auto;
background: url("/css/icons/toggle-small.png") 42px 0 no-repeat;
}
.itasks-choicetree li input:checked + ol > li {
.itasks-choicetree li input:checked ~ ol > li {
display: block;
margin: 0 0 2px;
}
.itasks-choicetree li input:checked + ol > li:last-child {
.itasks-choicetree li input:checked ~ ol > li:last-child {
margin: 0 0 1px;
}
.itasks-choicetree li.itasks-leaf > label {
......@@ -1113,8 +1113,9 @@ div.itasks-exception {
font-size: 12px;
padding-left: 37px;
background-color: #fff;
background-position: 15px 1px;
background-position: 15px 0px;
background-repeat: no-repeat;
height: 16px;
}
.itasks-choicetree li label.itasks-default-folder {
background-image: url("/css/icons/folder.png");
......
......@@ -83,21 +83,21 @@
list-style: none;
input {
position: absolute;
top: 0;
left: 0;
margin-left: 0;
opacity: 0;
z-index: 2;
cursor: pointer;
height: 1em;
width: 1em;
display: none;
+ label {
display: inline-block;
background: url("/css/icons/toggle-small-expand.png") no-repeat;
width: 16px;
height: 16px;
position: absolute;
top: 0;
left: 0;
padding: 0;
}
+ ol {
margin: -15px 0 0 -44px;
display: block;
height: 1em;
background: url('#{$icon-path}toggle-small-expand.png') 42px -3px no-repeat;
~ ol {
margin: 0 0 0 -44px;
> li {
display: none;
......@@ -105,11 +105,14 @@
padding-left: 1px;
}
}
&:checked + ol {
margin: -20px 0 0 -44px;
padding: 20px 0 0 80px;
&:checked {
+ label {
background: url("/css/icons/toggle-small.png") no-repeat;
}
~ ol {
padding: 0 0 0 80px;
height: auto;
background: url('#{$icon-path}toggle-small.png') 42px 0 no-repeat;
> li {
display: block;
......@@ -119,6 +122,7 @@
margin: 0 0 1px;
}
}
}
}
}
&.#{$prefix}leaf > label {
......@@ -135,8 +139,9 @@
font-size: 12px;
padding-left: 37px;
background-color: #fff;
background-position: 15px 1px;
background-position: 15px 0px;
background-repeat: no-repeat;
height: 16px;
}
label.#{$prefix}default-folder {
background-image: url('#{$icon-path}folder.png');
......
......@@ -393,6 +393,11 @@ itasks.Tree = Object.assign({
},me);
node.appendChild(childExpand);
label = document.createElement('label');
label.setAttribute('for', childExpand.id);
node.appendChild(label);
childOl = document.createElement('ol');
option.children.forEach(function(option,childIdx) {
me.addNode(option,childOl,nodeId,childIdx);
......
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