mirrors
/
nextcloud
mirror of https://github.com/nextcloud/server.git
Watch 1
Star 0
Fork 0
Code Issues 0 Releases 1008 Wiki Activity
Browse Source

Merge pull request #20994 from owncloud/personal-page 

improve layout of personal settings page
tags/v9.0beta1
Thomas Müller 8 years ago
parent
b8ecf19650 e4cf53031b
commit
d3922510d0
5 changed files with 149 additions and 102 deletions
Split View Show Diff Stats
  1. 2
    2
      core/css/styles.css
  2. 50
    18
      settings/css/settings.css
  3. 2
    2
      settings/js/personal.js
  4. 1
    2
      settings/personal.php
  5. 94
    78
      settings/templates/personal.php

+ 2
- 2
core/css/styles.css View File

@@ -707,9 +707,9 @@ code { font-family:"Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono

#quota {
cursor: default;
margin: 30px;
margin: 30px !important;
position: relative;
padding: 0;
padding: 0 !important;
}
#quota div {
padding: 0;

+ 50
- 18
settings/css/settings.css View File

@@ -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 {

+ 2
- 2
settings/js/personal.js View File

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


+ 1
- 2
settings/personal.php View File

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


+ 94
- 78
settings/templates/personal.php View File

@@ -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>

Write Preview
Loading…
Cancel
Save