From 53c14fcb7d34295507c3194158ad3ee29ed65f69 Mon Sep 17 00:00:00 2001
From: Francois Zaninotto <fzaninotto@gmail.com>
Date: Wed, 8 Jul 2015 21:49:30 +0200
Subject: [PATCH] Add space between view action buttons

View action buttons (create, export, filter, etc.) used to be glued to
one another in the production environment (because of uglifyjs
compression of html whitespace), but not in dev - that's why it went
unnoticed for so long.

While fixing the problem, I also rewrote the templates of the buttons
directives with the ES6 template literal syntax.
---
 .../ng-admin/Crud/button/maBackButton.js      |  6 ++--
 .../Crud/button/maBatchDeleteButton.js        |  6 ++--
 .../ng-admin/Crud/button/maCreateButton.js    |  6 ++--
 .../ng-admin/Crud/button/maDeleteButton.js    |  6 ++--
 .../ng-admin/Crud/button/maEditButton.js      |  6 ++--
 .../Crud/button/maExportToCsvButton.js        |  9 ++++--
 .../Crud/button/maFilteredListButton.js       |  6 ++--
 .../ng-admin/Crud/button/maListButton.js      |  6 ++--
 .../ng-admin/Crud/button/maShowButton.js      |  6 ++--
 .../Crud/button/maViewBatchActions.js         | 29 ++++++++++---------
 10 files changed, 46 insertions(+), 40 deletions(-)

diff --git a/src/javascripts/ng-admin/Crud/button/maBackButton.js b/src/javascripts/ng-admin/Crud/button/maBackButton.js
index 36e09cd2..9f101faa 100644
--- a/src/javascripts/ng-admin/Crud/button/maBackButton.js
+++ b/src/javascripts/ng-admin/Crud/button/maBackButton.js
@@ -18,9 +18,9 @@ define(function () {
                 };
             },
             template:
-'<a class="btn btn-default" ng-class="size ? \'btn-\' + size : \'\'" ng-click="back()">' +
-    '<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>&nbsp;{{ ::label }}' +
-'</a>'
+` <a class="btn btn-default" ng-class="size ? \'btn-\' + size : \'\'" ng-click="back()">
+    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>&nbsp;{{ ::label }}
+</a>`
         };
     }
 
diff --git a/src/javascripts/ng-admin/Crud/button/maBatchDeleteButton.js b/src/javascripts/ng-admin/Crud/button/maBatchDeleteButton.js
index 09c8b021..c734d722 100644
--- a/src/javascripts/ng-admin/Crud/button/maBatchDeleteButton.js
+++ b/src/javascripts/ng-admin/Crud/button/maBatchDeleteButton.js
@@ -27,9 +27,9 @@ define(function () {
                 };
             },
             template:
-'<span ng-click="gotoBatchDelete()">' +
-    '<span class="glyphicon glyphicon-trash" aria-hidden="true"></span>&nbsp;{{ ::label }}' +
-'</span>'
+`<span ng-click="gotoBatchDelete()">
+    <span class="glyphicon glyphicon-trash" aria-hidden="true"></span>&nbsp;{{ ::label }}
+</span>`
 
         };
     }
diff --git a/src/javascripts/ng-admin/Crud/button/maCreateButton.js b/src/javascripts/ng-admin/Crud/button/maCreateButton.js
index f5db381a..e3537bae 100644
--- a/src/javascripts/ng-admin/Crud/button/maCreateButton.js
+++ b/src/javascripts/ng-admin/Crud/button/maCreateButton.js
@@ -19,9 +19,9 @@ define(function () {
                 };
             },
             template:
-'<a class="btn btn-default" ng-class="size ? \'btn-\' + size : \'\'" ng-click="gotoCreate()">' +
-    '<span class="glyphicon glyphicon-plus" aria-hidden="true"></span>&nbsp;{{ ::label }}' +
-'</a>'
+` <a class="btn btn-default" ng-class="size ? \'btn-\' + size : \'\'" ng-click="gotoCreate()">
+    <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>&nbsp;{{ ::label }}
+</a>`
         };
     }
 
