From 640adde3b9fb1b47db0570e830d38f9bc7fa7928 Mon Sep 17 00:00:00 2001
From: Jan-Christoph Borchardt <hey@jancborchardt.net>
Date: Fri, 4 Dec 2015 16:42:31 +0100
Subject: improve layout of personal settings page

---
 settings/templates/personal.php | 173 ++++++++++++++++++++++------------------
 1 file changed, 95 insertions(+), 78 deletions(-)

(limited to 'settings/templates')

diff --git a/settings/templates/personal.php b/settings/templates/personal.php
index 446494c934b..8afa5aa551b 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 image')); ?></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,42 @@ 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')) {?>
+	<br>
+	<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>
-- 
cgit v1.2.3


From e4cf53031b21f885e21301c17e757b3bbe93bf0a Mon Sep 17 00:00:00 2001
From: Jan-Christoph Borchardt <hey@jancborchardt.net>
Date: Fri, 11 Dec 2015 14:19:02 +0100
Subject: fix overlap and functionality of cropper

---
 settings/css/settings.css       | 17 +++++++++++++++++
 settings/js/personal.js         |  2 +-
 settings/templates/personal.php |  3 +--
 3 files changed, 19 insertions(+), 3 deletions(-)

(limited to 'settings/templates')

diff --git a/settings/css/settings.css b/settings/css/settings.css
index cf9a61431c9..effabd928f9 100644
--- a/settings/css/settings.css
+++ b/settings/css/settings.css
@@ -25,6 +25,15 @@ input#openid, input#webdav { width:20em; }
 	width: 33px;
 	height: 33px;
 }
+.jcrop-holder {
+	z-index: 500;
+}
+#avatar #cropper {
+	float: left;
+	background-color: #fff;
+	z-index: 500;
+	position: relative;
+}
 
 #displaynameform,
 #lostpassword,
@@ -40,6 +49,10 @@ input#openid, input#webdav { width:20em; }
 	margin-bottom: 0;
 	padding-bottom: 0;
 }
+#groups {
+	overflow-wrap: break-word;
+	max-width: 75%;
+}
 
 #sslCertificate tr.expired {
 	background-color: rgba(255, 0, 0, 0.5);
@@ -63,6 +76,10 @@ input#identity {
 	width: 17em;
 }
 
+#showWizard {
+	display: inline-block;
+}
+
 .msg.success {
 	color: #fff;
 	background-color: #47a447;
diff --git a/settings/js/personal.js b/settings/js/personal.js
index 4308bb4cd4d..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();
 }
diff --git a/settings/templates/personal.php b/settings/templates/personal.php
index 8afa5aa551b..2971121cda0 100644
--- a/settings/templates/personal.php
+++ b/settings/templates/personal.php
@@ -55,7 +55,7 @@
 
 	<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 class="inlineblock button primary" id="sendcropperbutton"><?php p($l->t('Choose as profile picture')); ?></div>
 	</div>
 </form>
 <?php endif; ?>
@@ -210,7 +210,6 @@ if($_['passwordChangeSupported']) {
 	<?php endif; ?>
 
 	<?php if(OC_APP::isEnabled('firstrunwizard')) {?>
-	<br>
 	<a class="button" href="#" id="showWizard"><?php p($l->t('Show First Run Wizard again'));?></a>
 	<?php }?>
 </div>
-- 
cgit v1.2.3