mirror of https://github.com/zulip/zulip.git
settings org: Trigger realm icon upload by clicking on realm icon element.
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.
This commit is contained in:
jagansivam28
Tim Abbott
parent
0c70365034
commit
12fd515831
|
|
@ -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);
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
|
||||
|
|
@ -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',
|
||||
|
|
@ -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);
|
||||
},
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1085,7 +1085,6 @@ input[type=checkbox] {
|
|||
}
|
||||
|
||||
#upload_avatar_spinner,
|
||||
#upload_icon_spinner,
|
||||
.upload-logo-spinner {
|
||||
font-size: 14px;
|
||||
margin: auto;
|
||||
|
|
@ -1208,6 +1207,7 @@ input[type=checkbox] {
|
|||
z-index: 99;
|
||||
position: absolute;
|
||||
display: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#realm_icon_delete_button,
|
||||
|
|
@ -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;
|
||||
|
|
@ -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;
|
||||
top: 90px;
|
||||
right: 20px;
|
||||
z-index: 99;
|
||||
}
|
||||
|
||||
#user_avatar_upload_button {
|
||||
top: 90px;
|
||||
right: 20px;
|
||||
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;
|
||||
z-index: 99;
|
||||
}
|
||||
|
||||
#user-avatar-spinner {
|
||||
display: none;
|
||||
top: 40%;
|
||||
right: 40%;
|
||||
z-index: 99;
|
||||
display: none;
|
||||
}
|
||||
|
||||
#realm-icon-spinner {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
top: 30%;
|
||||
right: 30%;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.guest-avatar::after {
|
||||
|
|
@ -1313,6 +1350,10 @@ input[type=checkbox] {
|
|||
#realm-icon-background {
|
||||
display: block;
|
||||
}
|
||||
|
||||
#realm_icon_upload {
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
×
|
||||
</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">
|
||||
×
|
||||
</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' }}
|
||||
|
|
|
|||
Loading…
Reference in New Issue