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

Merge pull request #5550 from andreasjacobsen93/clean-settings-layout 

Cleaned up personal settings page
This commit is contained in:
Morris Jobke 2017-08-04 23:30:52 +02:00 committed by GitHub
parent de94eefe97 90d8070da3
commit 3e091b5294
3 changed files with 270 additions and 245 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

128
settings/css/settings.css
View File

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

6
settings/js/federationsettingsview.js
View File

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

381
settings/templates/settings/personal/personal.info.php
View File

@ -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">&#9662;<span/>
</h2>
<div id="displayavatar">
<div class="avatardiv"></div>
@ -81,17 +80,17 @@ vendor_style('jcrop/css/jquery.Jcrop');
</div>
<span class="icon-checkmark hidden"/>
<?php if($_['lookupServerUploadEnabled']) { ?>
<input type="hidden" id="avatarscope" value="<?php p($_['avatarScope']) ?>">
<input type="hidden" id="avatarscope" value="<?php p($_['avatarScope']) ?>">
<?php } ?>
</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">&#9662;<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">&#9662;<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,182 +134,218 @@ 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"/>
<?php if($_['lookupServerUploadEnabled']) { ?>
<input type="hidden" id="emailscope" value="<?php p($_['emailScope']) ?>">
<input type="hidden" id="emailscope" value="<?php p($_['emailScope']) ?>">
<?php } ?>
</form>
</div>
<?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-federation-menu icon-password">&#9662;<span/>
</h2>
<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 if($_['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"/>
</h2>
<input type="tel" id="phone" name="phone"
value="<?php p($_['phone']) ?>"
placeholder="<?php p($l->t('Your phone number')); ?>"
autocomplete="on" autocapitalize="none" autocorrect="off" />
<span class="icon-checkmark hidden"/>
<input type="hidden" id="phonescope" value="<?php p($_['phoneScope']) ?>">
</form>
</div>
<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"/>
</h2>
<input type="text" id="address" name="address"
placeholder="<?php p($l->t('Your postal address')); ?>"
value="<?php p($_['address']) ?>"
autocomplete="on" autocapitalize="none" autocorrect="off" />
<span class="icon-checkmark hidden"/>
<input type="hidden" id="addressscope" value="<?php p($_['addressScope']) ?>">
</form>
</div>
<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"/>
</h2>
<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
switch($_['websiteVerification']) {
case \OC\Accounts\AccountManager::VERIFICATION_IN_PROGRESS:
p(image_path('core', 'actions/verifying.svg'));
break;
case \OC\Accounts\AccountManager::VERIFIED:
p(image_path('core', 'actions/verified.svg'));
break;
default:
p(image_path('core', 'actions/verify.svg'));
}
?>"
<?php if($_['websiteVerification'] === \OC\Accounts\AccountManager::VERIFICATION_IN_PROGRESS || $_['websiteVerification'] === \OC\Accounts\AccountManager::NOT_VERIFIED) print_unescaped(' class="verify-action"') ?>
>
<div class="verification-dialog popovermenu bubble menu">
<div class="verification-dialog-content">
<p class="explainVerification"></p>
<p class="verificationCode"></p>
<p><?php p($l->t('It can take up to 24 hours before the account is displayed as verified.'));?></p>
</div>
</div>
</div>
<input type="text" name="website" id="website" value="<?php p($_['website']); ?>"
placeholder="<?php p($l->t('Link https://…')); ?>"
autocomplete="on" autocapitalize="none" autocorrect="off" />
<span class="icon-checkmark hidden"/>
<input type="hidden" id="websitescope" value="<?php p($_['websiteScope']) ?>">
</form>
</div>
<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"/>
</h2>
<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
switch($_['twitterVerification']) {
case \OC\Accounts\AccountManager::VERIFICATION_IN_PROGRESS:
p(image_path('core', 'actions/verifying.svg'));
break;
case \OC\Accounts\AccountManager::VERIFIED:
p(image_path('core', 'actions/verified.svg'));
break;
default:
p(image_path('core', 'actions/verify.svg'));
}
?>"
<?php if($_['twitterVerification'] === \OC\Accounts\AccountManager::VERIFICATION_IN_PROGRESS || $_['twitterVerification'] === \OC\Accounts\AccountManager::NOT_VERIFIED) print_unescaped(' class="verify-action"') ?>
>
<div class="verification-dialog popovermenu bubble menu">
<div class="verification-dialog-content">
<p class="explainVerification"></p>
<p class="verificationCode"></p>
<p><?php p($l->t('It can take up to 24 hours before the account is displayed as verified.'));?></p>
</div>
</div>
</div>
<input type="text" name="twitter" id="twitter" value="<?php p($_['twitter']); ?>"
placeholder="<?php p($l->t('Twitter handle @…')); ?>"
autocomplete="on" autocapitalize="none" autocorrect="off" />
<span class="icon-checkmark hidden"/>
<input type="hidden" id="twitterscope" value="<?php p($_['twitterScope']) ?>">
</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-federation-menu icon-password">&#9662;<span/>
</h2>
<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-federation-menu icon-password">&#9662;<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
switch($_['websiteVerification']) {
case \OC\Accounts\AccountManager::VERIFICATION_IN_PROGRESS:
p(image_path('core', 'actions/verifying.svg'));
break;
case \OC\Accounts\AccountManager::VERIFIED:
p(image_path('core', 'actions/verified.svg'));
break;
default:
p(image_path('core', 'actions/verify.svg'));
}
?>"
<?php if($_['websiteVerification'] === \OC\Accounts\AccountManager::VERIFICATION_IN_PROGRESS || $_['websiteVerification'] === \OC\Accounts\AccountManager::NOT_VERIFIED) print_unescaped(' class="verify-action"') ?>
>
<div class="verification-dialog popovermenu bubble menu">
<div class="verification-dialog-content">
<p class="explainVerification"></p>
<p class="verificationCode"></p>
<p><?php p($l->t('It can take up to 24 hours before the account is displayed as verified.'));?></p>
</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"
<?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-federation-menu icon-password">&#9662;<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
switch($_['twitterVerification']) {
case \OC\Accounts\AccountManager::VERIFICATION_IN_PROGRESS:
p(image_path('core', 'actions/verifying.svg'));
break;
case \OC\Accounts\AccountManager::VERIFIED:
p(image_path('core', 'actions/verified.svg'));
break;
default:
p(image_path('core', 'actions/verify.svg'));
}
?>"
<?php if($_['twitterVerification'] === \OC\Accounts\AccountManager::VERIFICATION_IN_PROGRESS || $_['twitterVerification'] === \OC\Accounts\AccountManager::NOT_VERIFIED) print_unescaped(' class="verify-action"') ?>
>
<div class="verification-dialog popovermenu bubble menu">
<div class="verification-dialog-content">
<p class="explainVerification"></p>
<p class="verificationCode"></p>
<p><?php p($l->t('It can take up to 24 hours before the account is displayed as verified.'));?></p>
</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"
<?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 } ?>
</div>
<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 id="groups-groups">
<strong><?php p(implode(', ', $_['groups'])); ?></strong>
</p>
</div>
</div>
</div>
<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>
<select id="languageinput" name="lang" data-placeholder="<?php p($l->t('Language'));?>">
<option value="<?php p($_['activelanguage']['code']);?>">
<?php p($_['activelanguage']['name']);?>
</option>
<?php foreach($_['commonlanguages'] as $language):?>
<option value="<?php p($language['code']);?>">
<?php p($language['name']);?>
</option>
<?php endforeach;?>
<optgroup label="––––––––––"></optgroup>
<?php foreach($_['languages'] as $language):?>
<option value="<?php p($language['code']);?>">
<?php p($language['name']);?>
</option>
<?php endforeach;?>
</select>
<a href="https://www.transifex.com/nextcloud/nextcloud/"
target="_blank" rel="noreferrer">
<em><?php p($l->t('Help translate'));?></em>
</a>
</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 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($_['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
}
?>
<?php if (isset($_['activelanguage'])) { ?>
<form id="language" class="section">
<h2>
<label for="languageinput"><?php p($l->t('Language'));?></label>
</h2>
<select id="languageinput" name="lang" data-placeholder="<?php p($l->t('Language'));?>">
<option value="<?php p($_['activelanguage']['code']);?>">
<?php p($_['activelanguage']['name']);?>
</option>
<?php foreach($_['commonlanguages'] as $language):?>
<option value="<?php p($language['code']);?>">
<?php p($language['name']);?>
</option>
<?php endforeach;?>
<optgroup label="––––––––––"></optgroup>
<?php foreach($_['languages'] as $language):?>
<option value="<?php p($language['code']);?>">
<?php p($language['name']);?>
</option>
<?php endforeach;?>
</select>
<a href="https://www.transifex.com/nextcloud/nextcloud/"
target="_blank" rel="noreferrer">
<em><?php p($l->t('Help translate'));?></em>
</a>
</form>
<?php } ?>
<div class="clear"></div>