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

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

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

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

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({

252
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,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%);
}
}
}

121
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;
}
.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;
}
}
/**

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">

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