More side menu implementationorigin/UserInterface

11 files changed, 309 insertions, 20 deletions

diff --git a/bundles/org.eclipse.orion.client.git/web/git/css/git.css b/bundles/org.eclipse.orion.client.git/web/git/css/git.css
index 8821070..95bce5e 100644
--- a/bundles/org.eclipse.orion.client.git/web/git/css/git.css
+++ b/bundles/org.eclipse.orion.client.git/web/git/css/git.css
@@ -63,6 +63,7 @@
 .gitPanel {
 	min-width: 800px;
 	background:white;
+	height:100%;
 }
 
 /* sprites */
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 046523f..c61c3bf 100644
--- a/bundles/org.eclipse.orion.client.ui/web/css/ide.css
+++ b/bundles/org.eclipse.orion.client.ui/web/css/ide.css
@@ -63,7 +63,7 @@ button::-moz-focus-inner {
 .navlinkonpage, .nav_fakelink {
 	text-decoration: none;
 	padding: 2px;
-	color: #333333;
+	color: #555;
 }
 
 .navlinkonpage:active {
@@ -100,12 +100,12 @@ button::-moz-focus-inner {
 
 .pageActions {
 	min-height: 28px;
-	margin-top: 4px;
+	margin-top: 8px;
 }
 
 /* 4px margin used by toolbar, plus 4px of border/padding */
 .status {
-	padding-top: 8px;
+	padding-top: 10px;
 	color:#555;
 	vertical-align: baseline;
 }
@@ -931,12 +931,12 @@ input {
 }
 
 .projectNavColumn a{
-	color: #444;
+	color: #555;
     font-weight: bold;
 }
 
 .projectPrimaryNavColumn a{
-	color: #444;
+	color: #555;
     font-weight: bold;
 }
 
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 b3c9f80..af95307 100644
--- a/bundles/org.eclipse.orion.client.ui/web/css/images.css
+++ b/bundles/org.eclipse.orion.client.ui/web/css/images.css
@@ -151,6 +151,7 @@
 
 .core-sprite-wrench{
 	font-size: 16px;
+	line-height:16px;
 	vertical-align:middle;
 	color: #555555;
 	font-family: 'Orion Icon Font';
diff --git a/bundles/org.eclipse.orion.client.ui/web/css/layout.css b/bundles/org.eclipse.orion.client.ui/web/css/layout.css
index b333168..7dcd4a6 100644
--- a/bundles/org.eclipse.orion.client.ui/web/css/layout.css
+++ b/bundles/org.eclipse.orion.client.ui/web/css/layout.css
@@ -313,7 +313,7 @@ hard-coded numbers elsewhere.
 	left: 33%;  /* override this value if you want a different proportion of the two split panes */

 	height: 100%;

 	z-index: 50;

-	width: 4px;

+	width: 5px;

 	margin-right: 3px;

 	cursor: e-resize;

 	overflow: hidden;

@@ -335,9 +335,11 @@ hard-coded numbers elsewhere.
 .splitThumbLayout {

 	position: relative;

 	left: 0;

-	height: 2em;

+	height: 3em;

 	top: 49%;

 	cursor: pointer;

+	border-top-left-radius: 5px;

+	border-bottom-left-radius: 5px;	

 }

 

 .splitVerticalThumbLayout {

@@ -395,3 +397,55 @@ hard-coded numbers elsewhere.
 	margin-left: 4px !important;

 	margin-right: 4px !important;

 }

+

+.sideMenu{

+    height: calc( 100% - 36px );

+    width: 0;

+    background: #2f313a;

+    float: left;

+    position: absolute;

+    top: 36px;

+    -webkit-animation: slide 0.5s forwards;

+    -webkit-animation-delay: 2s;

+    animation: slide 0.5s forwards;

+    animation-delay: 2s;

+}

+

+.sideMenuList{

+	padding:15px;

+}

+

+.sideMenuItem{

+	list-style-type: none;

+	padding: 0;

+	padding-bottom:15px;

+}

+

+.sideMenuItem.hover{

+	text-decoration:none;

+}

+

+.active{

+	color:whitesmoke !important;

+	font-size:20px !important;

+	text-decoration:none !important;

+}

+

+.inactive{

+	color:#999 !important;

+	font-size:20px !important;

+	text-decoration:none !important;

+}

+

+@-webkit-keyframes slide {

+    100% { left: 0; }

+}

+

+@keyframes slide {

+    100% { left: 0; }

+}

+

+.mainContent{

+	position:absolute;

+	left:50px;

+}

diff --git a/bundles/org.eclipse.orion.client.ui/web/css/theme.css b/bundles/org.eclipse.orion.client.ui/web/css/theme.css
index 54ecc16..d8e56b3 100644
--- a/bundles/org.eclipse.orion.client.ui/web/css/theme.css
+++ b/bundles/org.eclipse.orion.client.ui/web/css/theme.css
@@ -14,7 +14,6 @@
 	background-color: rgb(51, 51, 51);

 	height: 16px;

 	padding: 10px 3px 6px 2px;

-	display: -webkit-box;

 	display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */

 	display: -ms-flexbox;     /* TWEENER - IE 10 */

 	display: -webkit-flex;     /* NEW - Chrome */

@@ -85,7 +84,7 @@ a:hover {
 /* Row selection */

 

 .checkedRow {

-	background-color: #ffeecc !important; /* was e3e3e3 */

+	background-color: lightblue !important; /* was e3e3e3 */

 }

 

 .navbar-item-selected {

@@ -141,17 +140,19 @@ a.currentLocation:hover {
 .auxpane {

 	border: 0;

 	background: #eeeeee;

+	padding-left: 10px;

 }

 

 .mainpane {

 	border: 0;

 	background: #eee !important;

-	padding-right:10px;

+	padding-right:15px;

 }

 

 .mainToolbar {

  	background: #eeeeee;

 	/* border-bottom: 1px solid #ebebeb; */

+	/* padding-left:50px; */

 }

 

 /* Filesystem switcher toolbar */

@@ -176,7 +177,7 @@ a.currentLocation:hover {
 	-webkit-user-select: none;

 	-ms-user-select: none;

 	user-select: none;

-	color:#444;

+	color:#555;

 }

 

 .filesystemSwitcher {

@@ -316,7 +317,7 @@ a.currentLocation:hover {
 }

 

 .splitThumb {

-	background: #EEEEEE;

+	background: #ccc;

 }

 

 /* dropdowns */

diff --git a/bundles/org.eclipse.orion.client.ui/web/edit/edit.html b/bundles/org.eclipse.orion.client.ui/web/edit/edit.html
index d6db808..fed8f23 100644
--- a/bundles/org.eclipse.orion.client.ui/web/edit/edit.html
+++ b/bundles/org.eclipse.orion.client.ui/web/edit/edit.html
@@ -26,7 +26,7 @@
 		<div class="content-fixedHeight">
 			<div id="pageToolbar" class="mainToolbar toolComposite toolbarLayout"></div>
 			<div id="innerPanels" style="position:absolute;width:100%;top:32px;bottom:0;">
-				<div class="auxpane sidePanelLayout hasSplit">
+				<div id="auxpane" class="auxpane sidePanelLayout hasSplit">
 					<div class="fixedToolbarHolder">
 						<div id="sidebarToolbar" class="sidebarToolbar mainToolbar toolComposite toolbarLayout"></div>
 						<div id="sidebar" class="dropdownTrigger toolbarTarget"></div>
@@ -40,6 +40,10 @@
 				</div>
 			</div>
 		</div>
+		<div id="sideMenu" class="sideMenu">
+			<ul id="sideMenuAnchor" class="sideMenuList">
+			</ul>
+		</div>
 		<div class="footer-fixed-bottom footer" id="footer">
 		</div>
 		<div id="contentassist" class="contentassist" role="listbox" tabindex="-1"></div>
diff --git a/bundles/org.eclipse.orion.client.ui/web/edit/setup.js b/bundles/org.eclipse.orion.client.ui/web/edit/setup.js
index 41610f7..00d5bb7 100644
--- a/bundles/org.eclipse.orion.client.ui/web/edit/setup.js
+++ b/bundles/org.eclipse.orion.client.ui/web/edit/setup.js
@@ -45,14 +45,15 @@ define([
 	'orion/PageUtil',
 	'orion/objects',
 	'orion/webui/littlelib',
-	'orion/projectClient'
+	'orion/projectClient',
+	'orion/webui/SideMenu'
 ], function(
 	messages, Sidebar, mInputManager, mGlobalCommands,
 	mTextModel, mUndoStack,
 	mFolderView, mEditorView, mPluginEditorView , mMarkdownView,
 	mCommandRegistry, mContentTypes, mFileClient, mFileCommands, mSelection, mStatus, mProgress, mOperationsClient, mOutliner, mDialogs, mExtensionCommands, mSearchClient,
 	mProblems, mBlameAnnotation,
-	Deferred, EventTarget, URITemplate, i18nUtil, PageUtil, objects, lib, mProjectClient
+	Deferred, EventTarget, URITemplate, i18nUtil, PageUtil, objects, lib, mProjectClient, SideMenu
 ) {
 
 var exports = {};
@@ -185,6 +186,15 @@ exports.setUpEditor = function(serviceRegistry, pluginRegistry, preferences, isR
 				commandRegistry.renderCommands(settingsToolbar.id, settingsToolbar, metadata, editor, "button"); //$NON-NLS-0$
 			}
 		}
+
+		var sideMenu = new SideMenu();
+		sideMenu.setSideMenu();
+		
+		sideMenu.addMenuItem( "core-sprite-edit", "http://www.google.com" );
+		sideMenu.addMenuItem( "core-sprite-deploy", "http://www.bbc.co.uk" );
+		
+		sideMenu.setActiveMenuItem( "http://www.bbc.co.uk" );
+		
 		return deferred;
 	}
 	
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 d09143a..288629b 100644
--- a/bundles/org.eclipse.orion.client.ui/web/orion/globalCommands.js
+++ b/bundles/org.eclipse.orion.client.ui/web/orion/globalCommands.js
@@ -555,6 +555,64 @@ define([
 		return globalEventTarget;
 	}
 	
+	function setSideMenu(){
+		
+		var sideMenuNavigation = localStorage.getItem('sideMenuNavigation');
+		
+		if( sideMenuNavigation ){
+			
+			if( sideMenuNavigation === "closed" ){
+				setSideMenuWidth( "0" );
+			}
+			
+			if( sideMenuNavigation === "open" ){
+				setSideMenuWidth( "50px" );
+			}
+		}
+	}
+	
+	function setSideMenuWidth( sideMenuWidth ){
+		
+		var sideToolBar = lib.node( "sideMenu" );
+		var auxpane = lib.node( "auxpane" );
+		var mainToolBar = lib.node( "pageToolbar");
+		
+		if( sideToolBar ){
+			sideToolBar.style.width = sideMenuWidth;
+		}
+		
+		if( auxpane ){
+			auxpane.style.left = sideMenuWidth;
+		}
+		
+		if( mainToolBar ){
+			mainToolBar.style.paddingLeft = sideMenuWidth;
+		}
+	}
+	
+	function toggleSideMenu(){
+		
+		var sideMenuWidth = "50px";
+		
+		var newState = "open";
+		
+		var sideMenuNavigation = localStorage.getItem('sideMenuNavigation');
+		
+		if( sideMenuNavigation ){
+			
+			/* if this is true, a person has pinned the menu sometime before */
+			
+			if( sideMenuNavigation === "open" ){
+				newState = "closed";	
+				sideMenuWidth = "0";
+			}	
+		}
+		
+		localStorage.setItem('sideMenuNavigation', newState);
+		
+		setSideMenuWidth( sideMenuWidth );
+	}
+	
 
 	/**
 	 * Generates the banner at the top of a page.
@@ -843,6 +901,8 @@ define([
 		setPageTarget: setPageTarget,
 		setDirtyIndicator: setDirtyIndicator,
 		setPageCommandExclusions: setPageCommandExclusions,
+		toggleSideMenu: toggleSideMenu,
+		setSideMenu: setSideMenu,
 		notifyAuthenticationSite: notifyAuthenticationSite
 	};
 });
\ No newline at end of file
diff --git a/bundles/org.eclipse.orion.client.ui/web/orion/webui/SideMenu.js b/bundles/org.eclipse.orion.client.ui/web/orion/webui/SideMenu.js
new file mode 100644
index 0000000..9a525b4
--- /dev/null
+++ b/bundles/org.eclipse.orion.client.ui/web/orion/webui/SideMenu.js
@@ -0,0 +1,132 @@
+/*******************************************************************************
+ * @license
+ * Copyright (c) 2014 IBM Corporation and others.
+ * All rights reserved. This program and the accompanying materials are made 
+ * available under the terms of the Eclipse Public License v1.0 
+ * (http://www.eclipse.org/legal/epl-v10.html), and the Eclipse Distribution 
+ * License v1.0 (http://www.eclipse.org/org/documents/edl-v10.html). 
+ * 
+ * Contributors: Anton McConville - IBM Corporation - initial API and implementation
+ ******************************************************************************/
+/*global window console define localStorage*/
+/*jslint browser:true*/
+
+define(['orion/webui/littlelib'], function(lib) {
+
+	function SideMenu(){
+		this.menuitems = new Array();
+	}
+	
+	SideMenu.prototype.LIST_ANCHOR_ID = "sideMenuAnchor";
+	SideMenu.prototype.LOCAL_STORAGE_NAME = "sideMenuNavigation";
+	SideMenu.prototype.OPEN_STATE = "open";
+	SideMenu.prototype.CLOSED_STATE = "closed";
+	SideMenu.prototype.SIDE_MENU_OPEN_WIDTH = "50px";
+	SideMenu.prototype.SIDE_MENU_CLOSED_WIDTH = "0";
+	
+	SideMenu.prototype.menuitems = [];
+	
+	function addMenuItem( className, link ){
+		
+		var anchor = lib.node( this.LIST_ANCHOR_ID );		
+		
+		var listItem = document.createElement( 'li' );
+		listItem.className = 'sideMenuItem';
+		
+		var pageLink = document.createElement( 'a' );
+		pageLink.href = link;
+		pageLink.className = className + ' inactive'; 
+		pageLink.iconClass = className;
+		
+		listItem.appendChild( pageLink );
+		anchor.appendChild( listItem );
+		
+		this.menuitems.push( pageLink );
+	}
+
+	function setAllMenuItemsInactive(){
+		
+		this.menuitems.forEach( function( item ){
+			item.className = item.iconClass + ' inactive';
+		} );
+	}
+	
+	function setActiveMenuItem( link ){
+		
+		this.setAllMenuItemsInactive();
+		
+		this.menuitems.forEach( function( item ){
+			if( item.href == link ){
+				item.className = item.iconClass + ' active';
+			} 
+		});
+	}
+	
+	function setSideMenu(){
+			
+		var sideMenuNavigation = localStorage.getItem(this.LOCAL_STORAGE_NAME);
+		
+		if( sideMenuNavigation ){
+			
+			if( sideMenuNavigation === this.CLOSED_STATE ){
+				this.setSideMenuWidth( this.SIDE_MENU_CLOSED_WIDTH );
+			}
+			
+			if( sideMenuNavigation === this.OPEN_STATE ){
+				this.setSideMenuWidth( this.SIDE_MENU_OPEN_WIDTH );
+			}
+		}
+	}
+		
+	function setSideMenuWidth( sideMenuWidth ){
+			
+		var sideToolBar = lib.node( "sideMenu" );
+		var auxpane = lib.node( "auxpane" );
+		var mainToolBar = lib.node( "pageToolbar");
+		
+		if( sideToolBar ){
+			sideToolBar.style.width = sideMenuWidth;
+		}
+		
+		if( auxpane ){
+			auxpane.style.left = sideMenuWidth;
+		}
+		
+		if( mainToolBar ){
+			mainToolBar.style.paddingLeft = sideMenuWidth;
+		}
+	};	
+		
+	function toggleSideMenu(){
+			
+		var sideMenuWidth = this.SIDE_MENU_OPEN_WIDTH;
+		
+		var newState = this.OPEN_STATE;
+		
+		var sideMenuNavigation = localStorage.getItem(this.LOCAL_STORAGE_NAME);
+		
+		if( sideMenuNavigation ){
+			
+			/* if this is true, a person has pinned the menu sometime before */
+			
+			if( sideMenuNavigation === this.OPEN_STATE ){
+				newState = this.CLOSED_STATE;	
+				sideMenuWidth = this.SIDE_MENU_CLOSED_WIDTH;
+			}	
+		}
+		
+		localStorage.setItem(this.LOCAL_STORAGE_NAME, newState);
+		
+		this.setSideMenuWidth( sideMenuWidth );
+	};
+			
+	SideMenu.prototype.addMenuItem = addMenuItem;	
+	SideMenu.prototype.setAllMenuItemsInactive = setAllMenuItemsInactive;
+	SideMenu.prototype.setActiveMenuItem = setActiveMenuItem;
+	SideMenu.prototype.setSideMenu = setSideMenu;		
+	SideMenu.prototype.setSideMenuWidth = setSideMenuWidth;
+	SideMenu.prototype.toggleSideMenu = toggleSideMenu;
+	
+	return SideMenu;
+});
+
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 5e2b58b..429e276 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
@@ -11,7 +11,7 @@
 /*global window console define localStorage*/

 /*jslint browser:true*/

 

-define(['orion/objects', 'orion/webui/littlelib'], function(objects, lib) {

+define(['orion/objects', 'orion/webui/littlelib', 'orion/webui/SideMenu'], function(objects, lib, SideMenu) {

 

 	/**

 	 * Creates a dropdown menu for a node and its associated trigger node (button)

@@ -45,6 +45,15 @@ define(['orion/objects', 'orion/webui/littlelib'], function(objects, lib) {
 		dropDownContainer.style.display = 'none'; //$NON-NLS-0$

 		this._parent.appendChild(dropDownContainer);

 		this._dropdownMenu = dropDownContainer;

+		this._dropdownMenu.pinSection = false;

+		this._dropdownMenu.sideMenuController = new SideMenu();

+		

+		var pinSection = document.createElement( "div" );	

+		pinSection.innerHTML = "pin";

+		pinSection.id = "hamburgerPin;"

+		pinSection.style.float="left";

+		

+		this._pin = pinSection;

 		

 		// Display trigger node and bind on click event

 		triggerNode = lib.node(triggerNode);

@@ -77,11 +86,25 @@ define(['orion/objects', 'orion/webui/littlelib'], function(objects, lib) {
 					if (this.selectionClass) {

 						this._triggerNode.classList.add(this.selectionClass);

 					}

-					this.handle = lib.addAutoDismiss( [ this._triggerNode, this._dropdownMenu], this.clearPanel.bind(this) );

+					this.handle = lib.addAutoDismiss( [ this._triggerNode, this._dropdownMenu, this._pin], this.clearPanel.bind(this) );

 					if (this.options.onShow) {

 						this.options.onShow();

 					}

 				}.bind(this));

+				

+				if( this._dropdownMenu.pinSection === false ){

+				

+					

+					var dropDownMenu = this._dropdownMenu;

+					

+					this._pin.onclick = function(){

+						dropDownMenu.sideMenuController.toggleSideMenu();

+					}

+					this._dropdownMenu.appendChild( this._pin );

+					

+					this._dropdownMenu.pinSection = true;

+				}

+				

 			}else{

 				this.clearPanel();

 			}

diff --git a/bundles/org.eclipse.orion.client.ui/web/orion/widgets/themes/container/ThemeSheetWriter.js b/bundles/org.eclipse.orion.client.ui/web/orion/widgets/themes/container/ThemeSheetWriter.js
index e673593..3857a64 100644
--- a/bundles/org.eclipse.orion.client.ui/web/orion/widgets/themes/container/ThemeSheetWriter.js
+++ b/bundles/org.eclipse.orion.client.ui/web/orion/widgets/themes/container/ThemeSheetWriter.js
@@ -60,7 +60,10 @@ define(['orion/widgets/themes/ThemeClass'],
 			topRowBanner.style.padding = '10px';

 			topRowBanner.style.paddingLeft = '6px';

 			topRowBanner.style.paddingRight = '2px';

-			topRowBanner.style.borderBottom = '1px solid #dddddd';

+			/* topRowBanner.style.borderBottom = '1px solid #dddddd'; */

+			topRowBanner.style.borderBottom = "none";

+			topRowBanner.style.boxShadow = "0 2px 2px 0 rgba(0, 0, 0, 0.1),0 1px 0 0 rgba(0, 0, 0, 0.1)";

+			topRowBanner.style.zIndex = "100";

 			

 			styles.push( topRowBanner );

 			

@@ -232,7 +235,7 @@ define(['orion/widgets/themes/ThemeClass'],
 		    commandButton.style.padding = '4px 6px';

 		    commandButton.style.borderRadius = '3px';

 		    commandButton.style.lineHeight = '12px';

-			commandButton.style.fontSize = '8pt';

+			commandButton.style.fontSize = '9pt';

 			commandButton.style.userSelect = 'none';

 			//	-webkit-touch-callout: none;

 			//	-webkit-user-select: none;

@@ -391,4 +394,4 @@ define(['orion/widgets/themes/ThemeClass'],
 		};

 

 	}

-);
\ No newline at end of file
+);