mirror of
https://github.com/silverstripe/silverstripe-framework
synced 2024-07-05 19:09:27 +02:00
b186626b73
If you're logged in as a specific user in a group who has view/edit permissions of a page that has a parent page which doesn't have permissions, you can't expand the tree node to get access to that nested page. This fixes LeftAndMain.Tree.js to allow expanding if there are immediate children tree nodes that are not disabled. Also fixes styling so that only immediate children nodes are greyed out. Fixes this ticket: http://open.silverstripe.org/ticket/7913
642 lines
12 KiB
SCSS
642 lines
12 KiB
SCSS
/**
|
|
* This file defines the jstree base styling (see http://jstree.com), as well as any
|
|
* customizations (see bottom of file).
|
|
*
|
|
* The styles are usually added through jstree.js on DOM load,
|
|
* but we need it earlier in order to correctly display the uninitialized tree.
|
|
*/
|
|
|
|
.cms, .TreeDropdownField .treedropdownfield-panel {
|
|
.jstree {
|
|
ul {
|
|
display: block;
|
|
margin: 0;
|
|
padding: 0;
|
|
background: none;
|
|
list-style-type: none;
|
|
}
|
|
li {
|
|
display: block;
|
|
margin: 0;
|
|
padding: 0;
|
|
list-style-type: none;
|
|
display: block;
|
|
min-height: 18px;
|
|
line-height: 18px;
|
|
white-space: nowrap;
|
|
margin-left: 18px;
|
|
min-width: 18px;
|
|
}
|
|
ins {
|
|
display: inline-block;
|
|
text-decoration: none;
|
|
width: 18px;
|
|
height: 18px;
|
|
margin: 0 0 0 0;
|
|
padding: 0;
|
|
float: left;
|
|
}
|
|
a {
|
|
display: inline-block;
|
|
line-height: 16px;
|
|
height: 16px;
|
|
color: black;
|
|
white-space: nowrap;
|
|
text-decoration: none;
|
|
padding: 1px 2px;
|
|
margin: 0;
|
|
border: 1px solid #fff;
|
|
|
|
&:focus,
|
|
&:active,
|
|
&:hover {
|
|
outline: none;
|
|
text-decoration: none;
|
|
cursor: pointer;
|
|
text-shadow: none;
|
|
}
|
|
> {
|
|
ins {
|
|
height: 16px;
|
|
width: 16px;
|
|
}
|
|
.jstree-icon {
|
|
margin-right: 3px;
|
|
}
|
|
}
|
|
|
|
}
|
|
li {
|
|
&.jstree-open > ul {
|
|
display: block;
|
|
}
|
|
&.jstree-closed > ul {
|
|
display: none;
|
|
}
|
|
|
|
}
|
|
li.disabled > a {
|
|
color: #aaaaaa;
|
|
}
|
|
|
|
}
|
|
|
|
.jstree-rtl {
|
|
a > .jstree-icon {
|
|
margin-left: 3px;
|
|
margin-right: 0;
|
|
}
|
|
li {
|
|
margin-left: 0;
|
|
margin-right: 18px;
|
|
}
|
|
|
|
}
|
|
|
|
.jstree-rtl > ul > li {
|
|
margin-right: 0px;
|
|
}
|
|
|
|
.jstree > ul > li {
|
|
margin-left: 0px;
|
|
}
|
|
|
|
#vakata-dragged {
|
|
display: block;
|
|
margin: 0 0 0 0;
|
|
padding: 4px 4px 4px 24px;
|
|
position: absolute;
|
|
top: -2000px;
|
|
line-height: 16px;
|
|
z-index: 10000;
|
|
}
|
|
#vakata-contextmenu {
|
|
display: block;
|
|
visibility: hidden;
|
|
left: 0;
|
|
top: -200px;
|
|
position: absolute;
|
|
margin: 0;
|
|
padding: 0;
|
|
min-width: 180px;
|
|
background: #FFF;
|
|
border: 1px solid silver;
|
|
z-index: 10000; *width:180px;
|
|
@include box-shadow(0 0 10px #CCC);
|
|
&::before {
|
|
content:"";
|
|
display:block; /* reduce the damage in FF3.0 */
|
|
position:absolute;
|
|
top: -10px;
|
|
left: 24px;
|
|
width:0;
|
|
border-width: 0 6px 10px 6px ;
|
|
border-color: #FFF transparent;
|
|
border-style: solid;
|
|
z-index: 10000;
|
|
}
|
|
&::after {
|
|
content:"";
|
|
display:block; /* reduce the damage in FF3.0 */
|
|
position:absolute;
|
|
top: -11px;
|
|
left: 23px;
|
|
width:0;
|
|
border-width: 0 7px 11px 7px ;
|
|
border-color: #CCC transparent;
|
|
border-style: solid;
|
|
}
|
|
}
|
|
#vakata-contextmenu ul {
|
|
min-width: 180px; *width:180px;
|
|
}
|
|
#vakata-contextmenu ul, #vakata-contextmenu li {
|
|
margin: 0;
|
|
padding: 0 ;
|
|
list-style-type: none;
|
|
display: block;
|
|
}
|
|
#vakata-contextmenu li {
|
|
line-height: 20px;
|
|
min-height: 23px;
|
|
position: relative;
|
|
padding: 0px;
|
|
&:last-child {
|
|
margin-bottom: 1px;
|
|
}
|
|
}
|
|
#vakata-contextmenu li a {
|
|
padding: 1px 10px;
|
|
line-height: 23px;
|
|
display: block;
|
|
text-decoration: none;
|
|
margin: 1px 1px 0 1px;
|
|
border: 0;
|
|
}
|
|
#vakata-contextmenu li ins {
|
|
float: left;
|
|
width: 0;
|
|
height: 0;
|
|
text-decoration: none;
|
|
margin-right: 2px;
|
|
}
|
|
#vakata-contextmenu li .jstree-pageicon {
|
|
margin-top: 3px;
|
|
margin-right: 5px;
|
|
}
|
|
#vakata-contextmenu li a:hover, #vakata-contextmenu li.vakata-hover > a {
|
|
padding: 1px 10px;
|
|
background: #3875d7;
|
|
@include background-image(linear-gradient(top, #3875d7 20%, #2a62bc 90%));
|
|
color: #FFF;
|
|
border: none;
|
|
}
|
|
#vakata-contextmenu li ul {
|
|
display: none;
|
|
position: absolute;
|
|
top: -2px;
|
|
left: 100%;
|
|
background: #FFF;
|
|
border: 1px solid silver;
|
|
@include box-shadow(0 0 10px #CCC);
|
|
}
|
|
#vakata-contextmenu .right {
|
|
right: 100%;
|
|
left: auto;
|
|
}
|
|
#vakata-contextmenu .bottom {
|
|
bottom: -1px;
|
|
top: auto;
|
|
}
|
|
#vakata-contextmenu li.vakata-separator {
|
|
min-height: 0;
|
|
height: 1px;
|
|
line-height: 1px;
|
|
font-size: 1px;
|
|
overflow: hidden;
|
|
margin: 0 2px;
|
|
background: silver; /* border-top:1px solid #fefefe; */ padding:0;
|
|
}
|
|
|
|
.jstree ul, .jstree li {
|
|
display: block;
|
|
margin: 0 0 0 0;
|
|
padding: 0 0 0 0;
|
|
list-style-type: none;
|
|
}
|
|
.jstree li {
|
|
display: block;
|
|
min-height: 18px;
|
|
line-height: 18px;
|
|
white-space: nowrap;
|
|
margin-left: 18px;
|
|
min-width: 18px;
|
|
}
|
|
.jstree-rtl li {
|
|
margin-left: 0;
|
|
margin-right: 18px;
|
|
}
|
|
.jstree > ul > li {
|
|
margin-left: 0px;
|
|
}
|
|
.jstree-rtl > ul > li {
|
|
margin-right: 0px;
|
|
}
|
|
.jstree ins {
|
|
display: inline-block;
|
|
text-decoration: none;
|
|
width: 18px;
|
|
height: 18px;
|
|
margin: 0 0 0 0;
|
|
padding: 0;
|
|
}
|
|
.jstree a {
|
|
display: inline-block;
|
|
line-height: 16px;
|
|
height: 16px;
|
|
color: black;
|
|
white-space: nowrap;
|
|
text-decoration: none;
|
|
padding: 1px 2px;
|
|
margin: 0;
|
|
}
|
|
.jstree a:focus {
|
|
outline: none;
|
|
}
|
|
.jstree a > ins {
|
|
height: 16px;
|
|
width: 16px;
|
|
}
|
|
.jstree a > .jstree-icon {
|
|
margin-right: 3px;
|
|
}
|
|
.jstree-rtl a > .jstree-icon {
|
|
margin-left: 3px;
|
|
margin-right: 0;
|
|
}
|
|
li.jstree-open > ul {
|
|
display: block;
|
|
margin-left:-13px;
|
|
li ul {
|
|
margin-left:2px;
|
|
}
|
|
}
|
|
li.jstree-closed > ul {
|
|
display: none;
|
|
}
|
|
#vakata-dragged ins {
|
|
display: block;
|
|
text-decoration: none;
|
|
width: 16px;
|
|
height: 16px;
|
|
margin: 0 0 0 0;
|
|
padding: 0;
|
|
position: absolute;
|
|
top: 4px;
|
|
left: 4px;
|
|
-moz-border-radius: 4px;
|
|
border-radius: 4px;
|
|
-webkit-border-radius: 4px;
|
|
}
|
|
#vakata-dragged .jstree-ok {
|
|
background: green;
|
|
}
|
|
#vakata-dragged .jstree-invalid {
|
|
background: red;
|
|
}
|
|
#jstree-marker {
|
|
padding: 0;
|
|
margin: 0;
|
|
font-size: 12px;
|
|
overflow: hidden;
|
|
height: 12px;
|
|
width: 8px;
|
|
position: absolute;
|
|
top: -30px;
|
|
z-index: 10001;
|
|
background-repeat: no-repeat;
|
|
display: none;
|
|
background-color: transparent;
|
|
text-shadow: 1px 1px 1px white;
|
|
color: black;
|
|
line-height: 10px;
|
|
}
|
|
#jstree-marker-line {
|
|
padding: 0;
|
|
margin: 0;
|
|
line-height: 0%;
|
|
font-size: 1px;
|
|
overflow: hidden;
|
|
height: 1px;
|
|
width: 100px;
|
|
position: absolute;
|
|
top: -30px;
|
|
z-index: 10000;
|
|
background-repeat: no-repeat;
|
|
display: none;
|
|
background-color: #456c43;
|
|
cursor: pointer;
|
|
border: 1px solid #eeeeee;
|
|
border-left: 0;
|
|
-moz-box-shadow: 0px 0px 2px #666;
|
|
-webkit-box-shadow: 0px 0px 2px #666;
|
|
box-shadow: 0px 0px 2px #666;
|
|
-moz-border-radius: 1px;
|
|
border-radius: 1px;
|
|
-webkit-border-radius: 1px;
|
|
}
|
|
.jstree .jstree-real-checkbox {
|
|
display: none;
|
|
}
|
|
.jstree-themeroller .ui-icon {
|
|
overflow: visible;
|
|
}
|
|
.jstree-themeroller a {
|
|
padding: 0 2px;
|
|
}
|
|
.jstree-themeroller .jstree-no-icon {
|
|
display: none;
|
|
}
|
|
.jstree .jstree-wholerow-real {
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
.jstree .jstree-wholerow-real li {
|
|
cursor: pointer;
|
|
}
|
|
.jstree .jstree-wholerow-real a {
|
|
border-left-color: transparent !important;
|
|
border-right-color: transparent !important;
|
|
}
|
|
.jstree .jstree-wholerow {
|
|
position: relative;
|
|
z-index: 0;
|
|
height: 0;
|
|
}
|
|
.jstree .jstree-wholerow ul, .jstree .jstree-wholerow li {
|
|
width: 100%;
|
|
}
|
|
.jstree .jstree-wholerow, .jstree .jstree-wholerow ul, .jstree .jstree-wholerow li, .jstree .jstree-wholerow a {
|
|
margin: 0 !important;
|
|
padding: 0 !important;
|
|
}
|
|
.jstree .jstree-wholerow, .jstree .jstree-wholerow ul, .jstree .jstree-wholerow li {
|
|
background: transparent !important;
|
|
}
|
|
.jstree .jstree-wholerow ins, .jstree .jstree-wholerow span, .jstree .jstree-wholerow input {
|
|
display: none !important;
|
|
}
|
|
.jstree .jstree-wholerow a, .jstree .jstree-wholerow a:hover {
|
|
text-indent: -9999px !important;
|
|
width: 100%;
|
|
padding: 0 !important;
|
|
border-right-width: 0px !important;
|
|
border-left-width: 0px !important;
|
|
}
|
|
.jstree .jstree-wholerow-span {
|
|
position: absolute;
|
|
left: 0;
|
|
margin: 0px;
|
|
padding: 0;
|
|
height: 18px;
|
|
border-width: 0;
|
|
padding: 0;
|
|
z-index: 0;
|
|
}
|
|
|
|
// Custom styles
|
|
.jstree-apple.jstree-focused {
|
|
background: none;
|
|
|
|
.jstree-apple > ul {
|
|
background: none;
|
|
}
|
|
}
|
|
|
|
.jstree li {
|
|
line-height: 25px;
|
|
}
|
|
|
|
// Hide drag icons by default. Actual page icons
|
|
// are in nested <span>, not handled directly through jstree lib
|
|
a > .jstree-icon {
|
|
display: none;
|
|
}
|
|
|
|
// Show drag icons when draggable class is applied
|
|
.draggable a > .jstree-icon {
|
|
display: block;
|
|
}
|
|
}
|
|
|
|
.jstree-apple {
|
|
li, .jstree-apple ins {
|
|
background:none;
|
|
}
|
|
.jstree-unchecked > a > .jstree-checkbox {
|
|
margin-right:3px;
|
|
}
|
|
.jstree-checked > a > .jstree-checkbox {
|
|
margin-right:3px;
|
|
}
|
|
.jstree-undetermined > a > .jstree-checkbox {
|
|
margin-right:3px;
|
|
}
|
|
}
|
|
|
|
.tree-holder.jstree-apple, .cms-tree.jstree-apple {
|
|
|
|
& li.Root {
|
|
& strong {
|
|
font-weight: bold;
|
|
padding-left: 1px;
|
|
}
|
|
|
|
& > a .jstree-icon {
|
|
background-position: -56px -36px;
|
|
}
|
|
}
|
|
|
|
& a, a:link {
|
|
color: $color-text-blue-link;
|
|
padding: 3px 6px 3px 3px;
|
|
border: none;
|
|
display: inline-block;
|
|
margin-right: 5px;
|
|
}
|
|
|
|
li.deletedonlive {
|
|
.text {
|
|
text-decoration: line-through;
|
|
}
|
|
}
|
|
|
|
span.badge {
|
|
clear: both;
|
|
text-transform: uppercase;
|
|
display: inline-block;
|
|
padding: 0px 3px;
|
|
font-size: 0.75em;
|
|
line-height: 1em;
|
|
margin-left: 3px;
|
|
margin-right: 6px;
|
|
margin-top: -1px;
|
|
@include border-radius(2px, 2px);
|
|
}
|
|
|
|
span.badge.modified {
|
|
color: #7E7470;
|
|
border: 1px solid #C9B800;
|
|
background-color: #FFF0BC;
|
|
}
|
|
|
|
span.badge.addedtodraft {
|
|
color: #7E7470;
|
|
border: 1px solid #C9B800;
|
|
background-color: #FFF0BC;
|
|
}
|
|
|
|
span.badge.deletedonlive {
|
|
color: #636363;
|
|
border: 1px solid #E49393;
|
|
background-color: #F2DADB;
|
|
}
|
|
|
|
span.badge.removedfromdraft {
|
|
color: #636363;
|
|
border: 1px solid #E49393;
|
|
background-color: #F2DADB;
|
|
}
|
|
|
|
span.badge.workflow-approval {
|
|
color: #56660C;
|
|
border: 1px solid #7C8816;
|
|
background-color: #DAE79A;
|
|
}
|
|
|
|
/* comment speech bubble - ccs3 only - source: http://nicolasgallagher.com/pure-css-speech-bubbles/demo/ */
|
|
& span.comment-count {
|
|
clear: both;
|
|
position: relative;
|
|
text-transform: uppercase;
|
|
display: inline-block;
|
|
overflow: visible;
|
|
padding: 0px 3px;
|
|
font-size: 0.75em;
|
|
line-height: 1em;
|
|
margin-left: 3px;
|
|
margin-right: 6px;
|
|
@include border-radius(2px, 2px);
|
|
color: #7E7470;
|
|
border: 1px solid #C9B800;
|
|
background-color: #FFF0BC;
|
|
}
|
|
|
|
& span.comment-count:before {
|
|
content:"";
|
|
position:absolute;
|
|
bottom:-4px; /* value = - border-top-width - border-bottom-width */
|
|
left:3px; /* controls horizontal position */
|
|
border-width:4px 4px 0;
|
|
border-style:solid;
|
|
border-color:#C9B800 transparent;
|
|
/* reduce the damage in FF3.0 */
|
|
display:block;
|
|
width:0;
|
|
}
|
|
|
|
& span.comment-count:after {
|
|
content:"";
|
|
position:absolute;
|
|
bottom:-3px; /* value = - border-top-width - border-bottom-width */
|
|
left:4px; /* value = (:before left) + (:before border-left) - (:after border-left) */
|
|
border-width:3px 3px 0;
|
|
border-style:solid;
|
|
border-color:#FFF0BC transparent;
|
|
/* reduce the damage in FF3.0 */
|
|
display:block;
|
|
width:0;
|
|
}
|
|
|
|
.jstree-hovered {
|
|
text-shadow: none;
|
|
text-decoration: none;
|
|
}
|
|
|
|
& li {
|
|
padding: 0px;
|
|
clear: left;
|
|
}
|
|
|
|
& ins {
|
|
background-color: transparent;
|
|
background-image: url(../images/sitetree_ss_default_icons.png);
|
|
}
|
|
|
|
& li.jstree-checked > a, li.jstree-checked > a:link {
|
|
background-color: $color-cms-batchactions-menu-selected-background;
|
|
}
|
|
|
|
& .jstree-closed > ins {
|
|
background-position:0 0;
|
|
}
|
|
|
|
& .jstree-open > ins {
|
|
background-position:-20px 0;
|
|
}
|
|
}
|
|
|
|
a .jstree-pageicon {
|
|
float: left;
|
|
margin-right: 4px;
|
|
}
|
|
|
|
li.class-HomePage > a .jstree-pageicon {
|
|
background-position: 0 -48px;
|
|
}
|
|
|
|
li.class-RedirectorPage > a .jstree-pageicon {
|
|
background-position: 0 -16px;
|
|
}
|
|
|
|
li.class-VirtualPage > a .jstree-pageicon {
|
|
background-position: 0 -32px;
|
|
}
|
|
|
|
li.class-ErrorPage > a .jstree-pageicon {
|
|
background-position: 0 -112px;
|
|
}
|
|
|
|
.cms-tree {
|
|
visibility: hidden; // enabled by JS to avoid layout glitches
|
|
|
|
&.multiple {
|
|
li > a {
|
|
// Hide draggable icon when multiselect is enabled
|
|
& > .jstree-icon {
|
|
display: none;
|
|
}
|
|
// But show the checkbox
|
|
& > .jstree-icon.jstree-checkbox {
|
|
display: inline-block;
|
|
}
|
|
}
|
|
|
|
li#record-0 {
|
|
// Hide checkbox on root node (shouldn't be selectable to avoid weird states when trying to e.g. remove it)
|
|
&> a .jstree-checkbox {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Show the loading indicator on the page icon rather than the default
|
|
// jstree icon (which is only used for its dragging handles)
|
|
a.jstree-loading .jstree-icon {
|
|
background-image: none !important;
|
|
}
|
|
a.jstree-loading .jstree-pageicon {
|
|
background: url(../images/throbber.gif) top left no-repeat;
|
|
}
|
|
}
|