Updated the treeview control, updated Redactor scripts, the CMS Content is now a compound object
This commit is contained in:
alekseybobkov
parent
176f41f0f1
commit
e7767176ce
|
|
@ -13008,6 +13008,22 @@ div.popover-overlay {
|
|||
-moz-border-radius: 0;
|
||||
border-radius: 0;
|
||||
}
|
||||
.fancy-layout .field-richeditor {
|
||||
border: none;
|
||||
border-left: 1px solid #e0e0e0;
|
||||
}
|
||||
.fancy-layout .field-richeditor,
|
||||
.fancy-layout .field-richeditor .redactor_box,
|
||||
.fancy-layout .field-richeditor .redactor_toolbar {
|
||||
-webkit-border-radius: 0;
|
||||
-moz-border-radius: 0;
|
||||
border-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
border-top-left-radius: 0;
|
||||
}
|
||||
body.side-panel-not-fixed .fancy-layout .field-richeditor {
|
||||
border-left: none;
|
||||
}
|
||||
html.cssanimations .fancy-layout .form-tabless-fields .loading-indicator-container .loading-indicator > span {
|
||||
-webkit-animation: spin 1s linear infinite;
|
||||
animation: spin 1s linear infinite;
|
||||
|
|
@ -13455,35 +13471,35 @@ div[data-control="balloon-selector"]:not(.control-disabled) ul li:hover {
|
|||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
background: #ffffff;
|
||||
}
|
||||
.control-treeview ol > li {
|
||||
position: relative;
|
||||
}
|
||||
.control-treeview ol > li span.expand {
|
||||
display: none;
|
||||
-webkit-transition: width 1s;
|
||||
transition: width 1s;
|
||||
}
|
||||
.control-treeview ol > li > div {
|
||||
font-size: 14px;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: #2b3e50;
|
||||
background: #ffffff;
|
||||
margin-bottom: 1px;
|
||||
padding: 16px 16px 15px 51px;
|
||||
border-bottom: 1px solid #ecf0f1;
|
||||
padding: 16px 16px 15px 61px;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
}
|
||||
.control-treeview ol > li > div:before {
|
||||
content: ' ';
|
||||
background-image: url(../images/treeview-icons.svg);
|
||||
background-position: 0px top;
|
||||
background-image: url(../images/treeview-icons.png);
|
||||
background-position: 0px -28px;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 25px auto;
|
||||
background-size: 42px auto;
|
||||
position: absolute;
|
||||
width: 21px;
|
||||
height: 26px;
|
||||
left: 18px;
|
||||
height: 22px;
|
||||
left: 28px;
|
||||
top: 20px;
|
||||
}
|
||||
.control-treeview ol > li > div > span {
|
||||
.control-treeview ol > li > div span.comment {
|
||||
display: block;
|
||||
font-weight: 400;
|
||||
color: #95a5a6;
|
||||
|
|
@ -13492,113 +13508,25 @@ div[data-control="balloon-selector"]:not(.control-disabled) ul li:hover {
|
|||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.control-treeview ol > li > div:hover {
|
||||
background-color: #58b6f7;
|
||||
color: #ffffff;
|
||||
}
|
||||
.control-treeview ol > li > div:hover:before {
|
||||
background-position: 0px -65px;
|
||||
}
|
||||
.control-treeview ol > li > div:hover > span {
|
||||
color: #ffffff;
|
||||
}
|
||||
.control-treeview ol > li[data-status=collapsed] > ol {
|
||||
display: none;
|
||||
}
|
||||
.control-treeview ol > li.has-subitems > div:before {
|
||||
background-position: 0 -29px;
|
||||
width: 23px;
|
||||
height: 29px;
|
||||
left: 16px;
|
||||
}
|
||||
.control-treeview ol > li.has-subitems > div:hover:before {
|
||||
background-position: 0px -95px;
|
||||
}
|
||||
.control-treeview ol > li > ol > li > div {
|
||||
padding-left: 71px;
|
||||
}
|
||||
.control-treeview ol > li > ol > li > div:before {
|
||||
margin-left: 20px;
|
||||
}
|
||||
.control-treeview ol > li > ol > li > ol > li > div {
|
||||
padding-left: 91px;
|
||||
}
|
||||
.control-treeview ol > li > ol > li > ol > li > div:before {
|
||||
margin-left: 40px;
|
||||
}
|
||||
.control-treeview ol > li > ol > li > ol > li > ol > li > div {
|
||||
padding-left: 111px;
|
||||
}
|
||||
.control-treeview ol > li > ol > li > ol > li > ol > li > div:before {
|
||||
margin-left: 60px;
|
||||
}
|
||||
.control-treeview ol > li > ol > li > ol > li > ol > li > ol > li > div {
|
||||
padding-left: 131px;
|
||||
}
|
||||
.control-treeview ol > li > ol > li > ol > li > ol > li > ol > li > div:before {
|
||||
margin-left: 80px;
|
||||
}
|
||||
.control-treeview ol > li > ol > li > ol > li > ol > li > ol > li > ol > li > div {
|
||||
padding-left: 151px;
|
||||
}
|
||||
.control-treeview 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 > div {
|
||||
padding-left: 171px;
|
||||
}
|
||||
.control-treeview ol > li > ol > li > ol > li > ol > li > ol > li > ol > li > ol > li > div:before {
|
||||
margin-left: 120px;
|
||||
}
|
||||
.control-treeview ol > li > ol > li > ol > li > ol > li > ol > li > ol > li > ol > li > ol > li > div {
|
||||
padding-left: 191px;
|
||||
}
|
||||
.control-treeview ol > li > ol > li > ol > li > ol > li > ol > li > ol > li > ol > li > ol > li > div:before {
|
||||
margin-left: 140px;
|
||||
}
|
||||
.control-treeview ol > li > ol > li > ol > li > ol > li > ol > li > ol > li > ol > li > ol > li > ol > li > div {
|
||||
padding-left: 211px;
|
||||
}
|
||||
.control-treeview ol > li > ol > li > ol > li > ol > li > ol > li > ol > li > ol > li > ol > li > ol > li > div:before {
|
||||
margin-left: 160px;
|
||||
}
|
||||
.control-treeview ol > li > ol > li > ol > li > ol > li > ol > li > ol > li > ol > li > ol > li > ol > li > ol > li > div {
|
||||
padding-left: 231px;
|
||||
}
|
||||
.control-treeview ol > li > ol > li > ol > li > ol > li > ol > li > ol > li > ol > li > ol > li > ol > li > ol > li > div:before {
|
||||
margin-left: 180px;
|
||||
}
|
||||
.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 {
|
||||
padding-left: 251px;
|
||||
}
|
||||
.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: 200px;
|
||||
}
|
||||
.oc-treeview-expand-control {
|
||||
.control-treeview ol > li > div > span.expand {
|
||||
font: 0/0 a;
|
||||
color: transparent;
|
||||
text-shadow: none;
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
position: absolute;
|
||||
width: 23px;
|
||||
height: 23px;
|
||||
border-radius: 20px;
|
||||
background: #ffffff;
|
||||
display: block;
|
||||
z-index: 100;
|
||||
cursor: pointer;
|
||||
-webkit-transition: opacity 0.2s;
|
||||
transition: opacity 0.2s;
|
||||
}
|
||||
.oc-treeview-expand-control.expand-hidden {
|
||||
display: none;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
top: 24px;
|
||||
left: 2px;
|
||||
cursor: pointer;
|
||||
color: #bdc3c7;
|
||||
-webkit-transition: transform 0.1s ease;
|
||||
transition: transform 0.1s ease;
|
||||
}
|
||||
.oc-treeview-expand-control.expand-drag-hidden {
|
||||
opacity: 0;
|
||||
filter: alpha(opacity=0);
|
||||
}
|
||||
.oc-treeview-expand-control:before {
|
||||
.control-treeview ol > li > div > span.expand:before {
|
||||
font-family: FontAwesome;
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
|
|
@ -13606,25 +13534,321 @@ div[data-control="balloon-selector"]:not(.control-disabled) ul li:hover {
|
|||
-webkit-font-smoothing: antialiased;
|
||||
*margin-right: .3em;
|
||||
content: "\f0da";
|
||||
line-height: 100%;
|
||||
font-size: 15px;
|
||||
position: relative;
|
||||
left: 8px;
|
||||
top: 2px;
|
||||
}
|
||||
.control-treeview ol > li > div > span.drag-handle {
|
||||
font: 0/0 a;
|
||||
color: transparent;
|
||||
text-shadow: none;
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
-webkit-transition: opacity 0.4s;
|
||||
transition: opacity 0.4s;
|
||||
position: absolute;
|
||||
left: 7px;
|
||||
top: 12px;
|
||||
color: #33495f;
|
||||
-webkit-transition: all 0.1s ease;
|
||||
transition: all 0.1s ease;
|
||||
right: 10px;
|
||||
bottom: 5px;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
cursor: move;
|
||||
color: #bdc3c7;
|
||||
opacity: 0;
|
||||
filter: alpha(opacity=0);
|
||||
}
|
||||
.oc-treeview-expand-control.hover {
|
||||
background-color: #58b6f7;
|
||||
.control-treeview ol > li > div > span.drag-handle:before {
|
||||
font-family: FontAwesome;
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
text-decoration: inherit;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
*margin-right: .3em;
|
||||
content: "\f0c9";
|
||||
font-size: 14px;
|
||||
}
|
||||
.oc-treeview-expand-control.hover:before {
|
||||
.control-treeview ol > li > div span.borders {
|
||||
font-size: 0;
|
||||
}
|
||||
.control-treeview ol > li.dragged div,
|
||||
.control-treeview ol > li > div:hover {
|
||||
background-color: #58b6f7 !important;
|
||||
color: #ffffff !important;
|
||||
}
|
||||
.control-treeview ol > li.dragged div:before,
|
||||
.control-treeview ol > li > div:hover:before {
|
||||
background-position: 0px -80px;
|
||||
}
|
||||
.control-treeview ol > li.dragged div:after,
|
||||
.control-treeview ol > li > div:hover:after {
|
||||
top: 0!important;
|
||||
bottom: 0!important;
|
||||
}
|
||||
.control-treeview ol > li.dragged div span,
|
||||
.control-treeview ol > li > div:hover span {
|
||||
color: #ffffff !important;
|
||||
}
|
||||
.control-treeview ol > li.dragged div span.drag-handle,
|
||||
.control-treeview ol > li > div:hover span.drag-handle {
|
||||
cursor: move;
|
||||
opacity: 1;
|
||||
filter: alpha(opacity=100);
|
||||
}
|
||||
.control-treeview ol > li.dragged div span.borders,
|
||||
.control-treeview ol > li > div:hover span.borders {
|
||||
display: none;
|
||||
}
|
||||
.control-treeview ol > li.dragged li.has-subitems > div:before,
|
||||
.control-treeview ol > li.dragged.has-subitems > div:before {
|
||||
background-position: 0px -52px;
|
||||
}
|
||||
.control-treeview ol > li > ol {
|
||||
padding-left: 20px;
|
||||
}
|
||||
.control-treeview ol > li[data-status=collapsed] > ol {
|
||||
display: none;
|
||||
}
|
||||
.control-treeview ol > li.has-subitems > div:before {
|
||||
background-position: 0 0;
|
||||
width: 23px;
|
||||
height: 26px;
|
||||
left: 26px;
|
||||
}
|
||||
.control-treeview ol > li.has-subitems > div:hover:before {
|
||||
background-position: 0px -52px;
|
||||
}
|
||||
.control-treeview ol > li.has-subitems > div span.expand {
|
||||
display: block;
|
||||
}
|
||||
.control-treeview ol > li.placeholder {
|
||||
height: 0;
|
||||
position: relative;
|
||||
border-bottom: 1px dotted #c03f31;
|
||||
}
|
||||
.control-treeview ol > li.placeholder:before {
|
||||
font-family: FontAwesome;
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
text-decoration: inherit;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
*margin-right: .3em;
|
||||
content: "\f0da";
|
||||
font-size: 23px;
|
||||
color: white;
|
||||
position: absolute;
|
||||
left: -11px;
|
||||
top: -17px;
|
||||
z-index: 1900;
|
||||
}
|
||||
.control-treeview ol > li.placeholder:after {
|
||||
font-family: FontAwesome;
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
text-decoration: inherit;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
*margin-right: .3em;
|
||||
content: "\f0da";
|
||||
font-size: 21px;
|
||||
color: #c03f31;
|
||||
position: absolute;
|
||||
left: -10px;
|
||||
top: -14px;
|
||||
z-index: 1901;
|
||||
}
|
||||
.control-treeview ol > li.dragged {
|
||||
position: absolute;
|
||||
z-index: 2000;
|
||||
opacity: 0.5;
|
||||
filter: alpha(opacity=50);
|
||||
}
|
||||
.control-treeview ol > li.dragged > div {
|
||||
-webkit-border-radius: 3px;
|
||||
-moz-border-radius: 3px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
.control-treeview ol > li.drop-target > div {
|
||||
background-color: #2581b8!important;
|
||||
color: #ffffff;
|
||||
}
|
||||
.oc-treeview-expand-control[data-status=expanded]:before {
|
||||
.control-treeview ol > li.drop-target > div:before {
|
||||
background-position: 0px -80px;
|
||||
}
|
||||
.control-treeview ol > li.drop-target > div > span.comment {
|
||||
color: #ffffff;
|
||||
}
|
||||
.control-treeview ol > li.drop-target.has-subitems > div:before {
|
||||
background-position: 0px -52px;
|
||||
}
|
||||
.control-treeview ol > li[data-status=expanded] > div > span.expand {
|
||||
-webkit-transform: rotate(90deg) translate(0, 0);
|
||||
-ms-transform: rotate(90deg) translate(0, 0);
|
||||
transform: rotate(90deg) translate(0, 0);
|
||||
}
|
||||
.control-treeview ol > li.drag-ghost {
|
||||
background-color: transparent;
|
||||
box-sizing: content-box;
|
||||
}
|
||||
.control-treeview ol > li.active > div {
|
||||
background: #dddddd;
|
||||
}
|
||||
.control-treeview ol > li.active > div:after {
|
||||
position: absolute;
|
||||
width: 4px;
|
||||
left: 0;
|
||||
top: -1px;
|
||||
bottom: -1px;
|
||||
background: #e67e22;
|
||||
display: block;
|
||||
content: ' ';
|
||||
}
|
||||
.control-treeview ol > li.active > div > span.comment,
|
||||
.control-treeview ol > li.active > div > span.expand {
|
||||
color: #8f8f8f;
|
||||
}
|
||||
.control-treeview ol > li.active > div > span.borders:before,
|
||||
.control-treeview ol > li.active > div > span.borders:after {
|
||||
content: ' ';
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
display: block;
|
||||
left: 0;
|
||||
background-color: #dddddd;
|
||||
}
|
||||
.control-treeview ol > li.active > div > span.borders:before {
|
||||
top: -1px;
|
||||
}
|
||||
.control-treeview ol > li.active > div > span.borders:after {
|
||||
bottom: -1px;
|
||||
}
|
||||
.control-treeview ol > li > ol > li > div {
|
||||
margin-left: -20px;
|
||||
padding-left: 71px;
|
||||
}
|
||||
.control-treeview ol > li > ol > li > div:before {
|
||||
margin-left: 10px;
|
||||
}
|
||||
.control-treeview ol > li > ol > li > div > span.expand {
|
||||
left: 12px;
|
||||
}
|
||||
.control-treeview ol > li > ol > li > ol > li > div {
|
||||
margin-left: -40px;
|
||||
padding-left: 81px;
|
||||
}
|
||||
.control-treeview ol > li > ol > li > ol > li > div:before {
|
||||
margin-left: 20px;
|
||||
}
|
||||
.control-treeview ol > li > ol > li > ol > li > div > span.expand {
|
||||
left: 22px;
|
||||
}
|
||||
.control-treeview ol > li > ol > li > ol > li > ol > li > div {
|
||||
margin-left: -60px;
|
||||
padding-left: 91px;
|
||||
}
|
||||
.control-treeview ol > li > ol > li > ol > li > ol > li > div:before {
|
||||
margin-left: 30px;
|
||||
}
|
||||
.control-treeview ol > li > ol > li > ol > li > ol > li > div > span.expand {
|
||||
left: 32px;
|
||||
}
|
||||
.control-treeview ol > li > ol > li > ol > li > ol > li > ol > li > div {
|
||||
margin-left: -80px;
|
||||
padding-left: 101px;
|
||||
}
|
||||
.control-treeview ol > li > ol > li > ol > li > ol > li > ol > li > div:before {
|
||||
margin-left: 40px;
|
||||
}
|
||||
.control-treeview ol > li > ol > li > ol > li > ol > li > ol > li > div > span.expand {
|
||||
left: 42px;
|
||||
}
|
||||
.control-treeview ol > li > ol > li > ol > li > ol > li > ol > li > ol > li > div {
|
||||
margin-left: -100px;
|
||||
padding-left: 111px;
|
||||
}
|
||||
.control-treeview ol > li > ol > li > ol > li > ol > li > ol > li > ol > li > div:before {
|
||||
margin-left: 50px;
|
||||
}
|
||||
.control-treeview ol > li > ol > li > ol > li > ol > li > ol > li > ol > li > div > span.expand {
|
||||
left: 52px;
|
||||
}
|
||||
.control-treeview ol > li > ol > li > ol > li > ol > li > ol > li > ol > li > ol > li > div {
|
||||
margin-left: -120px;
|
||||
padding-left: 121px;
|
||||
}
|
||||
.control-treeview ol > li > ol > li > ol > li > ol > li > ol > li > ol > li > ol > li > div:before {
|
||||
margin-left: 60px;
|
||||
}
|
||||
.control-treeview ol > li > ol > li > ol > li > ol > li > ol > li > ol > li > ol > li > div > span.expand {
|
||||
left: 62px;
|
||||
}
|
||||
.control-treeview ol > li > ol > li > ol > li > ol > li > ol > li > ol > li > ol > li > ol > li > div {
|
||||
margin-left: -140px;
|
||||
padding-left: 131px;
|
||||
}
|
||||
.control-treeview ol > li > ol > li > ol > li > ol > li > ol > li > ol > li > ol > li > ol > li > div:before {
|
||||
margin-left: 70px;
|
||||
}
|
||||
.control-treeview ol > li > ol > li > ol > li > ol > li > ol > li > ol > li > ol > li > ol > li > div > span.expand {
|
||||
left: 72px;
|
||||
}
|
||||
.control-treeview ol > li > ol > li > ol > li > ol > li > ol > li > ol > li > ol > li > ol > li > ol > li > div {
|
||||
margin-left: -160px;
|
||||
padding-left: 141px;
|
||||
}
|
||||
.control-treeview ol > li > ol > li > ol > li > ol > li > ol > li > ol > li > ol > li > ol > li > ol > li > div:before {
|
||||
margin-left: 80px;
|
||||
}
|
||||
.control-treeview ol > li > ol > li > ol > li > ol > li > ol > li > ol > li > ol > li > ol > li > ol > li > div > span.expand {
|
||||
left: 82px;
|
||||
}
|
||||
.control-treeview ol > li > ol > li > ol > li > ol > li > ol > li > ol > li > ol > li > ol > li > ol > li > ol > li > div {
|
||||
margin-left: -180px;
|
||||
padding-left: 151px;
|
||||
}
|
||||
.control-treeview ol > li > ol > li > ol > li > ol > li > ol > li > ol > li > ol > li > ol > li > ol > li > ol > li > div:before {
|
||||
margin-left: 90px;
|
||||
}
|
||||
.control-treeview ol > li > ol > li > ol > li > ol > li > ol > li > ol > li > ol > li > ol > li > ol > li > ol > li > div > span.expand {
|
||||
left: 92px;
|
||||
}
|
||||
.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 {
|
||||
margin-left: -200px;
|
||||
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;
|
||||
}
|
||||
@media only screen and (-moz-min-device-pixel-ratio: 1.5), only screen and (-o-min-device-pixel-ratio: 3/2), only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-devicepixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx) {
|
||||
.control-treeview ol > li > div:before {
|
||||
background-position: 0px -79px;
|
||||
background-size: 21px auto;
|
||||
}
|
||||
.control-treeview ol > li.has-subitems > div:before {
|
||||
background-position: 0px -52px;
|
||||
}
|
||||
.control-treeview ol > li.has-subitems > div:hover:before {
|
||||
background-position: 0px -102px;
|
||||
}
|
||||
.control-treeview ol > li.dragged > div:before,
|
||||
.control-treeview ol > li.dragged li > div:before,
|
||||
.control-treeview ol > li > div:hover:before {
|
||||
background-position: 0px -129px;
|
||||
}
|
||||
.control-treeview ol > li.dragged li.has-subitems > div:before,
|
||||
.control-treeview ol > li.dragged.has-subitems > div:before {
|
||||
background-position: 0px -102px;
|
||||
}
|
||||
.control-treeview ol > li.drop-target > div:before {
|
||||
background-position: 0px -129px;
|
||||
}
|
||||
.control-treeview ol > li.drop-target.has-subitems > div:before {
|
||||
background-position: 0px -102px;
|
||||
}
|
||||
}
|
||||
.callout {
|
||||
font-size: 14px;
|
||||
margin-bottom: 20px;
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 2.4 KiB |
|
|
@ -1,57 +0,0 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 13.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 14948) -->
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
width="1124.208px" height="5510.614px" viewBox="0 0 1124.208 5510.614" enable-background="new 0 0 1124.208 5510.614"
|
||||
xml:space="preserve">
|
||||
<rect x="-364.849" y="-224.245" display="none" fill="#E85E00" stroke="#FFFFFF" width="1961.607" height="6004.805"/>
|
||||
<path fill="#808C8D" d="M800.292,278.688L534.984,14.016C525.984,5.04,513.792,0,501.084,0H48C21.492,0,0,21.492,0,48v950.4
|
||||
c0,26.508,21.492,48,48,48h718.405c26.508,0,48-21.492,48-48V312.672C814.405,299.916,809.317,287.7,800.292,278.688z
|
||||
M717.493,331.692H478.02V96h3.229L717.493,331.692z M96,950.4V96h286.02v283.692c0,26.508,21.492,48,48,48h288.372V950.4H96z"/>
|
||||
<g>
|
||||
<path fill="none" d="M430.02,1953.18c-26.508,0-48-21.492-48-48v-283.691H297v653.4v0.012h421.405V1953.18H430.02z"/>
|
||||
<path fill="none" d="M534.984,1539.504l48.047,47.93v-166.945H297v105h204.084C513.792,1525.489,525.984,1530.528,534.984,1539.504
|
||||
z"/>
|
||||
<path fill="none" d="M814.405,1838.135v436.766h105V1752.18H748.18l52.123,51.996
|
||||
C809.329,1813.188,814.405,1825.405,814.405,1838.135z"/>
|
||||
<polygon fill="none" points="679.032,1420.489 679.032,1656.18 918.493,1656.18 682.249,1420.489 "/>
|
||||
<path fill="none" d="M201,2322.889v-701.4H96v854.4v0.012h622.405v-105.012H249C222.492,2370.889,201,2349.397,201,2322.889z"/>
|
||||
<path fill="none" d="M591.709,1731.691l-110.46-110.202h-3.229v235.691h239.473l-113.875-113.609
|
||||
C598.985,1740.34,594.951,1736.316,591.709,1731.691z"/>
|
||||
<path fill="#95A5A6" d="M718.405,2475.901H96v-0.012v-854.4h105v-96H48c-26.508,0-48,21.492-48,48v950.387
|
||||
c0,26.508,21.492,48,48,48h718.405c26.508,0,48-21.492,48-48v-152.986h-96V2475.901z"/>
|
||||
<path fill="#808C8D" d="M297,2274.889v-653.4h-96v701.4c0,26.508,21.492,48,48,48h469.405v-95.988H297V2274.889z"/>
|
||||
<path fill="#808C8D" d="M1001.303,1603.176l-265.307-264.672c-9-8.977-21.193-14.016-33.889-14.016H249c-26.508,0-48,21.492-48,48
|
||||
v153h96v-105h286.032v166.945L748.18,1752.18h171.225v522.721h-105v95.988h153c26.508,0,48-21.492,48-48v-685.73
|
||||
C1015.405,1624.405,1010.329,1612.188,1001.303,1603.176z M679.032,1656.18v-235.691h3.217l236.244,235.691H679.032z"/>
|
||||
<path fill="#808C8D" d="M603.618,1743.571l-11.908-11.88C594.951,1736.316,598.985,1740.34,603.618,1743.571z"/>
|
||||
<rect x="718.405" y="2274.901" fill="#808C8D" width="96" height="95.988"/>
|
||||
<path fill="#808C8D" d="M591.709,1731.691l11.908,11.88c7.773,5.421,17.219,8.609,27.414,8.609H748.18l-165.148-164.746v116.746
|
||||
C583.032,1714.417,586.248,1723.899,591.709,1731.691z"/>
|
||||
<rect x="201" y="1525.489" fill="#808C8D" width="96" height="96"/>
|
||||
</g>
|
||||
<path fill="#FFFFFF" d="M800.292,3221.818l-265.307-264.672c-9-8.977-21.193-14.017-33.9-14.017H48c-26.508,0-48,21.492-48,48
|
||||
v950.401c0,26.508,21.492,48,48,48h718.404c26.508,0,48-21.492,48-48v-685.729C814.405,3243.045,809.317,3230.83,800.292,3221.818z
|
||||
M717.493,3274.822H478.02v-235.692h3.229L717.493,3274.822z M96,3893.531v-854.401h286.02v283.692c0,26.508,21.492,48,48,48
|
||||
h288.371v522.709H96z"/>
|
||||
<path fill="none" d="M430.02,4906.177c-26.508,0-48-21.492-48-48v-283.691H297v653.4v0.012h421.405v-321.721H430.02z"/>
|
||||
<path fill="none" d="M534.985,4492.501l48.046,47.93v-166.945H297v105h204.085C513.792,4478.486,525.985,4483.525,534.985,4492.501z
|
||||
"/>
|
||||
<path fill="none" d="M814.405,4791.132v436.766h105v-522.721H748.18l52.123,51.996
|
||||
C809.329,4766.185,814.405,4778.402,814.405,4791.132z"/>
|
||||
<polygon fill="none" points="679.032,4373.486 679.032,4609.177 918.493,4609.177 682.249,4373.486 "/>
|
||||
<path fill="none" d="M201,5275.886v-701.4H96v854.4v0.012h622.405v-105.012H249C222.492,5323.886,201,5302.394,201,5275.886z"/>
|
||||
<path fill="none" d="M591.709,4684.688l-110.46-110.202h-3.229v235.691h239.472l-113.875-113.609
|
||||
C598.985,4693.337,594.952,4689.313,591.709,4684.688z"/>
|
||||
<path fill="#FFFFFF" d="M718.405,5428.898H96v-0.012v-854.4h105v-96H48c-26.508,0-48,21.492-48,48v950.387c0,26.508,21.492,48,48,48
|
||||
h718.405c26.508,0,48-21.492,48-48v-152.986h-96V5428.898z"/>
|
||||
<path fill="#FFFFFF" d="M297,5227.886v-653.4h-96v701.4c0,26.508,21.492,48,48,48h469.405v-95.988H297V5227.886z"/>
|
||||
<path fill="#FFFFFF" d="M1001.303,4556.173l-265.307-264.672c-9-8.977-21.193-14.016-33.889-14.016H249c-26.508,0-48,21.492-48,48
|
||||
v153h96v-105h286.032v166.945l165.148,164.746h171.225v522.721h-105v95.988h153c26.508,0,48-21.492,48-48v-685.73
|
||||
C1015.405,4577.402,1010.329,4565.185,1001.303,4556.173z M679.032,4609.177v-235.691h3.217l236.244,235.691H679.032z"/>
|
||||
<path fill="#808C8D" d="M603.618,4696.568l-11.908-11.88C594.952,4689.313,598.985,4693.337,603.618,4696.568z"/>
|
||||
<rect x="718.405" y="5227.898" fill="#FFFFFF" width="96" height="95.988"/>
|
||||
<path fill="#FFFFFF" d="M591.709,4684.688l11.908,11.88c7.773,5.421,17.219,8.609,27.414,8.609H748.18l-165.148-164.746v116.746
|
||||
C583.032,4667.415,586.249,4676.896,591.709,4684.688z"/>
|
||||
<rect x="201" y="4478.486" fill="#FFFFFF" width="96" height="96"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 5.0 KiB |
|
|
@ -115,7 +115,10 @@
|
|||
}
|
||||
|
||||
SidePanelTab.prototype.updatePanelPosition = function() {
|
||||
this.$el.height($(document).height() - this.mainNavHeight)
|
||||
if (!this.panelFixed())
|
||||
this.$el.height($(document).height() - this.mainNavHeight)
|
||||
else
|
||||
this.$el.css('height', '')
|
||||
|
||||
if (this.panelVisible && $(window).width() > this.options.breakpoint && this.panelFixed())
|
||||
this.hideSidePanel()
|
||||
|
|
|
|||
|
|
@ -55,6 +55,8 @@
|
|||
handle: "",
|
||||
// The exact css path between the item and its subcontainers
|
||||
itemPath: "",
|
||||
// Use animation when an item is removed or inserted into the tree
|
||||
useAnimation : false,
|
||||
// The css selector of the items
|
||||
itemSelector: "li",
|
||||
// Check if the dragged item may be inside the container.
|
||||
|
|
@ -67,6 +69,10 @@
|
|||
// This happens if pullPlaceholder is set to false and the drop occurs outside a container.
|
||||
onCancel: function ($item, container, _super, event) {
|
||||
},
|
||||
|
||||
tweakCursorAdjustment: function(adjustment) {
|
||||
return adjustment
|
||||
},
|
||||
// Called after the drag has been started,
|
||||
// that is the mouse button is beeing held down and
|
||||
// the mouse is moving.
|
||||
|
|
@ -87,10 +93,16 @@
|
|||
cursorAdjustment = null
|
||||
}
|
||||
|
||||
cursorAdjustment = this.tweakCursorAdjustment(cursorAdjustment)
|
||||
|
||||
$item.css({
|
||||
height: $item.height(),
|
||||
width: $item.width()
|
||||
})
|
||||
|
||||
if (this.useAnimation)
|
||||
$item.data('oc.animated', true)
|
||||
|
||||
$item.addClass("dragged")
|
||||
$("body").addClass("dragging")
|
||||
},
|
||||
|
|
@ -109,10 +121,15 @@
|
|||
$item.css(position)
|
||||
}
|
||||
},
|
||||
// Called when the mouse button is beeing released
|
||||
// Called when the mouse button is being released
|
||||
onDrop: function ($item, container, _super, event) {
|
||||
$item.removeClass("dragged").removeAttr("style")
|
||||
$("body").removeClass("dragging")
|
||||
|
||||
if ($item.data('oc.animated')) {
|
||||
$item.hide()
|
||||
$item.slideDown(200)
|
||||
}
|
||||
},
|
||||
// Called on mousedown. If falsy value is returned, the dragging will not start.
|
||||
onMousedown: function ($item, _super, event) {
|
||||
|
|
|
|||
|
|
@ -19,15 +19,18 @@
|
|||
|
||||
this.options = options || {};
|
||||
|
||||
$el.find('> ol').sortable({
|
||||
var sortableOptions = {
|
||||
handle: options.handle,
|
||||
onDrop: function($item, container, _super) {
|
||||
self.$el.trigger('move.oc.treelist', { item: $item, container: container })
|
||||
_super($item, container)
|
||||
},
|
||||
afterMove: function($placeholder, container, $closestEl) {
|
||||
self.$el.trigger('aftermove.oc.treelist', { placeholder: $placeholder, container: container, closestEl: $closestEl })
|
||||
}
|
||||
}
|
||||
|
||||
})
|
||||
|
||||
$el.find('> ol').sortable($.extend(sortableOptions, options))
|
||||
}
|
||||
|
||||
TreeListWidget.DEFAULTS = {
|
||||
|
|
|
|||
|
|
@ -1,159 +1,137 @@
|
|||
/*
|
||||
* TreeView Widget. Represents a sortable and draggable tree view. This widget was first used in the Pages plugin, for the sidebar page tree.
|
||||
*
|
||||
* Supported options:
|
||||
* Data attributes:
|
||||
* - data-group-status-handler - AJAX handler to execute when an item is collapsed or expanded by a user
|
||||
* - data-reorder-handler - AJAX handler to execute when items are reordered
|
||||
*
|
||||
* Events:
|
||||
* Events
|
||||
* - open.oc.treeview - this event is triggered on the list element when an item is clicked.
|
||||
*
|
||||
* Dependences:
|
||||
* - Tree list (october.treelist.js)
|
||||
*
|
||||
*/
|
||||
+function ($) { "use strict";
|
||||
var TreeView = function (element, options) {
|
||||
this.$el = $(element)
|
||||
this.options = options
|
||||
this.expandControls = []
|
||||
|
||||
this.init()
|
||||
}
|
||||
|
||||
TreeView.prototype.init = function () {
|
||||
this.$expandControlContainer = this.options.expandControlContainer !== null ?
|
||||
this.$el.closest(this.options.expandControlContainer) :
|
||||
$(document.body)
|
||||
|
||||
/*
|
||||
* Delete existing expand/collapse icons
|
||||
*/
|
||||
|
||||
$.each(this.expandControls, function(){
|
||||
$(this).remove()
|
||||
})
|
||||
|
||||
/*
|
||||
* Create new expand/collapse icons
|
||||
*/
|
||||
this.$allItems = $('li', this.$el)
|
||||
this.$scrollbar = this.$el.closest('[data-control=scrollbar]')
|
||||
|
||||
var self = this
|
||||
|
||||
$('li', this.$el).each(function() {
|
||||
var $el = $(this),
|
||||
$expand = $('> span.expand', $el),
|
||||
$info = $('> div', $el)
|
||||
|
||||
$expand
|
||||
.data('oc.treeview-parent', $el)
|
||||
.addClass('oc-treeview-expand-control')
|
||||
.addClass('hidden')
|
||||
|
||||
self.$expandControlContainer.append($expand)
|
||||
|
||||
self.expandControls.push($expand)
|
||||
|
||||
$expand.click(function(){
|
||||
self.toggleGroup($expand)
|
||||
})
|
||||
|
||||
$info.mouseenter(function() {
|
||||
$expand.addClass('hover')
|
||||
})
|
||||
|
||||
$info.mouseleave(function() {
|
||||
$expand.removeClass('hover')
|
||||
})
|
||||
})
|
||||
|
||||
this.realignExpandControls()
|
||||
|
||||
/*
|
||||
* Bind to a scrollbar events, if the treeview is hosted inside a scrollbar
|
||||
*/
|
||||
|
||||
var $scrollbar = this.$el.closest('[data-control=scrollbar]')
|
||||
|
||||
if ($scrollbar.length > 0) {
|
||||
$scrollbar.on('oc.scrollStart', $.proxy(this.hideExpandControls, this))
|
||||
$scrollbar.on('oc.scrollEnd', $.proxy(this.showExpandControls, this))
|
||||
}
|
||||
|
||||
/*
|
||||
* Ralign expand controls after window resize
|
||||
*/
|
||||
|
||||
$(window).on('resize, oc.updateUi', $.proxy(this.realignExpandControls, this))
|
||||
|
||||
/*
|
||||
* Init the sortable
|
||||
*/
|
||||
|
||||
this.$el.treeListWidget()
|
||||
this.$el.treeListWidget({
|
||||
tweakCursorAdjustment: function(adjustment) {
|
||||
if (!adjustment)
|
||||
return adjustment
|
||||
|
||||
if (self.$scrollbar.length > 0) {
|
||||
adjustment.top -= self.$scrollbar.scrollTop()
|
||||
}
|
||||
|
||||
return adjustment;
|
||||
},
|
||||
isValidTarget: function($item, container) {
|
||||
return $(container.el).closest('li').attr('data-status') != 'collapsed'
|
||||
},
|
||||
useAnimation: true,
|
||||
handle: 'span.drag-handle'
|
||||
})
|
||||
|
||||
this.$el.on('move.oc.treelist', function(){
|
||||
setTimeout(function(){
|
||||
self.$allItems.removeClass('drop-target')
|
||||
self.fixSubItems()
|
||||
self.sendReorderRequest()
|
||||
}, 50)
|
||||
})
|
||||
|
||||
this.$el.on('aftermove.oc.treelist', function(event, data) {
|
||||
self.$allItems.removeClass('drop-target')
|
||||
data.container.el.closest('li').addClass('drop-target')
|
||||
})
|
||||
|
||||
/*
|
||||
* Create expand/collapse icons and drag handles
|
||||
*/
|
||||
|
||||
this.createItemControls()
|
||||
|
||||
/*
|
||||
* Bind the click events
|
||||
*/
|
||||
|
||||
this.$el.on('click', 'li > div', function(event) {
|
||||
var e = $.Event('open.oc.treeview', {relatedTarget: $(this).parent().get(0), clickEvent: event})
|
||||
self.$el.trigger(e, this)
|
||||
|
||||
return false
|
||||
})
|
||||
|
||||
/*
|
||||
* Listen for the AJAX updates and update the widget
|
||||
*/
|
||||
this.$el.on('ajaxUpdate', $.proxy(this.update, this))
|
||||
}
|
||||
|
||||
TreeView.prototype.alignExpandControls = function() {
|
||||
var expandControlOffset = this.$expandControlContainer.offset(),
|
||||
expandControlHeight = this.$expandControlContainer.height()
|
||||
TreeView.prototype.createItemControls = function() {
|
||||
var self = this
|
||||
|
||||
$.each(this.expandControls, function(){
|
||||
var $expand = $(this),
|
||||
$li = $expand.data('oc.treeview-parent'),
|
||||
offset = $li.offset(),
|
||||
top = offset.top+14-expandControlOffset.top,
|
||||
outside = top < 0 || (top+20) > expandControlHeight
|
||||
$('li', this.$el).each(function() {
|
||||
var $container = $('> div', this),
|
||||
$expand = $('> span.expand', $container),
|
||||
group = this
|
||||
|
||||
$expand.css({
|
||||
left: offset.left-7-expandControlOffset.left,
|
||||
top: top
|
||||
if ($expand.length > 0)
|
||||
return
|
||||
|
||||
$expand = $('<span class="expand">Expand</span>').click(function(){
|
||||
self.toggleGroup($(group))
|
||||
|
||||
return false
|
||||
})
|
||||
|
||||
$expand.toggleClass('expand-hidden', !$li.hasClass('has-subitems') || outside)
|
||||
$container.prepend($expand)
|
||||
|
||||
$container.append($('<span class="drag-handle">Drag</span>'))
|
||||
$container.append($('<span class="borders"></span>'))
|
||||
})
|
||||
}
|
||||
|
||||
TreeView.prototype.hideExpandControls = function() {
|
||||
$.each(this.expandControls, function(){
|
||||
$(this).addClass('expand-drag-hidden')
|
||||
})
|
||||
}
|
||||
|
||||
TreeView.prototype.showExpandControls = function() {
|
||||
$.each(this.expandControls, function(){
|
||||
$(this).removeClass('expand-drag-hidden')
|
||||
})
|
||||
|
||||
this.realignExpandControls()
|
||||
}
|
||||
|
||||
TreeView.prototype.realignExpandControls = function() {
|
||||
this.alignExpandControls()
|
||||
|
||||
$.each(this.expandControls, function(){
|
||||
$(this).removeClass('hidden')
|
||||
})
|
||||
}
|
||||
|
||||
TreeView.prototype.collapseGroup = function($expandControl, $list) {
|
||||
TreeView.prototype.collapseGroup = function($group) {
|
||||
var self = this,
|
||||
$subitems = $('> ol', $list)
|
||||
$subitems = $('> ol', $group)
|
||||
|
||||
$subitems.css('overflow', 'hidden')
|
||||
$expandControl.attr('data-status', 'collapsed')
|
||||
$subitems.css({
|
||||
'overflow': 'hidden'
|
||||
})
|
||||
|
||||
$subitems.animate({'height': 0}, { duration: 100, queue: false, complete: function() {
|
||||
$subitems.css({
|
||||
'overflow': 'visible',
|
||||
'display': 'none'
|
||||
'display': 'none',
|
||||
'height' : 'auto'
|
||||
})
|
||||
$list.attr('data-status', 'collapsed')
|
||||
self.alignExpandControls()
|
||||
$group.attr('data-status', 'collapsed')
|
||||
$(window).trigger('resize')
|
||||
} })
|
||||
|
||||
// this.sendGroupStatusRequest(group, 0);
|
||||
this.sendGroupStatusRequest($group, 0)
|
||||
}
|
||||
|
||||
TreeView.prototype.expandGroup = function($expandControl, $list) {
|
||||
TreeView.prototype.expandGroup = function($group) {
|
||||
var self = this,
|
||||
$subitems = $('> ol', $list)
|
||||
$subitems = $('> ol', $group)
|
||||
|
||||
$subitems.css({
|
||||
'overflow': 'hidden',
|
||||
|
|
@ -161,31 +139,77 @@
|
|||
'height': 0
|
||||
})
|
||||
|
||||
$list.attr('data-status', 'expanded')
|
||||
$group.attr('data-status', 'expanded')
|
||||
$subitems.animate({'height': $subitems[0].scrollHeight}, { duration: 100, queue: false, complete: function() {
|
||||
$subitems.css({
|
||||
'overflow': 'visible',
|
||||
'height': 'auto'
|
||||
})
|
||||
$expandControl.attr('data-status', 'expanded')
|
||||
self.alignExpandControls()
|
||||
$(window).trigger('resize')
|
||||
} })
|
||||
|
||||
// this.sendGroupStatusRequest(group, 1);
|
||||
this.sendGroupStatusRequest($group, 1);
|
||||
}
|
||||
|
||||
TreeView.prototype.fixSubItems = function() {
|
||||
$('li', this.$el).each(function(){
|
||||
var $li = $(this),
|
||||
$subitems = $('> ol > li', $li)
|
||||
$li.toggleClass('has-subitems', $subitems.length > 0)
|
||||
})
|
||||
}
|
||||
|
||||
TreeView.prototype.toggleGroup = function(group) {
|
||||
var $group = $(group);
|
||||
|
||||
$group.attr('data-status') == 'expanded' ?
|
||||
this.collapseGroup($group, $group.data('oc.treeview-parent')) :
|
||||
this.expandGroup($group, $group.data('oc.treeview-parent'))
|
||||
this.collapseGroup($group) :
|
||||
this.expandGroup($group)
|
||||
}
|
||||
|
||||
TreeView.prototype.sendGroupStatusRequest = function($group, status) {
|
||||
if (this.options.groupStatusHandler !== undefined) {
|
||||
var groupId = $group.data('group-id')
|
||||
|
||||
$group.request(this.options.groupStatusHandler, {data: {group: groupId, status: status}})
|
||||
}
|
||||
}
|
||||
|
||||
TreeView.prototype.sendReorderRequest = function() {
|
||||
var groups = {}
|
||||
|
||||
function iterator($container, node) {
|
||||
$('> li', $container).each(function(){
|
||||
var subnodes = {}
|
||||
iterator($('> ol', this), subnodes)
|
||||
|
||||
node[$(this).data('groupId')] = subnodes
|
||||
})
|
||||
}
|
||||
|
||||
iterator($('> ol', this.$el), groups)
|
||||
|
||||
this.$el.request(this.options.reorderHandler, {data: {structure: JSON.stringify(groups)}})
|
||||
}
|
||||
|
||||
TreeView.prototype.markActive = function(dataId) {
|
||||
$('li', this.$el).removeClass('active')
|
||||
|
||||
if (dataId)
|
||||
$('li[data-id="'+dataId+'"]', this.$el).addClass('active')
|
||||
|
||||
this.dataId = dataId
|
||||
}
|
||||
|
||||
TreeView.prototype.update = function() {
|
||||
this.createItemControls()
|
||||
|
||||
if (this.dataId !== undefined)
|
||||
this.markActive(this.dataId)
|
||||
}
|
||||
|
||||
TreeView.DEFAULTS = {
|
||||
sortableHandle: null,
|
||||
expandControlContainer: null
|
||||
|
||||
}
|
||||
|
||||
// TREEVIEW PLUGIN DEFINITION
|
||||
|
|
@ -194,11 +218,21 @@
|
|||
var old = $.fn.treeView
|
||||
|
||||
$.fn.treeView = function (option) {
|
||||
var args = arguments
|
||||
|
||||
return this.each(function () {
|
||||
var $this = $(this)
|
||||
var data = $this.data('oc.treeView')
|
||||
var options = $.extend({}, TreeView.DEFAULTS, $this.data(), typeof option == 'object' && option)
|
||||
if (!data) $this.data('oc.treeView', (data = new TreeView(this, options)))
|
||||
|
||||
if (typeof option == 'string') {
|
||||
var methodArgs = [];
|
||||
for (var i=1; i<args.length; i++)
|
||||
methodArgs.push(args[i])
|
||||
|
||||
data[option].apply(data, methodArgs)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -441,6 +441,28 @@
|
|||
.border-radius(0);
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// Rich editor
|
||||
//
|
||||
|
||||
.field-richeditor {
|
||||
border: none;
|
||||
border-left: 1px solid @color-form-field-border;
|
||||
|
||||
&, .redactor_box, .redactor_toolbar {
|
||||
.border-radius(0);
|
||||
.border-top-radius(0);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
body.side-panel-not-fixed {
|
||||
.fancy-layout {
|
||||
.field-richeditor {
|
||||
border-left: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
html.cssanimations {
|
||||
|
|
|
|||
|
|
@ -3,38 +3,36 @@
|
|||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
background: @color-treeview-item-bg;
|
||||
|
||||
> li {
|
||||
position: relative;
|
||||
|
||||
span.expand {
|
||||
display: none;
|
||||
}
|
||||
.transition(width 1s);
|
||||
|
||||
> div {
|
||||
font-size: 14px;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: @color-treeview-item-title;
|
||||
background: @color-treeview-item-bg;
|
||||
margin-bottom: 1px;
|
||||
padding: 16px 16px 15px 51px;
|
||||
border-bottom: 1px solid @color-panel-light;
|
||||
padding: 16px 16px 15px 61px;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
|
||||
&:before {
|
||||
content: ' ';
|
||||
background-image: url(../images/treeview-icons.svg);
|
||||
background-position: 0px top;
|
||||
background-image: url(../images/treeview-icons.png);
|
||||
background-position: 0px -28px;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 25px auto;
|
||||
background-size: 42px auto;
|
||||
|
||||
position: absolute;
|
||||
width: 21px;
|
||||
height: 26px;
|
||||
left: 18px;
|
||||
height: 22px;
|
||||
left: 28px;
|
||||
top: 20px;
|
||||
}
|
||||
|
||||
> span {
|
||||
span.comment {
|
||||
display: block;
|
||||
font-weight: 400;
|
||||
color: @color-treeview-item-comment;
|
||||
|
|
@ -44,18 +42,91 @@
|
|||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: @color-treeview-hover-bg;
|
||||
color: @color-treeview-hover-text;
|
||||
> span.expand {
|
||||
.hide-text();
|
||||
display: none;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
top: 24px;
|
||||
left: 2px;
|
||||
cursor: pointer;
|
||||
color: @color-treeview-control;
|
||||
.transition(transform 0.1s ease);
|
||||
|
||||
&:before {
|
||||
background-position: 0px -65px;
|
||||
}
|
||||
.icon(@caret-right);
|
||||
line-height: 100%;
|
||||
font-size: 15px;
|
||||
|
||||
> span {
|
||||
color: @color-treeview-hover-text;
|
||||
position: relative;
|
||||
left: 8px;
|
||||
top: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
> span.drag-handle {
|
||||
.hide-text();
|
||||
.transition(opacity 0.4s);
|
||||
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
bottom: 5px;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
cursor: move;
|
||||
color: @color-treeview-control;
|
||||
.opacity(0);
|
||||
|
||||
&:before {
|
||||
.icon(@bars);
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
span.borders {
|
||||
font-size: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&.dragged div, > div:hover {
|
||||
background-color: @color-treeview-hover-bg!important;
|
||||
color: @color-treeview-hover-text!important;
|
||||
|
||||
&:before {
|
||||
background-position: 0px -80px;
|
||||
}
|
||||
|
||||
&:after {
|
||||
top: 0!important;
|
||||
bottom: 0!important;
|
||||
}
|
||||
|
||||
span {
|
||||
color: @color-treeview-hover-text!important;
|
||||
|
||||
&.drag-handle {
|
||||
cursor: move;
|
||||
.opacity(1);
|
||||
}
|
||||
|
||||
&.borders {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.dragged {
|
||||
li.has-subitems, &.has-subitems {
|
||||
> div:before {
|
||||
background-position: 0px -52px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> ol {
|
||||
padding-left: 20px;
|
||||
}
|
||||
|
||||
&[data-status=collapsed] > ol {
|
||||
|
|
@ -65,14 +136,120 @@
|
|||
&.has-subitems {
|
||||
>div {
|
||||
&:before {
|
||||
background-position: 0 -29px;
|
||||
background-position: 0 0;
|
||||
width: 23px;
|
||||
height: 29px;
|
||||
left: 16px;
|
||||
height: 26px;
|
||||
left: 26px;
|
||||
}
|
||||
|
||||
&:hover:before {
|
||||
background-position: 0px -95px;
|
||||
background-position: 0px -52px;
|
||||
}
|
||||
|
||||
span.expand {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.placeholder {
|
||||
height: 0;
|
||||
position: relative;
|
||||
border-bottom: 1px dotted #c03f31;
|
||||
|
||||
&:before {
|
||||
.icon(@caret-right);
|
||||
font-size: 23px;
|
||||
color: white;
|
||||
position: absolute;
|
||||
left: -11px;
|
||||
top: -17px;
|
||||
z-index: 1900;
|
||||
}
|
||||
|
||||
&:after {
|
||||
.icon(@caret-right);
|
||||
font-size: 21px;
|
||||
color: #c03f31;
|
||||
position: absolute;
|
||||
left: -10px;
|
||||
top: -14px;
|
||||
z-index: 1901;
|
||||
}
|
||||
}
|
||||
|
||||
&.dragged {
|
||||
position: absolute;
|
||||
z-index: 2000;
|
||||
// width: auto!important;
|
||||
// height: auto!important;
|
||||
.opacity(0.5);
|
||||
|
||||
> div {
|
||||
.border-radius(3px);
|
||||
}
|
||||
}
|
||||
|
||||
&.drop-target {
|
||||
> div {
|
||||
background-color: #2581b8!important;
|
||||
color: @color-treeview-hover-text;
|
||||
|
||||
&:before {
|
||||
background-position: 0px -80px;
|
||||
}
|
||||
|
||||
> span.comment {
|
||||
color: @color-treeview-hover-text;
|
||||
}
|
||||
}
|
||||
|
||||
&.has-subitems > div:before {
|
||||
background-position: 0px -52px;
|
||||
}
|
||||
}
|
||||
|
||||
&[data-status=expanded] > div > span.expand {
|
||||
.transform( ~'rotate(90deg) translate(0, 0)' );
|
||||
}
|
||||
|
||||
&.drag-ghost {
|
||||
background-color: transparent;
|
||||
box-sizing: content-box;
|
||||
}
|
||||
|
||||
&.active {
|
||||
> div {
|
||||
background: @color-list-active;
|
||||
|
||||
&:after {
|
||||
position: absolute;
|
||||
width: 4px;
|
||||
left: 0;
|
||||
top: -1px;
|
||||
bottom: -1px;
|
||||
background: @color-list-active-border;
|
||||
display: block;
|
||||
content: ' ';
|
||||
}
|
||||
|
||||
> span.comment, > span.expand {
|
||||
color: @color-treeview-item-active-comment;
|
||||
}
|
||||
|
||||
> span.borders {
|
||||
&:before, &:after {
|
||||
content: ' ';
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
display: block;
|
||||
left: 0;
|
||||
background-color: @color-list-active;
|
||||
}
|
||||
|
||||
&:before {top: -1px;}
|
||||
&:after {bottom: -1px;}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -84,10 +261,15 @@
|
|||
> li {
|
||||
> ol {
|
||||
> li > div {
|
||||
padding-left: 71 + (@max-level - @level)*20px;
|
||||
margin-left: -20-(@max-level - @level)*20px;
|
||||
padding-left: 61+(@max-level - @level + 1)*10px;
|
||||
|
||||
&:before {
|
||||
margin-left: 20 + (@max-level - @level)*20px;
|
||||
margin-left: (@max-level - @level + 1)*10px;
|
||||
}
|
||||
|
||||
> span.expand {
|
||||
left: 2+(@max-level - @level + 1)*10px;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -100,47 +282,45 @@
|
|||
}
|
||||
}
|
||||
|
||||
.oc-treeview-expand-control {
|
||||
.hide-text();
|
||||
position: absolute;
|
||||
width: 23px;
|
||||
height: 23px;
|
||||
border-radius: 20px;
|
||||
background: @color-treeview-item-bg;
|
||||
display: block;
|
||||
z-index: 100;
|
||||
cursor: pointer;
|
||||
.transition(opacity 0.2s);
|
||||
// Retina
|
||||
@media only screen and (-moz-min-device-pixel-ratio: 1.5), only screen and (-o-min-device-pixel-ratio: 3/2), only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-devicepixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx) {
|
||||
.control-treeview {
|
||||
ol {
|
||||
> li {
|
||||
> div{
|
||||
&:before {
|
||||
background-position: 0px -79px;
|
||||
background-size: 21px auto;
|
||||
}
|
||||
}
|
||||
|
||||
&.expand-hidden {
|
||||
display: none;
|
||||
}
|
||||
&.has-subitems > div {
|
||||
&:before {background-position: 0px -52px;}
|
||||
&:hover:before {background-position: 0px -102px;}
|
||||
}
|
||||
|
||||
&.expand-drag-hidden {
|
||||
.opacity(0);
|
||||
}
|
||||
&.dragged > div, &.dragged li > div, > div:hover {
|
||||
&:before {background-position: 0px -129px;}
|
||||
}
|
||||
|
||||
&:before {
|
||||
.icon(@caret-right);
|
||||
font-size: 15px;
|
||||
position: absolute;
|
||||
left: 7px;
|
||||
top: 12px;
|
||||
color: @color-treeview-expand-icon;
|
||||
.transition(all 0.1s ease);
|
||||
}
|
||||
&.dragged {
|
||||
li.has-subitems, &.has-subitems {
|
||||
> div:before {
|
||||
background-position: 0px -102px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.hover {
|
||||
background-color: @color-treeview-hover-bg;
|
||||
&.drop-target {
|
||||
> div:before {
|
||||
background-position: 0px -129px;
|
||||
}
|
||||
|
||||
&:before {
|
||||
color: @color-treeview-hover-text;
|
||||
}
|
||||
}
|
||||
|
||||
&[data-status=expanded] {
|
||||
&:before {
|
||||
.transform( ~'rotate(90deg) translate(0, 0)' );
|
||||
&.has-subitems > div:before {
|
||||
background-position: 0px -102px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -266,9 +266,10 @@
|
|||
@color-treeview-item-bg: #ffffff;
|
||||
@color-treeview-item-title: #2b3e50;
|
||||
@color-treeview-item-comment: #95a5a6;
|
||||
@color-treeview-expand-icon: #33495f;
|
||||
@color-treeview-control: #bdc3c7;
|
||||
@color-treeview-hover-bg: #58b6f7;
|
||||
@color-treeview-hover-text: #ffffff;
|
||||
@color-treeview-item-active-comment: #8f8f8f;
|
||||
|
||||
//
|
||||
// Sizes
|
||||
|
|
|
|||
|
|
@ -21,6 +21,8 @@ ol,
|
|||
table,
|
||||
dl,
|
||||
blockquote,
|
||||
td,
|
||||
th,
|
||||
pre {
|
||||
font-size: 14px;
|
||||
line-height: 1.5rem;
|
||||
|
|
@ -158,6 +160,9 @@ h5 {
|
|||
margin-bottom: 10px;
|
||||
font-size: 1em;
|
||||
}
|
||||
table {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
body.redactor_editor_wym {
|
||||
background: #f4f4f4;
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
border-radius: 5px;
|
||||
}
|
||||
.field-richeditor.editor-focus {
|
||||
border: 1px solid #808c8d;
|
||||
border-color: #808c8d;
|
||||
}
|
||||
.field-richeditor.size-tiny textarea {
|
||||
height: 20px;
|
||||
|
|
@ -42,3 +42,31 @@
|
|||
.field-richeditor .redactor_box iframe {
|
||||
border: none;
|
||||
}
|
||||
.field-richeditor.stretch .redactor_box {
|
||||
display: block;
|
||||
position: relative;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
.field-richeditor.stretch .redactor_box .redactor_toolbar {
|
||||
display: block;
|
||||
border-bottom: none;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
}
|
||||
.field-richeditor.stretch .redactor_box .redactor_toolbar > li:first-child:after {
|
||||
position: absolute;
|
||||
content: ' ';
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
left: 0;
|
||||
top: 32px;
|
||||
background-color: #e0e0e0;
|
||||
}
|
||||
.field-richeditor.stretch .redactor_box iframe {
|
||||
display: block;
|
||||
position: absolute;
|
||||
height: 100%!important;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -44,7 +44,8 @@
|
|||
*/
|
||||
var redactorOptions = {
|
||||
focusCallback: function() { self.$el.addClass('editor-focus') },
|
||||
blurCallback: function() { self.$el.removeClass('editor-focus') }
|
||||
blurCallback: function() { self.$el.removeClass('editor-focus') },
|
||||
initCallback: function() { self.build() }
|
||||
}
|
||||
|
||||
if (this.options.stylesheet) {
|
||||
|
|
@ -59,6 +60,15 @@
|
|||
this.$textarea.redactor(redactorOptions)
|
||||
}
|
||||
|
||||
RichEditor.prototype.build = function() {
|
||||
if (this.$el.hasClass('stretch')) {
|
||||
var $iframe = $('iframe', this.$el),
|
||||
$toolbar = $('.redactor_toolbar', this.$el)
|
||||
|
||||
$iframe.css('padding-top', $toolbar.height())
|
||||
}
|
||||
}
|
||||
|
||||
// RICHEDITOR PLUGIN DEFINITION
|
||||
// ============================
|
||||
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
}
|
||||
|
||||
&.editor-focus {
|
||||
border: 1px solid @color-form-field-border-focus;
|
||||
border-color: @color-form-field-border-focus;
|
||||
}
|
||||
|
||||
&.size-tiny textarea { height: (@size-tiny - @richeditor-toolbar-size); }
|
||||
|
|
@ -31,4 +31,38 @@
|
|||
border: none;
|
||||
}
|
||||
}
|
||||
|
||||
&.stretch {
|
||||
.redactor_box {
|
||||
display: block;
|
||||
position: relative;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
|
||||
.redactor_toolbar {
|
||||
display: block;
|
||||
border-bottom: none;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
|
||||
> li:first-child:after {
|
||||
position: absolute;
|
||||
content: ' ';
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
left: 0;
|
||||
top: 32px;
|
||||
background-color: @color-form-field-border;
|
||||
}
|
||||
}
|
||||
|
||||
iframe {
|
||||
display: block;
|
||||
position: absolute;
|
||||
height: 100%!important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -3,7 +3,7 @@
|
|||
<?php else: ?>
|
||||
<div
|
||||
id="<?= $this->getId() ?>"
|
||||
class="field-richeditor size-<?= $size ?> <?= $stretch?'layout-item stretch':'' ?>"
|
||||
class="field-richeditor size-<?= $size ?> <?= $stretch?'layout-relative stretch':'' ?>"
|
||||
data-stylesheet="<?= URL::to('/modules/backend/formwidgets/richeditor/assets/css/iframe.css') ?>"
|
||||
<?php if ($fullPage): ?>data-fullpage="true"<?php endif ?>
|
||||
data-control="richeditor">
|
||||
|
|
|
|||
|
|
@ -47,6 +47,8 @@ class CmsCompoundObject extends CmsObject
|
|||
|
||||
protected $settingsValidationMessages = [];
|
||||
|
||||
protected $viewBagCache = false;
|
||||
|
||||
/**
|
||||
* Loads the object from a file.
|
||||
* @param \Cms\Classes\Theme $theme Specifies the theme the object belongs to.
|
||||
|
|
@ -202,6 +204,29 @@ class CmsCompoundObject extends CmsObject
|
|||
parent::save();
|
||||
}
|
||||
|
||||
/**
|
||||
* Returns the configured view bag component.
|
||||
* This method is used only in the back-end and for internal system needs when
|
||||
* the standard way to access components is not an option.
|
||||
* @return \Cms\Classes\ViewBag Returns the view bag component instance.
|
||||
*/
|
||||
public function getViewBag()
|
||||
{
|
||||
if ($this->viewBagCache !== false)
|
||||
return $this->viewBagCache;
|
||||
|
||||
$componentName = 'viewBag';
|
||||
|
||||
if (!isset($this->settings['components'][$componentName]))
|
||||
return $this->viewBagCache = null;
|
||||
|
||||
return $this->viewBagCache = ComponentManager::instance()->makeComponent(
|
||||
$componentName,
|
||||
null,
|
||||
$this->settings['components'][$componentName]);
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Parses the settings array.
|
||||
* Child classes can override this method in order to update
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
* @package october\cms
|
||||
* @author Alexey Bobkov, Samuel Georges
|
||||
*/
|
||||
class Content extends CmsObject
|
||||
class Content extends CmsCompoundObject
|
||||
{
|
||||
protected static $allowedExtensions = ['htm', 'txt', 'md'];
|
||||
|
||||
|
|
|
|||
|
|
@ -82,7 +82,7 @@ trait PropertyContainer
|
|||
*/
|
||||
public function property($name, $default = null)
|
||||
{
|
||||
return isset($this->properties[$name])
|
||||
return array_key_exists($name, $this->properties)
|
||||
? $this->properties[$name]
|
||||
: $default;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue