paulmataruso/zulip
1
0
Fork 0
mirror of https://github.com/zulip/zulip.git synced 2025-11-04 22:13:26 +00:00
Code Issues Packages Projects Releases Wiki Activity

settings: Change user avatar spinner implementation.

Browse Source 
Change user avatar spinner implementation to match
realm icon spinner implementation and have common css class
since similar implementation between similar widgets may help
in future deduplication.
This commit is contained in:
jagansivam28
2020-06-07 03:43:40 +05:30
committed by Tim Abbott
parent 5f027f194b
commit adb1f56760
6 changed files with 17 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
frontend_tests/casper_tests/10-admin.js
View File

@@ -344,7 +344,7 @@ casper.then(function () {
realm_icon_file_input: 'static/images/logo/zulip-icon-128x128.png',
}, false);
casper.click("#realm_icon_upload_button");
casper.waitWhileVisible("#upload_icon_spinner", function () {
casper.waitWhileVisible("#icon-spinner-background", function () {
casper.test.assertExists('img#realm-icon-block[src^="/user_avatars/2/realm/icon.png?version=2"]');
casper.test.assertEqual(casper.visible('#realm_icon_delete_button'), true);
});

6
static/js/settings_account.js
View File

@@ -76,8 +76,7 @@ exports.update_avatar_change_display = function () {
};
function display_avatar_upload_complete() {
$('#user-avatar-background').css({display: 'none'});
$('#user-avatar-spinner').css({display: 'none'});
$('#avatar-spinner-background').css({visibility: 'hidden'});
$('#user_avatar_upload_button').show();
$('#user_avatar_delete_button').show();
@@ -85,8 +84,7 @@ function display_avatar_upload_complete() {
function display_avatar_upload_started() {
$("#user-avatar-source").hide();
$('#user-avatar-background').css({display: 'block'});
$('#user-avatar-spinner').css({display: 'block'});
$('#avatar-spinner-background').css({visibility: 'visible'});
$('#user_avatar_upload_button').hide();
$('#user_avatar_delete_button').hide();
}

4
static/js/settings_org.js
View File

@@ -943,14 +943,14 @@ exports.build_page = function () {
});
function realm_icon_upload_complete() {
$('#upload_icon_spinner').css({visibility: 'hidden'});
$('#icon-spinner-background').css({visibility: 'hidden'});
$('#realm_icon_upload').show();
$('#realm_icon_delete_button').show();
}
function realm_icon_upload_start() {
$('#upload_icon_spinner').css({visibility: "visible"});
$('#icon-spinner-background').css({visibility: "visible"});
$('#realm_icon_upload').hide();
$('#realm_icon_delete_button').hide();
}

23
static/styles/settings.scss
View File

@@ -1196,8 +1196,7 @@ input[type=checkbox] {
height: 100%;
}
#realm-icon-background,
#user-avatar-background {
.settings-page-image-background {
content: '';
background-color: hsl(0, 0%, 0%);
height: 100%;
@@ -1278,7 +1277,7 @@ input[type=checkbox] {
color: hsl(0, 0%, 100%);
}
#upload_icon_spinner {
.upload-spinner-background {
background-color: hsl(0, 0%, 10%);
font-size: 0.80rem;
width: 100%;
@@ -1294,12 +1293,14 @@ input[type=checkbox] {
#user-avatar-spinner {
position: absolute;
z-index: 99;
display: block;
}
#user-avatar-spinner {
display: none;
top: 40%;
right: 40%;
width: 50px;
height: 50px;
}
#realm-icon-spinner {
@@ -1307,7 +1308,6 @@ input[type=checkbox] {
height: 40px;
top: 30%;
right: 30%;
display: block;
}
.guest-avatar::after {
@@ -1315,17 +1315,6 @@ input[type=checkbox] {
}
&:hover {
#user-avatar-block::after {
content: '';
background-color: hsl(0, 0%, 0%);
height: 100%;
width: 100%;
opacity: 0.6;
z-index: 99;
position: absolute;
cursor: pointer;
}
.settings-page-delete-button {
opacity: 1;
}
@@ -1334,7 +1323,7 @@ input[type=checkbox] {
visibility: visible;
}
#realm-icon-background {
.settings-page-image-background {
display: block;
}
}

6
static/templates/settings/account_settings.hbs
View File

@@ -157,7 +157,10 @@
<div class="inline-block">
<div id="user-settings-avatar" class="avatar-icon-settings">
<div id="user-avatar-background"></div>
<div class="settings-page-image-background"></div>
<span id="avatar-spinner-background" class="upload-spinner-background">
<object id="user-avatar-spinner" type="image/svg+xml" data="/static/images/tail-spin.svg"></object>
</span>
<div id="user-avatar-block" style="background-image: url({{ page_params.avatar_url_medium }})" {{#if page_params.is_guest}} class="guest-avatar"{{/if}}></div>
<span id="user_avatar_delete_button" class="settings-page-delete-button" aria-label="{{t 'Delete profile picture'}}" role="button" tabindex="0"
{{#unless user_can_change_avatar}}style="display:none"{{/unless}}>
@@ -166,7 +169,6 @@
<span id="user_avatar_delete" class="settings-page-delete-text" aria-label="{{t 'Delete profile picture'}}" tabindex="0">
{{t 'Delete profile picture' }}
</span>
<object id="user-avatar-spinner" type="image/svg+xml" data="/static/images/tail-spin.svg"></object>
<span id="user_avatar_upload_button" class="settings-page-upload-text" aria-label="{{t 'Upload new profile picture'}}" role="button" tabindex="0"
{{#if (and (not page_params.is_admin) page_params.realm_avatar_changes_disabled)}}style="display:none"{{/if}}>
{{t 'Upload new profile picture' }}

4
static/templates/settings/organization_profile_admin.hbs
View File

@@ -31,7 +31,7 @@
<div class="avatar-icon-settings">
{{#if is_admin}}
<div id="realm_icon_upload_button">
<div id="realm-icon-background"></div>
<div class="settings-page-image-background"></div>
<span id="realm_icon_delete_button" class="settings-page-delete-button" aria-label="{{t 'Delete organization icon'}}" role="button" tabindex="0">
&times;
</span>
@@ -41,7 +41,7 @@
<span id="realm_icon_upload" class="settings-page-upload-text" aria-label="{{t 'Upload organization icon'}}" role="button" tabindex="0">
{{t 'Upload icon' }}
</span>
<span id="upload_icon_spinner">
<span id="icon-spinner-background" class="upload-spinner-background">
<object id="realm-icon-spinner" type="image/svg+xml" data="/static/images/tail-spin.svg"></object>
</span>
</div>