Merge pull request #554 from marmelab/spaced_actions

[RFR] Add space between view action buttons
marmelab · Jul 9, 2015 · f2e87b9 · f2e87b9
2 parents 95c362b + 53c14fc
commit f2e87b9
Show file tree

Hide file tree

Showing 10 changed files with 46 additions and 40 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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>`
     };
 }