diff options
| -rw-r--r-- | settings/css/settings.css | 129 | ||||
| -rw-r--r-- | settings/js/federationsettingsview.js | 6 | ||||
| -rw-r--r-- | settings/templates/settings/personal/personal.info.php | 369 |
3 files changed, 283 insertions, 221 deletions
diff --git a/settings/css/settings.css b/settings/css/settings.css index 3fa064c95d1..ec0e8209dcd 100644 --- a/settings/css/settings.css +++ b/settings/css/settings.css @@ -2,20 +2,40 @@ 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; } +.personal-settings-password-box { + margin-top: 20px; + margin-bottom: 136px; +} + +.personal-settings-group-box, +.personal-settings-language-box { + margin-top: 20px; + } + +.icon-federation-menu { + width: 44px; + margin: -6px; + float: right; + text-align: right; +} + +.icon-avatar-federation-menu { + position: absolute; + width: 46px; + top: -6px; + left: 128px; + text-align: right; +} + /* icons for sidebar */ .nav-icon-personal-settings { background-image: url('../img/personal.svg?v=1'); @@ -41,11 +61,6 @@ input#openid, input#webdav { background-image: url('../img/password.svg?v=1'); } -#avatarform { - min-width: 145px; - padding-right: 0; -} - #avatarform .avatardiv { margin-bottom: 10px; } @@ -115,41 +130,40 @@ 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; + min-width: 205px; } -#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; } -#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; @@ -158,36 +172,44 @@ input#openid, input#webdav { 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 +235,7 @@ input#openid, input#webdav { .federationScopeMenu { top: 44px; - margin: -5px 0px 0; + margin: -5px 5px 0; } .federationScopeMenu.bubble::after { @@ -235,25 +257,23 @@ input#openid, input#webdav { #lostpassword, #groups { display: inline-block; - margin-bottom: 0; + margin-bottom: 10px; 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;; + width: 125px; + display: block; clear: both; } +#groups-groups { + padding-top: 5px; +} + .clientsbox img { height: 60px; } @@ -953,7 +973,8 @@ span.version { } form.section { - position: relative; + padding: 0 30px; + margin-bottom: 0; } .followupsection { diff --git a/settings/js/federationsettingsview.js b/settings/js/federationsettingsview.js index d58098257bd..46d92027a97 100644 --- a/settings/js/federationsettingsview.js +++ b/settings/js/federationsettingsview.js @@ -180,18 +180,24 @@ _setFieldScopeIcon: function(field, scope) { var $icon = this.$('#' + field + 'form > h2 > span'); + $icon.removeClass('icon-password'); $icon.removeClass('icon-contacts'); $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'); + $icon.removeClass('hidden'); break; case 'public': $icon.addClass('icon-link'); + $icon.removeClass('hidden'); break; } } diff --git a/settings/templates/settings/personal/personal.info.php b/settings/templates/settings/personal/personal.info.php index db14a4de986..e0655b393d2 100644 --- a/settings/templates/settings/personal/personal.info.php +++ b/settings/templates/settings/personal/personal.info.php @@ -57,7 +57,7 @@ vendor_style('jcrop/css/jquery.Jcrop'); <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"/> + <span class="icon-avatar-federation-menu icon-password">▾<span/> </h2> <div id="displayavatar"> <div class="avatardiv"></div> @@ -81,17 +81,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">▾<span/> </h2> <input type="text" id="displayname" name="displayname" <?php if(!$_['displayNameChangeSupported']) { print_unescaped('class="hidden"'); } ?> @@ -110,7 +110,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,182 +135,217 @@ 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($_['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> + <?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">▾<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 } ?> + <?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">▾<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">▾<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> - <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> + <?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">▾<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> - <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> + </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 } ?> - <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> + <div class="clear"></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 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> - <input id="passwordbutton" type="submit" value="<?php p($l->t('Change password')); ?>" /> - <br/> - </form> - <?php -} -?> + </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> -<?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> |