AMBARI-10374. Implement hover icons on widgets (clone, hide, edit, etc)(xiwang)

ambari-web/app/mixins/common/widget_mixin.js

@@ -248,10 +248,29 @@ App.WidgetMixin = Ember.Mixin.create({
 
   getHostComponentMetricsSuccessCallback: function () {
     //TODO push data to metrics after response structure approved
+  },
+
+  /*
+   * make call when clicking on "remove icon" on widget
+   */
+  hideWidget: function () {
+
+  },
+  /*
+   * make call when clicking on "clone icon" on widget
+   */
+  cloneWidget: function () {
+
+  },
+
+  /*
+   * make call when clicking on "edit icon" on widget
+   */
+  editWidget: function () {
+
   }
 
 });
-
 App.WidgetPreviewMixin = Ember.Mixin.create({
   beforeRender: Em.K,
   isLoaded: true,

ambari-web/app/styles/enhanced_service_dashboard.less

@@ -51,7 +51,6 @@
 #widget_layout,
 #widget-preview {
   .frame {
-    overflow: hidden;
     height: 150px;
     width: 90%;
   }
@@ -59,7 +58,6 @@
     width: 19.3%;
     background-color: white;
     margin: 5px 0 5px 5px;
-    cursor: move;
   }
   .widget {
     .spinner {
@@ -70,22 +68,26 @@
       height: 25px;
       font-weight: bold;
       text-align: left;
+      position: relative;
     }
     .content {
       text-align: center;
       color: @health-status-green;
-      padding-top: 35px;
       font-weight: bold;
       font-size: 35px;
+      position: relative;
     }
     .template-widget,
     .number-widget {
       .frame;
+      .content {
+        padding-top: 70px;
+      }
     }
     .graph-widget {
       .frame;
       .content {
-        padding-top: 0;
+        padding-top: 30px;
       }
       .chart-legend {
         min-width: 100%;
@@ -98,7 +100,7 @@
     .gauge-widget {
       .frame;
       .content {
-        padding-top: 5px;
+        padding-top: 40px;
       }
     }
     .red {
@@ -115,9 +117,48 @@
 
 #widget-preview {
   max-width: 200px;
-  .graph-widget {
-    .title {
-      height: 0;
+  .widget {
+    .thumbnail .corner-icon {
+      display: none;
+    }
+    .graph-widget {
+      .title {
+        height: 0;
+      }
+    }
+  }
+}
+
+#widget_layout {
+  .widget {
+    .thumbnail .corner-icon {
+      display: none;
+      position: relative;
+      .icon-remove-sign{
+        color: #000000;
+        text-shadow: #fff 0px 0px 15px;
+        position: relative;
+        left: -17px;
+        top: -11px;
+      }
+      .icon-edit,.icon-copy{
+        color: #555555;
+        position: relative;
+      }
+      .icon-edit {
+        left: 2px;
+      }
+    }
+    .thumbnail:hover {
+      cursor: move;
+      .corner-icon{
+        display: block;
+        text-decoration: none;
+        z-index: 9;
+      }
+      .caption{
+        margin-left: -10px;
+      }
     }
   }
 }

ambari-web/app/templates/common/widget/gauge_widget.hbs

@@ -18,7 +18,16 @@
 
 <div class="gauge-widget thumbnail">
   {{#if view.isLoaded}}
-    <div class="caption title">{{view.content.displayName}}</div>
+    <a {{bindAttr class=":corner-icon :span1 view.parentView.isMoving:hidden"}} href="#" {{action hideWidget target="view"}}>
+      <i class="icon-remove-sign icon-large"></i>
+    </a>
+    <div class="caption title span9">{{view.content.displayName}}</div>
+    <a class="corner-icon span1" href="#" {{action cloneWidget target="view"}}>
+      <i class="icon-copy"></i>
+    </a>
+    <a class="corner-icon span1" href="#" {{action editWidget target="view"}}>
+      <i class="icon-edit"></i>
+    </a>
     <div class="content"> {{view view.chartView}}</div>
   {{else}}
     <div class="spinner"></div>

ambari-web/app/templates/common/widget/graph_widget.hbs

@@ -18,7 +18,16 @@
 
 <div class="graph-widget thumbnail">
   {{#if view.isLoaded}}
-    <div class="caption title">{{view.content.displayName}}</div>
+    <a {{bindAttr class=":corner-icon :span1 view.parentView.isMoving:hidden"}} href="#" {{action hideWidget target="view"}}>
+      <i class="icon-remove-sign icon-large"></i>
+    </a>
+    <div class="caption title span9">{{view.content.displayName}}</div>
+    <a class="corner-icon span1" href="#" {{action cloneWidget target="view"}}>
+      <i class="icon-copy"></i>
+    </a>
+    <a class="corner-icon span1" href="#" {{action editWidget target="view"}}>
+      <i class="icon-edit"></i>
+    </a>
     <div class="content"> {{view view.graphView}}</div>
   {{else}}
     <div class="spinner"></div>

ambari-web/app/templates/common/widget/number_widget.hbs

@@ -18,7 +18,16 @@
 
 <div class="number-widget thumbnail">
   {{#if view.isLoaded}}
-    <div class="caption title">{{view.content.displayName}}</div>
+    <a {{bindAttr class=":corner-icon :span1 view.parentView.isMoving:hidden"}} href="#" {{action hideWidget target="view"}}>
+      <i class="icon-remove-sign icon-large"></i>
+    </a>
+    <div class="caption title span9">{{view.content.displayName}}</div>
+    <a class="corner-icon span1" href="#" {{action cloneWidget target="view"}}>
+      <i class="icon-copy"></i>
+    </a>
+    <a class="corner-icon span1" href="#" {{action editWidget target="view"}}>
+      <i class="icon-edit"></i>
+    </a>
     <div {{bindAttr class="view.contentColor :content"}}>{{view.value}}</div>
   {{else}}
     <div class="spinner"></div>

ambari-web/app/templates/common/widget/template_widget.hbs

@@ -18,7 +18,16 @@
 
 <div class="template-widget thumbnail">
   {{#if view.isLoaded}}
-    <div class="caption title">{{view.content.displayName}}</div>
+    <a {{bindAttr class=":corner-icon :span1 view.parentView.isMoving:hidden"}} href="#" {{action hideWidget target="view"}}>
+      <i class="icon-remove-sign icon-large"></i>
+    </a>
+    <div class="caption title span9">{{view.content.displayName}}</div>
+    <a class="corner-icon span1" href="#" {{action cloneWidget target="view"}}>
+      <i class="icon-copy"></i>
+    </a>
+    <a class="corner-icon span1" href="#" {{action editWidget target="view"}}>
+      <i class="icon-edit"></i>
+    </a>
     <div class="content"> {{view.value}}</div>
   {{else}}
     <div class="spinner"></div>

ambari-web/app/views/main/service/info/summary.js

@@ -572,6 +572,12 @@ App.MainServiceInfoSummaryView = Em.View.extend(App.UserPref, {
     this.makeSortable();
   },
 
+  /**
+   * Define if some widget is currently moving
+   * @type {boolean}
+   */
+  isMoving: false,
+
   /**
    * Make widgets' list sortable on New Dashboard style
    */
@@ -591,6 +597,12 @@ App.MainServiceInfoSummaryView = Em.View.extend(App.UserPref, {
           var layout = self.get('controller.widgetLayouts').objectAt(0);
 
           self.get('controller').saveLayout(widgets, layout);
+        },
+        activate: function (event, ui) {
+          self.set('isMoving', true);
+        },
+        deactivate: function (event, ui) {
+          self.set('isMoving', false);
         }
       }).disableSelection();
       $('html').off('DOMNodeInserted', '#widget_layout');