From 6dc3fc1f26f31e6c9bc0b83fc1a69e88d23a5b9d Mon Sep 17 00:00:00 2001 From: scott1702 Date: Fri, 23 Oct 2015 16:01:29 +1300 Subject: [PATCH] Update asset admin toolbar --- code/controllers/AssetAdmin.php | 6 +++--- css/screen.css | 5 +++++ javascript/AssetAdmin.js | 6 ++++++ scss/_AssetAdmin.scss | 20 +++++++++++++++++++ templates/Includes/AssetAdmin_Content.ss | 2 +- templates/Includes/CMSMain_Content.ss | 2 +- .../Includes/CMSPagesController_Content.ss | 2 +- tests/behat/features/insert-an-image.feature | 2 +- 8 files changed, 38 insertions(+), 7 deletions(-) diff --git a/code/controllers/AssetAdmin.php b/code/controllers/AssetAdmin.php index 573d1213..aef62abd 100644 --- a/code/controllers/AssetAdmin.php +++ b/code/controllers/AssetAdmin.php @@ -190,14 +190,14 @@ JS $addFolderBtn = new LiteralField( 'AddFolderButton', sprintf( - '%s', + '', + _t('Folder.AddFolderButton', 'Add folder'), Controller::join_links($this->Link('AddForm'), '?' . http_build_query(array( 'action_doAdd' => 1, 'ParentID' => $folder->ID, 'SecurityID' => $form->getSecurityToken()->getValue() ))), - Controller::join_links($this->Link('addfolder'), '?ParentID=' . $folder->ID), - _t('Folder.AddFolderButton', 'Add folder') + Controller::join_links($this->Link('addfolder'), '?ParentID=' . $folder->ID) ) ); } else { diff --git a/css/screen.css b/css/screen.css index ea2af2f1..cf077ec4 100644 --- a/css/screen.css +++ b/css/screen.css @@ -34,10 +34,15 @@ .cms .AssetAdmin .cms-content-fields .cms-edit-form.AssetAdmin { width: 100%; overflow-y: auto; } .cms .AssetAdmin .cms-content-fields .cms-content-tools .cms-panel-content { overflow: hidden; } .cms .AssetAdmin .cms-content-fields .cms-content-tools .cms-panel-content .cms-search-form { height: 100%; } +.cms .AssetAdmin .cms-content-toolbar { float: left; } +.cms .AssetAdmin .cms-content-toolbar .cms-actions-row .ss-ui-button { z-index: 1; } +.cms .AssetAdmin .cms-content-toolbar .cms-actions-row .ss-ui-button::before { font-size: 23px; } +.cms .AssetAdmin .cms-content-toolbar .cms-actions-row .grid-levelup { margin: 0; } .cms .AssetAdmin .cms-content-toolbar .cms-page-add-button { background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2YzZjNmMyIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2Q5ZDlkOSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-size: 100%; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #f3f3f3), color-stop(100%, #d9d9d9)); background-image: -moz-linear-gradient(#f3f3f3, #d9d9d9); background-image: -webkit-linear-gradient(#f3f3f3, #d9d9d9); background-image: linear-gradient(#f3f3f3, #d9d9d9); border-color: #c0c0c2; } .cms .AssetAdmin .cms-content-toolbar .cms-page-add-button span.btn-icon-add { height: 17px; } .cms .AssetAdmin .cms-content-toolbar .cms-page-add-button span.ui-button-text { color: #393939; text-shadow: white 0 1px 1px; } .cms .AssetAdmin #Root_TreeView .cms-tree ul .class-Folder a span.text span.jstree-foldericon { background: url(../images/blue-folder-horizontal.png) no-repeat; width: 16px; height: 16px; float: left; display: block; margin-right: 4px; } +.cms .AssetAdmin .ss-gridfield { margin-top: 0; } .cms .AssetAdmin table.ss-gridfield-table td.bottom-all { padding: 0.7em; } .cms .AssetAdmin table.ss-gridfield-table tr[data-class=Folder] td.col-StripThumbnail { background: transparent url(../images/treeicons/blue-folder-horizontal.png) no-repeat center; } .cms .AssetAdmin table.ss-gridfield-table tr[data-class=File] td.col-StripThumbnail { background: transparent url(../images/treeicons/blue-document.png) no-repeat center; } diff --git a/javascript/AssetAdmin.js b/javascript/AssetAdmin.js index 01462e76..6bdeb27e 100644 --- a/javascript/AssetAdmin.js +++ b/javascript/AssetAdmin.js @@ -130,6 +130,12 @@ onunmatch: function () { $('.AssetAdmin.cms-edit-form .ss-gridfield').reload(); } + }); + + $('.AssetAdmin .grid-levelup').entwine({ + onmatch: function () { + this.closest('.ui-tabs-panel').find('.cms-actions-row').prepend(this); + } }) }); }(jQuery)); diff --git a/scss/_AssetAdmin.scss b/scss/_AssetAdmin.scss index 52e65e43..a01931fa 100644 --- a/scss/_AssetAdmin.scss +++ b/scss/_AssetAdmin.scss @@ -19,6 +19,22 @@ } .cms-content-toolbar { + float: left; + + .cms-actions-row { + .ss-ui-button { + z-index: 1; + + &::before { + font-size: 23px; + } + } + + .grid-levelup { + margin: 0; + } + } + .cms-page-add-button { @include background-image (linear-gradient(lighten(#e6e6e6, 5%), darken(#e6e6e6, 5%))); border-color:#c0c0c2; @@ -42,6 +58,10 @@ margin-right:4px; } } + + .ss-gridfield { + margin-top: 0; + } table.ss-gridfield-table { td { diff --git a/templates/Includes/AssetAdmin_Content.ss b/templates/Includes/AssetAdmin_Content.ss index e084c15b..878a91a4 100644 --- a/templates/Includes/AssetAdmin_Content.ss +++ b/templates/Includes/AssetAdmin_Content.ss @@ -11,7 +11,7 @@ <% if $Fields.hasTabset %> <% with $Fields.fieldByName('Root') %>
- +
    diff --git a/templates/Includes/CMSMain_Content.ss b/templates/Includes/CMSMain_Content.ss index 039be30c..55b33b63 100644 --- a/templates/Includes/CMSMain_Content.ss +++ b/templates/Includes/CMSMain_Content.ss @@ -46,7 +46,7 @@
- +
diff --git a/templates/Includes/CMSPagesController_Content.ss b/templates/Includes/CMSPagesController_Content.ss index ebf7b390..fa3ffe6c 100644 --- a/templates/Includes/CMSPagesController_Content.ss +++ b/templates/Includes/CMSPagesController_Content.ss @@ -6,7 +6,7 @@
- +
  • diff --git a/tests/behat/features/insert-an-image.feature b/tests/behat/features/insert-an-image.feature index c3bbd429..caf30530 100644 --- a/tests/behat/features/insert-an-image.feature +++ b/tests/behat/features/insert-an-image.feature @@ -15,7 +15,7 @@ Feature: Insert an image into a page Scenario: I can insert an image from a URL Given I press the "Insert Media" button - When I click "add by URL" in the ".ss-uploadfield-item-info" element + When I press the "Insert from URL" button And I fill in "RemoteURL" with "http://www.silverstripe.org/themes/ssv3/img/ss_logo.png" And I press the "Add url" button Then I should see "ss_logo.png" in the ".ss-assetuploadfield span.name" element