Moving update button to top of BPE

app/assets/javascripts/admin/bulk_product_update.js.coffee

@@ -322,19 +322,19 @@ angular.module("ofn.admin").controller "AdminProductEditCtrl", [
 
 
     $scope.displayUpdating = ->
-      $scope.setMessage $scope.updateStatusMessage, "Updating...",
+      $scope.setMessage $scope.updateStatusMessage, "Saving...",
         color: "orange"
       , false
 
 
     $scope.displaySuccess = ->
-      $scope.setMessage $scope.updateStatusMessage, "Update complete",
+      $scope.setMessage $scope.updateStatusMessage, "Changes Saved.",
         color: "green"
       , 3000
 
 
     $scope.displayFailure = (failMessage) ->
-      $scope.setMessage $scope.updateStatusMessage, "Updating failed. " + failMessage,
+      $scope.setMessage $scope.updateStatusMessage, "Saving failed. " + failMessage,
         color: "red"
       , 10000
 

app/assets/stylesheets/admin/products.css.scss

@@ -2,59 +2,6 @@
   display: block;
 }
 
-div.pagination {
-	div.pagenav {
-		margin: 0px;
-		span.first, span.prev, span.next, span.last {
-			padding: 5px 0px;
-			display:inline-block;
-		}
-	}
-}
-
-div.pagination_info {
-	text-align: right;
-}
-
-
-
-div.applied_filter {
-	margin-bottom: 5px;
-	border: solid 2px #5498da;
-	padding: 5px 0px;
-	border-radius: 5px;
-	div.four.columns {
-		padding-left: 10px;
-	}
-}
-
-div.option_tabs {
-	div.applied_filters, div.filters, div.column_toggle {
-		margin-bottom: 10px;
-	}
-}
-
-div.option_tab_titles {
-	h6 {
-		border-radius: 3px;
-		border: 1px solid #cee1f4;
-		padding: 3px;
-		text-align: center;
-		color: darken(#cee1f4, 3);
-		cursor: pointer;
-		-moz-user-select: none;
-		-khtml-user-select: none;
-		-webkit-user-select: none;
-		-ms-user-select: none;
-		user-select: none;
-	}
-	h6.selected {
-		border: 1px solid #5498da;
-		color: #5498da;
-	}
-	margin-bottom: 10px;
-}
-
 tbody.odd {
 	tr.product { td { background-color: white; } }
 	tr.variant.odd { td { background-color: lighten(#eff5fc, 3); } }
@@ -76,33 +23,8 @@ th.left-actions, td.left-actions {
 	border-right: 1px solid #cee1f4 !important;
 }
 
-li.column-list-item {
-  border-radius: 3px;
-  padding: 2px 20px;
-  margin: 2px 1px;
-  background-color: white;
-  border: 2px solid lightgray;
-  color: darkgray;
-  font-size: 100%;
-  cursor: default;
-  text-align: center;
-  cursor: pointer;
-  -moz-user-select: none;
-  -khtml-user-select: none;
-  -webkit-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-}
-
-li.column-list-item.selected {
-  border: 2px solid #5498da;
-  background-color: #5498da;
-  color: white;
-  font-size: 100%;
-}
-
-ul.column-list {
-  list-style: none;
+#update-status-message {
+  margin: 6px 0px;
 }
 
 table#listing_products.bulk {

app/views/spree/admin/products/bulk_edit.html.haml

@@ -15,33 +15,38 @@
 =admin_inject_producers
 =admin_inject_taxons
 %div{ 'ng-app' => 'ofn.admin', 'ng-controller' => 'AdminProductEditCtrl', 'ng-init' => "initialise('#{@spree_api_key}');loading=true;" }
+  %div.sixteen.columns.alpha
+    %div.quick_search{ :class => "four columns alpha" }
+      %label{ :for => 'quick_filter' }
+      %br
+      %input.search{ :class => "four columns alpha", 'ng-model' => 'query', :name => "quick_filter", :type => 'text', 'placeholder' => 'Quick Search' }
+    .filter_select{ :class => "four columns" }
+      %label{ :for => 'producer_filter' }Producer
+      %br
+      %select{ :class => "four columns alpha", :id => 'producer_filter', 'ofn-select2-min-search' => 5, 'ng-model' => 'producerFilter', 'ng-options' => 'producer.id as producer.name for producer in filterProducers' }
+    .filter_select{ :class => "four columns" }
+      %label{ :for => 'taxon_filter' }Category
+      %br
+      %select{ :class => "four columns alpha", :id => 'category_filter', 'ofn-select2-min-search' => 5, 'ng-model' => 'categoryFilter', 'ng-options' => 'taxon.id as taxon.name for taxon in filterTaxons'}
+    %div{ :class => "one column" }  
+    .filter_clear{ :class => "three columns omega" }
+      %label{ :for => 'clear_all_filters' }
+      %br
+      %input.fullwidth{ :type => 'button', :id => 'clear_all_filters', :value => "Clear Filters", 'ng-click' => "resetSelectFilters()" }
+  %hr.sixteen.columns.alpha
   %div{ 'ng-show' => '!spree_api_key_ok' }
     {{ api_error_msg }}
   %div.sixteen.columns.alpha.loading{ 'ng-show' => 'loading' }
     %h4 Loading Products...
   %div.sixteen.columns.alpha{ 'ng-show' => '!loading && products.length == 0' }
     %h4{ :style => 'color:red;' } No matching products found.
-  %div.sixteen.columns.alpha{ 'ng-hide' => 'loading || products.length == 0' }
-    %div.quick_search{ :class => "four columns alpha" }
-      %label{ :for => 'quick_filter' }
-      %br
-      %input.search{ :class => "four columns alpha", 'ng-model' => 'query', :name => "quick_filter", :type => 'text', 'placeholder' => 'Quick Search' }
-    .filter_select{ :class => "three columns" }
-      %label{ :for => 'producer_filter' }Producer
-      %br
-      %select{ :class => "three columns alpha", :id => 'producer_filter', 'ofn-select2-min-search' => 5, 'ng-model' => 'producerFilter', 'ng-options' => 'producer.id as producer.name for producer in filterProducers' }
-    .filter_select{ :class => "three columns" }
-      %label{ :for => 'taxon_filter' }Category
-      %br
-      %select{ :class => "three columns alpha", :id => 'category_filter', 'ofn-select2-min-search' => 5, 'ng-model' => 'categoryFilter', 'ng-options' => 'taxon.id as taxon.name for taxon in filterTaxons'}
-    .filter_clear{ :class => "two columns omega" }
-      %label{ :for => 'clear_all_filters' }
-      %br
-      %input.fullwidth{ :type => 'button', :id => 'clear_all_filters', :value => "Clear All", 'ng-click' => "resetSelectFilters()" }
-    %div{ :class => "one column" }  
-    %div{ :class => "three columns omega" }
-      %label{ }
-      %br
+  %div.sixteen.columns.alpha{ 'ng-hide' => 'loading || products.length == 0', style: "margin-bottom: 10px" }
+    %div.four.columns.alpha
+      %input.four.columns.alpha{ :type => 'button', :value => 'Save Changes', 'ng-click' => 'submitProducts()'}
+    %div.nine.columns
+      %div{ id: "update-status-message", ng: { style: 'updateStatusMessage.style' } }
+        {{ updateStatusMessage.text || " " }}
+    %div.three.columns.omega
       %div.ofn_drop_down{ 'ng-controller' => "DropDownCtrl", :id => "columns_dropdown", 'ofn-drop-down' => true, :style => 'float:right;' }
         %span{ :class => 'icon-reorder' }   Columns
         %span{ 'ng-class' => "expanded && 'icon-caret-up' || !expanded && 'icon-caret-down'" }
@@ -49,6 +54,7 @@
           %div.menu_item{ :class => "three columns alpha", 'ng-repeat' => "column in columns",  'ofn-toggle-column' => true }
             %span{ :class => 'one column alpha', :style => 'text-align: center'} {{ column.visible && "✓" || !column.visible && " " }}
             %span{ :class => 'two columns omega' } {{column.name }}
+  %div.sixteen.columns.alpha{ 'ng-hide' => 'loading || products.length == 0' }
     %table.index#listing_products.bulk{ "infinite-scroll" => "incrementLimit()", "infinite-scroll-distance" => "1" }
       %colgroup
         %col.actions
@@ -132,6 +138,3 @@
           %td.actions
           %td.actions
             %a{ 'ng-click' => 'deleteVariant(product,variant)', :class => "delete-variant icon-trash no-text" }
-    %input{ :type => 'button', :value => 'Update', 'ng-click' => 'submitProducts()'}
-    %span{ id: "update-status-message", 'ng-style' => 'updateStatusMessage.style' }
-      {{ updateStatusMessage.text }}