popover style for apps and user dropdown menus

2 files changed, 43 insertions, 23 deletions

diff --git a/core/css/header.css b/core/css/header.css
index c2d485de323..f0f8b3a97fe 100644
--- a/core/css/header.css
+++ b/core/css/header.css
@@ -139,19 +139,39 @@
 
 #navigation {
 	position: fixed;
-	top: 45px;
+	top: 55px;
+	left: 10px;
 	width: 265px;
 	max-height: 85%;
 	margin-top: 0;
 	padding-bottom: 10px;
-	background-color: rgba(36, 40, 47, .97);
-	border-bottom-right-radius: 7px;
-	box-shadow: 0 0 7px rgba(29,45,68,.97);
+	background-color: rgba(0, 0, 0, .97);
+	/*box-shadow: 0 0 7px rgba(30, 30, 30, .97);*/
+	border-radius: 5px;
 	display: none;
-	overflow-y: auto;
-	overflow-x: hidden;
+	/*overflow-y: auto;
+	overflow-x: hidden;*/
 	z-index: 2000;
 }
+/* arrow look */
+#navigation:after, #expanddiv:after {
+	bottom: 100%;
+	left: 47%;
+	border: solid transparent;
+	content: " ";
+	height: 0;
+	width: 0;
+	position: absolute;
+	pointer-events: none;
+	border-color: rgba(0, 0, 0, 0);
+	border-bottom-color: rgba(0, 0, 0, .97);
+	border-width: 10px;
+	margin-left: -10px;
+}
+#expanddiv:after {
+	left: 75%;
+}
+
 #navigation, #navigation * {
 	-moz-box-sizing:border-box;
 	box-sizing:border-box;
@@ -182,15 +202,15 @@
 	/* icon opacity and hover effect */
 	#navigation a img,
 	#navigation a span {
-		/* 50% opacity when inactive */
-		-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
-		opacity: .5;
+		-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
+		opacity: .7;
 	}
-	#navigation a:hover img, #navigation a:focus img,
-	#navigation a:hover span, #navigation a:focus span,
+	#navigation a:hover img,
+	#navigation a:focus img,
+	#navigation a:hover span,
+	#navigation a:focus span,
 	#navigation a.active img,
 	#navigation a.active span {
-		 /* full opacity for the active app or when hovered/focused */
 		-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
 		opacity: 1;
 	}
@@ -289,13 +309,13 @@
 }
 #expanddiv {
 	position: absolute;
-	right: 0;
-	top: 45px;
+	right: 10px;
+	top: 55px;
 	z-index: 2000;
 	display: none;
-	background-color: #383c43;
-	border-bottom-left-radius: 7px;
-	box-shadow: 0 0 7px rgb(29,45,68);
+	background-color: rgba(0, 0, 0, .97);
+	/*box-shadow: 0 0 7px rgba(30, 30, 30, .97);*/
+	border-radius: 5px;
 	-moz-box-sizing: border-box; box-sizing: border-box;
 }
 	#expanddiv a {
diff --git a/core/js/js.js b/core/js/js.js
index 00adcc514bc..378af83d090 100644
--- a/core/js/js.js
+++ b/core/js/js.js
@@ -477,7 +477,7 @@ var OC={
 		$menuEl.addClass('menu');
 		$toggle.on('click.menu', function(event) {
 			if ($menuEl.is(OC._currentMenu)) {
-				$menuEl.slideUp(OC.menuSpeed);
+				$menuEl.hide();
 				OC._currentMenu = null;
 				OC._currentMenuToggle = null;
 				return false;
@@ -487,7 +487,7 @@ var OC={
 				// close it
 				OC._currentMenu.hide();
 			}
-			$menuEl.slideToggle(OC.menuSpeed);
+			$menuEl.toggle();
 			OC._currentMenu = $menuEl;
 			OC._currentMenuToggle = $toggle;
 			return false;
@@ -500,7 +500,7 @@ var OC={
 	unregisterMenu: function($toggle, $menuEl) {
 		// close menu if opened
 		if ($menuEl.is(OC._currentMenu)) {
-			$menuEl.slideUp(OC.menuSpeed);
+			$menuEl.hide();
 			OC._currentMenu = null;
 			OC._currentMenuToggle = null;
 		}
@@ -1128,7 +1128,7 @@ function initCore() {
 		}
 	});
 	$('#settings #expand').click(function(event) {
-		$('#settings #expanddiv').slideToggle(OC.menuSpeed);
+		$('#settings #expanddiv').toggle();
 		event.stopPropagation();
 	});
 	$('#settings #expanddiv').click(function(event){
@@ -1136,7 +1136,7 @@ function initCore() {
 	});
 	//hide the user menu when clicking outside it
 	$(document).click(function(){
-		$('#settings #expanddiv').slideUp(OC.menuSpeed);
+		$('#settings #expanddiv').hide();
 	});
 
 	// all the tipsy stuff needs to be here (in reverse order) to work
@@ -1159,7 +1159,7 @@ function initCore() {
 			return false;
 		}
 		if (OC._currentMenu) {
-			OC._currentMenu.slideUp(OC.menuSpeed);
+			OC._currentMenu.hide();
 		}
 		OC._currentMenu = null;
 		OC._currentMenuToggle = null;