Fixed some issues with floating TitlePanes and brook out css.

cmv · Jul 14, 2014 · 5eda723 · 5eda723
1 parent 47f7ab5
commit 5eda723
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 18 deletions.
diff --git a/viewer/css/main.css b/viewer/css/main.css
@@ -110,17 +110,6 @@ body, html {
 #help_parent_underlay {
     display: block;
 }
-.floatingWidgetMove:before {
-    float: right;
-    margin-left: 10px;
-    content: "\f047";
-    font-family: FontAwesome;
-}
-.floatingWidgetDock:before {
-    float: right;
-    content: "\f112";
-    font-family: FontAwesome;
-}
 
 /* dbootstrap overrides*/
 

diff --git a/viewer/js/gis/dijit/FloatingTitlePane.js b/viewer/js/gis/dijit/FloatingTitlePane.js
@@ -12,19 +12,27 @@ define([
 	'dojo/dom-style',
 	'dojo/dom-construct',
 	'dojo/dom-attr',
-	'dojo/dom-class'
-], function(declare, TitlePane, _Contained, on, lang, Moveable, aspect, win, winUtils, domGeom, domStyle, domConstruct, domAttr, domClass) {
+	'dojo/dom-class',
+	'xstyle/css!./FloatingTitlePane/css/FloatingTitlePane.css'
+], function(declare, TitlePane, _Contained, on, lang, Moveable, aspect, win, winUtils, domGeom, domStyle, domConstruct, domAttr, domClass, css) {
 	return declare([TitlePane, _Contained], {
 		postCreate: function() {
 			if (this.canFloat) {
-				this.dockHandleNode = domConstruct.create('span', null, this.titleNode, 'after');
+				this.dockHandleNode = domConstruct.create('span', {
+					title: 'Dock widget'
+				}, this.titleNode, 'after');
 				domStyle.set(this.dockHandleNode, 'display', 'none');
-				this.moveHandleNode = domConstruct.create('span', null, this.titleNode, 'after');
 				domClass.add(this.dockHandleNode, 'floatingWidgetDock');
-				domClass.add(this.moveHandleNode, 'floatingWidgetMove');
-				on(this.moveHandleNode, 'click', function(evt) {
+
+				this.moveHandleNode = domConstruct.create('span', {
+					title: 'Move widget'
+				}, this.titleNode, 'after');
+				domClass.add(this.moveHandleNode, 'floatingWidgetPopout');
+
+				on(this.moveHandleNode, 'click', lang.hitch(this, function(evt) {
+					this._undockWidget();
 					evt.stopImmediatePropagation();
-				});
+				}));
 				on(this.dockHandleNode, 'click', lang.hitch(this, function(evt) {
 					this._dockWidget();
 					evt.stopImmediatePropagation();
@@ -43,16 +51,27 @@ define([
 			}
 			this.inherited(arguments);
 		},
+		_undockWidget: function() {
+			if (!this.isFloating) {
+				domClass.add(this.moveHandleNode, 'floatingWidgetMove');
+				domClass.remove(this.moveHandleNode, 'floatingWidgetPopout');
+			}
+		},
 		_dockWidget: function() {
 			domAttr.remove(this.domNode, 'style');
 			domStyle.set(this.dockHandleNode, 'display', 'none');
 			var dockedWidgets = this.sidebar.getChildren();
 			this.placeAt(this.sidebar, dockedWidgets.length);
+			domClass.remove(this.moveHandleNode, 'floatingWidgetMove');
+			domClass.add(this.moveHandleNode, 'floatingWidgetPopout');
 			this.isFloating = false;
 		},
 		_moveDom: function() {
 			if (!this.isFloating) {
 				domStyle.set(this.dockHandleNode, 'display', 'inline');
+				domStyle.set(this.domNode, 'z-index', '40');
+				domClass.add(this.moveHandleNode, 'floatingWidgetMove');
+				domClass.remove(this.moveHandleNode, 'floatingWidgetPopout');
 				var computedStyle = domStyle.getComputedStyle(this.containerNode);
 				var width = parseInt(domStyle.getComputedStyle(this.sidebar.containerNode).width, 10);
 				domGeom.setContentSize(this.containerNode, {

diff --git a/viewer/js/gis/dijit/FloatingTitlePane/css/FloatingTitlePane.css b/viewer/js/gis/dijit/FloatingTitlePane/css/FloatingTitlePane.css
@@ -0,0 +1,16 @@
+.floatingWidgetMove:before {
+    float: right;
+    margin-left: 10px;
+    content: "\f047";
+    font-family: FontAwesome;
+}
+.floatingWidgetDock:before {
+    float: right;
+    content: "\f112";
+    font-family: FontAwesome;
+}
+.floatingWidgetPopout:before {
+    float: right;
+    content: "\f064";
+    font-family: FontAwesome;
+}