Merge branch 'master' into integration

Conflicts:
	admin/css/screen.css
	admin/scss/_style.scss

admin/code/LeftAndMain.php

@@ -233,13 +233,13 @@ class LeftAndMain extends Controller {
 				THIRDPARTY_DIR . '/jquery/jquery.js',
 				THIRDPARTY_DIR . '/jquery-livequery/jquery.livequery.js',
 				SAPPHIRE_DIR . '/javascript/jquery-ondemand/jquery.ondemand.js',
+				SAPPHIRE_DIR . '/admin/javascript/lib.js',
 				THIRDPARTY_DIR . '/jquery-ui/jquery-ui.js',
 				THIRDPARTY_DIR . '/json-js/json2.js',
 				THIRDPARTY_DIR . '/jquery-entwine/dist/jquery.entwine-dist.js',
 				THIRDPARTY_DIR . '/jquery-cookie/jquery.cookie.js',
 				THIRDPARTY_DIR . '/jquery-query/jquery.query.js',
 				SAPPHIRE_ADMIN_DIR . '/thirdparty/jquery-notice/jquery.notice.js',
-				THIRDPARTY_DIR . '/jquery-metadata/jquery.metadata.js',
 				SAPPHIRE_ADMIN_DIR . '/thirdparty/jsizes/lib/jquery.sizes.js',
 				SAPPHIRE_ADMIN_DIR . '/thirdparty/jlayout/lib/jlayout.border.js',
 				SAPPHIRE_ADMIN_DIR . '/thirdparty/jlayout/lib/jquery.jlayout.js',
@@ -864,15 +864,23 @@ class LeftAndMain extends Controller {
 				// add default actions if none are defined
 				if(!$actions || !$actions->Count()) {
 					if($record->hasMethod('canDelete') && $record->canDelete()) {
-						$actions->push($deleteAction = new FormAction('delete',_t('ModelAdmin.DELETE','Delete')));
-						$deleteAction->addExtraClass('ss-ui-action-destructive');
+						$actions->push(
+							FormAction::create('delete',_t('ModelAdmin.DELETE','Delete'))
+								->addExtraClass('ss-ui-action-destructive')
+						);
 					}
 					if($record->hasMethod('canEdit') && $record->canEdit()) {
-						$actions->push($saveAction = new FormAction('save',_t('CMSMain.SAVE','Save')));
-						$saveAction->addExtraClass('ss-ui-action-constructive');
+						$actions->push(
+							FormAction::create('save',_t('CMSMain.SAVE','Save'))
+								->addExtraClass('ss-ui-action-constructive')->setAttribute('data-icon', 'accept')
+						);
 					}
 				}
 			}
+
+			// Use <button> to allow full jQuery UI styling
+			$actionsFlattened = $actions->dataFields();
+			if($actionsFlattened) foreach($actionsFlattened as $action) $action->setUseButtonTag(true);
 			
 			$form = new Form($this, "EditForm", $fields, $actions);
 			$form->addExtraClass('cms-edit-form');
@@ -965,10 +973,10 @@ class LeftAndMain extends Controller {
 				new HiddenField('ParentID')
 			),
 			new FieldList(
-				$addAction = new FormAction('doAdd', _t('AssetAdmin_left.ss.GO','Go'))
+				FormAction::create('doAdd', _t('AssetAdmin_left.ss.GO','Go'))
+					->addExtraClass('ss-ui-action-constructive')->setAttribute('data-icon', 'accept')
 			)
 		);
-		$addAction->addExtraClass('ss-ui-action-constructive');
 		$form->addExtraClass('add-form');
 		
 		return $form;

admin/code/ModelAdmin.php

