Tooltip and guide fine tuning

MediaMath · May 17, 2016 · 2632ad1 · 2632ad1
1 parent 3c69794
commit 2632ad1
Show file tree

Hide file tree

Showing 8 changed files with 33 additions and 9 deletions.
diff --git a/src/strand-grid-column/doc.json b/src/strand-grid-column/doc.json
@@ -26,12 +26,27 @@
 
 		{
 			"name":"minWidth",
-			"type":"Integer",
+			"type":"Number",
 			"description":"The minimum width of the column in pixels when resizing.",
 			"attribute":"min-width",
 			"optional":true,
 			"default":"75"
 		},
+		{
+			"name":"tipWidth",
+			"type":"Number",
+			"description":"The desired width of the tooltip for the column, in pixels (see: the 'info' property). For longer multiline tooltips, provide a tip-width for best results.",
+			"attribute":"min-width",
+			"optional":true,
+			"default":"none"
+		},
+		{
+			"name":"info",
+			"type":"String",
+			"description":"",
+			"optional":true,
+			"default":"false"
+		},
 		{
 			"name":"resize",
 			"type":"Boolean",

diff --git a/src/strand-grid-column/strand-grid-column.html b/src/strand-grid-column/strand-grid-column.html
@@ -19,7 +19,7 @@
 				<div id="label"></div>
 				<!-- <template is="dom-if" if="{{info}}"> -->
 				<strand-icon id="info" hidden$="{{_hasInfoTip(info)}}" width="14" height="14" type="info"></strand-icon>
-				<strand-tooltip id="infoTip" hidden$="{{_hasInfoTip(info)}}" target="{{findById('info')}}" _scope="{{ref}}">
+				<strand-tooltip id="infoTip" tip-width="{{tipWidth}}" hidden$="{{_hasInfoTip(info)}}" target="{{findById('info')}}" _scope="{{ref}}">
 					<label>{{info}}</label>
 				</strand-tooltip>
 				<!-- </template> -->

diff --git a/src/strand-grid-column/strand-grid-column.js b/src/strand-grid-column/strand-grid-column.js
@@ -64,6 +64,9 @@
 				type: Number,
 				value: 75
 			},
+			tipWidth: {
+				type: Number
+			}
 		},
 
 		listeners: {

diff --git a/src/strand-grid-column/strand-grid-column.scss b/src/strand-grid-column/strand-grid-column.scss
@@ -41,13 +41,8 @@
 }
 
 #label {
-	// TODO: switch this block to the mixin for default font
-	font-family: "Arimo", sans-serif;
-	font-weight: bold;
-	font-size: 11px;
-	line-height: 11px;
+	@include defaultFont(11px, 11px, 700);
 	color: $color-A2;
-
 	text-transform: uppercase;
 	white-space: nowrap;
 	overflow: hidden;

diff --git a/src/strand-guide-tooltip/strand-guide-tooltip.html b/src/strand-guide-tooltip/strand-guide-tooltip.html
@@ -6,6 +6,7 @@
 -->
 <link rel="import" href="../../bower_components/polymer/polymer.html">
 <link rel="import" href="../shared/fonts/fonts.html"/>
+<link rel="import" href="../shared/js/behaviorutils.html"/>
 <link rel="import" href="../shared/behaviors/resolvable.html"/>
 <link rel="import" href="../shared/behaviors/refable.html"/>
 <link rel="import" href="../shared/behaviors/positionable-panel.html"/>

diff --git a/src/strand-guide-tooltip/strand-guide-tooltip.js b/src/strand-guide-tooltip/strand-guide-tooltip.js
@@ -6,6 +6,8 @@
 */
 (function(scope) {
 
+	var BehaviorUtils = StrandLib.BehaviorUtils;
+
 	scope.GuideTooltip = Polymer({
 		is: 'strand-guide-tooltip',
 
@@ -72,6 +74,12 @@
 			}
 		},
 
+		open: function(silent) {
+			var inherited = BehaviorUtils.findSuper(StrandTraits.Closable, "open");
+			inherited.apply(this, [silent]);
+			this._updatePosition();
+		},
+
 		_currentStepChanged: function(newVal, oldVal) {
 			if (this.currentStep <= this.data.length-1) {
 				if (this.state === this.STATE_OPENED) this.close();

diff --git a/src/strand-guide/strand-guide.js b/src/strand-guide/strand-guide.js
@@ -125,7 +125,7 @@
 				newVal.forEach(function(item) {
 					var target = Polymer.dom(this.scope).querySelector('#' + item.target);
 					item.targetRef = target;
-				});
+				}, this);
 
 				if (this._isAttached) this._init();
 			}

diff --git a/src/strand-tooltip/strand-tooltip.scss b/src/strand-tooltip/strand-tooltip.scss
@@ -14,6 +14,8 @@ $bg-color: $color-A1;
 :host {
 	position: fixed;
 	display: block;
+	left: 0;
+	top: 0;
 }
 
 #container {