diff --git a/src/javascripts/ng-admin/Crud/button/maDeleteButton.js b/src/javascripts/ng-admin/Crud/button/maDeleteButton.js
index 53e561c1..952f24db 100644
--- a/src/javascripts/ng-admin/Crud/button/maDeleteButton.js
+++ b/src/javascripts/ng-admin/Crud/button/maDeleteButton.js
@@ -23,9 +23,9 @@ define(function () {
                 };
             },
             template:
-'<a class="btn btn-default" ng-class="size ? \'btn-\' + size : \'\'" ng-click="gotoDelete()">' +
-    '<span class="glyphicon glyphicon-trash" aria-hidden="true"></span>&nbsp;{{ ::label }}' +
-'</a>'
+` <a class="btn btn-default" ng-class="size ? \'btn-\' + size : \'\'" ng-click="gotoDelete()">
+    <span class="glyphicon glyphicon-trash" aria-hidden="true"></span>&nbsp;{{ ::label }}
+</a>`
 
         };
     }
diff --git a/src/javascripts/ng-admin/Crud/button/maEditButton.js b/src/javascripts/ng-admin/Crud/button/maEditButton.js
index 8bfefdbe..bcf233a7 100644
--- a/src/javascripts/ng-admin/Crud/button/maEditButton.js
+++ b/src/javascripts/ng-admin/Crud/button/maEditButton.js
@@ -23,9 +23,9 @@ define(function () {
                 };
             },
             template:
-'<a class="btn btn-default" ng-class="size ? \'btn-\' + size : \'\'" ng-click="gotoEdit()">' +
-    '<span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>&nbsp;{{ ::label }}' +
-'</a>'
+` <a class="btn btn-default" ng-class="size ? \'btn-\' + size : \'\'" ng-click="gotoEdit()">
+    <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>&nbsp;{{ ::label }}
+</a>`
         };
     }
 
diff --git a/src/javascripts/ng-admin/Crud/button/maExportToCsvButton.js b/src/javascripts/ng-admin/Crud/button/maExportToCsvButton.js
index d4bd62f5..92235a49 100644
--- a/src/javascripts/ng-admin/Crud/button/maExportToCsvButton.js
+++ b/src/javascripts/ng-admin/Crud/button/maExportToCsvButton.js
@@ -12,7 +12,6 @@ define(function () {
                 datastore: '&',
                 search: '&'
             },
-            template: '<button ng-if="has_export" class="btn btn-default" ng-click="exportToCsv()"><span class="glyphicon glyphicon-download" aria-hidden="true"></span>&nbsp;{{ ::label }}</button>',
             link: function(scope) {
                 scope.label = scope.label || 'Export';
 
@@ -97,7 +96,13 @@ define(function () {
                             fakeLink.click();
                         });
                 };
-            }
+            },
+            template:
+`<span ng-if="has_export">
+    <a class="btn btn-default" ng-click="exportToCsv()">
+        <span class="glyphicon glyphicon-download" aria-hidden="true"></span>&nbsp;{{ ::label }}
+    </a>
+</span>`
         };
     }
 
diff --git a/src/javascripts/ng-admin/Crud/button/maFilteredListButton.js b/src/javascripts/ng-admin/Crud/button/maFilteredListButton.js
index 74267e8a..9bd42c9c 100644
--- a/src/javascripts/ng-admin/Crud/button/maFilteredListButton.js
+++ b/src/javascripts/ng-admin/Crud/button/maFilteredListButton.js
@@ -38,9 +38,9 @@ define(function () {
                 };
             },
             template:
-'<a class="btn btn-default" ng-class="size ? \'btn-\' + size : \'\'" ng-click="gotoList()">' +
-    '<span class="glyphicon glyphicon-list" aria-hidden="true"></span>&nbsp;{{ ::label }}' +
-'</a>'
+` <a class="btn btn-default" ng-class="size ? \'btn-\' + size : \'\'" ng-click="gotoList()">
+    <span class="glyphicon glyphicon-list" aria-hidden="true"></span>&nbsp;{{ ::label }}
+</a>`
         };
     }
 
