AMBARI-7264. Dashboard widgets on moving strangeness. (akovalenko)

ambari-web/app/templates/main/dashboard/widgets/cluster_metrics.hbs

@@ -19,7 +19,7 @@
 <div class="cluster-metrics">
   <ul>
     <li class="thumbnail row">
-      <a class="corner-icon span1" href="#" {{action deleteWidget target="view"}}>
+      <a {{bindAttr class=":corner-icon :span1 view.parentView.isMoving:hidden"}} href="#" {{action deleteWidget target="view"}}>
           <i class="icon-remove-sign icon-large"></i>
       </a>
       <div class="caption span10">{{view.title}}</div>

ambari-web/app/templates/main/dashboard/widgets/hbase_links.hbs

@@ -19,7 +19,7 @@
 <div class="links">
   <ul>
     <li class="thumbnail row">
-      <a class="corner-icon span1" href="#" {{action deleteWidget target="view"}}><i class="icon-remove-sign icon-large"></i></a>
+      <a {{bindAttr class=":corner-icon :span1 view.parentView.isMoving:hidden"}} href="#" {{action deleteWidget target="view"}}><i class="icon-remove-sign icon-large"></i></a>
       <div class="caption span10"> {{view.title}}</div>
 
       <div class="widget-content" >

ambari-web/app/templates/main/dashboard/widgets/hdfs_links.hbs

@@ -19,7 +19,7 @@
 <div class="links">
   <ul>
   <li class="thumbnail row">
-    <a class="corner-icon span1" href="#" {{action deleteWidget target="view"}}>
+    <a {{bindAttr class=":corner-icon :span1 view.parentView.isMoving:hidden"}} href="#" {{action deleteWidget target="view"}}>
       <i class="icon-remove-sign icon-large"></i>
     </a>
     <div class="caption span10"> {{view.title}}</div>

ambari-web/app/templates/main/dashboard/widgets/mapreduce_links.hbs

@@ -19,7 +19,7 @@
 <div class="links">
   <ul>
     <li class="thumbnail row">
-      <a class="corner-icon span1" href="#" {{action deleteWidget target="view"}}>
+      <a {{bindAttr class=":corner-icon :span1 view.parentView.isMoving:hidden"}} href="#" {{action deleteWidget target="view"}}>
         <i class="icon-remove-sign icon-large"></i>
       </a>
       <div class="caption span10"> {{view.title}}</div>

ambari-web/app/templates/main/dashboard/widgets/mapreduce_slots.hbs

@@ -19,7 +19,7 @@
 <div class="has-hidden-info">
   <ul>
     <li class="thumbnail row" >
-      <a class="corner-icon span1" href="#" {{action deleteWidget target="view"}}><i class="icon-remove-sign icon-large"></i></a>
+      <a {{bindAttr class=":corner-icon :span1 view.parentView.isMoving:hidden"}} {{action deleteWidget target="view"}}><i class="icon-remove-sign icon-large"></i></a>
       <div class="caption span10 slots-caption"> {{view.title}}</div>
 
       <div {{bindAttr class=":hidden-info-general view.hiddenInfoClass"}}>

ambari-web/app/templates/main/dashboard/widgets/pie_chart.hbs

@@ -19,7 +19,7 @@
 <div class="has-hidden-info">
   <ul>
     <li class="thumbnail row">
-      <a class="corner-icon span1" href="#" {{action deleteWidget target="view"}}>
+      <a {{bindAttr class=":corner-icon :span1 view.parentView.isMoving:hidden"}} href="#" {{action deleteWidget target="view"}}>
         <i class="icon-remove-sign icon-large"></i>
       </a>
       <div class="caption span10">{{view.title}}</div>

ambari-web/app/templates/main/dashboard/widgets/simple_text.hbs

@@ -19,7 +19,7 @@
 <div class="has-hidden-info">
   <ul>
     <li class="thumbnail row" >
-      <a class="corner-icon span1" href="#" {{action deleteWidget target="view"}}>
+      <a {{bindAttr class=":corner-icon :span1 view.parentView.isMoving:hidden"}} href="#" {{action deleteWidget target="view"}}>
         <i class="icon-remove-sign icon-large"></i>
       </a>
       <div class="caption span10"> {{view.title}}</div>

ambari-web/app/templates/main/dashboard/widgets/uptime.hbs

@@ -19,7 +19,7 @@
 <div class="has-hidden-info">
   <ul>
     <li class="thumbnail row" >
-      <a class="corner-icon span1" href="#" {{action deleteWidget target="view"}}>
+      <a {{bindAttr class=":corner-icon :span1 view.parentView.isMoving:hidden"}} href="#" {{action deleteWidget target="view"}}>
         <i class="icon-remove-sign icon-large"></i>
       </a>
       <div class="caption span11"> {{view.title}} </div>

ambari-web/app/views/main/dashboard/widget.js

@@ -139,7 +139,7 @@ App.DashboardWidgetView = Em.View.extend({
 
     });
 
-    var browserVerion = this.getInternetExplorerVersion();
+    var browserVersion = this.getInternetExplorerVersion();
     App.ModalPopup.show({
       header: Em.I18n.t('dashboard.widgets.popupHeader'),
       classNames: [ 'sixty-percent-width-modal-edit-widget' ],
@@ -172,7 +172,7 @@ App.DashboardWidgetView = Em.View.extend({
         var handlers = [configObj.get('thresh1'), configObj.get('thresh2')];
         var colors = ['#95A800', '#FF8E00', '#B80000']; //color green, orange ,red
 
-        if (browserVerion == -1 || browserVerion > 9) {
+        if (browserVersion == -1 || browserVersion > 9) {
           configObj.set('isIE9', false);
           configObj.set('isGreenOrangeRed', true);
           $("#slider-range").slider({

ambari-web/app/views/main/dashboard/widgets.js

@@ -44,6 +44,12 @@ App.MainDashboardWidgetsView = Em.View.extend(App.UserPref, App.LocalStorage, {
    */
   isDataLoaded: false,
 
+  /**
+   * Define if some widget is currently moving
+   * @type {bool}
+   */
+  isMoving: false,
+
   /**
    * Make widgets' list sortable on New Dashboard style
    */
@@ -53,6 +59,8 @@ App.MainDashboardWidgetsView = Em.View.extend(App.UserPref, App.LocalStorage, {
       items: "> div",
       //placeholder: "sortable-placeholder",
       cursor: "move",
+      tolerance: "pointer",
+      scroll: false,
       update: function (event, ui) {
         if (!App.get('testMode')) {
           // update persist then translate to real
@@ -76,6 +84,12 @@ App.MainDashboardWidgetsView = Em.View.extend(App.UserPref, App.LocalStorage, {
             //self.translateToReal(newValue);
           });
         }
+      },
+      activate: function(event, ui) {
+        self.set('isMoving', true);
+      },
+      deactivate: function(event, ui) {
+        self.set('isMoving', false);
       }
     }).disableSelection();
   },