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

ENHANCEMENT: implemented CMSPageHistoryController with comparsion view, single version view into new CMSMain interface

Browse Source
This commit is contained in:
Will Rossiter 2011-08-22 16:44:41 +12:00 committed by Ingo Schommer
parent 7560e468ed
commit 2036354d8d
10 changed files with 341 additions and 203 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
admin/code/LeftAndMain.php
View File

@ -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;
}
}

65
admin/css/screen.css
View File

@ -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; }
@ -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; }

30
admin/javascript/LeftAndMain.Content.js
View File

@ -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) {
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

5
admin/javascript/LeftAndMain.EditForm.js
View File

@ -104,6 +104,11 @@
this.layout();
},
afterLoad: function(data, status, xhr) {
this.replaceWith(data);
this.removeClass('loading');
},
/**
* Function: _setupChangeTracker
*/

2
admin/javascript/LeftAndMain.Preview.js
View File

@ -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();
});

2
admin/javascript/LeftAndMain.js
View File

@ -47,7 +47,7 @@
* Events:
* ajaxsubmit - ...
* validate - ...
* loadnewpage - ...
* reloadeditform - ...
*/
$('.cms-container').entwine({

34
admin/scss/_forms.scss
View File

@ -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,8 +191,6 @@ 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 {
@ -198,7 +202,6 @@ form.nostyle {
@include text-shadow(none);
@include box-shadow(none);
}
.ss-ui-button {
@ -212,6 +215,7 @@ form.nostyle {
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(
@ -219,7 +223,6 @@ form.nostyle {
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);
@ -232,7 +235,6 @@ form.nostyle {
))
);
}
&:focus,
&:active {
border: 1px solid darken($color-button-generic-border, 5%);
@ -245,16 +247,6 @@ form.nostyle {
))
);
}
&.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;
@ -311,6 +303,15 @@ form.nostyle {
}
}
&.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;
@ -331,7 +332,6 @@ form.nostyle {
}
}
}
}
}
/** ----------------------------------------------------

113
admin/scss/_style.scss
View File

@ -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;
}
form {
width: $grid-horizontal * 20;
.cms-content-header {
background-color: darken($color-widget-bg, 40%);
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,12 +524,12 @@ html,body {
background-position: 4px 0;
}
}
}
/* buttons should line up with inputs */
/* buttons now need to line with with reduced input sizes */
.ss-ui-button {
padding: 5px $grid-horizontal;
}
}
.fieldgroup {
.fieldgroup-field {
@ -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;
}
}
/**

2
admin/templates/Includes/LeftAndMain_EditForm.ss
View File

@ -4,7 +4,7 @@
<div class="cms-content-header north">
<div>
<h2> My Page Title</h2>
<h2>My Page Title</h2>
<% if Fields.hasTabset %>
<% with Fields.fieldByName('Root') %>
<div class="cms-content-header-tabs">

28
forms/Form.php
View File

@ -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();
@ -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, " ");
return implode(array_unique($this->extraClasses), ' ');
}
/**
* Add a CSS-class to the form-container.
* Add a CSS-class to the form-container. If needed, multiple classes can
* be added by delimiting a string with spaces.
*
* @param $class String
* @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.
* Remove a CSS-class from the form-container. Multiple class names can
* be passed through as a space delimited string
*
* @param $class 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() {