From 4ca88471b0ff08a92d2091b55bab5711ff00935c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?John=20Molakvo=C3=A6=20=28skjnldsv=29?=
<skjnldsv@protonmail.com>
Date: Wed, 4 Oct 2017 17:01:03 +0200
Subject: [PATCH] Fix popover position and avatar loading
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>
---
settings/css/settings.scss | 17 +++--
settings/js/settings/personalInfo.js | 3 +-
.../settings/personal/personal.info.php | 62 ++++++++++---------
3 files changed, 46 insertions(+), 36 deletions(-)
diff --git a/settings/css/settings.scss b/settings/css/settings.scss
index 221dad33ac3..a14f0ecef06 100644
--- a/settings/css/settings.scss
+++ b/settings/css/settings.scss
@@ -35,12 +35,13 @@ input {
}
#avatarform {
- > h2 {
- position: relative;
- }
.avatardiv {
margin: 10px auto;
}
+ .federationScopeMenu {
+ /* popover magic fix */
+ margin-right: calc(-50% - 7px);
+ }
.warning {
width: 100%;
}
@@ -117,11 +118,11 @@ input {
}
.icon-federation-menu {
- float: right;
padding-left: 16px;
background-size: 16px;
background-position: left 8px;
opacity: .3;
+ margin-left: 10px;
cursor: pointer;
.icon-triangle-s {
@@ -163,12 +164,18 @@ input {
&:after {
clear: both;
}
- > div {
+ &:not(#personal-settings-avatar-container) > div {
float: left;
width: 300px;
+ }
+ > div {
h2 {
position: relative;
margin-bottom: 5px;
+ display: inline-flex;
+ flex-wrap: nowrap;
+ justify-content: space-between;
+ width: 100%;
}
> form span {
&[class^="icon-checkmark"], &[class^="icon-error"] {
diff --git a/settings/js/settings/personalInfo.js b/settings/js/settings/personalInfo.js
index 1c634bb2887..3a4542df748 100644
--- a/settings/js/settings/personalInfo.js
+++ b/settings/js/settings/personalInfo.js
@@ -128,6 +128,7 @@ function avatarResponseHandler (data) {
var $warning = $('#avatarform .warning');
$warning.hide();
if (data.status === "success") {
+ $('#displayavatar .avatardiv').removeClass('icon-loading');
updateAvatar();
} else if (data.data === "notsquare") {
showAvatarCropper();
@@ -302,7 +303,7 @@ $(document).ready(function () {
},
submit: function(e, data) {
$('#displayavatar img').hide();
- $('#displayavatar .avatardiv').addClass('loading');
+ $('#displayavatar .avatardiv').addClass('icon-loading');
data.formData = _.extend(data.formData || {}, {
requesttoken: OC.requestToken
});
diff --git a/settings/templates/settings/personal/personal.info.php b/settings/templates/settings/personal/personal.info.php
index c0326e97491..854b413171c 100644
--- a/settings/templates/settings/personal/personal.info.php
+++ b/settings/templates/settings/personal/personal.info.php
@@ -66,38 +66,40 @@ vendor_style('jcrop/css/jquery.Jcrop');
</div>
<div id="personal-settings">
- <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-federation-menu icon-password">
- <span class="icon-triangle-s"></span>
- </span>
- </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="hidden 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="personal-settings-avatar-container" class="personal-settings-container">
+ <div>
+ <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-federation-menu icon-password">
+ <span class="icon-triangle-s"></span>
+ </span>
+ </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="hidden 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="inner-container">
- <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 id="cropper" class="hidden">
+ <div class="inner-container">
+ <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>
</div>
- </div>
- <span class="icon-checkmark hidden"></span>
- <?php if($_['lookupServerUploadEnabled']) { ?>
- <input type="hidden" id="avatarscope" value="<?php p($_['avatarScope']) ?>">
- <?php } ?>
- </form>
+ <span class="icon-checkmark hidden"></span>
+ <?php if($_['lookupServerUploadEnabled']) { ?>
+ <input type="hidden" id="avatarscope" value="<?php p($_['avatarScope']) ?>">
+ <?php } ?>
+ </form>
+ </div>
</div>
<div class="personal-settings-container">
--
GitLab