aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorGabriel Luong2013-06-27 01:17:31 (EDT)
committerMark Macdonald2013-06-27 15:09:11 (EDT)
commit94d98c6fc9fa388f93bd460e63f32f8559497dec (patch)
tree4e82f6abac07cb2930c17278c88490785683119a
parentc0da54a313a86cfd9bca4d358bb3ff734804c1c4 (diff)
downloadorg.eclipse.orion.client-94d98c6fc9fa388f93bd460e63f32f8559497dec.zip
org.eclipse.orion.client-94d98c6fc9fa388f93bd460e63f32f8559497dec.tar.gz
org.eclipse.orion.client-94d98c6fc9fa388f93bd460e63f32f8559497dec.tar.bz2
Bug 411201 - Rework dropdown menu widget and integration with hamburger and wrench buttons
-rw-r--r--bundles/org.eclipse.orion.client.ui/web/css/ide.css4
-rw-r--r--bundles/org.eclipse.orion.client.ui/web/css/images.css1
-rw-r--r--bundles/org.eclipse.orion.client.ui/web/orion/banner/banner.html2
-rw-r--r--bundles/org.eclipse.orion.client.ui/web/orion/banner/toolbar.html8
-rw-r--r--bundles/org.eclipse.orion.client.ui/web/orion/globalCommands.js10
-rw-r--r--bundles/org.eclipse.orion.client.ui/web/orion/widgets/input/DropDownMenu.js130
6 files changed, 56 insertions, 99 deletions
diff --git a/bundles/org.eclipse.orion.client.ui/web/css/ide.css b/bundles/org.eclipse.orion.client.ui/web/css/ide.css
index 3a0bf69..d1e57e4 100644
--- a/bundles/org.eclipse.orion.client.ui/web/css/ide.css
+++ b/bundles/org.eclipse.orion.client.ui/web/css/ide.css
@@ -790,7 +790,7 @@ input {
/* FOR NAVIGATION DROP DOWN */
.centralNavigation {
- padding-top:2px;
+ margin-bottom:2px;
cursor:pointer;
}
@@ -810,7 +810,7 @@ input {
background:#fefefe;
border: 1px solid #CCC;
padding:10px;
- margin-top:5px;
+ margin-top:11px;
position:absolute;
z-index:100;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
diff --git a/bundles/org.eclipse.orion.client.ui/web/css/images.css b/bundles/org.eclipse.orion.client.ui/web/css/images.css
index c7345cc..870c3fc 100644
--- a/bundles/org.eclipse.orion.client.ui/web/css/images.css
+++ b/bundles/org.eclipse.orion.client.ui/web/css/images.css
@@ -9,6 +9,7 @@
background: url(../images/core_sprites.png) no-repeat top left;
vertical-align: middle;
display: inline-block;
+ border: none;
}
.imageSprite {
diff --git a/bundles/org.eclipse.orion.client.ui/web/orion/banner/banner.html b/bundles/org.eclipse.orion.client.ui/web/orion/banner/banner.html
index 9c24a3f..30d3bde 100644
--- a/bundles/org.eclipse.orion.client.ui/web/orion/banner/banner.html
+++ b/bundles/org.eclipse.orion.client.ui/web/orion/banner/banner.html
@@ -4,7 +4,7 @@
<div id="staticBanner" class="layoutBlock topRowBanner"> <!-- primaryNav -->
<a id="home" class="layoutLeft "></a>
<nav id="primaryNav" class="bannerLeftArea" role="navigation">
- <div class="centralNavigation" id="centralNavigation" tabindex="0" role="button" style="margin-top:0;"></div>
+ <button class="centralNavigation commandSprite core-sprite-hamburger" id="centralNavigation"></button>
</nav>
<div class="clear navigationBreadcrumb bannerMiddleArea" >
<div id="location" class="currentLocation"></div>
diff --git a/bundles/org.eclipse.orion.client.ui/web/orion/banner/toolbar.html b/bundles/org.eclipse.orion.client.ui/web/orion/banner/toolbar.html
index a4c010b..2e28413 100644
--- a/bundles/org.eclipse.orion.client.ui/web/orion/banner/toolbar.html
+++ b/bundles/org.eclipse.orion.client.ui/web/orion/banner/toolbar.html
@@ -1,10 +1,12 @@
<ul class="layoutLeft commandList pageActions" id="pageActions"></ul>
<ul class="layoutLeft commandList pageActions" id="selectionTools"></ul>
<ul class="layoutLeft commandList pageActions" id="navActions"></ul>
-<div class="layoutLeft" style="padding-left:7px;padding-right:7px;margin-top:2px;" id="filterBox" style="visibility:hidden;">
+<div class="layoutLeft" style="padding-left:7px;padding-right:7px;margin-top:2px;" id="filterBox" style="visibility: hidden;">
</div>
-<div class="layoutRight" style="padding-left:7px;margin-left:4px;margin-top:6px;" id="settingsTab" style="visibility:hidden;">
- <button class="layoutRight core-sprite-wrench imageSprite" id="settingsAction" aria-live="off" style="visibility:hidden;"></button>
+<div class="layoutRight" style="margin: 4px 4px 0px 7px" id="settingsTab" style="visibility: hidden;">
+ <button class="orionButton commandImage" id="settingsAction" aria-live="off" style="visibility: hidden;">
+ <span class="commandSprite core-sprite-wrench"></span>
+ </button>
</div>
<div class="layoutRight status" id="statusPane" role="status" aria-live="off"></div>
<ul class="layoutRight commandList pageActions" id="pageNavigationActions"></ul>
diff --git a/bundles/org.eclipse.orion.client.ui/web/orion/globalCommands.js b/bundles/org.eclipse.orion.client.ui/web/orion/globalCommands.js
index 71cb47e..249235e 100644
--- a/bundles/org.eclipse.orion.client.ui/web/orion/globalCommands.js
+++ b/bundles/org.eclipse.orion.client.ui/web/orion/globalCommands.js
@@ -109,10 +109,7 @@ define([
position: ["right"] //$NON-NLS-0$
});
- var navDropDown = new DropDownMenu('centralNavigation', {
- label: 'Develop',
- icon: 'commandSprite core-sprite-hamburger'
- });
+ var navDropDown = new DropDownMenu('primaryNav', 'centralNavigation');
var groupedContent = new GroupedContent();
navDropDown.addContent(groupedContent.getContentPane());
},
@@ -521,10 +518,7 @@ define([
* This function adds a settings dialog to a page. It adds it so that a settings gear will appear at the right hand side
*/
function addSettings(settings) {
- var navDropDown = new DropDownMenu('settingsTab', {
- label: 'Develop',
- icon: 'imageSprite core-sprite-wrench'
- }, false);
+ var navDropDown = new DropDownMenu('settingsTab', 'settingsAction');
navDropDown.updateContent = settings.updateContent.bind(settings);
}
diff --git a/bundles/org.eclipse.orion.client.ui/web/orion/widgets/input/DropDownMenu.js b/bundles/org.eclipse.orion.client.ui/web/orion/widgets/input/DropDownMenu.js
index 3c69fb1..ec52f65 100644
--- a/bundles/org.eclipse.orion.client.ui/web/orion/widgets/input/DropDownMenu.js
+++ b/bundles/org.eclipse.orion.client.ui/web/orion/widgets/input/DropDownMenu.js
@@ -14,102 +14,66 @@
define(['orion/objects', 'orion/webui/littlelib'], function(objects, lib) {
/**
- * @param {Object[]} param.options Array of {value:Object, label:String, selected:Boolean(optional)}
+ * Creates a dropdown menu for a node and its associated trigger node (button)
+ * @param {Object} parent The dom object or string id of the node that will contain the dropdown menu
+ * @param {Object} triggerNode The dom object or string id of the dom node that will trigger the dropdown menu appearance
*/
-
- function DropDownMenu( node, body, panel ){
-
- if( panel !== null ){
- this.CLEAR_PANEL = panel;
- }else{
- this.CLEAR_PANEL = true;
+ function DropDownMenu( parent, triggerNode ){
+ var node = lib.node(parent);
+ if (node) {
+ this._parent = node;
+ } else {
+ throw "Parent node of dropdown menu not found"; //$NON-NLS-0$
}
-
- this.OPEN = 'false';
- var nodeIdPrefix = "";
- if( node.nodeType ){
- this.node = node;
- }else{
- nodeIdPrefix = node + "_";
- var nodeById = document.getElementById( node );
-
- if( nodeById.nodeType ){
- this.node = nodeById;
- }else{
- this.node = document.createElement("span");
- }
- }
-
- this.node.innerHTML = this.templateString;
- //We need assign dynamic ids to all the children nodes loaded by the template, to support multiple drop down menus in the same page
- this.navLabelId = nodeIdPrefix + 'navigationlabel';
- document.getElementById( 'navigationlabel' ).id = this.navLabelId;
- this.arrowId = nodeIdPrefix + 'dropDownArrow';
- document.getElementById( 'dropDownArrow' ).id = this.arrowId;
- this.navDropDownId = nodeIdPrefix + 'navdropdown';
- document.getElementById( 'navdropdown' ).id = this.navDropDownId;
+ // Assign dynamic ids to the dropdown menu node to support multiple drop down menus in the same page
+ this.navDropDownId = this._parent.id + '_navdropdown'; //$NON-NLS-0$
- if( body.icon ){
- this.node.className = this.node.className + ' ' + body.icon;
- this.node.onclick = this.click.bind(this);
- }else{
+ // Create dropdown container and append to parent dom
+ var dropDownContainer = document.createElement("div"); //$NON-NLS-0$
+ dropDownContainer.classList.add("dropDownContainer"); //$NON-NLS-0$
+ dropDownContainer.id = this.navDropDownId;
+ dropDownContainer.style.display = 'none'; //$NON-NLS-0$
+ this._parent.appendChild(dropDownContainer);
+ this._dropdownMenu = dropDownContainer;
- if( body.label ){
- var navlabel = document.getElementById( this.navLabelId );
- navlabel.textContent = body.label;
- navlabel.onclick = this.click.bind(this);
- }
-
- if( body.caret ){
- var navArrow = document.getElementById( this.arrowId );
- navArrow.className = body.caret;
- }
+ // Display trigger node and bind on click event
+ var triggerNode = lib.node(triggerNode);
+ if (triggerNode) {
+ this._triggerNode = triggerNode;
+ } else {
+ throw "Trigger node of dropdown menu not found"; //$NON-NLS-0$
}
- this._dropdownNode = lib.node(this.navDropDownId);
- this._triggerNode = lib.node(this.navLabelId);
+ if (this._triggerNode.style.visibility === 'hidden') { //$NON-NLS-0$
+ this._triggerNode.style.visibility = 'visible'; //$NON-NLS-0$
+ }
+ this._triggerNode.onclick = this.click.bind(this);
}
objects.mixin(DropDownMenu.prototype, {
-
- templateString: '<div id="navigationlabel" class="navigationLabel dropdownTrigger" ></div>' +
- '<span id="dropDownArrow" class="dropDownArrow"></span>' +
- '<div class="dropDownContainer" id="navdropdown" style="display:none;"></div>',
-
click: function() {
-
- var centralNavigation = document.getElementById( this.navDropDownId );
-
- if( centralNavigation.style.display === 'none' ){
+ if( this._dropdownMenu.style.display === 'none' ){ //$NON-NLS-0$
this.updateContent ( this.getContentNode() , function () {
- centralNavigation.style.display = '';
+ this._dropdownMenu.style.display = '';
this._positionDropdown();
- this.handle = lib.addAutoDismiss( [this.node, centralNavigation], this.clearPanel.bind(this) );
+ this.handle = lib.addAutoDismiss( [ this._triggerNode, this._dropdownMenu], this.clearPanel.bind(this) );
}.bind(this));
-
}else{
-
- if( this.CLEAR_PANEL ){
- this.clearPanel();
- }
+ this.clearPanel();
}
},
clearPanel: function(){
- var centralNavigation = document.getElementById( this.navDropDownId );
- centralNavigation.style.display = 'none';
+ this._dropdownMenu.style.display = 'none'; //$NON-NLS-0$
},
+ // Add content to the dropdown container
addContent: function( content ){
-
- var centralNavigation = document.getElementById( this.navDropDownId );
-
- centralNavigation.innerHTML= content;
+ this._dropdownMenu.innerHTML = content;
},
getContentNode: function(){
- var contentNode = document.getElementById( this.navDropDownId );
- return contentNode;
+ return this._dropdownMenu;
},
updateContent: function( contentNode, callback ){
@@ -118,33 +82,29 @@ define(['orion/objects', 'orion/webui/littlelib'], function(objects, lib) {
callback();
},
- toggleLabel: function(show){
- document.getElementById( this.navLabelId ).style.display = (show ? '' : 'none');
- document.getElementById( this.arrowId ).style.display = (show ? '' : 'none');
- },
-
_positionDropdown: function() {
- this._dropdownNode.style.left = "";
- var bounds = lib.bounds(this._dropdownNode);
- var totalBounds = lib.bounds(this._boundingNode(this._triggerNode));
+ this._dropdownMenu.style.left = "";
+ var bounds = lib.bounds(this._dropdownMenu);
+ var totalBounds = lib.bounds(this._boundingNode(this._parent));
if (bounds.left + bounds.width > (totalBounds.left + totalBounds.width)) {
- this._dropdownNode.style.right = 0;
+ this._dropdownMenu.style.right = 0;
}
},
_boundingNode: function(node) {
- if (node.style.right !== "" || node.style.position === "absolute" || !node.parentNode || !node.parentNode.style) { //$NON-NLS-0$
+ if (node.style.right !== "" || node.style.position === "absolute" || !node.parentNode || !node.parentNode.style) { //$NON-NLS-1$ //$NON-NLS-0$
return node;
}
return this._boundingNode(node.parentNode);
},
destroy: function() {
- if (this.node) {
- lib.empty(this.node);
- this.node = this.select = null;
+ if (this._parent) {
+ lib.empty(this._parent);
+ this._parent = this.select = null;
}
}
});
+
return DropDownMenu;
});