@@ -411,7 +411,7 @@ class ModelAdmin_CollectionController extends Controller {
 		$form->setFormMethod('get');
 		$form->setHTMLID("Form_SearchForm_" . $this->modelClass);
 		$form->disableSecurityToken();
-		$clearAction->useButtonTag = true;
+		$clearAction->setUseButtonTag(true);
 		$clearAction->addExtraClass('ss-ui-action-minor');
 
 		return $form;
@@ -434,10 +434,12 @@ class ModelAdmin_CollectionController extends Controller {
 
 		$form = new Form($this, "CreateForm",
 						new FieldList(),
-						new FieldList($createButton = new FormAction('add', $buttonLabel)),
+						new FieldList(
+							$createButton = FormAction::create('add', $buttonLabel)
+								->addExtraClass('ss-ui-action-constructive')->setAttribute('data-icon', 'accept')
+						),
 						$validator = new RequiredFields()
 				);
-		$createButton->addExtraClass('ss-ui-action-constructive');
 		$createButton->dontEscape = true;
 		$validator->setJavascriptValidationHandler('none');
 		$form->setHTMLID("Form_CreateForm_" . $this->modelClass);
@@ -839,7 +841,8 @@ class ModelAdmin_CollectionController extends Controller {
 			$validator->setJavascriptValidationHandler('none');
 			
 			$actions = new FieldList (
-				new FormAction("doCreate", _t('ModelAdmin.ADDBUTTON', "Add"))
+				FormAction::create("doCreate", _t('ModelAdmin.ADDBUTTON', "Add"))
+					->addExtraClass('ss-ui-action-constructive')->setAttribute('data-icon', 'accept')
 			);
 
 			$form = new Form($this, "AddForm", $fields, $actions, $validator);
@@ -951,8 +954,10 @@ class ModelAdmin_RecordController extends Controller {
 		$actions = $this->currentRecord->getCMSActions();
 		if($this->currentRecord->canEdit(Member::currentUser())){
 			if(!$actions->fieldByName('action_doSave') && !$actions->fieldByName('action_save')) {
-				$actions->push($saveAction = new FormAction("doSave", _t('ModelAdmin.SAVE', "Save")));
-				$saveAction->addExtraClass('ss-ui-action-constructive');
+				$actions->push(
+					FormAction::create("doSave", _t('ModelAdmin.SAVE', "Save"))
+						->addExtraClass('ss-ui-action-constructive')->setAttribute('data-icon', 'accept')
+				);
 			}
 		}else{
 			$fields = $fields->makeReadonly();
@@ -960,9 +965,11 @@ class ModelAdmin_RecordController extends Controller {
 		
 		if($this->currentRecord->canDelete(Member::currentUser())) {
 			if(!$actions->fieldByName('action_doDelete')) {
-				$actions->unshift($deleteAction = new FormAction('doDelete', _t('ModelAdmin.DELETE', 'Delete')));
+				$actions->unshift(
+					FormAction::create('doDelete', _t('ModelAdmin.DELETE', 'Delete'))
+						->addExtraClass('ss-ui-action-destructive')->setAttribute('data-icon', 'delete')
+				);
 			}
-			$deleteAction->addExtraClass('delete ss-ui-action-destructive');
 		}
 
 		$form = new Form($this, "EditForm", $fields, $actions, $validator);

admin/css/ie7.css

@@ -4,7 +4,7 @@ html { overflow: hidden; }
 
 .ss-ui-button.cms-page-add-button { float: left; }
 
-.ss-ui-button.cms-page-add-button.ui-state-hover, .cms .ss-ui-button.cms-page-add-button:hover { background: #80bf40 url("../images/btn_icons-saaa1989272.png") 5px -49px no-repeat; }
+.ss-ui-button.cms-page-add-button.ui-state-hover, .cms .ss-ui-button.cms-page-add-button:hover { background: #80bf40 url("../images/btn-icon-saaa1989272.png") 5px -49px no-repeat; }
 
 .cms-tree-view-modes div { float: left; }
 .cms-tree-view-modes span { float: left; padding-top: 5px; }

admin/css/ie8.css

@@ -5,6 +5,6 @@
 
 .cms-content-toolbar { border-bottom: 1px solid #c9cdce; }
 
-.ss-ui-button.cms-page-add-button.ui-state-hover, .cms .ss-ui-button.cms-page-add-button:hover { background: #80bf40 url("../images/btn_icons-saaa1989272.png") 5px -49px no-repeat; }
+.ss-ui-button.cms-page-add-button.ui-state-hover, .cms .ss-ui-button.cms-page-add-button:hover { background: #80bf40 url("../images/btn-icon-saaa1989272.png") 5px -49px no-repeat; }
 
 .ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default { background-image: none; }

admin/css/screen.css

@@ -30,9 +30,44 @@ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav,
 /** ---------------------------------------------------- Clear the properties of sub form fields.   Often needed for nested form fields and  ----------------------------------------------------- */
 /** ---------------------------------------------------- Double tone borders  http://daverupert.com/2011/06/two-tone-borders-with-css3/ ----------------------------------------------------- */
 /** ----------------------------- Sprite images ----------------------------- */
-/** Helper SCSS file for generating sprites for the interface.  S */
+/** Helper SCSS file for generating sprites for the interface. */
+.btn-icon-sprite, .ui-state-default .btn-icon-accept, .ui-state-default .btn-icon-accept_disabled, .ui-state-default .btn-icon-add, .ui-state-default .btn-icon-add_disabled, .ui-state-default .btn-icon-addpage, .ui-state-default .btn-icon-addpage_disabled, .ui-state-default .btn-icon-arrow-circle-135-left, .ui-state-default .btn-icon-back, .ui-state-default .btn-icon-back_disabled, .ui-state-default .btn-icon-cross-circle, .ui-state-default .btn-icon-cross-circle_disabled, .ui-state-default .btn-icon-decline, .ui-state-default .btn-icon-decline_disabled, .ui-state-default .btn-icon-drive-upload, .ui-state-default .btn-icon-drive-upload_disabled, .ui-state-default .btn-icon-magnifier, .ui-state-default .btn-icon-minus-circle, .ui-state-default .btn-icon-minus-circle_disabled, .ui-state-default .btn-icon-navigation, .ui-state-default .btn-icon-navigation_disabled, .ui-state-default .btn-icon-network-cloud, .ui-state-default .btn-icon-network-cloud_disabled, .ui-state-default .btn-icon-pencil, .ui-state-default .btn-icon-pencil_disabled, .ui-state-default .btn-icon-plug-disconnect-prohibition, .ui-state-default .btn-icon-plug-disconnect-prohibition_disabled, .ui-state-default .btn-icon-preview, .ui-state-default .btn-icon-preview_disabled, .ui-state-default .btn-icon-settings, .ui-state-default .btn-icon-settings_disabled, .ui-state-default .btn-icon-unpublish, .ui-state-default .btn-icon-unpublish_disabled { background: url('../images/btn-icon-s4a0551bc3f.png') no-repeat; }
+
+.ui-state-default .btn-icon-accept { background-position: 0 0; }
+.ui-state-default .btn-icon-accept_disabled { background-position: 0 -17px; }
+.ui-state-default .btn-icon-add { background-position: 0 -34px; }
+.ui-state-default .btn-icon-add_disabled { background-position: 0 -52px; }
+.ui-state-default .btn-icon-addpage { background-position: 0 -70px; }
+.ui-state-default .btn-icon-addpage_disabled { background-position: 0 -88px; }
+.ui-state-default .btn-icon-arrow-circle-135-left { background-position: 0 -104px; }
+.ui-state-default .btn-icon-back { background-position: 0 -120px; }
+.ui-state-default .btn-icon-back_disabled { background-position: 0 -136px; }
+.ui-state-default .btn-icon-cross-circle { background-position: 0 -152px; }
+.ui-state-default .btn-icon-cross-circle_disabled { background-position: 0 -168px; }
+.ui-state-default .btn-icon-decline { background-position: 0 -184px; }
+.ui-state-default .btn-icon-decline_disabled { background-position: 0 -201px; }
+.ui-state-default .btn-icon-drive-upload { background-position: 0 -218px; }
+.ui-state-default .btn-icon-drive-upload_disabled { background-position: 0 -234px; }
+.ui-state-default .btn-icon-magnifier { background-position: 0 -250px; }
+.ui-state-default .btn-icon-minus-circle { background-position: 0 -266px; }
+.ui-state-default .btn-icon-minus-circle_disabled { background-position: 0 -282px; }
+.ui-state-default .btn-icon-navigation { background-position: 0 -298px; }
+.ui-state-default .btn-icon-navigation_disabled { background-position: 0 -314px; }
+.ui-state-default .btn-icon-network-cloud { background-position: 0 -330px; }
+.ui-state-default .btn-icon-network-cloud_disabled { background-position: 0 -346px; }
+.ui-state-default .btn-icon-pencil { background-position: 0 -362px; }
+.ui-state-default .btn-icon-pencil_disabled { background-position: 0 -378px; }
+.ui-state-default .btn-icon-plug-disconnect-prohibition { background-position: 0 -394px; }
+.ui-state-default .btn-icon-plug-disconnect-prohibition_disabled { background-position: 0 -410px; }
+.ui-state-default .btn-icon-preview { background-position: 0 -426px; }
+.ui-state-default .btn-icon-preview_disabled { background-position: 0 -443px; }
+.ui-state-default .btn-icon-settings { background-position: 0 -460px; }
+.ui-state-default .btn-icon-settings_disabled { background-position: 0 -476px; }
+.ui-state-default .btn-icon-unpublish { background-position: 0 -492px; }
+.ui-state-default .btn-icon-unpublish_disabled { background-position: 0 -510px; }
+
 .icon { text-indent: -9999px; border: none; outline: none; }
-.icon.icon-24 { width: 24px; height: 24px; background: url('../images/menu_icons/24x24-s0cb1fe1c77.png'); }
+.icon.icon-24 { width: 24px; height: 24px; background: url('../images/menu-icons/24x24-s546fcae8fd.png'); }
 .icon.icon-24.icon-assetadmin { background-position: 0 -192px; }
 .icon.icon-24.icon-cmsmain { background-position: 0 -168px; }
 .icon.icon-24.icon-cmspagescontroller { background-position: 0 -144px; }
@@ -41,7 +76,7 @@ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav,
 .icon.icon-24.icon-reportadmin { background-position: 0 -216px; }
 .icon.icon-24.icon-commentadmin { background-position: 0 0; }
 .icon.icon-24.icon-help { background-position: 0 -120px; }
-.icon.icon-16 { width: 16px; height: 16px; background: url('../images/menu_icons/16x16-s2ac647f5ef.png'); }
+.icon.icon-16 { width: 16px; height: 16px; background: url('../images/menu-icons/16x16-s170d9d69bb.png'); }
 .icon.icon-16.icon-assetadmin { background-position: 0 -128px; }
 .icon.icon-16.icon-cmsmain { background-position: 0 -112px; }
 .icon.icon-16.icon-cmspagescontroller { background-position: 0 -96px; }
@@ -68,20 +103,19 @@ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav,
 .cms .ui-tabs .ui-tabs-nav li { top: 0; }
 .cms .ui-tabs .ui-tabs-nav li a { padding: 0 15px; }
 .cms .ui-tabs .ui-tabs-nav.ui-state-active { border-color: gray; }
-.cms .ui-tabs .ui-tabs-panel { background: transparent; padding: 16px 40px 16px 25px; }
+.cms .ui-tabs .ui-tabs-panel { background: transparent; padding: 0; }
 .cms .ui-widget-content, .cms .ui-widget { color: #444444; font-size: 12px; font-family: Arial, sans-serif; border: 0; }
 .cms .ui-widget-header { background-color: #b0bec7; padding: 8px 8px 6px 8px; border-bottom: 2px solid #8399a7; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #dde3e7), color-stop(100%, #92a5b2)); background-image: -webkit-linear-gradient(#dde3e7, #92a5b2); background-image: -moz-linear-gradient(#dde3e7, #92a5b2); background-image: -o-linear-gradient(#dde3e7, #92a5b2); background-image: -ms-linear-gradient(#dde3e7, #92a5b2); background-image: linear-gradient(#dde3e7, #92a5b2); border-bottom: 3px solid #5c7382; padding: 8px; -moz-border-radius: 0; -webkit-border-radius: 0; -o-border-radius: 0; -ms-border-radius: 0; -khtml-border-radius: 0; border-radius: 0; }
 .cms .ui-widget-header .ui-dialog-title { padding: 6px 0; text-shadow: #ced7dc 1px 1px 0; }
 .cms .ui-widget-header a.ui-dialog-titlebar-close { position: absolute; top: -8px; right: -15px; width: 30px; height: 30px; z-index: 100000; }
 .cms .ui-widget-header a.ui-state-hover { border-color: transparent; background: transparent; }
-.cms .ui-widget-header a.ui-state-hover .ui-icon-closethick { background: url('../images/sprites_32x32-s98eda4974b.png') 0 0 no-repeat; }
-.cms .ui-widget-header .ui-icon-closethick { background: url('../images/sprites_32x32-s98eda4974b.png') 0 -40px no-repeat; width: 30px; height: 30px; }
+.cms .ui-widget-header a.ui-state-hover .ui-icon-closethick { background: url('../images/sprites-32x32-sa4e142f7f0.png') 0 -252px no-repeat; }
+.cms .ui-widget-header .ui-icon-closethick { background: url('../images/sprites-32x32-sa4e142f7f0.png') 0 -292px no-repeat; width: 30px; height: 30px; }
 .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 common styles for form elements used throughout the CMS interface. It is an addition to the base styles defined in sapphire/css/Form.css.  @package sapphire @subpackage admin */
 /** ---------------------------------------------------- Basic form fields ---------------------------------------------------- */
-/* CMS action button sprite mix-in (used for all the buttons in the bottom row */
 form.nostyle .field { padding: 0; border: 0; }
 form.nostyle label { float: none; width: auto; }
 form.nostyle .middleColumn { margin-left: 0; }
@@ -120,43 +154,22 @@ form.small .field input.text, form.small .field textarea, form.small .field sele
 .field input.hasDatepicker { width: 50%; max-width: 96px; }
 
 /** ---------------------------------------------------- Buttons ---------------------------------------------------- */
-.Actions { min-height: 30px; }
-.Actions > div { overflow: auto; }
-
-.cms-preview-toggle-link { display: block; float: right; font-size: 12px; text-decoration: none; }
-.cms-preview-toggle-link span.ui-button-text { padding: 0; }
-
+.cms .Actions > *, .cms .cms-actions-row > * { display: block; float: left; margin-right: 8px; }
+.cms .Actions > *:last-child, .cms .cms-actions-row > *:last-child { margin-right: 0; }
+.cms .Actions { min-height: 30px; }
+.cms .Actions > div { overflow: auto; }
 .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: 5px 12px; font-weight: bold; text-decoration: none; margin: 0; line-height: 16px; color: #393939; background-color: #e6e6e6; border: 1px solid #c0c0c2; border-bottom: 1px solid #a6a6a9; cursor: pointer; text-shadow: white 0 1px 1px; background: #e6e6e6; background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #d9d9d9)); background: -webkit-linear-gradient(#ffffff, #d9d9d9); background: -moz-linear-gradient(#ffffff, #d9d9d9); background: -o-linear-gradient(#ffffff, #d9d9d9); background: -ms-linear-gradient(#ffffff, #d9d9d9); background: linear-gradient(#ffffff, #d9d9d9); /* constructive */ /* destructive */ /* generic action buttons */ }
+.cms .ss-ui-button { font-weight: bold; text-decoration: none; line-height: 16px; color: #393939; border: 1px solid #c0c0c2; border-bottom: 1px solid #a6a6a9; cursor: pointer; text-shadow: white 0 1px 1px; background-color: #e6e6e6; background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #d9d9d9)); background: -webkit-linear-gradient(#ffffff, #d9d9d9); background: -moz-linear-gradient(#ffffff, #d9d9d9); background: -o-linear-gradient(#ffffff, #d9d9d9); background: -ms-linear-gradient(#ffffff, #d9d9d9); background: linear-gradient(#ffffff, #d9d9d9); /* constructive */ /* destructive */ }
 .cms .ss-ui-button.buttonset { margin: 0 -1px; }
-.cms .ss-ui-button.ui-state-hover, .cms .ss-ui-button:hover { background: white; background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #e6e6e6)); background: -webkit-linear-gradient(#ffffff, #e6e6e6); background: -moz-linear-gradient(#ffffff, #e6e6e6); background: -o-linear-gradient(#ffffff, #e6e6e6); background: -ms-linear-gradient(#ffffff, #e6e6e6); background: linear-gradient(#ffffff, #e6e6e6); -moz-box-shadow: 0 0 5px #b3b3b3; -webkit-box-shadow: 0 0 5px #b3b3b3; -o-box-shadow: 0 0 5px #b3b3b3; box-shadow: 0 0 5px #b3b3b3; }
-.cms .ss-ui-button:active, .cms .ss-ui-button:focus, .cms .ss-ui-button.ui-state-active, .cms .ss-ui-button.ui-state-focus { border: 1px solid #b3b3b3; background: white no-repeat; background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #e6e6e6)); background: -webkit-linear-gradient(#ffffff, #e6e6e6); background: -moz-linear-gradient(#ffffff, #e6e6e6); background: -o-linear-gradient(#ffffff, #e6e6e6); background: -ms-linear-gradient(#ffffff, #e6e6e6); background: linear-gradient(#ffffff, #e6e6e6); -moz-box-shadow: 0 0 5px #b3b3b3 inset; -webkit-box-shadow: 0 0 5px #b3b3b3 inset; -o-box-shadow: 0 0 5px #b3b3b3 inset; box-shadow: 0 0 5px #b3b3b3 inset; }
-.cms .ss-ui-button.ss-ui-action-constructive { background-image: none; padding-left: 24px; padding-right: 6px; font-weight: bold; margin-left: 8px; color: white; border-color: #78a127; border-bottom-color: #59781d; background: #669933 url('../images/btn_icons-saaa1989272.png') 5px 5px no-repeat; background: url('../images/btn_icons-saaa1989272.png') 5px 5px no-repeat, -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #80bf40), color-stop(100%, #59862d)); background: url('../images/btn_icons-saaa1989272.png') 5px 5px no-repeat, -webkit-linear-gradient(#80bf40, #59862d); background: url('../images/btn_icons-saaa1989272.png') 5px 5px no-repeat, -moz-linear-gradient(#80bf40, #59862d); background: url('../images/btn_icons-saaa1989272.png') 5px 5px no-repeat, -o-linear-gradient(#80bf40, #59862d); background: url('../images/btn_icons-saaa1989272.png') 5px 5px no-repeat, -ms-linear-gradient(#80bf40, #59862d); background: url('../images/btn_icons-saaa1989272.png') 5px 5px no-repeat, linear-gradient(#80bf40, #59862d); text-shadow: #4d7326 0 1px 1px; }
-.cms .ss-ui-button.ss-ui-action-constructive.ui-state-hover, .cms .ss-ui-button.ss-ui-action-constructive:hover { border-color: #59781d; background: #80bf40 url('../images/btn_icons-saaa1989272.png') 6px 6px no-repeat; background: url('../images/btn_icons-saaa1989272.png') 5px 5px no-repeat, -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #8cc653), color-stop(100%, #669933)); background: url('../images/btn_icons-saaa1989272.png') 5px 5px no-repeat, -webkit-linear-gradient(#8cc653, #669933); background: url('../images/btn_icons-saaa1989272.png') 5px 5px no-repeat, -moz-linear-gradient(#8cc653, #669933); background: url('../images/btn_icons-saaa1989272.png') 5px 5px no-repeat, -o-linear-gradient(#8cc653, #669933); background: url('../images/btn_icons-saaa1989272.png') 5px 5px no-repeat, -ms-linear-gradient(#8cc653, #669933); background: url('../images/btn_icons-saaa1989272.png') 5px 5px no-repeat, linear-gradient(#8cc653, #669933); }
-.cms .ss-ui-button.ss-ui-action-constructive:active, .cms .ss-ui-button.ss-ui-action-constructive:focus, .cms .ss-ui-button.ss-ui-action-constructive.ui-state-active, .cms .ss-ui-button.ss-ui-action-constructive.ui-state-focus { background: #619130 url('../images/btn_icons-saaa1989272.png') 5px 5px no-repeat; -moz-box-shadow: inset 0 1px 3px #17181a, 0 1px 0 rgba(255, 255, 255, 0.6); -webkit-box-shadow: inset 0 1px 3px #17181a, 0 1px 0 rgba(255, 255, 255, 0.6); -o-box-shadow: inset 0 1px 3px #17181a, 0 1px 0 rgba(255, 255, 255, 0.6); box-shadow: inset 0 1px 3px #17181a, 0 1px 0 rgba(255, 255, 255, 0.6); }
-.cms .ss-ui-button.cms-page-add-button { background-image: none; padding-left: 24px; padding-right: 6px; font-weight: bold; margin-left: 8px; color: white; border-color: #78a127; border-bottom-color: #59781d; background: #669933 url('../images/btn_icons-saaa1989272.png') 5px -49px no-repeat; background: url('../images/btn_icons-saaa1989272.png') 5px -49px no-repeat, -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #80bf40), color-stop(100%, #59862d)); background: url('../images/btn_icons-saaa1989272.png') 5px -49px no-repeat, -webkit-linear-gradient(#80bf40, #59862d); background: url('../images/btn_icons-saaa1989272.png') 5px -49px no-repeat, -moz-linear-gradient(#80bf40, #59862d); background: url('../images/btn_icons-saaa1989272.png') 5px -49px no-repeat, -o-linear-gradient(#80bf40, #59862d); background: url('../images/btn_icons-saaa1989272.png') 5px -49px no-repeat, -ms-linear-gradient(#80bf40, #59862d); background: url('../images/btn_icons-saaa1989272.png') 5px -49px no-repeat, linear-gradient(#80bf40, #59862d); text-shadow: #4d7326 0 1px 1px; -moz-border-radius: 4px; -webkit-border-radius: 4px; -o-border-radius: 4px; -ms-border-radius: 4px; -khtml-border-radius: 4px; border-radius: 4px; }
-.cms .ss-ui-button.cms-page-add-button.ui-state-hover, .cms .ss-ui-button.cms-page-add-button:hover { border-color: #59781d; background: #80bf40 url('../images/btn_icons-saaa1989272.png') 6px -48px no-repeat; background: url('../images/btn_icons-saaa1989272.png') 5px -49px no-repeat, -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #8cc653), color-stop(100%, #669933)); background: url('../images/btn_icons-saaa1989272.png') 5px -49px no-repeat, -webkit-linear-gradient(#8cc653, #669933); background: url('../images/btn_icons-saaa1989272.png') 5px -49px no-repeat, -moz-linear-gradient(#8cc653, #669933); background: url('../images/btn_icons-saaa1989272.png') 5px -49px no-repeat, -o-linear-gradient(#8cc653, #669933); background: url('../images/btn_icons-saaa1989272.png') 5px -49px no-repeat, -ms-linear-gradient(#8cc653, #669933); background: url('../images/btn_icons-saaa1989272.png') 5px -49px no-repeat, linear-gradient(#8cc653, #669933); }
-.cms .ss-ui-button.cms-page-add-button:active, .cms .ss-ui-button.cms-page-add-button:focus, .cms .ss-ui-button.cms-page-add-button.ui-state-active, .cms .ss-ui-button.cms-page-add-button.ui-state-focus { background: #619130 url('../images/btn_icons-saaa1989272.png') 5px -49px no-repeat; -moz-box-shadow: inset 0 1px 3px #17181a, 0 1px 0 rgba(255, 255, 255, 0.6); -webkit-box-shadow: inset 0 1px 3px #17181a, 0 1px 0 rgba(255, 255, 255, 0.6); -o-box-shadow: inset 0 1px 3px #17181a, 0 1px 0 rgba(255, 255, 255, 0.6); box-shadow: inset 0 1px 3px #17181a, 0 1px 0 rgba(255, 255, 255, 0.6); }
+.cms .ss-ui-button.ui-state-hover, .cms .ss-ui-button:hover { text-decoration: none; background-color: white; background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #e6e6e6)); background: -webkit-linear-gradient(#ffffff, #e6e6e6); background: -moz-linear-gradient(#ffffff, #e6e6e6); background: -o-linear-gradient(#ffffff, #e6e6e6); background: -ms-linear-gradient(#ffffff, #e6e6e6); background: linear-gradient(#ffffff, #e6e6e6); -moz-box-shadow: 0 0 5px #b3b3b3; -webkit-box-shadow: 0 0 5px #b3b3b3; -o-box-shadow: 0 0 5px #b3b3b3; box-shadow: 0 0 5px #b3b3b3; }
+.cms .ss-ui-button:active, .cms .ss-ui-button:focus, .cms .ss-ui-button.ui-state-active, .cms .ss-ui-button.ui-state-focus { border: 1px solid #b3b3b3; background-color: white; background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #e6e6e6)); background: -webkit-linear-gradient(#ffffff, #e6e6e6); background: -moz-linear-gradient(#ffffff, #e6e6e6); background: -o-linear-gradient(#ffffff, #e6e6e6); background: -ms-linear-gradient(#ffffff, #e6e6e6); background: linear-gradient(#ffffff, #e6e6e6); -moz-box-shadow: 0 0 5px #b3b3b3 inset; -webkit-box-shadow: 0 0 5px #b3b3b3 inset; -o-box-shadow: 0 0 5px #b3b3b3 inset; box-shadow: 0 0 5px #b3b3b3 inset; }
+.cms .ss-ui-button.ss-ui-action-constructive { font-weight: bold; color: white; border-color: #78a127; border-bottom-color: #59781d; background-color: #669933; background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #80bf40), color-stop(100%, #59862d)); background: -webkit-linear-gradient(#80bf40, #59862d); background: -moz-linear-gradient(#80bf40, #59862d); background: -o-linear-gradient(#80bf40, #59862d); background: -ms-linear-gradient(#80bf40, #59862d); background: linear-gradient(#80bf40, #59862d); text-shadow: #4d7326 0 1px 1px; }
+.cms .ss-ui-button.ss-ui-action-constructive.ui-state-hover, .cms .ss-ui-button.ss-ui-action-constructive:hover { border-color: #59781d; background-color: #80bf40; background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #8cc653), color-stop(100%, #669933)); background: -webkit-linear-gradient(#8cc653, #669933); background: -moz-linear-gradient(#8cc653, #669933); background: -o-linear-gradient(#8cc653, #669933); background: -ms-linear-gradient(#8cc653, #669933); background: linear-gradient(#8cc653, #669933); }
+.cms .ss-ui-button.ss-ui-action-constructive:active, .cms .ss-ui-button.ss-ui-action-constructive:focus, .cms .ss-ui-button.ss-ui-action-constructive.ui-state-active, .cms .ss-ui-button.ss-ui-action-constructive.ui-state-focus { background-color: #619130; -moz-box-shadow: inset 0 1px 3px #17181a, 0 1px 0 rgba(255, 255, 255, 0.6); -webkit-box-shadow: inset 0 1px 3px #17181a, 0 1px 0 rgba(255, 255, 255, 0.6); -o-box-shadow: inset 0 1px 3px #17181a, 0 1px 0 rgba(255, 255, 255, 0.6); box-shadow: inset 0 1px 3px #17181a, 0 1px 0 rgba(255, 255, 255, 0.6); }
 .cms .ss-ui-button.ss-ui-action-destructive { color: red; background-color: #e6e6e6; }
-.cms .ss-ui-button.ss-ui-action-destructive.delete { padding-left: 24px; padding-right: 6px; background: #e6e6e6 url('../images/btn_icons-saaa1989272.png') 5px -184px no-repeat; background: url('../images/btn_icons-saaa1989272.png') 5px -185px no-repeat, -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #d9d9d9)); background: url('../images/btn_icons-saaa1989272.png') 5px -185px no-repeat, -webkit-linear-gradient(#ffffff, #d9d9d9); background: url('../images/btn_icons-saaa1989272.png') 5px -185px no-repeat, -moz-linear-gradient(#ffffff, #d9d9d9); background: url('../images/btn_icons-saaa1989272.png') 5px -185px no-repeat, -o-linear-gradient(#ffffff, #d9d9d9); background: url('../images/btn_icons-saaa1989272.png') 5px -185px no-repeat, -ms-linear-gradient(#ffffff, #d9d9d9); background: url('../images/btn_icons-saaa1989272.png') 5px -185px no-repeat, linear-gradient(#ffffff, #d9d9d9); }
-.cms .ss-ui-button.ss-ui-action-destructive.delete.ui-state-hover, .cms .ss-ui-button.ss-ui-action-destructive.delete:hover { background: white url('../images/btn_icons-saaa1989272.png') 5px -184px no-repeat; background: url('../images/btn_icons-saaa1989272.png') 5px -185px no-repeat, -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #e6e6e6)); background: url('../images/btn_icons-saaa1989272.png') 5px -185px no-repeat, -webkit-linear-gradient(#ffffff, #e6e6e6); background: url('../images/btn_icons-saaa1989272.png') 5px -185px no-repeat, -moz-linear-gradient(#ffffff, #e6e6e6); background: url('../images/btn_icons-saaa1989272.png') 5px -185px no-repeat, -o-linear-gradient(#ffffff, #e6e6e6); background: url('../images/btn_icons-saaa1989272.png') 5px -185px no-repeat, -ms-linear-gradient(#ffffff, #e6e6e6); background: url('../images/btn_icons-saaa1989272.png') 5px -185px no-repeat, linear-gradient(#ffffff, #e6e6e6); -moz-box-shadow: 0 0 5px #b3b3b3; -webkit-box-shadow: 0 0 5px #b3b3b3; -o-box-shadow: 0 0 5px #b3b3b3; box-shadow: 0 0 5px #b3b3b3; }
-.cms .ss-ui-button.ss-ui-action-destructive.delete:active, .cms .ss-ui-button.ss-ui-action-destructive.delete:focus, .cms .ss-ui-button.ss-ui-action-destructive.delete.ui-state-active, .cms .ss-ui-button.ss-ui-action-destructive.delete.ui-state-focus { border: 1px solid #b3b3b3; background: white url('../images/btn_icons-saaa1989272.png') 5px -184px no-repeat; background: url('../images/btn_icons-saaa1989272.png') 5px -185px no-repeat, -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #e6e6e6)); background: url('../images/btn_icons-saaa1989272.png') 5px -185px no-repeat, -webkit-linear-gradient(#ffffff, #e6e6e6); background: url('../images/btn_icons-saaa1989272.png') 5px -185px no-repeat, -moz-linear-gradient(#ffffff, #e6e6e6); background: url('../images/btn_icons-saaa1989272.png') 5px -185px no-repeat, -o-linear-gradient(#ffffff, #e6e6e6); background: url('../images/btn_icons-saaa1989272.png') 5px -185px no-repeat, -ms-linear-gradient(#ffffff, #e6e6e6); background: url('../images/btn_icons-saaa1989272.png') 5px -185px no-repeat, linear-gradient(#ffffff, #e6e6e6); -moz-box-shadow: 0 0 5px #9a9a9a inset; -webkit-box-shadow: 0 0 5px #9a9a9a inset; -o-box-shadow: 0 0 5px #9a9a9a inset; box-shadow: 0 0 5px #9a9a9a inset; }
-.cms .ss-ui-button.ss-ui-action-destructive.delete.ui-state-disabled { background-image: none; background: white url('../images/btn_icons-saaa1989272.png') 5px -211px no-repeat; background: url('../images/btn_icons-saaa1989272.png') 5px -212px no-repeat, -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #e6e6e6)); background: url('../images/btn_icons-saaa1989272.png') 5px -212px no-repeat, -webkit-linear-gradient(#ffffff, #e6e6e6); background: url('../images/btn_icons-saaa1989272.png') 5px -212px no-repeat, -moz-linear-gradient(#ffffff, #e6e6e6); background: url('../images/btn_icons-saaa1989272.png') 5px -212px no-repeat, -o-linear-gradient(#ffffff, #e6e6e6); background: url('../images/btn_icons-saaa1989272.png') 5px -212px no-repeat, -ms-linear-gradient(#ffffff, #e6e6e6); background: url('../images/btn_icons-saaa1989272.png') 5px -212px no-repeat, linear-gradient(#ffffff, #e6e6e6); }
-.cms .ss-ui-button.ss-ui-action-destructive.unpublish { padding-left: 24px; padding-right: 6px; background: #e6e6e6 url('../images/btn_icons-saaa1989272.png') 5px -370px no-repeat; background: url('../images/btn_icons-saaa1989272.png') 5px -371px no-repeat, -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #d9d9d9)); background: url('../images/btn_icons-saaa1989272.png') 5px -371px no-repeat, -webkit-linear-gradient(#ffffff, #d9d9d9); background: url('../images/btn_icons-saaa1989272.png') 5px -371px no-repeat, -moz-linear-gradient(#ffffff, #d9d9d9); background: url('../images/btn_icons-saaa1989272.png') 5px -371px no-repeat, -o-linear-gradient(#ffffff, #d9d9d9); background: url('../images/btn_icons-saaa1989272.png') 5px -371px no-repeat, -ms-linear-gradient(#ffffff, #d9d9d9); background: url('../images/btn_icons-saaa1989272.png') 5px -371px no-repeat, linear-gradient(#ffffff, #d9d9d9); }
-.cms .ss-ui-button.ss-ui-action-destructive.unpublish.ui-state-hover, .cms .ss-ui-button.ss-ui-action-destructive.unpublish:hover { background: white url('../images/btn_icons-saaa1989272.png') 5px -370px no-repeat; background: url('../images/btn_icons-saaa1989272.png') 5px -371px no-repeat, -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #e6e6e6)); background: url('../images/btn_icons-saaa1989272.png') 5px -371px no-repeat, -webkit-linear-gradient(#ffffff, #e6e6e6); background: url('../images/btn_icons-saaa1989272.png') 5px -371px no-repeat, -moz-linear-gradient(#ffffff, #e6e6e6); background: url('../images/btn_icons-saaa1989272.png') 5px -371px no-repeat, -o-linear-gradient(#ffffff, #e6e6e6); background: url('../images/btn_icons-saaa1989272.png') 5px -371px no-repeat, -ms-linear-gradient(#ffffff, #e6e6e6); background: url('../images/btn_icons-saaa1989272.png') 5px -371px no-repeat, linear-gradient(#ffffff, #e6e6e6); -moz-box-shadow: 0 0 5px #b3b3b3; -webkit-box-shadow: 0 0 5px #b3b3b3; -o-box-shadow: 0 0 5px #b3b3b3; box-shadow: 0 0 5px #b3b3b3; }
-.cms .ss-ui-button.ss-ui-action-destructive.unpublish:active, .cms .ss-ui-button.ss-ui-action-destructive.unpublish:focus, .cms .ss-ui-button.ss-ui-action-destructive.unpublish.ui-state-active, .cms .ss-ui-button.ss-ui-action-destructive.unpublish.ui-state-focus { border: 1px solid #b3b3b3; background: white url('../images/btn_icons-saaa1989272.png') 5px -370px no-repeat; background: url('../images/btn_icons-saaa1989272.png') 5px -371px no-repeat, -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #e6e6e6)); background: url('../images/btn_icons-saaa1989272.png') 5px -371px no-repeat, -webkit-linear-gradient(#ffffff, #e6e6e6); background: url('../images/btn_icons-saaa1989272.png') 5px -371px no-repeat, -moz-linear-gradient(#ffffff, #e6e6e6); background: url('../images/btn_icons-saaa1989272.png') 5px -371px no-repeat, -o-linear-gradient(#ffffff, #e6e6e6); background: url('../images/btn_icons-saaa1989272.png') 5px -371px no-repeat, -ms-linear-gradient(#ffffff, #e6e6e6); background: url('../images/btn_icons-saaa1989272.png') 5px -371px no-repeat, linear-gradient(#ffffff, #e6e6e6); -moz-box-shadow: 0 0 5px #9a9a9a inset; -webkit-box-shadow: 0 0 5px #9a9a9a inset; -o-box-shadow: 0 0 5px #9a9a9a inset; box-shadow: 0 0 5px #9a9a9a inset; }
-.cms .ss-ui-button.ss-ui-action-destructive.unpublish.ui-state-disabled { background-image: none; background: white url('../images/btn_icons-saaa1989272.png') 5px -398px no-repeat; background: url('../images/btn_icons-saaa1989272.png') 5px -399px no-repeat, -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #e6e6e6)); background: url('../images/btn_icons-saaa1989272.png') 5px -399px no-repeat, -webkit-linear-gradient(#ffffff, #e6e6e6); background: url('../images/btn_icons-saaa1989272.png') 5px -399px no-repeat, -moz-linear-gradient(#ffffff, #e6e6e6); background: url('../images/btn_icons-saaa1989272.png') 5px -399px no-repeat, -o-linear-gradient(#ffffff, #e6e6e6); background: url('../images/btn_icons-saaa1989272.png') 5px -399px no-repeat, -ms-linear-gradient(#ffffff, #e6e6e6); background: url('../images/btn_icons-saaa1989272.png') 5px -399px no-repeat, linear-gradient(#ffffff, #e6e6e6); }
-.cms .ss-ui-button.save-draft { padding-left: 24px; padding-right: 6px; background: #e6e6e6 url('../images/btn_icons-saaa1989272.png') 5px -104px no-repeat; background: url('../images/btn_icons-saaa1989272.png') 5px -105px no-repeat, -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #d9d9d9)); background: url('../images/btn_icons-saaa1989272.png') 5px -105px no-repeat, -webkit-linear-gradient(#ffffff, #d9d9d9); background: url('../images/btn_icons-saaa1989272.png') 5px -105px no-repeat, -moz-linear-gradient(#ffffff, #d9d9d9); background: url('../images/btn_icons-saaa1989272.png') 5px -105px no-repeat, -o-linear-gradient(#ffffff, #d9d9d9); background: url('../images/btn_icons-saaa1989272.png') 5px -105px no-repeat, -ms-linear-gradient(#ffffff, #d9d9d9); background: url('../images/btn_icons-saaa1989272.png') 5px -105px no-repeat, linear-gradient(#ffffff, #d9d9d9); }
-.cms .ss-ui-button.save-draft.ui-state-hover, .cms .ss-ui-button.save-draft:hover { background: white url('../images/btn_icons-saaa1989272.png') 5px -104px no-repeat; background: url('../images/btn_icons-saaa1989272.png') 5px -105px no-repeat, -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #e6e6e6)); background: url('../images/btn_icons-saaa1989272.png') 5px -105px no-repeat, -webkit-linear-gradient(#ffffff, #e6e6e6); background: url('../images/btn_icons-saaa1989272.png') 5px -105px no-repeat, -moz-linear-gradient(#ffffff, #e6e6e6); background: url('../images/btn_icons-saaa1989272.png') 5px -105px no-repeat, -o-linear-gradient(#ffffff, #e6e6e6); background: url('../images/btn_icons-saaa1989272.png') 5px -105px no-repeat, -ms-linear-gradient(#ffffff, #e6e6e6); background: url('../images/btn_icons-saaa1989272.png') 5px -105px no-repeat, linear-gradient(#ffffff, #e6e6e6); -moz-box-shadow: 0 0 5px #b3b3b3; -webkit-box-shadow: 0 0 5px #b3b3b3; -o-box-shadow: 0 0 5px #b3b3b3; box-shadow: 0 0 5px #b3b3b3; }
-.cms .ss-ui-button.save-draft:active, .cms .ss-ui-button.save-draft:focus, .cms .ss-ui-button.save-draft.ui-state-active, .cms .ss-ui-button.save-draft.ui-state-focus { border: 1px solid #b3b3b3; background: white url('../images/btn_icons-saaa1989272.png') 5px -104px no-repeat; background: url('../images/btn_icons-saaa1989272.png') 5px -105px no-repeat, -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #e6e6e6)); background: url('../images/btn_icons-saaa1989272.png') 5px -105px no-repeat, -webkit-linear-gradient(#ffffff, #e6e6e6); background: url('../images/btn_icons-saaa1989272.png') 5px -105px no-repeat, -moz-linear-gradient(#ffffff, #e6e6e6); background: url('../images/btn_icons-saaa1989272.png') 5px -105px no-repeat, -o-linear-gradient(#ffffff, #e6e6e6); background: url('../images/btn_icons-saaa1989272.png') 5px -105px no-repeat, -ms-linear-gradient(#ffffff, #e6e6e6); background: url('../images/btn_icons-saaa1989272.png') 5px -105px no-repeat, linear-gradient(#ffffff, #e6e6e6); -moz-box-shadow: 0 0 5px #9a9a9a inset; -webkit-box-shadow: 0 0 5px #9a9a9a inset; -o-box-shadow: 0 0 5px #9a9a9a inset; box-shadow: 0 0 5px #9a9a9a inset; }
-.cms .ss-ui-button.save-draft.ui-state-disabled { background-image: none; background: white url('../images/btn_icons-saaa1989272.png') 5px -132px no-repeat; background: url('../images/btn_icons-saaa1989272.png') 5px -133px no-repeat, -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #e6e6e6)); background: url('../images/btn_icons-saaa1989272.png') 5px -133px no-repeat, -webkit-linear-gradient(#ffffff, #e6e6e6); background: url('../images/btn_icons-saaa1989272.png') 5px -133px no-repeat, -moz-linear-gradient(#ffffff, #e6e6e6); background: url('../images/btn_icons-saaa1989272.png') 5px -133px no-repeat, -o-linear-gradient(#ffffff, #e6e6e6); background: url('../images/btn_icons-saaa1989272.png') 5px -133px no-repeat, -ms-linear-gradient(#ffffff, #e6e6e6); background: url('../images/btn_icons-saaa1989272.png') 5px -133px no-repeat, linear-gradient(#ffffff, #e6e6e6); }
-.cms .ss-ui-button.cms-preview-toggle-link { padding-left: 24px !important; margin-left: 4px !important; text-decoration: none; padding-left: 24px; padding-right: 6px; background: #e6e6e6 url('../images/btn_icons-saaa1989272.png') 5px -264px no-repeat; background: url('../images/btn_icons-saaa1989272.png') 5px -265px no-repeat, -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #d9d9d9)); background: url('../images/btn_icons-saaa1989272.png') 5px -265px no-repeat, -webkit-linear-gradient(#ffffff, #d9d9d9); background: url('../images/btn_icons-saaa1989272.png') 5px -265px no-repeat, -moz-linear-gradient(#ffffff, #d9d9d9); background: url('../images/btn_icons-saaa1989272.png') 5px -265px no-repeat, -o-linear-gradient(#ffffff, #d9d9d9); background: url('../images/btn_icons-saaa1989272.png') 5px -265px no-repeat, -ms-linear-gradient(#ffffff, #d9d9d9); background: url('../images/btn_icons-saaa1989272.png') 5px -265px no-repeat, linear-gradient(#ffffff, #d9d9d9); }
-.cms .ss-ui-button.cms-preview-toggle-link.ui-state-hover, .cms .ss-ui-button.cms-preview-toggle-link:hover { background: white url('../images/btn_icons-saaa1989272.png') 5px -264px no-repeat; background: url('../images/btn_icons-saaa1989272.png') 5px -265px no-repeat, -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #e6e6e6)); background: url('../images/btn_icons-saaa1989272.png') 5px -265px no-repeat, -webkit-linear-gradient(#ffffff, #e6e6e6); background: url('../images/btn_icons-saaa1989272.png') 5px -265px no-repeat, -moz-linear-gradient(#ffffff, #e6e6e6); background: url('../images/btn_icons-saaa1989272.png') 5px -265px no-repeat, -o-linear-gradient(#ffffff, #e6e6e6); background: url('../images/btn_icons-saaa1989272.png') 5px -265px no-repeat, -ms-linear-gradient(#ffffff, #e6e6e6); background: url('../images/btn_icons-saaa1989272.png') 5px -265px no-repeat, linear-gradient(#ffffff, #e6e6e6); -moz-box-shadow: 0 0 5px #b3b3b3; -webkit-box-shadow: 0 0 5px #b3b3b3; -o-box-shadow: 0 0 5px #b3b3b3; box-shadow: 0 0 5px #b3b3b3; }
-.cms .ss-ui-button.cms-preview-toggle-link:active, .cms .ss-ui-button.cms-preview-toggle-link:focus, .cms .ss-ui-button.cms-preview-toggle-link.ui-state-active, .cms .ss-ui-button.cms-preview-toggle-link.ui-state-focus { border: 1px solid #b3b3b3; background: white url('../images/btn_icons-saaa1989272.png') 5px -264px no-repeat; background: url('../images/btn_icons-saaa1989272.png') 5px -265px no-repeat, -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #e6e6e6)); background: url('../images/btn_icons-saaa1989272.png') 5px -265px no-repeat, -webkit-linear-gradient(#ffffff, #e6e6e6); background: url('../images/btn_icons-saaa1989272.png') 5px -265px no-repeat, -moz-linear-gradient(#ffffff, #e6e6e6); background: url('../images/btn_icons-saaa1989272.png') 5px -265px no-repeat, -o-linear-gradient(#ffffff, #e6e6e6); background: url('../images/btn_icons-saaa1989272.png') 5px -265px no-repeat, -ms-linear-gradient(#ffffff, #e6e6e6); background: url('../images/btn_icons-saaa1989272.png') 5px -265px no-repeat, linear-gradient(#ffffff, #e6e6e6); -moz-box-shadow: 0 0 5px #9a9a9a inset; -webkit-box-shadow: 0 0 5px #9a9a9a inset; -o-box-shadow: 0 0 5px #9a9a9a inset; box-shadow: 0 0 5px #9a9a9a inset; }
-.cms .ss-ui-button.cms-preview-toggle-link.ui-state-disabled { background-image: none; background: white url('../images/btn_icons-saaa1989272.png') 5px -291px no-repeat; background: url('../images/btn_icons-saaa1989272.png') 5px -292px no-repeat, -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #e6e6e6)); background: url('../images/btn_icons-saaa1989272.png') 5px -292px no-repeat, -webkit-linear-gradient(#ffffff, #e6e6e6); background: url('../images/btn_icons-saaa1989272.png') 5px -292px no-repeat, -moz-linear-gradient(#ffffff, #e6e6e6); background: url('../images/btn_icons-saaa1989272.png') 5px -292px no-repeat, -o-linear-gradient(#ffffff, #e6e6e6); background: url('../images/btn_icons-saaa1989272.png') 5px -292px no-repeat, -ms-linear-gradient(#ffffff, #e6e6e6); background: url('../images/btn_icons-saaa1989272.png') 5px -292px no-repeat, linear-gradient(#ffffff, #e6e6e6); }
 .cms .ss-ui-button.ss-ui-button-small { padding: 4px 4px; }
 .cms .ss-ui-button.ui-state-highlight { background-color: #e6e6e6; border: 1px solid #708284; }
-.cms .ss-ui-button.ss-ui-action-minor { background: none; padding: 0; border: 0; color: #393939; text-decoration: underline; -moz-box-shadow: none; -webkit-box-shadow: none; -o-box-shadow: none; box-shadow: none; }
+.cms .ss-ui-button.ss-ui-action-minor { background: none; 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; }
 
@@ -218,8 +231,6 @@ body.cms { overflow: hidden; }
 .cms a:hover, .cms a:focus { text-decoration: underline; }
 .cms body .ui-widget { font-family: Arial, sans-serif; font-size: 12px; }
 .cms strong { font-weight: bold; }
-.cms .ss-ui-button.cms-page-add-button { margin-left: 0px; font-size: 13px; -moz-border-radius: 4px; -webkit-border-radius: 4px; -o-border-radius: 4px; -ms-border-radius: 4px; -khtml-border-radius: 4px; border-radius: 4px; }
-.cms .ss-ui-button.cms-page-add-button:hover { text-decoration: none; }
 
 /** -------------------------------------------- Helpers -------------------------------------------- */
 .cms-helper-hide-actions .Actions { display: none; }
@@ -309,11 +320,11 @@ body.cms { overflow: hidden; }
 .cms-content-toolbar .chzn-container-single .chzn-single:hover { -moz-box-shadow: 0 0 5px #b3b3b3; -webkit-box-shadow: 0 0 5px #b3b3b3; -o-box-shadow: 0 0 5px #b3b3b3; box-shadow: 0 0 5px #b3b3b3; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ebebeb), color-stop(100%, #d2d2d2)); background-image: -webkit-linear-gradient(#ebebeb, #d2d2d2); background-image: -moz-linear-gradient(#ebebeb, #d2d2d2); background-image: -o-linear-gradient(#ebebeb, #d2d2d2); background-image: -ms-linear-gradient(#ebebeb, #d2d2d2); background-image: linear-gradient(#ebebeb, #d2d2d2); }
 .cms-content-toolbar .chzn-container-single .chzn-single:active { -moz-box-shadow: inset 0 1px 3px #4d4d4d; -webkit-box-shadow: inset 0 1px 3px #4d4d4d; -o-box-shadow: inset 0 1px 3px #4d4d4d; box-shadow: inset 0 1px 3px #4d4d4d; }
 .cms-content-toolbar .chzn-container-single .chzn-single span { padding-top: 1px; }
-.cms-content-toolbar .chzn-container-single .chzn-single div { background: url(../images/btn_icons/settings.png) 5px 6px no-repeat; border-left: none; width: 100%; }
-.cms-content-toolbar .chzn-container-single .chzn-single div b { background: url(../images/sprites_32x32/menu-arrow-deselected-down.png) no-repeat 9px 11px; float: right; width: 24px; }
+.cms-content-toolbar .chzn-container-single .chzn-single div { background: url(../images/btn-icon/settings.png) 5px 4px no-repeat; border-left: none; width: 100%; }
+.cms-content-toolbar .chzn-container-single .chzn-single div b { background: url(../images/sprites-32x32/menu-arrow-deselected-down.png) no-repeat 9px 11px; float: right; width: 24px; }
 
 /* -------------------------------------------------------- Content Tools is the sidebar on the left of the main content panel */
-.cms-content-tools { background-color: #dde3e7; width: 192px; border-right: 1px solid #bfcad2; overflow-y: auto; overflow-x: hidden; z-index: 70; -moz-box-shadow: rgba(107, 120, 123, 0.5) 0 0 4px; -webkit-box-shadow: rgba(107, 120, 123, 0.5) 0 0 4px; -o-box-shadow: rgba(107, 120, 123, 0.5) 0 0 4px; box-shadow: rgba(107, 120, 123, 0.5) 0 0 4px; float: left; position: relative; /* buttons now need to line with with reduced input sizes */ }
+.cms-content-tools { background-color: #dde3e7; width: 192px; border-right: 1px solid #bfcad2; overflow-y: auto; overflow-x: hidden; z-index: 70; -moz-box-shadow: rgba(107, 120, 123, 0.5) 0 0 4px; -webkit-box-shadow: rgba(107, 120, 123, 0.5) 0 0 4px; -o-box-shadow: rgba(107, 120, 123, 0.5) 0 0 4px; box-shadow: rgba(107, 120, 123, 0.5) 0 0 4px; float: left; position: relative; }
 .cms-content-tools .cms-panel-header { margin: 0 0 7px; 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: 176px; padding: 8px 8px; overflow: auto; height: 100%; }
 .cms-content-tools .cms-content-header { background-color: #748d9d; 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); }
@@ -327,7 +338,6 @@ body.cms { overflow: hidden; }
 .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 0; }
 .cms-content-tools .field.checkbox input { margin: 2px 0; }
-.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; }
@@ -339,15 +349,11 @@ body.cms { overflow: hidden; }
 .cms-content-tools td { border-bottom: 1px solid #ced7dc; padding: 7px 2px; font-size: 11px; }
 
 /**  CMS Batch actions */
-.cms-content-constructive-actions { float: left; }
-
 .cms-content-batchactions { float: left; position: relative; display: block; margin-left: 8px; }
 .cms-content-batchactions form > * { display: block; float: left; }
 .cms-content-batchactions form.cms-batch-actions { float: left; }
 .cms-content-batchactions .Actions { display: none; }
 
-.cms-content-constructive-actions a { display: block; float: right; }
-
 #Form_BatchActionsForm select { width: 200px; }
 
 /** -------------------------------------------- Preview -------------------------------------------- */
@@ -364,7 +370,8 @@ body.cms { overflow: hidden; }
 .cms-preview .cms-preview-controls .cms-preview-states { margin-right: 10px; }
 .cms-preview .cms-preview-controls .cms-preview-popup-link { display: inline-block; }
 .cms-preview .cms-preview-controls .cms-preview-toggle-link { float: right; }
-.cms-preview .cms-preview-controls .cms-preview-toggle-link .ui-button-text { padding: 0; }
+
+.cms-preview-toggle-link { display: block; float: right; font-size: 12px; text-decoration: none; }
 
 .cms-preview-header { background-color: #FFBE66; padding: 10px; font-weight: bold; }
 
@@ -453,7 +460,7 @@ body.cms-dialog { overflow: auto; background: url("../images/textures/bg_cms_mai
 /** -------------------------------------------- Step labels -------------------------------------------- */
 .step-label > * { display: inline-block; vertical-align: top; }
 .step-label .flyout { height: 18px; font-size: 14px; font-weight: bold; -moz-border-radius-topleft: 3px; -webkit-border-top-left-radius: 3px; -o-border-top-left-radius: 3px; -ms-border-top-left-radius: 3px; -khtml-border-top-left-radius: 3px; border-top-left-radius: 3px; -moz-border-radius-bottomleft: 3px; -webkit-border-bottom-left-radius: 3px; -o-border-bottom-left-radius: 3px; -ms-border-bottom-left-radius: 3px; -khtml-border-bottom-left-radius: 3px; border-bottom-left-radius: 3px; background-color: #667980; padding: 4px 3px 4px 6px; text-align: center; text-shadow: none; color: #fff; }
-.step-label .arrow { height: 26px; width: 10px; background: url('../images/sprites_32x32-s98eda4974b.png') 0 -171px no-repeat; margin-right: 4px; }
+.step-label .arrow { height: 26px; width: 10px; background: url('../images/sprites-32x32-sa4e142f7f0.png') 0 -759px no-repeat; margin-right: 4px; }
 .step-label .title { height: 18px; padding: 4px; }
 
 /** This file defines the jstree base styling (see http://jstree.com), as well as any customizations (see bottom of file).  The styles are usually added through jstree.js on DOM load,  but we need it earlier in order to correctly display the uninitialized tree. */
@@ -570,7 +577,7 @@ li.class-ErrorPage > a .jstree-pageicon { background-position: 0 -112px; }
 .cms-logo span { font-weight: bold; font-size: 14px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; o-text-overflow: ellipsis; padding-top: 1px; }
 
 .cms-login-status { border-top: 1px solid #19435c; height: 24px; padding: 7px 4px 0 4px; overflow: hidden; line-height: 16px; font-size: 11px; }
-.cms-login-status .logout-link { display: inline-block; height: 16px; width: 16px; float: left; margin: 0 8px 0 3px; background: url('../images/sprites_32x32-s98eda4974b.png') 0 -81px no-repeat; text-indent: -9999em; }
+.cms-login-status .logout-link { display: inline-block; height: 16px; width: 16px; float: left; margin: 0 8px 0 3px; background: url('../images/sprites-32x32-sa4e142f7f0.png') 0 -669px no-repeat; text-indent: -9999em; }
 
 .cms-menu { z-index: 80; background: #c6d7df; border-right: 1px solid #8c99a1; width: 191px; /* 8x24 - 1 */ -moz-box-shadow: rgba(107, 120, 123, 0.5) 0 0 8px; -webkit-box-shadow: rgba(107, 120, 123, 0.5) 0 0 8px; -o-box-shadow: rgba(107, 120, 123, 0.5) 0 0 8px; box-shadow: rgba(107, 120, 123, 0.5) 0 0 8px; }
 .cms-menu a { text-decoration: none; }
@@ -590,11 +597,11 @@ li.class-ErrorPage > a .jstree-pageicon { background-position: 0 -112px; }
 .cms-menu-list li a .icon { display: inline-block; float: left; margin: 4px 10px 0 4px; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70); opacity: 0.7; }
 .cms-menu-list li a .text { display: inline-block; float: left; }
 .cms-menu-list li a .toggle-children { display: inline-block; float: right; width: 20px; height: 100%; cursor: pointer; }
-.cms-menu-list li a .toggle-children .toggle-children-icon { display: inline-block; width: 8px; height: 8px; background: url('../images/sprites_32x32-s98eda4974b.png') 0 -107px no-repeat; vertical-align: middle; }
-.cms-menu-list li a .toggle-children.opened .toggle-children-icon { background: url('../images/sprites_32x32-s98eda4974b.png') 0 -123px no-repeat; }
+.cms-menu-list li a .toggle-children .toggle-children-icon { display: inline-block; width: 8px; height: 8px; background: url('../images/sprites-32x32-sa4e142f7f0.png') 0 -695px no-repeat; vertical-align: middle; }
+.cms-menu-list li a .toggle-children.opened .toggle-children-icon { background: url('../images/sprites-32x32-sa4e142f7f0.png') 0 -711px no-repeat; }
 .cms-menu-list li.current a { color: white; text-shadow: #1e5270 0 -1px 0; border-top: 1px solid #55a4d2; border-bottom: 1px solid #1e5270; background-color: #338dc1; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #338dc1), color-stop(100%, #287099)); background-image: -webkit-linear-gradient(#338dc1, #287099); background-image: -moz-linear-gradient(#338dc1, #287099); background-image: -o-linear-gradient(#338dc1, #287099); background-image: -ms-linear-gradient(#338dc1, #287099); background-image: linear-gradient(#338dc1, #287099); }
-.cms-menu-list li.current a .toggle-children .toggle-children-icon { background: url('../images/sprites_32x32-s98eda4974b.png') 0 -139px no-repeat; }
-.cms-menu-list li.current a .toggle-children.opened .toggle-children-icon { background: url('../images/sprites_32x32-s98eda4974b.png') 0 -155px no-repeat; }
+.cms-menu-list li.current a .toggle-children .toggle-children-icon { background: url('../images/sprites-32x32-sa4e142f7f0.png') 0 -727px no-repeat; }
+.cms-menu-list li.current a .toggle-children.opened .toggle-children-icon { background: url('../images/sprites-32x32-sa4e142f7f0.png') 0 -743px no-repeat; }
 .cms-menu-list li.current ul { border-top: none; display: block; }
 .cms-menu-list li.current li { background-color: #287099; }
 .cms-menu-list li.current li a { font-size: 11px; padding: 0 10px 0 40px; height: 32px; line-height: 32px; color: #e2f0f7; background: none; border-top: 1px solid #338dc1; border-bottom: 1px solid #1e5270; }

admin/javascript/LeftAndMain.Content.js

@@ -13,42 +13,6 @@
 			onmatch: function() {
 				var self = this;
 				
-				// Listen to tree selection events
-				this.find('.cms-tree').bind('select_node.jstree', function(e, data) {
-					var node = data.rslt.obj, loadedNodeID = self.find(':input[name=ID]').val(), origEvent = data.args[2];
-					
-					// Don't trigger unless coming from a click event.
-					// Avoids problems with automated section switches from tree to detail view
-					// when JSTree auto-selects elements on first load.
-					if(!origEvent) {
-						return false;
-					}else if($(origEvent.target).hasClass('jstree-icon') || $(origEvent.target).hasClass('jstree-pageicon')){
-						// in case the click is not on the node title, ie on pageicon or dragicon, 
-						return false;
-					}
-					
-					// Don't allow checking disabled nodes
-					if($(node).hasClass('disabled')) return false;
-
-					// Don't allow reloading of currently selected node,
-					// mainly to avoid doing an ajax request on initial page load
-					if($(node).data('id') == loadedNodeID) return;
-
-					var url = $(node).find('a:first').attr('href');
-					if(url && url != '#') {
-						if($(node).find('a:first').is(':internal')) url = $('base').attr('href') + url;
-						// Reload only edit form if it exists (side-by-side view of tree and edit view), otherwise reload whole panel
-						if(self.find('.cms-edit-form').length) {
-							url += '?cms-view-form=1';
-							$('.cms-container').loadPanel(url, null, {selector: '.cms-edit-form'});
-						} else {
-							$('.cms-container').loadPanel(url);	
-						}
-					} else {
-						self.removeForm();
-					}
-				});
-				
 				// Force initialization of tabsets to avoid layout glitches
 				this.find('.ss-tabset').redrawTabs();
 				
@@ -275,6 +239,53 @@
 			}
 		});
 	});
+
+	/**
+	 * Load edit form for the selected node when its clicked.
+	 */
+	$('.cms-content .cms-tree').entwine({
+		onmatch: function() {
+			var self = this;
+
+			this._super();
+
+			this.bind('select_node.jstree', function(e, data) {
+				var node = data.rslt.obj, loadedNodeID = self.find(':input[name=ID]').val(), origEvent = data.args[2], container = $('.cms-container');
+				
+				// Don't trigger unless coming from a click event.
+				// Avoids problems with automated section switches from tree to detail view
+				// when JSTree auto-selects elements on first load.
+				if(!origEvent) {
+					return false;
+				}else if($(origEvent.target).hasClass('jstree-icon') || $(origEvent.target).hasClass('jstree-pageicon')){
+					// in case the click is not on the node title, ie on pageicon or dragicon, 
+					return false;
+				}
+				
+				// Don't allow checking disabled nodes
+				if($(node).hasClass('disabled')) return false;
+
+				// Don't allow reloading of currently selected node,
+				// mainly to avoid doing an ajax request on initial page load
+				if($(node).data('id') == loadedNodeID) return;
+
+				var url = $(node).find('a:first').attr('href');
+				if(url && url != '#') {
+
+					if($(node).find('a:first').is(':internal')) url = url = $.path.makeUrlAbsolute(url, $('base').attr('href'));
+					// Reload only edit form if it exists (side-by-side view of tree and edit view), otherwise reload whole panel
+					if(container.find('.cms-edit-form').length) {
+						url += '?cms-view-form=1';
+						container.entwine('ss').loadPanel(url, null, {selector: '.cms-edit-form'});
+					} else {
+						container.entwine('ss').loadPanel(url);	
+					}
+				} else {
+					self.removeForm();
+				}
+			});
+		}
+	});
 	
 	$('.cms-content.loading,.cms-edit-form.loading').entwine({
 		onmatch: function() {
@@ -284,5 +295,22 @@
 			this.find('.cms-content-loading-overlay,.cms-content-loading-spinner').remove();
 		}
 	});
-	
+
+	/**
+	 * Loads the link's 'href' attribute into a panel via ajax,
+	 * as opposed to triggering a full page reload.
+	 * Little helper to avoid repetition, and make it easy to
+	 * "opt in" to panel loading, while by default links still exhibit their default behaviour.
+	 * Same goes for breadcrumbs in the CMS.
+	 */
+	$('.cms-content .cms-panel-link, .cms-content a.crumb').entwine({
+		onclick: function(e) {
+			var href = this.attr('href'), url = href ? href : this.data('href'),
+				data = (this.data('targetPanel')) ? {selector: this.data('targetPanel')} : null;
+			
+			$('.cms-container').entwine('ss').loadPanel(url, null, data);
+			e.preventDefault();
+		}
+	});
+
 })(jQuery);

admin/javascript/LeftAndMain.EditForm.js

@@ -60,7 +60,7 @@
 
 				// Catch navigation events before they reach handleStateChange(),
 				// in order to avoid changing the menu state if the action is cancelled by the user
-				$('.cms-menu')
+				// $('.cms-menu')
 				
 				// focus input on first form element
 				this.find(':input:visible:not(:submit):first').focus();
@@ -172,7 +172,7 @@
 		 * We need this onclick overloading because we can't get to the
 		 * clicked button from a form.onsubmit event.
 		 */
-		$('.cms-edit-form .Actions input, .cms-edit-form .Actions button').entwine({
+		$('.cms-edit-form .Actions :button').entwine({
 			
 			/**
 			 * Function: onclick

admin/javascript/LeftAndMain.Menu.js

@@ -68,10 +68,10 @@
 
 					//show all the flyout-indicators
 					var par = $('.cms-menu-list ul.collapsed-flyout').parent();
-					if (par.children('.child-flyout-indicator').length == 0) par.append('<span class="child-flyout-indicator"></span>').fadeIn();
+					if (par.children('.child-flyout-indicator').length === 0) par.append('<span class="child-flyout-indicator"></span>').fadeIn();
 					par.children('.child-flyout-indicator').fadeIn();
 				}
-			},
+			}
 		});
 
 		$('.cms-menu-list').entwine({
@@ -242,12 +242,12 @@
 				// Only applies to edit forms relating to page elements
 				if(!$('.cms-content').is('.CMSMain')) return;
 
-				var link = this.find('a:first'), href = link.attr("href").split('/')
+				var link = this.find('a:first'), href = link.attr("href").split('/');
 				// Assumes that current ID will always be the last URL segment (and not a query parameter)
 				href[href.length -1] = id;
 				link.attr('href', href.join('/'));
 			}
-		})
+		});
 
 		$('.cms-menu-list #Menu-CMSPageAddController').entwine({
 			setRecordID: function(id) {
@@ -264,5 +264,5 @@
 
 	// Internal Helper
 	$.expr[':'].internal = function(obj){return obj.href.match(/^mailto\:/) || (obj.hostname == location.hostname);};
-	$.expr[':'].external = function(obj){return !$(obj).is(':internal')};
+	$.expr[':'].external = function(obj){return !$(obj).is(':internal');};
 }(jQuery));

admin/javascript/LeftAndMain.Tree.js

@@ -106,7 +106,7 @@
 							// Add ajax settings after init period to avoid unnecessary initial ajax load
 							// of existing tree in DOM - see load_node_html()
 							data.inst._set_settings({'html_data': {'ajax': {
-								'url': self.data('url-tree'),
+								'url': self.data('urlTree'),
 								'data': function(node) {
 									var params = self.data('searchparams') || [];
 									// Avoid duplication of parameters
@@ -145,7 +145,7 @@
 							});
 
 							$.ajax({
-								'url': self.data('url-savetreenode'),
+								'url': self.data('urlSavetreenode'),
 								'data': {
 									ID: $(movedNode).data('id'), 
 									ParentID: $(newParentNode).data('id') || 0,

admin/javascript/LeftAndMain.js

@@ -4,8 +4,6 @@ jQuery.noConflict();
  * File: LeftAndMain.js
  */
 (function($) {
-	$.metadata.setType('html5');
-	
 	// setup jquery.entwine
 	$.entwine.warningLevel = $.entwine.WARN_LEVEL_BESTPRACTISE;
 	$.entwine('ss', function($) {
@@ -18,7 +16,7 @@ jQuery.noConflict();
 			var top = ($(window).height() - spinner.height()) / 2;
 			spinner.css('top', top + offset);
 			spinner.show();
-		}
+		};
 		
 		$(window).bind('resize', positionLoadingSpinner).trigger('resize');
 
@@ -79,7 +77,7 @@ jQuery.noConflict();
 						if(url) window.history.replaceState({}, '', url);
 					}
 					
-					self.redraw()
+					self.redraw();
 				});
 				
 				// Remove loading screen
@@ -98,11 +96,10 @@ jQuery.noConflict();
 				// Move from inner to outer layouts. Some of the elements might not exist.
 				// Not all edit forms are layouted, so qualify by their data value.
 				
-				this.find('.cms-edit-form[data-layout]').redraw(); 
+				this.find('.cms-edit-form[data-layout-type]').redraw(); 
 				
 				// Only redraw preview if its visible
-				var preview = this.find('.cms-preview');
-				if(preview.is(':visible')) preview.redraw();
+				this.find('.cms-preview').redraw();
 
 				// Only redraw the content area if its not the same as the edit form
 				var contentEl = this.find('.cms-content');
@@ -126,9 +123,8 @@ jQuery.noConflict();
 			 *  - {Object} data Any additional data passed through to History.pushState()
 			 */
 			loadPanel: function(url, title, data) {
-				var data = data || {};
-				var selector = data.selector || '.cms-content'
-				var contentEl = $(selector);
+				if(!data) data = {};
+				var selector = data.selector || '.cms-content', contentEl = $(selector);
 				
 				// Check change tracking (can't use events as we need a way to cancel the current state change)
 				var trackedEls = contentEl.find(':data(changetracker)').add(contentEl.filter(':data(changetracker)'));
@@ -148,7 +144,7 @@ jQuery.noConflict();
 					// which matches one class on the menu
 					window.History.pushState(data, title, url);
 				} else {
-					window.location = url;
+					window.location = $.path.makeUrlAbsolute(url, $('base').attr('href'));
 				}
 			},
 			
@@ -220,7 +216,7 @@ jQuery.noConflict();
 						newContentEl
 							.removeClass(layoutClasses.join(' '))
 							.addClass(origLayoutClasses.join(' '));
-						if(origStyle) newContentEl.attr('style', origStyle)
+						if(origStyle) newContentEl.attr('style', origStyle);
 						newContentEl.css('visibility', 'hidden');
 
 						// Allow injection of inline styles, as they're not allowed in the document body.
@@ -260,13 +256,20 @@ jQuery.noConflict();
 		 */
 		$('.cms input[type="submit"], .cms button, .cms input[type="reset"]').entwine({
 			onmatch: function() {
-				this.addClass('ss-ui-button');
-				this.redraw();
+				if(!this.hasClass('ss-ui-button')) this.addClass('ss-ui-button');
 				
 				this._super();
 			}
 		});
 
+		$('.cms .ss-ui-button').entwine({
+			onmatch: function() {
+				if(!this.data('button')) this.button();
+
+				this._super();
+			}
+		});
+
 		/**
 		 * Trigger dialogs with iframe based on the links href attribute (see ssui-core.js).
 		 */
@@ -295,7 +298,7 @@ jQuery.noConflict();
 		/**
 		 * Add styling to all contained buttons, and create buttonsets if required.
 		 */
-		$('.cms-container .Actions').entwine({
+		$('.cms .Actions').entwine({
 		onmatch: function() {
 			this.find('.ss-ui-button').click(function() {
 					var form = this.form;
@@ -312,31 +315,18 @@ jQuery.noConflict();
 			this._super();
 		},
 		redraw: function() {
-			// Needs to be in the same execution frame as the buttonset logic below,
-			// to avoid re-adding rounded corners (default button styling) after removing them
-			this.find('.ss-ui-button').button();
-
 			// Remove whitespace to avoid gaps with inline elements
 			this.contents().filter(function() { 
 				return (this.nodeType == 3 && !/\S/.test(this.nodeValue)); 
 			}).remove();
-			
-			// Emulate jQuery UI buttonsets based on HTML5 data attributes
-			var sets = [], self = this;
-			this.find('.action[buttonset]').each(function() {
-				cl = $(this).attr('buttonset');
-				if($.inArray(cl, sets) == -1) sets.push(cl);
-			});
-			$.each(sets, function(i, set) {
-				// Gather buttons in set until no siblings are matched.
-				// This avoids "split" sets where a new button without a buttonset is inserted somewhere in the middle.
-				self.find('.action[buttonset="' + set + '"]:first')
-					.nextUntil('.action[buttonset!="' + set + '"]').andSelf()
-					.removeClass('ui-corner-all').addClass('buttonset')
-					.first().addClass('ui-corner-left').end()
-					.last().addClass('ui-corner-right');
+
+			// Init buttons if required
+			this.find('.ss-ui-button').each(function() {
+				if(!$(this).data('button')) $(this).button();
 			});
 			
+			// Mark up buttonsets
+			this.find('.ss-ui-buttonset').buttonset();
 		}
 	});
 		
@@ -347,7 +337,7 @@ jQuery.noConflict();
 		 */
 		$('.cms-container .field.date input.text').entwine({
 			onmatch: function() {
-				var holder = $(this).parents('.field.date:first'), config = holder.metadata({type: 'class'});
+				var holder = $(this).parents('.field.date:first'), config = holder.data();
 				if(!config.showcalendar) return;
 
 				config.showOn = 'button';
@@ -388,7 +378,130 @@ jQuery.noConflict();
 				});
 			}
 		});
-	});	 
+	});
+	
+	$('.cms-filter-form').entwine({
+		
+		GridField: null,
+
+		/**
+		 * Function onmatch
+		 *
+		 * Try to find the related gridfield by looking up the data-gridfield attribute on this
+		 * filter form
+		 */
+		onmatch: function() {
+			var gridfieldName = this.attr('data-gridfield');
+			this.setGridField($('.grid[data-name='+gridfieldName+']'));
+			var self = this;
+			this.getGridField().bind('reload', function(e, gridfield){
+				self.setFilterValues($(gridfield).getState());
+			});
+		},
+
+		/**
+		 * Function: onsubmit
+		 * 
+		 * Parameters:
+		 *  (Event) e
+		 */
+		onsubmit: function(e) {
+			this.changeState(jQuery(this).find(':submit:first'));
+			return false;
+		},
+
+
+		/**
+		 * Function: setFilterValues
+		 * 
+		 * Parameters:
+		 *  (JSON) state
+		 *
+		 */
+		setFilterValues: function(state){
+			var filterValues = state.GridFieldFilter.Columns;
+			if(jQuery.isEmptyObject(filterValues)){
+				this.resetFilterForm();
+				return;
+			}
+			this.filterFields().each(function(idx, element) {
+				if(typeof filterValues[element.name] !== "undefined") {
+					$(element).val(filterValues[element.name]);
+				}
+			});
+		},
+
+		/**
+		 * Function: onreset
+		 * 
+		 * Parameters:
+		 *  (Event) e
+		 */
+		onreset: function(e) {
+			if(this.resetFilterForm()) {
+				this.changeState(jQuery(this));
+			}
+			return false;
+		},
+
+		/**
+		 * Function resetFilterForm
+		 * 
+		 **/
+		resetFilterForm: function() {
+			var needUpdate = false;
+			this.filterFields().each(function(idx, element) {
+				if($(element).val()) {
+					needUpdate = true; 
+					$(element).val('');
+				}
+				if($(element).hasClass('chzn-done')){
+					$(element).trigger("liszt:updated");
+				}
+			});
+			return needUpdate;
+		},
+
+		/**
+		 * Function: changeState
+		 * 
+		 * Change the state of the gridfield, reloads it's and set loading classes on elements
+		 * 
+		 * Parameters:
+		 *  (Element) element - the element that will get a loading class added / removed
+		 *
+		 */
+		changeState: function(element) {
+			element.addClass('loading');
+			this.getGridField().setState('GridFieldFilter', {'Columns': this.filterValues()});
+			this.getGridField().reload(null, function(){
+				element.removeClass('loading');
+			});
+		},
+
+		/**
+		 * Function filterFields
+		 * Get all fields that contains filter values
+		 *
+		 */
+		filterFields: function() {
+			return this.find(':input').not(".action, .hidden");
+		},
+
+		/**
+		 * Function: filterValues
+		 * 
+		 * Returns an key-value array for the filter values set in the filter form
+		 *
+		 */
+		filterValues: function() {
+			var filterColumns = {};
+			this.filterFields().each(function(idx,elm){
+				filterColumns[$(elm).attr('name')] = $(elm).val();
+			});
+			return filterColumns;
+		}
+	});
 }(jQuery));
 
 // Backwards compatibility

admin/javascript/ModelAdmin.js

@@ -175,7 +175,7 @@
 		 * 
 		 * RHS panel Delete button
 		 */
-		$('.cms-edit-form input[name=action_doDelete]').entwine({
+		$('.cms-edit-form :submit[name=action_doDelete]').entwine({
 			// Function: onclick
 			onclick: function(e) {
 				if(!confirm(ss.i18n._t('ModelAdmin.REALLYDELETE', 'Really delete?'))) {

admin/javascript/lib.js

@@ -0,0 +1,239 @@
+(function($) {
+
+	// Copyright (c) 2011 John Resig, http://jquery.com/
+
+	// Permission is hereby granted, free of charge, to any person obtaining
+	// a copy of this software and associated documentation files (the
+	// "Software"), to deal in the Software without restriction, including
+	// without limitation the rights to use, copy, modify, merge, publish,
+	// distribute, sublicense, and/or sell copies of the Software, and to
+	// permit persons to whom the Software is furnished to do so, subject to
+	// the following conditions:
+
+	// The above copyright notice and this permission notice shall be
+	// included in all copies or substantial portions of the Software.
+
+	// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+	// EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+	// MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+	// NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+	// LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+	// OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+	// WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+	//define vars for interal use
+	var $window = $( window ),
+		$html = $( 'html' ),
+		$head = $( 'head' ),
+
+		//url path helpers for use in relative url management
+		path = {
+
+			// This scary looking regular expression parses an absolute URL or its relative
+			// variants (protocol, site, document, query, and hash), into the various
+			// components (protocol, host, path, query, fragment, etc that make up the
+			// URL as well as some other commonly used sub-parts. When used with RegExp.exec()
+			// or String.match, it parses the URL into a results array that looks like this:
+			//
+			//     [0]: http://jblas:password@mycompany.com:8080/mail/inbox?msg=1234&type=unread#msg-content
+			//     [1]: http://jblas:password@mycompany.com:8080/mail/inbox?msg=1234&type=unread
+			//     [2]: http://jblas:password@mycompany.com:8080/mail/inbox
+			//     [3]: http://jblas:password@mycompany.com:8080
+			//     [4]: http:
+			//     [5]: //
+			//     [6]: jblas:password@mycompany.com:8080
+			//     [7]: jblas:password
+			//     [8]: jblas
+			//     [9]: password
+			//    [10]: mycompany.com:8080
+			//    [11]: mycompany.com
+			//    [12]: 8080
+			//    [13]: /mail/inbox
+			//    [14]: /mail/
+			//    [15]: inbox
+			//    [16]: ?msg=1234&type=unread
+			//    [17]: #msg-content
+			//
+			urlParseRE: /^(((([^:\/#\?]+:)?(?:(\/\/)((?:(([^:@\/#\?]+)(?:\:([^:@\/#\?]+))?)@)?(([^:\/#\?\]\[]+|\[[^\/\]@#?]+\])(?:\:([0-9]+))?))?)?)?((\/?(?:[^\/\?#]+\/+)*)([^\?#]*)))?(\?[^#]+)?)(#.*)?/,
+
+			//Parse a URL into a structure that allows easy access to
+			//all of the URL components by name.
+			parseUrl: function( url ) {
+				// If we're passed an object, we'll assume that it is
+				// a parsed url object and just return it back to the caller.
+				if ( $.type( url ) === "object" ) {
+					return url;
+				}
+
+				var matches = path.urlParseRE.exec( url || "" ) || [];
+
+					// Create an object that allows the caller to access the sub-matches
+					// by name. Note that IE returns an empty string instead of undefined,
+					// like all other browsers do, so we normalize everything so its consistent
+					// no matter what browser we're running on.
+					return {
+						href:         matches[  0 ] || "",
+						hrefNoHash:   matches[  1 ] || "",
+						hrefNoSearch: matches[  2 ] || "",
+						domain:       matches[  3 ] || "",
+						protocol:     matches[  4 ] || "",
+						doubleSlash:  matches[  5 ] || "",
+						authority:    matches[  6 ] || "",
+						username:     matches[  8 ] || "",
+						password:     matches[  9 ] || "",
+						host:         matches[ 10 ] || "",
+						hostname:     matches[ 11 ] || "",
+						port:         matches[ 12 ] || "",
+						pathname:     matches[ 13 ] || "",
+						directory:    matches[ 14 ] || "",
+						filename:     matches[ 15 ] || "",
+						search:       matches[ 16 ] || "",
+						hash:         matches[ 17 ] || ""
+					};
+			},
+
+			//Turn relPath into an asbolute path. absPath is
+			//an optional absolute path which describes what
+			//relPath is relative to.
+			makePathAbsolute: function( relPath, absPath ) {
+				if ( relPath && relPath.charAt( 0 ) === "/" ) {
+					return relPath;
+				}
+
+				relPath = relPath || "";
+				absPath = absPath ? absPath.replace( /^\/|(\/[^\/]*|[^\/]+)$/g, "" ) : "";
+
+				var absStack = absPath ? absPath.split( "/" ) : [],
+					relStack = relPath.split( "/" );
+				for ( var i = 0; i < relStack.length; i++ ) {
+					var d = relStack[ i ];
+					switch ( d ) {
+						case ".":
+							break;
+						case "..":
+							if ( absStack.length ) {
+								absStack.pop();
+							}
+							break;
+						default:
+							absStack.push( d );
+							break;
+					}
+				}
+				return "/" + absStack.join( "/" );
+			},
+
+			//Returns true if both urls have the same domain.
+			isSameDomain: function( absUrl1, absUrl2 ) {
+				return path.parseUrl( absUrl1 ).domain === path.parseUrl( absUrl2 ).domain;
+			},
+
+			//Returns true for any relative variant.
+			isRelativeUrl: function( url ) {
+				// All relative Url variants have one thing in common, no protocol.
+				return path.parseUrl( url ).protocol === "";
+			},
+
+			//Returns true for an absolute url.
+			isAbsoluteUrl: function( url ) {
+				return path.parseUrl( url ).protocol !== "";
+			},
+
+			//Turn the specified realtive URL into an absolute one. This function
+			//can handle all relative variants (protocol, site, document, query, fragment).
+			makeUrlAbsolute: function( relUrl, absUrl ) {
+				if ( !path.isRelativeUrl( relUrl ) ) {
+					return relUrl;
+				}
+
+				var relObj = path.parseUrl( relUrl ),
+					absObj = path.parseUrl( absUrl ),
+					protocol = relObj.protocol || absObj.protocol,
+					doubleSlash = relObj.protocol ? relObj.doubleSlash : ( relObj.doubleSlash || absObj.doubleSlash ),
+					authority = relObj.authority || absObj.authority,
+					hasPath = relObj.pathname !== "",
+					pathname = path.makePathAbsolute( relObj.pathname || absObj.filename, absObj.pathname ),
+					search = relObj.search || ( !hasPath && absObj.search ) || "",
+					hash = relObj.hash;
+
+				return protocol + doubleSlash + authority + pathname + search + hash;
+			},
+
+			//Add search (aka query) params to the specified url.
+			addSearchParams: function( url, params ) {
+				var u = path.parseUrl( url ),
+					p = ( typeof params === "object" ) ? $.param( params ) : params,
+					s = u.search || "?";
+				return u.hrefNoSearch + s + ( s.charAt( s.length - 1 ) !== "?" ? "&" : "" ) + p + ( u.hash || "" );
+			},
+
+			convertUrlToDataUrl: function( absUrl ) {
+				var u = path.parseUrl( absUrl );
+				if ( path.isEmbeddedPage( u ) ) {
+				    // For embedded pages, remove the dialog hash key as in getFilePath(),
+				    // otherwise the Data Url won't match the id of the embedded Page.
+					return u.hash.split( dialogHashKey )[0].replace( /^#/, "" );
+				} else if ( path.isSameDomain( u, documentBase ) ) {
+					return u.hrefNoHash.replace( documentBase.domain, "" );
+				}
+				return absUrl;
+			},
+
+			//get path from current hash, or from a file path
+			get: function( newPath ) {
+				if( newPath === undefined ) {
+					newPath = location.hash;
+				}
+				return path.stripHash( newPath ).replace( /[^\/]*\.[^\/*]+$/, '' );
+			},
+
+			//return the substring of a filepath before the sub-page key, for making a server request
+			getFilePath: function( path ) {
+				var splitkey = '&' + $.mobile.subPageUrlKey;
+				return path && path.split( splitkey )[0].split( dialogHashKey )[0];
+			},
+
+			//set location hash to path
+			set: function( path ) {
+				location.hash = path;
+			},
+
+			//test if a given url (string) is a path
+			//NOTE might be exceptionally naive
+			isPath: function( url ) {
+				return ( /\// ).test( url );
+			},
+
+			//return a url path with the window's location protocol/hostname/pathname removed
+			clean: function( url ) {
+				return url.replace( documentBase.domain, "" );
+			},
+
+			//just return the url without an initial #
+			stripHash: function( url ) {
+				return url.replace( /^#/, "" );
+			},
+
+			//remove the preceding hash, any query params, and dialog notations
+			cleanHash: function( hash ) {
+				return path.stripHash( hash.replace( /\?.*$/, "" ).replace( dialogHashKey, "" ) );
+			},
+
+			//check whether a url is referencing the same domain, or an external domain or different protocol
+			//could be mailto, etc
+			isExternal: function( url ) {
+				var u = path.parseUrl( url );
+				return u.protocol && u.domain !== documentUrl.domain ? true : false;
+			},
+
+			hasProtocol: function( url ) {
+				return ( /^(:?\w+:)/ ).test( url );
+			}
+	};
+	
+	$.path = path;
+
+	// Internal Helper
+	$.expr[':'].internal = function(obj){return obj.href.match(/^mailto\:/) || (obj.hostname == location.hostname);};
+	$.expr[':'].external = function(obj){return !$(obj).is(':internal')};
+}(jQuery));

admin/javascript/ssui.core.js

@@ -29,6 +29,21 @@
 		}
 	});
 
+	/**
+	 * Allows icon definition via HTML5 data attrs for easier handling in PHP
+	 */
+	$.widget('ssui.button', $.ui.button, {
+		_resetButton: function() {
+			var iconPrimary = this.element.data('iconPrimary') ? this.element.data('iconPrimary') : this.element.data('icon'),
+				iconSecondary = this.element.data('iconSecondary');
+			// TODO Move prefix out of this method, without requriing it for every icon definition in a data attr
+			if(iconPrimary) this.options.icons.primary = 'btn-icon-' + iconPrimary;
+			if(iconSecondary) this.options.icons.secondary = 'btn-icon-' + iconSecondary;
+
+			$.ui.button.prototype._resetButton.call(this);
+		}
+	});
+
 	/**
 	 * Extends jQueryUI dialog with iframe abilities (and related resizing logic),
 	 * and sets some CMS-wide defaults.

admin/scss/_forms.scss

@@ -10,87 +10,6 @@
  * Basic form fields
  * ---------------------------------------------------- */	
 
-/* CMS action button sprite mix-in (used for all the buttons in the bottom row */
-@mixin actionButtonSprite($name) {
-  padding-left: 24px;
-	padding-right: 6px;
-
-	@include background($color-button-generic sprite($btn_icons, $name, 5px, 6px) no-repeat);
-	@include background(sprite($btn_icons, $name, 5px, 5px) no-repeat,
-		linear-gradient(color-stops(
-			lighten($color-button-generic, 10%),
-			darken($color-button-generic, 5%)
-		))
-	);
-	&.ui-state-hover, &:hover {
-		@include background(lighten($color-button-generic, 10%) sprite($btn_icons, $name, 5px, 6px) no-repeat);
-		@include background(sprite($btn_icons, $name, 5px, 5px) no-repeat,
-			linear-gradient(color-stops(
-				lighten($color-button-generic, 20%),
-				$color-button-generic
-			))
-		);
-		@include box-shadow(0 0 5px darken($color-button-generic, 20%));
-	}
-	&:active, &:focus, &.ui-state-active, &.ui-state-focus {
-		border: 1px solid darken($color-button-generic, 20%);
-		@include background(lighten($color-button-generic, 10%) sprite($btn_icons, $name, 5px, 6px) no-repeat);
-		@include background(sprite($btn_icons, $name, 5px, 5px) no-repeat,
-			linear-gradient(color-stops(
-				lighten($color-button-generic, 20%),
-				$color-button-generic
-			))
-		);
-		@include box-shadow(0 0 5px darken($color-button-generic, 30%) inset);
-	}
-	&.ui-state-disabled {
-    background-image: none;
-  	@include background(lighten($color-button-generic, 20%) sprite($btn_icons, $name+_disabled, 5px, 6px) no-repeat);
-		@include background(sprite($btn_icons, $name+_disabled, 5px, 5px) no-repeat,
-			linear-gradient(color-stops(
-				lighten($color-button-generic, 20%),
-				$color-button-generic
-			))
-		);
-	}
-}
-
-@mixin actionButtonSpriteConstructive($name) {
-  background-image: none;
-  padding-left: 24px;
-	padding-right: 6px;
-	font-weight: bold;
-	margin-left: $grid-x;
-	color: $color-text-light;
-	border-color: $color-button-constructive-border;
-	border-bottom-color: darken($color-button-constructive-border, 10%);			
-	@include background($color-button-constructive sprite($btn_icons, $name, 5, 5) no-repeat);
-	@include background(sprite($btn_icons, $name, 5, 5) no-repeat,
-		linear-gradient(color-stops(
-			lighten($color-button-constructive, 10%),
-			darken($color-button-constructive, 5%)
-		))
-	);
-
-	@include text-shadow(darken($color-button-constructive, 10%) 0 1px 1px);
-
-	&.ui-state-hover, &:hover {
-		border-color: darken($color-button-constructive-border, 10%);
-		@include background(lighten($color-button-constructive, 10%) sprite($btn_icons, $name, 6, 6) no-repeat);
-		@include background(sprite($btn_icons, $name, 5, 5) no-repeat,
-			linear-gradient(color-stops(
-				lighten($color-button-constructive, 15%),
-				$color-button-constructive
-			))
-		);
-	}
-	&:active, &:focus, &.ui-state-active, &.ui-state-focus {
-
-		@include background(darken($color-button-constructive, 2%) sprite($btn_icons, $name, 5, 5) no-repeat);
-		@include box-shadow(inset 0 1px 3px rgb(23, 24, 26), 0 1px 0 rgba(255, 255, 255, .6));
-	}
-}
-
 form.nostyle {
 	@include clear-form-field-styles();
 }
@@ -307,26 +226,28 @@ form.small .field, .field.small {
  * Buttons
  * ---------------------------------------------------- */
 
-.Actions {
-	min-height: 30px;
-
-	& > div {
-		overflow: auto;
-	}
-}
-
-.cms-preview-toggle-link {
-	display: block;
-	float: right;
-	font-size: 12px;
-	text-decoration: none;
-	span.ui-button-text{
-		padding:0;
-	}
-}
-
 .cms {
 
+	.Actions, .cms-actions-row {
+		> * {
+			display: block;
+			float: left;
+			margin-right: $grid-x;
+		}
+
+		> *:last-child {
+			margin-right: 0;
+		}
+	}
+
+	.Actions {
+		min-height: 30px;
+
+		& > div {
+			overflow: auto;
+		}
+	}
+
 	input.loading,
 	input.ui-state-default.loading, .ui-widget-content input.ui-state-default.loading, 
 	.ui-widget-header input.ui-state-default.loading {
@@ -341,34 +262,30 @@ form.small .field, .field.small {
 	}
 
 	.ss-ui-button {
-		
+
 		&.buttonset {
 			margin: 0 -1px; // hack to avoid double borders
 		}
 		
-		/* all buttons */
-		padding: ($grid-y - 3) ($grid-x + 4);
 		font-weight: bold;
 		text-decoration: none;
-		margin: 0;
 		line-height: $grid-y * 2;
 		color: lighten($color-text-dark, 10%);
-		background-color: $color-button-generic;
 		border: 1px solid $color-button-generic-border;
 		border-bottom: 1px solid darken($color-button-generic-border, 10%);
 		cursor: pointer;
-		
 		@include text-shadow(lighten($color-button-generic, 20%) 0 1px 1px);
-		
-		@include background($color-button-generic);
+		background-color: $color-button-generic;
 		@include background(
 			linear-gradient(color-stops(
 				lighten($color-button-generic, 10%),
 				darken($color-button-generic, 5%)
 			))
 		);
+
 		&.ui-state-hover, &:hover {
-			@include background(lighten($color-button-generic, 10%));
+			text-decoration: none;
+			background-color: lighten($color-button-generic, 10%);
 			@include background(
 				linear-gradient(color-stops(
 					lighten($color-button-generic, 20%),
@@ -377,9 +294,10 @@ form.small .field, .field.small {
 			);
 			@include box-shadow(0 0 5px darken($color-button-generic, 20%));
 		}
+
 		&:active, &:focus, &.ui-state-active, &.ui-state-focus {
 			border: 1px solid darken($color-button-generic, 20%);
-			@include background(lighten($color-button-generic, 10%) no-repeat);
+			background-color: lighten($color-button-generic, 10%);
 			@include background(
 				linear-gradient(color-stops(
 					lighten($color-button-generic, 20%),
@@ -391,38 +309,39 @@ form.small .field, .field.small {
 
 		/* constructive */
 		&.ss-ui-action-constructive {
-			@include actionButtonSpriteConstructive('accept');
+			font-weight: bold;
+			color: $color-text-light;
+			border-color: $color-button-constructive-border;
+			border-bottom-color: darken($color-button-constructive-border, 10%);			
+			background-color: $color-button-constructive;
+			@include background(
+				linear-gradient(color-stops(
+					lighten($color-button-constructive, 10%),
+					darken($color-button-constructive, 5%)
+				))
+			);
+			@include text-shadow(darken($color-button-constructive, 10%) 0 1px 1px);
+
+			&.ui-state-hover, &:hover {
+				border-color: darken($color-button-constructive-border, 10%);
+				background-color: lighten($color-button-constructive, 10%);
+				@include background(
+					linear-gradient(color-stops(
+						lighten($color-button-constructive, 15%),
+						$color-button-constructive
+					))
+				);
+			}
+			&:active, &:focus, &.ui-state-active, &.ui-state-focus {
+				background-color: darken($color-button-constructive, 2%);
+				@include box-shadow(inset 0 1px 3px rgb(23, 24, 26), 0 1px 0 rgba(255, 255, 255, .6));
+			}
 		}
 		
-		&.cms-page-add-button {
-			@include actionButtonSpriteConstructive('add');
-			@include border-radius(4px);
-
-		}
 		/* destructive */
 		&.ss-ui-action-destructive {
 			color: $color-button-destructive;
 			background-color: $color-button-generic;
-		
-			&.delete {
-				@include actionButtonSprite('decline');
-			}
-
-			&.unpublish {
-			    @include actionButtonSprite('unpublish');
-			}
-		}
-
-		/* generic action buttons */
-		&.save-draft {
-		    @include actionButtonSprite('addpage');
-		}
-
-		&.cms-preview-toggle-link {
-		  padding-left: 24px !important;
-			margin-left: 4px !important;
-			text-decoration: none;
-			@include actionButtonSprite('preview');
 		}
 
 		&.ss-ui-button-small {
@@ -436,7 +355,6 @@ form.small .field, .field.small {
 
 		&.ss-ui-action-minor {
 			background: none;
-			padding: 0;
 			border: 0;
 			color: lighten($color-text-dark, 10%);
 			text-decoration: underline;

admin/scss/_sprites.scss

@@ -1,15 +1,18 @@
 /**
  * Helper SCSS file for generating sprites for the interface.
- *
- * S
  */
 @import "compass/utilities/sprites/base";
 
-$icon24: sprite-map("menu_icons/24x24/*.png");
-$icon16: sprite-map("menu_icons/16x16/*.png");
+@import "btn-icon/*.png";
+.ui-state-default {
+	@include all-btn-icon-sprites;
+}
 
-$btn_icons: sprite-map("btn_icons/*.png", $spacing: 10px);
-$sprites32: sprite-map("sprites_32x32/*.png", $spacing: 10px);
+$icon24: sprite-map("menu-icons/24x24/*.png");
+$icon16: sprite-map("menu-icons/16x16/*.png");
+
+$btn-icon: sprite-map("btn-icon/*.png", $spacing: 10px);
+$sprites32: sprite-map("sprites-32x32/*.png", $spacing: 10px);
 
 @mixin icons($sprite) {
 	background: $sprite;

admin/scss/_style.scss

@@ -53,16 +53,6 @@ body.cms {
 	strong {
 		font-weight: bold;
 	}
-
-	.ss-ui-button.cms-page-add-button {
-		margin-left:0px;
-		font-size:13px;
-		@include border-radius(4px);
-	}
-
-	.ss-ui-button.cms-page-add-button:hover {
-		text-decoration:none;
-	}
 }
 
 /** --------------------------------------------
@@ -334,7 +324,6 @@ body.cms {
 	@include box-shadow($tab-panel-texture-color 0 $grid-y*-2 $grid-y*2);
 }
 
-
 /** --------------------------------------------
  * Messages
  * -------------------------------------------- */
@@ -520,13 +509,13 @@ body.cms {
  		}
 
 		div {
-			background:url(../images/btn_icons/settings.png) 5px 6px no-repeat;
+			background:url(../images/btn-icon/settings.png) 5px 4px no-repeat;
 			border-left:none;
 			width:100%;
 		}
 
 		div b {
-			background: url(../images/sprites_32x32/menu-arrow-deselected-down.png) no-repeat 9px 11px;
+			background: url(../images/sprites-32x32/menu-arrow-deselected-down.png) no-repeat 9px 11px;
 			float:right;
 			width:24px;
 		}	
@@ -624,13 +613,6 @@ body.cms {
 		}
 	}
 
-
-		
-	/* buttons now need to line with with reduced input sizes */
-	.ss-ui-button {
-		padding: 5px $grid-x;
-	}
-		
 	.fieldgroup {
 		.fieldgroup-field {
 			width: auto;
@@ -686,9 +668,6 @@ body.cms {
 /** 
  * CMS Batch actions
  */
-.cms-content-constructive-actions {
-	float: left;
-}
 
 .cms-content-batchactions {
 	float: left;
@@ -709,11 +688,6 @@ body.cms {
 	}
 }
 
-.cms-content-constructive-actions a {
-	display: block;
-	float: right;
-}
-
 #Form_BatchActionsForm select {
 	width: 200px;
 }
@@ -791,15 +765,18 @@ body.cms {
 
 		.cms-preview-toggle-link {
 			float: right;
-			.ui-button-text{
-				padding:0;
-			}
-
 		}
 	}
 	
 }
 
+.cms-preview-toggle-link {
+	display: block;
+	float: right;
+	font-size: 12px;
+	text-decoration: none;
+}
+
 .cms-preview-header {
 	background-color: #FFBE66;
 	padding: 10px;

admin/scss/_uitheme.scss

@@ -39,7 +39,7 @@
 		
 		.ui-tabs-panel {
 			background: transparent; // default it's white
-			padding: $grid-y * 2 $grid-x * 5 $grid-y * 2 ($grid-x * 3 + 1);
+			padding: 0;
 		}
 	}
 

admin/scss/ie7.scss

@@ -19,7 +19,7 @@ html {
 }
 
 .ss-ui-button.cms-page-add-button.ui-state-hover, .cms .ss-ui-button.cms-page-add-button:hover { 
-	background: #80bf40 url('../images/btn_icons-saaa1989272.png') 5px -49px no-repeat; 
+	background: #80bf40 url('../images/btn-icon-saaa1989272.png') 5px -49px no-repeat; 
 }
 
 //fix for the tree view modes not displaying inline

admin/scss/ie8.scss

@@ -19,7 +19,7 @@
 
 //fix for the button icon shifting on hover
 .ss-ui-button.cms-page-add-button.ui-state-hover, .cms .ss-ui-button.cms-page-add-button:hover { 
-	background: #80bf40 url('../images/btn_icons-saaa1989272.png') 5px -49px no-repeat; 
+	background: #80bf40 url('../images/btn-icon-saaa1989272.png') 5px -49px no-repeat; 
 }
 
 //fix for background color on default tabs

admin/templates/Includes/LeftAndMain_Content.ss

@@ -1,4 +1,4 @@
-<div class="cms-content center" data-layout="{type: 'border'}"  style="display: inline-block;">
+<div class="cms-content center" data-layout-type="border">
 
 	$Tools
 

admin/templates/Includes/LeftAndMain_EditForm.ss

@@ -1,5 +1,5 @@
 <% if IncludeFormTag %>
-<form $FormAttributes data-layout="{type: 'border'}">
+<form $FormAttributes data-layout-type="border">
 <% end_if %>
 	<div class="cms-content-header north">
 		<div>
@@ -28,7 +28,7 @@
 		$EditFormTools	
 	<% end_control %>
 	
-	<div class="cms-content-fields center">
+	<div class="cms-content-fields center cms-panel-padded">
 		<% if Message %>
 		<p id="{$FormName}_error" class="message $MessageType">$Message</p>
 		<% else %>
@@ -51,7 +51,7 @@
 				$Field
 			<% end_control %>
 			<% if CurrentPage.PreviewLink %>
-			<a href="$CurrentPage.PreviewLink" class="cms-preview-toggle-link ss-ui-button">
+			<a href="$CurrentPage.PreviewLink" class="cms-preview-toggle-link ss-ui-button" data-icon="preview">
 				<% _t('LeftAndMain.PreviewButton', 'Preview') %> &raquo;
 			</a>
 			<% end_if %>

admin/templates/Includes/LeftAndMain_Menu.ss

@@ -1,4 +1,4 @@
-<div class="cms-menu cms-panel cms-panel-layout west" id="cms-menu" data-layout="{type: 'border'}">
+<div class="cms-menu cms-panel cms-panel-layout west" id="cms-menu" data-layout-type="border">
 	<div class="cms-logo-header north">
 		<div class="cms-logo">
 			<a href="http://www.silverstripe.org/" target="_blank" title="SilverStripe (Version - $CMSVersion)">

admin/templates/Includes/LeftAndMain_SilverStripeNavigator.ss

@@ -1,5 +1,5 @@
 <div class="cms-navigator">
-	<a href="#" class="ss-ui-button cms-preview-toggle-link">
+	<a href="#" class="ss-ui-button cms-preview-toggle-link" data-icon="preview">
 		&laquo; <% _t('SilverStripeNavigator.Edit', 'Edit') %>
 	</a>
 	<ul class="cms-preview-states">

admin/templates/Includes/ModelAdmin_Content.ss

@@ -1,4 +1,4 @@
-<div class="cms-content center $BaseCSSClasses" data-layout="{type: 'border'}">
+<div class="cms-content center $BaseCSSClasses" data-layout-type="border">
 
 	<div class="cms-content-header north">
 		<div>

admin/templates/Includes/ModelAdmin_Tools.ss

@@ -1,4 +1,4 @@
-<div class="cms-content-tools west cms-panel cms-panel-layout" data-expandOnClick="true" data-layout="{type: 'border'}">	
+<div class="cms-content-tools west cms-panel cms-panel-layout" data-expandOnClick="true" data-layout-type="border">	
 	<div class="cms-panel-content center">
 		<h3 class="cms-panel-header"><% _t('Filter', 'Filter') %></h3>
 	

admin/templates/Includes/SecurityAdmin_Content.ss

@@ -1,4 +1,4 @@
-<div class="cms-content center $BaseCSSClasses" data-layout="{type: 'border'}">
+<div class="cms-content center $BaseCSSClasses" data-layout-type="border">
 	<div class="cms-content-tools west">
 		<div class="cms-content-header north">
 			<div>

admin/templates/LeftAndMain.ss

@@ -10,13 +10,13 @@
 	
 	<% include CMSLoadingScreen %>
 	
-	<div class="cms-container center" data-layout="{type: 'border'}">
+	<div class="cms-container center" data-layout-type="border">
 	
 		$Menu
 
 		$Content
 		
-		<div class="cms-preview east <% if IsPreviewExpanded %>is-expanded<% else %>is-collapsed<% end_if %>" data-layout="{type: 'border'}">
+		<div class="cms-preview east <% if IsPreviewExpanded %>is-expanded<% else %>is-collapsed<% end_if %>" data-layout-type="border">
 			<iframe src="about:blank" class="center" name="cms-preview-iframe"></iframe>
 			<div class="cms-preview-controls south"></div>
 		</div>

admin/thirdparty/jlayout/lib/jquery.jlayout.js

@@ -119,8 +119,10 @@ if (jQuery && jLayout) {
 			return $.each(this, function () {
 				var element = $(this),
 					o = $.metadata && element.metadata().layout ? $.extend(opts, element.metadata().layout) : opts,
+					// CUSTOM ischommer 2012-16-02 Allow type setting throgh built-in jQuery HTML5 data getters, to avoid including jQuery.metadata.js
+					o = element.data('layoutType') ? $.extend(o, {type: element.data('layoutType')}) : o,
+					// CUSTOM END
 					elementWrapper = wrap(element, o.resize);
-
 				if (o.type === 'border' && typeof jLayout.border !== 'undefined') {                
 					$.each(['north', 'south', 'west', 'east', 'center'], function (i, name) {
 						if (element.children().hasClass(name)) {

core/Convert.php

@@ -273,8 +273,8 @@ class Convert {
 		/* $data = eregi_replace("<style(^A-Za-z0-9>][^>]*)?>.*</style[^>]*>","", $data);*/
 		/* $data = eregi_replace("<script(^A-Za-z0-9>][^>]*)?>.*</script[^>]*>","", $data);*/
 		
-		$data = preg_replace("/<style(^A-Za-z0-9>][^>]*)?>.*?<\/style[^>]*>/i","", $data);
-		$data = preg_replace("/<script(^A-Za-z0-9>][^>]*)?>.*?<\/script[^>]*>/i","", $data);
+		$data = preg_replace("/<style([^A-Za-z0-9>][^>]*)?>.*?<\/style[^>]*>/is","", $data);
+		$data = preg_replace("/<script([^A-Za-z0-9>][^>]*)?>.*?<\/script[^>]*>/is","", $data);
 
 		if($config['ReplaceBoldAsterisk']) {
 			$data = preg_replace('%<(strong|b)( [^>]*)?>|</(strong|b)>%i','*',$data);

css/AssetUploadField.css

@@ -4,11 +4,10 @@
 /** ----------------------------------------------- Typography.  ------------------------------------------------ */
 /** ----------------------------------------------- Grid Units (px)  We have a vertical rhythm that the grid is based off both x (=horizontal) and y (=vertical). All internal padding and margins are scaled to this and accounting for paragraphs ------------------------------------------------ */
 /** ----------------------------------------------- Application Logo (CMS Logo) Must be 24px x 24px ------------------------------------------------ */
-/** Helper SCSS file for generating sprites for the interface. */
-/* CMS action button sprite mix-in for UploadField, copied from admin/scss/_forms.scss */
 #AssetUploadField { border-bottom: 0; -moz-box-shadow: none; -webkit-box-shadow: none; -o-box-shadow: none; box-shadow: none; }
 
 .ss-assetuploadfield h3 { border-bottom: 1px solid rgba(201, 205, 206, 0.8); -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8); -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8); -o-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8); margin: 0 0 8px; padding: 0 0 7px; clear: both; }
+.ss-assetuploadfield .field { border-bottom: 0; }
 .ss-assetuploadfield .ss-uploadfield-files { margin: 0; padding: 0; }
 .ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item { border: 1px solid #b3b3b3; -moz-border-radius: 5px; -webkit-border-radius: 5px; -o-border-radius: 5px; -ms-border-radius: 5px; -khtml-border-radius: 5px; border-radius: 5px; -moz-background-clip: padding; -webkit-background-clip: padding; -o-background-clip: padding-box; -ms-background-clip: padding-box; -khtml-background-clip: padding-box; background-clip: padding-box; background: #E2E2E2; margin: 0 0 5px; padding: 0; overflow: hidden; position: relative; }
 .ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item-preview { position: absolute; height: 30px; width: 40px; overflow: hidden; z-index: 1; }
@@ -20,22 +19,20 @@
 .ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item-status { float: right; padding: 0 0 0 5px; }
 .ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item-status.ui-state-error-text { color: red; font-weight: bold; }
 .ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item-actions { position: absolute; top: 0; right: 0; left: 0; z-index: 0; }
-.ss-assetuploadfield .ss-uploadfield-files label.ss-ui-button { background: none; border: 0; -moz-box-shadow: none; -webkit-box-shadow: none; -o-box-shadow: none; box-shadow: none; text-shadow: none; color: white; float: right; }
-.ss-assetuploadfield .ss-uploadfield-files label.ss-ui-button.ss-uploadfield-item-delete { display: none; }
-.ss-assetuploadfield .ss-uploadfield-files label.ss-ui-button.ss-uploadfield-item-edit { padding-top: 0; padding-bottom: 0; line-height: 30px; }
+.ss-assetuploadfield .ss-uploadfield-files .ss-ui-button { background: none; border: 0; -moz-box-shadow: none; -webkit-box-shadow: none; -o-box-shadow: none; box-shadow: none; text-shadow: none; color: white; float: right; }
+.ss-assetuploadfield .ss-uploadfield-files .ss-ui-button.ss-uploadfield-item-delete { display: none; }
+.ss-assetuploadfield .ss-uploadfield-files .ss-ui-button.ss-uploadfield-item-edit { padding-top: 0; padding-bottom: 0; line-height: 30px; }
+.ss-assetuploadfield .ss-uploadfield-files .ss-ui-button .ui-icon { display: none; }
 .ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item-progress { width: 100%; }
 .ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item-progress div { -moz-border-radius: 5px; -webkit-border-radius: 5px; -o-border-radius: 5px; -ms-border-radius: 5px; -khtml-border-radius: 5px; border-radius: 5px; height: 30px; padding: 0; margin: 0; overflow: hidden; width: 100%; }
 .ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item-progress .ss-uploadfield-item-progressbar { background-color: #92a6b3; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #92a6b3), color-stop(11%, #90aab8), color-stop(22%, #96b1bf), color-stop(33%, #9eb4c1), color-stop(44%, #a7bac7), color-stop(100%, #c1d5dc)); background-image: -webkit-linear-gradient(top, #92a6b3 0%, #90aab8 11%, #96b1bf 22%, #9eb4c1 33%, #a7bac7 44%, #c1d5dc 100%); background-image: -moz-linear-gradient(top, #92a6b3 0%, #90aab8 11%, #96b1bf 22%, #9eb4c1 33%, #a7bac7 44%, #c1d5dc 100%); background-image: -o-linear-gradient(top, #92a6b3 0%, #90aab8 11%, #96b1bf 22%, #9eb4c1 33%, #a7bac7 44%, #c1d5dc 100%); background-image: -ms-linear-gradient(top, #92a6b3 0%, #90aab8 11%, #96b1bf 22%, #9eb4c1 33%, #a7bac7 44%, #c1d5dc 100%); background-image: linear-gradient(top, #92a6b3 0%, #90aab8 11%, #96b1bf 22%, #9eb4c1 33%, #a7bac7 44%, #c1d5dc 100%); }
 .ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item-progress .ss-uploadfield-item-progressbarvalue { width: 0; background: #60b3dd url(../images/progressbar_blue.gif) repeat left center; }
 .ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item-cancel { position: absolute; top: 7px; right: 7px; }
-.ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item-cancel button { display: block; overflow: hidden; text-indent: -9999px; padding: 0; margin: 0; border: 0; width: 16px; height: 16px; cursor: pointer; -moz-box-shadow: none; -webkit-box-shadow: none; -o-box-shadow: none; box-shadow: none; background: url('../images/sprites_16x16-scf81c570f3.png') 0 0 no-repeat; }
+.ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item-cancel button { display: block; overflow: hidden; text-indent: -9999px; padding: 0; margin: 0; border: 0; width: 16px; height: 16px; cursor: pointer; -moz-box-shadow: none; -webkit-box-shadow: none; -o-box-shadow: none; box-shadow: none; }
 .ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item-editform { /* don't use display none, for it will break jQuery('iframe').contents().height() */ height: 0; overflow: hidden; clear: both; }
 .ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item-editform iframe { width: 100%; }
-.ss-assetuploadfield .ss-uploadfield-addfile { height: 70px; padding: 5px 15px 15px; }
 .ss-assetuploadfield .ss-uploadfield-addfile .ss-uploadfield-item-info { float: left; margin: 19px 0 0; }
-.ss-assetuploadfield .ss-uploadfield-addfile .ss-uploadfield-fromcomputer { position: relative; overflow: hidden; display: block; margin: 0 10px 0 0; background-image: none; padding-left: 25px; padding-right: 7px; font-weight: bold; margin-left: 8px; color: white; border-color: #78a127; border-bottom-color: #59781d; background: #669933 url('../images/sprites_16x16-scf81c570f3.png') 6px -46px no-repeat; background: url('../images/sprites_16x16-scf81c570f3.png') 6px -46px no-repeat, -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #80bf40), color-stop(100%, #59862d)); background: url('../images/sprites_16x16-scf81c570f3.png') 6px -46px no-repeat, -webkit-linear-gradient(#80bf40, #59862d); background: url('../images/sprites_16x16-scf81c570f3.png') 6px -46px no-repeat, -moz-linear-gradient(#80bf40, #59862d); background: url('../images/sprites_16x16-scf81c570f3.png') 6px -46px no-repeat, -o-linear-gradient(#80bf40, #59862d); background: url('../images/sprites_16x16-scf81c570f3.png') 6px -46px no-repeat, -ms-linear-gradient(#80bf40, #59862d); background: url('../images/sprites_16x16-scf81c570f3.png') 6px -46px no-repeat, linear-gradient(#80bf40, #59862d); text-shadow: #4d7326 0 1px 1px; }
-.ss-assetuploadfield .ss-uploadfield-addfile .ss-uploadfield-fromcomputer.ui-state-hover { border-color: #59781d; background: #80bf40 url('../images/sprites_16x16-scf81c570f3.png') 6px -46px no-repeat; background: url('../images/sprites_16x16-scf81c570f3.png') 6px -46px no-repeat, -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #8cc653), color-stop(100%, #669933)); background: url('../images/sprites_16x16-scf81c570f3.png') 6px -46px no-repeat, -webkit-linear-gradient(#8cc653, #669933); background: url('../images/sprites_16x16-scf81c570f3.png') 6px -46px no-repeat, -moz-linear-gradient(#8cc653, #669933); background: url('../images/sprites_16x16-scf81c570f3.png') 6px -46px no-repeat, -o-linear-gradient(#8cc653, #669933); background: url('../images/sprites_16x16-scf81c570f3.png') 6px -46px no-repeat, -ms-linear-gradient(#8cc653, #669933); background: url('../images/sprites_16x16-scf81c570f3.png') 6px -46px no-repeat, linear-gradient(#8cc653, #669933); }
-.ss-assetuploadfield .ss-uploadfield-addfile .ss-uploadfield-fromcomputer:active, .ss-assetuploadfield .ss-uploadfield-addfile .ss-uploadfield-fromcomputer:focus { padding: 8px 8px 8px 26px; border: none; background: #619130 url('../images/sprites_16x16-scf81c570f3.png') 7px -45px no-repeat; -moz-box-shadow: inset 0 1px 3px #17181a, 0 1px 0 rgba(255, 255, 255, 0.6); -webkit-box-shadow: inset 0 1px 3px #17181a, 0 1px 0 rgba(255, 255, 255, 0.6); -o-box-shadow: inset 0 1px 3px #17181a, 0 1px 0 rgba(255, 255, 255, 0.6); box-shadow: inset 0 1px 3px #17181a, 0 1px 0 rgba(255, 255, 255, 0.6); }
+.ss-assetuploadfield .ss-uploadfield-addfile .ss-uploadfield-fromcomputer { position: relative; overflow: hidden; display: block; margin: 0 10px 0 0; }
 .ss-assetuploadfield .ss-uploadfield-addfile .ss-uploadfield-item-uploador { float: left; font-weight: bold; font-size: 22px; padding: 0 20px; line-height: 70px; display: none; }
 .ss-assetuploadfield .ss-uploadfield-addfile .ss-uploadfield-dropzone { -moz-border-radius: 10px; -webkit-border-radius: 10px; -o-border-radius: 10px; -ms-border-radius: 10px; -khtml-border-radius: 10px; border-radius: 10px; -moz-box-shadow: #9a9a9a 0 0 3px 3px inset; -webkit-box-shadow: #9a9a9a 0 0 3px 3px inset; -o-box-shadow: #9a9a9a 0 0 3px 3px inset; box-shadow: #9a9a9a 0 0 3px 3px inset; border: 2px dashed gray; background: rgba(201, 205, 206, 0.8); display: none; height: 66px; width: 300px; float: left; }
 .ss-assetuploadfield .ss-uploadfield-addfile .ss-uploadfield-dropzone div { padding: 15px 0 0; line-height: 22px; font-size: 20px; font-weight: bold; text-align: center; }

css/GridField.css

@@ -1,41 +1,41 @@
 /** Core styles for the basic GridField form field without any specific style.  @package sapphire @subpackage scss @todo Add radial gradient to default delete button state @todo Create SASS mixin-function to simply swap the from/to, to to/from colours in grsdient mixins? */
-.cms fieldset.ss-gridfield > div { margin-bottom: 35px; }
-.cms fieldset.ss-gridfield[data-selectable] tr.ui-selected, .cms fieldset.ss-gridfield[data-selectable] tr.ui-selecting { background: #FFFAD6 !important; }
-.cms fieldset.ss-gridfield[data-selectable] td { cursor: pointer; }
-.cms table.ss-gridfield.field { display: table; box-shadow: none; padding: 0; margin: 20px 0 0 0; border-collapse: separate; border-bottom: 0 none; width: 100%; }
-.cms table.ss-gridfield.field thead { color: #1d2224; background: transparent; }
-.cms table.ss-gridfield.field tbody { background: #FFF; }
-.cms table.ss-gridfield.field tbody td { /* Emulate a link by default */ }
-.cms table.ss-gridfield.field tbody td button { border: none; background: none; margin: 0 0 0 2px; padding: 0; width: auto; text-shadow: none; }
-.cms table.ss-gridfield.field tfoot { color: #1d2224; }
-.cms table.ss-gridfield.field tfoot tr td { background: #95a5ab; padding: .7em; border-bottom: 1px solid rgba(0, 0, 0, 0.1); }
-.cms table.ss-gridfield.field tr.sortable-header th { background: #7f9198; }
-.cms table.ss-gridfield.field tr:hover { background: #FFFAD6 !important; }
-.cms table.ss-gridfield.field tr:first-child { background: transparent; }
-.cms table.ss-gridfield.field tr.ss-gridfield-even { background: #f0f4f7; }
-.cms table.ss-gridfield.field tr.ss-gridfield-even.ss-gridfield-last { border-bottom: none; }
-.cms table.ss-gridfield.field tr.even { background: #f0f4f7; }
-.cms table.ss-gridfield.field tr th { font-weight: bold; font-size: 12px; color: #FFF; padding: 5px; border-right: 1px solid rgba(0, 0, 0, 0.1); }
-.cms table.ss-gridfield.field tr th.main:first-child { -moz-border-radius-topleft: 7px; -webkit-border-top-left-radius: 7px; -o-border-top-left-radius: 7px; -ms-border-top-left-radius: 7px; -khtml-border-top-left-radius: 7px; border-top-left-radius: 7px; }
-.cms table.ss-gridfield.field tr th.main:last-child { -moz-border-radius-topright: 7px; -webkit-border-top-right-radius: 7px; -o-border-top-right-radius: 7px; -ms-border-top-right-radius: 7px; -khtml-border-top-right-radius: 7px; border-top-right-radius: 7px; }
-.cms table.ss-gridfield.field tr th div.fieldgroup, .cms table.ss-gridfield.field tr th div.fieldgroup-field { width: auto; }
-.cms table.ss-gridfield.field tr th div.fieldgroup { min-width: 200px; padding-right: 0; }
-.cms table.ss-gridfield.field tr th.extra, .cms table.ss-gridfield.field tr th.action { background: #7f9198; padding: 0; cursor: default; }
-.cms table.ss-gridfield.field tr th.extra button.ss-ui-button, .cms table.ss-gridfield.field tr th.extra button:hover.ss-ui-button, .cms table.ss-gridfield.field tr th.action button.ss-ui-button, .cms table.ss-gridfield.field tr th.action button:hover.ss-ui-button { margin-left: .9em; color: #222; }
-.cms table.ss-gridfield.field tr th.main { border-top: 1px solid rgba(0, 0, 0, 0.1); color: #fff; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #b1c0c5), color-stop(100%, #7f9198)); background-image: -webkit-linear-gradient(#b1c0c5, #7f9198); background-image: -moz-linear-gradient(#b1c0c5, #7f9198); background-image: -o-linear-gradient(#b1c0c5, #7f9198); background-image: -ms-linear-gradient(#b1c0c5, #7f9198); background-image: linear-gradient(#b1c0c5, #7f9198); }
-.cms table.ss-gridfield.field tr th.main span { text-shadow: rgba(0, 0, 0, 0.3) 0px -1px 0; }
-.cms table.ss-gridfield.field tr th.extra { background: #bac8ce; padding: 5px; border-top: rgba(0, 0, 0, 0.3); }
-.cms table.ss-gridfield.field tr th.extra span { width: auto; display: inline; position: static; }
-.cms table.ss-gridfield.field tr th.extra button.ss-ui-button { padding: .3em; line-height: 1; -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; position: relative; border-bottom-width: 0; -webkit-border-radius: 2px 2px; -moz-border-radius: 2px / 2px; -o-border-radius: 2px / 2px; -ms-border-radius: 2px / 2px; -khtml-border-radius: 2px / 2px; border-radius: 2px / 2px; }
-.cms table.ss-gridfield.field tr th.action { border-right: 0; }
-.cms table.ss-gridfield.field tr th.first { -moz-border-radius-topleft: 7px; -webkit-border-top-left-radius: 7px; -o-border-top-left-radius: 7px; -ms-border-top-left-radius: 7px; -khtml-border-top-left-radius: 7px; border-top-left-radius: 7px; }
-.cms table.ss-gridfield.field tr th.last { -moz-border-radius-topright: 7px; -webkit-border-top-right-radius: 7px; -o-border-top-right-radius: 7px; -ms-border-top-right-radius: 7px; -khtml-border-top-right-radius: 7px; border-top-right-radius: 7px; }
-.cms table.ss-gridfield.field tr th button:hover { color: #ccc !important; /* Not sure why IE think it needs this */ }
-.cms table.ss-gridfield.field tr th button.ss-gridfield-sort:hover { color: #fff !important; -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; }
-.cms table.ss-gridfield.field tr th button.ss-gridfield-sort { background: transparent url(../images/arrows-01.png) no-repeat right 2px; border: none; width: 100%; text-align: left; padding: 4px 0; text-shadow: rgba(0, 0, 0, 0.3) 0px -1px 0; color: #fff; -moz-border-radius: 0; -webkit-border-radius: 0; -o-border-radius: 0; -ms-border-radius: 0; -khtml-border-radius: 0; border-radius: 0; }
-.cms table.ss-gridfield.field tr th input.ss-gridfield-sort { padding: 2px; }
-.cms table.ss-gridfield.field tr th input.ss-gridfield-sort:focus { -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; }
-.cms table.ss-gridfield.field tr td { border-right: 1px solid rgba(0, 0, 0, 0.1); padding: 7px 12px; color: #666666; }
-.cms table.ss-gridfield.field tr td.bottom-all { -moz-border-radius-bottomleft: 7px; -webkit-border-bottom-left-radius: 7px; -o-border-bottom-left-radius: 7px; -ms-border-bottom-left-radius: 7px; -khtml-border-bottom-left-radius: 7px; border-bottom-left-radius: 7px; -moz-border-radius-bottomright: 7px; -webkit-border-bottom-right-radius: 7px; -o-border-bottom-right-radius: 7px; -ms-border-bottom-right-radius: 7px; -khtml-border-bottom-right-radius: 7px; border-bottom-right-radius: 7px; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #b1c0c5), color-stop(100%, #7f9198)); background-image: -webkit-linear-gradient(#b1c0c5, #7f9198); background-image: -moz-linear-gradient(#b1c0c5, #7f9198); background-image: -o-linear-gradient(#b1c0c5, #7f9198); background-image: -ms-linear-gradient(#b1c0c5, #7f9198); background-image: linear-gradient(#b1c0c5, #7f9198); }
-.cms table.ss-gridfield.field tr.last td { border-bottom: 0 none; }
-.cms table.ss-gridfield.field td:first-child, .cms table.ss-gridfield.field th:first-child { border-left: 1px solid rgba(0, 0, 0, 0.1); }
+.cms .ss-gridfield > div { margin-bottom: 35px; }
+.cms .ss-gridfield[data-selectable] tr.ui-selected, .cms .ss-gridfield[data-selectable] tr.ui-selecting { background: #FFFAD6 !important; }
+.cms .ss-gridfield[data-selectable] td { cursor: pointer; }
+.cms table.ss-gridfield-table { display: table; box-shadow: none; padding: 0; border-collapse: separate; border-bottom: 0 none; width: 100%; }
+.cms table.ss-gridfield-table thead { color: #1d2224; background: transparent; }
+.cms table.ss-gridfield-table tbody { background: #FFF; }
+.cms table.ss-gridfield-table tbody td { /* Emulate a link by default */ }
+.cms table.ss-gridfield-table tbody td button { border: none; background: none; margin: 0 0 0 2px; padding: 0; width: auto; text-shadow: none; }
+.cms table.ss-gridfield-table tfoot { color: #1d2224; }
+.cms table.ss-gridfield-table tfoot tr td { background: #95a5ab; padding: .7em; border-bottom: 1px solid rgba(0, 0, 0, 0.1); }
+.cms table.ss-gridfield-table tr.sortable-header th { background: #7f9198; }
+.cms table.ss-gridfield-table tr:hover { background: #FFFAD6 !important; }
+.cms table.ss-gridfield-table tr:first-child { background: transparent; }
+.cms table.ss-gridfield-table tr.ss-gridfield-even { background: #f0f4f7; }
+.cms table.ss-gridfield-table tr.ss-gridfield-even.ss-gridfield-last { border-bottom: none; }
+.cms table.ss-gridfield-table tr.even { background: #f0f4f7; }
+.cms table.ss-gridfield-table tr th { font-weight: bold; font-size: 12px; color: #FFF; padding: 5px; border-right: 1px solid rgba(0, 0, 0, 0.1); }
+.cms table.ss-gridfield-table tr th.main:first-child { -moz-border-radius-topleft: 7px; -webkit-border-top-left-radius: 7px; -o-border-top-left-radius: 7px; -ms-border-top-left-radius: 7px; -khtml-border-top-left-radius: 7px; border-top-left-radius: 7px; }
+.cms table.ss-gridfield-table tr th.main:last-child { -moz-border-radius-topright: 7px; -webkit-border-top-right-radius: 7px; -o-border-top-right-radius: 7px; -ms-border-top-right-radius: 7px; -khtml-border-top-right-radius: 7px; border-top-right-radius: 7px; }
+.cms table.ss-gridfield-table tr th div.fieldgroup, .cms table.ss-gridfield-table tr th div.fieldgroup-field { width: auto; }
+.cms table.ss-gridfield-table tr th div.fieldgroup { min-width: 200px; padding-right: 0; }
+.cms table.ss-gridfield-table tr th.extra, .cms table.ss-gridfield-table tr th.action { background: #7f9198; padding: 0; cursor: default; }
+.cms table.ss-gridfield-table tr th.extra button.ss-ui-button, .cms table.ss-gridfield-table tr th.extra button:hover.ss-ui-button, .cms table.ss-gridfield-table tr th.action button.ss-ui-button, .cms table.ss-gridfield-table tr th.action button:hover.ss-ui-button { margin-left: .9em; color: #222; }
+.cms table.ss-gridfield-table tr th.main { border-top: 1px solid rgba(0, 0, 0, 0.1); color: #fff; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #b1c0c5), color-stop(100%, #7f9198)); background-image: -webkit-linear-gradient(#b1c0c5, #7f9198); background-image: -moz-linear-gradient(#b1c0c5, #7f9198); background-image: -o-linear-gradient(#b1c0c5, #7f9198); background-image: -ms-linear-gradient(#b1c0c5, #7f9198); background-image: linear-gradient(#b1c0c5, #7f9198); }
+.cms table.ss-gridfield-table tr th.main span { text-shadow: rgba(0, 0, 0, 0.3) 0px -1px 0; }
+.cms table.ss-gridfield-table tr th.extra { background: #bac8ce; padding: 5px; border-top: rgba(0, 0, 0, 0.3); }
+.cms table.ss-gridfield-table tr th.extra span { width: auto; display: inline; position: static; }
+.cms table.ss-gridfield-table tr th.extra button.ss-ui-button { padding: .3em; line-height: 1; -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; position: relative; border-bottom-width: 0; -webkit-border-radius: 2px 2px; -moz-border-radius: 2px / 2px; -o-border-radius: 2px / 2px; -ms-border-radius: 2px / 2px; -khtml-border-radius: 2px / 2px; border-radius: 2px / 2px; }
+.cms table.ss-gridfield-table tr th.action { border-right: 0; }
+.cms table.ss-gridfield-table tr th.first { -moz-border-radius-topleft: 7px; -webkit-border-top-left-radius: 7px; -o-border-top-left-radius: 7px; -ms-border-top-left-radius: 7px; -khtml-border-top-left-radius: 7px; border-top-left-radius: 7px; }
+.cms table.ss-gridfield-table tr th.last { -moz-border-radius-topright: 7px; -webkit-border-top-right-radius: 7px; -o-border-top-right-radius: 7px; -ms-border-top-right-radius: 7px; -khtml-border-top-right-radius: 7px; border-top-right-radius: 7px; }
+.cms table.ss-gridfield-table tr th button:hover { color: #ccc !important; /* Not sure why IE think it needs this */ }
+.cms table.ss-gridfield-table tr th button.ss-gridfield-sort:hover { color: #fff !important; -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; }
+.cms table.ss-gridfield-table tr th button.ss-gridfield-sort { background: transparent url(../images/arrows-01.png) no-repeat right 2px; border: none; width: 100%; text-align: left; padding: 4px 0; text-shadow: rgba(0, 0, 0, 0.3) 0px -1px 0; color: #fff; -moz-border-radius: 0; -webkit-border-radius: 0; -o-border-radius: 0; -ms-border-radius: 0; -khtml-border-radius: 0; border-radius: 0; }
+.cms table.ss-gridfield-table tr th input.ss-gridfield-sort { padding: 2px; }
+.cms table.ss-gridfield-table tr th input.ss-gridfield-sort:focus { -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; }
+.cms table.ss-gridfield-table tr td { border-right: 1px solid rgba(0, 0, 0, 0.1); padding: 7px 12px; color: #666666; }
+.cms table.ss-gridfield-table tr td.bottom-all { -moz-border-radius-bottomleft: 7px; -webkit-border-bottom-left-radius: 7px; -o-border-bottom-left-radius: 7px; -ms-border-bottom-left-radius: 7px; -khtml-border-bottom-left-radius: 7px; border-bottom-left-radius: 7px; -moz-border-radius-bottomright: 7px; -webkit-border-bottom-right-radius: 7px; -o-border-bottom-right-radius: 7px; -ms-border-bottom-right-radius: 7px; -khtml-border-bottom-right-radius: 7px; border-bottom-right-radius: 7px; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #b1c0c5), color-stop(100%, #7f9198)); background-image: -webkit-linear-gradient(#b1c0c5, #7f9198); background-image: -moz-linear-gradient(#b1c0c5, #7f9198); background-image: -o-linear-gradient(#b1c0c5, #7f9198); background-image: -ms-linear-gradient(#b1c0c5, #7f9198); background-image: linear-gradient(#b1c0c5, #7f9198); }
+.cms table.ss-gridfield-table tr.last td { border-bottom: 0 none; }
+.cms table.ss-gridfield-table td:first-child, .cms table.ss-gridfield-table th:first-child { border-left: 1px solid rgba(0, 0, 0, 0.1); }

css/UploadField.css

@@ -4,8 +4,6 @@
 /** ----------------------------------------------- Typography.  ------------------------------------------------ */
 /** ----------------------------------------------- Grid Units (px)  We have a vertical rhythm that the grid is based off both x (=horizontal) and y (=vertical). All internal padding and margins are scaled to this and accounting for paragraphs ------------------------------------------------ */
 /** ----------------------------------------------- Application Logo (CMS Logo) Must be 24px x 24px ------------------------------------------------ */
-/** Helper SCSS file for generating sprites for the interface. */
-/* CMS action button sprite mix-in for UploadField, copied from admin/scss/_forms.scss */
 .ss-uploadfield .clear { clear: both; }
 .ss-uploadfield .middleColumn { width: 526px; padding: 0; background: #fff; border: 1px solid #b3b3b3; -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); }
 .ss-uploadfield .ss-uploadfield-item { margin: 0; padding: 15px; overflow: auto; }
@@ -17,25 +15,8 @@
 .ss-uploadfield .ss-uploadfield-item-name span { font-size: 11px; color: #848484; }
 .ss-uploadfield .ss-uploadfield-item-status { float: right; padding: 0 0 0 5px; }
 .ss-uploadfield .ss-uploadfield-item-status.ui-state-error-text { color: red; font-weight: bold; }
-.ss-uploadfield label.ss-ui-button { display: block; float: left; margin: 0 10px 0 0; }
-.ss-uploadfield label.ss-ui-button.ss-uploadfield-fromcomputer { position: relative; overflow: hidden; padding-left: 24px; padding-right: 6px; background: #e6e6e6 url('../images/sprites_16x16-scf81c570f3.png') 5px -46px no-repeat; background: url('../images/sprites_16x16-scf81c570f3.png') 5px -46px no-repeat, -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #d9d9d9)); background: url('../images/sprites_16x16-scf81c570f3.png') 5px -46px no-repeat, -webkit-linear-gradient(#ffffff, #d9d9d9); background: url('../images/sprites_16x16-scf81c570f3.png') 5px -46px no-repeat, -moz-linear-gradient(#ffffff, #d9d9d9); background: url('../images/sprites_16x16-scf81c570f3.png') 5px -46px no-repeat, -o-linear-gradient(#ffffff, #d9d9d9); background: url('../images/sprites_16x16-scf81c570f3.png') 5px -46px no-repeat, -ms-linear-gradient(#ffffff, #d9d9d9); background: url('../images/sprites_16x16-scf81c570f3.png') 5px -46px no-repeat, linear-gradient(#ffffff, #d9d9d9); }
-.ss-uploadfield label.ss-ui-button.ss-uploadfield-fromcomputer.ui-state-hover, .ss-uploadfield label.ss-ui-button.ss-uploadfield-fromcomputer:hover { background: white url('../images/sprites_16x16-scf81c570f3.png') 5px -46px no-repeat; background: url('../images/sprites_16x16-scf81c570f3.png') 5px -46px no-repeat, -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #e6e6e6)); background: url('../images/sprites_16x16-scf81c570f3.png') 5px -46px no-repeat, -webkit-linear-gradient(#ffffff, #e6e6e6); background: url('../images/sprites_16x16-scf81c570f3.png') 5px -46px no-repeat, -moz-linear-gradient(#ffffff, #e6e6e6); background: url('../images/sprites_16x16-scf81c570f3.png') 5px -46px no-repeat, -o-linear-gradient(#ffffff, #e6e6e6); background: url('../images/sprites_16x16-scf81c570f3.png') 5px -46px no-repeat, -ms-linear-gradient(#ffffff, #e6e6e6); background: url('../images/sprites_16x16-scf81c570f3.png') 5px -46px no-repeat, linear-gradient(#ffffff, #e6e6e6); }
-.ss-uploadfield label.ss-ui-button.ss-uploadfield-fromcomputer.ui-state-disabled { background-image: none; color: #444444; background: white url('../images/sprites_16x16-scf81c570f3.png') 5px -72px no-repeat; background: url('../images/sprites_16x16-scf81c570f3.png') 5px -72px no-repeat, -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #e6e6e6)); background: url('../images/sprites_16x16-scf81c570f3.png') 5px -72px no-repeat, -webkit-linear-gradient(#ffffff, #e6e6e6); background: url('../images/sprites_16x16-scf81c570f3.png') 5px -72px no-repeat, -moz-linear-gradient(#ffffff, #e6e6e6); background: url('../images/sprites_16x16-scf81c570f3.png') 5px -72px no-repeat, -o-linear-gradient(#ffffff, #e6e6e6); background: url('../images/sprites_16x16-scf81c570f3.png') 5px -72px no-repeat, -ms-linear-gradient(#ffffff, #e6e6e6); background: url('../images/sprites_16x16-scf81c570f3.png') 5px -72px no-repeat, linear-gradient(#ffffff, #e6e6e6); }
-.ss-uploadfield label.ss-ui-button.ss-uploadfield-fromfiles { padding-left: 24px; padding-right: 6px; background: #e6e6e6 url('../images/sprites_16x16-scf81c570f3.png') 5px -202px no-repeat; background: url('../images/sprites_16x16-scf81c570f3.png') 5px -202px no-repeat, -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #d9d9d9)); background: url('../images/sprites_16x16-scf81c570f3.png') 5px -202px no-repeat, -webkit-linear-gradient(#ffffff, #d9d9d9); background: url('../images/sprites_16x16-scf81c570f3.png') 5px -202px no-repeat, -moz-linear-gradient(#ffffff, #d9d9d9); background: url('../images/sprites_16x16-scf81c570f3.png') 5px -202px no-repeat, -o-linear-gradient(#ffffff, #d9d9d9); background: url('../images/sprites_16x16-scf81c570f3.png') 5px -202px no-repeat, -ms-linear-gradient(#ffffff, #d9d9d9); background: url('../images/sprites_16x16-scf81c570f3.png') 5px -202px no-repeat, linear-gradient(#ffffff, #d9d9d9); }
-.ss-uploadfield label.ss-ui-button.ss-uploadfield-fromfiles.ui-state-hover, .ss-uploadfield label.ss-ui-button.ss-uploadfield-fromfiles:hover { background: white url('../images/sprites_16x16-scf81c570f3.png') 5px -202px no-repeat; background: url('../images/sprites_16x16-scf81c570f3.png') 5px -202px no-repeat, -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #e6e6e6)); background: url('../images/sprites_16x16-scf81c570f3.png') 5px -202px no-repeat, -webkit-linear-gradient(#ffffff, #e6e6e6); background: url('../images/sprites_16x16-scf81c570f3.png') 5px -202px no-repeat, -moz-linear-gradient(#ffffff, #e6e6e6); background: url('../images/sprites_16x16-scf81c570f3.png') 5px -202px no-repeat, -o-linear-gradient(#ffffff, #e6e6e6); background: url('../images/sprites_16x16-scf81c570f3.png') 5px -202px no-repeat, -ms-linear-gradient(#ffffff, #e6e6e6); background: url('../images/sprites_16x16-scf81c570f3.png') 5px -202px no-repeat, linear-gradient(#ffffff, #e6e6e6); }
-.ss-uploadfield label.ss-ui-button.ss-uploadfield-fromfiles.ui-state-disabled { background-image: none; color: #444444; background: white url('../images/sprites_16x16-scf81c570f3.png') 5px -228px no-repeat; background: url('../images/sprites_16x16-scf81c570f3.png') 5px -228px no-repeat, -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #e6e6e6)); background: url('../images/sprites_16x16-scf81c570f3.png') 5px -228px no-repeat, -webkit-linear-gradient(#ffffff, #e6e6e6); background: url('../images/sprites_16x16-scf81c570f3.png') 5px -228px no-repeat, -moz-linear-gradient(#ffffff, #e6e6e6); background: url('../images/sprites_16x16-scf81c570f3.png') 5px -228px no-repeat, -o-linear-gradient(#ffffff, #e6e6e6); background: url('../images/sprites_16x16-scf81c570f3.png') 5px -228px no-repeat, -ms-linear-gradient(#ffffff, #e6e6e6); background: url('../images/sprites_16x16-scf81c570f3.png') 5px -228px no-repeat, linear-gradient(#ffffff, #e6e6e6); }
-.ss-uploadfield label.ss-ui-button.ss-uploadfield-startall { padding-left: 24px; padding-right: 6px; background: #e6e6e6 url('../images/sprites_16x16-scf81c570f3.png') 5px -150px no-repeat; background: url('../images/sprites_16x16-scf81c570f3.png') 5px -150px no-repeat, -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #d9d9d9)); background: url('../images/sprites_16x16-scf81c570f3.png') 5px -150px no-repeat, -webkit-linear-gradient(#ffffff, #d9d9d9); background: url('../images/sprites_16x16-scf81c570f3.png') 5px -150px no-repeat, -moz-linear-gradient(#ffffff, #d9d9d9); background: url('../images/sprites_16x16-scf81c570f3.png') 5px -150px no-repeat, -o-linear-gradient(#ffffff, #d9d9d9); background: url('../images/sprites_16x16-scf81c570f3.png') 5px -150px no-repeat, -ms-linear-gradient(#ffffff, #d9d9d9); background: url('../images/sprites_16x16-scf81c570f3.png') 5px -150px no-repeat, linear-gradient(#ffffff, #d9d9d9); }
-.ss-uploadfield label.ss-ui-button.ss-uploadfield-startall.ui-state-hover, .ss-uploadfield label.ss-ui-button.ss-uploadfield-startall:hover { background: white url('../images/sprites_16x16-scf81c570f3.png') 5px -150px no-repeat; background: url('../images/sprites_16x16-scf81c570f3.png') 5px -150px no-repeat, -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #e6e6e6)); background: url('../images/sprites_16x16-scf81c570f3.png') 5px -150px no-repeat, -webkit-linear-gradient(#ffffff, #e6e6e6); background: url('../images/sprites_16x16-scf81c570f3.png') 5px -150px no-repeat, -moz-linear-gradient(#ffffff, #e6e6e6); background: url('../images/sprites_16x16-scf81c570f3.png') 5px -150px no-repeat, -o-linear-gradient(#ffffff, #e6e6e6); background: url('../images/sprites_16x16-scf81c570f3.png') 5px -150px no-repeat, -ms-linear-gradient(#ffffff, #e6e6e6); background: url('../images/sprites_16x16-scf81c570f3.png') 5px -150px no-repeat, linear-gradient(#ffffff, #e6e6e6); }
-.ss-uploadfield label.ss-ui-button.ss-uploadfield-startall.ui-state-disabled { background-image: none; color: #444444; background: white url('../images/sprites_16x16-scf81c570f3.png') 5px -176px no-repeat; background: url('../images/sprites_16x16-scf81c570f3.png') 5px -176px no-repeat, -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #e6e6e6)); background: url('../images/sprites_16x16-scf81c570f3.png') 5px -176px no-repeat, -webkit-linear-gradient(#ffffff, #e6e6e6); background: url('../images/sprites_16x16-scf81c570f3.png') 5px -176px no-repeat, -moz-linear-gradient(#ffffff, #e6e6e6); background: url('../images/sprites_16x16-scf81c570f3.png') 5px -176px no-repeat, -o-linear-gradient(#ffffff, #e6e6e6); background: url('../images/sprites_16x16-scf81c570f3.png') 5px -176px no-repeat, -ms-linear-gradient(#ffffff, #e6e6e6); background: url('../images/sprites_16x16-scf81c570f3.png') 5px -176px no-repeat, linear-gradient(#ffffff, #e6e6e6); }
-.ss-uploadfield label.ss-ui-button.ss-uploadfield-item-delete { color: red; padding-left: 24px; padding-right: 6px; background: #e6e6e6 url('../images/sprites_16x16-scf81c570f3.png') 5px -98px no-repeat; background: url('../images/sprites_16x16-scf81c570f3.png') 5px -98px no-repeat, -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #d9d9d9)); background: url('../images/sprites_16x16-scf81c570f3.png') 5px -98px no-repeat, -webkit-linear-gradient(#ffffff, #d9d9d9); background: url('../images/sprites_16x16-scf81c570f3.png') 5px -98px no-repeat, -moz-linear-gradient(#ffffff, #d9d9d9); background: url('../images/sprites_16x16-scf81c570f3.png') 5px -98px no-repeat, -o-linear-gradient(#ffffff, #d9d9d9); background: url('../images/sprites_16x16-scf81c570f3.png') 5px -98px no-repeat, -ms-linear-gradient(#ffffff, #d9d9d9); background: url('../images/sprites_16x16-scf81c570f3.png') 5px -98px no-repeat, linear-gradient(#ffffff, #d9d9d9); }
-.ss-uploadfield label.ss-ui-button.ss-uploadfield-item-delete.ui-state-hover, .ss-uploadfield label.ss-ui-button.ss-uploadfield-item-delete:hover { background: white url('../images/sprites_16x16-scf81c570f3.png') 5px -98px no-repeat; background: url('../images/sprites_16x16-scf81c570f3.png') 5px -98px no-repeat, -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #e6e6e6)); background: url('../images/sprites_16x16-scf81c570f3.png') 5px -98px no-repeat, -webkit-linear-gradient(#ffffff, #e6e6e6); background: url('../images/sprites_16x16-scf81c570f3.png') 5px -98px no-repeat, -moz-linear-gradient(#ffffff, #e6e6e6); background: url('../images/sprites_16x16-scf81c570f3.png') 5px -98px no-repeat, -o-linear-gradient(#ffffff, #e6e6e6); background: url('../images/sprites_16x16-scf81c570f3.png') 5px -98px no-repeat, -ms-linear-gradient(#ffffff, #e6e6e6); background: url('../images/sprites_16x16-scf81c570f3.png') 5px -98px no-repeat, linear-gradient(#ffffff, #e6e6e6); }
-.ss-uploadfield label.ss-ui-button.ss-uploadfield-item-delete.ui-state-disabled { background-image: none; color: #444444; background: white url('../images/sprites_16x16-scf81c570f3.png') 5px -124px no-repeat; background: url('../images/sprites_16x16-scf81c570f3.png') 5px -124px no-repeat, -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #e6e6e6)); background: url('../images/sprites_16x16-scf81c570f3.png') 5px -124px no-repeat, -webkit-linear-gradient(#ffffff, #e6e6e6); background: url('../images/sprites_16x16-scf81c570f3.png') 5px -124px no-repeat, -moz-linear-gradient(#ffffff, #e6e6e6); background: url('../images/sprites_16x16-scf81c570f3.png') 5px -124px no-repeat, -o-linear-gradient(#ffffff, #e6e6e6); background: url('../images/sprites_16x16-scf81c570f3.png') 5px -124px no-repeat, -ms-linear-gradient(#ffffff, #e6e6e6); background: url('../images/sprites_16x16-scf81c570f3.png') 5px -124px no-repeat, linear-gradient(#ffffff, #e6e6e6); }
-.ss-uploadfield label.ss-ui-button.ss-uploadfield-item-remove { padding-left: 24px; padding-right: 6px; background: #e6e6e6 url('../images/sprites_16x16-scf81c570f3.png') 5px -306px no-repeat; background: url('../images/sprites_16x16-scf81c570f3.png') 5px -306px no-repeat, -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #d9d9d9)); background: url('../images/sprites_16x16-scf81c570f3.png') 5px -306px no-repeat, -webkit-linear-gradient(#ffffff, #d9d9d9); background: url('../images/sprites_16x16-scf81c570f3.png') 5px -306px no-repeat, -moz-linear-gradient(#ffffff, #d9d9d9); background: url('../images/sprites_16x16-scf81c570f3.png') 5px -306px no-repeat, -o-linear-gradient(#ffffff, #d9d9d9); background: url('../images/sprites_16x16-scf81c570f3.png') 5px -306px no-repeat, -ms-linear-gradient(#ffffff, #d9d9d9); background: url('../images/sprites_16x16-scf81c570f3.png') 5px -306px no-repeat, linear-gradient(#ffffff, #d9d9d9); }
-.ss-uploadfield label.ss-ui-button.ss-uploadfield-item-remove.ui-state-hover, .ss-uploadfield label.ss-ui-button.ss-uploadfield-item-remove:hover { background: white url('../images/sprites_16x16-scf81c570f3.png') 5px -306px no-repeat; background: url('../images/sprites_16x16-scf81c570f3.png') 5px -306px no-repeat, -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #e6e6e6)); background: url('../images/sprites_16x16-scf81c570f3.png') 5px -306px no-repeat, -webkit-linear-gradient(#ffffff, #e6e6e6); background: url('../images/sprites_16x16-scf81c570f3.png') 5px -306px no-repeat, -moz-linear-gradient(#ffffff, #e6e6e6); background: url('../images/sprites_16x16-scf81c570f3.png') 5px -306px no-repeat, -o-linear-gradient(#ffffff, #e6e6e6); background: url('../images/sprites_16x16-scf81c570f3.png') 5px -306px no-repeat, -ms-linear-gradient(#ffffff, #e6e6e6); background: url('../images/sprites_16x16-scf81c570f3.png') 5px -306px no-repeat, linear-gradient(#ffffff, #e6e6e6); }
-.ss-uploadfield label.ss-ui-button.ss-uploadfield-item-remove.ui-state-disabled { background-image: none; color: #444444; background: white url('../images/sprites_16x16-scf81c570f3.png') 5px -332px no-repeat; background: url('../images/sprites_16x16-scf81c570f3.png') 5px -332px no-repeat, -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #e6e6e6)); background: url('../images/sprites_16x16-scf81c570f3.png') 5px -332px no-repeat, -webkit-linear-gradient(#ffffff, #e6e6e6); background: url('../images/sprites_16x16-scf81c570f3.png') 5px -332px no-repeat, -moz-linear-gradient(#ffffff, #e6e6e6); background: url('../images/sprites_16x16-scf81c570f3.png') 5px -332px no-repeat, -o-linear-gradient(#ffffff, #e6e6e6); background: url('../images/sprites_16x16-scf81c570f3.png') 5px -332px no-repeat, -ms-linear-gradient(#ffffff, #e6e6e6); background: url('../images/sprites_16x16-scf81c570f3.png') 5px -332px no-repeat, linear-gradient(#ffffff, #e6e6e6); }
-.ss-uploadfield label.ss-ui-button.ss-uploadfield-item-edit { padding-left: 24px; padding-right: 6px; background: #e6e6e6 url('../images/sprites_16x16-scf81c570f3.png') 5px -254px no-repeat; background: url('../images/sprites_16x16-scf81c570f3.png') 5px -254px no-repeat, -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #d9d9d9)); background: url('../images/sprites_16x16-scf81c570f3.png') 5px -254px no-repeat, -webkit-linear-gradient(#ffffff, #d9d9d9); background: url('../images/sprites_16x16-scf81c570f3.png') 5px -254px no-repeat, -moz-linear-gradient(#ffffff, #d9d9d9); background: url('../images/sprites_16x16-scf81c570f3.png') 5px -254px no-repeat, -o-linear-gradient(#ffffff, #d9d9d9); background: url('../images/sprites_16x16-scf81c570f3.png') 5px -254px no-repeat, -ms-linear-gradient(#ffffff, #d9d9d9); background: url('../images/sprites_16x16-scf81c570f3.png') 5px -254px no-repeat, linear-gradient(#ffffff, #d9d9d9); }
-.ss-uploadfield label.ss-ui-button.ss-uploadfield-item-edit.ui-state-hover, .ss-uploadfield label.ss-ui-button.ss-uploadfield-item-edit:hover { background: white url('../images/sprites_16x16-scf81c570f3.png') 5px -254px no-repeat; background: url('../images/sprites_16x16-scf81c570f3.png') 5px -254px no-repeat, -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #e6e6e6)); background: url('../images/sprites_16x16-scf81c570f3.png') 5px -254px no-repeat, -webkit-linear-gradient(#ffffff, #e6e6e6); background: url('../images/sprites_16x16-scf81c570f3.png') 5px -254px no-repeat, -moz-linear-gradient(#ffffff, #e6e6e6); background: url('../images/sprites_16x16-scf81c570f3.png') 5px -254px no-repeat, -o-linear-gradient(#ffffff, #e6e6e6); background: url('../images/sprites_16x16-scf81c570f3.png') 5px -254px no-repeat, -ms-linear-gradient(#ffffff, #e6e6e6); background: url('../images/sprites_16x16-scf81c570f3.png') 5px -254px no-repeat, linear-gradient(#ffffff, #e6e6e6); }
-.ss-uploadfield label.ss-ui-button.ss-uploadfield-item-edit.ui-state-disabled { background-image: none; color: #444444; background: white url('../images/sprites_16x16-scf81c570f3.png') 5px -280px no-repeat; background: url('../images/sprites_16x16-scf81c570f3.png') 5px -280px no-repeat, -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #e6e6e6)); background: url('../images/sprites_16x16-scf81c570f3.png') 5px -280px no-repeat, -webkit-linear-gradient(#ffffff, #e6e6e6); background: url('../images/sprites_16x16-scf81c570f3.png') 5px -280px no-repeat, -moz-linear-gradient(#ffffff, #e6e6e6); background: url('../images/sprites_16x16-scf81c570f3.png') 5px -280px no-repeat, -o-linear-gradient(#ffffff, #e6e6e6); background: url('../images/sprites_16x16-scf81c570f3.png') 5px -280px no-repeat, -ms-linear-gradient(#ffffff, #e6e6e6); background: url('../images/sprites_16x16-scf81c570f3.png') 5px -280px no-repeat, linear-gradient(#ffffff, #e6e6e6); }
+.ss-uploadfield .ss-ui-button { display: block; float: left; margin: 0 10px 0 0; }
+.ss-uploadfield .ss-ui-button.ss-uploadfield-fromcomputer { position: relative; overflow: hidden; }
 .ss-uploadfield .ss-uploadfield-files { margin: 0; padding: 0; max-height: 272px; overflow: auto; position: relative; }
 .ss-uploadfield .ss-uploadfield-files .ss-uploadfield-item, .ss-uploadfield .ss-uploadfield-files .ss-uploadfield-item.ui-state-error { border: 0; border-bottom: 1px solid #b3b3b3; background: none; color: #444444; }
 .ss-uploadfield .ss-uploadfield-files .ss-uploadfield-item:last-child, .ss-uploadfield .ss-uploadfield-files .ss-uploadfield-item.ui-state-error:last-child { border-bottom: 0; }
@@ -45,9 +26,8 @@
 .ss-uploadfield .ss-uploadfield-files .ss-uploadfield-item-progressbar { border: 1px solid gray; background-color: #92a6b3; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #92a6b3), color-stop(11%, #90aab8), color-stop(22%, #96b1bf), color-stop(33%, #9eb4c1), color-stop(44%, #a7bac7), color-stop(100%, #c1d5dc)); background-image: -webkit-linear-gradient(top, #92a6b3 0%, #90aab8 11%, #96b1bf 22%, #9eb4c1 33%, #a7bac7 44%, #c1d5dc 100%); background-image: -moz-linear-gradient(top, #92a6b3 0%, #90aab8 11%, #96b1bf 22%, #9eb4c1 33%, #a7bac7 44%, #c1d5dc 100%); background-image: -o-linear-gradient(top, #92a6b3 0%, #90aab8 11%, #96b1bf 22%, #9eb4c1 33%, #a7bac7 44%, #c1d5dc 100%); background-image: -ms-linear-gradient(top, #92a6b3 0%, #90aab8 11%, #96b1bf 22%, #9eb4c1 33%, #a7bac7 44%, #c1d5dc 100%); background-image: linear-gradient(top, #92a6b3 0%, #90aab8 11%, #96b1bf 22%, #9eb4c1 33%, #a7bac7 44%, #c1d5dc 100%); }
 .ss-uploadfield .ss-uploadfield-files .ss-uploadfield-item-progressbarvalue { border: 0; width: 0%; background: #60b3dd url(../images/progressbar_blue.gif) repeat-x left center; }
 .ss-uploadfield .ss-uploadfield-files .ss-uploadfield-item-cancel, .ss-uploadfield .ss-uploadfield-files .ss-uploadfield-item-start { position: absolute; top: 10px; right: 0; }
-.ss-uploadfield .ss-uploadfield-files .ss-uploadfield-item-cancel button, .ss-uploadfield .ss-uploadfield-files .ss-uploadfield-item-start button { display: block; overflow: hidden; text-indent: -9999px; padding: 0; margin: 0; border: 0; width: 16px; height: 16px; cursor: pointer; -moz-box-shadow: none; -webkit-box-shadow: none; -o-box-shadow: none; box-shadow: none; background: url('../images/sprites_16x16-scf81c570f3.png') 0 0 no-repeat; }
+.ss-uploadfield .ss-uploadfield-files .ss-uploadfield-item-cancel button, .ss-uploadfield .ss-uploadfield-files .ss-uploadfield-item-start button { display: block; overflow: hidden; text-indent: -9999px; padding: 0; margin: 0; border: 0; width: 16px; height: 16px; cursor: pointer; -moz-box-shadow: none; -webkit-box-shadow: none; -o-box-shadow: none; box-shadow: none; }
 .ss-uploadfield .ss-uploadfield-files .ss-uploadfield-item-start { right: 20px; }
-.ss-uploadfield .ss-uploadfield-files .ss-uploadfield-item-start button { background: url('../images/sprites_16x16-scf81c570f3.png') 0 -156px no-repeat; }
 .ss-uploadfield .ss-uploadfield-files .ss-uploadfield-item-editform { /* don't use display none, for it will break jQuery('iframe').contents().height() */ height: 0; overflow: hidden; clear: both; margin-top: 8px; }
 .ss-uploadfield .ss-uploadfield-files .ss-uploadfield-item-editform iframe { width: 100%; }
 .ss-uploadfield .ss-uploadfield-addfile.borderTop { border-top: 1px solid #b3b3b3; }

filesystem/Folder.php

@@ -331,6 +331,15 @@ class Folder extends File {
 		$this->setField('Title',pathinfo($filename, PATHINFO_BASENAME));
 		parent::setFilename($filename);
 	}
+
+	/**
+	 * A folder doesn't have a (meaningful) file size.
+	 * 
+	 * @return Null
+	 */
+	function getSize() {
+		return null;
+	}
 	
 	/**
 	 * Delete the database record (recursively for folders) without touching the filesystem
@@ -398,48 +407,12 @@ class Folder extends File {
 	 * and implemeting updateCMSFields(FieldList $fields) on that extension.
 	 */
 	function getCMSFields() {
-		$config = GridFieldConfig::create();
-		$config->addComponent(new GridFieldSortableHeader());
-		$config->addComponent(new GridFieldFilter());
-		$config->addComponent(new GridFieldDefaultColumns());
-		$config->addComponent(new GridFieldPaginator(10));
-		$config->addComponent(new GridFieldAction_Delete());
-		$config->addComponent(new GridFieldAction_Edit());
-		$config->addComponent($gridFieldForm = new GridFieldPopupForms(Controller::curr(), 'EditForm'));
-		$gridFieldForm->setTemplate('CMSGridFieldPopupForms');
-		$files = DataList::create('File')->filter('ParentID', $this->ID)->exclude('ClassName', 'Folder');
-		$gridField = new GridField('File','Files', $files, $config);
-		$gridField->setDisplayFields(array(
-			'StripThumbnail' => '',
-			'Parent.FileName' => 'Folder',
-			'Title'=>'Title',
-			'Size'=>'Size',
-		));
-
-		$titleField = ($this->ID && $this->ID != "root") ? new TextField("Title", _t('Folder.TITLE')) : new HiddenField("Title");
-		
+		// Hide field on root level, which can't be renamed
+		$titleField = (!$this->ID || $this->ID === "root") ? new HiddenField("Name") : new TextField("Name", _t('Folder.NAME'));
 		$fields = new FieldList(
-			// The tabs of Root are used to generate the top tabs 
-			new TabSet('Root',
-				new Tab('listview', _t('AssetAdmin.ListView', 'List View'),
-					$titleField,
-					$gridField,
-					new HiddenField("ID"),
-					new HiddenField("DestFolderID")
-				),
-				new Tab('galleryview', _t('AssetAdmin.GalleryView', 'Gallery View'),
-					new LiteralField("", "<em>Not implemented yet</em>")
-				),
-				new Tab('treeview', _t('AssetAdmin.TreeView', 'Tree View'),
-					new LiteralField("", "<em>Not implemented yet</em>")
-				)
-			)			
+			$titleField,
+			new HiddenField('ParentID')
 		);
-		
-		if(!$this->canEdit()) {
-			$fields->removeByName("Upload");
-		}
-
 		$this->extend('updateCMSFields', $fields);
 		
 		return $fields;

forms/CheckboxField.php

@@ -12,6 +12,7 @@ class CheckboxField extends FormField {
 
 	function setValue($value) {
 		$this->value = ($value) ? 1 : 0;
+		return $this;
 	}
 
 	function dataValue() {

forms/CheckboxSetField.php

@@ -135,6 +135,7 @@ class CheckboxSetField extends OptionsetField {
 	
 	function setDisabled($val) {
 		$this->disabled = $val;
+		return $this;
 	}
 	
 	/**
@@ -146,6 +147,7 @@ class CheckboxSetField extends OptionsetField {
 	 */
 	function setDefaultItems($items) {
 		$this->defaultItems = $items;
+		return $this;
 	}
 	
 	/**
@@ -166,6 +168,8 @@ class CheckboxSetField extends OptionsetField {
 		}
 
 		parent::setValue($value, $obj);
+
+		return $this;
 	}
 	
 	/**

forms/ComplexTableField.php

@@ -340,10 +340,12 @@ JS;
 
 	function setController($controller) {
 		$this->controller = $controller;
+		return $this;
 	}
 
 	function setTemplatePopup($template) {
 		$this->templatePopup = $template;
+		return $this;
 	}
 
 	////////////////////////////////////////////////////////////////////////////////////////////////////
@@ -448,6 +450,7 @@ JS;
 	 */
 	function setRelationAutoSetting($value) {
 		Deprecation::notice('3.0', 'Manipulate the DataList instead.');
+		return $this;
 	}
 	
 	/**

forms/CompositeField.php

@@ -27,7 +27,19 @@ class CompositeField extends FormField {
 	 * count of your $children.
 	 */
 	protected $columnCount = null;
+
+	/**
+	 * @var String custom HTML tag to render with, e.g. to produce a <fieldset>.
+	 */
+	protected $tag = 'div';
 	
+	/**
+	 * @var String Optional description for this set of fields.
+	 * If the {@link $tag} property is set to use a 'fieldset', this will be
+	 * rendered as a <legend> tag, otherwise its a 'title' attribute.
+	 */
+	protected $legend;
+
 	public function __construct($children = null) {
 		if($children instanceof FieldList) {
 			$this->children = $children;
@@ -62,10 +74,7 @@ class CompositeField extends FormField {
 
 	public function setID($id) {
 		$this->id = $id;
-	}
-	
-	public function Field() {
-		return $this->FieldHolder();
+		return $this;
 	}
 	
 	/**
@@ -81,6 +90,29 @@ class CompositeField extends FormField {
 	 */
 	public function setChildren($children) {
 		$this->children = $children;
+		return $this;
+	}
+
+	/** @param String */
+	public function setTag($tag) {
+		$this->tag = $tag;
+		return $this;
+	}
+
+	/** @return String */
+	public function getTag() {
+		return $this->tag;
+	}
+
+	/** @param String */
+	public function setLegend($legend) {
+		$this->legend = $legend;
+		return $this;
+	}
+
+	/** @return String */
+	public function getLegend() {
+		return $this->legend;
 	}
 
 	function extraClasses() {
@@ -92,15 +124,47 @@ class CompositeField extends FormField {
 	function getAttributes() {
 		return array_merge(
 			parent::getAttributes(),
-			array('tabindex' => null, 'type' => null, 'value' => null, 'type' => null)
+			array(
+				'tabindex' => null, 
+				'type' => null, 
+				'value' => null, 
+				'type' => null,
+				'title' => ($this->tag == 'fieldset') ? null : $this->legend
+			)
 		);
 	}
 
+	public function Field() {
+		$content = '';
+
+		if($this->tag == 'fieldset' && $this->legend) {
+			$content .= '<legend>' . $this->legend . '<legend>';
+		}
+
+		$fs = $this->FieldList();
+		foreach($fs as $subfield) {
+			if($this->columnCount) {
+				$className = "column{$this->columnCount}";
+				if(!next($fs)) $className .= " lastcolumn";
+				$content .= "\n<div class=\"{$className}\">\n" . $subfield->Field() . "\n</div>\n";
+			} else if($subfield){
+				$content .= "\n" . $subfield->Field() . "\n";
+			}
+		}
+				
+		return $this->createTag($this->getTag(), $this->getAttributes(), $content);
+	}
+
 	/**
 	 * Returns the fields nested inside another DIV
 	 */
 	function FieldHolder() {
 		$content = '';
+
+		if($this->tag == 'fieldset' && $this->legend) {
+			$content .= '<legend>' . $this->legend . '<legend>';
+		}
+
 		$fs = $this->FieldList();
 		foreach($fs as $subfield) {
 			if($this->columnCount) {
@@ -112,19 +176,24 @@ class CompositeField extends FormField {
 			}
 		}
 				
-		return $this->createTag('div', $this->getAttributes(), $content);
+		return $this->createTag($this->getTag(), $this->getAttributes(), $content);
 	}
 		
 	/**
 	 * Returns the fields in the restricted field holder inside a DIV.
 	 */
-	function SmallFieldHolder() {//return $this->FieldHolder();
+	function SmallFieldHolder() {
 		$fs = $this->FieldList();
+		$tag = $this->getTag();
 		$idAtt = isset($this->id) ? " id=\"{$this->id}\"" : '';
 		$className = ($this->columnCount) ? "field CompositeField {$this->extraClass()} multicolumn" : "field CompositeField {$this->extraClass()}";
-		$content = "<div class=\"$className\"$idAtt>";
+		$content = "<$tag class=\"$className\"$idAtt>";
+
+		if($this->tag == 'fieldset' && $this->legend) {
+			$content .= '<legend>' . $this->legend . '<legend>';
+		}
 		
-		foreach($fs as $subfield) {//echo ' subf'.$subfield->getName();
+		foreach($fs as $subfield) {
 			if($this->columnCount) {
 				$className = "column{$this->columnCount}";
 				if(!next($fs)) $className .= " lastcolumn";
@@ -133,7 +202,7 @@ class CompositeField extends FormField {
 				$content .= $subfield->SmallFieldHolder() . " ";
 			}
 		}	
-		$content .= "</div>";
+		$content .= "</$tag>";
 	
 		return $content;
 	}	
@@ -165,14 +234,21 @@ class CompositeField extends FormField {
 	function setForm($form) {
 		foreach($this->children as $f) if(is_object($f)) $f->setForm($form);
 		parent::setForm($form);
+		return $this;
 	}
 	
 	function setColumnCount($columnCount) {
 		$this->columnCount = $columnCount;
+		return $this;
 	}
 	
-	function isComposite() { return true; }
-	function hasData() { return false; }
+	function isComposite() { 
+		return true; 
+	}
+
+	function hasData() { 
+		return false; 
+	}
 
 	public function fieldByName($name) {
 		return $this->children->fieldByName($name);

forms/ConfirmedPasswordField.php

@@ -138,6 +138,7 @@ class ConfirmedPasswordField extends FormField {
 	 */
 	function setCanBeEmpty($value) {
 		$this->canBeEmpty = (bool)$value;
+		return $this;
 	}
 	
 	/**
@@ -149,6 +150,7 @@ class ConfirmedPasswordField extends FormField {
 	 */
 	public function setShowOnClickTitle($title) {
 		$this->showOnClickTitle = $title;
+		return $this;
 	}
 	
 	/**
@@ -162,6 +164,7 @@ class ConfirmedPasswordField extends FormField {
 		foreach($this->children as $field) {
 			$field->setRightTitle($title);
 		}
+		return $this;
 	}
 	
 	/**
@@ -176,6 +179,7 @@ class ConfirmedPasswordField extends FormField {
 				}
 			}
 		}
+		return $this;
 	}
 	
 	/**
@@ -196,6 +200,8 @@ class ConfirmedPasswordField extends FormField {
 		}
 		$this->children->fieldByName($this->getName() . '[_Password]')->setValue($this->value);
 		$this->children->fieldByName($this->getName() . '[_ConfirmPassword]')->setValue($this->value);
+
+		return $this;
 	}
 	
 	function jsValidation() {

forms/CurrencyField.php

@@ -15,6 +15,7 @@ class CurrencyField extends TextField {
 	function setValue($val) {
 		if(!$val) $val = 0.00;
 		$this->value = '$' . number_format((double)preg_replace('/[^0-9.\-]/', '', $val), 2);
+		return $this;
 	}
 	/**
 	 * Overwrite the datavalue before saving to the db ;-)

forms/DatalessField.php

@@ -58,6 +58,7 @@ class DatalessField extends FormField {
 	 */
 	function setAllowHTML($bool) {
 		$this->allowHTML = $bool;
+		return $this;
 	}
 	
 	/**

forms/DateField.php

@@ -136,7 +136,7 @@ class DateField extends TextField {
 		}
 		
 		$config = array_filter($config);
-		$this->addExtraClass(Convert::raw2json($config));
+		foreach($config as $k => $v) $this->setAttribute('data-' . $k, $v);
 		
 		// Three separate fields for day, month and year
 		if($this->getConfig('dmyfields')) {
@@ -229,6 +229,8 @@ class DateField extends TextField {
 				}
 			}
 		}
+
+		return $this;
 	}
 	
 	/**
@@ -470,6 +472,7 @@ JS;
 	 */
 	function setLocale($locale) {
 		$this->locale = $locale;
+		return $this;
 	}
 	
 	/**
@@ -493,6 +496,7 @@ JS;
 		}
 		
 		$this->config[$name] = $val;
+		return $this;
 	}
 	
 	/**
@@ -611,7 +615,6 @@ class DateField_View_JQuery {
 					));
 			}
 			
-			Requirements::javascript(THIRDPARTY_DIR . "/jquery-metadata/jquery.metadata.js");
 			Requirements::javascript(SAPPHIRE_DIR . "/javascript/DateField.js");
 		}
 		

forms/DatetimeField.php

@@ -70,6 +70,8 @@ class DatetimeField extends FormField {
 		$this->dateField->setForm($form);
 		$this->timeField->setForm($form);
 		$this->timezoneField->setForm($form);
+
+		return $this;
 	}
 	
 	function FieldHolder() {
@@ -172,6 +174,8 @@ class DatetimeField extends FormField {
 				$this->timeField->setValue($valueObj->get($this->timeField->getConfig('timeformat'), $this->locale));
 			}
 		}
+
+		return $this;
 	}
 	
 	function Value() {
@@ -187,6 +191,7 @@ class DatetimeField extends FormField {
 		$this->dateField->setDisabled($bool);
 		$this->timeField->setDisabled($bool);
 		if($this->timezoneField) $this->timezoneField->setDisabled($bool);
+		return $this;
 	}
 
 	function setReadonly($bool) {
@@ -194,6 +199,7 @@ class DatetimeField extends FormField {
 		$this->dateField->setReadonly($bool);
 		$this->timeField->setReadonly($bool);
 		if($this->timezoneField) $this->timezoneField->setReadonly($bool);
+		return $this;
 	}
 	
 	/**
@@ -220,6 +226,7 @@ class DatetimeField extends FormField {
 	function setLocale($locale) {
 		$this->dateField->setLocale($locale);
 		$this->timeField->setLocale($locale);
+		return $this;
 	}
 	
 	function getLocale() {
@@ -240,6 +247,8 @@ class DatetimeField extends FormField {
 			$this->timezoneField->setValue($val);
 			$this->setValue($this->dataValue());
 		}
+
+		return $this;
 	}
 	
 	/**

forms/DropdownField.php

@@ -194,6 +194,7 @@ class DropdownField extends FormField {
 	 */
 	function setSource($source) {
 		$this->source = $source;
+		return $this;
 	}
 	
 	/**
@@ -201,6 +202,7 @@ class DropdownField extends FormField {
 	 */
 	function setHasEmptyDefault($bool) {
 		$this->hasEmptyDefault = $bool;
+		return $this;
 	}
 	
 	/**
@@ -220,6 +222,7 @@ class DropdownField extends FormField {
 	function setEmptyString($str) {
 		$this->setHasEmptyDefault(true);
 		$this->emptyString = $str;
+		return $this;
 	}
 
 	/**
@@ -242,5 +245,6 @@ class DropdownField extends FormField {
 	 */
 	function setDisabled($disabled = true) {
 		$this->disabled = $disabled;
+		return $this;
 	}
 }

forms/FieldGroup.php

@@ -121,6 +121,7 @@ class FieldGroup extends CompositeField {
   	function setZebra($zebra) {
 	    if($zebra == 'odd' || $zebra == 'even') $this->zebra = $zebra;
 	    else user_error("setZebra passed '$zebra'.  It should be passed 'odd' or 'even'", E_USER_WARNING);
+	    return $this;
  	}
   
 	function FieldHolder() {

forms/FieldList.php

@@ -401,6 +401,7 @@ class FieldList extends ArrayList {
 	 */
 	public function setForm($form) {
 		foreach($this as $field) $field->setForm($form);
+		return $this;
 	}
 	
 	/**
@@ -413,6 +414,7 @@ class FieldList extends ArrayList {
 			$fieldName = $field->getName();
 			if(isset($data[$fieldName])) $field->setValue($data[$fieldName]);
 		}
+		return $this;
 	}
 	
 	/**
@@ -458,6 +460,7 @@ class FieldList extends ArrayList {
 	
 	function setContainerField($field) {
 		$this->containerField = $field;
+		return $this;
 	}
 	
 	/**

forms/Form.php

@@ -424,6 +424,7 @@ class Form extends RequestHandler {
 	 */
 	public function setRedirectToFormOnValidationError($bool) {
 		$this->redirectToFormOnValidationError = $bool;
+		return $this;
 	}
 	
 	/**
@@ -483,6 +484,7 @@ class Form extends RequestHandler {
 			$this->validator = $validator;
 			$this->validator->setForm($this);
 		}
+		return $this;
 	}
 
 	/**
@@ -562,6 +564,7 @@ class Form extends RequestHandler {
 	 */
 	function setFields($fields) {
 		$this->fields = $fields;
+		return $this;
 	}
 	
 	/**
@@ -598,6 +601,7 @@ class Form extends RequestHandler {
 	 */
 	function setActions($actions) {
 		$this->actions = $actions;
+		return $this;
 	}
 	
 	/**
@@ -605,6 +609,7 @@ class Form extends RequestHandler {
 	 */
 	function unsetAllActions(){
 		$this->actions = new FieldList();
+		return $this;
 	}
 
 	/**
@@ -625,6 +630,7 @@ class Form extends RequestHandler {
 	 */
 	function setAttribute($name, $value) {
 		$this->attributes[$name] = $value;
+		return $this;
 	}
 
 	/**
@@ -723,6 +729,7 @@ class Form extends RequestHandler {
 	*/
 	function setTarget($target) {
 		$this->target = $target;
+		return $this;
 	}
 	
 	/**
@@ -731,6 +738,7 @@ class Form extends RequestHandler {
 	 */
 	function setLegend($legend) {
 		$this->legend = $legend;
+		return $this;
 	}
 	
 	/**
@@ -741,6 +749,7 @@ class Form extends RequestHandler {
 	 */
 	function setTemplate($template) {
 		$this->template = $template;
+		return $this;
 	}
 	
 	/**
@@ -784,6 +793,7 @@ class Form extends RequestHandler {
 	 */
 	public function setEncType($encType) {
 		$this->encType = $encType;
+		return $this;
 	}
 
 	/**
@@ -831,6 +841,7 @@ class Form extends RequestHandler {
 	 */
 	function setFormMethod($method) {
 		$this->formMethod = strtolower($method);
+		return $this;
 	}
 	
 	/**
@@ -860,6 +871,7 @@ class Form extends RequestHandler {
 	 */
 	function setFormAction($path) {
 		$this->formActionPath = $path;
+		return $this;
 	}
 
 	/**
@@ -947,6 +959,7 @@ class Form extends RequestHandler {
 	function setMessage($message, $type) {
 		$this->message = $message;
 		$this->messageType = $type;
+		return $this;
 	}
 
 	/**
@@ -1283,6 +1296,7 @@ class Form extends RequestHandler {
 	 */
 	function setButtonClicked($funcName) {
 		$this->buttonClickedFunc = $funcName;
+		return $this;
 	}
 
 	function buttonClicked() {
@@ -1306,6 +1320,7 @@ class Form extends RequestHandler {
 	 */
 	function disableDefaultAction() {
 		$this->hasDefaultAction = false;
+		return $this;
 	}
 	
 	/**
@@ -1317,6 +1332,7 @@ class Form extends RequestHandler {
 	 */
 	function disableSecurityToken() {
 		$this->securityToken = new NullSecurityToken();
+		return $this;
 	}
 	
 	/**
@@ -1326,6 +1342,7 @@ class Form extends RequestHandler {
 	 */
 	function enableSecurityToken() {
 		$this->securityToken = new SecurityToken();
+		return $this;
 	}
 	
 	/**
@@ -1417,6 +1434,8 @@ class Form extends RequestHandler {
 			
 			$this->extraClasses[] = $value;
 		}
+
+		return $this;
 	}
 
 	/**
@@ -1428,6 +1447,7 @@ class Form extends RequestHandler {
 	function removeExtraClass($class) {
 		$classes = explode(' ', $class);
 		$this->extraClasses = array_diff($this->extraClasses, $classes);
+		return $this;
 	}
 	
 	function debug() {

forms/FormAction.php

@@ -32,15 +32,7 @@ class FormAction extends FormField {
 	 */
 	public $useButtonTag = false;
 	
-	private $buttonContent = null;
-	
-	/**
-	 * Add content inside a button field.
-	 */
-	function setButtonContent($content) {
-		$this->buttonContent = (string) $content;
-	}
-	
+	protected $buttonContent = null;
 	
 	/**
 	 * Create a new action button.
@@ -67,6 +59,7 @@ class FormAction extends FormField {
 	 */
 	function setFullAction($fullAction) {
 		$this->action = $fullAction;
+		return $this;
 	}
 
 	function Field($properties = array()) {
@@ -74,7 +67,7 @@ class FormAction extends FormField {
 			$properties,
 			array(
 				'Name' => $this->action,
-				'Title' => ($this->description) ? $this->description : $this->Title(),
+				'Title' => ($this->description && !$this->useButtonTag) ? $this->description : $this->Title(),
 				'UseButtonTag' => $this->useButtonTag
 			)
 		);
@@ -91,11 +84,42 @@ class FormAction extends FormField {
 			array(
 				'disabled' => ($this->isReadonly() || $this->isDisabled()),
 				'value' => $this->Title(),
-				'type' => ($this->useButtonTag) ? null : 'submit'
+				'type' => ($this->useButtonTag) ? null : 'submit',
+				'title' => ($this->useButtonTag) ? $this->description : null,
 			)
 		);
 	}
 
+	/**
+	 * Add content inside a button field.
+	 */
+	function setButtonContent($content) {
+		$this->buttonContent = (string) $content;
+		return $this;
+	}
+
+	/**
+	 * @return String
+	 */
+	function getButtonContent() {
+		return $this->buttonContent;
+	}
+
+	/**
+	 * @param Boolean
+	 */
+	public function setUseButtonTag($bool) {
+		$this->useButtonTag = $bool;
+		return $this;
+	}
+
+	/**
+	 * @return Boolean
+	 */
+	public function getUseButtonTag() {
+		return $this->useButtonTag;
+	}
+
 	function extraClass() {
 		return 'action ' . parent::extraClass();
 	}

forms/FormField.php

@@ -200,6 +200,7 @@ class FormField extends RequestHandler {
 	
 	function setTitle($val) { 
 		$this->title = $val;
+		return $this;
 	}
 
 	function RightTitle() {
@@ -208,6 +209,7 @@ class FormField extends RequestHandler {
 
 	function setRightTitle($val) { 
 		$this->rightTitle = $val;
+		return $this;
 	}
 
 	function LeftTitle() {
@@ -216,6 +218,7 @@ class FormField extends RequestHandler {
 
 	function setLeftTitle($val) {
 		$this->leftTitle = $val;
+		return $this;
 	}
 
 	/**
@@ -226,6 +229,7 @@ class FormField extends RequestHandler {
 	 */
 	public function setTabIndex($index) {
 		$this->tabIndex = $index;
+		return $this;
 	}
 
 	/**
@@ -281,6 +285,7 @@ class FormField extends RequestHandler {
 	 */
 	function addExtraClass($class) {
 		$this->extraClasses[$class] = $class;
+		return $this;
 	}
 
 	/**
@@ -290,6 +295,7 @@ class FormField extends RequestHandler {
 	 */
 	function removeExtraClass($class) {
 		if(isset($this->extraClasses) && array_key_exists($class, $this->extraClasses)) unset($this->extraClasses[$class]);
+		return $this;
 	}
 
 	/**
@@ -305,6 +311,7 @@ class FormField extends RequestHandler {
 	 */
 	function setAttribute($name, $value) {
 		$this->attributes[$name] = $value;
+		return $this;
 	}
 
 	/**
@@ -378,6 +385,7 @@ class FormField extends RequestHandler {
 	 */
 	function setValue($value) {
 		$this->value = $value; return $this;
+		return $this;
 	}
 	
 	/**
@@ -385,6 +393,7 @@ class FormField extends RequestHandler {
 	 */
 	function setName($name) {
 		$this->name = $name;
+		return $this;
 	}
 	
 	/**
@@ -394,6 +403,7 @@ class FormField extends RequestHandler {
 	 */
 	function setForm($form) {
 		$this->form = $form; 
+		return $this;
 	}
 	
 	/**
@@ -423,6 +433,7 @@ class FormField extends RequestHandler {
 	 */
 	public function setFieldHolderTemplate($template) {
 		$this->fieldHolderTemplate = $template;
+		return $this;
 	}
 
 	/**
@@ -443,6 +454,7 @@ class FormField extends RequestHandler {
 	function setError($message, $messageType) {
 		$this->message = $message; 
 		$this->messageType = $messageType; 
+		return $this;
 	}
 	
 	/**
@@ -454,6 +466,7 @@ class FormField extends RequestHandler {
 	 */
 	public function setCustomValidationMessage($msg) {
 		$this->customValidationMessage = $msg;
+		return $this;
 	}
 	
 	/**
@@ -477,6 +490,7 @@ class FormField extends RequestHandler {
 	 */
 	function setTemplate($template) {
 		$this->template = $template;
+		return $this;
 	}
 	
 	/**
@@ -569,6 +583,7 @@ class FormField extends RequestHandler {
 	 */
 	function setReadonly($bool) { 
 		$this->readonly = $bool; 
+		return $this;
 	}
 	
 	/**
@@ -585,6 +600,7 @@ class FormField extends RequestHandler {
 	 */
 	function setDisabled($bool) { 
 		$this->disabled = $bool; 
+		return $this;
 	}
 	
 	/**
@@ -684,6 +700,13 @@ class FormField extends RequestHandler {
 		$this->description = $description;
 		return $this;
 	}
+
+	/**
+	 * @return String
+	 */
+	function getDescription() {
+		return $this->description;
+	}
 	
 	function debug() {
 		return "$this->class ($this->name: $this->title : <font style='color:red;'>$this->message</font>) = $this->value";
@@ -738,6 +761,7 @@ class FormField extends RequestHandler {
 	 */ 
 	function setContainerFieldSet($containerFieldSet) {
 		$this->containerFieldSet = $containerFieldSet;
+		return $this;
 	}
 	
 	function rootFieldSet() {

forms/HtmlEditorConfig.php

@@ -121,7 +121,8 @@ class HtmlEditorConfig {
 	 * @return mixed - $v returned for chaining
 	 */
 	function setOption($k,$v) {
-		return $this->settings[$k] = $v;
+		$this->settings[$k] = $v;
+		return $this;
 	}
 	
 	/**
@@ -133,6 +134,7 @@ class HtmlEditorConfig {
 		foreach ($a as $k=>$v) {
 			$this->settings[$k] = $v;
 		}
+		return $this;
 	}
 	
 	/**
@@ -173,6 +175,7 @@ class HtmlEditorConfig {
 				unset($this->plugins[$plugin]);
 			}
 		}
+		return $this;
 	}
 	
 	/**
@@ -198,6 +201,7 @@ class HtmlEditorConfig {
 			$line = array_shift($buttons);
 		}
 		$this->buttons[$line] = is_array($buttons) ? $buttons : array($buttons);
+		return $this;
 	}
 	
 	/**
@@ -214,6 +218,7 @@ class HtmlEditorConfig {
 		foreach ($inserts as $button) {
 			$this->buttons[$line][] = $button;
 		}
+		return $this;
 	}
 	
 	/**

forms/HtmlEditorField.php

@@ -315,13 +315,17 @@ class HtmlEditorField_Toolbar extends RequestHandler {
 				)
 			),
 			new FieldList(
-				$removeAction = new ResetFormAction('remove', _t('HtmlEditorField.BUTTONREMOVELINK', 'Remove link')),
-				$insertAction = new FormAction('insert', _t('HtmlEditorField.BUTTONINSERTLINK', 'Insert link'))
+				Object::create('ResetFormAction', 'remove', _t('HtmlEditorField.BUTTONREMOVELINK', 'Remove link'))
+					->addExtraClass('ss-ui-action-destructive')
+					->setUseButtonTag(true)
+				,
+				FormAction::create('insert', _t('HtmlEditorField.BUTTONINSERTLINK', 'Insert link'))
+					->addExtraClass('ss-ui-action-constructive')
+					->setAttribute('data-icon', 'accept')
+					->setUseButtonTag(true)
 			)
 		);
 		
-		$insertAction->addExtraClass('ss-ui-action-constructive');
-		$removeAction->addExtraClass('ss-ui-action-destructive');
 		$contentComposite->addExtraClass('content');
 		
 		$form->unsetValidator();
@@ -380,9 +384,11 @@ class HtmlEditorField_Toolbar extends RequestHandler {
 		);
 		
 		$actions = new FieldList(
-			$insertAction = new FormAction('insertimage', _t('HtmlEditorField.BUTTONINSERT', 'Insert'))
+			FormAction::create('insertimage', _t('HtmlEditorField.BUTTONINSERT', 'Insert'))
+				->addExtraClass('ss-ui-action-constructive')
+				->setAttribute('data-icon', 'accept')
+				->setUseButtonTag(true)
 		);
-		$insertAction->addExtraClass('ss-ui-action-constructive');
 
 		$form = new Form(
 			$this->controller,

forms/ListboxField.php

@@ -118,6 +118,7 @@ class ListboxField extends DropdownField {
 	 */
 	function setSize($size) {
 		$this->size = $size;
+		return $this;
 	}
 	
 	/** 
@@ -126,6 +127,7 @@ class ListboxField extends DropdownField {
 	 */
 	function setMultiple($bool) {
 		$this->multiple = $bool;
+		return $this;
 	}
 	
 	function setSource($source) {
@@ -137,6 +139,8 @@ class ListboxField extends DropdownField {
 		}
 		
 		parent::setSource($source);
+
+		return $this;
 	}
 	
 	/**
@@ -180,6 +184,7 @@ class ListboxField extends DropdownField {
 			parent::setValue($val);
 		}
 		
+		return $this;
 	}
 	
 }

forms/LiteralField.php

@@ -42,6 +42,7 @@ class LiteralField extends DatalessField {
 	 */
 	function setContent($content) {
 		$this->content = $content;
+		return $this;
 	}
 	
 	/**
@@ -55,7 +56,8 @@ class LiteralField extends DatalessField {
 	 * Synonym of {@link setContent()} so that LiteralField is more compatible with other field types.
 	 */
 	function setValue($value) {
-		return $this->setContent($value);
+		$this->setContent($value);
+		return $this;
 	}
 
 	function performReadonlyTransformation() {

forms/MoneyField.php

@@ -87,6 +87,8 @@ class MoneyField extends FormField {
 		//  decimal and thousands signs, while respecting the stored
 		//  precision in the database without truncating it during display
 		//  and subsequent save operations
+
+		return $this;
 	}
 	
 	/**
@@ -129,6 +131,8 @@ class MoneyField extends FormField {
 		
 		$this->fieldAmount->setReadonly($bool);
 		$this->fieldCurrency->setReadonly($bool);
+
+		return $this;
 	}
 
 	function setDisabled($bool) {
@@ -136,6 +140,8 @@ class MoneyField extends FormField {
 		
 		$this->fieldAmount->setDisabled($bool);
 		$this->fieldCurrency->setDisabled($bool);
+
+		return $this;
 	}
 	
 	/**
@@ -148,6 +154,8 @@ class MoneyField extends FormField {
 		$oldVal = $this->fieldCurrency->Value();
 		$this->fieldCurrency = $this->FieldCurrency($this->name);
 		$this->fieldCurrency->setValue($oldVal);
+
+		return $this;
 	}
 	
 	/**
@@ -159,6 +167,7 @@ class MoneyField extends FormField {
 	
 	function setLocale($locale) {
 		$this->_locale = $locale;
+		return $this;
 	}
 	
 	function getLocale() {

forms/NullableField.php

@@ -61,6 +61,7 @@ class NullableField extends FormField {
 	 */
 	function setIsNullLabel(string $isNulLabel){
 		$this->isNullLabel = $isNulLabel;
+		return $this;
 	}
 	
 	/**
@@ -95,6 +96,8 @@ class NullableField extends FormField {
 		}
 		$this->valueField->setValue($value);
 		parent::setValue($value);
+
+		return $this;
 	}
 	
 	/**
@@ -105,6 +108,8 @@ class NullableField extends FormField {
 		// We need to pass through the name change to the underlying value field.
 		$this->valueField->setName($name);
 		parent::setName($name);
+
+		return $this;
 	}
 
 	/**

forms/OptionsetField.php

@@ -108,6 +108,7 @@ class OptionsetField extends DropdownField {
 	 */
 	function setDisabledItems($items) {
 		$this->disabledItems = $items;
+		return $this;
 	}
 	
 	/**

forms/Tab.php

@@ -56,6 +56,7 @@ class Tab extends CompositeField {
 	
 	public function setTabSet($val) {
 		$this->tabSet = $val;
+		return $this;
 	}
 
 	/**

forms/TabSet.php

@@ -95,7 +95,9 @@ class TabSet extends CompositeField {
 
 	public function setTabSet($val) {
 		$this->tabSet = $val;
+		return $this;
 	}
+	
 	public function getTabSet() {
 		if(isset($this->tabSet)) return $this->tabSet;
 	}

forms/TableField.php

@@ -454,6 +454,7 @@ class TableField extends TableListField {
 	 */
 	function setExtraData($extraData) {
 		$this->extraData = $extraData;
+		return $this;
 	}
 	
 	/**
@@ -480,6 +481,7 @@ class TableField extends TableListField {
 		
 	function setTransformationConditions($conditions) {
 		$this->transformationConditions = $conditions;
+		return $this;
 	}
 	
 	function jsValidation() {
@@ -580,6 +582,7 @@ JS;
 	
 	function setRequiredFields($fields) {
 		$this->requiredFields = $fields;
+		return $this;
 	}
 }
 

forms/TableListField.php

@@ -385,10 +385,12 @@ JS
 	 */
 	function setCustomQuery(DataList $dataList) {
 		$this->dataList = $dataList;
+		return $this;
 	}
 
 	function setCustomCsvQuery(DataList $dataList) {
 		$this->customCsvQuery = $query;
+		return $this;
 	}
 	
 	function setCustomSourceItems(SS_List $items) {
@@ -400,6 +402,8 @@ JS
 		} else {
 			user_error('TableList::setCustomSourceItems() should be passed a SS_List', E_USER_WARNING);
 		}
+
+		return $this;
 	}
 	
 	/**
@@ -499,6 +503,7 @@ JS
 	 */
 	function setClick_AjaxLoad($urlBase, $formID) {
 		$this->clickAction = "this.ajaxRequest('" . addslashes($urlBase) . "', '" . addslashes($formID) . "')";
+		return $this;
 	}
 
 	/**
@@ -506,6 +511,7 @@ JS
 	 */
 	function setClick_PopupLoad($urlBase) {
 		$this->clickAction = "var w = window.open(baseHref() + '$urlBase' + this.id.replace(/.*-(\d*)$/,'$1'), 'popup'); w.focus();";
+		return $this;
 	}
 	
 	function performReadonlyTransformation() {
@@ -701,6 +707,7 @@ JS
 	
 	function setPermissions($arr) {
 		$this->permissions = $arr;
+		return $this;
 	}
 
 	/**
@@ -717,6 +724,7 @@ JS
 	 */
 	function setShowPagination($bool) {
 		$this->showPagination = (bool)$bool;
+		return $this;
 	}
 
 	/**
@@ -731,6 +739,7 @@ JS
 	
 	function setPageSize($pageSize) {
 	 	$this->pageSize = $pageSize;
+	 	return $this;
 	}
 	 
 	 function PageSize() {
@@ -748,6 +757,7 @@ JS
 	function setExtraLinkParams($params){
 		Deprecation::notice('2.4', 'Put the query string onto your FormAction instead().');
 		$this->extraLinkParams = $params;
+		return $this;
 	}
 	
 	/**
@@ -907,6 +917,7 @@ JS
 	 */
 	 function setFieldListCsv($fields) {
 	 	$this->fieldListCsv = $fields;
+	 	return $this;
 	 }
 	
 	/**
@@ -914,6 +925,7 @@ JS
 	 */
 	function setCsvSeparator($csvSeparator) {
 		$this->csvSeparator = $csvSeparator;
+		return $this;
 	}
 	
 	/**
@@ -928,6 +940,7 @@ JS
 	 */
 	function removeCsvHeader() {
 		$this->csvHasHeader = false;
+		return $this;
 	}
 	 
 	/**
@@ -1099,14 +1112,17 @@ JS
 	
 	function setFieldCasting($casting) {
 		$this->fieldCasting = $casting;
+		return $this;
 	}
 
 	function setFieldFormatting($formatting) {
 		$this->fieldFormatting = $formatting;
+		return $this;
 	}
 	
 	function setCSVFieldFormatting($formatting) {
 		$this->csvFieldFormatting = $formatting;
+		return $this;
 	}
 	
 	/**
@@ -1114,6 +1130,7 @@ JS
 	 */
 	function setFieldList($fieldList) {
 		$this->fieldList = $fieldList;
+		return $this;
 	}
 	
 	/**
@@ -1147,6 +1164,7 @@ JS
 	
 	function setTemplate($template) {
 		$this->template = $template;
+		return $this;
 	}
 	
 	function CurrentLink() {
@@ -1241,6 +1259,7 @@ JS
 	 
 	function setHighlightConditions($conditions) {
 		$this->highlightConditions = $conditions;
+		return $this;
 	}
 	
 	/**

forms/TextField.php

@@ -27,6 +27,7 @@ class TextField extends FormField {
 	 */
 	function setMaxLength($length) {
 		$this->maxLength = $length;
+		return $this;
 	}
 	
 	/**

forms/TextareaField.php

@@ -100,6 +100,7 @@ class TextareaField extends FormField {
 	 */
 	function setRows($rows) {
 		$this->rows = $rows;
+		return $this;
 	}
 	
 	/**
@@ -109,6 +110,7 @@ class TextareaField extends FormField {
 	 */
 	function setColumns($cols) {
 		$this->cols = $cols;
+		return $this;
 	}
 
 	function Value() {

forms/TimeField.php

@@ -116,6 +116,8 @@ class TimeField extends TextField {
 			$this->value = null;
 			$this->valueObj = null;
 		}
+
+		return $this;
 	}
 	
 	/**
@@ -165,6 +167,7 @@ class TimeField extends TextField {
 	 */
 	function setLocale($locale) {
 		$this->locale = $locale;
+		return $this;
 	}
 	
 	/**
@@ -173,6 +176,7 @@ class TimeField extends TextField {
 	 */
 	function setConfig($name, $val) {		
 		$this->config[$name] = $val;
+		return $this;
 	}
 	
 	/**

forms/TreeDropdownField.php

@@ -98,6 +98,7 @@ class TreeDropdownField extends FormField {
 	 */
 	public function setTreeBaseID($ID) {
 		$this->baseID = (int) $ID;
+		return $this;
 	}
 	
 	/**
@@ -112,6 +113,7 @@ class TreeDropdownField extends FormField {
 		}
 		
 		$this->filterCallback = $callback;
+		return $this;
 	}
 	
 	/**
@@ -126,6 +128,7 @@ class TreeDropdownField extends FormField {
 		}
 		
 		$this->searchCallback = $callback;
+		return $this;
 	}
 
 	public function getShowSearch() {
@@ -137,6 +140,7 @@ class TreeDropdownField extends FormField {
 	 */
 	public function setShowSearch($bool) {
 		$this->showSearch = $bool;
+		return $this;
 	}
 
 	/**

forms/UploadField.php

@@ -738,7 +738,7 @@ class UploadField_ItemHandler extends RequestHandler {
 			$actions = $file->{$this->parent->getConfig('fileEditActions')}();
 		} else {
 			$actions = new FieldList($saveAction = new FormAction('doEdit', _t('UploadField.DOEDIT', 'Save')));
-			$saveAction->addExtraClass('ss-ui-action-constructive');
+			$saveAction->addExtraClass('ss-ui-action-constructive icon-accept');
 		}
 		if (is_a($this->parent->getConfig('fileEditValidator'), 'Validator')) {
 			$validator = $this->parent->getConfig('fileEditValidator');
@@ -830,7 +830,7 @@ class UploadField_SelectHandler extends RequestHandler {
 	 */
 	function Form() {
 		$action = new FormAction('doAttach', _t('UploadField.AttachFile', 'Attach file(s)'));
-		$action->addExtraClass('ss-ui-action-constructive');
+		$action->addExtraClass('ss-ui-action-constructive icon-accept');
 		return new Form(
 			$this,
 			'Form',

forms/Validator.php

@@ -79,6 +79,7 @@ abstract class Validator extends Object {
 		} else {
 			user_error("Validator::setJavascriptValidationHandler() passed bad handler '$handler'", E_USER_WARNING);
 		}
+		return $this;
 	}
 
 	/**
@@ -96,6 +97,7 @@ abstract class Validator extends Object {
 	 */
 	function setForm($form) {
 		$this->form = $form;
+		return $this;
 	}
 	
 	/**

forms/gridfield/GridField.php

@@ -335,7 +335,9 @@ class GridField extends FormField {
 				'tr', 
 				array(
 					"class" => 'ss-gridfield-item ' . $record->FirstLast() . " " . $record->EvenOdd(),
-					'data-id' => $record->ID
+					'data-id' => $record->ID,
+					// TODO Allow per-row customization similar to GridFieldDefaultColumns
+					'data-class' => $record->ClassName,
 				),
 				$rowContent
 			);
@@ -347,7 +349,7 @@ class GridField extends FormField {
 		$body = $content['body'] ? $this->createTag('tbody', array('class' => 'ss-gridfield-items'), implode("\n", $content['body'])) : '';
 		$foot = $content['footer'] ? $this->createTag('tfoot', array(), implode("\n", $content['footer'])) : '';
 
-		$this->addExtraClass('ss-gridfield');
+		$this->addExtraClass('ss-gridfield field');
 		$attrs = array_diff_key(
 			$this->getAttributes(), 
 			array('value' => false, 'type' => false, 'name' => false)
@@ -355,7 +357,7 @@ class GridField extends FormField {
 		$attrs['data-name'] = $this->getName();
 		$tableAttrs = array(
 			'id' => isset($this->id) ? $this->id : null,
-			'class' => "field CompositeField {$this->extraClass()}",
+			'class' => 'ss-gridfield-table',
 			'cellpadding' => '0',
 			'cellspacing' => '0'	
 		);
@@ -710,6 +712,7 @@ class GridField_Action extends FormAction {
 
 		Requirements::javascript(THIRDPARTY_DIR . '/jquery/jquery.js');
 		Requirements::javascript(THIRDPARTY_DIR . '/json-js/json2.js');
+		Requirements::javascript(SAPPHIRE_DIR . '/javascript/i18n.js');
 		Requirements::javascript(THIRDPARTY_DIR . '/jquery-entwine/dist/jquery.entwine-dist.js');
 		Requirements::javascript(SAPPHIRE_DIR . '/javascript/GridField.js');
 
@@ -727,7 +730,7 @@ class GridField_Action extends FormAction {
 		
 		// And generate field
 		$attributes = array(
-			'class' => 'action' . ($this->extraClass() ? $this->extraClass() : ''),
+			'class' => ($this->extraClass() ? $this->extraClass() : '') . ' action-' . $this->actionName,
 			'id' => $this->id(),
 			'type' => 'submit',
 			// Note:  This field needs to be less than 65 chars, otherwise Suhosin security patch 

forms/gridfield/GridFieldConfig.php

@@ -26,10 +26,22 @@ class GridFieldConfig {
 		$this->components = new ArrayList();
 	}
 	
+	/**
+	 * @param GridFieldComponent $component 
+	 */
 	public function addComponent(GridFieldComponent $component) {
 		$this->getComponents()->push($component);
 		return $this;
 	}
+
+	/**
+	 * @param GridFieldComponent One or more components
+	 */
+	public function addComponents() {
+		$components = func_get_args();
+		foreach($components as $component) $this->addComponent($component);
+		return $this;
+	}
 	
 	/**
 	 * @return ArrayList Of GridFieldComponent

forms/gridfield/GridFieldDefaultColumns.php

@@ -59,7 +59,7 @@ class GridFieldDefaultColumns implements GridField_ColumnProvider {
 	}
 	
 	public function getColumnAttributes($gridField, $item, $column) {
-		return null;
+		return array('class' => 'col-' . $column);
 	}
 	
 	public function getColumnMetadata($gridField, $column) {

forms/gridfield/GridFieldPopupForms.php

@@ -180,7 +180,7 @@ class GridFieldPopupForm_ItemRequest extends RequestHandler {
 				$saveAction = new FormAction('doSave', _t('GridFieldDetailsForm.Save', 'Save'))
 			)
 		);
-		$saveAction->addExtraClass('ss-ui-action-constructive');
+		$saveAction->addExtraClass('ss-ui-action-constructive icon-accept');
 		$form->loadDataFrom($this->record);
 		return $form;
 	}

javascript/DateField.js

@@ -5,10 +5,10 @@
 			return $(this).each(function() {
 				if($(this).data('datepicker')) return; // already applied
 
-				this.siblings("button").addClass("ui-icon ui-icon-calendar");
+				$(this).siblings("button").addClass("ui-icon ui-icon-calendar");
 				
 				var holder = $(this).parents('.field.date:first'), 
-					config = $.extend(opts || {}, $(this).metadata({type: 'class'}), {});
+					config = $.extend(opts || {}, $(this).data(), {});
 				if(!config.showcalendar) return;
 	
 				if(config.locale && $.datepicker.regional[config.locale]) {

javascript/GridField.js

@@ -1,8 +1,9 @@
 (function($){
 
-	$('fieldset.ss-gridfield').entwine({
+	$('.ss-gridfield').entwine({
 		/**
 		 * @param {Object} Additional options for jQuery.ajax() call
+		 * @param {successCallback} callback to call after reloading succeeded.
 		 */
 		reload: function(ajaxOpts, successCallback) {
 			var self = this, form = this.closest('form'), data = form.find(':input').serializeArray();
@@ -25,9 +26,10 @@
 
 					form.removeClass('loading');
 					if(successCallback) successCallback.apply(this, arguments);
+					self.trigger('reload', self);
 				},
 				error: function(e) {
-					alert(ss.i18n._t('GRIDFIELD.ERRORINTRANSACTION', 'An error occured while fetching data from the server\n Please try again later.'));
+					alert(ss.i18n._t('GRIDFIELD.ERRORINTRANSACTION'));
 					form.removeClass('loading');
 				}
 			}, ajaxOpts));
@@ -52,28 +54,35 @@
 		}
 	});
 
-	$('fieldset.ss-gridfield *').entwine({
+	$('.ss-gridfield *').entwine({
 		getGridField: function() {
-			return this.parents('fieldset.ss-gridfield:first');
+			return this.closest('.ss-gridfield');
 		}
 	});
 		
-	$('fieldset.ss-gridfield .action').entwine({
+	$('.ss-gridfield .action').entwine({
 		onclick: function(e){
 			this.getGridField().reload({data: [{name: this.attr('name'), value: this.val()}]});
 			e.preventDefault();
 		}
 	});
+
+	$('.ss-gridfield .action-deleterecord').entwine({
+		onclick: function(e){
+			if(!confirm(ss.i18n._t('TABLEFIELD.DELETECONFIRMMESSAGE'))) return false;
+			else this._super(e);
+		}
+	});
 	
 	/*
 	 * Upon focusing on a filter <input> element, move "filter" and "reset" buttons and display next to the current <input> element
 	 * ToDo ensure filter-button state is maintained after filtering (see resetState param)
 	 * ToDo get working in IE 6-7
 	 */
-	$('fieldset.ss-gridfield input.ss-gridfield-sort').entwine({
+	$('.ss-gridfield input.ss-gridfield-sort').entwine({
 		onfocusin: function(e) {
 			// Dodgy results in IE <=7 & ignore if only one filter-field
-			countfields = $('fieldset.ss-gridfield input.ss-gridfield-sort').length;
+			countfields = $('.ss-gridfield input.ss-gridfield-sort').length;
 			if(($.browser.msie && $.browser.version <= 7) || countfields == 1) {
 				return false;
 			}
@@ -109,7 +118,7 @@
 	 * Allows selection of one or more rows in the grid field.
 	 * Purely clientside at the moment.
 	 */
-	$('fieldset.ss-gridfield[data-selectable]').entwine({
+	$('.ss-gridfield[data-selectable]').entwine({
 		/**
 		 * @return {jQuery} Collection
 		 */
@@ -123,7 +132,7 @@
 			return $.map(this.getSelectedItems(), function(el) {return $(el).data('id');});
 		}
 	});
-	$('fieldset.ss-gridfield[data-selectable] .ss-gridfield-items').entwine({
+	$('.ss-gridfield[data-selectable] .ss-gridfield-items').entwine({
 		onmatch: function() {
 			this._super();
 			

javascript/GridFieldSearch.js

@@ -16,7 +16,7 @@ jQuery(function($){
 					data: form.serialize()+'&'+escape(searchField.attr('name'))+'='+escape(searchField.val()), 
 					success: function(data) {
 						response( $.map(JSON.parse(data), function( name, id ) {
-							return { label: name, value: name, id: id }
+							return { label: name, value: name, id: id };
 						}));
 					},
 					error: function(e) {
@@ -25,10 +25,10 @@ jQuery(function($){
 				});
 			},
 			select: function(event, ui) {
-				$(this).closest("fieldset.ss-gridfield").find("#action_gridfield_relationfind").replaceWith(
+				$(this).closest(".ss-gridfield").find("#action_gridfield_relationfind").replaceWith(
 					'<input type="hidden" name="relationID" value="'+ui.item.id+'" id="relationID"/>'
 				);
-				$(this).closest("fieldset.ss-gridfield").find("#action_gridfield_relationadd").removeAttr('disabled');
+				$(this).closest(".ss-gridfield").find("#action_gridfield_relationadd").removeAttr('disabled');
 			}
 		});
 	});

javascript/HtmlEditorField.js

@@ -14,8 +14,6 @@
  */
  ss.editorWrappers = {};
  ss.editorWrappers.tinyMCE = (function() {
-	var bookmark;
-
 	return {
 		/**
 		 * @return Mixed Implementation specific object
@@ -27,13 +25,11 @@
 		 * Invoked when a content-modifying UI is opened.
 		 */
 		onopen: function() {
-			bookmark = this.getInstance().selection.getBookmark();
 		},
 		/**
 		 * Invoked when a content-modifying UI is closed.
 		 */
 		onclose: function() {
-			bookmark = null;
 		},
 		/**
 		 * Write the HTML back to the original text area field.
@@ -101,25 +97,31 @@
 		 * Parameters: {DOMElement}
 		 */
 		selectNode: function(node) {
-			this.getInstance().selection.select(node)
+			this.getInstance().selection.select(node);
 		},
 		/**
+		 * Insert content at the current caret position
+		 * 
 		 * @param String HTML
 		 */
-		insertContent: function(html) {
-			// Workaround for IE losing focus
-			this.getInstance().selection.moveToBookmark(bookmark);
-			this.getInstance().execCommand('mceInsertContent', false, html);
+		insertContent: function(html, opts) {
+			this.getInstance().execCommand('mceInsertContent', false, html, opts);
+		},
+		/**
+		 * Replace currently selected content
+		 * 
+		 * @param {String} html
+		 */
+		replaceContent: function(html, opts) {
+			this.getInstance().execCommand('mceReplaceContent', false, html, opts);
 		},
 		/**
 		 * Insert or update a link in the content area (based on current editor selection)
 		 * 
 		 * Parameters: {Object} attrs
 		 */
-		insertLink: function(attrs) {
-			// Workaround for IE losing focus
-			this.getInstance().selection.moveToBookmark(bookmark);
-			this.getInstance().execCommand("mceInsertLink", false, attrs);
+		insertLink: function(attrs, opts) {
+			this.getInstance().execCommand("mceInsertLink", false, attrs, opts);
 		},
 		/**
 		 * Remove the link from the currently selected node (if any).
@@ -147,8 +149,29 @@
 			if(href.match(/^javascript:\s*mctmp/)) href = '';
 
 			return href;
+		},
+		/**
+		 * Creates a bookmark for the currently selected range,
+		 * which can be used to reselect this range at a later point.
+		 * @return {mixed}
+		 */
+		createBookmark: function() {
+			return this.getInstance().selection.getBookmark();
+		},
+		/**
+		 * Selects a bookmarked range previously saved through createBookmark().
+		 * @param  {mixed} bookmark
+		 */
+		moveToBookmark: function(bookmark) {
+			this.getInstance().selection.moveToBookmark(bookmark);
+		},
+		/**
+		 * Add new undo point with the current DOM content.
+		 */
+		addUndo: function() {
+			this.getInstance().undoManager.add();
 		}
-	}
+	};
 });
 // Override this to switch editor wrappers
 ss.editorWrappers['default'] = ss.editorWrappers.tinyMCE;
@@ -182,7 +205,7 @@ ss.editorWrappers['default'] = ss.editorWrappers.tinyMCE;
 						ed.save();
 
 						// TinyMCE assigns value attr directly, which doesn't trigger change event
-						self.trigger('change'); 	
+						self.trigger('change');
 					}
 				});
 
@@ -220,7 +243,7 @@ ss.editorWrappers['default'] = ss.editorWrappers.tinyMCE;
 
 			isChanged: function() {
 				var ed = this.getEditor();
-				return (ed && ed.isDirty());
+				return (ed && ed.getInstance() && ed.isDirty());
 			},
 
 			resetChanged: function() {
@@ -250,6 +273,9 @@ ss.editorWrappers['default'] = ss.editorWrappers.tinyMCE;
 			// Wrapper for various HTML editors
 			Editor: null,
 
+			// TODO Figure out how to keep bookmark reference in entwine, and still be allowed to delete the JS object
+			// Bookmark: null,
+
 			onmatch: function() {
 				// Move title from headline to (jQuery compatible) title attribute
 				var titleEl = this.find(':header:first');
@@ -270,12 +296,14 @@ ss.editorWrappers['default'] = ss.editorWrappers.tinyMCE;
 			close: function() {
 				this.dialog('close');
 				this.getEditor().onclose();
+				if(typeof window._ss_htmleditorfield_bookmark != 'undefined') window._ss_htmleditorfield_bookmark = null;
 			},
 			open: function() {
 				this.updateFromEditor();
 				this.dialog('open');
 				this.redraw();
 				this.getEditor().onopen();
+				window._ss_htmleditorfield_bookmark = this.getEditor().createBookmark();
 			},
 			/**
 			 * Update the view state based on the current editor selection.
@@ -323,7 +351,7 @@ ss.editorWrappers['default'] = ss.editorWrappers.tinyMCE;
 				this.addAnchorSelector();
 
 				// Toggle field visibility and state based on type selection
-				for(i=0;item=list[i];i++) jQuery(this.find('.field#' + item)).toggle(item == linkType);
+				for(i=0;item==list[i];i++) jQuery(this.find('.field#' + item)).toggle(item == linkType);
 				jQuery(this.find('.field#Anchor')).toggle(linkType == 'internal' || linkType == 'anchor');
 				jQuery(this.find('.field#AnchorSelector')).toggle(linkType=='anchor');
 				jQuery(this.find('.field#AnchorRefresh')).toggle(linkType=='anchor');
@@ -360,7 +388,7 @@ ss.editorWrappers['default'] = ss.editorWrappers.tinyMCE;
 						target = null;
 						break;
 
-					case 'external':
+					// case 'external':
 					default:
 						href = this.find(':input[name=external]').val();
 						// Prefix the URL with "http://" if no prefix is found
@@ -374,6 +402,10 @@ ss.editorWrappers['default'] = ss.editorWrappers.tinyMCE;
 					title : this.find(':input[name=Description]').val()
 				};
 
+				// Workaround for browsers losing focus, similar to tinyMCEPopup.restoreSelection
+				ed.moveToBookmark(window._ss_htmleditorfield_bookmark);
+				window._ss_htmleditorfield_bookmark = null;
+
 				// Add the new link
 				ed.insertLink(attributes);
 				this.trigger('onafterinsert', attributes);
@@ -389,11 +421,11 @@ ss.editorWrappers['default'] = ss.editorWrappers.tinyMCE;
 				// Avoid adding twice
 				if(this.find(':input[name=AnchorSelector]').length) return;
 
-				var self = this;
+				var self = this, anchorSelector;
 
 				// refresh the anchor selector on click, or in case of IE - button click
 				if( !$.browser.ie ) {
-					var anchorSelector = $('<select id="Form_EditorToolbarLinkForm_AnchorSelector" name="AnchorSelector"></select>');
+					anchorSelector = $('<select id="Form_EditorToolbarLinkForm_AnchorSelector" name="AnchorSelector"></select>');
 					this.find(':input[name=Anchor]').parent().append(anchorSelector);
 
 					anchorSelector.focus(function(e) {
@@ -401,7 +433,7 @@ ss.editorWrappers['default'] = ss.editorWrappers.tinyMCE;
 					});
 				} else {
 					var buttonRefresh = $('<a id="Form_EditorToolbarLinkForm_AnchorRefresh" title="Refresh the anchor list" alt="Refresh the anchor list" class="buttonRefresh"><span></span></a>');
-					var anchorSelector = $('<select id="Form_EditorToolbarLinkForm_AnchorSelector" class="hasRefreshButton" name="AnchorSelector"></select>');
+					anchorSelector = $('<select id="Form_EditorToolbarLinkForm_AnchorSelector" class="hasRefreshButton" name="AnchorSelector"></select>');
 					this.find(':input[name=Anchor]').parent().append(buttonRefresh).append(anchorSelector);
 
 					buttonRefresh.click(function(e) {
@@ -420,7 +452,7 @@ ss.editorWrappers['default'] = ss.editorWrappers.tinyMCE;
 
 			// this function collects the anchors in the currently active editor and regenerates the dropdown
 			refreshAnchors: function() {
-				var selector = this.find(':input[name=AnchorSelector]'), anchors = new Array();
+				var selector = this.find(':input[name=AnchorSelector]'), anchors = [];
 				// name attribute is defined as CDATA, should accept all characters and entities
 				// http://www.w3.org/TR/1999/REC-html401-19991224/struct/links.html#h-12.2
 				var raw = this.getEditor().getContent().match(/name="([^"]+?)"|name='([^']+?)'/gim);
@@ -432,8 +464,8 @@ ss.editorWrappers['default'] = ss.editorWrappers.tinyMCE;
 
 				selector.empty();
 				selector.append($('<option value="" selected="1">Select an anchor</option>'));
-				for (var i = 0; i < anchors.length; i++) {
-					selector.append($('<option value="'+anchors[i]+'">'+anchors[i]+'</option>'));
+				for (var j = 0; j < anchors.length; j++) {
+					selector.append($('<option value="'+anchors[j]+'">'+anchors[j]+'</option>'));
 				}
 			},
 
@@ -490,7 +522,7 @@ ss.editorWrappers['default'] = ss.editorWrappers.tinyMCE;
 				target = linkDataSource.attr('target');
 				title = linkDataSource.attr('title');
 				style_class = linkDataSource.attr('class');
-				href = ed.cleanLink(href, linkDataSource),
+				href = ed.cleanLink(href, linkDataSource);
 				action = "update";
 			}
 			
@@ -499,20 +531,20 @@ ss.editorWrappers['default'] = ss.editorWrappers.tinyMCE;
 					LinkType: 'email',
 					email: RegExp.$1,
 					Description: title
-				}
+				};
 			} else if(href.match(/^(assets\/.*)$/)) {
 				return {
 					LinkType: 'file',
 					file: RegExp.$1,
 					Description: title
-				}
+				};
 			} else if(href.match(/^#(.*)$/)) {
 				return {
 					LinkType: 'anchor',
 					Anchor: RegExp.$1,
 					Description: title,
 					TargetBlank: target ? true : false
-				}
+				};
 			} else if(href.match(/^\[sitetree_link\s*(?:%20)?id=([0-9]+)\]?(#.*)?$/)) {
 				return {
 					LinkType: 'internal',
@@ -520,18 +552,18 @@ ss.editorWrappers['default'] = ss.editorWrappers.tinyMCE;
 					Anchor: RegExp.$2 ? RegExp.$2.substr(1) : '',
 					Description: title,
 					TargetBlank: target ? true : false
-				}
+				};
 			} else if(href) {
 				return {
 					LinkType: 'external',
 					external: href,
 					Description: title,
 					TargetBlank: target ? true : false
-				}
+				};
 			} else {
 				return {
 					LinkType: 'internal'
-				}
+				};
 			}
 		}	
 		});
@@ -545,7 +577,7 @@ ss.editorWrappers['default'] = ss.editorWrappers.tinyMCE;
 			}
 		});
 
-		$('form.htmleditorfield-linkform input[name=action_remove]').entwine({
+		$('form.htmleditorfield-linkform :submit[name=action_remove]').entwine({
 			onclick: function(e) {
 				this.parents('form:first').removeLink();
 				return false;
@@ -567,11 +599,11 @@ ss.editorWrappers['default'] = ss.editorWrappers.tinyMCE;
 				var self = this, ed = this.getEditor();
 
 				// HACK: See ondialogopen()
-				// if($.browser.msie) jQuery(ed.getContainer()).show();
+				// jQuery(ed.getContainer()).show();
 
 
 				this.find('.ss-htmleditorfield-file').each(function(el) {
-					ed.insertContent($(this).getHTML());
+					$(this).insertHTML();
 				});
 				ed.repaint();
 				this.close();
@@ -594,13 +626,13 @@ ss.editorWrappers['default'] = ss.editorWrappers.tinyMCE;
 
 				// HACK: Hide selected node in IE because its drag handles on potentially selected elements
 				// don't respect the z-index of the dialog overlay.
-				// if($.browser.msie) jQuery(ed.getContainer()).hide();
+				// jQuery(ed.getContainer()).hide();
 			},
 			ondialogclose: function() {
 				var ed = this.getEditor(), node = $(ed.getSelectedNode());
 
 				// HACK: See ondialogopen()
-				// if($.browser.msie) jQuery(ed.getContainer()).show();
+				// jQuery(ed.getContainer()).show();
 
 				this.find('.ss-htmleditorfield-file').remove(); // Remove any existing views
 				this.find('.ss-gridfield-items .ui-selected').removeClass('ui-selected'); // Unselect all items
@@ -632,7 +664,7 @@ ss.editorWrappers['default'] = ss.editorWrappers.tinyMCE;
 					item = $('<div class="ss-htmleditorfield-file" />');
 
 				item.addClass('loading');
-				this.find('.content-edit').append(item)
+				this.find('.content-edit').append(item);
 				$.ajax({
 					// url: this.data('urlViewfile') + '?ID=' + id,
 					url: this.attr('action').replace(/MediaForm/, 'viewfile') + params,
@@ -685,6 +717,19 @@ ss.editorWrappers['default'] = ss.editorWrappers.tinyMCE;
 			 */
 			getHTML: function() {
 			},
+			/**
+			 * Insert updated HTML content into the rich text editor
+			 */
+			insertHTML: function() {
+				var form = this.closest('form'), ed = form.getEditor();
+
+				// Workaround for browsers losing focus, similar to tinyMCEPopup.restoreSelection
+				ed.moveToBookmark(window._ss_htmleditorfield_bookmark);
+				window._ss_htmleditorfield_bookmark = null;
+
+				// Insert content
+				ed.replaceContent(this.getHTML());
+			},
 			/**
 			 * Updates the form values from an existing node in the editor.
 			 * 
@@ -737,8 +782,8 @@ ss.editorWrappers['default'] = ss.editorWrappers.tinyMCE;
 				return {
 					'src' : this.find(':input[name=URL]').val(),
 					'alt' : this.find(':input[name=AltText]').val(),
-					'width' : width ? parseInt(width, 10) : null,
-					'height' : height ? parseInt(height, 10) : null,
+					'width' : width ? parseInt(width, 10) + "px" : null,
+					'height' : height ? parseInt(height, 10) + "px" : null,
 					'title' : this.find(':input[name=Title]').val(),
 					'class' : this.find(':input[name=CSSClass]').val()
 				};
@@ -752,7 +797,8 @@ ss.editorWrappers['default'] = ss.editorWrappers.tinyMCE;
 				var el,
 					attrs = this.getAttributes(),
 					extraData = this.getExtraData(),
-					imgEl = $('<img id="__mce_tmp" />').attr(attrs);
+					// imgEl = $('<img id="_ss_tmp_img" />');
+					imgEl = $('<img />').attr(attrs);
 				
 				if(extraData.CaptionText) {
 					el = $('<div style="width: ' + attrs['width'] + 'px;" class="captionImage ' + attrs['class'] + '"><p class="caption">' + extraData.CaptionText + '</p></div>').prepend(imgEl);
@@ -761,6 +807,40 @@ ss.editorWrappers['default'] = ss.editorWrappers.tinyMCE;
 				}
 				return $('<div />').append(el).html(); // Little hack to get outerHTML string
 			},
+			/**
+			 * Logic similar to TinyMCE 'advimage' plugin, insertAndClose() method.
+			 */
+			insertHTML: function() {
+				var form = this.closest('form'), ed = form.getEditor(), 
+					node = $(ed.getSelectedNode()), captionNode = node.closest('.captionImage');
+
+				// Workaround for browsers losing focus, similar to tinyMCEPopup.restoreSelection.
+				// TODO In TinyMCE core this is restricted to IE, but leaving it our also
+				// breaks Firefox: It doesn't save the selection because it inserts into a temporary TinyMCE
+				// marker element rather than the content DOM nodes
+				ed.moveToBookmark(window._ss_htmleditorfield_bookmark);
+				window._ss_htmleditorfield_bookmark = null;
+
+				if(node && node.is('img')) {
+					// If the image exists, update it to avoid complications with inserting TinyMCE HTML content
+					var attrs = this.getAttributes(), extraData = this.getExtraData();
+					node.attr(attrs);
+					// TODO Doesn't allow adding a caption to image after it was first added
+					if(captionNode.length) {
+						captionNode.find('.caption').text(extraData.CaptionText);
+						captionNode.css({width: attrs.width, height: attrs.height}).attr('class', attrs['class']);
+					}
+					// Undo needs to be added manually as we're doing direct DOM changes
+					ed.addUndo();
+				} else {
+					// Otherwise insert the whole HTML content
+					ed.repaint();
+					ed.insertContent(this.getHTML(), {skip_undo : 1});	
+					ed.addUndo(); // Not sure why undo is separate here, replicating TinyMCE logic
+				}
+
+				ed.repaint();
+			},
 			updateFromNode: function(node) {
 				this.find(':input[name=AltText]').val(node.attr('alt'));
 				this.find(':input[name=Title]').val(node.attr('title'));
@@ -783,12 +863,7 @@ ss.editorWrappers['default'] = ss.editorWrappers.tinyMCE;
 				return {
 					'src' : this.find(':input[name=URL]').val(),
 					'width' : width ? parseInt(width, 10) : null,
-					'height' : height ? parseInt(height, 10) : null,
-				};
-			},
-			getExtraData: function() {
-				return {
-					'CaptionText': this.find(':input[name=CaptionText]').val()
+					'height' : height ? parseInt(height, 10) : null
 				};
 			},
 			getHTML: function() {
@@ -846,7 +921,7 @@ ss.editorWrappers['default'] = ss.editorWrappers.tinyMCE;
 				// TODO Custom event doesn't fire in IE if registered through object literal
 				var self = this;
 				this.bind('change', function() {
-					var fileList = self.closest('form').find('fieldset.ss-gridfield');
+					var fileList = self.closest('form').find('.ss-gridfield');
 					fileList.setState('ParentID', self.getValue());
 					fileList.reload();
 				});

javascript/InlineFormAction.js

@@ -4,7 +4,7 @@
 Behaviour.register({
 	'div.inlineformaction input#$ID': {
 		onclick: function() {
-			var url = jQuery('base').attr('href') + 'admin-custom/' + this.name.substring(7) + '?ID=' + jQuery('#Form_EditForm_ID').value + '&ajax=1';
+			var url = jQuery('base').attr('href') + 'admin-custom/' + this.name.substring(7) + '?ID=' + document.getElementById('Form_EditForm_ID').value + '&ajax=1';
 			
 			jQuery.ajax({
 				'url': url,

javascript/TreeDropdownField.js

@@ -118,7 +118,7 @@
 			 * Update title from tree node value
 			 */
 			updateTitle: function() {
-				var self = this, tree = self.find('.tree-holder');
+				var self = this, tree = self.find('.tree-holder'), val = this.getValue();
 				var updateFn = function() {
 					var val = self.getValue();
 					if(val) {
@@ -131,7 +131,7 @@
 				};
 
 				// Load the tree if its not already present
-				if(jQuery.jstree._reference(tree)) updateFn();
+				if(jQuery.jstree._reference(tree) || !val) updateFn();
 				else this.loadTree(null, updateFn);
 			},
 			setValue: function(val) {
@@ -146,7 +146,7 @@
 				var self = this, panel = this.getPanel(), treeHolder = $(panel).find('.tree-holder');
 				var params = (params) ? $.extend({}, this.getRequestParams(), params) : this.getRequestParams();
 				panel.addClass('loading');
-				treeHolder.load(this.data('url-tree'), params, function(html, status, xhr) {
+				treeHolder.load(this.data('urlTree'), params, function(html, status, xhr) {
 					var firstLoad = true;
 					if(status == 'success') {
 						$(this)
@@ -194,7 +194,7 @@
 						// TODO Hack to avoid ajax load on init, see http://code.google.com/p/jstree/issues/detail?id=911
 						'data': this.getPanel().find('.tree-holder').html(),
 						'ajax': {
-							'url': this.data('url-tree'),
+							'url': this.data('urlTree'),
 							'data': function(node) {
 								var id = $(node).data("id") ? $(node).data("id") : 0, params = self.getRequestParams();
 								params = $.extend({}, params, {ID: id, ajax: 1});
@@ -315,7 +315,7 @@
 				var self = this, panel = this.getPanel(), treeHolder = $(panel).find('.tree-holder');
 				var params = (params) ? $.extend({}, this.getRequestParams(), params) : this.getRequestParams();
 				panel.addClass('loading');
-				treeHolder.load(this.data('url-tree'), params, function(html, status, xhr) {
+				treeHolder.load(this.data('urlTree'), params, function(html, status, xhr) {
 					var firstLoad = true;
 					if(status == 'success') {
 						$(this)

javascript/UploadField.js

@@ -99,7 +99,7 @@
 
 				// TODO Allow single-select
 				dialog.find('iframe').bind('load', function(e) {
-					var contents = $(this).contents(), gridField = contents.find('fieldset.ss-gridfield');
+					var contents = $(this).contents(), gridField = contents.find('.ss-gridfield');
 					// TODO Fix jQuery custom event bubbling across iframes on same domain
 					// gridField.find('.ss-gridfield-items')).bind('selectablestop', function() {
 					// });
@@ -192,32 +192,22 @@
 					this.siblings().toggleClass('ui-state-disabled');
 					editform.toggleEditForm();
 				}
+				e.preventDefault(); // Avoid a form submit
 			}
 		});
 		$('div.ss-upload .ss-uploadfield-item-editform').entwine({
-			EditFormVisible: false,
-			fitHeight: function() {
-				var iframe = this.find('iframe'),
-					h = iframe.contents().height() + 'px';
-				iframe.css('height', h);
-				return h;
-			},
-			showEditForm: function() {
-				return this.stop().animate({height: this.fitHeight()});
-			},
-			hideEditFormShow: function() {
-				return this.stop().animate({height: 0});
-			},
 			toggleEditForm: function() {
-				if (this.getEditFormVisible()) this.hideEditFormShow();
-				else this.showEditForm();
-				this.setEditFormVisible(!this.getEditFormVisible());
+				jQuery(this).toggle();
 			}
 		});
 		$('div.ss-upload .ss-uploadfield-item-editform iframe').entwine({
 			onmatch: function() {
 				this.load(function() {
-					$(this).parent().removeClass('loading');
+					var iframe = $(this), h = iframe.contents().height();
+					// Set iframe to match its contents height
+					iframe.height(h); 
+					// set container to match the same height
+					iframe.parent().removeClass('loading').height(h);
 				});
 			}
 		});

scss/AssetUploadField.scss

@@ -2,7 +2,6 @@
 
 // TODO we need a seperated file for styles that are used in both cms and front end (such as buttons)
 @import "../admin/scss/themes/default.scss";
-@import "sprites.scss";
 
 #AssetUploadField {
 	border-bottom: 0;
@@ -17,6 +16,10 @@
 		padding: 0 0 7px;
 		clear: both;
 	}
+
+	.field {
+		border-bottom: 0;
+	}
 	
 	.ss-uploadfield-files {
 		margin: 0;
@@ -89,7 +92,7 @@
 			left: 0;
 			z-index: 0;
 		}
-		label.ss-ui-button {
+		.ss-ui-button {
 			background: none;
 			border: 0;
 			@include box-shadow(none);
@@ -101,18 +104,15 @@
 				// TODO tmp hack until we have permissions and can disable delete
 				display: none;
 			}
-			&.ss-uploadfield-fromfiles {
-				//@include actionButtonSprite('network-cloud');
-			}
-			&.ss-uploadfield-item-delete {
-				//color: $color-button-destructive;
-				//@include actionButtonSprite('minus-circle');
-			}
 			&.ss-uploadfield-item-edit {
 				padding-top: 0;
 				padding-bottom: 0;
 				line-height: 30px;
 			}
+
+			.ui-icon {
+				display: none;
+			}
 		}
 		.ss-uploadfield-item-progress {
 			width: 100%;
@@ -151,7 +151,7 @@
 				height: 16px;
 				cursor: pointer;
 				@include single-box-shadow(none);
-				background: sprite($sprites16, cross-circle) no-repeat;
+				// background: sprite($sprites16, cross-circle) no-repeat;
 			}
 		}
 		
@@ -166,8 +166,6 @@
 		}
 	}
 	.ss-uploadfield-addfile {
-		height: 70px;
-		padding: 5px 15px 15px;
 	
 		.ss-uploadfield-item-info {
 			float: left;
@@ -178,7 +176,6 @@
 			overflow: hidden;
 			display: block;
 			margin: 0 10px 0 0;
-			@include actionButtonSpriteConstructive('drive-upload');
 		}
 		.ss-uploadfield-item-uploador {
 			float: left;

scss/GridField.scss

@@ -31,7 +31,7 @@ $gf_border_radius:	7px;
 }
 
 .cms {
-	fieldset.ss-gridfield {
+	.ss-gridfield {
 		& > div {
 			margin-bottom: 35px;
 		}
@@ -47,11 +47,10 @@ $gf_border_radius:	7px;
 		}
 	}
 
-	table.ss-gridfield.field {
+	table.ss-gridfield-table {
 		display: table; 
 		box-shadow: none;		
 		padding: 0;
-		margin: 20px 0 0 0;
 		border-collapse: separate;	
 		border-bottom: 0 none;				
 		width: 100%;

scss/UploadField.scss

@@ -2,7 +2,6 @@
 
 // TODO we need a seperated file for styles that are used in both cms and front end (such as buttons)
 @import "../admin/scss/themes/default.scss";
-@import "sprites.scss";
 
 
 .ss-uploadfield {
@@ -67,7 +66,7 @@
 			font-weight: bold;
 		}
 	}
-	label.ss-ui-button {
+	.ss-ui-button {
 		display: block;
 		float: left;
 		margin: 0 10px 0 0;
@@ -75,23 +74,6 @@
 		&.ss-uploadfield-fromcomputer {
 			position: relative;
 			overflow: hidden;
-			@include actionButtonSprite('drive-upload');
-		}
-		&.ss-uploadfield-fromfiles {
-			@include actionButtonSprite('network-cloud');
-		}
-		&.ss-uploadfield-startall {
-			@include actionButtonSprite('navigation');
-		}
-		&.ss-uploadfield-item-delete {
-			color: $color-button-destructive;
-			@include actionButtonSprite('minus-circle');
-		}
-		&.ss-uploadfield-item-remove {
-			@include actionButtonSprite('plug-disconnect-prohibition');
-		}
-		&.ss-uploadfield-item-edit {
-			@include actionButtonSprite('pencil');
 		}
 	}
 	.ss-uploadfield-files {
@@ -160,13 +142,13 @@
 				height: 16px;
 				cursor: pointer;
 				@include single-box-shadow(none);
-				background: sprite($sprites16, cross-circle) no-repeat;
+				// background: sprite($sprites16, cross-circle) no-repeat;
 			}
 		}
 		.ss-uploadfield-item-start {
 			right: 20px;
 			button {
-				background: sprite($sprites16, navigation) no-repeat;
+				// background: sprite($sprites16, navigation) no-repeat;
 			}
 		}
 		.ss-uploadfield-item-editform {

scss/_sprites.scss

@@ -1,80 +0,0 @@
-/**
- * Helper SCSS file for generating sprites for the interface.
- */
-@import "compass/utilities/sprites/base";
-
-//$sprites32: sprite-map("sprites_32x32/*.png", $spacing: 10px);
-	
-$sprites16: sprite-map("sprites_16x16/*.png", $spacing: 10px);
-	
-/* CMS action button sprite mix-in for UploadField, copied from admin/scss/_forms.scss */
-@mixin actionButtonSprite($name) {
-  	padding-left: 24px;
-	padding-right: 6px;
-
-	@include background($color-button-generic sprite($sprites16, $name, 5px, 6px) no-repeat);
-	@include background(sprite($sprites16, $name, 5px, 6px) no-repeat,
-		linear-gradient(color-stops(
-			lighten($color-button-generic, 10%),
-			darken($color-button-generic, 5%)
-		))
-	);
-	&.ui-state-hover,
-	&:hover {
-		@include background(lighten($color-button-generic, 10%) sprite($sprites16, $name, 5px, 6px) no-repeat);
-		@include background(sprite($sprites16, $name, 5px, 6px) no-repeat,
-			linear-gradient(color-stops(
-				lighten($color-button-generic, 20%),
-				$color-button-generic
-			))
-		);
-	}
-	&.ui-state-disabled {
-	    background-image: none;
-	    color: $color-text;
-	    @include background(lighten($color-button-generic, 20%) sprite($sprites16, $name+_disabled, 5px, 6px) no-repeat);
-		@include background(sprite($sprites16, $name+_disabled, 5px, 6px) no-repeat,
-			linear-gradient(color-stops(
-				lighten($color-button-generic, 20%),
-				$color-button-generic
-			))
-		);
-	}
-}
-@mixin actionButtonSpriteConstructive($name) {
-  	background-image: none;
-	padding-left: 25px;
-	padding-right: 7px;
-	font-weight: bold;
-	margin-left: $grid-x;
-	color: $color-text-light;
-	border-color: $color-button-constructive-border;
-	border-bottom-color: darken($color-button-constructive-border, 10%);			
-	@include background($color-button-constructive sprite($sprites16, $name, 6, 6) no-repeat);
-	@include background(sprite($sprites16, $name
-	, 6, 6) no-repeat,
-		linear-gradient(color-stops(
-			lighten($color-button-constructive, 10%),
-			darken($color-button-constructive, 5%)
-		))
-	);
-
-	@include text-shadow(darken($color-button-constructive, 10%) 0 1px 1px);
-
-	&.ui-state-hover {
-		border-color: darken($color-button-constructive-border, 10%);
-		@include background(lighten($color-button-constructive, 10%) sprite($sprites16, $name, 6, 6) no-repeat);
-		@include background(sprite($sprites16, $name, 6, 6) no-repeat,
-			linear-gradient(color-stops(
-				lighten($color-button-constructive, 15%),
-				$color-button-constructive
-			))
-		);
-	}
-	&:active, &:focus {
-		padding: $grid-y 8px $grid-y 26px;
-		border: none;
-		@include background(darken($color-button-constructive, 2%) sprite($sprites16, $name, 7, 7) no-repeat);
-		@include box-shadow(inset 0 1px 3px rgb(23, 24, 26), 0 1px 0 rgba(255, 255, 255, .6));
-	}
-}

security/Member.php

@@ -1557,9 +1557,11 @@ class Member_ProfileForm extends Form {
 		$fields->push(new HiddenField('ID','ID',$member->ID));
 
 		$actions = new FieldList(
- 			$saveAction = new FormAction('dosave',_t('CMSMain.SAVE', 'Save'), null, null, "ss-ui-button ss-ui-action-constructive")
+ 			FormAction::create('dosave',_t('CMSMain.SAVE', 'Save'))
+ 				->addExtraClass('ss-ui-button ss-ui-action-constructive')
+ 				->setAttribute('data-icon', 'accept')
+ 				->setUseButtonTag(true)
 		);
-		$saveAction->addExtraClass('ss-ui-action-constructive');
 		
 		$validator = new Member_Validator();
 		

templates/AssetUploadField.ss

@@ -1,10 +1,18 @@
-<h3 class="ss-uploadfield-choosefiles"><% _t('AssetUploadField.CHOOSEFILES', 'Choose files') %></h3>
-<div class="ss-uploadfield-item ss-uploadfield-addfile">
+<div class="ss-uploadfield-item ss-uploadfield-addfile field">
+
+	<h3>
+		<span class="step-label">
+			<span class="flyout">1</span><span class="arrow"></span>
+			<span class="title"><% _t('AssetUploadField.ChooseFiles', 'Choose files') %></span>
+		</span>
+	</h3>
+
 	<div class="ss-uploadfield-item-info">
-		<label class="ss-uploadfield-fromcomputer ss-ui-button ui-corner-all" title="<% _t('AssetUploadField.FROMCOMPUTERINFO', 'Upload from your computer') %>" for="$id">
-			<input id="$id" name="$getName" class="$extraClass" data-config="$configString" type="file"<% if $multiple %> multiple="multiple"<% end_if %><% if $TabIndex %> tabindex="$TabIndex"<% end_if %> />
-			<span><% _t('AssetUploadField.FROMCOMPUTER', 'Choose files from your computer') %></span>
+		<label class="ss-uploadfield-fromcomputer ss-ui-button ss-ui-action-constructive" title="<% _t('AssetUploadField.FROMCOMPUTERINFO', 'Upload from your computer') %>" data-icon="drive-upload">
+			<% _t('AssetUploadField.FROMCOMPUTER', 'Choose files from your computer') %>
+			<input id="$id" name="$getName" class="$extraClass ss-uploadfield-fromcomputer-fileinput" data-config="$configString" type="file"<% if $multiple %> multiple="multiple"<% end_if %><% if $TabIndex %> tabindex="$TabIndex"<% end_if %> title="<% _t('AssetUploadField.FROMCOMPUTER', 'Choose files from your computer') %>" />
 		</label>
+		
 		<div class="clear"><!-- --></div>
 	</div>
 	<div class="ss-uploadfield-item-uploador">
@@ -18,5 +26,13 @@
 	</div>
 	<div class="clear"><!-- --></div>
 </div>
-<h3 class="ss-uploadfield-editandorganize"><% _t('AssetUploadField.EDITANDORGANIZE', 'Edit & organize') %></h3>
-<ul class="ss-uploadfield-files files"></ul>
+
+<div class="ss-uploadfield-editandorganize">
+	<h3>
+		<span class="step-label">
+			<span class="flyout">2</span><span class="arrow"></span>
+			<span class="title"><% _t('AssetUploadField.EDITANDORGANIZE', 'Edit & organize') %></span>
+		</span>
+	</h3>
+	<ul class="ss-uploadfield-files files"></ul>
+</div>

templates/Includes/UploadField_FileButtons.ss

@@ -1,9 +1,9 @@
 <% if canEdit %>
-	<label class="ss-uploadfield-item-edit ss-ui-button ui-corner-all" title="<% _t('UploadField.EDITINFO', 'Edit this file') %>"><% _t('UploadField.EDIT', 'Edit') %></label>
+	<button class="ss-uploadfield-item-edit ss-ui-button ui-corner-all" title="<% _t('UploadField.EDITINFO', 'Edit this file') %>" data-icon="pencil"><% _t('UploadField.EDIT', 'Edit') %></button>
 	<% if UploadFieldHasRelation %>
-	<label data-href="$UploadFieldRemoveLink" class="ss-uploadfield-item-remove ss-ui-button ui-corner-all" title="<% _t('UploadField.REMOVEINFO', 'Remove this file from here, but do not delete it from the file store') %>"><% _t('UploadField.REMOVE', 'Remove') %></label>
+	<button data-href="$UploadFieldRemoveLink" class="ss-uploadfield-item-remove ss-ui-button ui-corner-all" title="<% _t('UploadField.REMOVEINFO', 'Remove this file from here, but do not delete it from the file store') %>" data-icon="plug-disconnect-prohibition"><% _t('UploadField.REMOVE', 'Remove') %></button>
 <% end_if %>
 <% end_if %>
 <% if canDelete %>
-	<label data-href="$UploadFieldDeleteLink" class="ss-uploadfield-item-delete ss-ui-button ui-corner-all" title="<% _t('UploadField.DELETEINFO', 'Permanently delete this file from the file store') %>"><% _t('UploadField.DELETE', 'Delete from files') %></label>
+	<button data-href="$UploadFieldDeleteLink" class="ss-uploadfield-item-delete ss-ui-button ui-corner-all" title="<% _t('UploadField.DELETEINFO', 'Permanently delete this file from the file store') %>" data-icon="minus-circle"><% _t('UploadField.DELETE', 'Delete from files') %></button>
 <% end_if %>

templates/UploadField.ss

@@ -43,13 +43,13 @@
 					<% _t('UploadField.ATTACHFILE', 'Attach a file') %>
 				<% end_if %>
 			</b></label>
-			<label class="ss-uploadfield-fromcomputer ss-ui-button ui-corner-all" title="<% _t('UploadField.FROMCOMPUTERINFO', 'Upload from your computer') %>" for="$id">
-				<input id="$id" name="$getName" class="$extraClass" data-config="$configString" type="file"<% if $multiple %> multiple="multiple"<% end_if %><% if $TabIndex %> tabindex="$TabIndex"<% end_if %> />
-				<span><% _t('UploadField.FROMCOMPUTER', 'From your computer') %></span>
+			<label class="ss-uploadfield-fromcomputer ss-ui-button ui-corner-all" title="<% _t('UploadField.FROMCOMPUTERINFO', 'Upload from your computer') %>" data-icon="drive-upload">
+				<% _t('UploadField.FROMCOMPUTER', 'From your computer') %>
+				<input id="$id" name="$getName" class="$extraClass ss-uploadfield-fromcomputer-fileinput" data-config="$configString" type="file"<% if $multiple %> multiple="multiple"<% end_if %><% if $TabIndex %> tabindex="$TabIndex"<% end_if %> />
 			</label>
-			<label class="ss-uploadfield-fromfiles ss-ui-button ui-corner-all" title="<% _t('UploadField.FROMCOMPUTERINFO', 'Select from from files') %>"><% _t('UploadField.FROMCOMPUTER', 'From files') %></label>
+			<button class="ss-uploadfield-fromfiles ss-ui-button ui-corner-all" title="<% _t('UploadField.FROMCOMPUTERINFO', 'Select from from files') %>" data-icon="network-cloud"><% _t('UploadField.FROMCOMPUTER', 'From files') %></button>
 			<% if not $config.autoUpload %>
-				<label class="ss-uploadfield-startall ss-ui-button ui-corner-all" title="<% _t('UploadField.STARTALLINFO', 'Start all uploads') %>"><% _t('UploadField.STARTALL', 'Start all') %></label>
+				<button class="ss-uploadfield-startall ss-ui-button ui-corner-all" title="<% _t('UploadField.STARTALLINFO', 'Start all uploads') %>" data-icon="navigation"><% _t('UploadField.STARTALL', 'Start all') %></button>
 			<% end_if %>
 			<div class="clear"><!-- --></div>
 		</div>

templates/forms/FormAction.ss

@@ -1,5 +1,7 @@
 <% if UseButtonTag %>
-	<button $AttributesHTML></button>
+	<button $AttributesHTML>
+		<% if ButtonContent %>$ButtonContent<% else %>$Title<% end_if %>
+	</button>
 <% else %>
 	<input $AttributesHTML>
 <% end_if %>

tests/core/ConvertTest.php

@@ -37,6 +37,20 @@ class ConvertTest extends SapphireTest {
 		
 		$val2 = 'This has a <strong class="test" style="font-weight: bold">strong tag with attributes</STRONG>.'; 
 		$this->assertEquals('This has a *strong tag with attributes*.', Convert::xml2raw($val2), 'Strong tags with attributes are replaced with asterisks');
+		
+		$val3 = '<script type="text/javascript">Some really nasty javascript here</script>';
+		$this->assertEquals('', Convert::xml2raw($val3), 'Script tags are completely removed');
+		
+		$val4 = '<style type="text/css">Some really nasty CSS here</style>';
+		$this->assertEquals('', Convert::xml2raw($val4), 'Style tags are completely removed');
+		
+		$val5 = '<script type="text/javascript">Some really nasty
+		multiline javascript here</script>';
+		$this->assertEquals('', Convert::xml2raw($val5), 'Multiline script tags are completely removed');
+		
+		$val6 = '<style type="text/css">Some really nasty
+		multiline CSS here</style>';
+		$this->assertEquals('', Convert::xml2raw($val6), 'Multiline style tags are completely removed');
 	}
 	
 	/**

tests/forms/CompositeFieldTest.php

@@ -29,4 +29,37 @@ class CompositeFieldTest extends SapphireTest {
 		$this->assertEquals(2, $compositeOuter->fieldPosition('B'));
 	}
 	
+	function testTag() {
+		$composite = new CompositeField(
+			new TextField('A'),
+			new TextField('B')
+		);
+		$this->assertStringStartsWith('<div', trim($composite->FieldHolder()));
+		$this->assertStringEndsWith('/div>', trim($composite->FieldHolder()));
+
+		$composite->setTag('fieldset');
+		$this->assertStringStartsWith('<fieldset', trim($composite->FieldHolder()));
+		$this->assertStringEndsWith('/fieldset>', trim($composite->FieldHolder()));		
+	}
+
+	function testLegend() {
+		$composite = new CompositeField(
+			new TextField('A'),
+			new TextField('B')
+		);
+		$composite->setLegend('My legend');
+		$parser = new CSSContentParser($composite->Field());
+		$root = $parser->getBySelector('div.composite');
+		$this->assertObjectHasAttribute('title', $root[0]->attributes());
+		$this->assertEquals('My legend', (string)$root[0]['title']);
+
+		$composite->setTag('fieldset');
+		$composite->setLegend('My legend');
+		$parser = new CSSContentParser($composite->Field());
+		$root = $parser->getBySelector('fieldset.composite');
+		$this->assertObjectNotHasAttribute('title', $root[0]->attributes());
+		$legend = $parser->getBySelector('fieldset.composite legend');
+		$this->assertNotNull($legend);
+		$this->assertEquals('My legend', (string)$legend[0]);
+	}
 }

tests/forms/GridFieldTest.php

@@ -188,7 +188,7 @@ class GridFieldtest extends SapphireTest {
 			new Member(array("ID" => 1, "Email" => "test@example.org" ))
 		));
 		$obj = new GridField('testfield', 'testfield', $list);
-		$this->assertEquals(array(), $obj->getColumnAttributes($list->first(), 'Email'));
+		$this->assertEquals(array('class' => 'col-Email'), $obj->getColumnAttributes($list->first(), 'Email'));
 	}
 
 	/**

tests/forms/gridfield/GridFieldConfigTest.php

@@ -64,6 +64,23 @@ class GridFieldConfigTest extends SapphireTest {
 			$config->getComponentByType('GridFieldConfigTest_UnknownComponent')
 		);
 	}
+
+	public function testAddComponents() {
+		$config = GridFieldConfig::create()
+			->addComponents(
+				$c1 = new GridFieldConfigTest_MyComponent(),
+				$c2 = new GridFieldConfigTest_MyOtherComponent()
+			);
+
+		$this->assertEquals(
+			$c1, 
+			$config->getComponentByType('GridFieldConfigTest_MyComponent')
+		);
+		$this->assertEquals(
+			$c2,
+			$config->getComponentByType('GridFieldConfigTest_MyOtherComponent')
+		);
+	}
 	
 }