Bug 427503 - Orion New UI Improvements

- Added smooth transition for opening and closing side menu --Signed-off-by: Elijah El-Haddad <elijahe@ca.ibm.com>
elijahe · Feb 5, 2014 · f41853c · f41853c
1 parent 15672ae
commit f41853c
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 14 deletions.
diff --git a/bundles/org.eclipse.orion.client.ui/web/css/layout.css b/bundles/org.eclipse.orion.client.ui/web/css/layout.css
@@ -125,6 +125,7 @@ hard-coded numbers elsewhere.
 	/* bottom: 36px; $FooterHeight + footer border (1px) */    
     bottom: 0;
     left: 0;
+    transition: left 0.3s ease; /* if this is changed SideMenu.js->TRANSITION_DURATION_MS needs to be changed as well */
     right: 0;
 	/*margin-bottom: 29px;*/
 }
@@ -428,7 +429,7 @@ hard-coded numbers elsewhere.
     top: 36px;
 	/* bottom: 36px; $FooterHeight + footer border (1px) */   
     bottom: 0;
-    z-index: 100;
+    z-index: -1;
     -webkit-animation: slide 0.5s forwards;
     -webkit-animation-delay: 2s;
     animation: slide 0.5s forwards;
@@ -438,7 +439,6 @@ hard-coded numbers elsewhere.
     font-family: sans-serif;
 	font-size:10px;
 	text-decoration:none !important;
-	border-right: 1px solid #333;
 }
 
 .sideMenu-maximized {

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
@@ -36,8 +36,8 @@ define([
 		CLOSED_STATE: "closed",
 		DEFAULT_STATE: "open",
 		SIDE_MENU_OPEN_WIDTH: "40px",
-		SIDE_MENU_CLOSED_WIDTH: "0",
-
+		TRANSITION_DURATION_MS: 301, /* this should always be greater than the duration of the left transition of .content-fixedHeight */
+		
 		addMenuItem: function( imageClassName, categoryId /*, link*/ ){
 			var anchor = this.anchor;
 
@@ -69,25 +69,24 @@ define([
 			if( parent ){
 
 				if( sideMenuNavigation === this.CLOSED_STATE ){
-					this.setWidth( this.SIDE_MENU_CLOSED_WIDTH );
-					parent.style.display = 'none';
+					this.setPageContentLeft("0"); //$NON-NLS-0$
+					window.setTimeout(function() {
+						parent.style.display = 'none'; //$NON-NLS-0$
+					}, this.TRANSITION_DURATION_MS);
 				}
 
 				if( sideMenuNavigation === this.OPEN_STATE ){
-					this.setWidth( this.SIDE_MENU_OPEN_WIDTH );
-					parent.style.display = 'block';
+					parent.style.display = 'block'; //$NON-NLS-0$
+					parent.style.width = this.SIDE_MENU_OPEN_WIDTH;
+					this.setPageContentLeft(this.SIDE_MENU_OPEN_WIDTH);
 				}
 
 			}
 		},
-		setWidth: function( width ){
+		setPageContentLeft: function( left ){
 			var pageContent = lib.node( "pageContent" );
 			if (pageContent) {
-				pageContent.style.left = width;
-			}
-			var sideToolBar = lib.node( "sideMenu" );
-			if( sideToolBar ){
-				sideToolBar.style.width = width;
+				pageContent.style.left = left;
 			}
 		},
 		toggleSideMenu: function(){