Skip to content

Commit

Permalink
settings org: Trigger realm icon upload by clicking on realm icon ele…
Browse files Browse the repository at this point in the history 
…ment.

Trigger realm icon upload by clicking on realm icon element itself
rather than having a big upload button and to match our user avatar UI.
Added new spinner over the icon element itself to show while
uploading realm icon.
  • Loading branch information
@Jagansivam28 @timabbott
Jagansivam28 authored and timabbott committed May 28, 2020
1 parent 0c70365 commit 12fd515
Show file tree
Hide file tree
Showing 4 changed files with 80 additions and 31 deletions.
2 changes: 1 addition & 1 deletion frontend_tests/casper_tests/10-admin.js
View file
Expand Up @@ -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 .loading_indicator_spinner", function () {
casper.waitWhileVisible("#upload_icon_spinner", 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);
});
Expand Down
23 changes: 16 additions & 7 deletions static/js/settings_org.js
View file
Expand Up @@ -955,6 +955,19 @@ exports.build_page = function () {
});
});

function realm_icon_upload_complete() {
$('#upload_icon_spinner').css({visibility: 'hidden'});
$('#realm_icon_upload').show();
$('#realm_icon_delete_button').show();

}

function realm_icon_upload_start() {
$('#upload_icon_spinner').css({visibility: "visible"});
$('#realm_icon_upload').hide();
$('#realm_icon_delete_button').hide();
}

function upload_realm_icon(file_input) {
const form_data = new FormData();

Expand All @@ -965,9 +978,7 @@ exports.build_page = function () {

const error_field = $("#realm_icon_file_input_error");
error_field.hide();
const spinner = $("#upload_icon_spinner").expectOne();
loading.make_indicator(spinner, {text: i18n.t("Uploading profile picture.")});
$("#upload_icon_button_text").expectOne().hide();
realm_icon_upload_start();

channel.post({
url: '/json/realm/icon',
Expand All @@ -976,12 +987,10 @@ exports.build_page = function () {
processData: false,
contentType: false,
success: function () {
loading.destroy_indicator($("#upload_icon_spinner"));
$("#upload_icon_button_text").expectOne().show();
realm_icon_upload_complete();
},
error: function (xhr) {
loading.destroy_indicator($("#upload_icon_spinner"));
$("#upload_icon_button_text").expectOne().show();
realm_icon_upload_complete();
ui_report.error("", xhr, error_field);
},
});
Expand Down
53 changes: 47 additions & 6 deletions static/styles/settings.scss
View file
Expand Up @@ -1085,7 +1085,6 @@ input[type=checkbox] {
}

#upload_avatar_spinner,
#upload_icon_spinner,
.upload-logo-spinner {
font-size: 14px;
margin: auto;
Expand Down Expand Up @@ -1208,6 +1207,7 @@ input[type=checkbox] {
z-index: 99;
position: absolute;
display: none;
cursor: pointer;
}

#realm_icon_delete_button,
Expand All @@ -1234,10 +1234,12 @@ input[type=checkbox] {
color: hsl(0, 0%, 100%);
}

#realm_icon_delete_button:hover ~ #realm_icon_upload,
#user_avatar_delete_button:hover ~ #user_avatar_upload_button {
visibility: hidden;
}


#realm_icon_delete_button:hover ~ #realm_icon_delete,
#user_avatar_delete_button:hover ~ #user_avatar_delete {
visibility: visible;
Expand All @@ -1262,27 +1264,62 @@ input[type=checkbox] {
right: 18px;
}

#realm_icon_upload,
#user_avatar_upload_button {
cursor: pointer;
color: hsl(0, 0%, 85%);
opacity: 0;
font-size: 0.85rem;
color: hsl(0, 0%, 85%);
position: absolute;
z-index: 99;
}

#user_avatar_upload_button {
top: 90px;
right: 20px;
z-index: 99;
opacity: 0;
}

#realm_icon_upload {
top: 40px;
right: 18px;
visibility: hidden;
}

#realm_icon_upload:hover,
#user_avatar_upload_button:hover {
color: hsl(0, 0%, 100%);
}

#upload_icon_spinner {
background-color: hsl(0, 0%, 10%);
font-size: 0.80rem;
width: 100%;
opacity: 0.8;
height: 100%;
position: absolute;
visibility: hidden;
z-index: 99;
cursor: pointer;
}

#realm-icon-spinner,
#user-avatar-spinner {
position: absolute;
top: 40%;
right: 40%;
z-index: 99;
}

#user-avatar-spinner {
display: none;
top: 40%;
right: 40%;
}

#realm-icon-spinner {
width: 40px;
height: 40px;
top: 30%;
right: 30%;
display: block;
}

.guest-avatar::after {
Expand Down Expand Up @@ -1313,6 +1350,10 @@ input[type=checkbox] {
#realm-icon-background {
display: block;
}

#realm_icon_upload {
visibility: visible;
}
}
}

Expand Down
33 changes: 16 additions & 17 deletions static/templates/settings/organization_profile_admin.hbs
View file
Expand Up @@ -30,29 +30,28 @@
<div class="inline-block">
<div class="avatar-icon-settings">
{{#if is_admin}}
<div id="realm-icon-background"></div>
<span id="realm_icon_delete_button" aria-label="{{t 'Delete organization icon'}}" role="button" tabindex="0">
&times;
</span>
<span id="realm_icon_delete" aria-label="{{t 'Delete organization icon'}}" tabindex="0">
{{t 'Delete icon' }}
</span>
<div id="realm_icon_upload_button">
<div id="realm-icon-background"></div>
<span id="realm_icon_delete_button" aria-label="{{t 'Delete organization icon'}}" role="button" tabindex="0">
&times;
</span>
<span id="realm_icon_delete" aria-label="{{t 'Delete organization icon'}}" tabindex="0">
{{t 'Delete icon' }}
</span>
<span id="realm_icon_upload" aria-label="{{t 'Upload organization icon'}}" role="button" tabindex="0">
{{t 'Upload icon' }}
</span>
<span id="upload_icon_spinner">
<object id="realm-icon-spinner" type="image/svg+xml" data="/static/images/tail-spin.svg"></object>
</span>
</div>
{{/if}}
<img id="realm-icon-block" src="{{ realm_icon_url }}"/>
<input type="file" name="realm_icon_file_input" class="notvisible"
id="realm_icon_file_input" value="{{t 'Upload profile picture' }}"/>
</div>
<div id="realm_icon_file_input_error" class="text-error m-t-10"></div>
</div>
{{#if is_admin}}
<div class="inline-block avatar-controls">
<div id="realm_icon_file_input_error" class="alert text-error"></div>
<button class="button rounded sea-green w-200 block input-size"
id="realm_icon_upload_button">
<span id="upload_icon_button_text">{{t 'Upload new profile picture' }}</span>
<span id="upload_icon_spinner"></span>
</button>
</div>
{{/if}}
</div>
<a href="/login/?preview=true" target="_blank" class="button rounded sea-green w-200 block" id="id_org_profile_preview">
{{t 'Preview organization profile' }}
Expand Down

0 comments on commit 12fd515

Please sign in to comment.