Add ellipsis tooltips for form and dialog titles and subtitles

212918

Change-Id: I3731ff29bc24532c310e32874fe1570fd4f80ea8

5 files changed, 89 insertions, 5 deletions

diff --git a/org.eclipse.scout.rt.ui.html/src/main/js/scout/form/Form.js b/org.eclipse.scout.rt.ui.html/src/main/js/scout/form/Form.js
index 874a134e14..a6bdc4b419 100644
--- a/org.eclipse.scout.rt.ui.html/src/main/js/scout/form/Form.js
+++ b/org.eclipse.scout.rt.ui.html/src/main/js/scout/form/Form.js
@@ -398,8 +398,16 @@ scout.Form.prototype._renderHeader = function() {
     this.$header = this.$container.appendDiv('header');
     this.$statusContainer = this.$header.appendDiv('status-container');
     this.$icon = this.$header.appendDiv('icon-container');
+
     this.$title = this.$header.appendDiv('title');
+    scout.tooltips.installForEllipsis(this.$title, {
+      parent: this
+    });
+
     this.$subTitle = this.$header.appendDiv('sub-title');
+    scout.tooltips.installForEllipsis(this.$subTitle, {
+      parent: this
+    });
   }
 };
 
diff --git a/org.eclipse.scout.rt.ui.html/src/main/js/scout/form/fields/FormField.js b/org.eclipse.scout.rt.ui.html/src/main/js/scout/form/fields/FormField.js
index eff59e397b..b437a65cdf 100644
--- a/org.eclipse.scout.rt.ui.html/src/main/js/scout/form/fields/FormField.js
+++ b/org.eclipse.scout.rt.ui.html/src/main/js/scout/form/fields/FormField.js
@@ -827,6 +827,7 @@ scout.FormField.prototype._removeLabel = function() {
   if (!this.$label) {
     return;
   }
+  scout.tooltips.uninstall(this.$label);
   this.$label.remove();
   this.$label = null;
 };
