Bug 423386 - Sidebar resizing in a filtered outline mode causes 'View…

…' menu button to disappear --Signed-off-by: Elijah El-Haddad <elijahe@ca.ibm.com>
elijahe · Dec 6, 2013 · 74f0970 · 74f0970
1 parent 063a031
commit 74f0970
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 8 deletions.
diff --git a/bundles/org.eclipse.orion.client.ui/web/edit/common.css b/bundles/org.eclipse.orion.client.ui/web/edit/common.css
@@ -17,7 +17,8 @@
 .outlineFilter {
 	border: 1px solid lightgrey;
 	margin: 4px;
-	width: 250px;
+	width: 210px;
+	position: absolute;
 }
 
 .outlineRowHidden {

diff --git a/bundles/org.eclipse.orion.client.ui/web/orion/outliner.js b/bundles/org.eclipse.orion.client.ui/web/orion/outliner.js
@@ -21,8 +21,9 @@ define([
 	'orion/URITemplate',
 	'orion/EventTarget',
 	'orion/i18nUtil',
-	'orion/edit/editorContext'
-], function(messages, Deferred, lib, mUIUtils, mSection, mExplorer, mCommands, URITemplate, EventTarget, i18nUtil, EditorContext) {
+	'orion/edit/editorContext',
+	'orion/webui/tooltip'
+], function(messages, Deferred, lib, mUIUtils, mSection, mExplorer, mCommands, URITemplate, EventTarget, i18nUtil, EditorContext, Tooltip) {
 
 	function OutlineRenderer (options, explorer, title, selectionService) {
 		this.explorer = explorer;
@@ -369,13 +370,16 @@ define([
 				this.explorer.destroy();
 				this.explorer = null;
 			}
+
+			//reset the sidebar switcher node's layout state
+			this._sidebar.switcherNode.classList.remove("layoutLeft");
+			this._sidebar.switcherNode.classList.add("layoutRight");
 		},
 
 		_createFilterInput: function() {
 			var input = document.createElement("input"); //$NON-NLS-0$
 
 			input.classList.add("outlineFilter"); //$NON-NLS-0$
-			input.classList.add("layoutLeft"); //$NON-NLS-0$
 			input.placeholder = messages["Filter"]; //$NON-NLS-0$
 			input.type="text"; //$NON-NLS-0$
 			input.addEventListener("input", function (e) { //$NON-NLS-0$
@@ -404,8 +408,34 @@ define([
 					}
 				}
 			}.bind(this), false);
+
+			input.commandTooltip = new Tooltip.Tooltip({
+				node: input,
+				text: messages["Filter"], //$NON-NLS-0$
+				position: ["right", "above", "left"], //$NON-NLS-3$ //$NON-NLS-2$ //$NON-NLS-1$ //$NON-NLS-0$
+				trigger: "none" //$NON-NLS-0$
+			});
+
+			// add handlers to show/hide tooltip
+			var showTooltip = function(e){
+				input.commandTooltip.show();
+			};
+			var hideTooltip = function(e){
+				input.commandTooltip.hide(0);
+			};
+			input.addEventListener("mouseover", showTooltip, false);
+			input.addEventListener("mouseout", function(e) {
+				if (input !== document.activeElement) {
+					hideTooltip();	
+				}
+			}, false);
+			input.addEventListener("focus", showTooltip, false);
+			input.addEventListener("blur", hideTooltip, false);
 
 			this._toolbar.appendChild(input);
+			//move the sidebar's switcher node to the left
+			this._sidebar.switcherNode.classList.remove("layoutRight");
+			this._sidebar.switcherNode.classList.add("layoutLeft");
 		},
 
 		/**

diff --git a/bundles/org.eclipse.orion.client.ui/web/orion/sidebar.js b/bundles/org.eclipse.orion.client.ui/web/orion/sidebar.js
@@ -63,16 +63,20 @@ define(['orion/Deferred', 'orion/objects', 'orion/commands', 'orion/outliner', '
 			var toolbarNode = this.toolbarNode;
 
 			// Create toolbar contribution area for use by viewmodes
-			var modeContributionToolbar = this.modeContributionToolbar = document.createElement("div"); //$NON-NLS-0$
-			modeContributionToolbar.id = toolbarNode.id + "childModes"; //$NON-NLS-0$
-			toolbarNode.appendChild(modeContributionToolbar);
 			var switcherNode = this.switcherNode = document.createElement("ul"); //$NON-NLS-0$
 			switcherNode.id = toolbarNode.id + "viewmodeSwitch"; //$NON-NLS-0$
 			switcherNode.classList.add("layoutRight"); //$NON-NLS-0$
 			switcherNode.classList.add("commandList"); //$NON-NLS-0$
 			switcherNode.classList.add("pageActions"); //$NON-NLS-0$
 			toolbarNode.appendChild(switcherNode);
-
+
+			// switcher node is more essential for navigation it should therefore
+			// be inserted first to prevent it from being considered as part of the
+			// overflow before the modeContributionToolbar
+			var modeContributionToolbar = this.modeContributionToolbar = document.createElement("div"); //$NON-NLS-0$
+			modeContributionToolbar.id = toolbarNode.id + "childModes"; //$NON-NLS-0$
+			toolbarNode.appendChild(modeContributionToolbar);
+
 			var changeViewModeCommand = new mCommands.Command({
 				name: messages["View"],
 				imageClass: "core-sprite-outline", //$NON-NLS-0$