Merge pull request #5550 from andreasjacobsen93/clean-settings-layout
Cleaned up personal settings page
This commit is contained in:
Morris Jobke
GitHub
commit
3e091b5294
|
|
@ -2,20 +2,20 @@
|
|||
This file is licensed under the Affero General Public License version 3 or later.
|
||||
See the COPYING-README file. */
|
||||
|
||||
select#languageinput, select#timezone {
|
||||
width: 15em;
|
||||
}
|
||||
|
||||
input#openid, input#webdav {
|
||||
width: 20em;
|
||||
}
|
||||
|
||||
/* PERSONAL */
|
||||
|
||||
.clear {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.icon-federation-menu {
|
||||
width: 16px;
|
||||
float: right;
|
||||
}
|
||||
|
||||
/* icons for sidebar */
|
||||
.nav-icon-personal-settings {
|
||||
background-image: url('../img/personal.svg?v=1');
|
||||
|
|
@ -41,13 +41,8 @@ input#openid, input#webdav {
|
|||
background-image: url('../img/password.svg?v=1');
|
||||
}
|
||||
|
||||
#avatarform {
|
||||
min-width: 145px;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
#avatarform .avatardiv {
|
||||
margin-bottom: 10px;
|
||||
margin: 10px auto;
|
||||
}
|
||||
|
||||
#avatarform .warning {
|
||||
|
|
@ -69,8 +64,7 @@ input#openid, input#webdav {
|
|||
#uploadavatarbutton,
|
||||
#selectavatar,
|
||||
#removeavatar {
|
||||
width: 33px;
|
||||
height: 33px;
|
||||
padding: 21px;
|
||||
}
|
||||
|
||||
.jcrop-holder {
|
||||
|
|
@ -115,79 +109,86 @@ input#openid, input#webdav {
|
|||
float: right;
|
||||
}
|
||||
|
||||
#personal-settings-avatar-container {
|
||||
float: left;
|
||||
#personal-settings-avatar-container,
|
||||
#personal-settings-group-container {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
width: 225px;
|
||||
}
|
||||
|
||||
#personal-settings-container {
|
||||
position: relative;
|
||||
float: left;
|
||||
min-width: 280px;
|
||||
max-width: 700px;
|
||||
width: calc(100% - 200px);
|
||||
.profile-settings-container,
|
||||
.personal-settings-container {
|
||||
display: inline-block;
|
||||
max-width: 600px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
#personal-settings-container:after {
|
||||
.personal-settings-container:after {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
#personal-settings-container > div {
|
||||
.personal-settings-container > div,
|
||||
.profile-settings-container > div {
|
||||
float: left;
|
||||
height: 100px;
|
||||
min-width: 300px;
|
||||
}
|
||||
|
||||
#personal-settings-container.no-edit > div {
|
||||
height: 20px;
|
||||
min-width: 200px;
|
||||
width: 300px;
|
||||
}
|
||||
|
||||
#avatarform > h2,
|
||||
#personal-settings-container > div h2 {
|
||||
.personal-settings-container > div h2 {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#personal-settings-container > div h2 span[class^="icon-"],
|
||||
.personal-settings-container > div h2 {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.personal-settings-container > div h2 span[class^="icon-"],
|
||||
#personal-settings-avatar-container h2 span[class^="icon-"] {
|
||||
display: inline-block;
|
||||
padding: 8px;
|
||||
margin-left: -8px;
|
||||
margin-bottom: -10px;
|
||||
padding-left: 16px;
|
||||
background-size: 16px;
|
||||
background-position: left 8px;
|
||||
opacity: .3;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.personal-show-container,
|
||||
.personal-settings-setting-box input[type="text"],
|
||||
.personal-settings-setting-box input[type="email"],
|
||||
.personal-settings-setting-box input[type="tel"] {
|
||||
width: 17em;
|
||||
.personal-settings-setting-box input[type="tel"],
|
||||
select#timezone,
|
||||
select#languageinput,
|
||||
input#pass1,
|
||||
input#pass2,
|
||||
input#passwordbutton {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#personal-settings-container > div > form span[class^="icon-checkmark"] {
|
||||
position: absolute;
|
||||
left: 228px;
|
||||
top: 82px;
|
||||
.personal-settings-container > div > form span[class^="icon-checkmark"] {
|
||||
position: relative;
|
||||
left: 90%;
|
||||
top: -44px;
|
||||
pointer-events: none;
|
||||
width: 44px;
|
||||
}
|
||||
|
||||
/* verify accounts */
|
||||
#personal-settings-container .verify {
|
||||
position: absolute;
|
||||
right: 14px;
|
||||
top: 70px;
|
||||
.personal-settings-container .verify {
|
||||
position: relative;
|
||||
left: 100%;
|
||||
top: 0;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
#personal-settings-container .verify img {
|
||||
.personal-settings-container .verify img {
|
||||
padding: 12px 7px 6px;
|
||||
}
|
||||
|
||||
/* only show pointer cursor when popup will be there */
|
||||
#personal-settings-container .verify-action {
|
||||
.personal-settings-container .verify-action {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#personal-settings-container input:disabled {
|
||||
.personal-settings-container input:disabled {
|
||||
background-color: white;
|
||||
color: black;
|
||||
border: none;
|
||||
|
|
@ -213,7 +214,7 @@ input#openid, input#webdav {
|
|||
|
||||
.federationScopeMenu {
|
||||
top: 44px;
|
||||
margin: -5px 0px 0;
|
||||
margin: -5px 5px 0;
|
||||
}
|
||||
|
||||
.federationScopeMenu.bubble::after {
|
||||
|
|
@ -232,26 +233,8 @@ input#openid, input#webdav {
|
|||
opacity: .75;
|
||||
}
|
||||
|
||||
#lostpassword,
|
||||
#groups {
|
||||
display: inline-block;
|
||||
margin-bottom: 0;
|
||||
padding-bottom: 0;
|
||||
padding-right: 0;
|
||||
min-width: 60%;
|
||||
}
|
||||
|
||||
#avatarform,
|
||||
#passwordform {
|
||||
margin-bottom: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
#groups {
|
||||
overflow-wrap: break-word;
|
||||
max-width: 75%;
|
||||
display: block;;
|
||||
clear: both;
|
||||
#groups-groups {
|
||||
padding-top: 5px;
|
||||
}
|
||||
|
||||
.clientsbox img {
|
||||
|
|
@ -952,8 +935,9 @@ span.version {
|
|||
margin: 8px 0;
|
||||
}
|
||||
|
||||
form.section {
|
||||
position: relative;
|
||||
.section {
|
||||
padding: 10px 30px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.followupsection {
|
||||
|
|
|
|||
|
|
@ -180,18 +180,24 @@
|
|||
|
||||
_setFieldScopeIcon: function(field, scope) {
|
||||
var $icon = this.$('#' + field + 'form > h2 > span');
|
||||
|
||||
$icon.removeClass('icon-password');
|
||||
$icon.removeClass('icon-contacts-dark');
|
||||
$icon.removeClass('icon-link');
|
||||
$icon.addClass('hidden');
|
||||
|
||||
switch (scope) {
|
||||
case 'private':
|
||||
$icon.addClass('icon-password');
|
||||
$icon.removeClass('hidden');
|
||||
break;
|
||||
case 'contacts':
|
||||
$icon.addClass('icon-contacts-dark');
|
||||
$icon.removeClass('hidden');
|
||||
break;
|
||||
case 'public':
|
||||
$icon.addClass('icon-link');
|
||||
$icon.removeClass('hidden');
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -56,8 +56,7 @@ vendor_style('jcrop/css/jquery.Jcrop');
|
|||
<div id="personal-settings-avatar-container">
|
||||
<form id="avatarform" class="section" method="post" action="<?php p(\OC::$server->getURLGenerator()->linkToRoute('core.avatar.postAvatar')); ?>">
|
||||
<h2>
|
||||
<label><?php p($l->t('Profile picture')); ?></label>
|
||||
<span class="icon-password"/>
|
||||
<label><?php p($l->t('Profile picture')); ?></label><span class="icon-federation-menu icon-password">▾<span/>
|
||||
</h2>
|
||||
<div id="displayavatar">
|
||||
<div class="avatardiv"></div>
|
||||
|
|
@ -86,12 +85,12 @@ vendor_style('jcrop/css/jquery.Jcrop');
|
|||
</form>
|
||||
</div>
|
||||
|
||||
<div id="personal-settings-container">
|
||||
<div class="personal-settings-container">
|
||||
<div class="personal-settings-setting-box">
|
||||
<form id="displaynameform" class="section">
|
||||
<h2>
|
||||
<label for="displayname"><?php p($l->t('Full name')); ?></label>
|
||||
<span class="icon-password"/>
|
||||
<span class="icon-federation-menu icon-password">▾<span/>
|
||||
</h2>
|
||||
<input type="text" id="displayname" name="displayname"
|
||||
<?php if(!$_['displayNameChangeSupported']) { print_unescaped('class="hidden"'); } ?>
|
||||
|
|
@ -110,7 +109,7 @@ vendor_style('jcrop/css/jquery.Jcrop');
|
|||
<form id="emailform" class="section">
|
||||
<h2>
|
||||
<label for="email"><?php p($l->t('Email')); ?></label>
|
||||
<span class="icon-password"/>
|
||||
<span class="icon-federation-menu icon-password">▾<span/>
|
||||
</h2>
|
||||
<div class="verify <?php if ($_['email'] === '' || $_['emailScope'] !== 'public') p('hidden'); ?>">
|
||||
<img id="verify-email" title="<?php p($_['emailMessage']); ?>" data-status="<?php p($_['emailVerification']) ?>" src="
|
||||
|
|
@ -135,7 +134,6 @@ vendor_style('jcrop/css/jquery.Jcrop');
|
|||
<span><?php if(isset($_['email']) && !empty($_['email'])) { p($_['email']); } else { p($l->t('No email address set')); }?></span>
|
||||
<?php } ?>
|
||||
<?php if($_['displayNameChangeSupported']) { ?>
|
||||
<br />
|
||||
<em><?php p($l->t('For password reset and notifications')); ?></em>
|
||||
<?php } ?>
|
||||
<span class="icon-checkmark hidden"/>
|
||||
|
|
@ -144,41 +142,50 @@ vendor_style('jcrop/css/jquery.Jcrop');
|
|||
<?php } ?>
|
||||
</form>
|
||||
</div>
|
||||
<?php if($_['lookupServerUploadEnabled']) { ?>
|
||||
<?php if (!empty($_['phone']) || $_['lookupServerUploadEnabled']) { ?>
|
||||
<div class="personal-settings-setting-box">
|
||||
<form id="phoneform" class="section">
|
||||
<h2>
|
||||
<label for="phone"><?php p($l->t('Phone number')); ?></label>
|
||||
<span class="icon-password"/>
|
||||
<span class="icon-federation-menu icon-password">▾<span/>
|
||||
</h2>
|
||||
<input type="tel" id="phone" name="phone"
|
||||
<input type="tel" id="phone" name="phone" <?php if(!$_['lookupServerUploadEnabled']) print_unescaped('disabled="1"'); ?>
|
||||
value="<?php p($_['phone']) ?>"
|
||||
placeholder="<?php p($l->t('Your phone number')); ?>"
|
||||
autocomplete="on" autocapitalize="none" autocorrect="off" />
|
||||
<span class="icon-checkmark hidden"/>
|
||||
<?php if($_['lookupServerUploadEnabled']) { ?>
|
||||
<input type="hidden" id="phonescope" value="<?php p($_['phoneScope']) ?>">
|
||||
<?php } ?>
|
||||
</form>
|
||||
</div>
|
||||
<?php } ?>
|
||||
<?php if (!empty($_['address']) || $_['lookupServerUploadEnabled']) { ?>
|
||||
<div class="personal-settings-setting-box">
|
||||
<form id="addressform" class="section">
|
||||
<h2>
|
||||
<label for="address"><?php p($l->t('Address')); ?></label>
|
||||
<span class="icon-password"/>
|
||||
<span class="icon-federation-menu icon-password">▾<span/>
|
||||
</h2>
|
||||
<input type="text" id="address" name="address"
|
||||
<input type="text" id="address" name="address" <?php if(!$_['lookupServerUploadEnabled']) print_unescaped('disabled="1"'); ?>
|
||||
placeholder="<?php p($l->t('Your postal address')); ?>"
|
||||
value="<?php p($_['address']) ?>"
|
||||
autocomplete="on" autocapitalize="none" autocorrect="off" />
|
||||
<span class="icon-checkmark hidden"/>
|
||||
<?php if($_['lookupServerUploadEnabled']) { ?>
|
||||
<input type="hidden" id="addressscope" value="<?php p($_['addressScope']) ?>">
|
||||
<?php } ?>
|
||||
</form>
|
||||
</div>
|
||||
<?php } ?>
|
||||
<?php if (!empty($_['website']) || $_['lookupServerUploadEnabled']) { ?>
|
||||
<div class="personal-settings-setting-box">
|
||||
<form id="websiteform" class="section">
|
||||
<h2>
|
||||
<label for="website"><?php p($l->t('Website')); ?></label>
|
||||
<span class="icon-password"/>
|
||||
<span class="icon-federation-menu icon-password">▾<span/>
|
||||
</h2>
|
||||
<?php if($_['lookupServerUploadEnabled']) { ?>
|
||||
<div class="verify <?php if ($_['website'] === '' || $_['websiteScope'] !== 'public') p('hidden'); ?>">
|
||||
<img id="verify-website" title="<?php p($_['websiteMessage']); ?>" data-status="<?php p($_['websiteVerification']) ?>" src="
|
||||
<?php
|
||||
|
|
@ -203,19 +210,27 @@ vendor_style('jcrop/css/jquery.Jcrop');
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<?php } ?>
|
||||
<input type="text" name="website" id="website" value="<?php p($_['website']); ?>"
|
||||
placeholder="<?php p($l->t('Link https://…')); ?>"
|
||||
autocomplete="on" autocapitalize="none" autocorrect="off" />
|
||||
autocomplete="on" autocapitalize="none" autocorrect="off"
|
||||
<?php if(!$_['lookupServerUploadEnabled']) print_unescaped('disabled="1"'); ?>
|
||||
/>
|
||||
<span class="icon-checkmark hidden"/>
|
||||
<?php if($_['lookupServerUploadEnabled']) { ?>
|
||||
<input type="hidden" id="websitescope" value="<?php p($_['websiteScope']) ?>">
|
||||
<?php } ?>
|
||||
</form>
|
||||
</div>
|
||||
<?php } ?>
|
||||
<?php if (!empty($_['twitter']) || $_['lookupServerUploadEnabled']) { ?>
|
||||
<div class="personal-settings-setting-box">
|
||||
<form id="twitterform" class="section">
|
||||
<h2>
|
||||
<label for="twitter"><?php p($l->t('Twitter')); ?></label>
|
||||
<span class="icon-password"/>
|
||||
<span class="icon-federation-menu icon-password">▾<span/>
|
||||
</h2>
|
||||
<?php if($_['lookupServerUploadEnabled']) { ?>
|
||||
<div class="verify <?php if ($_['twitter'] === '' || $_['twitterScope'] !== 'public') p('hidden'); ?>">
|
||||
<img id="verify-twitter" title="<?php p($_['twitterMessage']); ?>" data-status="<?php p($_['twitterVerification']) ?>" src="
|
||||
<?php
|
||||
|
|
@ -240,55 +255,39 @@ vendor_style('jcrop/css/jquery.Jcrop');
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<?php } ?>
|
||||
<input type="text" name="twitter" id="twitter" value="<?php p($_['twitter']); ?>"
|
||||
placeholder="<?php p($l->t('Twitter handle @…')); ?>"
|
||||
autocomplete="on" autocapitalize="none" autocorrect="off" />
|
||||
autocomplete="on" autocapitalize="none" autocorrect="off"
|
||||
<?php if(!$_['lookupServerUploadEnabled']) print_unescaped('disabled="1"'); ?>
|
||||
/>
|
||||
<span class="icon-checkmark hidden"/>
|
||||
<?php if($_['lookupServerUploadEnabled']) { ?>
|
||||
<input type="hidden" id="twitterscope" value="<?php p($_['twitterScope']) ?>">
|
||||
<?php } ?>
|
||||
</form>
|
||||
</div>
|
||||
<?php } ?>
|
||||
<span class="msg"></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="groups" class="section">
|
||||
<div class="clear"></div>
|
||||
|
||||
<div id="personal-settings-group-container">
|
||||
<div class="personal-settings-setting-box personal-settings-group-box">
|
||||
<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 id="groups-groups">
|
||||
<strong><?php p(implode(', ', $_['groups'])); ?></strong>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<?php
|
||||
if($_['passwordChangeSupported']) {
|
||||
script('jquery-showpassword');
|
||||
?>
|
||||
<form id="passwordform" class="section">
|
||||
<h2 class="inlineblock"><?php p($l->t('Password'));?></h2>
|
||||
<div id="password-error-msg" class="msg success inlineblock" style="display: none;">Saved</div>
|
||||
<br>
|
||||
<label for="pass1" class="hidden-visually"><?php p($l->t('Current password')); ?>: </label>
|
||||
<input type="password" id="pass1" name="oldpassword"
|
||||
placeholder="<?php p($l->t('Current password'));?>"
|
||||
autocomplete="off" autocapitalize="none" autocorrect="off" />
|
||||
<div class="personal-show-container">
|
||||
<label for="pass2" class="hidden-visually"><?php p($l->t('New password'));?>: </label>
|
||||
<input type="password" id="pass2" name="newpassword"
|
||||
placeholder="<?php p($l->t('New password')); ?>"
|
||||
data-typetoggle="#personal-show"
|
||||
autocomplete="off" autocapitalize="none" autocorrect="off" />
|
||||
<input type="checkbox" id="personal-show" name="show" /><label for="personal-show" class="personal-show-label"></label>
|
||||
</div>
|
||||
<input id="passwordbutton" type="submit" value="<?php p($l->t('Change password')); ?>" />
|
||||
<br/>
|
||||
</form>
|
||||
<?php
|
||||
}
|
||||
?>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<?php if (isset($_['activelanguage'])) { ?>
|
||||
<form id="language" class="section">
|
||||
<div class="profile-settings-container">
|
||||
<div class="personal-settings-setting-box personal-settings-language-box">
|
||||
<?php if (isset($_['activelanguage'])) { ?>
|
||||
<form id="language" class="section">
|
||||
<h2>
|
||||
<label for="languageinput"><?php p($l->t('Language'));?></label>
|
||||
</h2>
|
||||
|
|
@ -312,5 +311,41 @@ if($_['passwordChangeSupported']) {
|
|||
target="_blank" rel="noreferrer">
|
||||
<em><?php p($l->t('Help translate'));?></em>
|
||||
</a>
|
||||
</form>
|
||||
<?php } ?>
|
||||
</form>
|
||||
<?php } ?>
|
||||
</div>
|
||||
<div class="personal-settings-setting-box personal-settings-password-box">
|
||||
<?php
|
||||
if($_['passwordChangeSupported']) {
|
||||
script('jquery-showpassword');
|
||||
?>
|
||||
<form id="passwordform" class="section">
|
||||
<h2 class="inlineblock"><?php p($l->t('Password'));?></h2>
|
||||
<div id="password-error-msg" class="msg success inlineblock" style="display: none;">Saved</div>
|
||||
|
||||
<label for="pass1" class="hidden-visually"><?php p($l->t('Current password')); ?>: </label>
|
||||
<input type="password" id="pass1" name="oldpassword"
|
||||
placeholder="<?php p($l->t('Current password'));?>"
|
||||
autocomplete="off" autocapitalize="none" autocorrect="off" />
|
||||
|
||||
<div class="personal-show-container">
|
||||
<label for="pass2" class="hidden-visually"><?php p($l->t('New password'));?>: </label>
|
||||
<input type="password" id="pass2" name="newpassword"
|
||||
placeholder="<?php p($l->t('New password')); ?>"
|
||||
data-typetoggle="#personal-show"
|
||||
autocomplete="off" autocapitalize="none" autocorrect="off" />
|
||||
<input type="checkbox" id="personal-show" name="show" /><label for="personal-show" class="personal-show-label"></label>
|
||||
</div>
|
||||
|
||||
<input id="passwordbutton" type="submit" value="<?php p($l->t('Change password')); ?>" />
|
||||
|
||||
</form>
|
||||
<?php
|
||||
}
|
||||
?>
|
||||
</div>
|
||||
<span class="msg"></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="clear"></div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue