tonyair/silverstripe-framework
1
0
Fork 0
mirror of https://github.com/silverstripe/silverstripe-framework synced 2024-10-22 14:05:37 +02:00
Code Issues Projects Releases Wiki Activity

Merge pull request #4335 from jonom/status-dots-colours-3.2

Browse Source 
Different status dots for draft and modified
This commit is contained in:
Daniel Hensby 2015-06-28 08:04:01 +01:00
commit 96f87b4140
2 changed files with 65 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

54
admin/css/screen.css
View File

@ -858,6 +858,8 @@ form.import-form label.left { width: 250px; }
.jstree-default a .jstree-icon, .jstree-default-rtl a .jstree-icon, .jstree-classic a .jstree-icon, .jstree-apple a .jstree-icon { background-position: -60px -19px; } .jstree-default a .jstree-icon, .jstree-default-rtl a .jstree-icon, .jstree-classic a .jstree-icon, .jstree-apple a .jstree-icon { background-position: -60px -19px; }
.jstree-apple a { border-radius: 3px; }
/* ensure status is visible in sidebar */ /* ensure status is visible in sidebar */
.cms-content-tools .cms-tree.jstree li { min-width: 159px; } .cms-content-tools .cms-tree.jstree li { min-width: 159px; }
.cms-content-tools .cms-tree.jstree a { overflow: hidden; display: block; position: relative; } .cms-content-tools .cms-tree.jstree a { overflow: hidden; display: block; position: relative; }
@ -870,45 +872,59 @@ li.class-RedirectorPage > a .jstree-pageicon { background-position: 0 -16px; }
li.class-VirtualPage > a .jstree-pageicon { background-position: 0 -32px; } li.class-VirtualPage > a .jstree-pageicon { background-position: 0 -32px; }
li.class-ErrorPage > a .jstree-pageicon { background-position: 0 -112px; } li.class-ErrorPage > a .jstree-pageicon { background-position: 0 -112px; }
/* tree status icons and labels */ /* Tree status labels and dots */
.cms-tree.jstree .status-modified > a .jstree-pageicon:before, .cms-tree.jstree .status-addedtodraft > a .jstree-pageicon:before, .cms-tree.jstree .status-deletedonlive > a .jstree-pageicon:before, .cms-tree.jstree .status-archived > a .jstree-pageicon:before, .cms-tree.jstree .status-removedfromdraft > a .jstree-pageicon:before, .cms-tree.jstree .status-workflow-approval > a .jstree-pageicon:before { content: ""; display: block; width: 5px; height: 5px; position: absolute; bottom: 0; right: 0; background: #fce2d0; border: 1px solid #ff9344; border-radius: 100px; box-shadow: 0px 0px 0px 1px #fff; } .jstree-apple .jstree-clicked, .jstree-apple .jstree-hovered { background: #ebfbff; }
.jstree .status-modified > .jstree-hovered, .jstree .status-modified > .jstree-clicked, .cms-tree.jstree span.badge.status-modified, .cms-tree.jstree .status-modified > a .jstree-pageicon:before { background-color: #FFF4ED; border-color: #EE6214; } .cms-tree.jstree .status-addedtodraft > a .jstree-pageicon:before, .cms-tree.jstree .status-modified > a .jstree-pageicon:before, .cms-tree.jstree .status-archived > a .jstree-pageicon:before, .cms-tree.jstree .status-deletedonlive > a .jstree-pageicon:before, .cms-tree.jstree .status-removedfromdraft > a .jstree-pageicon:before, .cms-tree.jstree .status-workflow-approval > a .jstree-pageicon:before { content: ""; display: block; width: 6px; height: 6px; position: absolute; bottom: 0; right: 0; background: #fce2d0; border: 1px solid #fff; border-radius: 100px; }
#cms-content-tools-CMSMain .cms-tree.jstree span.badge.status-modified { box-shadow: 0px 0px 6px 2px #FFF4ED; } .jstree .status-addedtodraft > .jstree-hovered, .jstree .status-addedtodraft > .jstree-clicked, .cms-tree.jstree span.badge.status-addedtodraft { background-color: #fff7f2; border-color: #F46B00; }
.cms-tree.jstree span.badge.status-modified { color: #EE6214; } .cms-tree.jstree span.badge.status-addedtodraft { color: #F46B00; }
.jstree .status-addedtodraft > .jstree-hovered, .jstree .status-addedtodraft > .jstree-clicked, .cms-tree.jstree span.badge.status-addedtodraft, .cms-tree.jstree .status-addedtodraft > a .jstree-pageicon:before { background-color: #FFF4ED; border-color: #EE6214; } .cms-tree.jstree .status-addedtodraft > a .jstree-pageicon:before { background-color: #ff7f22; -moz-box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.3), inset 0 0 0 1px #F46B00; -webkit-box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.3), inset 0 0 0 1px #F46B00; box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.3), inset 0 0 0 1px #F46B00; }
#cms-content-tools-CMSMain .cms-tree.jstree span.badge.status-addedtodraft { box-shadow: 0px 0px 6px 2px #FFF4ED; } #cms-content-tools-CMSMain .cms-tree.jstree span.badge.status-addedtodraft { -moz-box-shadow: 0px 0px 6px 2px #fff7f2; -webkit-box-shadow: 0px 0px 6px 2px #fff7f2; box-shadow: 0px 0px 6px 2px #fff7f2; }
.cms-tree.jstree span.badge.status-addedtodraft { color: #EE6214; } .jstree .status-modified > .jstree-hovered, .jstree .status-modified > .jstree-clicked, .cms-tree.jstree span.badge.status-modified { background-color: #fff7f2; border-color: #F46B00; }
.jstree .status-deletedonlive > .jstree-hovered, .jstree .status-deletedonlive > .jstree-clicked, .cms-tree.jstree span.badge.status-deletedonlive, .cms-tree.jstree .status-deletedonlive > a .jstree-pageicon:before { background-color: #F5F5F5; border-color: #5F7688; } .cms-tree.jstree span.badge.status-modified { color: #F46B00; }
#cms-content-tools-CMSMain .cms-tree.jstree span.badge.status-deletedonlive { box-shadow: 0px 0px 6px 2px #F5F5F5; } .cms-tree.jstree .status-modified > a .jstree-pageicon:before { background-color: #fff2e8; -moz-box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.3), inset 0 0 0 1px #F46B00; -webkit-box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.3), inset 0 0 0 1px #F46B00; box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.3), inset 0 0 0 1px #F46B00; }
.cms-tree.jstree span.badge.status-deletedonlive { color: #5F7688; } #cms-content-tools-CMSMain .cms-tree.jstree span.badge.status-modified { -moz-box-shadow: 0px 0px 6px 2px #fff7f2; -webkit-box-shadow: 0px 0px 6px 2px #fff7f2; box-shadow: 0px 0px 6px 2px #fff7f2; }
.jstree .status-archived > .jstree-hovered, .jstree .status-archived > .jstree-clicked, .cms-tree.jstree span.badge.status-archived, .cms-tree.jstree .status-archived > a .jstree-pageicon:before { background-color: #F5F5F5; border-color: #5F7688; } .jstree .status-archived > .jstree-hovered, .jstree .status-archived > .jstree-clicked, .cms-tree.jstree span.badge.status-archived { background-color: #f7f7f7; border-color: #455b6c; }
#cms-content-tools-CMSMain .cms-tree.jstree span.badge.status-archived { box-shadow: 0px 0px 6px 2px #F5F5F5; } .cms-tree.jstree span.badge.status-archived { color: #455b6c; }
.cms-tree.jstree span.badge.status-archived { color: #5F7688; } .cms-tree.jstree .status-archived > a .jstree-pageicon:before { background-color: #5F7688; -moz-box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.3), inset 0 0 0 1px #455b6c; -webkit-box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.3), inset 0 0 0 1px #455b6c; box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.3), inset 0 0 0 1px #455b6c; }
.jstree .status-removedfromdraft > .jstree-hovered, .jstree .status-removedfromdraft > .jstree-clicked, .cms-tree.jstree span.badge.status-removedfromdraft, .cms-tree.jstree .status-removedfromdraft > a .jstree-pageicon:before { background-color: #F5F5F5; border-color: #5F7688; } #cms-content-tools-CMSMain .cms-tree.jstree span.badge.status-archived { -moz-box-shadow: 0px 0px 6px 2px #f7f7f7; -webkit-box-shadow: 0px 0px 6px 2px #f7f7f7; box-shadow: 0px 0px 6px 2px #f7f7f7; }
#cms-content-tools-CMSMain .cms-tree.jstree span.badge.status-removedfromdraft { box-shadow: 0px 0px 6px 2px #F5F5F5; } .jstree .status-deletedonlive > .jstree-hovered, .jstree .status-deletedonlive > .jstree-clicked, .cms-tree.jstree span.badge.status-deletedonlive { background-color: #f7f7f7; border-color: #455b6c; }
.cms-tree.jstree span.badge.status-removedfromdraft { color: #5F7688; } .cms-tree.jstree span.badge.status-deletedonlive { color: #455b6c; }
.jstree .status-workflow-approval > .jstree-hovered, .jstree .status-workflow-approval > .jstree-clicked, .cms-tree.jstree span.badge.status-workflow-approval, .cms-tree.jstree .status-workflow-approval > a .jstree-pageicon:before { background-color: #E8FAFF; border-color: #0070B4; } .cms-tree.jstree .status-deletedonlive > a .jstree-pageicon:before { background-color: #f7f7f7; -moz-box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.3), inset 0 0 0 1px #455b6c; -webkit-box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.3), inset 0 0 0 1px #455b6c; box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.3), inset 0 0 0 1px #455b6c; }
#cms-content-tools-CMSMain .cms-tree.jstree span.badge.status-workflow-approval { box-shadow: 0px 0px 6px 2px #E8FAFF; } #cms-content-tools-CMSMain .cms-tree.jstree span.badge.status-deletedonlive { -moz-box-shadow: 0px 0px 6px 2px #f7f7f7; -webkit-box-shadow: 0px 0px 6px 2px #f7f7f7; box-shadow: 0px 0px 6px 2px #f7f7f7; }
.jstree .status-removedfromdraft > .jstree-hovered, .jstree .status-removedfromdraft > .jstree-clicked, .cms-tree.jstree span.badge.status-removedfromdraft { background-color: #f7f7f7; border-color: #455b6c; }
.cms-tree.jstree span.badge.status-removedfromdraft { color: #455b6c; }
.cms-tree.jstree .status-removedfromdraft > a .jstree-pageicon:before { background-color: #f7f7f7; -moz-box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.3), inset 0 0 0 1px #455b6c; -webkit-box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.3), inset 0 0 0 1px #455b6c; box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.3), inset 0 0 0 1px #455b6c; }
#cms-content-tools-CMSMain .cms-tree.jstree span.badge.status-removedfromdraft { -moz-box-shadow: 0px 0px 6px 2px #f7f7f7; -webkit-box-shadow: 0px 0px 6px 2px #f7f7f7; box-shadow: 0px 0px 6px 2px #f7f7f7; }
.jstree .status-workflow-approval > .jstree-hovered, .jstree .status-workflow-approval > .jstree-clicked, .cms-tree.jstree span.badge.status-workflow-approval { background-color: #E8FAFF; border-color: #0070B4; }
.cms-tree.jstree span.badge.status-workflow-approval { color: #0070B4; } .cms-tree.jstree span.badge.status-workflow-approval { color: #0070B4; }
.cms-tree.jstree .status-workflow-approval > a .jstree-pageicon:before { background-color: #0070B4; -moz-box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.3), inset 0 0 0 1px #0070B4; -webkit-box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.3), inset 0 0 0 1px #0070B4; box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.3), inset 0 0 0 1px #0070B4; }
#cms-content-tools-CMSMain .cms-tree.jstree span.badge.status-workflow-approval { -moz-box-shadow: 0px 0px 6px 2px #E8FAFF; -webkit-box-shadow: 0px 0px 6px 2px #E8FAFF; box-shadow: 0px 0px 6px 2px #E8FAFF; }
.cms-tree { visibility: hidden; } .cms-tree { visibility: hidden; }
.cms-tree.multiple li > a > .jstree-icon { display: none; } .cms-tree.multiple li > a > .jstree-icon { display: none; }
.cms-tree.multiple li > a > .jstree-icon.jstree-checkbox { display: inline-block; } .cms-tree.multiple li > a > .jstree-icon.jstree-checkbox { display: inline-block; }

49
admin/scss/_tree.scss
View File

@ -592,6 +592,9 @@
.jstree-apple a .jstree-icon { .jstree-apple a .jstree-icon {
background-position:-60px -19px; background-position:-60px -19px;
} }
.jstree-apple a {
border-radius: 3px;
}
/* ensure status is visible in sidebar */ /* ensure status is visible in sidebar */
.cms-content-tools .cms-tree.jstree { .cms-content-tools .cms-tree.jstree {
@ -635,44 +638,52 @@ a .jstree-pageicon {
} }
} }
/* tree status icons and labels */ /* Tree status labels and dots */
.jstree-apple .jstree-clicked,
.jstree-apple .jstree-hovered {
background: #ebfbff;
}
%tree-status-icon-before { %tree-status-icon-before {
content:""; content:"";
display: block; display: block;
width:5px; width:6px;
height: 5px; height: 6px;
position: absolute; position: absolute;
bottom: 0; bottom: 0;
right: 0; right: 0;
background: #fce2d0; background: #fce2d0;
border: 1px solid #ff9344; border: 1px solid #fff;
border-radius: 100px; border-radius: 100px;
box-shadow: 0px 0px 0px 1px #fff;
} }
@mixin tree-status-icon($label, $color, $bgColor) { @mixin tree-status-icon($label, $dotColor, $textColor, $bgColor) {
.cms-tree.jstree .status-#{$label} > a .jstree-pageicon:before { .cms-tree.jstree .status-#{$label} > a .jstree-pageicon:before {
@extend %tree-status-icon-before; @extend %tree-status-icon-before;
} }
// Labels
.jstree .status-#{$label} > .jstree-hovered, .jstree .status-#{$label} > .jstree-hovered,
.jstree .status-#{$label} > .jstree-clicked, .jstree .status-#{$label} > .jstree-clicked,
.cms-tree.jstree span.badge.status-#{$label}, .cms-tree.jstree span.badge.status-#{$label} {
.cms-tree.jstree .status-#{$label} > a .jstree-pageicon:before {
background-color:$bgColor; background-color:$bgColor;
border-color:$color; border-color:$textColor;
}
#cms-content-tools-CMSMain .cms-tree.jstree span.badge.status-#{$label} {
box-shadow: 0px 0px 6px 2px $bgColor;
} }
.cms-tree.jstree span.badge.status-#{$label} { .cms-tree.jstree span.badge.status-#{$label} {
color: $color; color: $textColor;
}
// Dots
.cms-tree.jstree .status-#{$label} > a .jstree-pageicon:before {
background-color:$dotColor;
@include box-shadow(0px 1px 1px rgba(0, 0, 0, 0.3), inset 0 0 0 1px $textColor);
}
#cms-content-tools-CMSMain .cms-tree.jstree span.badge.status-#{$label} {
@include box-shadow(0px 0px 6px 2px $bgColor);
} }
} }
@include tree-status-icon('modified', #EE6214, #FFF4ED); @include tree-status-icon('addedtodraft', #ff7f22, #F46B00, #fff7f2);
@include tree-status-icon('addedtodraft', #EE6214, #FFF4ED); @include tree-status-icon('modified', #fff2e8, #F46B00, #fff7f2);
@include tree-status-icon('deletedonlive', #5F7688, #F5F5F5); @include tree-status-icon('archived', #5F7688, #455b6c, #f7f7f7);
@include tree-status-icon('archived', #5F7688, #F5F5F5); @include tree-status-icon('deletedonlive', #f7f7f7, #455b6c, #f7f7f7);
@include tree-status-icon('removedfromdraft', #5F7688, #F5F5F5); @include tree-status-icon('removedfromdraft', #f7f7f7, #455b6c, #f7f7f7);
@include tree-status-icon('workflow-approval', #0070B4, #E8FAFF); @include tree-status-icon('workflow-approval', #0070B4, #0070B4, #E8FAFF);
.cms-tree { .cms-tree {
visibility: hidden; // enabled by JS to avoid layout glitches visibility: hidden; // enabled by JS to avoid layout glitches