Commit d3922510 authored by Thomas Müller's avatar Thomas Müller
Browse files

Merge pull request #20994 from owncloud/personal-page

improve layout of personal settings page
parents b8ecf196 e4cf5303
...@@ -707,9 +707,9 @@ code { font-family:"Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono ...@@ -707,9 +707,9 @@ code { font-family:"Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono
#quota { #quota {
cursor: default; cursor: default;
margin: 30px; margin: 30px !important;
position: relative; position: relative;
padding: 0; padding: 0 !important;
} }
#quota div { #quota div {
padding: 0; padding: 0;
......
...@@ -6,29 +6,61 @@ select#languageinput, select#timezone { width:15em; } ...@@ -6,29 +6,61 @@ select#languageinput, select#timezone { width:15em; }
input#openid, input#webdav { width:20em; } input#openid, input#webdav { width:20em; }
/* PERSONAL */ /* 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 { #avatar .avatardiv {
padding: 5px; 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 */ #displaynameform,
.clientsbox { #lostpassword,
padding-top: 30px; #groups {
margin-top: -30px; display: inline-block;
margin-bottom: 0;
padding-bottom: 0;
padding-right: 0;
min-width: 60%;
} }
.clientsbox h2 { #avatar,
font-weight: 300; #passwordform {
font-size: 20px; margin-bottom: 0;
margin: 35px 0 10px; padding-bottom: 0;
} }
.clientsbox .center { #groups {
margin-top: 10px; 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 { #displaynameerror {
display: none; display: none;
...@@ -44,8 +76,8 @@ input#identity { ...@@ -44,8 +76,8 @@ input#identity {
width: 17em; width: 17em;
} }
#avatar .warning { #showWizard {
width: 350px; display: inline-block;
} }
.msg.success { .msg.success {
......
...@@ -98,7 +98,7 @@ function updateAvatar (hidedefault) { ...@@ -98,7 +98,7 @@ function updateAvatar (hidedefault) {
$('#header .avatardiv').addClass('avatardiv-shown'); $('#header .avatardiv').addClass('avatardiv-shown');
} }
$displaydiv.css({'background-color': ''}); $displaydiv.css({'background-color': ''});
$displaydiv.avatar(OC.currentUser, 128, true); $displaydiv.avatar(OC.currentUser, 145, true);
$('#removeavatar').show(); $('#removeavatar').show();
} }
...@@ -408,7 +408,7 @@ $(document).ready(function () { ...@@ -408,7 +408,7 @@ $(document).ready(function () {
// Load the big avatar // Load the big avatar
if (oc_config.enable_avatars) { if (oc_config.enable_avatars) {
$('#avatar .avatardiv').avatar(OC.currentUser, 128); $('#avatar .avatardiv').avatar(OC.currentUser, 145);
} }
}); });
......
...@@ -163,9 +163,8 @@ $tmpl->assign('groups', $groups2); ...@@ -163,9 +163,8 @@ $tmpl->assign('groups', $groups2);
// add hardcoded forms from the template // add hardcoded forms from the template
$l = \OC::$server->getL10N('settings'); $l = \OC::$server->getL10N('settings');
$formsAndMore = []; $formsAndMore = [];
$formsAndMore[]= ['anchor' => 'avatar', 'section-name' => $l->t('Personal info')];
$formsAndMore[]= ['anchor' => 'clientsbox', 'section-name' => $l->t('Sync clients')]; $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'); $forms=OC_App::getForms('personal');
......
...@@ -22,36 +22,6 @@ ...@@ -22,36 +22,6 @@
<div id="app-content"> <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"> <div id="quota" class="section">
...@@ -65,32 +35,32 @@ ...@@ -65,32 +35,32 @@
</div> </div>
<?php
if($_['passwordChangeSupported']) { <?php if ($_['enableAvatars']): ?>
script('jquery-showpassword'); <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>
<form id="passwordform" class="section"> <div id="displayavatar">
<h2 class="inlineblock"><?php p($l->t('Password'));?></h2> <div class="avatardiv"></div>
<div class="hidden icon-checkmark" id="password-changed"></div> <div class="warning hidden"></div>
<div class="hidden" id="password-error"><?php p($l->t('Unable to change your password'));?></div> <?php if ($_['avatarChangeSupported']): ?>
<br> <label for="uploadavatar" class="inlineblock button icon-upload svg" id="uploadavatarbutton" title="<?php p($l->t('Upload new')); ?>"></label>
<label for="pass1" class="onlyInIE8"><?php echo $l->t('Current password');?>: </label> <div class="inlineblock button icon-folder svg" id="selectavatar" title="<?php p($l->t('Select from Files')); ?>"></div>
<input type="password" id="pass1" name="oldpassword" <div class="inlineblock button icon-delete svg" id="removeavatar" title="<?php p($l->t('Remove image')); ?>"></div>
placeholder="<?php echo $l->t('Current password');?>" <input type="file" name="files[]" id="uploadavatar" class="hiddenuploadfield">
autocomplete="off" autocapitalize="off" autocorrect="off" /> <p><em><?php p($l->t('png or jpg, max. 20 MB')); ?></em></p>
<label for="pass2" class="onlyInIE8"><?php echo $l->t('New password');?>: </label> <?php else: ?>
<input type="password" id="pass2" name="personal-password" <?php p($l->t('Picture provided by original account')); ?>
placeholder="<?php echo $l->t('New password');?>" <?php endif; ?>
data-typetoggle="#personal-show" </div>
autocomplete="off" autocapitalize="off" autocorrect="off" />
<input type="checkbox" id="personal-show" name="show" /><label for="personal-show" class="svg"></label> <div id="cropper" class="hidden">
<input id="passwordbutton" type="submit" value="<?php echo $l->t('Change password');?>" /> <div class="inlineblock button" id="abortcropperbutton"><?php p($l->t('Cancel')); ?></div>
<br/> <div class="inlineblock button primary" id="sendcropperbutton"><?php p($l->t('Choose as profile picture')); ?></div>
<div class="strengthify-wrapper"></div> </div>
</form> </form>
<?php <?php endif; ?>
}
?>
<?php <?php
if($_['displayNameChangeSupported']) { if($_['displayNameChangeSupported']) {
...@@ -116,6 +86,8 @@ if($_['displayNameChangeSupported']) { ...@@ -116,6 +86,8 @@ if($_['displayNameChangeSupported']) {
} }
?> ?>
<?php <?php
if($_['passwordChangeSupported']) { if($_['passwordChangeSupported']) {
?> ?>
...@@ -127,7 +99,7 @@ if($_['passwordChangeSupported']) { ...@@ -127,7 +99,7 @@ if($_['passwordChangeSupported']) {
placeholder="<?php p($l->t('Your email address'));?>" placeholder="<?php p($l->t('Your email address'));?>"
autocomplete="on" autocapitalize="off" autocorrect="off" /> autocomplete="on" autocapitalize="off" autocorrect="off" />
<span class="msg"></span><br /> <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> </form>
<?php <?php
} else { } else {
...@@ -140,6 +112,8 @@ if($_['passwordChangeSupported']) { ...@@ -140,6 +112,8 @@ if($_['passwordChangeSupported']) {
} }
?> ?>
<div id="groups" class="section"> <div id="groups" class="section">
<h2><?php p($l->t('Groups')); ?></h2> <h2><?php p($l->t('Groups')); ?></h2>
<p><?php p($l->t('You are member of the following groups:')); ?></p> <p><?php p($l->t('You are member of the following groups:')); ?></p>
...@@ -148,29 +122,36 @@ if($_['passwordChangeSupported']) { ...@@ -148,29 +122,36 @@ if($_['passwordChangeSupported']) {
</p> </p>
</div> </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> <?php
<div id="displayavatar"> if($_['passwordChangeSupported']) {
<div class="avatardiv"></div><br> script('jquery-showpassword');
<div class="warning hidden"></div> ?>
<?php if ($_['avatarChangeSupported']): ?> <form id="passwordform" class="section">
<label for="uploadavatar" class="inlineblock button" id="uploadavatarbutton"><?php p($l->t('Upload new')); ?></label> <h2 class="inlineblock"><?php p($l->t('Password'));?></h2>
<div class="inlineblock button" id="selectavatar"><?php p($l->t('Select new from Files')); ?></div> <div class="hidden icon-checkmark" id="password-changed"></div>
<div class="inlineblock button" id="removeavatar"><?php p($l->t('Remove image')); ?></div> <div class="hidden" id="password-error"><?php p($l->t('Unable to change your password'));?></div>
<input type="file" name="files[]" id="uploadavatar" class="hiddenuploadfield"> <br>
<br> <label for="pass1" class="onlyInIE8"><?php echo $l->t('Current password');?>: </label>
<?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.')); ?> <input type="password" id="pass1" name="oldpassword"
<?php else: ?> placeholder="<?php echo $l->t('Current password');?>"
<?php p($l->t('Your avatar is provided by your original account.')); ?> autocomplete="off" autocapitalize="off" autocorrect="off" />
<?php endif; ?> <label for="pass2" class="onlyInIE8"><?php echo $l->t('New password');?>: </label>
</div> <input type="password" id="pass2" name="personal-password"
<div id="cropper" class="hidden"> placeholder="<?php echo $l->t('New password');?>"
<div class="inlineblock button" id="abortcropperbutton"><?php p($l->t('Cancel')); ?></div> data-typetoggle="#personal-show"
<div class="inlineblock button primary" id="sendcropperbutton"><?php p($l->t('Choose as profile image')); ?></div> autocomplete="off" autocapitalize="off" autocorrect="off" />
</div> <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> </form>
<?php endif; ?> <?php
}
?>
<form class="section"> <form class="section">
<h2> <h2>
...@@ -200,6 +181,41 @@ if($_['passwordChangeSupported']) { ...@@ -200,6 +181,41 @@ if($_['passwordChangeSupported']) {
<?php endif; ?> <?php endif; ?>
</form> </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) { <?php foreach($_['forms'] as $form) {
if (isset($form['form'])) {?> if (isset($form['form'])) {?>
<div id="<?php isset($form['anchor']) ? p($form['anchor']) : p('');?>"><?php print_unescaped($form['form']);?></div> <div id="<?php isset($form['anchor']) ? p($form['anchor']) : p('');?>"><?php print_unescaped($form['form']);?></div>
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment