Show app icons in the header

Signed-off-by: Julius Haertl <jus@bitgrid.net>

3 files changed, 206 insertions, 5 deletions

diff --git a/core/css/header.scss b/core/css/header.scss
index 2b73937a3c4..c67df9ba17b 100644
--- a/core/css/header.scss
+++ b/core/css/header.scss
@@ -113,6 +113,7 @@
 		padding-top: 22px;
 		padding-right: 10px;
 		flex-shrink: 0;
+		display: none !important;
 	}
 	/* show caret indicator next to logo to make clear it is tappable */
 	.icon-caret {
@@ -181,7 +182,7 @@
 	font-size: 16px;
 	font-weight: 300;
 	margin: 0;
-	margin-top: -27px;
+	margin-top: -26px;
 	padding: 7px 0 7px 5px;
 	vertical-align: middle;
 }
@@ -212,7 +213,48 @@
 	z-index: 2000;
 	&:after {
 		left: 47%;
+		bottom: 100%;
+		border: solid transparent;
+		content: ' ';
+		height: 0;
+		width: 0;
+		position: absolute;
+		pointer-events: none;
+		border-color: rgba(0, 0, 0, 0);
+		border-bottom-color: rgba(255, 255, 255, 0.97);
+		border-width: 9px;
+		margin-left: -9px;
 	}
+}
+
+/* arrow look */
+
+#expanddiv:after {
+	bottom: 100%;
+	border: solid transparent;
+	content: ' ';
+	height: 0;
+	width: 0;
+	position: absolute;
+	pointer-events: none;
+	border-color: rgba(0, 0, 0, 0);
+	border-bottom-color: rgba(255, 255, 255, 0.97);
+	border-width: 10px;
+	margin-left: -10px;
+}
+
+/* position of dropdown arrow */
+
+#navigation:after {
+	left: 214px;
+}
+
+#expanddiv:after {
+	right: 15px;
+}
+
+#navigation {
+	box-sizing: border-box;
 	* {
 		box-sizing: border-box;
 	}
@@ -405,3 +447,115 @@
 		}
 	}
 }
