mirror_php/winter
1
0
Fork 0
mirror of https://github.com/wintercms/winter.git synced 2024-06-28 05:33:29 +02:00
Code Issues Projects Releases Wiki Activity

Custom icon support for treeview

Browse Source
This commit is contained in:
Samuel Georges 2017-06-07 19:22:54 +10:00
parent 613ebf090d
commit e5358a81ce
2 changed files with 90 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
modules/backend/assets/css/october.css
View File

@ -296,7 +296,7 @@ html.mobile .control-scrollbar{overflow:auto;-webkit-overflow-scrolling:touch}
.control-treelist li.dragged > div.record:before{display:none}
.control-treelist li.placeholder{display:inline-block;position:relative;background:#4ea5e0 !important;height:25px;margin-bottom:5px}
.control-treelist li.placeholder:before{display:block;position:absolute;font-family:FontAwesome;font-weight:normal;font-style:normal;text-decoration:inherit;-webkit-font-smoothing:antialiased;*margin-right:.3em;content:"\f053";color:#d35714;left:-10px;top:8px;z-index:2000}
.control-treeview{margin-bottom:40px; }
.control-treeview{margin-bottom:40px; }
.control-treeview ol{margin:0;padding:0;list-style:none;background:#ffffff}
.control-treeview ol > li{-webkit-transition:width 1s;transition:width 1s}
.control-treeview ol > li > div{font-size:14px;font-weight:normal;background:#ffffff;border-bottom:1px solid #ecf0f1;position:relative}
@ -396,6 +396,14 @@ html.mobile .control-scrollbar{overflow:auto;-webkit-overflow-scrolling:touch}
.control-treeview ol > li > ol > li > ol > li > ol > li > ol > li > ol > li > ol > li > ol > li > ol > li > ol > li > ol > li > div > a{margin-left:-161px;padding-left:161px}
.control-treeview ol > li > ol > li > ol > li > ol > li > ol > li > ol > li > ol > li > ol > li > ol > li > ol > li > ol > li > div:before{margin-left:100px}
.control-treeview ol > li > ol > li > ol > li > ol > li > ol > li > ol > li > ol > li > ol > li > ol > li > ol > li > ol > li > div > span.expand{left:102px}
.control-treeview.with-dual-icons ol > li > div:before,.control-treeview.with-icons ol > li > div:before{display:none}
.control-treeview.with-dual-icons ol > li > div span.icon,.control-treeview.with-icons ol > li > div span.icon{display:block;position:absolute;width:22px;height:22px;left:20px;top:15px;text-align:center;font-weight:500;line-height:22px;color:#999}
.control-treeview.with-dual-icons ol > li > div span.icon > i,.control-treeview.with-icons ol > li > div span.icon > i{line-height:22px;font-weight:normal;font-size:22px;color:#999}
.control-treeview.with-dual-icons ol > li > div:hover span.icon > i,.control-treeview.with-icons ol > li > div:hover span.icon > i,.control-treeview.with-dual-icons ol > li > div.popover-highlight span.icon > i,.control-treeview.with-icons ol > li > div.popover-highlight span.icon > i{color:#fff !important}
.control-treeview.with-dual-icons ol > li > div > a{padding-left:91px}
.control-treeview.with-dual-icons ol > li > div span.icon:first-child{font-size:11px;color:#ccc}
.control-treeview.with-dual-icons ol > li > div span.icon:first-child > i{color:#ccc;font-size:15px}
.control-treeview.with-dual-icons ol > li > div span.icon:last-child{left:52px}
.control-treeview p.no-data{padding:18px 0;margin:0;color:#666666;font-size:14px;text-align:center;font-weight:400}
.control-treeview a.menu-control{display:block;margin:20px;padding:13px 15px;border:dotted 2px #ebebeb;color:#bdc3c7;font-size:12px;font-weight:600;text-transform:uppercase;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;vertical-align:middle}
.control-treeview a.menu-control:hover{text-decoration:none;background-color:#58b6f7 !important;color:#ffffff !important;border:none;padding:15px 17px}
@ -408,6 +416,7 @@ html.mobile .control-scrollbar{overflow:auto;-webkit-overflow-scrolling:touch}
.control-treeview.treeview-light ol > li > div span.expand{top:19px}
.control-treeview.treeview-light ol > li > div > span.drag-handle{top:0;right:0;bottom:auto;height:100%;width:60px;background:#2581b8;-webkit-transition:none !important;transition:none !important}
.control-treeview.treeview-light ol > li > div > span.drag-handle:before{position:absolute;left:50%;top:50%;margin-left:-6px}
.control-treeview.treeview-light ol > li > div > .subpanel{right:0;top:0;height:100%;position:absolute;z-index:200;padding:0 20px}
.control-treeview.treeview-light ol > li > div > ul.submenu{right:60px;left:auto;bottom:auto;top:0;height:100%;margin:0;background:transparent;white-space:nowrap;font-size:0}
.control-treeview.treeview-light ol > li > div > ul.submenu:before,.control-treeview.treeview-light ol > li > div > ul.submenu:after{display:none}
.control-treeview.treeview-light ol > li > div > ul.submenu li{height:100%;display:inline-block;background:#2581b8;border-right:1px solid #328ec8}

92
modules/backend/assets/less/controls/treeview.less
View File

@ -175,32 +175,32 @@
}
&.popover-highlight {
background-color: @color-treeview-hover-bg!important;
background-color: @color-treeview-hover-bg !important;
&:before {
background-position: 0px -80px;
}
> a {
color: @color-treeview-hover-text!important;
color: @color-treeview-hover-text !important;
cursor: default;
}
span {
color: @color-treeview-hover-text!important;
color: @color-treeview-hover-text !important;
}
> ul.submenu, > span.drag-handle {
display: none!important;
display: none !important;
}
}
}
&.dragged div, > div:hover {
background-color: @color-treeview-hover-bg!important;
background-color: @color-treeview-hover-bg !important;
> a {
color: @color-treeview-hover-text!important;
color: @color-treeview-hover-text !important;
}
&:before {
@ -208,12 +208,12 @@
}
&:after {
top: 0!important;
bottom: 0!important;
top: 0 !important;
bottom: 0 !important;
}
span {
color: @color-treeview-hover-text!important;
color: @color-treeview-hover-text !important;
&.drag-handle {
cursor: move;
@ -228,7 +228,7 @@
&[data-no-drag-mode] div:hover {
span.drag-handle {
cursor: default!important;
cursor: default !important;
.opacity(.3)!important;
}
}
@ -241,7 +241,7 @@
}
div > ul.submenu {
display: none!important;
display: none !important;
}
}
@ -391,6 +391,65 @@
.tree-view-paddings (@max-level);
}
/*
* When using custom icons
*/
&.with-dual-icons,
&.with-icons {
ol > li > div {
&:before {
display: none;
}
span.icon {
display: block;
position: absolute;
width: 22px;
height: 22px;
left: 20px;
top: 15px;
text-align: center;
font-weight: 500;
line-height: 22px;
color: #999;
> i {
line-height: 22px;
font-weight: normal;
font-size: 22px;
color: #999;
}
}
&:hover, &.popover-highlight {
span.icon > i {
color: #fff !important;
}
}
}
}
&.with-dual-icons {
ol > li > div {
> a {
padding-left: 91px;
}
span.icon:first-child {
font-size: 11px;
color: #ccc;
> i {
color: #ccc;
font-size: 15px;
}
}
span.icon:last-child {
left: 52px;
}
}
}
p.no-data {
.no-data();
}
@ -456,7 +515,7 @@
height: 100%;
width: 60px;
background: @color-treeview-light-submenu-bg;
.transition(none)!important;
.transition(none) !important;
&:before {
position: absolute;
@ -466,6 +525,15 @@
}
}
> .subpanel {
right: 0;
top: 0;
height: 100%;
position: absolute;
z-index: 200;
padding: 0 20px;
}
> ul.submenu {
right: 60px;
left: auto;