diff --git a/org.eclipse.scout.rt.ui.html/src/main/js/scout/form/fields/tabbox/TabItem.js b/org.eclipse.scout.rt.ui.html/src/main/js/scout/form/fields/tabbox/TabItem.js
index e86a6968f0..1ab9a42499 100644
--- a/org.eclipse.scout.rt.ui.html/src/main/js/scout/form/fields/tabbox/TabItem.js
+++ b/org.eclipse.scout.rt.ui.html/src/main/js/scout/form/fields/tabbox/TabItem.js
@@ -83,6 +83,10 @@ scout.TabItem.prototype._onTabMouseDown = function(event) {
   if (!this.session.focusManager.active) {
     this.$tabContainer.focus();
   }
+
+  // When the tab is clicked the user wants to execute the action and not see the tooltip
+  scout.tooltips.cancel(this.$label);
+  scout.tooltips.close(this.$label);
 };
 
 scout.TabItem.prototype._onStatusMouseDown = function(event) {
@@ -197,6 +201,14 @@ scout.TabItem.prototype.addLabel = function() {
     return;
   }
   this.$label = this.$tabContainer.appendSpan('label');
+  scout.tooltips.installForEllipsis(this.$label, {
+    parent: this,
+    $parent: this._$tooltipParent(),
+    renderLaterPredicate: function() {
+      // See comment in _createTooltip
+      return !this.$anchor.isAttached();
+    }
+  });
 };
 
 scout.TabItem.prototype.addStatus = function() {
diff --git a/org.eclipse.scout.rt.ui.html/src/main/js/scout/tabbox/SimpleTab.js b/org.eclipse.scout.rt.ui.html/src/main/js/scout/tabbox/SimpleTab.js
index e9fd7383d6..c6dd36c251 100644
--- a/org.eclipse.scout.rt.ui.html/src/main/js/scout/tabbox/SimpleTab.js
+++ b/org.eclipse.scout.rt.ui.html/src/main/js/scout/tabbox/SimpleTab.js
@@ -52,8 +52,16 @@ scout.SimpleTab.prototype._render = function() {
   this.$container.on('mousedown', this._mouseListener);
   this.$statusContainer = this.$container.appendDiv('status-container');
   this.$icon = this.$container.appendDiv('icon-container');
+
   this._$title = this.$container.appendDiv('title');
+  scout.tooltips.installForEllipsis(this._$title, {
+    parent: this
+  });
+
   this._$subTitle = this.$container.appendDiv('sub-title');
+  scout.tooltips.installForEllipsis(this._$subTitle, {
+    parent: this
+  });
 
   this._renderTitle();
   this._renderSubTitle();
@@ -192,6 +200,12 @@ scout.SimpleTab.prototype.deselect = function() {
 
 scout.SimpleTab.prototype._onMouseDown = function(event) {
   this.trigger('click');
+
+  // When the tab is clicked the user wants to execute the action and not see the tooltip
+  scout.tooltips.cancel(this._$title);
+  scout.tooltips.cancel(this._$subTitle);
+  scout.tooltips.close(this._$title);
+  scout.tooltips.close(this._$subTitle);
 };
 
 scout.SimpleTab.prototype._onClose = function() {};
diff --git a/org.eclipse.scout.rt.ui.html/src/main/js/scout/tooltip/tooltips.js b/org.eclipse.scout.rt.ui.html/src/main/js/scout/tooltip/tooltips.js
index 17371483f1..63d406cc28 100644
--- a/org.eclipse.scout.rt.ui.html/src/main/js/scout/tooltip/tooltips.js
+++ b/org.eclipse.scout.rt.ui.html/src/main/js/scout/tooltip/tooltips.js
@@ -10,8 +10,13 @@
  ******************************************************************************/
 scout.tooltips = {
   install: function($comp, options) {
-    var support = new scout.TooltipSupport(options);
-    support.install($comp);
+    var support = $comp.data('tooltipSupport');
+    if (!support) {
+      support = new scout.TooltipSupport(options);
+      support.install($comp);
+    } else {
+      support.update($comp, options);
+    }
   },
 
   uninstall: function($comp) {
@@ -22,6 +27,34 @@ scout.tooltips = {
   },
 
   /**
+   * If the tooltip is currently showing, its contents are updated immediately.
+   * Otherwise, nothing happens.
+   */
+  update: function($comp, options) {
+    var support = $comp.data('tooltipSupport');
+    if (support) {
+      support.update($comp, options);
+    }
+  },
+
+  close: function($comp) {
+    var support = $comp.data('tooltipSupport');
+    if (support) {
+      support.close();
+    }
+  },
+
+  /**
+   * Cancels the scheduled task to show the tooltip.
+   */
+  cancel: function($comp) {
+    var support = $comp.data('tooltipSupport');
+    if (support) {
+      support.cancel($comp);
+    }
+  },
+
+  /**
    * Convenient function to install tooltip support for ellipsis only.
    */
   installForEllipsis: function($comp, options) {
@@ -66,8 +99,8 @@ scout.TooltipSupport = function(options) {
   this._options = options;
   this._mouseEnterHandler = this._onMouseEnter.bind(this);
   this._mouseLeaveHandler = this._onMouseLeave.bind(this);
-  this._tooltip;
-  this._tooltipTimeoutId;
+  this._tooltip = null;
+  this._tooltipTimeoutId = null;
 };
 
 scout.TooltipSupport.prototype.install = function($comp) {
@@ -86,9 +119,23 @@ scout.TooltipSupport.prototype.uninstall = function($comp) {
     .off('mouseleave', this._options.selector, this._mouseLeaveHandler)
     .off('mouseenter', this._options.selector, this._onMouseEnterHandler);
   this._destroyTooltip();
+};
+
+scout.TooltipSupport.prototype.update = function($comp, options) {
+  $.extend(this._options, options);
+  if (this._tooltip) {
+    this._showTooltip($comp);
+  }
+};
+
+scout.TooltipSupport.prototype.cancel = function($comp) {
   clearTimeout(this._tooltipTimeoutId);
 };
 
+scout.TooltipSupport.prototype.close = function() {
+  this._destroyTooltip();
+};
+
 scout.TooltipSupport.prototype._onMouseEnter = function(event) {
   var $comp = $(event.currentTarget);
 
@@ -133,6 +180,8 @@ scout.TooltipSupport.prototype._showTooltip = function($comp) {
   if (this._tooltip && this._tooltip.rendered) {
     // update existing tooltip
     this._tooltip.setText(text);
+    this._tooltip.setSeverity(this._options.severity);
+    this._tooltip.setMenus(this._options.menus);
   } else {
     // create new tooltip
     var options = $.extend({}, this._options, {
@@ -140,6 +189,6 @@ scout.TooltipSupport.prototype._showTooltip = function($comp) {
       text: text
     });
     this._tooltip = scout.create('Tooltip', options);
-    this._tooltip.render();
+    this._tooltip.render(options.$parent);
   }
 };