Merge pull request #20994 from owncloud/personal-page

improve layout of personal settings page

4 files changed, 147 insertions, 100 deletions

diff --git a/settings/css/settings.css b/settings/css/settings.css
index 5a1d864734b..effabd928f9 100644
--- a/settings/css/settings.css
+++ b/settings/css/settings.css
@@ -6,29 +6,61 @@ select#languageinput, select#timezone { width:15em; }
 input#openid, input#webdav { width:20em; }
 
 /* PERSONAL */
-#sslCertificate tr.expired {
-	background-color: rgba(255, 0, 0, 0.5);
+
+#avatar {
+	display: inline-block;
+	float: left;
+	width: 160px;
+	padding-right: 0;
 }
-#sslCertificate td {
-	padding: 5px;
+#avatar .avatardiv {
+	margin-bottom: 10px;
+}
+#avatar .warning {
+	width: 350px;
+}
+#uploadavatarbutton,
+#selectavatar,
+#removeavatar {
+	width: 33px;
+	height: 33px;
+}
+.jcrop-holder {
+	z-index: 500;
+}
+#avatar #cropper {
+	float: left;
+	background-color: #fff;
+	z-index: 500;
+	position: relative;
 }
 
-/* Sync clients */
-.clientsbox {
-	padding-top: 30px;
-	margin-top: -30px;
+#displaynameform,
+#lostpassword,
+#groups {
+	display: inline-block;
+	margin-bottom: 0;
+	padding-bottom: 0;
+	padding-right: 0;
+	min-width: 60%;
 }
-.clientsbox h2 {
-	font-weight: 300;
-	font-size: 20px;
-	margin: 35px 0 10px;
+#avatar,
+#passwordform {
+	margin-bottom: 0;
+	padding-bottom: 0;
 }
-.clientsbox .center {
-	margin-top: 10px;
+#groups {
+	overflow-wrap: break-word;
+	max-width: 75%;
 }
-.clientsbox a {
-	font-weight: 600;
+
+#sslCertificate tr.expired {
+	background-color: rgba(255, 0, 0, 0.5);
 }
+#sslCertificate td {
+	padding: 5px;
+}
+
 
 #displaynameerror {
 	display: none;
@@ -44,8 +76,8 @@ input#identity {
 	width: 17em;
 }
 
-#avatar .warning {
-	width: 350px;
+#showWizard {
+	display: inline-block;
 }
 
 .msg.success {
diff --git a/settings/js/personal.js b/settings/js/personal.js
index b90194b90ec..da74f28d70c 100644
--- a/settings/js/personal.js
+++ b/settings/js/personal.js
@@ -98,7 +98,7 @@ function updateAvatar (hidedefault) {
 		$('#header .avatardiv').addClass('avatardiv-shown');
 	}
 	$displaydiv.css({'background-color': ''});
-	$displaydiv.avatar(OC.currentUser, 128, true);
+	$displaydiv.avatar(OC.currentUser, 145, true);
 
 	$('#removeavatar').show();
 }
@@ -408,7 +408,7 @@ $(document).ready(function () {
 
 	// Load the big avatar
 	if (oc_config.enable_avatars) {
-		$('#avatar .avatardiv').avatar(OC.currentUser, 128);
+		$('#avatar .avatardiv').avatar(OC.currentUser, 145);
 	}
 });
 
diff --git a/settings/personal.php b/settings/personal.php
index 9a714393585..e5ceb1b4fb5 100644
--- a/settings/personal.php
+++ b/settings/personal.php
@@ -163,9 +163,8 @@ $tmpl->assign('groups', $groups2);
 // add hardcoded forms from the template
 $l = \OC::$server->getL10N('settings');
 $formsAndMore = [];
+$formsAndMore[]= ['anchor' => 'avatar', 'section-name' => $l->t('Personal info')];
 $formsAndMore[]= ['anchor' => 'clientsbox', 'section-name' => $l->t('Sync clients')];
-$formsAndMore[]= ['anchor' => 'passwordform', 'section-name' => $l->t('Personal info')];
-$formsAndMore[]= ['anchor' => 'groups', 'section-name' => $l->t('Groups')];
 
 $forms=OC_App::getForms('personal');
 
diff --git a/settings/templates/personal.php b/settings/templates/personal.php
index 96d26a933be..a7d44a69f8e 100644
--- a/settings/templates/personal.php
+++ b/settings/templates/personal.php
@@ -22,36 +22,6 @@
 
 <div id="app-content">
 