+
+/* do not show display name when profile picture is present */
+
+#header {
+	.avatardiv.avatardiv-shown + #expandDisplayName {
+		display: none;
+	}
+	#expand {
+		display: block;
+	}
+}
+
+#appmenu {
+	display: inline-block;
+	width: auto;
+	clear: both;
+	height: 44px;
+}
+
+#appmenu ul {
+}
+
+#appmenu li {
+	float: left;
+	display: inline-block;
+	vertical-align: top !important;
+    height: 20px;
+	padding: 12px;
+}
+
+#appmenu li a {
+	opacity: 0.6;
+	margin: 0;
+	text-align: center;
+	vertical-align: top !important;
+    position: relative;
+	height: 44px;
+}
+
+#appmenu li:hover a,
+#appmenu li a.active {
+	opacity: 1;
+}
+
+#appmenu li img,
+#appmenu .icon-more-white {
+	display: inline-block;
+	width: 20px;
+	height: 20px;
+}
+
+#appmenu li span {
+	display: none;
+	position: absolute;
+	overflow: visible;
+	left: 0;
+	background-color: #FFF;
+	border: 1px solid #000;
+	color: #000;
+}
+
+#appmenu li:hover a {
+	position: relative
+}
+
+#appmenu li:hover span {
+	display: inline-block;
+	white-space: nowrap;
+	position: absolute;
+}
+
+#appmenu li:hover span {
+	background-color: white;
+	-webkit-border-radius: 3px;
+	-moz-border-radius: 3px;
+	border-radius: 3px;
+	border-top-left-radius: 0;
+	border-top-right-radius: 0;
+	margin-top: 0;
+	border: none;
+	color: #333;
+	width: auto;
+	left: 50%;
+	top: 31px;
+	transform: translateX(-50%);
+	padding: 2px 10px;
+	-webkit-filter: drop-shadow(0 0 5px rgba(150, 150, 150, 0.75));
+	-moz-filter: drop-shadow(0 0 5px rgba(150, 150, 150, 0.75));
+	-ms-filter: drop-shadow(0 0 5px rgba(150, 150, 150, 0.75));
+	-o-filter: drop-shadow(0 0 5px rgba(150, 150, 150, 0.75));
+	filter: drop-shadow(0 0 5px rgba(150, 150, 150, 0.75));
+}
+
+#appmenu li:hover span {
+	display: block;
+}
+
+#appmenu li:hover a:before,
+#appmenu li a.active:before {
+    content: " ";
+    border: solid transparent;
+    height: 0;
+    width: 0;
+    position: absolute;
+    pointer-events: none;
+    border-bottom-color: white;
+    border-width: 8px;
+    transform: translateX(-50%);
+    left: 50%;
+	top: 17px;
+    z-index: 100;
+}
diff --git a/core/js/js.js b/core/js/js.js
index 6fd66c9c9bb..e1e0feda2b1 100644
--- a/core/js/js.js
+++ b/core/js/js.js
@@ -1370,7 +1370,7 @@ function initCore() {
 	 */
 	function setupMainMenu() {
 		// toggle the navigation
-		var $toggle = $('#header .header-appname-container');
+		var $toggle = $('#more-apps');
 		var $navigation = $('#navigation');
 
 		// init the menu
@@ -1439,7 +1439,7 @@ function initCore() {
 	// 2 is the additional offset between the triangles
 	if($('#navigation').length) {
 		$('#header #nextcloud + .menutoggle').one('click', function(){
-			var caretPosition = $('.header-appname + .icon-caret').offset().left - 2;
+			var caretPosition = $('#more-apps').offset().left - 2;
 			if(caretPosition > 255) {
 				// if the app name is longer than the menu, just put the triangle in the middle
 				return;
diff --git a/core/templates/layout.user.php b/core/templates/layout.user.php
index e9a9b042e07..84e3690c91e 100644
--- a/core/templates/layout.user.php
+++ b/core/templates/layout.user.php
@@ -58,9 +58,54 @@
 					</h1>
 					<div class="icon-caret"></div>
 				</a>
+
+				<div id="appmenu">
+					<ul>
+						<?php $navigation = array_slice($_['navigation'], 0, 3); ?>
+						<?php foreach($navigation as $entry): ?>
+							<li data-id="<?php p($entry['id']); ?>">
+								<a href="<?php print_unescaped($entry['href']); ?>" tabindex="3"
+									<?php if( $entry['active'] ): ?> class="active"<?php endif; ?>>
+									<img src="<?php print_unescaped($entry['icon'] . '?v=' . $_['versionHash']); ?>"  class="app-icon" />
+									<div class="icon-loading-dark" style="display:none;"></div>
+									<span>
+								<?php p($entry['name']); ?>
+							</span>
+								</a>
+							</li>
+						<?php endforeach; ?>
+						<?php if (count($_['navigation'])>3): ?>
+							<li id="more-apps" class="menutoggle">
+								<a href="#">
+									<div class="icon-more-white"></div>
+									<span>More apps
+							</span>
+								</a>
+							</li>
+						<?php endif; ?>
+						<?php if (count($_['navigation'])<=3): ?>
+							<?php
+							/* show "More apps" link to app administration directly in app navigation, as last entry */
+							if(OC_User::isAdminUser(OC_User::getUser())):
+								?>
+								<li id="apps-management">
+									<a href="<?php print_unescaped(\OC::$server->getURLGenerator()->linkToRoute('settings.AppSettings.viewApps')); ?>" tabindex="4"
+										<?php if( $_['appsmanagement_active'] ): ?> class="active"<?php endif; ?>>
+										<img src="<?php print_unescaped(image_path('settings', 'apps.svg') . '?v=' . $_['versionHash']); ?>" />
+										</svg>
+										<div class="icon-loading-dark" style="display:none;"></div>
+										<span>
+								<?php p($l->t('Apps')); ?>
+							</span>
+									</a>
+								</li>
+							<?php endif; ?>
+						<?php endif; ?>
+					</ul>
+				</div>
+
 			</div>
 
-			<div id="logo-claim" style="display:none;"><?php p($theme->getLogoClaim()); ?></div>
 			<div id="header-right">
 				<form class="searchbox" action="#" method="post" role="search" novalidate>
 					<label for="searchbox" class="hidden-visually">
@@ -102,6 +147,7 @@
 							</a>
 						</li>
 					</ul>
+
 					</div>
 				</div>
 			</div>
@@ -110,7 +156,8 @@
 		<nav role="navigation"><div id="navigation">
 			<div id="apps">
 				<ul>
-				<?php foreach($_['navigation'] as $entry): ?>
+					<?php $navigation = array_slice($_['navigation'], 3); ?>
+					<?php foreach($navigation as $entry): ?>
 					<li data-id="<?php p($entry['id']); ?>">
 						<a href="<?php print_unescaped($entry['href']); ?>" tabindex="3"
 							<?php if( $entry['active'] ): ?> class="active"<?php endif; ?>>