From 2bf2c3a15f5ec909827ff5e5adf7c25fee56ef55 Mon Sep 17 00:00:00 2001 From: Will Rossiter Date: Tue, 16 Aug 2011 14:57:30 +1200 Subject: [PATCH 01/11] MINOR: #css styles to clean up vertical alignment in content tools --- admin/css/screen.css | 54 +++++++++++++++++----------------- admin/scss/_forms.scss | 28 +++++++++++++----- admin/scss/_menu.scss | 1 + admin/scss/_mixins.scss | 1 - admin/scss/_style.scss | 63 +++++++++++++++++++++++++++------------- admin/scss/_uitheme.scss | 2 +- 6 files changed, 94 insertions(+), 55 deletions(-) diff --git a/admin/css/screen.css b/admin/css/screen.css index 17ee18d4e..4c01dfe90 100644 --- a/admin/css/screen.css +++ b/admin/css/screen.css @@ -157,7 +157,7 @@ li.class-ErrorPage a .jstree-pageicon { background-position: 0 -112px; } .cms-menu.collapsed .cms-menu-list li ul { display: none !important; } .cms-menu.collapsed.cms-panel .cms-panel-content { display: block; } -.cms-menu-list li a { display: block; height: 24px; line-height: 24px; font-size: 12px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; text-shadow: #bfcad2 1px 1px 0; color: #1f1f1f; padding: 7px 5px 7px 8px; background-color: #b0bec7; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #b0bec7), color-stop(100%, #8ca1ae)); background-image: -webkit-linear-gradient(#b0bec7, #8ca1ae); background-image: -moz-linear-gradient(#b0bec7, #8ca1ae); background-image: -o-linear-gradient(#b0bec7, #8ca1ae); background-image: -ms-linear-gradient(#b0bec7, #8ca1ae); background-image: linear-gradient(#b0bec7, #8ca1ae); border-top: 1px solid #ced7dc; border-bottom: 1px solid #748d9d; } +.cms-menu-list li a { display: block; height: 24px; line-height: 24px; font-size: 12px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; text-shadow: #bfcad2 1px 1px 0; color: #1f1f1f; padding: 7px 5px 7px 8px; background-color: #b0bec7; cursor: pointer; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #b0bec7), color-stop(100%, #8ca1ae)); background-image: -webkit-linear-gradient(#b0bec7, #8ca1ae); background-image: -moz-linear-gradient(#b0bec7, #8ca1ae); background-image: -o-linear-gradient(#b0bec7, #8ca1ae); background-image: -ms-linear-gradient(#b0bec7, #8ca1ae); background-image: linear-gradient(#b0bec7, #8ca1ae); border-top: 1px solid #ced7dc; border-bottom: 1px solid #748d9d; } .cms-menu-list li a:hover { text-decoration: none; background-color: #b6c3cb; border-bottom: 1px solid #8399a7; color: #2c2c2c; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #bfcad2), color-stop(100%, #b0bec7)); background-image: -webkit-linear-gradient(#bfcad2, #b0bec7); background-image: -moz-linear-gradient(#bfcad2, #b0bec7); background-image: -o-linear-gradient(#bfcad2, #b0bec7); background-image: -ms-linear-gradient(#bfcad2, #b0bec7); background-image: linear-gradient(#bfcad2, #b0bec7); } .cms-menu-list li a:focus, .cms-menu-list li a:active { border-top: 1px solid #a1b2bc; text-decoration: none; background-color: #a1b2bc; color: #393939; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #92a5b2), color-stop(100%, #a1b2bc)); background-image: -webkit-linear-gradient(#92a5b2, #a1b2bc); background-image: -moz-linear-gradient(#92a5b2, #a1b2bc); background-image: -o-linear-gradient(#92a5b2, #a1b2bc); background-image: -ms-linear-gradient(#92a5b2, #a1b2bc); background-image: linear-gradient(#92a5b2, #a1b2bc); } .cms-menu-list li a .icon { display: block; float: left; margin: 4px 10px 0 4px; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70); opacity: 0.7; } @@ -175,7 +175,7 @@ li.class-ErrorPage a .jstree-pageicon { background-position: 0 -112px; } /** This file defines common styles for form elements used throughout the CMS interface. It is an addition to the base styles defined in sapphire/css/Form.css. @package sapphire @subpackage admin */ /** ---------------------------------------------------- Basic form fields ---------------------------------------------------- */ -form.nostyle .field { display: inline; padding: 0; border: 0; } +form.nostyle .field { padding: 0; border: 0; } form.nostyle label { float: none; width: auto; } form.nostyle .middleColumn { margin-left: 0; } @@ -187,7 +187,7 @@ form.nostyle .middleColumn { margin-left: 0; } .field label.right { cursor: pointer; } .field .middleColumn { margin-left: 176px; } .field input.text, .field textarea, .field select, .field .TreeDropdownField { width: 90%; max-width: 512px; } -.field input.text, .field textarea, .field .TreeDropdownField { background: #fff; border: 1px solid #b3b3b3; padding: 8px 8px; margin: 0; outline: none; -moz-border-radius: 4px; -webkit-border-radius: 4px; -o-border-radius: 4px; -ms-border-radius: 4px; -khtml-border-radius: 4px; border-radius: 4px; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #efefef), color-stop(10%, #ffffff), color-stop(90%, #ffffff), color-stop(100%, #efefef)); background-image: -webkit-linear-gradient(#efefef, #ffffff 10%, #ffffff 90%, #efefef); background-image: -moz-linear-gradient(#efefef, #ffffff 10%, #ffffff 90%, #efefef); background-image: -o-linear-gradient(#efefef, #ffffff 10%, #ffffff 90%, #efefef); background-image: -ms-linear-gradient(#efefef, #ffffff 10%, #ffffff 90%, #efefef); background-image: linear-gradient(#efefef, #ffffff 10%, #ffffff 90%, #efefef); } +.field input.text, .field textarea, .field .TreeDropdownField { background: #fff; border: 1px solid #b3b3b3; padding: 7px 7px; line-height: 16px; margin: 0; outline: none; -moz-border-radius: 4px; -webkit-border-radius: 4px; -o-border-radius: 4px; -ms-border-radius: 4px; -khtml-border-radius: 4px; border-radius: 4px; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #efefef), color-stop(10%, #ffffff), color-stop(90%, #ffffff), color-stop(100%, #efefef)); background-image: -webkit-linear-gradient(#efefef, #ffffff 10%, #ffffff 90%, #efefef); background-image: -moz-linear-gradient(#efefef, #ffffff 10%, #ffffff 90%, #efefef); background-image: -o-linear-gradient(#efefef, #ffffff 10%, #ffffff 90%, #efefef); background-image: -ms-linear-gradient(#efefef, #ffffff 10%, #ffffff 90%, #efefef); background-image: linear-gradient(#efefef, #ffffff 10%, #ffffff 90%, #efefef); } .field input.text:focus, .field textarea:focus, .field .TreeDropdownField:focus { border: 1px solid #b3b3b3; -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.2); -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.2); -o-box-shadow: 0 0 5px rgba(0, 0, 0, 0.2); box-shadow: 0 0 5px rgba(0, 0, 0, 0.2); } .field .TreeDropdownField { padding: 0 14px 0 0; } .field .TreeDropdownField .treedropdownfield-panel { border: 1px solid #b3b3b3; border-top: none; padding-right: 14px; -moz-border-radius-bottomleft: 4px; -webkit-border-bottom-left-radius: 4px; -o-border-bottom-left-radius: 4px; -ms-border-bottom-left-radius: 4px; -khtml-border-bottom-left-radius: 4px; border-bottom-left-radius: 4px; -moz-border-radius-bottomright: 4px; -webkit-border-bottom-right-radius: 4px; -o-border-bottom-right-radius: 4px; -ms-border-bottom-right-radius: 4px; -khtml-border-bottom-right-radius: 4px; border-bottom-right-radius: 4px; } @@ -199,7 +199,7 @@ form.nostyle .middleColumn { margin-left: 0; } .field .chzn-container-single .chzn-single { height: 30px; line-height: 32px; /* not relative, as then we'd had to redo most of chzn */ font-size: 12px; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #efefef), color-stop(10%, #ffffff), color-stop(90%, #ffffff), color-stop(100%, #efefef)); background-image: -webkit-linear-gradient(#efefef, #ffffff 10%, #ffffff 90%, #efefef); background-image: -moz-linear-gradient(#efefef, #ffffff 10%, #ffffff 90%, #efefef); background-image: -o-linear-gradient(#efefef, #ffffff 10%, #ffffff 90%, #efefef); background-image: -ms-linear-gradient(#efefef, #ffffff 10%, #ffffff 90%, #efefef); background-image: linear-gradient(#efefef, #ffffff 10%, #ffffff 90%, #efefef); } .field .chzn-container-single .chzn-single:hover, .field .chzn-container-single .chzn-single:focus, .field .chzn-container-single .chzn-single:active { text-decoration: none; outline: none; } .field .chzn-container-single .chzn-single div { width: 24px; } -.field .chzn-container-single .chzn-single div b { background-position: 3px 4px; } +.field .chzn-container-single .chzn-single div b { background-position: 1px 4px; } .field input.hasDatepicker { width: 50%; max-width: 96px; } /** ---------------------------------------------------- Buttons ---------------------------------------------------- */ @@ -210,17 +210,17 @@ form.nostyle .middleColumn { margin-left: 0; } .cms .ui-widget { /* loading */ } .cms .ui-widget input.loading, .cms .ui-widget input.ui-state-default.loading, .cms .ui-widget .ui-widget-content input.ui-state-default.loading, .cms .ui-widget .ui-widget-header input.ui-state-default.loading { padding-left: 24px; color: #525252; background: #eeeded url(../../images/network-save.gif) no-repeat 4px center; border-color: #d5d3d3; cursor: default; text-shadow: none; -moz-box-shadow: none; -webkit-box-shadow: none; -o-box-shadow: none; box-shadow: none; } -.cms .ui-widget .ss-ui-button { /* all buttons */ padding: 5px 12px; text-decoration: none; line-height: 16px; color: #1f1f1f; background-color: #e6e6e6; border: 1px solid #c0c0c2; text-shadow: white 0 1px 1px; -moz-box-shadow: #ced7dc 0 1px 2px; -webkit-box-shadow: #ced7dc 0 1px 2px; -o-box-shadow: #ced7dc 0 1px 2px; box-shadow: #ced7dc 0 1px 2px; background: url('../images/../images/btn_icons_sprite.png?1310132248') no-repeat 999px 999px, -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #d9d9d9)); background: url('../images/../images/btn_icons_sprite.png?1310132248') no-repeat 999px 999px, -webkit-linear-gradient(#ffffff, #d9d9d9); background: url('../images/../images/btn_icons_sprite.png?1310132248') no-repeat 999px 999px, -moz-linear-gradient(#ffffff, #d9d9d9); background: url('../images/../images/btn_icons_sprite.png?1310132248') no-repeat 999px 999px, -o-linear-gradient(#ffffff, #d9d9d9); background: url('../images/../images/btn_icons_sprite.png?1310132248') no-repeat 999px 999px, -ms-linear-gradient(#ffffff, #d9d9d9); background: url('../images/../images/btn_icons_sprite.png?1310132248') no-repeat 999px 999px, linear-gradient(#ffffff, #d9d9d9); /* constructive */ /* destructive */ } -.cms .ui-widget .ss-ui-button.ui-state-hover { border: 1px solid #b3b3b5; -moz-box-shadow: #b0bec7 0 1px 2px; -webkit-box-shadow: #b0bec7 0 1px 2px; -o-box-shadow: #b0bec7 0 1px 2px; box-shadow: #b0bec7 0 1px 2px; background: url('../images/../images/btn_icons_sprite.png?1310132248') no-repeat 999px 999px, -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #e6e6e6)); background: url('../images/../images/btn_icons_sprite.png?1310132248') no-repeat 999px 999px, -webkit-linear-gradient(#ffffff, #e6e6e6); background: url('../images/../images/btn_icons_sprite.png?1310132248') no-repeat 999px 999px, -moz-linear-gradient(#ffffff, #e6e6e6); background: url('../images/../images/btn_icons_sprite.png?1310132248') no-repeat 999px 999px, -o-linear-gradient(#ffffff, #e6e6e6); background: url('../images/../images/btn_icons_sprite.png?1310132248') no-repeat 999px 999px, -ms-linear-gradient(#ffffff, #e6e6e6); background: url('../images/../images/btn_icons_sprite.png?1310132248') no-repeat 999px 999px, linear-gradient(#ffffff, #e6e6e6); } -.cms .ui-widget .ss-ui-button:focus, .cms .ui-widget .ss-ui-button:active { border: 1px solid #b3b3b5; -moz-box-shadow: #b0bec7 0 1px 2px; -webkit-box-shadow: #b0bec7 0 1px 2px; -o-box-shadow: #b0bec7 0 1px 2px; box-shadow: #b0bec7 0 1px 2px; background: url('../images/../images/btn_icons_sprite.png?1310132248') no-repeat 999px 999px, -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #e6e6e6), color-stop(100%, #ffffff)); background: url('../images/../images/btn_icons_sprite.png?1310132248') no-repeat 999px 999px, -webkit-linear-gradient(#e6e6e6, #ffffff); background: url('../images/../images/btn_icons_sprite.png?1310132248') no-repeat 999px 999px, -moz-linear-gradient(#e6e6e6, #ffffff); background: url('../images/../images/btn_icons_sprite.png?1310132248') no-repeat 999px 999px, -o-linear-gradient(#e6e6e6, #ffffff); background: url('../images/../images/btn_icons_sprite.png?1310132248') no-repeat 999px 999px, -ms-linear-gradient(#e6e6e6, #ffffff); background: url('../images/../images/btn_icons_sprite.png?1310132248') no-repeat 999px 999px, linear-gradient(#e6e6e6, #ffffff); } -.cms .ui-widget .ss-ui-button.ss-ui-button-small { padding: 4px 4px; } -.cms .ui-widget .ss-ui-button.ui-state-highlight { background-color: #e6e6e6; border: 1px solid #708284; } -.cms .ui-widget .ss-ui-button.ss-ui-action-constructive { padding-left: 24px; font-weight: bold; margin-left: 8px; color: white; border-color: #78a127; background: url('../images/../images/btn_icons_sprite.png?1310132248') no-repeat 5px 5px, -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #80bf40), color-stop(100%, #59862d)); background: url('../images/../images/btn_icons_sprite.png?1310132248') no-repeat 5px 5px, -webkit-linear-gradient(#80bf40, #59862d); background: url('../images/../images/btn_icons_sprite.png?1310132248') no-repeat 5px 5px, -moz-linear-gradient(#80bf40, #59862d); background: url('../images/../images/btn_icons_sprite.png?1310132248') no-repeat 5px 5px, -o-linear-gradient(#80bf40, #59862d); background: url('../images/../images/btn_icons_sprite.png?1310132248') no-repeat 5px 5px, -ms-linear-gradient(#80bf40, #59862d); background: url('../images/../images/btn_icons_sprite.png?1310132248') no-repeat 5px 5px, linear-gradient(#80bf40, #59862d); background-color: #669933; text-shadow: #4d7326 0 1px 1px; -moz-box-shadow: #748d9d 1px 1px 2px; -webkit-box-shadow: #748d9d 1px 1px 2px; -o-box-shadow: #748d9d 1px 1px 2px; box-shadow: #748d9d 1px 1px 2px; } -.cms .ui-widget .ss-ui-button.ss-ui-action-constructive.ui-state-hover { border-color: #59781d; background: url('../images/../images/btn_icons_sprite.png?1310132248') no-repeat 5px 5px, -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #8cc653), color-stop(100%, #669933)); background: url('../images/../images/btn_icons_sprite.png?1310132248') no-repeat 5px 5px, -webkit-linear-gradient(#8cc653, #669933); background: url('../images/../images/btn_icons_sprite.png?1310132248') no-repeat 5px 5px, -moz-linear-gradient(#8cc653, #669933); background: url('../images/../images/btn_icons_sprite.png?1310132248') no-repeat 5px 5px, -o-linear-gradient(#8cc653, #669933); background: url('../images/../images/btn_icons_sprite.png?1310132248') no-repeat 5px 5px, -ms-linear-gradient(#8cc653, #669933); background: url('../images/../images/btn_icons_sprite.png?1310132248') no-repeat 5px 5px, linear-gradient(#8cc653, #669933); background-color: #4d7326; } +.cms .ui-widget .ss-ui-button { /* all buttons */ padding: 7px 12px; font-weight: bold; text-decoration: none; margin: 0; line-height: 16px; color: #393939; background-color: #e6e6e6; border: 1px solid #c0c0c2; text-shadow: white 0 1px 1px; -moz-box-shadow: #ced7dc 0 1px 2px; -webkit-box-shadow: #ced7dc 0 1px 2px; -o-box-shadow: #ced7dc 0 1px 2px; box-shadow: #ced7dc 0 1px 2px; background: url('../images/../images/btn_icons_sprite.png?1310770021') no-repeat 999px 999px, -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #d9d9d9)); background: url('../images/../images/btn_icons_sprite.png?1310770021') no-repeat 999px 999px, -webkit-linear-gradient(#ffffff, #d9d9d9); background: url('../images/../images/btn_icons_sprite.png?1310770021') no-repeat 999px 999px, -moz-linear-gradient(#ffffff, #d9d9d9); background: url('../images/../images/btn_icons_sprite.png?1310770021') no-repeat 999px 999px, -o-linear-gradient(#ffffff, #d9d9d9); background: url('../images/../images/btn_icons_sprite.png?1310770021') no-repeat 999px 999px, -ms-linear-gradient(#ffffff, #d9d9d9); background: url('../images/../images/btn_icons_sprite.png?1310770021') no-repeat 999px 999px, linear-gradient(#ffffff, #d9d9d9); /* constructive */ /* destructive */ } +.cms .ui-widget .ss-ui-button.ui-state-hover { border: 1px solid #a6a6a9; text-shadow: white 0 1px 1px; -moz-box-shadow: #b0bec7 0 1px 2px; -webkit-box-shadow: #b0bec7 0 1px 2px; -o-box-shadow: #b0bec7 0 1px 2px; box-shadow: #b0bec7 0 1px 2px; background: url('../images/../images/btn_icons_sprite.png?1310770021') no-repeat 999px 999px, -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #d9d9d9)); background: url('../images/../images/btn_icons_sprite.png?1310770021') no-repeat 999px 999px, -webkit-linear-gradient(#ffffff, #d9d9d9); background: url('../images/../images/btn_icons_sprite.png?1310770021') no-repeat 999px 999px, -moz-linear-gradient(#ffffff, #d9d9d9); background: url('../images/../images/btn_icons_sprite.png?1310770021') no-repeat 999px 999px, -o-linear-gradient(#ffffff, #d9d9d9); background: url('../images/../images/btn_icons_sprite.png?1310770021') no-repeat 999px 999px, -ms-linear-gradient(#ffffff, #d9d9d9); background: url('../images/../images/btn_icons_sprite.png?1310770021') no-repeat 999px 999px, linear-gradient(#ffffff, #d9d9d9); } +.cms .ui-widget .ss-ui-button:focus, .cms .ui-widget .ss-ui-button:active { border: 1px solid #b3b3b5; -moz-box-shadow: #b0bec7 0 1px 2px; -webkit-box-shadow: #b0bec7 0 1px 2px; -o-box-shadow: #b0bec7 0 1px 2px; box-shadow: #b0bec7 0 1px 2px; background: url('../images/../images/btn_icons_sprite.png?1310770021') no-repeat 999px 999px, -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #e6e6e6), color-stop(100%, #ffffff)); background: url('../images/../images/btn_icons_sprite.png?1310770021') no-repeat 999px 999px, -webkit-linear-gradient(#e6e6e6, #ffffff); background: url('../images/../images/btn_icons_sprite.png?1310770021') no-repeat 999px 999px, -moz-linear-gradient(#e6e6e6, #ffffff); background: url('../images/../images/btn_icons_sprite.png?1310770021') no-repeat 999px 999px, -o-linear-gradient(#e6e6e6, #ffffff); background: url('../images/../images/btn_icons_sprite.png?1310770021') no-repeat 999px 999px, -ms-linear-gradient(#e6e6e6, #ffffff); background: url('../images/../images/btn_icons_sprite.png?1310770021') no-repeat 999px 999px, linear-gradient(#e6e6e6, #ffffff); } +.cms .ui-widget .ss-ui-button.ss-ui-action-constructive { padding-left: 24px; font-weight: bold; margin-left: 8px; color: white; border-color: #78a127; background: url('../images/../images/btn_icons_sprite.png?1310770021') no-repeat 5px 5px, -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #80bf40), color-stop(100%, #59862d)); background: url('../images/../images/btn_icons_sprite.png?1310770021') no-repeat 5px 5px, -webkit-linear-gradient(#80bf40, #59862d); background: url('../images/../images/btn_icons_sprite.png?1310770021') no-repeat 5px 5px, -moz-linear-gradient(#80bf40, #59862d); background: url('../images/../images/btn_icons_sprite.png?1310770021') no-repeat 5px 5px, -o-linear-gradient(#80bf40, #59862d); background: url('../images/../images/btn_icons_sprite.png?1310770021') no-repeat 5px 5px, -ms-linear-gradient(#80bf40, #59862d); background: url('../images/../images/btn_icons_sprite.png?1310770021') no-repeat 5px 5px, linear-gradient(#80bf40, #59862d); background-color: #669933; text-shadow: #4d7326 0 1px 1px; -moz-box-shadow: #748d9d 1px 1px 2px; -webkit-box-shadow: #748d9d 1px 1px 2px; -o-box-shadow: #748d9d 1px 1px 2px; box-shadow: #748d9d 1px 1px 2px; } +.cms .ui-widget .ss-ui-button.ss-ui-action-constructive.ui-state-hover { border-color: #59781d; background: url('../images/../images/btn_icons_sprite.png?1310770021') no-repeat 5px 5px, -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #8cc653), color-stop(100%, #669933)); background: url('../images/../images/btn_icons_sprite.png?1310770021') no-repeat 5px 5px, -webkit-linear-gradient(#8cc653, #669933); background: url('../images/../images/btn_icons_sprite.png?1310770021') no-repeat 5px 5px, -moz-linear-gradient(#8cc653, #669933); background: url('../images/../images/btn_icons_sprite.png?1310770021') no-repeat 5px 5px, -o-linear-gradient(#8cc653, #669933); background: url('../images/../images/btn_icons_sprite.png?1310770021') no-repeat 5px 5px, -ms-linear-gradient(#8cc653, #669933); background: url('../images/../images/btn_icons_sprite.png?1310770021') no-repeat 5px 5px, linear-gradient(#8cc653, #669933); background-color: #4d7326; } .cms .ui-widget .ss-ui-button.ss-ui-action-destructive { color: red; background-color: #e6e6e6; } -.cms .ui-widget .ss-ui-button.ss-ui-action-destructive.delete { padding-left: 26px; background: url('../images/../images/btn_icons_sprite.png?1310132248') no-repeat 6px -27px, -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #d9d9d9)); background: url('../images/../images/btn_icons_sprite.png?1310132248') no-repeat 6px -27px, -webkit-linear-gradient(#ffffff, #d9d9d9); background: url('../images/../images/btn_icons_sprite.png?1310132248') no-repeat 6px -27px, -moz-linear-gradient(#ffffff, #d9d9d9); background: url('../images/../images/btn_icons_sprite.png?1310132248') no-repeat 6px -27px, -o-linear-gradient(#ffffff, #d9d9d9); background: url('../images/../images/btn_icons_sprite.png?1310132248') no-repeat 6px -27px, -ms-linear-gradient(#ffffff, #d9d9d9); background: url('../images/../images/btn_icons_sprite.png?1310132248') no-repeat 6px -27px, linear-gradient(#ffffff, #d9d9d9); } -.cms .ui-widget .ss-ui-button.ss-ui-action-destructive.delete.ui-state-hover { background: url('../images/../images/btn_icons_sprite.png?1310132248') no-repeat 6px -27px, -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #e6e6e6)); background: url('../images/../images/btn_icons_sprite.png?1310132248') no-repeat 6px -27px, -webkit-linear-gradient(#ffffff, #e6e6e6); background: url('../images/../images/btn_icons_sprite.png?1310132248') no-repeat 6px -27px, -moz-linear-gradient(#ffffff, #e6e6e6); background: url('../images/../images/btn_icons_sprite.png?1310132248') no-repeat 6px -27px, -o-linear-gradient(#ffffff, #e6e6e6); background: url('../images/../images/btn_icons_sprite.png?1310132248') no-repeat 6px -27px, -ms-linear-gradient(#ffffff, #e6e6e6); background: url('../images/../images/btn_icons_sprite.png?1310132248') no-repeat 6px -27px, linear-gradient(#ffffff, #e6e6e6); } -.cms .ui-widget .ss-ui-button.ss-ui-action-minor { background: none; padding: 0; border: 0; color: #1f1f1f; text-decoration: underline; -moz-box-shadow: none; -webkit-box-shadow: none; -o-box-shadow: none; box-shadow: none; } +.cms .ui-widget .ss-ui-button.ss-ui-action-destructive.delete { padding-left: 26px; background: url('../images/../images/btn_icons_sprite.png?1310770021') no-repeat 6px -27px, -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #d9d9d9)); background: url('../images/../images/btn_icons_sprite.png?1310770021') no-repeat 6px -27px, -webkit-linear-gradient(#ffffff, #d9d9d9); background: url('../images/../images/btn_icons_sprite.png?1310770021') no-repeat 6px -27px, -moz-linear-gradient(#ffffff, #d9d9d9); background: url('../images/../images/btn_icons_sprite.png?1310770021') no-repeat 6px -27px, -o-linear-gradient(#ffffff, #d9d9d9); background: url('../images/../images/btn_icons_sprite.png?1310770021') no-repeat 6px -27px, -ms-linear-gradient(#ffffff, #d9d9d9); background: url('../images/../images/btn_icons_sprite.png?1310770021') no-repeat 6px -27px, linear-gradient(#ffffff, #d9d9d9); } +.cms .ui-widget .ss-ui-button.ss-ui-action-destructive.delete.ui-state-hover { background: url('../images/../images/btn_icons_sprite.png?1310770021') no-repeat 6px -27px, -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #e6e6e6)); background: url('../images/../images/btn_icons_sprite.png?1310770021') no-repeat 6px -27px, -webkit-linear-gradient(#ffffff, #e6e6e6); background: url('../images/../images/btn_icons_sprite.png?1310770021') no-repeat 6px -27px, -moz-linear-gradient(#ffffff, #e6e6e6); background: url('../images/../images/btn_icons_sprite.png?1310770021') no-repeat 6px -27px, -o-linear-gradient(#ffffff, #e6e6e6); background: url('../images/../images/btn_icons_sprite.png?1310770021') no-repeat 6px -27px, -ms-linear-gradient(#ffffff, #e6e6e6); background: url('../images/../images/btn_icons_sprite.png?1310770021') no-repeat 6px -27px, linear-gradient(#ffffff, #e6e6e6); } +.cms .ui-widget .ss-ui-button.ss-ui-action-minor { background: none; padding: 0; border: 0; color: #393939; text-decoration: underline; -moz-box-shadow: none; -webkit-box-shadow: none; -o-box-shadow: none; box-shadow: none; } +.cms .ui-widget .ss-ui-button.ss-ui-action-minor:hover { text-decoration: none; color: #1f1f1f; } +.cms .ui-widget .ss-ui-button.ss-ui-action-minor:focus, .cms .ui-widget .ss-ui-button.ss-ui-action-minor:active { text-decoration: none; color: #525252; } /** ---------------------------------------------------- Grouped form fields ---------------------------------------------------- */ .fieldgroup .fieldgroup-field { float: left; display: block; width: 184px; padding-right: 8px; } @@ -299,16 +299,16 @@ html article, html aside, html details, html figcaption, html figure, html foote .cms-content.loading { background: url(../images/spinner.gif) no-repeat 50% 50%; } /** ------------------------------------------------------- Top Left Header and logo area -------------------------------------------------------- */ -.cms-header { background-color: #00111d; position: relative; padding: 16px 8px 4px 4px; line-height: 24px; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #00111d), color-stop(50%, #003050), color-stop(100%, #00111d)); background-image: -webkit-linear-gradient(#00111d, #003050, #00111d); background-image: -moz-linear-gradient(#00111d, #003050, #00111d); background-image: -o-linear-gradient(#00111d, #003050, #00111d); background-image: -ms-linear-gradient(#00111d, #003050, #00111d); background-image: linear-gradient(#00111d, #003050, #00111d); } +.cms-header { background-color: #00111d; position: relative; padding: 16px 8px 0 4px; line-height: 24px; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #00111d), color-stop(50%, #003050), color-stop(100%, #00111d)); background-image: -webkit-linear-gradient(#00111d, #003050, #00111d); background-image: -moz-linear-gradient(#00111d, #003050, #00111d); background-image: -o-linear-gradient(#00111d, #003050, #00111d); background-image: -ms-linear-gradient(#00111d, #003050, #00111d); background-image: linear-gradient(#00111d, #003050, #00111d); } .cms-header span { color: white; white-space: nowrap; text-overflow: ellipsis; display: block; } .cms-header span a { color: #3ebae0; display: inline; } .cms-logo { border-bottom: 1px solid #03090c; height: 31px; overflow: hidden; padding: 0 0 0 4px; vertical-align: middle; font-size: 12px; } .cms-logo .version { display: none; } -.cms-logo a { display: inline-block; height: 24px; width: 24px; float: left; margin-right: 8px; background: url('../images/logo_small.png?1313152101') no-repeat; text-indent: -9999em; padding-right: 7px; border-right: 1px solid #19435c; } +.cms-logo a { display: inline-block; height: 24px; width: 24px; float: left; margin-right: 8px; background: url('../images/logo_small.png?1313100702') no-repeat; text-indent: -9999em; padding-right: 7px; border-right: 1px solid #19435c; } .cms-logo span { font-weight: bold; font-size: 14px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; o-text-overflow: ellipsis; } -.cms-login-status { border-top: 1px solid #19435c; height: 23px; padding: 8px 4px 0 4px; overflow: hidden; line-height: 16px; font-size: 11px; } +.cms-login-status { border-top: 1px solid #19435c; height: 24px; padding: 7px 4px 0 4px; overflow: hidden; line-height: 16px; font-size: 11px; } .cms-login-status .logout-link { display: inline-block; height: 16px; width: 16px; float: left; margin: 0 8px 0 3px; background: url(../images/logout.png) no-repeat; text-indent: -9999em; } /** ----------------------------------------------- Loading Screen ------------------------------------------------ */ @@ -344,7 +344,6 @@ html article, html aside, html details, html figcaption, html figure, html foote .cms-content-toolbar:after { content: "\0020"; display: block; height: 0; clear: both; overflow: hidden; visibility: hidden; } .cms-content-toolbar > * { float: left; } .cms-content-toolbar .cms-tree-view-modes * { display: inline-block; } -.cms-content-toolbar .cms-content-batchactions form > * { display: inline-block; } /* -------------------------------------------------------- Content Tools is the sidebar on the left of the main content panel */ .cms-content-tools { background-color: #dde3e7; width: 200px; border-right: 1px solid #bfcad2; overflow: auto; z-index: 60; } @@ -353,20 +352,23 @@ html article, html aside, html details, html figcaption, html figure, html foote .cms-content-tools .cms-panel-content form { width: 160px; } .cms-content-tools h3, .cms-content-tools h4, .cms-content-tools h5 { font-weight: bold; line-height: 16px; } .cms-content-tools h3 { font-size: 13px; } -.cms-content-tools .field { /* fields are more compressed in the sidebar */ /* smaller treedropdown */ } -.cms-content-tools .field label { float: none; width: auto; padding: 0 8px 0 0; } -.cms-content-tools .field .middleColumn { margin: 2px 0; } -.cms-content-tools .field input, .cms-content-tools .field select, .cms-content-tools .field textarea { padding: 6px; /* taken 2px off the padding to realign with grid */ } -.cms-content-tools .field .chzn-container-single .chzn-single { height: 26px; line-height: 28px; } -.cms-content-tools .field .chzn-container-single .chzn-single div b { background-position: 4px 2px; } +.cms-content-tools .ui-widget-content { background: none; } +.cms-content-tools .field { /* Fields are more compressed in the sidebar compared to the main content editing window so the below alters the internal spacing of the fields so we can move that spacing to between the form fields rather than padding */ /* smaller treedropdown */ /* buttons should line up with inputs */ } +.cms-content-tools .field label { float: none; width: auto; font-size: 11px; padding: 0 8px 4px 0; } +.cms-content-tools .field .middleColumn { margin: 0; } +.cms-content-tools .field input, .cms-content-tools .field select, .cms-content-tools .field textarea { padding: 5px; font-size: 11px; } +.cms-content-tools .field .chzn-container-single .chzn-single { height: 24px; line-height: 24px; font-size: 11px; } +.cms-content-tools .field .chzn-container-single .chzn-single div b { background-position: 4px 0; } +.cms-content-tools .field .ss-ui-button { padding: 5px 8px; } .cms-content-tools .fieldgroup .fieldgroup-field { width: auto; padding: 0; } .cms-content-tools .fieldgroup .fieldgroup-field .field { margin: 0; padding: 0; } +/** CMS Batch actions */ .cms-content-batchactions, .cms-content-constructive-actions { float: right; } .cms-content-batchactions { float: right; position: relative; display: block; margin-right: 8px; } - -form.cms-batch-actions { float: left; } +.cms-content-batchactions form > * { display: block; float: left; } +.cms-content-batchactions form.cms-batch-actions { float: left; } .cms-content-constructive-actions a { display: block; float: right; } diff --git a/admin/scss/_forms.scss b/admin/scss/_forms.scss index 2b1d185cd..d7d86d75b 100644 --- a/admin/scss/_forms.scss +++ b/admin/scss/_forms.scss @@ -75,7 +75,8 @@ form.nostyle { .TreeDropdownField { background: #fff; border: 1px solid lighten($color-medium-separator, 20%); - padding: $grid-vertical $grid-horizontal; + padding: ($grid-vertical - 1) ($grid-horizontal - 1); + line-height: $grid-vertical * 2; margin: 0; outline: none; @@ -152,7 +153,7 @@ form.nostyle { width: 24px; b { - background-position: 3px 4px; + background-position: 1px 4px; } } } @@ -202,10 +203,12 @@ form.nostyle { .ss-ui-button { /* all buttons */ - padding: ($grid-vertical - 3) ($grid-horizontal * 2) - 4; + padding: ($grid-vertical - 1) ($grid-horizontal + 4); + font-weight: bold; text-decoration: none; + margin: 0; line-height: $grid-vertical * 2; - color: $color-text-dark; + color: lighten($color-text-dark, 10%); background-color: $color-button-generic; border: 1px solid $color-button-generic-border; @include text-shadow(lighten($color-button-generic, 20%) 0 1px 1px); @@ -218,13 +221,14 @@ form.nostyle { ); &.ui-state-hover { - border: 1px solid darken($color-button-generic-border, 5%); + border: 1px solid darken($color-button-generic-border, 10%); + @include text-shadow(lighten($color-button-generic, 30%) 0 1px 1px); @include box-shadow($color-base 0 1px 2px); @include background(image-url("../images/btn_icons_sprite.png") no-repeat 999px 999px, linear-gradient(color-stops( lighten($color-button-generic, 20%), - $color-button-generic + darken($color-button-generic, 5%) )) ); } @@ -311,10 +315,20 @@ form.nostyle { background: none; padding: 0; border: 0; - color: $color-text-dark; + color: lighten($color-text-dark, 10%); text-decoration: underline; @include box-shadow(none); + + &:hover { + text-decoration: none; + color: $color-text-dark; + } + &:focus, + &:active { + text-decoration: none; + color: lighten($color-text-dark, 20%); + } } } } diff --git a/admin/scss/_menu.scss b/admin/scss/_menu.scss index aabd8de33..951c4c5e7 100644 --- a/admin/scss/_menu.scss +++ b/admin/scss/_menu.scss @@ -71,6 +71,7 @@ color: $color-text-dark; padding: ($grid-vertical - 1) 5px ($grid-vertical - 1) 8px; background-color: $color-base; + cursor: pointer; @include background-image(linear-gradient( $color-base, diff --git a/admin/scss/_mixins.scss b/admin/scss/_mixins.scss index 981656229..0dc6e0792 100644 --- a/admin/scss/_mixins.scss +++ b/admin/scss/_mixins.scss @@ -29,7 +29,6 @@ * ----------------------------------------------------- */ @mixin clear-form-field-styles { .field { - display: inline; padding: 0; border: 0; } diff --git a/admin/scss/_style.scss b/admin/scss/_style.scss index 26d87b0cd..b2fe2e126 100644 --- a/admin/scss/_style.scss +++ b/admin/scss/_style.scss @@ -182,7 +182,7 @@ html,body { .cms-header { background-color: darken($color-dark-bg, 10%); position: relative; - padding: 16px 8px 4px 4px; + padding: $grid-vertical * 2 8px 0 4px; line-height: 24px; @include background-image( @@ -235,8 +235,8 @@ html,body { .cms-login-status { border-top: 1px solid $color-dark-separator; - height: 23px; - padding: 8px 4px 0 4px; + height: 24px; + padding: 7px 4px 0 4px; overflow: hidden; line-height: 16px; font-size: $font-base-size - 1; @@ -405,10 +405,6 @@ html,body { .cms-tree-view-modes * { display: inline-block; } - - .cms-content-batchactions form > * { - display: inline-block; - } } @@ -449,32 +445,49 @@ html,body { font-size: $font-base-size + 1; } + .ui-widget-content { + background: none; + } + .field { - /* fields are more compressed in the sidebar */ + /* + * Fields are more compressed in the sidebar compared to the + * main content editing window so the below alters the internal + * spacing of the fields so we can move that spacing to between + * the form fields rather than padding + */ label { float: none; width: auto; - padding: 0 $grid-vertical 0 0; + font-size: 11px; + padding: 0 $grid-horizontal 4px 0; } .middleColumn { - margin: 2px 0; + margin: 0; } input, select, textarea { - padding: ($grid-vertical - 2); /* taken 2px off the padding to realign with grid */ + padding: 5px; + font-size: 11px; } /* smaller treedropdown */ .chzn-container-single .chzn-single { - height: 26px; - line-height: 28px; + height: 24px; + line-height: 24px; + font-size: 11px; + + div b { + background-position: 4px 0; + } } - .chzn-container-single .chzn-single div b { - background-position: 4px 2px; + /* buttons should line up with inputs */ + .ss-ui-button { + padding: 5px $grid-horizontal; } } @@ -491,6 +504,9 @@ html,body { } } +/** + * CMS Batch actions + */ .cms-content-batchactions, .cms-content-constructive-actions { float: right; } @@ -499,15 +515,22 @@ html,body { float: right; position: relative; display: block; - margin-right: 8px; + margin-right: 8px; + + form > * { + display: block; + float: left; + } + + form.cms-batch-actions { + float: left; + } } -form.cms-batch-actions { - float: left; -} + .cms-content-constructive-actions a { - display: block; + display: block; float: right; } diff --git a/admin/scss/_uitheme.scss b/admin/scss/_uitheme.scss index 9bf605ab7..39e5ccfea 100644 --- a/admin/scss/_uitheme.scss +++ b/admin/scss/_uitheme.scss @@ -50,7 +50,7 @@ font-family: $font-family; border: 0; } - + .ui-widget-header { background: $color-widget-bg; border: 0; From 65b3c3a8940b835fbddb7195be648ab7ea76e119 Mon Sep 17 00:00:00 2001 From: Will Rossiter Date: Tue, 16 Aug 2011 14:58:17 +1200 Subject: [PATCH 02/11] MINOR: add jquery ui calendar icon to date picker form --- javascript/DateField.js | 15 +++++++++++---- 1 file changed, 11 insertions(+), 4 deletions(-) diff --git a/javascript/DateField.js b/javascript/DateField.js index 70695d89d..66a5be0db 100644 --- a/javascript/DateField.js +++ b/javascript/DateField.js @@ -1,14 +1,21 @@ (function($) { - $('.field.date input.text').live('click', function() { + /** + * Initialize and open a datepicker + * live() doesn't have "onmatch", and jQuery.entwine is a bit too + * heavyweight for this, so we need to do this onclick. + */ + var fields = $('.field.date input.text'); + + fields.siblings("button").addClass("ui-icon ui-icon-calendar"); + + fields.live('click', function() { var holder = $(this).parents('.field.date:first'), config = holder.metadata({type: 'class'}); if(!config.showcalendar) return; if(config.locale && $.datepicker.regional[config.locale]) { config = $.extend(config, $.datepicker.regional[config.locale], {}); } - - // Initialize and open a datepicker - // live() doesn't have "onmatch", and jQuery.entwine is a bit too heavyweight for this, so we need to do this onclick. + $(this).datepicker(config); $(this).datepicker('show'); }); From 60cba7dd76042a27b02743186ead7c49692b4df4 Mon Sep 17 00:00:00 2001 From: Will Rossiter Date: Tue, 16 Aug 2011 15:36:39 +1200 Subject: [PATCH 03/11] BUGFIX: fixed submenu not opening in cms-menu when cms loads on page other than edit page section --- admin/code/LeftAndMain.php | 2 +- admin/css/screen.css | 1 + admin/javascript/LeftAndMain.Menu.js | 5 ----- admin/scss/_menu.scss | 8 ++++++-- admin/templates/Includes/LeftAndMain_Menu.ss | 4 +--- 5 files changed, 9 insertions(+), 11 deletions(-) diff --git a/admin/code/LeftAndMain.php b/admin/code/LeftAndMain.php index 1cb632877..4400e912b 100644 --- a/admin/code/LeftAndMain.php +++ b/admin/code/LeftAndMain.php @@ -452,7 +452,7 @@ class LeftAndMain extends Controller { continue; } - $linkingmode = ""; + $linkingmode = "link"; if($menuItem->controller && get_class($this) == $menuItem->controller) { $linkingmode = "current"; diff --git a/admin/css/screen.css b/admin/css/screen.css index 4c01dfe90..d337329c7 100644 --- a/admin/css/screen.css +++ b/admin/css/screen.css @@ -162,6 +162,7 @@ li.class-ErrorPage a .jstree-pageicon { background-position: 0 -112px; } .cms-menu-list li a:focus, .cms-menu-list li a:active { border-top: 1px solid #a1b2bc; text-decoration: none; background-color: #a1b2bc; color: #393939; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #92a5b2), color-stop(100%, #a1b2bc)); background-image: -webkit-linear-gradient(#92a5b2, #a1b2bc); background-image: -moz-linear-gradient(#92a5b2, #a1b2bc); background-image: -o-linear-gradient(#92a5b2, #a1b2bc); background-image: -ms-linear-gradient(#92a5b2, #a1b2bc); background-image: linear-gradient(#92a5b2, #a1b2bc); } .cms-menu-list li a .icon { display: block; float: left; margin: 4px 10px 0 4px; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70); opacity: 0.7; } .cms-menu-list li a .text { display: block; } +.cms-menu-list li ul { display: none; } .cms-menu-list li.current a { color: white; text-shadow: #1e5270 0 -1px 0; border-top: 1px solid #55a4d2; border-bottom: 1px solid #1e5270; background-color: #338dc1; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #338dc1), color-stop(100%, #287099)); background-image: -webkit-linear-gradient(#338dc1, #287099); background-image: -moz-linear-gradient(#338dc1, #287099); background-image: -o-linear-gradient(#338dc1, #287099); background-image: -ms-linear-gradient(#338dc1, #287099); background-image: linear-gradient(#338dc1, #287099); } .cms-menu-list li.current ul { border-top: 1px solid #1e5270; } .cms-menu-list li.current li { background-color: #287099; } diff --git a/admin/javascript/LeftAndMain.Menu.js b/admin/javascript/LeftAndMain.Menu.js index 15a62ba16..c3ad90b0a 100644 --- a/admin/javascript/LeftAndMain.Menu.js +++ b/admin/javascript/LeftAndMain.Menu.js @@ -27,11 +27,6 @@ onmatch: function() { var self = this; - // TODO Fix icon etc. - // this.children('li').each(function() { - // $(this).find('a:first').append('o'); - // }); - $('.cms-container').bind('afterstatechange', function(e, data) { var controller = data.xhr.getResponseHeader('X-Controller'); if(controller) { diff --git a/admin/scss/_menu.scss b/admin/scss/_menu.scss index 951c4c5e7..9f0688e8b 100644 --- a/admin/scss/_menu.scss +++ b/admin/scss/_menu.scss @@ -117,7 +117,11 @@ display: block; } } - + + ul { + display: none; + } + &.current { a { color: $color-text-light; @@ -174,7 +178,7 @@ } } } - + &.collapsed { li .text { display: none; diff --git a/admin/templates/Includes/LeftAndMain_Menu.ss b/admin/templates/Includes/LeftAndMain_Menu.ss index e02e3320e..0e355d9ee 100644 --- a/admin/templates/Includes/LeftAndMain_Menu.ss +++ b/admin/templates/Includes/LeftAndMain_Menu.ss @@ -24,14 +24,13 @@
    <% control MainMenu %> - <% end_control %> From 7560e468ed87b0f92fbc94ed90a0a3db15a80175 Mon Sep 17 00:00:00 2001 From: Will Rossiter Date: Thu, 18 Aug 2011 11:26:24 +1200 Subject: [PATCH 04/11] BUGFIX: fixed menu not appearing on load --- admin/css/screen.css | 2 +- admin/scss/_menu.scss | 1 + 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/admin/css/screen.css b/admin/css/screen.css index d337329c7..c73d997da 100644 --- a/admin/css/screen.css +++ b/admin/css/screen.css @@ -164,7 +164,7 @@ li.class-ErrorPage a .jstree-pageicon { background-position: 0 -112px; } .cms-menu-list li a .text { display: block; } .cms-menu-list li ul { display: none; } .cms-menu-list li.current a { color: white; text-shadow: #1e5270 0 -1px 0; border-top: 1px solid #55a4d2; border-bottom: 1px solid #1e5270; background-color: #338dc1; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #338dc1), color-stop(100%, #287099)); background-image: -webkit-linear-gradient(#338dc1, #287099); background-image: -moz-linear-gradient(#338dc1, #287099); background-image: -o-linear-gradient(#338dc1, #287099); background-image: -ms-linear-gradient(#338dc1, #287099); background-image: linear-gradient(#338dc1, #287099); } -.cms-menu-list li.current ul { border-top: 1px solid #1e5270; } +.cms-menu-list li.current ul { border-top: 1px solid #1e5270; display: block; } .cms-menu-list li.current li { background-color: #287099; } .cms-menu-list li.current li a { font-size: 11px; padding: 0 10px 0 40px; height: 32px; line-height: 32px; color: #e2f0f7; background: none; border-top: 1px solid #338dc1; border-bottom: 1px solid #1e5270; } .cms-menu-list li.current li a.current, .cms-menu-list li.current li a:hover { background: #2e7ead; border-top: 1px solid #2e7ead; color: white; } diff --git a/admin/scss/_menu.scss b/admin/scss/_menu.scss index 9f0688e8b..ec65a6408 100644 --- a/admin/scss/_menu.scss +++ b/admin/scss/_menu.scss @@ -137,6 +137,7 @@ ul { border-top: 1px solid darken($color-menu-button, 20%); + display: block; } li { From 2036354d8d989e76f907dfb74ac1495707df2c8d Mon Sep 17 00:00:00 2001 From: Will Rossiter Date: Mon, 22 Aug 2011 16:44:41 +1200 Subject: [PATCH 05/11] ENHANCEMENT: implemented CMSPageHistoryController with comparsion view, single version view into new CMSMain interface --- admin/code/LeftAndMain.php | 25 +- admin/css/screen.css | 67 +++-- admin/javascript/LeftAndMain.Content.js | 32 ++- admin/javascript/LeftAndMain.EditForm.js | 5 + admin/javascript/LeftAndMain.Preview.js | 2 +- admin/javascript/LeftAndMain.js | 2 +- admin/scss/_forms.scss | 252 +++++++++--------- admin/scss/_style.scss | 121 +++++++-- .../Includes/LeftAndMain_EditForm.ss | 2 +- forms/Form.php | 36 ++- 10 files changed, 341 insertions(+), 203 deletions(-) diff --git a/admin/code/LeftAndMain.php b/admin/code/LeftAndMain.php index 4400e912b..d9e99d033 100644 --- a/admin/code/LeftAndMain.php +++ b/admin/code/LeftAndMain.php @@ -218,6 +218,8 @@ class LeftAndMain extends Controller { $htmlEditorConfig->setOption('content_css', implode(',', $cssFiles)); } + // @todo Load separately so the CSS files can be inlined + Requirements::css(THIRDPARTY_DIR . '/jquery-ui-themes/smoothness/jquery-ui.css'); Requirements::css(SAPPHIRE_ADMIN_DIR . '/css/screen.css'); Requirements::javascript(THIRDPARTY_DIR . '/prototype/prototype.js'); @@ -234,8 +236,7 @@ class LeftAndMain extends Controller { Requirements::javascript(THIRDPARTY_DIR . '/jquery-entwine/dist/jquery.entwine-dist.js'); Requirements::javascript(SAPPHIRE_ADMIN_DIR . '/javascript/ssui.core.js'); - // @todo Load separately so the CSS files can be inlined - Requirements::css(THIRDPARTY_DIR . '/jquery-ui-themes/smoothness/jquery-ui.css'); + // Required for TreeTools panel above tree Requirements::javascript(SAPPHIRE_DIR . '/javascript/TabSet.js'); @@ -1203,28 +1204,36 @@ class LeftAndMain extends Controller { /** * Get the application name. - * @return String + * + * @return string */ function getApplicationName() { return self::$application_name; } /** - * @return String + * @return string */ function Title() { - return sprintf('%s | %s', $this->getApplicationName(), $this->SectionTitle()); + $app = $this->getApplicationName(); + + return ($section = $this->SectionTitle()) ? sprintf('%s - %s', $app, $section) : $app; } /** - * Return the title of the current section, as shown on the main menu + * Return the title of the current section. Either this is pulled from + * the current panel's menu_title or from the first active menu + * + * @return string */ function SectionTitle() { + if($title = $this->stat('menu_title')) return $title; + // Get menu - use obj() to cache it in the same place as the template engine $menu = $this->obj('MainMenu'); - + foreach($menu as $menuItem) { - if($menuItem->LinkingMode == 'current') return $menuItem->Title; + if($menuItem->LinkingMode != 'link') return $menuItem->Title; } } diff --git a/admin/css/screen.css b/admin/css/screen.css index c73d997da..f7c6b6d38 100644 --- a/admin/css/screen.css +++ b/admin/css/screen.css @@ -186,7 +186,8 @@ form.nostyle .middleColumn { margin-left: 0; } .field label.left { float: left; display: block; width: 168px; padding: 8px 8px 8px 0; line-height: 16px; } .field label.left span { display: block; font-size: 11px; color: #848484; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; o-text-overflow: ellipsis; } .field label.right { cursor: pointer; } -.field .middleColumn { margin-left: 176px; } +.field .middleColumn { margin-left: 184px; } +.field span.readonly { padding-top: 8px; line-height: 16px; display: block; } .field input.text, .field textarea, .field select, .field .TreeDropdownField { width: 90%; max-width: 512px; } .field input.text, .field textarea, .field .TreeDropdownField { background: #fff; border: 1px solid #b3b3b3; padding: 7px 7px; line-height: 16px; margin: 0; outline: none; -moz-border-radius: 4px; -webkit-border-radius: 4px; -o-border-radius: 4px; -ms-border-radius: 4px; -khtml-border-radius: 4px; border-radius: 4px; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #efefef), color-stop(10%, #ffffff), color-stop(90%, #ffffff), color-stop(100%, #efefef)); background-image: -webkit-linear-gradient(#efefef, #ffffff 10%, #ffffff 90%, #efefef); background-image: -moz-linear-gradient(#efefef, #ffffff 10%, #ffffff 90%, #efefef); background-image: -o-linear-gradient(#efefef, #ffffff 10%, #ffffff 90%, #efefef); background-image: -ms-linear-gradient(#efefef, #ffffff 10%, #ffffff 90%, #efefef); background-image: linear-gradient(#efefef, #ffffff 10%, #ffffff 90%, #efefef); } .field input.text:focus, .field textarea:focus, .field .TreeDropdownField:focus { border: 1px solid #b3b3b3; -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.2); -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.2); -o-box-shadow: 0 0 5px rgba(0, 0, 0, 0.2); box-shadow: 0 0 5px rgba(0, 0, 0, 0.2); } @@ -204,24 +205,18 @@ form.nostyle .middleColumn { margin-left: 0; } .field input.hasDatepicker { width: 50%; max-width: 96px; } /** ---------------------------------------------------- Buttons ---------------------------------------------------- */ -.Actions { margin-right: 80px; min-height: 30px; } -.Actions > div { overflow: auto; } - -.cms-preview-toggle-link { display: block; float: right; font-size: 11px; } - -.cms .ui-widget { /* loading */ } -.cms .ui-widget input.loading, .cms .ui-widget input.ui-state-default.loading, .cms .ui-widget .ui-widget-content input.ui-state-default.loading, .cms .ui-widget .ui-widget-header input.ui-state-default.loading { padding-left: 24px; color: #525252; background: #eeeded url(../../images/network-save.gif) no-repeat 4px center; border-color: #d5d3d3; cursor: default; text-shadow: none; -moz-box-shadow: none; -webkit-box-shadow: none; -o-box-shadow: none; box-shadow: none; } -.cms .ui-widget .ss-ui-button { /* all buttons */ padding: 7px 12px; font-weight: bold; text-decoration: none; margin: 0; line-height: 16px; color: #393939; background-color: #e6e6e6; border: 1px solid #c0c0c2; text-shadow: white 0 1px 1px; -moz-box-shadow: #ced7dc 0 1px 2px; -webkit-box-shadow: #ced7dc 0 1px 2px; -o-box-shadow: #ced7dc 0 1px 2px; box-shadow: #ced7dc 0 1px 2px; background: url('../images/../images/btn_icons_sprite.png?1310770021') no-repeat 999px 999px, -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #d9d9d9)); background: url('../images/../images/btn_icons_sprite.png?1310770021') no-repeat 999px 999px, -webkit-linear-gradient(#ffffff, #d9d9d9); background: url('../images/../images/btn_icons_sprite.png?1310770021') no-repeat 999px 999px, -moz-linear-gradient(#ffffff, #d9d9d9); background: url('../images/../images/btn_icons_sprite.png?1310770021') no-repeat 999px 999px, -o-linear-gradient(#ffffff, #d9d9d9); background: url('../images/../images/btn_icons_sprite.png?1310770021') no-repeat 999px 999px, -ms-linear-gradient(#ffffff, #d9d9d9); background: url('../images/../images/btn_icons_sprite.png?1310770021') no-repeat 999px 999px, linear-gradient(#ffffff, #d9d9d9); /* constructive */ /* destructive */ } -.cms .ui-widget .ss-ui-button.ui-state-hover { border: 1px solid #a6a6a9; text-shadow: white 0 1px 1px; -moz-box-shadow: #b0bec7 0 1px 2px; -webkit-box-shadow: #b0bec7 0 1px 2px; -o-box-shadow: #b0bec7 0 1px 2px; box-shadow: #b0bec7 0 1px 2px; background: url('../images/../images/btn_icons_sprite.png?1310770021') no-repeat 999px 999px, -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #d9d9d9)); background: url('../images/../images/btn_icons_sprite.png?1310770021') no-repeat 999px 999px, -webkit-linear-gradient(#ffffff, #d9d9d9); background: url('../images/../images/btn_icons_sprite.png?1310770021') no-repeat 999px 999px, -moz-linear-gradient(#ffffff, #d9d9d9); background: url('../images/../images/btn_icons_sprite.png?1310770021') no-repeat 999px 999px, -o-linear-gradient(#ffffff, #d9d9d9); background: url('../images/../images/btn_icons_sprite.png?1310770021') no-repeat 999px 999px, -ms-linear-gradient(#ffffff, #d9d9d9); background: url('../images/../images/btn_icons_sprite.png?1310770021') no-repeat 999px 999px, linear-gradient(#ffffff, #d9d9d9); } -.cms .ui-widget .ss-ui-button:focus, .cms .ui-widget .ss-ui-button:active { border: 1px solid #b3b3b5; -moz-box-shadow: #b0bec7 0 1px 2px; -webkit-box-shadow: #b0bec7 0 1px 2px; -o-box-shadow: #b0bec7 0 1px 2px; box-shadow: #b0bec7 0 1px 2px; background: url('../images/../images/btn_icons_sprite.png?1310770021') no-repeat 999px 999px, -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #e6e6e6), color-stop(100%, #ffffff)); background: url('../images/../images/btn_icons_sprite.png?1310770021') no-repeat 999px 999px, -webkit-linear-gradient(#e6e6e6, #ffffff); background: url('../images/../images/btn_icons_sprite.png?1310770021') no-repeat 999px 999px, -moz-linear-gradient(#e6e6e6, #ffffff); background: url('../images/../images/btn_icons_sprite.png?1310770021') no-repeat 999px 999px, -o-linear-gradient(#e6e6e6, #ffffff); background: url('../images/../images/btn_icons_sprite.png?1310770021') no-repeat 999px 999px, -ms-linear-gradient(#e6e6e6, #ffffff); background: url('../images/../images/btn_icons_sprite.png?1310770021') no-repeat 999px 999px, linear-gradient(#e6e6e6, #ffffff); } -.cms .ui-widget .ss-ui-button.ss-ui-action-constructive { padding-left: 24px; font-weight: bold; margin-left: 8px; color: white; border-color: #78a127; background: url('../images/../images/btn_icons_sprite.png?1310770021') no-repeat 5px 5px, -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #80bf40), color-stop(100%, #59862d)); background: url('../images/../images/btn_icons_sprite.png?1310770021') no-repeat 5px 5px, -webkit-linear-gradient(#80bf40, #59862d); background: url('../images/../images/btn_icons_sprite.png?1310770021') no-repeat 5px 5px, -moz-linear-gradient(#80bf40, #59862d); background: url('../images/../images/btn_icons_sprite.png?1310770021') no-repeat 5px 5px, -o-linear-gradient(#80bf40, #59862d); background: url('../images/../images/btn_icons_sprite.png?1310770021') no-repeat 5px 5px, -ms-linear-gradient(#80bf40, #59862d); background: url('../images/../images/btn_icons_sprite.png?1310770021') no-repeat 5px 5px, linear-gradient(#80bf40, #59862d); background-color: #669933; text-shadow: #4d7326 0 1px 1px; -moz-box-shadow: #748d9d 1px 1px 2px; -webkit-box-shadow: #748d9d 1px 1px 2px; -o-box-shadow: #748d9d 1px 1px 2px; box-shadow: #748d9d 1px 1px 2px; } -.cms .ui-widget .ss-ui-button.ss-ui-action-constructive.ui-state-hover { border-color: #59781d; background: url('../images/../images/btn_icons_sprite.png?1310770021') no-repeat 5px 5px, -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #8cc653), color-stop(100%, #669933)); background: url('../images/../images/btn_icons_sprite.png?1310770021') no-repeat 5px 5px, -webkit-linear-gradient(#8cc653, #669933); background: url('../images/../images/btn_icons_sprite.png?1310770021') no-repeat 5px 5px, -moz-linear-gradient(#8cc653, #669933); background: url('../images/../images/btn_icons_sprite.png?1310770021') no-repeat 5px 5px, -o-linear-gradient(#8cc653, #669933); background: url('../images/../images/btn_icons_sprite.png?1310770021') no-repeat 5px 5px, -ms-linear-gradient(#8cc653, #669933); background: url('../images/../images/btn_icons_sprite.png?1310770021') no-repeat 5px 5px, linear-gradient(#8cc653, #669933); background-color: #4d7326; } -.cms .ui-widget .ss-ui-button.ss-ui-action-destructive { color: red; background-color: #e6e6e6; } -.cms .ui-widget .ss-ui-button.ss-ui-action-destructive.delete { padding-left: 26px; background: url('../images/../images/btn_icons_sprite.png?1310770021') no-repeat 6px -27px, -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #d9d9d9)); background: url('../images/../images/btn_icons_sprite.png?1310770021') no-repeat 6px -27px, -webkit-linear-gradient(#ffffff, #d9d9d9); background: url('../images/../images/btn_icons_sprite.png?1310770021') no-repeat 6px -27px, -moz-linear-gradient(#ffffff, #d9d9d9); background: url('../images/../images/btn_icons_sprite.png?1310770021') no-repeat 6px -27px, -o-linear-gradient(#ffffff, #d9d9d9); background: url('../images/../images/btn_icons_sprite.png?1310770021') no-repeat 6px -27px, -ms-linear-gradient(#ffffff, #d9d9d9); background: url('../images/../images/btn_icons_sprite.png?1310770021') no-repeat 6px -27px, linear-gradient(#ffffff, #d9d9d9); } -.cms .ui-widget .ss-ui-button.ss-ui-action-destructive.delete.ui-state-hover { background: url('../images/../images/btn_icons_sprite.png?1310770021') no-repeat 6px -27px, -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #e6e6e6)); background: url('../images/../images/btn_icons_sprite.png?1310770021') no-repeat 6px -27px, -webkit-linear-gradient(#ffffff, #e6e6e6); background: url('../images/../images/btn_icons_sprite.png?1310770021') no-repeat 6px -27px, -moz-linear-gradient(#ffffff, #e6e6e6); background: url('../images/../images/btn_icons_sprite.png?1310770021') no-repeat 6px -27px, -o-linear-gradient(#ffffff, #e6e6e6); background: url('../images/../images/btn_icons_sprite.png?1310770021') no-repeat 6px -27px, -ms-linear-gradient(#ffffff, #e6e6e6); background: url('../images/../images/btn_icons_sprite.png?1310770021') no-repeat 6px -27px, linear-gradient(#ffffff, #e6e6e6); } -.cms .ui-widget .ss-ui-button.ss-ui-action-minor { background: none; padding: 0; border: 0; color: #393939; text-decoration: underline; -moz-box-shadow: none; -webkit-box-shadow: none; -o-box-shadow: none; box-shadow: none; } -.cms .ui-widget .ss-ui-button.ss-ui-action-minor:hover { text-decoration: none; color: #1f1f1f; } -.cms .ui-widget .ss-ui-button.ss-ui-action-minor:focus, .cms .ui-widget .ss-ui-button.ss-ui-action-minor:active { text-decoration: none; color: #525252; } +.cms input.loading, .cms input.ui-state-default.loading, .cms .ui-widget-content input.ui-state-default.loading, .cms .ui-widget-header input.ui-state-default.loading { padding-left: 24px; color: #525252; background: #eeeded url(../../images/network-save.gif) no-repeat 4px center; border-color: #d5d3d3; cursor: default; text-shadow: none; -moz-box-shadow: none; -webkit-box-shadow: none; -o-box-shadow: none; box-shadow: none; } +.cms .ss-ui-button { /* all buttons */ padding: 7px 12px; font-weight: bold; text-decoration: none; margin: 0; line-height: 16px; color: #393939; background-color: #e6e6e6; border: 1px solid #c0c0c2; text-shadow: white 0 1px 1px; -moz-box-shadow: #ced7dc 0 1px 2px; -webkit-box-shadow: #ced7dc 0 1px 2px; -o-box-shadow: #ced7dc 0 1px 2px; box-shadow: #ced7dc 0 1px 2px; background: url('../images/../images/btn_icons_sprite.png?1310770021') no-repeat 999px 999px, -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #d9d9d9)); background: url('../images/../images/btn_icons_sprite.png?1310770021') no-repeat 999px 999px, -webkit-linear-gradient(#ffffff, #d9d9d9); background: url('../images/../images/btn_icons_sprite.png?1310770021') no-repeat 999px 999px, -moz-linear-gradient(#ffffff, #d9d9d9); background: url('../images/../images/btn_icons_sprite.png?1310770021') no-repeat 999px 999px, -o-linear-gradient(#ffffff, #d9d9d9); background: url('../images/../images/btn_icons_sprite.png?1310770021') no-repeat 999px 999px, -ms-linear-gradient(#ffffff, #d9d9d9); background: url('../images/../images/btn_icons_sprite.png?1310770021') no-repeat 999px 999px, linear-gradient(#ffffff, #d9d9d9); /* constructive */ /* destructive */ } +.cms .ss-ui-button.ui-state-hover { border: 1px solid #a6a6a9; text-shadow: white 0 1px 1px; -moz-box-shadow: #b0bec7 0 1px 2px; -webkit-box-shadow: #b0bec7 0 1px 2px; -o-box-shadow: #b0bec7 0 1px 2px; box-shadow: #b0bec7 0 1px 2px; background: url('../images/../images/btn_icons_sprite.png?1310770021') no-repeat 999px 999px, -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #d9d9d9)); background: url('../images/../images/btn_icons_sprite.png?1310770021') no-repeat 999px 999px, -webkit-linear-gradient(#ffffff, #d9d9d9); background: url('../images/../images/btn_icons_sprite.png?1310770021') no-repeat 999px 999px, -moz-linear-gradient(#ffffff, #d9d9d9); background: url('../images/../images/btn_icons_sprite.png?1310770021') no-repeat 999px 999px, -o-linear-gradient(#ffffff, #d9d9d9); background: url('../images/../images/btn_icons_sprite.png?1310770021') no-repeat 999px 999px, -ms-linear-gradient(#ffffff, #d9d9d9); background: url('../images/../images/btn_icons_sprite.png?1310770021') no-repeat 999px 999px, linear-gradient(#ffffff, #d9d9d9); } +.cms .ss-ui-button:focus, .cms .ss-ui-button:active { border: 1px solid #b3b3b5; -moz-box-shadow: #b0bec7 0 1px 2px; -webkit-box-shadow: #b0bec7 0 1px 2px; -o-box-shadow: #b0bec7 0 1px 2px; box-shadow: #b0bec7 0 1px 2px; background: url('../images/../images/btn_icons_sprite.png?1310770021') no-repeat 999px 999px, -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #e6e6e6), color-stop(100%, #ffffff)); background: url('../images/../images/btn_icons_sprite.png?1310770021') no-repeat 999px 999px, -webkit-linear-gradient(#e6e6e6, #ffffff); background: url('../images/../images/btn_icons_sprite.png?1310770021') no-repeat 999px 999px, -moz-linear-gradient(#e6e6e6, #ffffff); background: url('../images/../images/btn_icons_sprite.png?1310770021') no-repeat 999px 999px, -o-linear-gradient(#e6e6e6, #ffffff); background: url('../images/../images/btn_icons_sprite.png?1310770021') no-repeat 999px 999px, -ms-linear-gradient(#e6e6e6, #ffffff); background: url('../images/../images/btn_icons_sprite.png?1310770021') no-repeat 999px 999px, linear-gradient(#e6e6e6, #ffffff); } +.cms .ss-ui-button.ss-ui-action-constructive { padding-left: 24px; font-weight: bold; margin-left: 8px; color: white; border-color: #78a127; background: url('../images/../images/btn_icons_sprite.png?1310770021') no-repeat 5px 5px, -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #80bf40), color-stop(100%, #59862d)); background: url('../images/../images/btn_icons_sprite.png?1310770021') no-repeat 5px 5px, -webkit-linear-gradient(#80bf40, #59862d); background: url('../images/../images/btn_icons_sprite.png?1310770021') no-repeat 5px 5px, -moz-linear-gradient(#80bf40, #59862d); background: url('../images/../images/btn_icons_sprite.png?1310770021') no-repeat 5px 5px, -o-linear-gradient(#80bf40, #59862d); background: url('../images/../images/btn_icons_sprite.png?1310770021') no-repeat 5px 5px, -ms-linear-gradient(#80bf40, #59862d); background: url('../images/../images/btn_icons_sprite.png?1310770021') no-repeat 5px 5px, linear-gradient(#80bf40, #59862d); background-color: #669933; text-shadow: #4d7326 0 1px 1px; -moz-box-shadow: #748d9d 1px 1px 2px; -webkit-box-shadow: #748d9d 1px 1px 2px; -o-box-shadow: #748d9d 1px 1px 2px; box-shadow: #748d9d 1px 1px 2px; } +.cms .ss-ui-button.ss-ui-action-constructive.ui-state-hover { border-color: #59781d; background: url('../images/../images/btn_icons_sprite.png?1310770021') no-repeat 5px 5px, -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #8cc653), color-stop(100%, #669933)); background: url('../images/../images/btn_icons_sprite.png?1310770021') no-repeat 5px 5px, -webkit-linear-gradient(#8cc653, #669933); background: url('../images/../images/btn_icons_sprite.png?1310770021') no-repeat 5px 5px, -moz-linear-gradient(#8cc653, #669933); background: url('../images/../images/btn_icons_sprite.png?1310770021') no-repeat 5px 5px, -o-linear-gradient(#8cc653, #669933); background: url('../images/../images/btn_icons_sprite.png?1310770021') no-repeat 5px 5px, -ms-linear-gradient(#8cc653, #669933); background: url('../images/../images/btn_icons_sprite.png?1310770021') no-repeat 5px 5px, linear-gradient(#8cc653, #669933); background-color: #4d7326; } +.cms .ss-ui-button.ss-ui-action-destructive { color: red; background-color: #e6e6e6; } +.cms .ss-ui-button.ss-ui-action-destructive.delete { padding-left: 26px; background: url('../images/../images/btn_icons_sprite.png?1310770021') no-repeat 6px -27px, -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #d9d9d9)); background: url('../images/../images/btn_icons_sprite.png?1310770021') no-repeat 6px -27px, -webkit-linear-gradient(#ffffff, #d9d9d9); background: url('../images/../images/btn_icons_sprite.png?1310770021') no-repeat 6px -27px, -moz-linear-gradient(#ffffff, #d9d9d9); background: url('../images/../images/btn_icons_sprite.png?1310770021') no-repeat 6px -27px, -o-linear-gradient(#ffffff, #d9d9d9); background: url('../images/../images/btn_icons_sprite.png?1310770021') no-repeat 6px -27px, -ms-linear-gradient(#ffffff, #d9d9d9); background: url('../images/../images/btn_icons_sprite.png?1310770021') no-repeat 6px -27px, linear-gradient(#ffffff, #d9d9d9); } +.cms .ss-ui-button.ss-ui-action-destructive.delete.ui-state-hover { background: url('../images/../images/btn_icons_sprite.png?1310770021') no-repeat 6px -27px, -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #e6e6e6)); background: url('../images/../images/btn_icons_sprite.png?1310770021') no-repeat 6px -27px, -webkit-linear-gradient(#ffffff, #e6e6e6); background: url('../images/../images/btn_icons_sprite.png?1310770021') no-repeat 6px -27px, -moz-linear-gradient(#ffffff, #e6e6e6); background: url('../images/../images/btn_icons_sprite.png?1310770021') no-repeat 6px -27px, -o-linear-gradient(#ffffff, #e6e6e6); background: url('../images/../images/btn_icons_sprite.png?1310770021') no-repeat 6px -27px, -ms-linear-gradient(#ffffff, #e6e6e6); background: url('../images/../images/btn_icons_sprite.png?1310770021') no-repeat 6px -27px, linear-gradient(#ffffff, #e6e6e6); } +.cms .ss-ui-button.ss-ui-action-minor { background: none; padding: 0; border: 0; color: #393939; text-decoration: underline; -moz-box-shadow: none; -webkit-box-shadow: none; -o-box-shadow: none; box-shadow: none; } +.cms .ss-ui-button.ss-ui-action-minor:hover { text-decoration: none; color: #1f1f1f; } +.cms .ss-ui-button.ss-ui-action-minor:focus, .cms .ss-ui-button.ss-ui-action-minor:active { text-decoration: none; color: #525252; } /** ---------------------------------------------------- Grouped form fields ---------------------------------------------------- */ .fieldgroup .fieldgroup-field { float: left; display: block; width: 184px; padding-right: 8px; } @@ -255,7 +250,7 @@ form.nostyle .middleColumn { margin-left: 0; } .cms .ui-state-hover { cursor: pointer; } .cms .ui-widget input, .cms .ui-widget select, .cms .ui-widget textarea, .cms .ui-widget button { color: #444444; font-size: 12px; font-family: Arial, sans-serif; } -/** This file defines most styles of the CMS: Colors, fonts, backgrounds, alignments, dimensions. Use SCSS variable definitions in screen.css to avoid repeating styles like background colours or padding dimensions. See themes/_default.scss to get started. To avoid this file getting too large and complicated, it is encouraged to create new SCSS files for larger components like the CMS menu or tree (see _tree.scss and _menu.scss). */ +/** This file defines most styles of the CMS: Colors, fonts, backgrounds, alignments, dimensions. Use SCSS variable definitions in screen.css to avoid repeating styles like background colours or padding dimensions. See themes/_default.scss to get started. To avoid this file getting too large and complicated, it is encouraged to create new SCSS files for larger components like the CMS menu or tree (see _tree.scss and _menu.scss). */ /** ---------------------------------------------------- Core Styles. ---------------------------------------------------- */ html, body { width: 100%; height: 100%; overflow: hidden; font-size: 12px; line-height: 16px; font-family: Arial, sans-serif; color: #444444; } html html, html body, html div, html span, html applet, html object, html iframe, html h1, html h2, html h3, html h4, html h5, html h6, html p, html blockquote, html pre, html a, html abbr, html acronym, html address, html big, html cite, html code, html del, html dfn, html em, html img, html ins, html kbd, html q, html s, html samp, html small, html strike, html strong, html sub, html sup, html tt, html var, html b, html u, html i, html center, html dl, html dt, html dd, html ol, html ul, html li, html fieldset, html form, html label, html legend, html table, html caption, html tbody, html tfoot, html thead, html tr, html th, html td, html article, html aside, html canvas, html details, html embed, html figure, html figcaption, html footer, html header, html hgroup, html menu, html nav, html output, html ruby, html section, html summary, html time, html mark, html audio, html video, body html, body body, body div, body span, body applet, body object, body iframe, body h1, body h2, body h3, body h4, body h5, body h6, body p, body blockquote, body pre, body a, body abbr, body acronym, body address, body big, body cite, body code, body del, body dfn, body em, body img, body ins, body kbd, body q, body s, body samp, body small, body strike, body strong, body sub, body sup, body tt, body var, body b, body u, body i, body center, body dl, body dt, body dd, body ol, body ul, body li, body fieldset, body form, body label, body legend, body table, body caption, body tbody, body tfoot, body thead, body tr, body th, body td, body article, body aside, body canvas, body details, body embed, body figure, body figcaption, body footer, body header, body hgroup, body menu, body nav, body output, body ruby, body section, body summary, body time, body mark, body audio, body video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } @@ -273,6 +268,9 @@ html article, html aside, html details, html figcaption, html figure, html foote .cms body .ui-widget { font-family: Arial, sans-serif; font-size: 12px; } .cms strong { font-weight: bold; } +/** -------------------------------------------- Helpers -------------------------------------------- */ +.cms-helper-hide-actions .Actions { display: none; } + /** -------------------------------------------- Typography styles in tabs -------------------------------------------- */ .ui-tabs-panel h2, .ui-tabs-panel h3, .ui-tabs-panel h4, .ui-tabs-panel h5 { font-weight: bold; margin: 16px 0 16px 0; line-height: 16px; } .ui-tabs-panel h2 { font-size: 18px; line-height: 24px; } @@ -288,7 +286,7 @@ html article, html aside, html details, html figcaption, html figure, html foote .cms-preview, .cms-menu, .cms-content, .cms-content-header, .cms-content-tools, .cms-content-fields, .cms-edit-form, .cms-preview, .cms-preview iframe, .cms-preview-controls { *display: inline; } .cms-content-header { background-color: #b0bec7; padding: 8px 8px 6px 16px; height: 32px; z-index: 60; border-bottom: 2px solid #8399a7; -moz-box-shadow: #eceff1 0 8px 16px; -webkit-box-shadow: #eceff1 0 8px 16px; -o-box-shadow: #eceff1 0 8px 16px; box-shadow: #eceff1 0 8px 16px; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ced7dc), color-stop(100%, #92a5b2)); background-image: -webkit-linear-gradient(#ced7dc, #92a5b2); background-image: -moz-linear-gradient(#ced7dc, #92a5b2); background-image: -o-linear-gradient(#ced7dc, #92a5b2); background-image: -ms-linear-gradient(#ced7dc, #92a5b2); background-image: linear-gradient(#ced7dc, #92a5b2); } -.cms-content-header h2 { float: left; padding: 8px 8px 0 0; font-size: 14px; line-height: 24px; font-weight: bold; text-shadow: #ced7dc 1px 1px 0; width: 168px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; o-text-overflow: ellipsis; } +.cms-content-header h2 { float: left; padding: 8px 8px 0 0; font-size: 14px; line-height: 24px; font-weight: bold; text-shadow: #bfcad2 1px 1px 0; width: 176px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; o-text-overflow: ellipsis; } .cms-content-header > div { width: 9999em; overflow: hidden; } .cms-content-header .cms-content-header-tabs { float: left; } @@ -297,7 +295,8 @@ html article, html aside, html details, html figcaption, html figure, html foote .ui-tabs .cms-content-header .ui-state-active, .ui-tabs .cms-content-header .ui-widget-content .ui-state-active, .ui-tabs .cms-content-header .ui-widget-header .ui-state-active { background: #eceff1; } .ui-tabs .cms-content-header .ui-state-active a, .ui-tabs .cms-content-header .ui-widget-content .ui-state-active a, .ui-tabs .cms-content-header .ui-widget-header .ui-state-active a { border-bottom: 2px solid #eceff1; } -.cms-content.loading { background: url(../images/spinner.gif) no-repeat 50% 50%; } +/** ------------------------------------------------------- Loading Interface ------------------------------------------------------- */ +.cms-content.loading, .cms-content form.loading { background: url(../images/spinner.gif) no-repeat 50% 50%; } /** ------------------------------------------------------- Top Left Header and logo area -------------------------------------------------------- */ .cms-header { background-color: #00111d; position: relative; padding: 16px 8px 0 4px; line-height: 24px; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #00111d), color-stop(50%, #003050), color-stop(100%, #00111d)); background-image: -webkit-linear-gradient(#00111d, #003050, #00111d); background-image: -moz-linear-gradient(#00111d, #003050, #00111d); background-image: -o-linear-gradient(#00111d, #003050, #00111d); background-image: -ms-linear-gradient(#00111d, #003050, #00111d); background-image: linear-gradient(#00111d, #003050, #00111d); } @@ -306,7 +305,7 @@ html article, html aside, html details, html figcaption, html figure, html foote .cms-logo { border-bottom: 1px solid #03090c; height: 31px; overflow: hidden; padding: 0 0 0 4px; vertical-align: middle; font-size: 12px; } .cms-logo .version { display: none; } -.cms-logo a { display: inline-block; height: 24px; width: 24px; float: left; margin-right: 8px; background: url('../images/logo_small.png?1313100702') no-repeat; text-indent: -9999em; padding-right: 7px; border-right: 1px solid #19435c; } +.cms-logo a { display: inline-block; height: 24px; width: 24px; float: left; margin-right: 8px; background: url('../images/logo_small.png?1313623609') no-repeat; text-indent: -9999em; padding-right: 7px; border-right: 1px solid #19435c; } .cms-logo span { font-weight: bold; font-size: 14px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; o-text-overflow: ellipsis; } .cms-login-status { border-top: 1px solid #19435c; height: 24px; padding: 7px 4px 0 4px; overflow: hidden; line-height: 16px; font-size: 11px; } @@ -347,22 +346,32 @@ html article, html aside, html details, html figcaption, html figure, html foote .cms-content-toolbar .cms-tree-view-modes * { display: inline-block; } /* -------------------------------------------------------- Content Tools is the sidebar on the left of the main content panel */ -.cms-content-tools { background-color: #dde3e7; width: 200px; border-right: 1px solid #bfcad2; overflow: auto; z-index: 60; } +.cms-content-tools { background-color: #dde3e7; width: 192px; border-right: 1px solid #bfcad2; overflow-y: auto; overflow-x: hidden; z-index: 70; /* buttons now need to line with with reduced input sizes */ } .cms-content-tools .cms-panel-header { padding: 0 4px; margin: 8px 12px 0; line-height: 24px; border-bottom: 1px solid rgba(201, 205, 206, 0.8); -webkit-box-shadow: 0 1px 0 rgba(228, 230, 230, 0.8); -moz-box-shadow: 0 1px 0 rgba(228, 230, 230, 0.8); -o-box-shadow: 0 1px 0 rgba(228, 230, 230, 0.8); box-shadow: 0 1px 0 rgba(228, 230, 230, 0.8); } -.cms-content-tools .cms-panel-content { width: 160px; padding: 8px 16px; } -.cms-content-tools .cms-panel-content form { width: 160px; } +.cms-content-tools .cms-panel-content { width: 168px; padding: 8px 16px; } +.cms-content-tools .cms-content-header { background-color: #748d9d; border-bottom: 2px solid #5c7382; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #b0bec7), color-stop(100%, #748d9d)); background-image: -webkit-linear-gradient(#b0bec7, #748d9d); background-image: -moz-linear-gradient(#b0bec7, #748d9d); background-image: -o-linear-gradient(#b0bec7, #748d9d); background-image: -ms-linear-gradient(#b0bec7, #748d9d); background-image: linear-gradient(#b0bec7, #748d9d); } +.cms-content-tools .cms-content-header h2 { text-shadow: #5c7382 -1px -1px 0; width: 176px; color: white; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; o-text-overflow: ellipsis; } .cms-content-tools h3, .cms-content-tools h4, .cms-content-tools h5 { font-weight: bold; line-height: 16px; } .cms-content-tools h3 { font-size: 13px; } .cms-content-tools .ui-widget-content { background: none; } -.cms-content-tools .field { /* Fields are more compressed in the sidebar compared to the main content editing window so the below alters the internal spacing of the fields so we can move that spacing to between the form fields rather than padding */ /* smaller treedropdown */ /* buttons should line up with inputs */ } +.cms-content-tools .field { /* Fields are more compressed in the sidebar compared to the main content editing window so the below alters the internal spacing of the fields so we can move that spacing to between the form fields rather than padding */ /* smaller treedropdown */ } .cms-content-tools .field label { float: none; width: auto; font-size: 11px; padding: 0 8px 4px 0; } .cms-content-tools .field .middleColumn { margin: 0; } -.cms-content-tools .field input, .cms-content-tools .field select, .cms-content-tools .field textarea { padding: 5px; font-size: 11px; } +.cms-content-tools .field input.text, .cms-content-tools .field select, .cms-content-tools .field textarea { padding: 5px; font-size: 11px; } +.cms-content-tools .field.checkbox { padding: 0 8px 7px; } +.cms-content-tools .field.checkbox input { margin: 2px 0; } .cms-content-tools .field .chzn-container-single .chzn-single { height: 24px; line-height: 24px; font-size: 11px; } .cms-content-tools .field .chzn-container-single .chzn-single div b { background-position: 4px 0; } -.cms-content-tools .field .ss-ui-button { padding: 5px 8px; } +.cms-content-tools .ss-ui-button { padding: 5px 8px; } .cms-content-tools .fieldgroup .fieldgroup-field { width: auto; padding: 0; } .cms-content-tools .fieldgroup .fieldgroup-field .field { margin: 0; padding: 0; } +.cms-content-tools table { margin: 8px -4px; } +.cms-content-tools table thead th { color: #1f1f1f; font-weight: bold; line-height: 16px; font-size: 11px; padding: 4px; } +.cms-content-tools table tr.active { background-color: #338dc1; color: white; } +.cms-content-tools table tr.active td.first-column { -moz-border-radius: 6px 0 0 6px; -webkit-border-radius: 6px 0 0 6px; -o-border-radius: 6px 0 0 6px; -ms-border-radius: 6px 0 0 6px; -khtml-border-radius: 6px 0 0 6px; border-radius: 6px 0 0 6px; } +.cms-content-tools table tr.active td.last-column { -moz-border-radius: 0 6px 6px 0; -webkit-border-radius: 0 6px 6px 0; -o-border-radius: 0 6px 6px 0; -ms-border-radius: 0 6px 6px 0; -khtml-border-radius: 0 6px 6px 0; border-radius: 0 6px 6px 0; } +.cms-content-tools table td { padding: 4px; line-height: 16px; vertical-align: top; } +.cms-content-tools td { border-bottom: 1px solid #ced7dc; padding: 7px 2px; font-size: 11px; } /** CMS Batch actions */ .cms-content-batchactions, .cms-content-constructive-actions { float: right; } diff --git a/admin/javascript/LeftAndMain.Content.js b/admin/javascript/LeftAndMain.Content.js index c3f81aa7f..dd383ec55 100644 --- a/admin/javascript/LeftAndMain.Content.js +++ b/admin/javascript/LeftAndMain.Content.js @@ -67,7 +67,10 @@ */ loadForm: function(url, form, callback, ajaxOptions) { var self = this; - if(!form || !form.length) var form = $('.cms-content-fields form:first'); + if(!form || !form.length) { + var form = $('.cms-content-fields form:first', self); + if(form.length == 0) form = $('.cms-content-fields').parents("form").eq(0); + } // Alert when unsaved changes are present if(form._checkChangeTracker(true) == false) return false; @@ -77,6 +80,7 @@ this.trigger('loadform', {form: form, url: url}); + form.cleanup(); return jQuery.ajax(jQuery.extend({ url: url, // Ensure that form view is loaded (rather than whole "Content" template) @@ -89,8 +93,30 @@ }, ajaxOptions)); }, + /** + * Function: loadForm_responseHandler + * + * Loads the response into the DOM provided. Assumes oldForm is contains + * the form tag to replace. If oldForm isn't present in the DOM, such as + * if this form is only shown after click, append the whole form. + * + * Parameters: + * (String) oldForm - HTML or eval'd javascript + * (String) html - HTML to replace oldForm + * (String) status + * (XMLHTTPRequest) xmlhttp + */ loadForm_responseHandler: function(oldForm, html, status, xmlhttp) { - oldForm.replaceWith(html); // triggers onmatch() on form + + if(oldForm.length > 0) { + oldForm.replaceWith(html); // triggers onmatch() on form + } + else { + $('.cms-content').append(html); + } + + // redraw the layout. + jQuery('.cms-container').entwine('ss').redraw(); // set status message based on response var _statusMessage = (xmlhttp.getResponseHeader('X-Status')) ? xmlhttp.getResponseHeader('X-Status') : xmlhttp.statusText; @@ -194,7 +220,7 @@ Behaviour.apply(); // refreshes ComplexTableField - this.trigger('loadnewpage', {form: form, origData: origData, xmlhttp: xmlhttp}); + this.trigger('reloadeditform', {form: form, origData: origData, xmlhttp: xmlhttp}); } // set status message based on response diff --git a/admin/javascript/LeftAndMain.EditForm.js b/admin/javascript/LeftAndMain.EditForm.js index cb52972be..dccfceab9 100644 --- a/admin/javascript/LeftAndMain.EditForm.js +++ b/admin/javascript/LeftAndMain.EditForm.js @@ -104,6 +104,11 @@ this.layout(); }, + afterLoad: function(data, status, xhr) { + this.replaceWith(data); + this.removeClass('loading'); + }, + /** * Function: _setupChangeTracker */ diff --git a/admin/javascript/LeftAndMain.Preview.js b/admin/javascript/LeftAndMain.Preview.js index 213fcd4ee..c078eb8d6 100644 --- a/admin/javascript/LeftAndMain.Preview.js +++ b/admin/javascript/LeftAndMain.Preview.js @@ -53,7 +53,7 @@ } // Listen to form loads. Limit to CMS forms for the moment - $('.cms-edit-form').bind('loadnewpage', function(e, ui) { + $('.cms-edit-form').bind('reloadeditform', function(e, ui) { updateAfterXhr(); }); diff --git a/admin/javascript/LeftAndMain.js b/admin/javascript/LeftAndMain.js index a392a19ee..5a8d78d3a 100644 --- a/admin/javascript/LeftAndMain.js +++ b/admin/javascript/LeftAndMain.js @@ -47,7 +47,7 @@ * Events: * ajaxsubmit - ... * validate - ... - * loadnewpage - ... + * reloadeditform - ... */ $('.cms-container').entwine({ diff --git a/admin/scss/_forms.scss b/admin/scss/_forms.scss index d7d86d75b..35297c70a 100644 --- a/admin/scss/_forms.scss +++ b/admin/scss/_forms.scss @@ -59,7 +59,13 @@ form.nostyle { } .middleColumn { - margin-left: $grid-horizontal * 22; + margin-left: $grid-horizontal * 23; + } + + span.readonly { + padding-top: $grid-vertical; + line-height: $grid-vertical * 2; + display: block; } input.text, @@ -185,150 +191,144 @@ form.nostyle { } .cms { - .ui-widget { - /* loading */ - input.loading, - input.ui-state-default.loading, .ui-widget-content input.ui-state-default.loading, - .ui-widget-header input.ui-state-default.loading { - padding-left: 24px; - color: lighten($color-text-dark, 20%); - background: $color-button-disabled url(../../images/network-save.gif) no-repeat 4px center; - border-color: darken($color-button-disabled, 10%); - cursor: default; + input.loading, + input.ui-state-default.loading, .ui-widget-content input.ui-state-default.loading, + .ui-widget-header input.ui-state-default.loading { + padding-left: 24px; + color: lighten($color-text-dark, 20%); + background: $color-button-disabled url(../../images/network-save.gif) no-repeat 4px center; + border-color: darken($color-button-disabled, 10%); + cursor: default; + + @include text-shadow(none); + @include box-shadow(none); + } + + .ss-ui-button { + /* all buttons */ + padding: ($grid-vertical - 1) ($grid-horizontal + 4); + font-weight: bold; + text-decoration: none; + margin: 0; + line-height: $grid-vertical * 2; + color: lighten($color-text-dark, 10%); + background-color: $color-button-generic; + border: 1px solid $color-button-generic-border; + @include text-shadow(lighten($color-button-generic, 20%) 0 1px 1px); + + @include box-shadow(lighten($color-base, 10%) 0 1px 2px); + @include background(image-url("../images/btn_icons_sprite.png") no-repeat 999px 999px, + linear-gradient(color-stops( + lighten($color-button-generic, 10%), + darken($color-button-generic, 5%) + )) + ); + &.ui-state-hover { + border: 1px solid darken($color-button-generic-border, 10%); + @include text-shadow(lighten($color-button-generic, 30%) 0 1px 1px); - @include text-shadow(none); - @include box-shadow(none); - - } - - .ss-ui-button { - /* all buttons */ - padding: ($grid-vertical - 1) ($grid-horizontal + 4); - font-weight: bold; - text-decoration: none; - margin: 0; - line-height: $grid-vertical * 2; - color: lighten($color-text-dark, 10%); - background-color: $color-button-generic; - border: 1px solid $color-button-generic-border; - @include text-shadow(lighten($color-button-generic, 20%) 0 1px 1px); - @include box-shadow(lighten($color-base, 10%) 0 1px 2px); + @include box-shadow($color-base 0 1px 2px); @include background(image-url("../images/btn_icons_sprite.png") no-repeat 999px 999px, linear-gradient(color-stops( - lighten($color-button-generic, 10%), + lighten($color-button-generic, 20%), darken($color-button-generic, 5%) )) ); + } + &:focus, + &:active { + border: 1px solid darken($color-button-generic-border, 5%); + @include box-shadow($color-base 0 1px 2px); + @include background(image-url("../images/btn_icons_sprite.png") no-repeat 999px 999px, + linear-gradient(color-stops( + $color-button-generic, + lighten($color-button-generic, 20%) + )) + ); + } + /* constructive */ + &.ss-ui-action-constructive { + padding-left: 24px; + font-weight: bold; + margin-left: $grid-horizontal; + color: $color-text-light; + border-color: $color-button-constructive-border; + @include background(image-url("../images/btn_icons_sprite.png") no-repeat 5px 5px, + linear-gradient(color-stops( + lighten($color-button-constructive, 10%), + darken($color-button-constructive, 5%) + )) + ); + + background-color: $color-button-constructive; + + @include text-shadow(darken($color-button-constructive, 10%) 0 1px 1px); + @include box-shadow(darken($color-base, 20%) 1px 1px 2px); + &.ui-state-hover { - border: 1px solid darken($color-button-generic-border, 10%); - @include text-shadow(lighten($color-button-generic, 30%) 0 1px 1px); - - @include box-shadow($color-base 0 1px 2px); - @include background(image-url("../images/btn_icons_sprite.png") no-repeat 999px 999px, + border-color: darken($color-button-constructive-border, 10%); + @include background(image-url("../images/btn_icons_sprite.png") no-repeat 5px 5px, linear-gradient(color-stops( - lighten($color-button-generic, 20%), + lighten($color-button-constructive, 15%), + $color-button-constructive + )) + ); + + background-color: darken($color-button-constructive, 10%); + } + } + + /* destructive */ + &.ss-ui-action-destructive { + color: $color-button-destructive; + background-color: $color-button-generic; + + &.delete { + padding-left: 26px; + @include background(image-url("../images/btn_icons_sprite.png") no-repeat 6px -27px, + linear-gradient(color-stops( + lighten($color-button-generic, 10%), darken($color-button-generic, 5%) )) ); - } - - &:focus, - &:active { - border: 1px solid darken($color-button-generic-border, 5%); - - @include box-shadow($color-base 0 1px 2px); - @include background(image-url("../images/btn_icons_sprite.png") no-repeat 999px 999px, - linear-gradient(color-stops( - $color-button-generic, - lighten($color-button-generic, 20%) - )) - ); - } - - &.ss-ui-button-small { - padding: ($grid-vertical/2) ($grid-horizontal/2); - } - - &.ui-state-highlight { - background-color: $color-button-highlight; - border: 1px solid $color-button-highlight-border; - } - - /* constructive */ - &.ss-ui-action-constructive { - padding-left: 24px; - font-weight: bold; - margin-left: $grid-horizontal; - color: $color-text-light; - border-color: $color-button-constructive-border; - @include background(image-url("../images/btn_icons_sprite.png") no-repeat 5px 5px, - linear-gradient(color-stops( - lighten($color-button-constructive, 10%), - darken($color-button-constructive, 5%) - )) - ); - - background-color: $color-button-constructive; - - @include text-shadow(darken($color-button-constructive, 10%) 0 1px 1px); - @include box-shadow(darken($color-base, 20%) 1px 1px 2px); - &.ui-state-hover { - border-color: darken($color-button-constructive-border, 10%); - @include background(image-url("../images/btn_icons_sprite.png") no-repeat 5px 5px, - linear-gradient(color-stops( - lighten($color-button-constructive, 15%), - $color-button-constructive - )) - ); - - background-color: darken($color-button-constructive, 10%); - } - } - - /* destructive */ - &.ss-ui-action-destructive { - color: $color-button-destructive; - background-color: $color-button-generic; - - &.delete { - padding-left: 26px; @include background(image-url("../images/btn_icons_sprite.png") no-repeat 6px -27px, linear-gradient(color-stops( - lighten($color-button-generic, 10%), - darken($color-button-generic, 5%) + lighten($color-button-generic, 20%), + $color-button-generic )) ); - &.ui-state-hover { - @include background(image-url("../images/btn_icons_sprite.png") no-repeat 6px -27px, - linear-gradient(color-stops( - lighten($color-button-generic, 20%), - $color-button-generic - )) - ); - } } } - - &.ss-ui-action-minor { - background: none; - padding: 0; - border: 0; - color: lighten($color-text-dark, 10%); - text-decoration: underline; - - @include box-shadow(none); - - &:hover { - text-decoration: none; - color: $color-text-dark; - } - &:focus, - &:active { - text-decoration: none; - color: lighten($color-text-dark, 20%); - } + } + + &.ss-ui-button-small { + padding: ($grid-vertical/2) ($grid-horizontal/2); + } + + &.ui-state-highlight { + background-color: $color-button-highlight; + border: 1px solid $color-button-highlight-border; + } + + &.ss-ui-action-minor { + background: none; + padding: 0; + border: 0; + color: lighten($color-text-dark, 10%); + text-decoration: underline; + + @include box-shadow(none); + + &:hover { + text-decoration: none; + color: $color-text-dark; + } + &:focus, + &:active { + text-decoration: none; + color: lighten($color-text-dark, 20%); } } } diff --git a/admin/scss/_style.scss b/admin/scss/_style.scss index b2fe2e126..e9f12e6af 100644 --- a/admin/scss/_style.scss +++ b/admin/scss/_style.scss @@ -1,11 +1,14 @@ /** - * This file defines most styles of the CMS: Colors, fonts, backgrounds, alignments, dimensions. + * This file defines most styles of the CMS: Colors, fonts, backgrounds, + * alignments, dimensions. * - * Use SCSS variable definitions in screen.css to avoid repeating styles like background colours - * or padding dimensions. See themes/_default.scss to get started. + * Use SCSS variable definitions in screen.css to avoid repeating styles + * like background colours or padding dimensions. See themes/_default.scss + * to get started. * - * To avoid this file getting too large and complicated, it is encouraged to create new SCSS files - * for larger components like the CMS menu or tree (see _tree.scss and _menu.scss). + * To avoid this file getting too large and complicated, it is encouraged to + * create new SCSS files for larger components like the CMS menu or tree + * (see _tree.scss and _menu.scss). */ /** ---------------------------------------------------- @@ -46,6 +49,16 @@ html,body { } } +/** -------------------------------------------- + * Helpers + * -------------------------------------------- */ + +.cms-helper-hide-actions { + .Actions { + display: none; + } +} + /** -------------------------------------------- * Typography styles in tabs * -------------------------------------------- */ @@ -120,8 +133,8 @@ html,body { font-size: $font-base-size + 2; line-height: $grid-horizontal * 3; font-weight: bold; - text-shadow: darken($color-widget-bg, 10%) 1px 1px 0; - width: $grid-horizontal * 21 /* 24 - (padding on each side + margin) */; + text-shadow: darken($color-widget-bg, 15%) 1px 1px 0; + width: $grid-horizontal * 22 /* 24 - (padding on each side + margin) */; @include hide-text-overflow(); } @@ -169,8 +182,12 @@ html,body { } } +/** ------------------------------------------------------- + * Loading Interface + * ------------------------------------------------------- */ .cms-content { - &.loading { + &.loading, + form.loading { background: url(../images/spinner.gif) no-repeat 50% 50%; } } @@ -414,10 +431,11 @@ html,body { */ .cms-content-tools { background-color: darken($color-widget-bg, 5%); - width: $grid-horizontal * 25; + width: $grid-horizontal * 24; border-right: 1px solid darken($color-widget-bg, 15%); - overflow: auto; - z-index: 60; + overflow-y: auto; + overflow-x: hidden; + z-index: 70; .cms-panel-header { padding: 0 $grid-horizontal / 2; @@ -429,11 +447,25 @@ html,body { } .cms-panel-content { - width: ($grid-horizontal * 20); + width: ($grid-horizontal * 21); padding: $grid-vertical $grid-horizontal * 2; + } + + .cms-content-header { + background-color: darken($color-widget-bg, 40%); - form { - width: $grid-horizontal * 20; + border-bottom: 2px solid darken($color-widget-bg, 50%); + + @include background-image( + linear-gradient(darken($color-widget-bg, 20%), darken($color-widget-bg, 40%)) + ); + + h2 { + text-shadow: darken($color-widget-bg, 50%) -1px -1px 0; + width: $grid-horizontal * 22 /* 24 - (padding on each side + margin) */; + color: lighten($color-widget-bg, 60%); + + @include hide-text-overflow(); } } @@ -467,13 +499,21 @@ html,body { margin: 0; } - input, + input.text, select, textarea { padding: 5px; font-size: 11px; } + &.checkbox { + padding: 0 8px 7px; + + input { + margin: 2px 0; + } + } + /* smaller treedropdown */ .chzn-container-single .chzn-single { height: 24px; @@ -484,13 +524,13 @@ html,body { background-position: 4px 0; } } - - /* buttons should line up with inputs */ - .ss-ui-button { - padding: 5px $grid-horizontal; - } } - + + /* buttons now need to line with with reduced input sizes */ + .ss-ui-button { + padding: 5px $grid-horizontal; + } + .fieldgroup { .fieldgroup-field { width: auto; @@ -502,6 +542,45 @@ html,body { } } } + + table { + margin: 8px -4px; + thead { + th { + color: $color-text-dark; + font-weight: bold; + line-height: 16px; + font-size: 11px; + padding: 4px; + } + } + + tr { + &.active { + background-color: $color-menu-button; + color: $color-text-light; + + td.first-column { + @include border-radius(6px 0 0 6px); + } + td.last-column { + @include border-radius(0 6px 6px 0); + } + } + } + + td { + padding: 4px; + line-height: 16px; + vertical-align: top; + } + } + + td { + border-bottom: 1px solid darken($color-widget-bg, 10%); + padding: $grid-vertical - 1 2px; + font-size: 11px; + } } /** diff --git a/admin/templates/Includes/LeftAndMain_EditForm.ss b/admin/templates/Includes/LeftAndMain_EditForm.ss index 1b710afc5..82602abaa 100644 --- a/admin/templates/Includes/LeftAndMain_EditForm.ss +++ b/admin/templates/Includes/LeftAndMain_EditForm.ss @@ -4,7 +4,7 @@
    -

    My Page Title

    +

    My Page Title

    <% if Fields.hasTabset %> <% with Fields.fieldByName('Root') %>
    diff --git a/forms/Form.php b/forms/Form.php index 56b4e9906..3a86fe8d3 100644 --- a/forms/Form.php +++ b/forms/Form.php @@ -133,7 +133,7 @@ class Form extends RequestHandler { public $jsValidationIncluded = false; /** - * @var $extraClasses array Extra CSS-classes for the formfield-container + * @var array $extraClasses List of additional CSS classes for the form tag. */ protected $extraClasses = array(); @@ -230,7 +230,7 @@ class Form extends RequestHandler { // Populate the form $this->loadDataFrom($vars, true); - + // Protection against CSRF attacks $token = $this->getSecurityToken(); if(!$token->checkRequest($request)) { @@ -1270,28 +1270,38 @@ class Form extends RequestHandler { /** * Compiles all CSS-classes. * - * @return String CSS-classnames, separated by a space + * @return string */ - function extraClass() { - return implode($this->extraClasses, " "); + function extraClass() { + return implode(array_unique($this->extraClasses), ' '); } /** - * Add a CSS-class to the form-container. - * - * @param $class String + * Add a CSS-class to the form-container. If needed, multiple classes can + * be added by delimiting a string with spaces. + * + * @param string $class A string containing a classname or several class + * names delimited by a single space. */ function addExtraClass($class) { - $this->extraClasses[$class] = $class; + $classes = explode(' ', $class); + + foreach($classes as $class) { + $value = trim($class); + + $this->extraClasses[] = $value; + } } /** - * Remove a CSS-class from the form-container. - * - * @param $class String + * Remove a CSS-class from the form-container. Multiple class names can + * be passed through as a space delimited string + * + * @param string $class */ function removeExtraClass($class) { - if(array_key_exists($class, $this->extraClasses)) unset($this->extraClasses[$class]); + $classes = explode(' ', $class); + $this->extraClasses = array_diff($this->extraClasses, $classes); } function debug() { From 4448325ad370ea87273194fe1f20ece25cb80ac0 Mon Sep 17 00:00:00 2001 From: Will Rossiter Date: Fri, 26 Aug 2011 14:04:48 +1200 Subject: [PATCH 06/11] BUGFIX: convert new lines to break tags in unescape mode without reverting the entire behaviour of dontEscape --- forms/FormField.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/forms/FormField.php b/forms/FormField.php index b179ae864..1753617b9 100644 --- a/forms/FormField.php +++ b/forms/FormField.php @@ -387,7 +387,7 @@ class FormField extends RequestHandler { * Our base FormField class just returns a span containing the value. This should be overridden! */ function Field() { - if($this->value) $value = $this->dontEscape ? ($this->reserveNL ? Convert::raw2xml($this->value) : $this->value) : Convert::raw2xml($this->value); + if($this->value) $value = $this->dontEscape ? ($this->reserveNL ? nl2br($this->value) : $this->value) : Convert::raw2xml($this->value); else $value = '(' . _t('FormField.NONE', 'none') . ')'; $attributes = array( From 4c6ddb142d7a4a3299367453a76a688d1c80b5d8 Mon Sep 17 00:00:00 2001 From: Will Rossiter Date: Fri, 26 Aug 2011 14:05:54 +1200 Subject: [PATCH 07/11] ENHANCEMENT: added isLatestVersion() method for checking whether a record is the latest version of this ID --- model/Versioned.php | 20 +++++++++++++++++++- 1 file changed, 19 insertions(+), 1 deletion(-) diff --git a/model/Versioned.php b/model/Versioned.php index 2084a0411..3f741be46 100644 --- a/model/Versioned.php +++ b/model/Versioned.php @@ -952,6 +952,22 @@ class Versioned extends DataExtension { return new $className($record); } + + /** + * Returns whether the current record is the latest one. + * + * @todo Performance - could do this directly via SQL. + * + * @see get_latest_version() + * @see latestPublished + * + * @return bool + */ + function isLatestVersion() { + $version = self::get_latest_version($this->owner->class, $this->owner->ID); + + return ($version->Version == $this->owner->Version); + } /** * Return the equivalent of a DataObject::get() call, querying the latest @@ -1055,8 +1071,10 @@ class Versioned extends DataExtension { /** * Represents a single version of a record. + * * @package sapphire * @subpackage model + * * @see Versioned */ class Versioned_Version extends ViewableData { @@ -1092,4 +1110,4 @@ class Versioned_Version extends ViewableData { function Published() { return !empty( $this->record['WasPublished'] ); } -} +} \ No newline at end of file From a1b6a8aff2795e8f0cef5ad156233adb86da74a5 Mon Sep 17 00:00:00 2001 From: Will Rossiter Date: Fri, 26 Aug 2011 14:09:25 +1200 Subject: [PATCH 08/11] ENHANCEMENT: stripped out typography styles from the cms into its own file. Included styling for ins and del --- admin/css/screen.css | 22 +++++++----- admin/scss/_style.scss | 44 +++++------------------ admin/scss/_typography.scss | 72 +++++++++++++++++++++++++++++++++++++ admin/scss/screen.scss | 1 + 4 files changed, 95 insertions(+), 44 deletions(-) create mode 100644 admin/scss/_typography.scss diff --git a/admin/css/screen.css b/admin/css/screen.css index f7c6b6d38..77809933b 100644 --- a/admin/css/screen.css +++ b/admin/css/screen.css @@ -52,6 +52,17 @@ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, .icon.icon-16.icon-help { background-position: 0 -80px; } /** ----------------------------- CMS Components ------------------------------ */ +/** File: typography.scss Contains the basic typography related styles for the admin interface. */ +.cms h2, .cms h3, .cms h4, .cms h5 { font-weight: bold; margin: 16px 0 16px 0; line-height: 16px; } +.cms h2 { font-size: 18px; line-height: 24px; } +.cms h3 { font-size: 16px; } +.cms h4 { font-size: 14px; } +.cms h5 { font-size: 12px; } +.cms p { line-height: 16px; margin-bottom: 16px; } +.cms ins { background-color: #DFD; border: 1px solid #aaffaa; padding: 2px; text-decoration: none; } +.cms del { background-color: #FDD; padding: 2px; color: #ff4444; border: 1px solid #ffaaaa; } +.cms code { font-family: 'Bitstream Vera Sans Mono','Courier', monospace; } + /** 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 .jstree ul { display: block; margin: 0; padding: 0; background: none; list-style-type: none; } .cms .jstree 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; } @@ -271,14 +282,6 @@ html article, html aside, html details, html figcaption, html figure, html foote /** -------------------------------------------- Helpers -------------------------------------------- */ .cms-helper-hide-actions .Actions { display: none; } -/** -------------------------------------------- Typography styles in tabs -------------------------------------------- */ -.ui-tabs-panel h2, .ui-tabs-panel h3, .ui-tabs-panel h4, .ui-tabs-panel h5 { font-weight: bold; margin: 16px 0 16px 0; line-height: 16px; } -.ui-tabs-panel h2 { font-size: 18px; line-height: 24px; } -.ui-tabs-panel h3 { font-size: 16px; } -.ui-tabs-panel h4 { font-size: 14px; } -.ui-tabs-panel h5 { font-size: 12px; } -.ui-tabs-panel p { line-height: 16px; margin-bottom: 16px; } - /** -------------------------------------------- Panels Styles -------------------------------------------- */ .cms-container { height: 100%; background: #f0f3f4 url(../images/textures/bg_cms_main_content.png) repeat top left; } @@ -286,7 +289,7 @@ html article, html aside, html details, html figcaption, html figure, html foote .cms-preview, .cms-menu, .cms-content, .cms-content-header, .cms-content-tools, .cms-content-fields, .cms-edit-form, .cms-preview, .cms-preview iframe, .cms-preview-controls { *display: inline; } .cms-content-header { background-color: #b0bec7; padding: 8px 8px 6px 16px; height: 32px; z-index: 60; border-bottom: 2px solid #8399a7; -moz-box-shadow: #eceff1 0 8px 16px; -webkit-box-shadow: #eceff1 0 8px 16px; -o-box-shadow: #eceff1 0 8px 16px; box-shadow: #eceff1 0 8px 16px; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ced7dc), color-stop(100%, #92a5b2)); background-image: -webkit-linear-gradient(#ced7dc, #92a5b2); background-image: -moz-linear-gradient(#ced7dc, #92a5b2); background-image: -o-linear-gradient(#ced7dc, #92a5b2); background-image: -ms-linear-gradient(#ced7dc, #92a5b2); background-image: linear-gradient(#ced7dc, #92a5b2); } -.cms-content-header h2 { float: left; padding: 8px 8px 0 0; font-size: 14px; line-height: 24px; font-weight: bold; text-shadow: #bfcad2 1px 1px 0; width: 176px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; o-text-overflow: ellipsis; } +.cms-content-header h2 { float: left; padding: 8px 8px 0 0; font-size: 14px; line-height: 24px; font-weight: bold; text-shadow: #bfcad2 1px 1px 0; width: 176px; margin: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; o-text-overflow: ellipsis; } .cms-content-header > div { width: 9999em; overflow: hidden; } .cms-content-header .cms-content-header-tabs { float: left; } @@ -325,6 +328,7 @@ html article, html aside, html details, html figcaption, html figure, html foote /** -------------------------------------------- Messages -------------------------------------------- */ .message { margin: 0 0 8px 0; padding: 7px 7px; font-weight: bold; border: 1px black solid; } .message.notice { background-color: #ffbe66; border-color: #ff9300; } +.message.notice a { color: #999; } .message.warning { background-color: #ffbe66; border-color: #ff9300; } .message.error { background-color: #ffbe66; border-color: #ff9300; } diff --git a/admin/scss/_style.scss b/admin/scss/_style.scss index e9f12e6af..7485cbd15 100644 --- a/admin/scss/_style.scss +++ b/admin/scss/_style.scss @@ -58,39 +58,6 @@ html,body { display: none; } } - -/** -------------------------------------------- - * Typography styles in tabs - * -------------------------------------------- */ -.ui-tabs-panel { - h2, h3, h4, h5 { - font-weight: bold; - margin: $grid-vertical * 2 0 $grid-vertical * 2 0; - line-height: $grid-vertical * 2; - } - - h2 { - font-size: $font-base-size + 6; - line-height: $grid-vertical * 3; - } - - h3 { - font-size: $font-base-size + 4; - } - - h4 { - font-size: $font-base-size + 2; - } - - h5 { - font-size: $font-base-size; - } - - p { - line-height: $grid-vertical * 2; - margin-bottom: $grid-vertical * 2; - } -} /** -------------------------------------------- * Panels Styles @@ -135,7 +102,7 @@ html,body { font-weight: bold; text-shadow: darken($color-widget-bg, 15%) 1px 1px 0; width: $grid-horizontal * 22 /* 24 - (padding on each side + margin) */; - + margin: 0; @include hide-text-overflow(); } @@ -338,7 +305,6 @@ html,body { .message { margin: 0 0 $grid_vertical 0; - // minus one for the borders padding: $grid_vertical - 1 $grid_horizontal - 1; font-weight: bold; @@ -347,6 +313,10 @@ html,body { &.notice { background-color: lighten($color-notice, 20%); border-color: $color-notice; + + a { + color: #999; + } } &.warning { @@ -357,6 +327,10 @@ html,body { background-color: lighten($color-error, 20%); border-color: $color-error; } + + p { + margin: 0; + } } /** -------------------------------------------- diff --git a/admin/scss/_typography.scss b/admin/scss/_typography.scss new file mode 100644 index 000000000..d9686c8ef --- /dev/null +++ b/admin/scss/_typography.scss @@ -0,0 +1,72 @@ +/** + * File: typography.scss + * + * Contains the basic typography related styles for the admin interface. + */ + +.cms { + h2, h3, h4, h5 { + font-weight: bold; + margin: $grid-vertical * 2 0 $grid-vertical * 2 0; + line-height: $grid-vertical * 2; + } + + h2 { + font-size: $font-base-size + 6; + line-height: $grid-vertical * 3; + } + + h3 { + font-size: $font-base-size + 4; + } + + h4 { + font-size: $font-base-size + 2; + } + + h5 { + font-size: $font-base-size; + } + + p { + line-height: $grid-vertical * 2; + margin-bottom: $grid-vertical * 2; + } + + ins { + background-color: #DFD; + padding: 2px; + text-decoration: none; + } + + del { + background-color: #FDD; + padding: 2px; + color: darken(#FDD, 30%); + } + + code { + font-family: 'Bitstream Vera Sans Mono','Courier', monospace; + } + + pre { + + } + + table { + + thead { + + } + } + + ol { + + } + + ul { + + } + +} + diff --git a/admin/scss/screen.scss b/admin/scss/screen.scss index dca4fc3cf..73185a62b 100644 --- a/admin/scss/screen.scss +++ b/admin/scss/screen.scss @@ -40,6 +40,7 @@ /** ----------------------------- * CMS Components * ------------------------------ */ +@import "typography.scss"; @import "tree.scss"; @import "menu.scss"; @import "forms.scss"; From 7418d28bf3140d8d45732f30fc91254b5c4d52fd Mon Sep 17 00:00:00 2001 From: Will Rossiter Date: Tue, 30 Aug 2011 12:41:50 +1200 Subject: [PATCH 09/11] MINOR: removed trailing newline. --- forms/LiteralField.php | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/forms/LiteralField.php b/forms/LiteralField.php index 9185483df..294a4a617 100644 --- a/forms/LiteralField.php +++ b/forms/LiteralField.php @@ -37,6 +37,7 @@ class LiteralField extends DatalessField { /** * Sets the content of this field to a new value + * * @param string $content */ function setContent($content) { @@ -62,6 +63,4 @@ class LiteralField extends DatalessField { $clone->setReadonly(true); return $clone; } -} - -?> \ No newline at end of file +} \ No newline at end of file From 2c17cb2f80dc671f60e3d5055c63eada19cd844f Mon Sep 17 00:00:00 2001 From: Will Rossiter Date: Tue, 30 Aug 2011 12:42:08 +1200 Subject: [PATCH 10/11] MINOR: spelling fix. --- forms/FieldSet.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/forms/FieldSet.php b/forms/FieldSet.php index 0f686b14c..4269a6ab4 100644 --- a/forms/FieldSet.php +++ b/forms/FieldSet.php @@ -287,7 +287,7 @@ class FieldSet extends DataObjectSet { * Returns a named field. * You can use dot syntax to get fields from child composite fields * - * @todo Implement similiarly to dataFieldByName() to support nested sets - or merge with dataFields() + * @todo Implement similarly to dataFieldByName() to support nested sets - or merge with dataFields() */ public function fieldByName($name) { if(strpos($name,'.') !== false) list($name, $remainder) = explode('.',$name,2); From c862b2423b038dad20ce0d509fb0cabb3187d739 Mon Sep 17 00:00:00 2001 From: Ingo Schommer Date: Mon, 19 Sep 2011 21:01:17 +0200 Subject: [PATCH 11/11] MINOR Fixed merge errors from 'history-panel' branch --- admin/css/screen.css | 28 +++++++++++++++--------- admin/javascript/LeftAndMain.Content.js | 1 - admin/javascript/LeftAndMain.EditForm.js | 7 +----- admin/javascript/LeftAndMain.Tree.js | 2 +- admin/javascript/LeftAndMain.js | 2 +- docs/en/topics/javascript.md | 2 +- 6 files changed, 22 insertions(+), 20 deletions(-) diff --git a/admin/css/screen.css b/admin/css/screen.css index 77809933b..d5d131af7 100644 --- a/admin/css/screen.css +++ b/admin/css/screen.css @@ -59,8 +59,8 @@ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, .cms h4 { font-size: 14px; } .cms h5 { font-size: 12px; } .cms p { line-height: 16px; margin-bottom: 16px; } -.cms ins { background-color: #DFD; border: 1px solid #aaffaa; padding: 2px; text-decoration: none; } -.cms del { background-color: #FDD; padding: 2px; color: #ff4444; border: 1px solid #ffaaaa; } +.cms ins { background-color: #DFD; padding: 2px; text-decoration: none; } +.cms del { background-color: #FDD; padding: 2px; color: #ff4444; } .cms code { font-family: 'Bitstream Vera Sans Mono','Courier', monospace; } /** 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. */ @@ -216,15 +216,22 @@ form.nostyle .middleColumn { margin-left: 0; } .field input.hasDatepicker { width: 50%; max-width: 96px; } /** ---------------------------------------------------- Buttons ---------------------------------------------------- */ +.Actions { margin-right: 80px; min-height: 30px; } +.Actions > div { overflow: auto; } + +.cms-preview-toggle-link { display: block; float: right; font-size: 11px; } + .cms input.loading, .cms input.ui-state-default.loading, .cms .ui-widget-content input.ui-state-default.loading, .cms .ui-widget-header input.ui-state-default.loading { padding-left: 24px; color: #525252; background: #eeeded url(../../images/network-save.gif) no-repeat 4px center; border-color: #d5d3d3; cursor: default; text-shadow: none; -moz-box-shadow: none; -webkit-box-shadow: none; -o-box-shadow: none; box-shadow: none; } -.cms .ss-ui-button { /* all buttons */ padding: 7px 12px; font-weight: bold; text-decoration: none; margin: 0; line-height: 16px; color: #393939; background-color: #e6e6e6; border: 1px solid #c0c0c2; text-shadow: white 0 1px 1px; -moz-box-shadow: #ced7dc 0 1px 2px; -webkit-box-shadow: #ced7dc 0 1px 2px; -o-box-shadow: #ced7dc 0 1px 2px; box-shadow: #ced7dc 0 1px 2px; background: url('../images/../images/btn_icons_sprite.png?1310770021') no-repeat 999px 999px, -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #d9d9d9)); background: url('../images/../images/btn_icons_sprite.png?1310770021') no-repeat 999px 999px, -webkit-linear-gradient(#ffffff, #d9d9d9); background: url('../images/../images/btn_icons_sprite.png?1310770021') no-repeat 999px 999px, -moz-linear-gradient(#ffffff, #d9d9d9); background: url('../images/../images/btn_icons_sprite.png?1310770021') no-repeat 999px 999px, -o-linear-gradient(#ffffff, #d9d9d9); background: url('../images/../images/btn_icons_sprite.png?1310770021') no-repeat 999px 999px, -ms-linear-gradient(#ffffff, #d9d9d9); background: url('../images/../images/btn_icons_sprite.png?1310770021') no-repeat 999px 999px, linear-gradient(#ffffff, #d9d9d9); /* constructive */ /* destructive */ } -.cms .ss-ui-button.ui-state-hover { border: 1px solid #a6a6a9; text-shadow: white 0 1px 1px; -moz-box-shadow: #b0bec7 0 1px 2px; -webkit-box-shadow: #b0bec7 0 1px 2px; -o-box-shadow: #b0bec7 0 1px 2px; box-shadow: #b0bec7 0 1px 2px; background: url('../images/../images/btn_icons_sprite.png?1310770021') no-repeat 999px 999px, -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #d9d9d9)); background: url('../images/../images/btn_icons_sprite.png?1310770021') no-repeat 999px 999px, -webkit-linear-gradient(#ffffff, #d9d9d9); background: url('../images/../images/btn_icons_sprite.png?1310770021') no-repeat 999px 999px, -moz-linear-gradient(#ffffff, #d9d9d9); background: url('../images/../images/btn_icons_sprite.png?1310770021') no-repeat 999px 999px, -o-linear-gradient(#ffffff, #d9d9d9); background: url('../images/../images/btn_icons_sprite.png?1310770021') no-repeat 999px 999px, -ms-linear-gradient(#ffffff, #d9d9d9); background: url('../images/../images/btn_icons_sprite.png?1310770021') no-repeat 999px 999px, linear-gradient(#ffffff, #d9d9d9); } -.cms .ss-ui-button:focus, .cms .ss-ui-button:active { border: 1px solid #b3b3b5; -moz-box-shadow: #b0bec7 0 1px 2px; -webkit-box-shadow: #b0bec7 0 1px 2px; -o-box-shadow: #b0bec7 0 1px 2px; box-shadow: #b0bec7 0 1px 2px; background: url('../images/../images/btn_icons_sprite.png?1310770021') no-repeat 999px 999px, -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #e6e6e6), color-stop(100%, #ffffff)); background: url('../images/../images/btn_icons_sprite.png?1310770021') no-repeat 999px 999px, -webkit-linear-gradient(#e6e6e6, #ffffff); background: url('../images/../images/btn_icons_sprite.png?1310770021') no-repeat 999px 999px, -moz-linear-gradient(#e6e6e6, #ffffff); background: url('../images/../images/btn_icons_sprite.png?1310770021') no-repeat 999px 999px, -o-linear-gradient(#e6e6e6, #ffffff); background: url('../images/../images/btn_icons_sprite.png?1310770021') no-repeat 999px 999px, -ms-linear-gradient(#e6e6e6, #ffffff); background: url('../images/../images/btn_icons_sprite.png?1310770021') no-repeat 999px 999px, linear-gradient(#e6e6e6, #ffffff); } -.cms .ss-ui-button.ss-ui-action-constructive { padding-left: 24px; font-weight: bold; margin-left: 8px; color: white; border-color: #78a127; background: url('../images/../images/btn_icons_sprite.png?1310770021') no-repeat 5px 5px, -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #80bf40), color-stop(100%, #59862d)); background: url('../images/../images/btn_icons_sprite.png?1310770021') no-repeat 5px 5px, -webkit-linear-gradient(#80bf40, #59862d); background: url('../images/../images/btn_icons_sprite.png?1310770021') no-repeat 5px 5px, -moz-linear-gradient(#80bf40, #59862d); background: url('../images/../images/btn_icons_sprite.png?1310770021') no-repeat 5px 5px, -o-linear-gradient(#80bf40, #59862d); background: url('../images/../images/btn_icons_sprite.png?1310770021') no-repeat 5px 5px, -ms-linear-gradient(#80bf40, #59862d); background: url('../images/../images/btn_icons_sprite.png?1310770021') no-repeat 5px 5px, linear-gradient(#80bf40, #59862d); background-color: #669933; text-shadow: #4d7326 0 1px 1px; -moz-box-shadow: #748d9d 1px 1px 2px; -webkit-box-shadow: #748d9d 1px 1px 2px; -o-box-shadow: #748d9d 1px 1px 2px; box-shadow: #748d9d 1px 1px 2px; } -.cms .ss-ui-button.ss-ui-action-constructive.ui-state-hover { border-color: #59781d; background: url('../images/../images/btn_icons_sprite.png?1310770021') no-repeat 5px 5px, -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #8cc653), color-stop(100%, #669933)); background: url('../images/../images/btn_icons_sprite.png?1310770021') no-repeat 5px 5px, -webkit-linear-gradient(#8cc653, #669933); background: url('../images/../images/btn_icons_sprite.png?1310770021') no-repeat 5px 5px, -moz-linear-gradient(#8cc653, #669933); background: url('../images/../images/btn_icons_sprite.png?1310770021') no-repeat 5px 5px, -o-linear-gradient(#8cc653, #669933); background: url('../images/../images/btn_icons_sprite.png?1310770021') no-repeat 5px 5px, -ms-linear-gradient(#8cc653, #669933); background: url('../images/../images/btn_icons_sprite.png?1310770021') no-repeat 5px 5px, linear-gradient(#8cc653, #669933); background-color: #4d7326; } +.cms .ss-ui-button { /* all buttons */ padding: 7px 12px; font-weight: bold; text-decoration: none; margin: 0; line-height: 16px; color: #393939; background-color: #e6e6e6; border: 1px solid #c0c0c2; text-shadow: white 0 1px 1px; -moz-box-shadow: #ced7dc 0 1px 2px; -webkit-box-shadow: #ced7dc 0 1px 2px; -o-box-shadow: #ced7dc 0 1px 2px; box-shadow: #ced7dc 0 1px 2px; background: url('../images/../images/btn_icons_sprite.png?1316376123') no-repeat 999px 999px, -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #d9d9d9)); background: url('../images/../images/btn_icons_sprite.png?1316376123') no-repeat 999px 999px, -webkit-linear-gradient(#ffffff, #d9d9d9); background: url('../images/../images/btn_icons_sprite.png?1316376123') no-repeat 999px 999px, -moz-linear-gradient(#ffffff, #d9d9d9); background: url('../images/../images/btn_icons_sprite.png?1316376123') no-repeat 999px 999px, -o-linear-gradient(#ffffff, #d9d9d9); background: url('../images/../images/btn_icons_sprite.png?1316376123') no-repeat 999px 999px, -ms-linear-gradient(#ffffff, #d9d9d9); background: url('../images/../images/btn_icons_sprite.png?1316376123') no-repeat 999px 999px, linear-gradient(#ffffff, #d9d9d9); /* constructive */ /* destructive */ } +.cms .ss-ui-button.ui-state-hover { border: 1px solid #a6a6a9; text-shadow: white 0 1px 1px; -moz-box-shadow: #b0bec7 0 1px 2px; -webkit-box-shadow: #b0bec7 0 1px 2px; -o-box-shadow: #b0bec7 0 1px 2px; box-shadow: #b0bec7 0 1px 2px; background: url('../images/../images/btn_icons_sprite.png?1316376123') no-repeat 999px 999px, -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #d9d9d9)); background: url('../images/../images/btn_icons_sprite.png?1316376123') no-repeat 999px 999px, -webkit-linear-gradient(#ffffff, #d9d9d9); background: url('../images/../images/btn_icons_sprite.png?1316376123') no-repeat 999px 999px, -moz-linear-gradient(#ffffff, #d9d9d9); background: url('../images/../images/btn_icons_sprite.png?1316376123') no-repeat 999px 999px, -o-linear-gradient(#ffffff, #d9d9d9); background: url('../images/../images/btn_icons_sprite.png?1316376123') no-repeat 999px 999px, -ms-linear-gradient(#ffffff, #d9d9d9); background: url('../images/../images/btn_icons_sprite.png?1316376123') no-repeat 999px 999px, linear-gradient(#ffffff, #d9d9d9); } +.cms .ss-ui-button:focus, .cms .ss-ui-button:active { border: 1px solid #b3b3b5; -moz-box-shadow: #b0bec7 0 1px 2px; -webkit-box-shadow: #b0bec7 0 1px 2px; -o-box-shadow: #b0bec7 0 1px 2px; box-shadow: #b0bec7 0 1px 2px; background: url('../images/../images/btn_icons_sprite.png?1316376123') no-repeat 999px 999px, -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #e6e6e6), color-stop(100%, #ffffff)); background: url('../images/../images/btn_icons_sprite.png?1316376123') no-repeat 999px 999px, -webkit-linear-gradient(#e6e6e6, #ffffff); background: url('../images/../images/btn_icons_sprite.png?1316376123') no-repeat 999px 999px, -moz-linear-gradient(#e6e6e6, #ffffff); background: url('../images/../images/btn_icons_sprite.png?1316376123') no-repeat 999px 999px, -o-linear-gradient(#e6e6e6, #ffffff); background: url('../images/../images/btn_icons_sprite.png?1316376123') no-repeat 999px 999px, -ms-linear-gradient(#e6e6e6, #ffffff); background: url('../images/../images/btn_icons_sprite.png?1316376123') no-repeat 999px 999px, linear-gradient(#e6e6e6, #ffffff); } +.cms .ss-ui-button.ss-ui-action-constructive { padding-left: 24px; font-weight: bold; margin-left: 8px; color: white; border-color: #78a127; background: url('../images/../images/btn_icons_sprite.png?1316376123') no-repeat 5px 5px, -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #80bf40), color-stop(100%, #59862d)); background: url('../images/../images/btn_icons_sprite.png?1316376123') no-repeat 5px 5px, -webkit-linear-gradient(#80bf40, #59862d); background: url('../images/../images/btn_icons_sprite.png?1316376123') no-repeat 5px 5px, -moz-linear-gradient(#80bf40, #59862d); background: url('../images/../images/btn_icons_sprite.png?1316376123') no-repeat 5px 5px, -o-linear-gradient(#80bf40, #59862d); background: url('../images/../images/btn_icons_sprite.png?1316376123') no-repeat 5px 5px, -ms-linear-gradient(#80bf40, #59862d); background: url('../images/../images/btn_icons_sprite.png?1316376123') no-repeat 5px 5px, linear-gradient(#80bf40, #59862d); background-color: #669933; text-shadow: #4d7326 0 1px 1px; -moz-box-shadow: #748d9d 1px 1px 2px; -webkit-box-shadow: #748d9d 1px 1px 2px; -o-box-shadow: #748d9d 1px 1px 2px; box-shadow: #748d9d 1px 1px 2px; } +.cms .ss-ui-button.ss-ui-action-constructive.ui-state-hover { border-color: #59781d; background: url('../images/../images/btn_icons_sprite.png?1316376123') no-repeat 5px 5px, -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #8cc653), color-stop(100%, #669933)); background: url('../images/../images/btn_icons_sprite.png?1316376123') no-repeat 5px 5px, -webkit-linear-gradient(#8cc653, #669933); background: url('../images/../images/btn_icons_sprite.png?1316376123') no-repeat 5px 5px, -moz-linear-gradient(#8cc653, #669933); background: url('../images/../images/btn_icons_sprite.png?1316376123') no-repeat 5px 5px, -o-linear-gradient(#8cc653, #669933); background: url('../images/../images/btn_icons_sprite.png?1316376123') no-repeat 5px 5px, -ms-linear-gradient(#8cc653, #669933); background: url('../images/../images/btn_icons_sprite.png?1316376123') no-repeat 5px 5px, linear-gradient(#8cc653, #669933); background-color: #4d7326; } .cms .ss-ui-button.ss-ui-action-destructive { color: red; background-color: #e6e6e6; } -.cms .ss-ui-button.ss-ui-action-destructive.delete { padding-left: 26px; background: url('../images/../images/btn_icons_sprite.png?1310770021') no-repeat 6px -27px, -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #d9d9d9)); background: url('../images/../images/btn_icons_sprite.png?1310770021') no-repeat 6px -27px, -webkit-linear-gradient(#ffffff, #d9d9d9); background: url('../images/../images/btn_icons_sprite.png?1310770021') no-repeat 6px -27px, -moz-linear-gradient(#ffffff, #d9d9d9); background: url('../images/../images/btn_icons_sprite.png?1310770021') no-repeat 6px -27px, -o-linear-gradient(#ffffff, #d9d9d9); background: url('../images/../images/btn_icons_sprite.png?1310770021') no-repeat 6px -27px, -ms-linear-gradient(#ffffff, #d9d9d9); background: url('../images/../images/btn_icons_sprite.png?1310770021') no-repeat 6px -27px, linear-gradient(#ffffff, #d9d9d9); } -.cms .ss-ui-button.ss-ui-action-destructive.delete.ui-state-hover { background: url('../images/../images/btn_icons_sprite.png?1310770021') no-repeat 6px -27px, -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #e6e6e6)); background: url('../images/../images/btn_icons_sprite.png?1310770021') no-repeat 6px -27px, -webkit-linear-gradient(#ffffff, #e6e6e6); background: url('../images/../images/btn_icons_sprite.png?1310770021') no-repeat 6px -27px, -moz-linear-gradient(#ffffff, #e6e6e6); background: url('../images/../images/btn_icons_sprite.png?1310770021') no-repeat 6px -27px, -o-linear-gradient(#ffffff, #e6e6e6); background: url('../images/../images/btn_icons_sprite.png?1310770021') no-repeat 6px -27px, -ms-linear-gradient(#ffffff, #e6e6e6); background: url('../images/../images/btn_icons_sprite.png?1310770021') no-repeat 6px -27px, linear-gradient(#ffffff, #e6e6e6); } +.cms .ss-ui-button.ss-ui-action-destructive.delete { padding-left: 26px; background: url('../images/../images/btn_icons_sprite.png?1316376123') no-repeat 6px -27px, -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #d9d9d9)); background: url('../images/../images/btn_icons_sprite.png?1316376123') no-repeat 6px -27px, -webkit-linear-gradient(#ffffff, #d9d9d9); background: url('../images/../images/btn_icons_sprite.png?1316376123') no-repeat 6px -27px, -moz-linear-gradient(#ffffff, #d9d9d9); background: url('../images/../images/btn_icons_sprite.png?1316376123') no-repeat 6px -27px, -o-linear-gradient(#ffffff, #d9d9d9); background: url('../images/../images/btn_icons_sprite.png?1316376123') no-repeat 6px -27px, -ms-linear-gradient(#ffffff, #d9d9d9); background: url('../images/../images/btn_icons_sprite.png?1316376123') no-repeat 6px -27px, linear-gradient(#ffffff, #d9d9d9); } +.cms .ss-ui-button.ss-ui-action-destructive.delete.ui-state-hover { background: url('../images/../images/btn_icons_sprite.png?1316376123') no-repeat 6px -27px, -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #e6e6e6)); background: url('../images/../images/btn_icons_sprite.png?1316376123') no-repeat 6px -27px, -webkit-linear-gradient(#ffffff, #e6e6e6); background: url('../images/../images/btn_icons_sprite.png?1316376123') no-repeat 6px -27px, -moz-linear-gradient(#ffffff, #e6e6e6); background: url('../images/../images/btn_icons_sprite.png?1316376123') no-repeat 6px -27px, -o-linear-gradient(#ffffff, #e6e6e6); background: url('../images/../images/btn_icons_sprite.png?1316376123') no-repeat 6px -27px, -ms-linear-gradient(#ffffff, #e6e6e6); background: url('../images/../images/btn_icons_sprite.png?1316376123') no-repeat 6px -27px, linear-gradient(#ffffff, #e6e6e6); } +.cms .ss-ui-button.ss-ui-button-small { padding: 4px 4px; } +.cms .ss-ui-button.ui-state-highlight { background-color: #e6e6e6; border: 1px solid #708284; } .cms .ss-ui-button.ss-ui-action-minor { background: none; padding: 0; border: 0; color: #393939; text-decoration: underline; -moz-box-shadow: none; -webkit-box-shadow: none; -o-box-shadow: none; box-shadow: none; } .cms .ss-ui-button.ss-ui-action-minor:hover { text-decoration: none; color: #1f1f1f; } .cms .ss-ui-button.ss-ui-action-minor:focus, .cms .ss-ui-button.ss-ui-action-minor:active { text-decoration: none; color: #525252; } @@ -308,7 +315,7 @@ html article, html aside, html details, html figcaption, html figure, html foote .cms-logo { border-bottom: 1px solid #03090c; height: 31px; overflow: hidden; padding: 0 0 0 4px; vertical-align: middle; font-size: 12px; } .cms-logo .version { display: none; } -.cms-logo a { display: inline-block; height: 24px; width: 24px; float: left; margin-right: 8px; background: url('../images/logo_small.png?1313623609') no-repeat; text-indent: -9999em; padding-right: 7px; border-right: 1px solid #19435c; } +.cms-logo a { display: inline-block; height: 24px; width: 24px; float: left; margin-right: 8px; background: url('../images/logo_small.png?1316445742') no-repeat; text-indent: -9999em; padding-right: 7px; border-right: 1px solid #19435c; } .cms-logo span { font-weight: bold; font-size: 14px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; o-text-overflow: ellipsis; } .cms-login-status { border-top: 1px solid #19435c; height: 24px; padding: 7px 4px 0 4px; overflow: hidden; line-height: 16px; font-size: 11px; } @@ -331,6 +338,7 @@ html article, html aside, html details, html figcaption, html figure, html foote .message.notice a { color: #999; } .message.warning { background-color: #ffbe66; border-color: #ff9300; } .message.error { background-color: #ffbe66; border-color: #ff9300; } +.message p { margin: 0; } /** -------------------------------------------- ModelAdmin -------------------------------------------- */ .ModelAdmin .ResultAssemblyBlock { display: none; } diff --git a/admin/javascript/LeftAndMain.Content.js b/admin/javascript/LeftAndMain.Content.js index dd383ec55..f531559f5 100644 --- a/admin/javascript/LeftAndMain.Content.js +++ b/admin/javascript/LeftAndMain.Content.js @@ -80,7 +80,6 @@ this.trigger('loadform', {form: form, url: url}); - form.cleanup(); return jQuery.ajax(jQuery.extend({ url: url, // Ensure that form view is loaded (rather than whole "Content" template) diff --git a/admin/javascript/LeftAndMain.EditForm.js b/admin/javascript/LeftAndMain.EditForm.js index dccfceab9..18198f4d5 100644 --- a/admin/javascript/LeftAndMain.EditForm.js +++ b/admin/javascript/LeftAndMain.EditForm.js @@ -103,12 +103,7 @@ this.layout(); }, - - afterLoad: function(data, status, xhr) { - this.replaceWith(data); - this.removeClass('loading'); - }, - + /** * Function: _setupChangeTracker */ diff --git a/admin/javascript/LeftAndMain.Tree.js b/admin/javascript/LeftAndMain.Tree.js index dae05e6af..f99102cb3 100644 --- a/admin/javascript/LeftAndMain.Tree.js +++ b/admin/javascript/LeftAndMain.Tree.js @@ -145,7 +145,7 @@ }); }); - $('.cms-edit-form').bind('loadnewpage', function(e, data) { + $('.cms-edit-form').bind('reloadeditform', function(e, data) { self._onLoadNewPage(e, data); }); }, diff --git a/admin/javascript/LeftAndMain.js b/admin/javascript/LeftAndMain.js index 5a8d78d3a..9076bccb6 100644 --- a/admin/javascript/LeftAndMain.js +++ b/admin/javascript/LeftAndMain.js @@ -76,7 +76,7 @@ // Also triggers redraw through handleStateChange() $(window).resize(function() {self.redraw()}); $('.cms-panel').live('toggle', function() {self.redraw();}); - $('.cms-edit-form').live('loadnewpage', function() {self.redraw()}); + $('.cms-edit-form').live('reloadeditform', function() {self.redraw()}); // Remove loading screen $('.ss-loading-screen').hide(); diff --git a/docs/en/topics/javascript.md b/docs/en/topics/javascript.md index db08c3f74..2429bc0ca 100644 --- a/docs/en/topics/javascript.md +++ b/docs/en/topics/javascript.md @@ -519,7 +519,7 @@ Example: jQuery.entwine *
      *
    • ajaxsubmit
      • *
    • validate
      • - *
    • loadnewpage
      • + *
    • reloadeditform
      • *
    * * @class Main LeftAndMain interface with some control panel and an edit form.