diff --git a/src/javascripts/ng-admin/Crud/button/maListButton.js b/src/javascripts/ng-admin/Crud/button/maListButton.js
index 6b2ed382..13a14e57 100644
--- a/src/javascripts/ng-admin/Crud/button/maListButton.js
+++ b/src/javascripts/ng-admin/Crud/button/maListButton.js
@@ -34,9 +34,9 @@ define(function () {
                 };
             },
             template:
-'<a class="btn btn-default" ng-class="size ? \'btn-\' + size : \'\'" ng-click="gotoList()">' +
-    '<span class="glyphicon glyphicon-list" aria-hidden="true"></span>&nbsp;{{ ::label }}' +
-'</a>'
+` <a class="btn btn-default" ng-class="size ? \'btn-\' + size : \'\'" ng-click="gotoList()">
+    <span class="glyphicon glyphicon-list" aria-hidden="true"></span>&nbsp;{{ ::label }}
+</a>`
         };
     }
 
diff --git a/src/javascripts/ng-admin/Crud/button/maShowButton.js b/src/javascripts/ng-admin/Crud/button/maShowButton.js
index bd6563c1..e203d504 100644
--- a/src/javascripts/ng-admin/Crud/button/maShowButton.js
+++ b/src/javascripts/ng-admin/Crud/button/maShowButton.js
@@ -24,9 +24,9 @@ define(function () {
                 };
             },
             template:
-'<a class="btn btn-default" ng-class="size ? \'btn-\' + size : \'\'" ng-click="gotoShow()">' +
-    '<span class="glyphicon glyphicon-eye-open" aria-hidden="true"></span>&nbsp;{{ ::label }}' +
-'</a>'
+` <a class="btn btn-default" ng-class="size ? \'btn-\' + size : \'\'" ng-click="gotoShow()">
+    <span class="glyphicon glyphicon-eye-open" aria-hidden="true"></span>&nbsp;{{ ::label }}
+</a>`
         };
     }
 
diff --git a/src/javascripts/ng-admin/Crud/button/maViewBatchActions.js b/src/javascripts/ng-admin/Crud/button/maViewBatchActions.js
index a4fea586..460466e0 100644
--- a/src/javascripts/ng-admin/Crud/button/maViewBatchActions.js
+++ b/src/javascripts/ng-admin/Crud/button/maViewBatchActions.js
@@ -23,21 +23,22 @@ function maViewBatchActionsDirective($injector) {
                 scope.buttons = null;
             }
         },
+        // the ng-class hidden is necessary to hide the inner blank space used for spacing buttons when the selection is not empty
         template:
-`<span ng-if="selection" class="btn-group" dropdown is-open="isopen">
-    <button type="button" ng-if="selection.length" class="btn btn-default dropdown-toggle" dropdown-toggle >
-        {{ selection.length }} Selected <span class="caret"></span>
-    </button>
-    <ul class="dropdown-menu" role="menu">
-        <li ng-repeat="button in buttons" ng-switch="button">
-            <a ng-switch-when="delete">
-                <ma-batch-delete-button selection="selection" entity="entity"/>
-            </a>
-            <a ng-switch-default>
-                <span compile="button"></span>
-            </a>
-        </li>
-    </ul>
+`<span ng-if="selection" ng-class="{hidden:!selection || selection.length==0}"> <span class="btn-group" dropdown is-open="isopen"><button type="button" ng-if="selection.length" class="btn btn-default dropdown-toggle" dropdown-toggle >
+            {{ selection.length }} Selected <span class="caret"></span>
+        </button>
+        <ul class="dropdown-menu" role="menu">
+            <li ng-repeat="button in buttons" ng-switch="button">
+                <a ng-switch-when="delete">
+                    <ma-batch-delete-button selection="selection" entity="entity"/>
+                </a>
+                <a ng-switch-default>
+                    <span compile="button"></span>
+                </a>
+            </li>
+        </ul>
+    </span>
 </span>`
     };
 }