Merge pull request #4074 from nextcloud/replace-name-with-icon

replace name in top right with icon for less noise

core/css/header.scss

@@ -6,8 +6,8 @@
  * @copyright Copyright (c) 2016, Erik Pellikka <erik@pellikka.org>
  * @copyright Copyright (c) 2016, jowi <sjw@gmx.ch>
  * @copyright Copyright (c) 2015, Hendrik Leppelsack <hendrik@leppelsack.de>
- * @copyright Copyright (c) 2015, Jan-Christoph Borchardt <hey@jancborchardt.net>
  * @copyright Copyright (c) 2015, Volker E <volker.e@temporaer.net>
+ * @copyright Copyright (c) 2014-2017, Jan-Christoph Borchardt <hey@jancborchardt.net>
  *
  * @license GNU AGPL version 3 or any later version
  *
@@ -248,10 +248,6 @@ nav {
 	left: 242px;
 }
 
-#expanddiv:after {
-	right: 15px;
-}
-
 #navigation {
 	box-sizing: border-box;
 	* {
@@ -372,7 +368,7 @@ nav {
 #expand {
 	display: flex;
 	align-items: center;
-	padding: 7px 30px 6px 10px;
+	padding: 7px 20px 6px 10px;
 	cursor: pointer;
 	* {
 		cursor: pointer;
@@ -386,14 +382,12 @@ nav {
 	&:focus,
 	&:active {
 		color: $color-primary-text;
-		img {
+		img,
+		#expandDisplayName {
 			-ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=100)';
 			opacity: 1;
 		}
 	}
-	.icon-caret {
-		margin-top: 0;
-	}
 
 	/* Profile picture in header */
 	.avatardiv {
@@ -409,6 +403,11 @@ nav {
 			display: none;
 		}
 	}
+
+	#expandDisplayName {
+		padding: 8px;
+		opacity: .7;
+	}
 }
 
 #expanddiv {
@@ -425,7 +424,7 @@ nav {
 	box-sizing: border-box;
 	&:after {
 		/* position of dropdown arrow */
-		right: 15px;
+		right: 13px;
 	}
 	a {
 		display: block;
@@ -449,14 +448,6 @@ nav {
 	}
 }
 
-/* do not show display name when profile picture is present */
-
-#header {
-	.avatardiv.avatardiv-shown + #expandDisplayName {
-		display: none;
-	}
-}
-
 #appmenu {
 	display: inline-block;
 	width: auto;

core/css/icons.scss

@@ -318,6 +318,14 @@ img, object, video, button, textarea, input, select {
 	background-image: url('../img/actions/settings.svg?v=1');
 }
 
+.icon-settings-dark {
+	background-image: url('../img/actions/settings-dark.svg?v=1');
+}
+
+.icon-settings-white {
+	background-image: url('../img/actions/settings-white.svg?v=1');
+}
+
 .icon-share {
 	background-image: url('../img/actions/share.svg?v=1');
 }

core/img/actions/settings-white.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" version="1"><path d="M6.938 0A.43.43 0 0 0 6.5.438v1.25a5.818 5.818 0 0 0-1.53.656l-.907-.906a.436.436 0 0 0-.625 0l-1.5 1.5a.436.436 0 0 0 0 .624l.906.907c-.285.48-.514.976-.656 1.53H.938a.43.43 0 0 0-.438.438v2.125C.5 8.81.69 9 .938 9h1.25a5.82 5.82 0 0 0 .656 1.53l-.907.908a.436.436 0 0 0 0 .625l1.5 1.5c.176.176.45.176.625 0l.907-.907c.48.285.976.514 1.53.656v1.25c0 .25.19.438.437.438h2.125a.43.43 0 0 0 .438-.438v-1.25a5.82 5.82 0 0 0 1.53-.657l.907.907c.176.175.45.175.625 0l1.5-1.5a.436.436 0 0 0 0-.625l-.906-.906A5.79 5.79 0 0 0 13.812 9h1.25a.43.43 0 0 0 .438-.438V6.437A.43.43 0 0 0 15.062 6h-1.25a5.79 5.79 0 0 0-.656-1.532l.906-.906a.436.436 0 0 0 0-.625l-1.5-1.5a.436.436 0 0 0-.625 0l-.906.906a5.816 5.816 0 0 0-1.53-.656V.437A.43.43 0 0 0 9.063 0zM8 4.157a3.344 3.344 0 0 1 0 6.686 3.344 3.344 0 0 1 0-6.686z" display="block" fill="#fff"/></svg>

core/templates/layout.user.php

@@ -160,8 +160,7 @@
 								>
 							<?php endif; ?>
 						</div>
-						<span id="expandDisplayName"><?php  p(trim($_['user_displayname']) != '' ? $_['user_displayname'] : $_['user_uid']) ?></span>
+						<div id="expandDisplayName" class="icon-settings-white"></div>
-						<div class="icon-caret"></div>
 					</div>
 					<div id="expanddiv">
 					<ul>

settings/js/federationsettingsview.js

@@ -111,21 +111,9 @@
 			$.when(savingData).done(function() {
 				//OC.msg.finishedSaving('#personal-settings-container .msg', result)
 				self._showInputChangeSuccess(field);
-				if (field === 'displayname') {
-					self._updateDisplayName(value);
-				}
 			});
 		},
 
-		_updateDisplayName: function(displayName) {
-			// update displayName on the top right expand button
-			$('#expandDisplayName').text(displayName);
-			// update avatar if avatar is available
-			if (!$('#removeavatar').hasClass('hidden')) {
-				updateAvatar();
-			}
-		},
-
 		_onScopeChanged: function(field, scope) {
 			var $dialog = $('.oc-dialog:visible');
 			if (OC.PasswordConfirmation.requiresPasswordConfirmation()) {