Bug 427503 - Orion New UI Improvements

- Always highlight active navigation menu item - Modified styling of navigation menu items to make them look like subtle buttons which are depressed when active --Signed-off-by: Elijah El-Haddad <elijahe@ca.ibm.com>
elijahe · Feb 7, 2014 · 31dc51f · 31dc51f
1 parent 56bef21
commit 31dc51f
Show file tree

Hide file tree

Showing 5 changed files with 52 additions and 20 deletions.
diff --git a/bundles/org.eclipse.orion.client.git/web/git/plugins/gitPlugin.js b/bundles/org.eclipse.orion.client.git/web/git/plugins/gitPlugin.js
@@ -34,7 +34,8 @@ function(PluginProvider, xhr, mServiceregistry, mGitClient, mSshTools, i18nUtil,
 		nameKey: "Git",
 		nls: "git/nls/gitmessages",
 		imageClass: "core-sprite-repository",
-		order: 20
+		order: 20,
+		uriTemplate: "{+OrionHome}/git/"
 	});
 
 	provider.registerService("orion.page.link", {}, {

diff --git a/bundles/org.eclipse.orion.client.ui/web/css/layout.css b/bundles/org.eclipse.orion.client.ui/web/css/layout.css
@@ -426,7 +426,7 @@ hard-coded numbers elsewhere.
 
 .sideMenu{
     width: 0;
-    background: #373737;
+    background: #4a4a4a;
 	float: left;
     position: absolute;
     top: 36px;
@@ -455,14 +455,16 @@ hard-coded numbers elsewhere.
 }
 
 .sideMenuList{
-	padding:12px;
+	margin: 0;
+	padding: 0;
 	display:inline-block !important;
 }
 
 .sideMenuItem{
+	border-bottom: 1px solid #444;
+	border-top: 1px solid transparent;
 	list-style-type: none;
-	padding: 0;
-	padding-bottom:15px;
+	padding: 12px 12px 15px 12px;
 	font-size:16px !important;
 }
 
@@ -473,14 +475,24 @@ hard-coded numbers elsewhere.
 
 /* icon links */
 .sideMenuItem>a {
-	color: #ddd !important;
+	color: #bbb !important;
 	text-decoration:none !important;
 }
 .sideMenuItem>a:hover{
 	text-decoration:none;
 	color:white !important;
 }
 
+.sideMenuItemActive {
+	background: radial-gradient(circle 20px, #3a3a3a, #333);
+	border-top: 1px solid #555;
+	border-bottom: 1px solid #666;
+}
+
+.sideMenuItemActive > a {
+	color: white !important;
+}
+
 /* sub menus */
 .sideMenuSubMenu{
 	display: none;
@@ -496,8 +508,7 @@ hard-coded numbers elsewhere.
 	width: 100%;
 	white-space: nowrap;
 	font-size: 12px;
-    background: lightgrey;
-	padding: 10px;
+    background: white;
 	border-right:1px solid #bbb;
 }
 
@@ -512,7 +523,7 @@ hard-coded numbers elsewhere.
 	z-index: 200;
 	border-top: 7px solid transparent;
 	border-bottom: 7px solid transparent;
-	border-right: 7px solid lightgrey;
+	border-right: 7px solid white;
 }
 
 .sideMenuSubMenuItem:first-child{
@@ -529,18 +540,19 @@ hard-coded numbers elsewhere.
 	display: inline-block;
 	color: #333;
 	width: 100%;
+	padding: 10px;
 }
 
 /* 1) Set up special hover colors for submenu items */
 .sideMenuSubMenuItem:hover {
 	background-color: #373737;
 }
 .sideMenuSubMenuItem:hover a {
-	color: #ddd;
+	color: white;
 }
 /* 2) Disable hover colors when submenu has only 1 item */
 .sideMenuSubMenuItem:only-child:hover {
-	background-color: lightgrey;
+	background-color: white;
 }
 .sideMenuSubMenuItem:only-child:hover a {
 	color: #333;

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
@@ -14,8 +14,10 @@
 define([
 	'orion/commands',
 	'orion/objects',
-	'orion/webui/littlelib'
-], function(mCommands, objects, lib) {
+	'orion/webui/littlelib',
+	'orion/PageLinks',
+	'orion/URITemplate'
+], function(mCommands, objects, lib, PageLinks, URITemplate) {
 
 	function SideMenu(parentNode){
 		this.parentNode = lib.node(parentNode);
@@ -143,8 +145,9 @@ define([
 			return state;
 		},
 		createListItem: function(imageClassName, categoryId) {
-			var listItem = document.createElement( 'li' );
-			listItem.className = imageClassName + " sideMenuItem active";
+			var listItem = document.createElement( 'li' ); //$NON-NLS-0$
+			listItem.className = imageClassName;
+			listItem.classList.add("sideMenuItem"); //$NON-NLS-0$
 			listItem.categoryId = categoryId;
 			return listItem;
 		},
@@ -225,12 +228,24 @@ define([
 		},
 		_renderCategories: function() {
 			var categories = this.categories, _self = this;
+			var currentLocation = window.location.href;
+			var orionHome = PageLinks.getOrionHome();
+			var locationObject = {OrionHome: orionHome};
 			this.clearMenuItems();
 			categories.getCategoryIDs().map(function(catId) {
 				return categories.getCategory(catId);
 			}).sort(compareCategories).forEach(function(cat) {
 				if (_self._getLinksBin(cat.id).length > 0) { // do not render empty categories
 					_self.addMenuItem(cat.imageClass, cat.id);
+
+					if (cat.uriTemplate) {
+						var uriTemplate = new URITemplate(cat.uriTemplate);
+						var expandedHref = uriTemplate.expand(locationObject);
+						if (0 === currentLocation.indexOf(expandedHref)) {
+							_self.menuitems[cat.id].classList.add("sideMenuItemActive"); //$NON-NLS-0$
+							_self._currentActiveCategory = cat;
+						}	
+					}
 				}
 			});
 		},
@@ -257,7 +272,7 @@ define([
 				var category = _self.categories.getCategory(catId);
 				var link = document.createElement("a");
 				link.href = bin[0].href;
-				link.className = category.imageClass + " active";
+				link.className = category.imageClass;
 				menuitem.classList.remove(category.imageClass);
 				menuitem.appendChild(link);
 

diff --git a/bundles/org.eclipse.orion.client.ui/web/plugins/pageLinksPlugin.js b/bundles/org.eclipse.orion.client.ui/web/plugins/pageLinksPlugin.js
@@ -32,21 +32,24 @@ define([
 		nameKey: "Edit",
 		nls: "orion/nls/messages",
 		imageClass: "core-sprite-edit",
-		order: 10
+		order: 10,
+		uriTemplate: "{+OrionHome}/edit/"
 	});
 	provider.registerService("orion.page.link.category", null, {
 		id: "search",
 		nameKey: "Search",
 		nls: "orion/nls/messages",
 		imageClass: "core-sprite-search",
-		order: 30
+		order: 30,
+		uriTemplate: "{+OrionHome}/search/"
 	});
 	provider.registerService("orion.page.link.category", null, {
 		id: "shell",
 		nameKey: "Shell",
 		nls: "orion/nls/messages",
 		imageClass: "core-sprite-shell",
-		order: 40
+		order: 40,
+		uriTemplate: "{+OrionHome}/shell/"
 	});
 
 	// Primary navigation links

diff --git a/bundles/org.eclipse.orion.client.ui/web/plugins/site/sitePlugin.js b/bundles/org.eclipse.orion.client.ui/web/plugins/site/sitePlugin.js
@@ -64,7 +64,8 @@ define([
 		nameKey: "Sites",
 		nls: "orion/nls/messages",
 		imageClass: "core-sprite-sites",
-		order: 50
+		order: 50,
+		uriTemplate: "{+OrionHome}/sites/"
 	});
 
 	provider.registerService("orion.page.link", null, {