Replace the buttons on the dashboard edit page with a toolbar

hawtio · Oct 15, 2013 · b860a48 · b860a48
1 parent eb8b42a
commit b860a48
Show file tree

Hide file tree

Showing 3 changed files with 70 additions and 43 deletions.
diff --git a/hawtio-web/src/main/webapp/app/dashboard/html/editDashboards.html b/hawtio-web/src/main/webapp/app/dashboard/html/editDashboards.html
@@ -1,41 +1,57 @@
 <div class="controller-section" ng-controller="Dashboard.EditDashboardsController">
   <div class="row-fluid">
-    <div class="span4">
-      <div class="control-group">
-        <button class="btn" ng-click="create()"
-                title="Create a new empty dashboard" data-placement="bottom">
-          <i class="icon-plus"></i> Create
-        </button>
-        <button class="btn" ng-disabled="hasSelection()" ng-click="duplicate()"
-                title="Create a copy of the selected dashboard(s)" data-placement="bottom">
-          <i class="icon-copy"></i> Duplicate
-        </button>
-        <button class="btn" ng-show="usingFabric()" ng-disabled="hasSelection()" ng-click="duplicateToProfiles()" title="Copy selected dashboards to another profile">
-          <i class="icon-copy"></i> Duplicate to profiles
-        </button>
-        <button class="btn" ng-disabled="hasSelection()" ng-click="delete()"><i
-                class="icon-remove"></i> Delete
-        </button>
-      </div>
-    </div>
-    <div class="span4">
-      <div class="control-group">
-        <button class="btn" ng-disabled="hasSelection()" ng-click="gist()"
-                title="Creates a JSON gist of the selected dashboards so you can share with others"
-                data-placement="bottom">
-          <i class="icon-cloud-upload"></i> Share
-        </button>
-        <a class="btn" href="#/dashboard/import"
-                title="Imports a JSON dashboard configuration from github or some other URL"
-                data-placement="bottom">
-          <i class="icon-cloud-download"></i> Import
-        </a>
-      </div>
-    </div>
-    <div class="span4">
-      <div class="control-group">
-        <input type="text" class="span12 search-query" ng-model="searchText" placeholder="search">
-      </div>
+
+    <div class="span12">
+      <ul class="nav nav-tabs">
+        <li>
+          <a href=""
+             ng-click="create()"
+             title="Create a new empty dashboard"
+             data-placement="bottom">
+            <i class="icon-plus"></i> Create</a>
+        </li>
+        <li>
+          <a href=""
+             ng-disabled="!hasSelection()"
+             ng-click="duplicate()"
+                  title="Create a copy of the selected dashboard(s)" data-placement="bottom">
+            <i class="icon-copy"></i> Duplicate
+          </a>
+        </li>
+        <li>
+          <a href=""
+             ng-show="usingFabric()"
+             ng-disabled="!hasSelection()"
+             ng-click="duplicateToProfiles()"
+             title="Copy selected dashboards to another profile">
+            <i class="icon-copy"></i> Duplicate to profiles
+          </a>
+        </li>
+        <li>
+          <a href=""
+             ng-disabled="!hasSelection()"
+             ng-click="delete()"><i
+                  class="icon-remove"></i> Delete
+          </a>
+        </li>
+        <li class="pull-right">
+          <a href="#/dashboard/import"
+             title="Imports a JSON dashboard configuration from github or some other URL"
+             data-placement="bottom">
+            <i class="icon-cloud-download"></i> Import
+          </a>
+
+        </li>
+        <li class="pull-right">
+          <a ng-disabled="!hasSelection()"
+             ng-click="gist()"
+             title="Creates a JSON gist of the selected dashboards so you can share with others"
+             data-placement="bottom">
+            <i class="icon-cloud-upload"></i> Share
+          </a>
+
+        </li>
+      </ul>
     </div>
   </div>
 

diff --git a/hawtio-web/src/main/webapp/app/dashboard/js/editDashboards.ts b/hawtio-web/src/main/webapp/app/dashboard/js/editDashboards.ts
@@ -17,7 +17,7 @@ module Dashboard {
     };
 
     $scope.hasSelection = () => {
-      return !$scope.selectedItems.length;
+      return $scope.selectedItems.length !== 0;
     };
 
     $scope.gridOptions = {
@@ -102,7 +102,9 @@ module Dashboard {
 
 
     $scope.duplicateToProfiles = () => {
-      $scope.duplicateDashboards.open();
+      if ($scope.hasSelection()) {
+        $scope.duplicateDashboards.open();
+      }
     };
 
 
@@ -310,12 +312,14 @@ module Dashboard {
     };
 
     $scope.delete = () => {
-      dashboardRepository.deleteDashboards($scope.selectedItems, Dashboard.onOperationComplete);
+      if ($scope.hasSelection()) {
+        dashboardRepository.deleteDashboards($scope.selectedItems, Dashboard.onOperationComplete);
 
-      angular.forEach($scope.selectedItems, (item) => {
-        dashboards().remove(item);
-      });
-      $scope.selectedItems.splice(0, $scope.selectedItems.length);
+        angular.forEach($scope.selectedItems, (item) => {
+          dashboards().remove(item);
+        });
+        $scope.selectedItems.splice(0, $scope.selectedItems.length);
+      }
     };
 
 

diff --git a/hawtio-web/src/main/webapp/css/site-base.css b/hawtio-web/src/main/webapp/css/site-base.css
@@ -1647,10 +1647,17 @@ div#main div ul.nav li a.nav-primary[disabled] {
   background-color: #0044cc;
   *background-color: #003bb3;
 }
+
 div#main div ul.nav li a.nav-primary:active,
 div#main div ul.nav li a.nav-primary.active {
   background-color: #003399 \9;
 }
+
+.nav.nav-tabs li a[disabled] {
+  cursor: pointer;
+  opacity: 0.3;
+}
+
 /*
 .nav-warning .caret,
 .nav-danger .caret,