Update asset admin toolbar

2024-06-22 20:49:29 +02:00 · 2015-10-23 16:01:29 +13:00 · 2015-10-23 16:01:29 +13:00 · 6dc3fc1f26
commit 6dc3fc1f26
parent f340130e8d
8 changed files with 38 additions and 7 deletions
--- a/code/controllers/AssetAdmin.php
+++ b/code/controllers/AssetAdmin.php
@ -190,14 +190,14 @@ JS
 			$addFolderBtn = new LiteralField(
 				'AddFolderButton',
 				sprintf(
-					'<a class="ss-ui-button font-icon-plus-circled cms-add-folder-link" data-icon="add" data-url="%s" href="%s">%s</a>',
+					'<a class="ss-ui-button font-icon-folder-add no-text cms-add-folder-link" title="%s" data-icon="add" data-url="%s" href="%s"></a>',
+					_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 {
--- 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; }
--- 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));
--- 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 {
--- a/templates/Includes/AssetAdmin_Content.ss
+++ b/templates/Includes/AssetAdmin_Content.ss
@ -11,7 +11,7 @@
 		<% if $Fields.hasTabset %>
 		<% with $Fields.fieldByName('Root') %>
 		<div class="cms-content-header-tabs">
-			<button id="filters-button" class="icon-button font-icon-search" title="<% _t('CMSPagesController_Tools_ss.FILTER', 'Filter') %>"></button>
+			<button id="filters-button" class="icon-button font-icon-search no-text" title="<% _t('CMSPagesController_Tools_ss.FILTER', 'Filter') %>"></button>

 			<div class="icon-button-group">
 				<ul class="cms-tabset-nav-primary ss-tabset">
--- a/templates/Includes/CMSMain_Content.ss
+++ b/templates/Includes/CMSMain_Content.ss
@ -46,7 +46,7 @@
 			</div>

 			<div class="view-controls">
-				<button id="filters-button" class="icon-button font-icon-search" title="<% _t('CMSPagesController_Tools_ss.FILTER', 'Filter') %>"></button>
+				<button id="filters-button" class="icon-button font-icon-search no-text" title="<% _t('CMSPagesController_Tools_ss.FILTER', 'Filter') %>"></button>
 				<div class="icon-button-group">
 					<a href="$LinkPages#cms-content-treeview" class="icon-button font-icon-icon-tree active" title="<% _t('CMSPagesController.TreeView', 'Tree View') %>"></a><a href="$LinkPages#cms-content-listview" class="icon-button font-icon-list" title="<% _t('CMSPagesController.ListView', 'List View') %>"></a>
 				</div>
--- a/templates/Includes/CMSPagesController_Content.ss
+++ b/templates/Includes/CMSPagesController_Content.ss
@ -6,7 +6,7 @@
 		</div>

 		<div class="cms-content-header-tabs">
-			<button id="filters-button" class="icon-button font-icon-search" title="<% _t('CMSPagesController_Tools_ss.FILTER', 'Filter') %>"></button>
+			<button id="filters-button" class="icon-button font-icon-search no-text" title="<% _t('CMSPagesController_Tools_ss.FILTER', 'Filter') %>"></button>
 			<div class="icon-button-group">
 				<ul class="cms-tabset-nav-primary ss-tabset">
 					<li class="content-treeview<% if ViewState == tree %> ui-tabs-active ss-tabs-force-active<% end_if %> cms-tabset-icon tree">
--- 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