-<div id="clientsbox" class="clientsbox center">
-	<h2><?php p($l->t('Get the apps to sync your files'));?></h2>
-	<a href="<?php p($_['clients']['desktop']); ?>" target="_blank">
-		<img src="<?php print_unescaped(OCP\Util::imagePath('core', 'desktopapp.png')); ?>"
-			alt="<?php p($l->t('Desktop client'));?>" />
-	</a>
-	<a href="<?php p($_['clients']['android']); ?>" target="_blank">
-		<img src="<?php print_unescaped(OCP\Util::imagePath('core', 'googleplay.png')); ?>"
-			alt="<?php p($l->t('Android app'));?>" />
-	</a>
-	<a href="<?php p($_['clients']['ios']); ?>" target="_blank">
-		<img src="<?php print_unescaped(OCP\Util::imagePath('core', 'appstore.png')); ?>"
-			alt="<?php p($l->t('iOS app'));?>" />
-	</a>
-
-	<?php if (OC_Util::getEditionString() === ''): ?>
-	<p class="center">
-		<?php print_unescaped($l->t('If you want to support the project
-		<a href="https://owncloud.org/contribute"
-			target="_blank" rel="noreferrer">join development</a>
-		or
-		<a href="https://owncloud.org/promote"
-			target="_blank" rel="noreferrer">spread the word</a>!'));?>
-	</p>
-	<?php endif; ?>
-
-	<?php if(OC_APP::isEnabled('firstrunwizard')) {?>
-	<p class="center"><a class="button" href="#" id="showWizard"><?php p($l->t('Show First Run Wizard again'));?></a></p>
-	<?php }?>
-</div>
 
 
 <div id="quota" class="section">
@@ -65,32 +35,32 @@
 </div>
 
 
-<?php
-if($_['passwordChangeSupported']) {
-	script('jquery-showpassword');
-?>
-<form id="passwordform" class="section">
-	<h2 class="inlineblock"><?php p($l->t('Password'));?></h2>
-	<div class="hidden icon-checkmark" id="password-changed"></div>
-	<div class="hidden" id="password-error"><?php p($l->t('Unable to change your password'));?></div>
-	<br>
-	<label for="pass1" class="onlyInIE8"><?php echo $l->t('Current password');?>: </label>
-	<input type="password" id="pass1" name="oldpassword"
-		placeholder="<?php echo $l->t('Current password');?>"
-		autocomplete="off" autocapitalize="off" autocorrect="off" />
-	<label for="pass2" class="onlyInIE8"><?php echo $l->t('New password');?>: </label>
-	<input type="password" id="pass2" name="personal-password"
-		placeholder="<?php echo $l->t('New password');?>"
-		data-typetoggle="#personal-show"
-		autocomplete="off" autocapitalize="off" autocorrect="off" />
-	<input type="checkbox" id="personal-show" name="show" /><label for="personal-show" class="svg"></label>
-	<input id="passwordbutton" type="submit" value="<?php echo $l->t('Change password');?>" />
-	<br/>
-	<div class="strengthify-wrapper"></div>
+
+<?php if ($_['enableAvatars']): ?>
+<form id="avatar" class="section" method="post" action="<?php p(\OC::$server->getURLGenerator()->linkToRoute('core.avatar.postAvatar')); ?>">
+	<h2><?php p($l->t('Profile picture')); ?></h2>
+	<div id="displayavatar">
+		<div class="avatardiv"></div>
+		<div class="warning hidden"></div>
+		<?php if ($_['avatarChangeSupported']): ?>
+		<label for="uploadavatar" class="inlineblock button icon-upload svg" id="uploadavatarbutton" title="<?php p($l->t('Upload new')); ?>"></label>
+		<div class="inlineblock button icon-folder svg" id="selectavatar" title="<?php p($l->t('Select from Files')); ?>"></div>
+		<div class="inlineblock button icon-delete svg" id="removeavatar" title="<?php p($l->t('Remove image')); ?>"></div>
+		<input type="file" name="files[]" id="uploadavatar" class="hiddenuploadfield">
+		<p><em><?php p($l->t('png or jpg, max. 20 MB')); ?></em></p>
+		<?php else: ?>
+		<?php p($l->t('Picture provided by original account')); ?>
+		<?php endif; ?>
+	</div>
+
+	<div id="cropper" class="hidden">
+		<div class="inlineblock button" id="abortcropperbutton"><?php p($l->t('Cancel')); ?></div>
+		<div class="inlineblock button primary" id="sendcropperbutton"><?php p($l->t('Choose as profile picture')); ?></div>
+	</div>
 </form>
-<?php
-}
-?>
+<?php endif; ?>
+
+
 
 <?php
 if($_['displayNameChangeSupported']) {
@@ -116,6 +86,8 @@ if($_['displayNameChangeSupported']) {
 }
 ?>
 
+
+
 <?php
 if($_['passwordChangeSupported']) {
 ?>
@@ -127,7 +99,7 @@ if($_['passwordChangeSupported']) {
 		placeholder="<?php p($l->t('Your email address'));?>"
 		autocomplete="on" autocapitalize="off" autocorrect="off" />
 	<span class="msg"></span><br />
-	<em><?php p($l->t('Fill in an email address to enable password recovery and receive notifications'));?></em>
+	<em><?php p($l->t('For password recovery and notifications'));?></em>
 </form>
 <?php
 } else {
@@ -140,6 +112,8 @@ if($_['passwordChangeSupported']) {
 }
 ?>
 
+
+
 <div id="groups" class="section">
 	<h2><?php p($l->t('Groups')); ?></h2>
 	<p><?php p($l->t('You are member of the following groups:')); ?></p>
@@ -148,29 +122,36 @@ if($_['passwordChangeSupported']) {
 	</p>
 </div>
 
-<?php if ($_['enableAvatars']): ?>
-<form id="avatar" class="section" method="post" action="<?php p(\OC::$server->getURLGenerator()->linkToRoute('core.avatar.postAvatar')); ?>">
-	<h2><?php p($l->t('Profile picture')); ?></h2>
-	<div id="displayavatar">
-		<div class="avatardiv"></div><br>
-		<div class="warning hidden"></div>
-		<?php if ($_['avatarChangeSupported']): ?>
-		<label for="uploadavatar" class="inlineblock button" id="uploadavatarbutton"><?php p($l->t('Upload new')); ?></label>
-		<div class="inlineblock button" id="selectavatar"><?php p($l->t('Select new from Files')); ?></div>
-		<div class="inlineblock button" id="removeavatar"><?php p($l->t('Remove image')); ?></div>
-		<input type="file" name="files[]" id="uploadavatar" class="hiddenuploadfield">
-		<br>
-		<?php p($l->t('Either png or jpg. Ideally square but you will be able to crop it. The file is not allowed to exceed the maximum size of 20 MB.')); ?>
-		<?php else: ?>
-		<?php p($l->t('Your avatar is provided by your original account.')); ?>
-		<?php endif; ?>
-	</div>
-	<div id="cropper" class="hidden">
-		<div class="inlineblock button" id="abortcropperbutton"><?php p($l->t('Cancel')); ?></div>
-		<div class="inlineblock button primary" id="sendcropperbutton"><?php p($l->t('Choose as profile image')); ?></div>
-	</div>
+
+
+<?php
+if($_['passwordChangeSupported']) {
+	script('jquery-showpassword');
+?>
+<form id="passwordform" class="section">
+	<h2 class="inlineblock"><?php p($l->t('Password'));?></h2>
+	<div class="hidden icon-checkmark" id="password-changed"></div>
+	<div class="hidden" id="password-error"><?php p($l->t('Unable to change your password'));?></div>
+	<br>
+	<label for="pass1" class="onlyInIE8"><?php echo $l->t('Current password');?>: </label>
+	<input type="password" id="pass1" name="oldpassword"
+		placeholder="<?php echo $l->t('Current password');?>"
+		autocomplete="off" autocapitalize="off" autocorrect="off" />
+	<label for="pass2" class="onlyInIE8"><?php echo $l->t('New password');?>: </label>
+	<input type="password" id="pass2" name="personal-password"
+		placeholder="<?php echo $l->t('New password');?>"
+		data-typetoggle="#personal-show"
+		autocomplete="off" autocapitalize="off" autocorrect="off" />
+	<input type="checkbox" id="personal-show" name="show" /><label for="personal-show" class="svg"></label>
+	<input id="passwordbutton" type="submit" value="<?php echo $l->t('Change password');?>" />
+	<br/>
+	<div class="strengthify-wrapper"></div>
 </form>
-<?php endif; ?>
+<?php
+}
+?>
+
+
 
 <form class="section">
 	<h2>
@@ -200,6 +181,41 @@ if($_['passwordChangeSupported']) {
 	<?php endif; ?>
 </form>
 
+
+
+<div id="clientsbox" class="section clientsbox">
+	<h2><?php p($l->t('Get the apps to sync your files'));?></h2>
+	<a href="<?php p($_['clients']['desktop']); ?>" target="_blank">
+		<img src="<?php print_unescaped(OCP\Util::imagePath('core', 'desktopapp.png')); ?>"
+			alt="<?php p($l->t('Desktop client'));?>" />
+	</a>
+	<a href="<?php p($_['clients']['android']); ?>" target="_blank">
+		<img src="<?php print_unescaped(OCP\Util::imagePath('core', 'googleplay.png')); ?>"
+			alt="<?php p($l->t('Android app'));?>" />
+	</a>
+	<a href="<?php p($_['clients']['ios']); ?>" target="_blank">
+		<img src="<?php print_unescaped(OCP\Util::imagePath('core', 'appstore.png')); ?>"
+			alt="<?php p($l->t('iOS app'));?>" />
+	</a>
+
+	<?php if (OC_Util::getEditionString() === ''): ?>
+	<p>
+		<?php print_unescaped($l->t('If you want to support the project
+		<a href="https://owncloud.org/contribute"
+			target="_blank" rel="noreferrer">join development</a>
+		or
+		<a href="https://owncloud.org/promote"
+			target="_blank" rel="noreferrer">spread the word</a>!'));?>
+	</p>
+	<?php endif; ?>
+
+	<?php if(OC_APP::isEnabled('firstrunwizard')) {?>
+	<a class="button" href="#" id="showWizard"><?php p($l->t('Show First Run Wizard again'));?></a>
+	<?php }?>
+</div>
+
+
+
 <?php foreach($_['forms'] as $form) {
 	if (isset($form['form'])) {?>
 	<div id="<?php isset($form['anchor']) ? p($form['anchor']) : p('');?>"><?php print_unescaped($form['form']);?></div>