Fix position and template

Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>

4 files changed, 71 insertions, 61 deletions

diff --git a/settings/css/settings.scss b/settings/css/settings.scss
index a7a4e9776fb..97767ce2f22 100644
--- a/settings/css/settings.scss
+++ b/settings/css/settings.scss
@@ -106,23 +106,6 @@ input {
 	grid-template-rows: 1fr 2fr 1fr;
 }
 
-
-.icon-federation-menu {
-	padding-left: 16px;
-	background-size: 16px;
-	background-position: left 8px;
-	opacity: .3;
-	margin-top: -2px;
-	margin-left: 10px;
-	cursor: pointer;
-
-	.icon-triangle-s {
-		display: inline-block;
-		vertical-align: middle;
-		cursor: pointer;
-	}
-}
-
 .personal-show-container {
 	width: 100%;
 }
@@ -318,20 +301,37 @@ input {
 	}
 }
 
-.federationScopeMenu {
-	top: 44px;
-	&.popovermenu {
-		.menuitem {
-			// override h2 heading font size
-			font-size: 12.8px;
-			line-height: 1.6em;
-			.menuitem-text-detail {
-				opacity: .75;
-			}
-			&.active {
-				box-shadow: inset 2px 0 $color-primary;
-				.menuitem-text {
-					font-weight: 600;
+.federation-menu {
+	position: relative;
+	cursor: pointer;
+	margin-left: 10px;
+	.icon-federation-menu {
+		padding-left: 16px;
+		background-size: 16px;
+		background-position: left center;
+		opacity: .3;
+		cursor: inherit;
+		.icon-triangle-s {
+			display: inline-block;
+			vertical-align: middle;
+			cursor: inherit;
+		}
+	}
+	.federationScopeMenu {
+		top: 44px;
+		&.popovermenu {
+			.menuitem {
+				// override h2 heading font size
+				font-size: 12.8px;
+				line-height: 1.6em;
+				.menuitem-text-detail {
+					opacity: .75;
+				}
+				&.active {
+					box-shadow: inset 2px 0 $color-primary;
+					.menuitem-text {
+						font-weight: 600;
+					}
 				}
 			}
 		}
diff --git a/settings/js/federationscopemenu.js b/settings/js/federationscopemenu.js
index 4b1813f90e9..db8b8ff33f7 100644
--- a/settings/js/federationscopemenu.js
+++ b/settings/js/federationscopemenu.js
@@ -37,7 +37,7 @@
 	 */
 	var FederationScopeMenu = OC.Backbone.View.extend({
 		tagName: 'div',
-		className: 'federationScopeMenu popovermenu bubble hidden menu',
+		className: 'federationScopeMenu popovermenu bubble menu menu-center',
 		field: undefined,
 		_scopes: undefined,
 
@@ -129,10 +129,6 @@
 					break;
 			}
 
-			var $el = $(context.target);
-			var offsetIcon = $el.offset();
-			var offsetHeading = $el.closest('h2').offset();
-
 			this.render();
 			this.$el.removeClass('hidden');
 
diff --git a/settings/js/federationsettingsview.js b/settings/js/federationsettingsview.js
index b9722520f6d..d20d7bb78b6 100644
--- a/settings/js/federationsettingsview.js
+++ b/settings/js/federationsettingsview.js
@@ -62,14 +62,13 @@
 		render: function() {
 			var self = this;
 			_.each(this._inputFields, function(field) {
-				var $heading = self.$('#' + field + 'form h2');
-				var $icon = self.$('#' + field + 'form h2 > span');
+				var $icon = self.$('#' + field + 'form h2 > .federation-menu');
 				var scopeMenu = new OC.Settings.FederationScopeMenu({field: field});
 
 				self.listenTo(scopeMenu, 'select:scope', function(scope) {
 					self._onScopeChanged(field, scope);
 				});
-				$heading.append(scopeMenu.$el);
+				$icon.append(scopeMenu.$el);
 				$icon.on('click', _.bind(scopeMenu.show, scopeMenu));
 
 				// Restore initial state
@@ -190,7 +189,7 @@
 		},
 
 		_setFieldScopeIcon: function(field, scope) {
-			var $icon = this.$('#' + field + 'form > h2 > span');
+			var $icon = this.$('#' + field + 'form > h2 .icon-federation-menu');
 			
 			$icon.removeClass('icon-password');
 			$icon.removeClass('icon-contacts-dark');
diff --git a/settings/templates/settings/personal/personal.info.php b/settings/templates/settings/personal/personal.info.php
index e581e6d39e6..b40f4b6720f 100644
--- a/settings/templates/settings/personal/personal.info.php
+++ b/settings/templates/settings/personal/personal.info.php
@@ -42,9 +42,12 @@ vendor_style('jcrop/css/jquery.Jcrop');
 		<div>
 			<form id="avatarform" class="section" method="post" action="<?php p(\OC::$server->getURLGenerator()->linkToRoute('core.avatar.postAvatar')); ?>">
 				<h2>
-					<label><?php p($l->t('Profile picture')); ?></label><span class="icon-federation-menu icon-password">
-						<span class="icon-triangle-s"></span>
-					</span>
+					<label><?php p($l->t('Profile picture')); ?></label>
+					<div class="federation-menu">
+						<span class="icon-federation-menu icon-password">
+							<span class="icon-triangle-s"></span>
+						</span>
+					</div>
 				</h2>
 				<div id="displayavatar">
 					<div class="avatardiv"></div>
@@ -102,9 +105,11 @@ vendor_style('jcrop/css/jquery.Jcrop');
 			<form id="displaynameform" class="section">
 				<h2>
 					<label for="displayname"><?php p($l->t('Full name')); ?></label>
-					<span class="icon-federation-menu icon-password">
-						<span class="icon-triangle-s"></span>
-					</span>
+					<div class="federation-menu">
+						<span class="icon-federation-menu icon-password">
+							<span class="icon-triangle-s"></span>
+						</span>
+					</div>
 				</h2>
 				<input type="text" id="displayname" name="displayname"
 					<?php if(!$_['displayNameChangeSupported']) { print_unescaped('class="hidden"'); } ?>
@@ -124,9 +129,11 @@ vendor_style('jcrop/css/jquery.Jcrop');
 			<form id="emailform" class="section">
 				<h2>
 					<label for="email"><?php p($l->t('Email')); ?></label>
-					<span class="icon-federation-menu icon-password">
-						<span class="icon-triangle-s"></span>
-					</span>
+					<div class="federation-menu">
+						<span class="icon-federation-menu icon-password">
+							<span class="icon-triangle-s"></span>
+						</span>
+					</div>
 				</h2>
 				<div class="verify <?php if ($_['email'] === ''  || $_['emailScope'] !== 'public') p('hidden'); ?>">
 					<img id="verify-email" title="<?php p($_['emailMessage']); ?>" data-status="<?php p($_['emailVerification']) ?>" src="
@@ -165,9 +172,11 @@ vendor_style('jcrop/css/jquery.Jcrop');
 			<form id="phoneform" class="section">
 				<h2>
 					<label for="phone"><?php p($l->t('Phone number')); ?></label>
-					<span class="icon-federation-menu icon-password">
-						<span class="icon-triangle-s"></span>
-					</span>
+					<div class="federation-menu">
+						<span class="icon-federation-menu icon-password">
+							<span class="icon-triangle-s"></span>
+						</span>
+					</div>
 				</h2>
 				<input type="tel" id="phone" name="phone" <?php if(!$_['lookupServerUploadEnabled']) print_unescaped('disabled="1"'); ?>
 					   value="<?php p($_['phone']) ?>"
@@ -185,9 +194,11 @@ vendor_style('jcrop/css/jquery.Jcrop');
 			<form id="addressform" class="section">
 				<h2>
 					<label for="address"><?php p($l->t('Address')); ?></label>
-					<span class="icon-federation-menu icon-password">
-						<span class="icon-triangle-s"></span>
-					</span>
+					<div class="federation-menu">
+						<span class="icon-federation-menu icon-password">
+							<span class="icon-triangle-s"></span>
+						</span>
+					</div>
 				</h2>
 				<input type="text" id="address" name="address" <?php if(!$_['lookupServerUploadEnabled']) print_unescaped('disabled="1"');  ?>
 					   placeholder="<?php p($l->t('Your postal address')); ?>"
@@ -205,9 +216,11 @@ vendor_style('jcrop/css/jquery.Jcrop');
 			<form id="websiteform" class="section">
 				<h2>
 					<label for="website"><?php p($l->t('Website')); ?></label>
-					<span class="icon-federation-menu icon-password">
-						<span class="icon-triangle-s"></span>
-					</span>
+					<div class="federation-menu">
+						<span class="icon-federation-menu icon-password">
+							<span class="icon-triangle-s"></span>
+						</span>
+					</div>
 				</h2>
 				<?php if($_['lookupServerUploadEnabled']) { ?>
 				<div class="verify <?php if ($_['website'] === ''  || $_['websiteScope'] !== 'public') p('hidden'); ?>">
@@ -252,9 +265,11 @@ vendor_style('jcrop/css/jquery.Jcrop');
 			<form id="twitterform" class="section">
 				<h2>
 					<label for="twitter"><?php p($l->t('Twitter')); ?></label>
-					<span class="icon-federation-menu icon-password">
-						<span class="icon-triangle-s"></span>
-					</span>
+					<div class="federation-menu">
+						<span class="icon-federation-menu icon-password">
+							<span class="icon-triangle-s"></span>
+						</span>
+					</div>
 				</h2>
 				<?php if($_['lookupServerUploadEnabled']) { ?>
 				<div class="verify <?php if ($_['twitter'] === ''  || $_['twitterScope'] !== 'public') p('hidden'); ?>">