mbk-lab
/
nextcloud
2
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

improve layout of personal settings page

This commit is contained in:
Jan-Christoph Borchardt 2015-12-04 16:42:31 +01:00
parent 9c4ab51735
commit 640adde3b9
5 changed files with 164 additions and 133 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
core/css/styles.css
View File

@ -705,9 +705,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;

55
settings/css/settings.css
View File

@ -6,6 +6,41 @@ select#languageinput, select#timezone { width:15em; }
input#openid, input#webdav { width:20em; } input#openid, input#webdav { width:20em; }
/* PERSONAL */ /* PERSONAL */
#avatar {
display: inline-block;
float: left;
width: 160px;
padding-right: 0;
}
#avatar .avatardiv {
margin-bottom: 10px;
}
#avatar .warning {
width: 350px;
}
#uploadavatarbutton,
#selectavatar,
#removeavatar {
width: 33px;
height: 33px;
}
#displaynameform,
#lostpassword,
#groups {
display: inline-block;
margin-bottom: 0;
padding-bottom: 0;
padding-right: 0;
min-width: 60%;
}
#avatar,
#passwordform {
margin-bottom: 0;
padding-bottom: 0;
}
#sslCertificate tr.expired { #sslCertificate tr.expired {
background-color: rgba(255, 0, 0, 0.5); background-color: rgba(255, 0, 0, 0.5);
} }
@ -13,22 +48,6 @@ input#openid, input#webdav { width:20em; }
padding: 5px; padding: 5px;
} }
/* Sync clients */
.clientsbox {
padding-top: 30px;
margin-top: -30px;
}
.clientsbox h2 {
font-weight: 300;
font-size: 20px;
margin: 35px 0 10px;
}
.clientsbox .center {
margin-top: 10px;
}
.clientsbox a {
font-weight: 600;
}
#displaynameerror { #displaynameerror {
display: none; display: none;
@ -44,10 +63,6 @@ input#identity {
width: 17em; width: 17em;
} }
#avatar .warning {
width: 350px;
}
.msg.success { .msg.success {
color: #fff; color: #fff;
background-color: #47a447; background-color: #47a447;

2
settings/js/personal.js
View File

@ -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);
} }
}); });

3
settings/personal.php
View File

@ -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');

233
settings/templates/personal.php
View File

@ -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,6 +35,95 @@
</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>
<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 endif; ?>
<?php
if($_['displayNameChangeSupported']) {
?>
<form id="displaynameform" class="section">
<h2>
<label for="displayName"><?php echo $l->t('Full name');?></label>
</h2>
<input type="text" id="displayName" name="displayName"
value="<?php p($_['displayName'])?>"
autocomplete="on" autocapitalize="off" autocorrect="off" />
<span class="msg"></span>
<input type="hidden" id="oldDisplayName" name="oldDisplayName" value="<?php p($_['displayName'])?>" />
</form>
<?php
} else {
?>
<div class="section">
<h2><?php echo $l->t('Full name');?></h2>
<span><?php if(isset($_['displayName'][0])) { p($_['displayName']); } else { p($l->t('No display name set')); } ?></span>
</div>
<?php
}
?>
<?php
if($_['passwordChangeSupported']) {
?>
<form id="lostpassword" class="section">
<h2>
<label for="email"><?php p($l->t('Email'));?></label>
</h2>
<input type="email" name="email" id="email" value="<?php p($_['email']); ?>"
placeholder="<?php p($l->t('Your email address'));?>"
autocomplete="on" autocapitalize="off" autocorrect="off" />
<span class="msg"></span><br />
<em><?php p($l->t('For password recovery and notifications'));?></em>
</form>
<?php
} else {
?>
<div class="section">
<h2><?php echo $l->t('Email'); ?></h2>
<span><?php if(isset($_['email'][0])) { p($_['email']); } else { p($l->t('No email address set')); }?></span>
</div>
<?php
}
?>
<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>
<p>
<?php p(implode(', ', $_['groups'])); ?>
</p>
</div>
<?php <?php
if($_['passwordChangeSupported']) { if($_['passwordChangeSupported']) {
script('jquery-showpassword'); script('jquery-showpassword');
@ -92,85 +151,7 @@ if($_['passwordChangeSupported']) {
} }
?> ?>
<?php
if($_['displayNameChangeSupported']) {
?>
<form id="displaynameform" class="section">
<h2>
<label for="displayName"><?php echo $l->t('Full name');?></label>
</h2>
<input type="text" id="displayName" name="displayName"
value="<?php p($_['displayName'])?>"
autocomplete="on" autocapitalize="off" autocorrect="off" />
<span class="msg"></span>
<input type="hidden" id="oldDisplayName" name="oldDisplayName" value="<?php p($_['displayName'])?>" />
</form>
<?php
} else {
?>
<div class="section">
<h2><?php echo $l->t('Full name');?></h2>
<span><?php if(isset($_['displayName'][0])) { p($_['displayName']); } else { p($l->t('No display name set')); } ?></span>
</div>
<?php
}
?>
<?php
if($_['passwordChangeSupported']) {
?>
<form id="lostpassword" class="section">
<h2>
<label for="email"><?php p($l->t('Email'));?></label>
</h2>
<input type="email" name="email" id="email" value="<?php p($_['email']); ?>"
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>
</form>
<?php
} else {
?>
<div class="section">
<h2><?php echo $l->t('Email'); ?></h2>
<span><?php if(isset($_['email'][0])) { p($_['email']); } else { p($l->t('No email address set')); }?></span>
</div>
<?php
}
?>
<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>
<p>
<?php p(implode(', ', $_['groups'])); ?>
</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>
</form>
<?php endif; ?>
<form class="section"> <form class="section">
<h2> <h2>
@ -200,6 +181,42 @@ 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')) {?>
<br>
<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>