Move profile actions to the "Actions" menu and also do a bit more wor…

…k for #587 for the profile detail view.
hawtio · Oct 14, 2013 · 2d215a4 · 2d215a4
1 parent 2a03ca2
commit 2d215a4
Show file tree

Hide file tree

Showing 5 changed files with 66 additions and 9 deletions.
diff --git a/hawtio-web/src/main/webapp/app/fabric/html/profileDetailsDirective.html b/hawtio-web/src/main/webapp/app/fabric/html/profileDetailsDirective.html
@@ -15,15 +15,15 @@ <h2 class="inline">Profile: {{row.id}}</h2>
         </ng-pluralize>
       </div>
 
-      <div class="pull-right">
+      <div class="pull-right" ng-hide="inDirective">
         <a class="btn" ng-href="#/fabric/containers/createContainer?versionId={{versionId}}&profileIds={{profileId}}" title="Deploy this profile to a new container"><i class="icon-truck"></i> Create Container</a>
         <a class="btn" href="" title="Create a new profile that is a copy of this one" ng-click="copyProfileDialog = true"><i class="icon-copy"></i> Copy</a>
       </div>
     </div>
 
     <div class="row-fluid profile-details">
 
-      <div class="span4">
+      <div class="span3">
 
         <ul class="unstyled switches">
           <li>
@@ -61,8 +61,6 @@ <h2 class="inline">Profile: {{row.id}}</h2>
                 <i class="red clickable icon-remove" title="Remove parent {{profile}}" ng-click="removeParentProfile(profile)"></i>
                 <a href="#/wiki/branch/{{versionId}}/view/fabric/profiles/{{profilePath(profile)}}{{hash}}">{{profile}}</a>
               </li>
-              <li>
-                <i class="clickable icon-edit green" ng-click="showChangeParentsDialog()" title="Change parent profiles"></i>
             </ul>
           </dd>
         </dl>
@@ -79,7 +77,7 @@ <h2 class="inline">Profile: {{row.id}}</h2>
       </div>
 
 
-      <div class="span8">
+      <div class="span9">
 
         <div class="tabbable hawtio-form-tabs" ng-model="activeTab">
 
@@ -89,9 +87,6 @@ <h2 class="inline">Profile: {{row.id}}</h2>
                 <i class="red clickable icon-remove" title="Delete {{feature}}" ng-click="deleteThing('Feature', 'Features', row.features, feature)"></i>
                 <editable-property ng-model="row.features" property="$index" on-save="updateThing('Feature', 'Features',  row.features)"></editable-property>
               </li>
-              <li class="add green">
-                <i class="clickable icon-edit green" ng-click="goto('/wiki/profile/{{versionId}}/{{profileId}}/editFeatures')" title="Edit features"></i>
-              </li>
             </ul>
           </div>
 
@@ -136,7 +131,7 @@ <h2 class="inline">Profile: {{row.id}}</h2>
             </ul>
           </div>
 
-          <div class="tab-pane" value="fabs" title="Fuse Application Bundles ({{row.fabs.length}})">
+          <div class="tab-pane" value="fabs" title="FABs ({{row.fabs.length}})">
             <ul class="unstyled">
               <li ng-repeat="fab in row.fabs">
                 <i class="red clickable icon-remove" title="Delete {{fab}}" ng-click="deleteThing('Fuse Application Bundle', 'Fabs', row.fabs, fab)"></i>

diff --git a/hawtio-web/src/main/webapp/app/fabric/js/profile.ts b/hawtio-web/src/main/webapp/app/fabric/js/profile.ts
@@ -29,6 +29,41 @@ module Fabric {
 
     $scope.profilePath = Fabric.profilePath;
 
+    if ($scope.inDirective &&
+        angular.isDefined($scope.$parent.childActions) &&
+        $scope.versionId &&
+        $scope.profileId) {
+      var actions = $scope.$parent.childActions;
+      actions.push({
+        doAction: () => { $scope.showChangeParentsDialog(); },
+        title: "Edit parent profiles",
+        icon: "icon-edit",
+        name: "Change Parents"
+      });
+      actions.push({
+        doAction: () => { $scope.copyProfileDialog = true; },
+        title: "Copy Profile",
+        icon: "icon-copy",
+        name: "Copy Profile"
+      });
+      actions.push({
+        doAction: () => { $scope.goto('/wiki/profile/' + $scope.versionId + '/' + $scope.profileId + '/editFeatures'); },
+        title: "Edit the features defined in this profile",
+        icon: "icon-edit",
+        name: "Edit Features"
+      });
+      actions.push({
+        doAction: () => {
+          $location.url('/fabric/containers/createContainer').search({
+          versionId: $scope.versionId,
+          profileIds: $scope.profileId
+        }); },
+        title: "Create Container",
+        icon: "icon-truck",
+        name: "Create Container"
+      });
+    }
+
     $scope.$watch('activeTab', (newValue, oldValue) => {
       if (newValue !== oldValue) {
         $scope.newThingName = '';

diff --git a/hawtio-web/src/main/webapp/app/wiki/html/viewPage.html b/hawtio-web/src/main/webapp/app/wiki/html/viewPage.html
@@ -95,6 +95,14 @@
                  data-placement="bottom">
                 <i class="icon-remove"></i> Delete</a>
             </li>
+            <li class="divider" ng-show="childActions.length">
+            </li>
+            <li ng-repeat="childAction in childActions">
+              <a ng-click="childAction.doAction()"
+                 title="((childAction.title))"
+                 data-placement="bottom">
+                <i class="{{childAction.icon}}"></i> {{childAction.name}}</a>
+            </li>
           </ul>
         </li>
         <li class="pull-right">

diff --git a/hawtio-web/src/main/webapp/app/wiki/js/view.ts b/hawtio-web/src/main/webapp/app/wiki/js/view.ts
@@ -49,6 +49,8 @@ module Wiki {
       ]
     };
 
+    $scope.childActions = [];
+
     /*
     if (!$scope.nameOnly) {
       $scope.gridOptions.columnDefs.push({

diff --git a/hawtio-web/src/main/webapp/css/site-base.css b/hawtio-web/src/main/webapp/css/site-base.css
@@ -2572,3 +2572,20 @@ i.expandable-indicator.folder {
 [class^="dynatree-folder icon-"], [class*=" dynatree-folder icon-"] .dynatree-icon {
   display: none;
 }
+
+@media(max-width: 1400px) {
+  .profile-details > [class^="span"] {
+    width: 100%;
+    float: inherit;
+    display: block;
+    margin-left: 2px;
+    margin-right: 2px;
+  }
+}
+
+@media(min-width: 600px) {
+  .wiki-fixed {
+    margin-left: 0 !important;
+    margin-right: 0 !important;
+  }
+}