From 07ee0d42517cc1737b0e4cb5fdb22727277118ef Mon Sep 17 00:00:00 2001
From: Brian Peiris <brianpeiris@gmail.com>
Date: Tue, 24 Apr 2018 21:32:19 -0700
Subject: [PATCH] move avatar selector loader outside iframe
---
src/assets/stylesheets/avatar-selector.scss | 1 -
src/assets/stylesheets/profile.scss | 9 ++++++++-
src/react-components/profile-entry-panel.js | 19 ++++++++++++++-----
3 files changed, 22 insertions(+), 7 deletions(-)
diff --git a/src/assets/stylesheets/avatar-selector.scss b/src/assets/stylesheets/avatar-selector.scss
index 3485ea3de..21553781a 100644
--- a/src/assets/stylesheets/avatar-selector.scss
+++ b/src/assets/stylesheets/avatar-selector.scss
@@ -1,5 +1,4 @@
@import 'shared';
-@import 'loader';
#selector-root {
height: 100%;
diff --git a/src/assets/stylesheets/profile.scss b/src/assets/stylesheets/profile.scss
index 862d1fc3d..ddb561171 100644
--- a/src/assets/stylesheets/profile.scss
+++ b/src/assets/stylesheets/profile.scss
@@ -9,11 +9,18 @@
display: flex;
pointer-events: auto;
+ &__avatar-selector-container {
+ flex: 1;
+ position: relative;
+ margin-bottom: 0.5em;
+ }
+
&__avatar-selector {
border: none;
width: 95%;
height: 100%;
- margin: 1em 0;
+ z-index: 1;
+ position: relative;
}
&__form {
diff --git a/src/react-components/profile-entry-panel.js b/src/react-components/profile-entry-panel.js
index e10f9bc6c..06e889e41 100644
--- a/src/react-components/profile-entry-panel.js
+++ b/src/react-components/profile-entry-panel.js
@@ -92,11 +92,20 @@ class ProfileEntryPanel extends Component {
ref={inp => (this.nameInput = inp)}
/>
</label>
- <iframe
- className="profile-entry__avatar-selector"
- src={`/${this.props.htmlPrefix}avatar-selector.html#avatar_id=${this.state.avatarId}`}
- ref={ifr => (this.avatarSelector = ifr)}
- />
+ <div className="profile-entry__avatar-selector-container">
+ <div className="loading-panel">
+ <div className="loader-wrap">
+ <div className="loader">
+ <div className="loader-center" />
+ </div>
+ </div>
+ </div>
+ <iframe
+ className="profile-entry__avatar-selector"
+ src={`/${this.props.htmlPrefix}avatar-selector.html#avatar_id=${this.state.avatarId}`}
+ ref={ifr => (this.avatarSelector = ifr)}
+ />
+ </div>
<input className="profile-entry__form-submit" type="submit" value={formatMessage({ id: "profile.save" })} />
<div className="profile-entry__box__links">
<a target="_blank" rel="noopener noreferrer" href="https://github.com/mozilla/hubs/blob/master/TERMS.md">
--
GitLab