Permalink
Browse files

ENHANCEMENT Using native jQuery UI buttons and icon styling for a les…

…s coupled implementation (e.g. assuming that a "constructive" button always has a specific icon, or one at all). All CMS UI buttons switched to use <button> markup, which allows for inline icons and correctly aligned multi-line button labels.
  • Loading branch information...
1 parent 743a26b commit abfa16fa70c573045c981a3e6b31a31dbde77f26 @chillu chillu committed Feb 16, 2012
Showing with 281 additions and 453 deletions.
  1. +14 −6 admin/code/LeftAndMain.php
  2. +15 −8 admin/code/ModelAdmin.php
  3. +3 −1 admin/css/ie7.css
  4. +1 −1 admin/css/ie8.css
  5. +60 −55 admin/css/screen.css
  6. BIN admin/images/16x16-s8aab2a0ce2.png
  7. BIN admin/images/24x24-s5aa96abf84.png
  8. BIN admin/images/btn-icon-s1c742dc591.png
  9. BIN admin/images/{btn_icons → btn-icon}/accept.png
  10. BIN admin/images/{btn_icons → btn-icon}/accept_disabled.png
  11. BIN admin/images/{btn_icons → btn-icon}/add.png
  12. BIN admin/images/{btn_icons → btn-icon}/add_disabled.png
  13. BIN admin/images/{btn_icons → btn-icon}/addpage.png
  14. BIN admin/images/{btn_icons → btn-icon}/addpage_disabled.png
  15. BIN admin/images/{btn_icons → btn-icon}/arrow-circle-135-left.png
  16. BIN {images/sprites_16x16 → admin/images/btn-icon}/cross-circle.png
  17. BIN {images/sprites_16x16 → admin/images/btn-icon}/cross-circle_disabled.png
  18. BIN admin/images/{btn_icons → btn-icon}/decline.png
  19. BIN admin/images/{btn_icons → btn-icon}/decline_disabled.png
  20. BIN {images/sprites_16x16 → admin/images/btn-icon}/drive-upload.png
  21. BIN {images/sprites_16x16 → admin/images/btn-icon}/drive-upload_disabled.png
  22. BIN admin/images/{btn_icons → btn-icon}/magnifier.png
  23. BIN {images/sprites_16x16 → admin/images/btn-icon}/minus-circle.png
  24. BIN {images/sprites_16x16 → admin/images/btn-icon}/minus-circle_disabled.png
  25. BIN {images/sprites_16x16 → admin/images/btn-icon}/navigation.png
  26. BIN {images/sprites_16x16 → admin/images/btn-icon}/navigation_disabled.png
  27. BIN {images/sprites_16x16 → admin/images/btn-icon}/network-cloud.png
  28. BIN {images/sprites_16x16 → admin/images/btn-icon}/network-cloud_disabled.png
  29. BIN {images/sprites_16x16 → admin/images/btn-icon}/pencil.png
  30. BIN {images/sprites_16x16 → admin/images/btn-icon}/pencil_disabled.png
  31. BIN {images/sprites_16x16 → admin/images/btn-icon}/plug-disconnect-prohibition.png
  32. BIN {images/sprites_16x16 → admin/images/btn-icon}/plug-disconnect-prohibition_disabled.png
  33. BIN admin/images/{btn_icons → btn-icon}/preview.png
  34. BIN admin/images/{btn_icons → btn-icon}/preview_disabled.png
  35. BIN admin/images/{btn_icons → btn-icon}/settings.png
  36. BIN admin/images/{btn_icons → btn-icon}/settings_disabled.png
  37. BIN admin/images/{btn_icons → btn-icon}/unpublish.png
  38. BIN admin/images/{btn_icons → btn-icon}/unpublish_disabled.png
  39. BIN admin/images/btn_icons-saaa1989272.png
  40. BIN admin/images/btn_icons-sb7da7f8cce.png
  41. BIN admin/images/{menu_icons/16x16-s2ac647f5ef.png → menu-icons/16x16-s170d9d69bb.png}
  42. BIN admin/images/{menu_icons → menu-icons}/16x16/blog.png
  43. BIN admin/images/{menu_icons → menu-icons}/16x16/community.png
  44. BIN admin/images/{menu_icons → menu-icons}/16x16/document.png
  45. BIN admin/images/{menu_icons → menu-icons}/16x16/gears.png
  46. BIN admin/images/{menu_icons → menu-icons}/16x16/home.png
  47. BIN admin/images/{menu_icons → menu-icons}/16x16/information.png
  48. BIN admin/images/{menu_icons → menu-icons}/16x16/network.png
  49. BIN admin/images/{menu_icons → menu-icons}/16x16/pencil.png
  50. BIN admin/images/{menu_icons → menu-icons}/16x16/picture.png
  51. BIN admin/images/{menu_icons → menu-icons}/16x16/pie-chart.png
  52. BIN admin/images/{menu_icons/24x24-s0cb1fe1c77.png → menu-icons/24x24-s546fcae8fd.png}
  53. BIN admin/images/{menu_icons → menu-icons}/24x24/blog.png
  54. BIN admin/images/{menu_icons → menu-icons}/24x24/community.png
  55. BIN admin/images/{menu_icons → menu-icons}/24x24/document.png
  56. BIN admin/images/{menu_icons → menu-icons}/24x24/gears.png
  57. BIN admin/images/{menu_icons → menu-icons}/24x24/home.png
  58. BIN admin/images/{menu_icons → menu-icons}/24x24/information.png
  59. BIN admin/images/{menu_icons → menu-icons}/24x24/network.png
  60. BIN admin/images/{menu_icons → menu-icons}/24x24/pencil.png
  61. BIN admin/images/{menu_icons → menu-icons}/24x24/picture.png
  62. BIN admin/images/{menu_icons → menu-icons}/24x24/pie-chart.png
  63. 0 admin/images/{menu_icons → menu-icons}/README
  64. BIN admin/images/sprites-32x32-s5fb04c068a.png
  65. BIN admin/images/{sprites_32x32 → sprites-32x32}/dialog-close-over.png
  66. BIN admin/images/{sprites_32x32 → sprites-32x32}/dialog-close.png
  67. BIN admin/images/{sprites_32x32 → sprites-32x32}/logout.png
  68. BIN admin/images/{sprites_32x32 → sprites-32x32}/menu-arrow-deselected-down.png
  69. BIN admin/images/{sprites_32x32 → sprites-32x32}/menu-arrow-deselected-up.png
  70. BIN admin/images/{sprites_32x32 → sprites-32x32}/menu-arrow-down.png
  71. BIN admin/images/{sprites_32x32 → sprites-32x32}/menu-arrow-up.png
  72. BIN admin/images/{sprites_32x32 → sprites-32x32}/numeric-label.png
  73. +19 −22 admin/javascript/LeftAndMain.js
  74. +15 −0 admin/javascript/ssui.core.js
  75. +51 −133 admin/scss/_forms.scss
  76. +9 −6 admin/scss/_sprites.scss
  77. +9 −32 admin/scss/_style.scss
  78. +1 −1 admin/scss/ie7.scss
  79. +1 −1 admin/scss/ie8.scss
  80. +1 −1 admin/templates/Includes/LeftAndMain_EditForm.ss
  81. +1 −1 admin/templates/Includes/LeftAndMain_SilverStripeNavigator.ss
  82. +6 −9 css/AssetUploadField.css
  83. +3 −23 css/UploadField.css
  84. +32 −19 filesystem/Folder.php
  85. +12 −6 forms/HtmlEditorField.php
  86. +2 −2 forms/UploadField.php
  87. +1 −1 forms/gridfield/GridFieldPopupForms.php
  88. BIN images/sprites_16x16-scf81c570f3.png
  89. +6 −11 scss/AssetUploadField.scss
  90. +3 −21 scss/UploadField.scss
  91. +0 −80 scss/_sprites.scss
  92. +4 −2 security/Member.php
  93. +4 −3 templates/AssetUploadField.ss
  94. +3 −3 templates/Includes/UploadField_FileButtons.ss
  95. +5 −5 templates/UploadField.ss
View
@@ -863,15 +863,23 @@ public function getEditForm($id = null, $fields = null) {
// 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');
@@ -964,10 +972,10 @@ function AddForm() {
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;
View
@@ -411,7 +411,7 @@ public function SearchForm() {
$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 @@ public function CreateForm() {
$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 @@ public function AddForm() {
$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,18 +954,22 @@ public function EditForm() {
$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();
}
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);
View
@@ -4,11 +4,13 @@ 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; }
.cms-content-toolbar { border-bottom: 1px solid #c9cdce; padding-bottom: 5px; }
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default { background-image: none; }
+
+.jstree li a .ui-icon { text-indent: 0px !important; }
View
@@ -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; }
Oops, something went wrong.

0 comments on commit abfa16f

Please sign in to comment.