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

upload widget: Rename image upload widget delete button CSS class.

Browse Source 
Previously, image upload widget delete button CSS class name was
`settings-page-delete-button`.
We can change the CSS class name to `image-delete-button`
so that the name can be more generic.
This commit is contained in:
jagansivam28
2020-07-16 00:28:34 +05:30
committed by Tim Abbott
parent d1b0a12c2d
commit 90cb72b103
10 changed files with 37 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -359,7 +359,7 @@ casper.then(function () {
'#realm-icon-upload-widget .image-block[src^="https://secure.gravatar.com/avatar/"]'; '#realm-icon-upload-widget .image-block[src^="https://secure.gravatar.com/avatar/"]';
casper.waitUntilVisible(selector, function () { casper.waitUntilVisible(selector, function () {
casper.test.assertEqual( casper.test.assertEqual(
casper.visible("#realm-icon-upload-widget .settings-page-delete-button"), casper.visible("#realm-icon-upload-widget .image-delete-button"),
false false
); );
// Hack: Rather than submitting the form, we just fill the // Hack: Rather than submitting the form, we just fill the
@@ -379,7 +379,7 @@ casper.then(function () {
'#realm-icon-upload-widget .image-block[src^="/user_avatars/2/realm/icon.png?version=2"]' '#realm-icon-upload-widget .image-block[src^="/user_avatars/2/realm/icon.png?version=2"]'
); );
casper.test.assertEqual( casper.test.assertEqual(
casper.visible("#realm-icon-upload-widget .settings-page-delete-button"), casper.visible("#realm-icon-upload-widget .image-delete-button"),
true true
); );
} }
@@ -390,17 +390,14 @@ casper.then(function () {
// Test deleting realm icon image // Test deleting realm icon image
casper.then(function () { casper.then(function () {
casper.click("li[data-section='organization-profile']"); casper.click("li[data-section='organization-profile']");
casper.click("#realm-icon-upload-widget .settings-page-delete-button"); casper.click("#realm-icon-upload-widget .image-delete-button");
casper.test.assertEqual( casper.test.assertEqual(casper.visible("#realm-icon-upload-widget .image-delete-button"), true);
casper.visible("#realm-icon-upload-widget .settings-page-delete-button"), casper.waitWhileVisible("#realm-icon-upload-widget .image-delete-button", function () {
true
);
casper.waitWhileVisible("#realm-icon-upload-widget .settings-page-delete-button", function () {
casper.test.assertExists( casper.test.assertExists(
'#realm-icon-upload-widget .image-block[src^="https://secure.gravatar.com/avatar/"]' '#realm-icon-upload-widget .image-block[src^="https://secure.gravatar.com/avatar/"]'
); );
casper.test.assertEqual( casper.test.assertEqual(
casper.visible("#realm-icon-upload-widget .settings-page-delete-button"), casper.visible("#realm-icon-upload-widget .image-delete-button"),
false false
); );
}); });

11
frontend_tests/node_tests/settings_org.js
View File

@@ -961,34 +961,31 @@ run_test("misc", () => {
settings_account.update_avatar_change_display(); settings_account.update_avatar_change_display();
assert.equal($("#user-avatar-upload-widget .image_upload_button").attr("disabled"), false); assert.equal($("#user-avatar-upload-widget .image_upload_button").attr("disabled"), false);
assert.equal( assert.equal(
$("#user-avatar-upload-widget .settings-page-delete-button .button").attr("disabled"), $("#user-avatar-upload-widget .image-delete-button .button").attr("disabled"),
false, false,
); );
page_params.realm_avatar_changes_disabled = true; page_params.realm_avatar_changes_disabled = true;
page_params.server_avatar_changes_disabled = false; page_params.server_avatar_changes_disabled = false;
settings_account.update_avatar_change_display(); settings_account.update_avatar_change_display();
assert.equal($("#user-avatar-upload-widget .image_upload_button").attr("disabled"), "disabled"); assert.equal($("#user-avatar-upload-widget .image_upload_button").attr("disabled"), "disabled");
assert.equal( assert.equal(
$("#user-avatar-upload-widget .settings-page-delete-button .button").attr("disabled"), $("#user-avatar-upload-widget .image-delete-button .button").attr("disabled"),
"disabled", "disabled",
); );
page_params.realm_avatar_changes_disabled = false; page_params.realm_avatar_changes_disabled = false;
page_params.server_avatar_changes_disabled = true; page_params.server_avatar_changes_disabled = true;
settings_account.update_avatar_change_display(); settings_account.update_avatar_change_display();
assert.equal($("#user-avatar-upload-widget .image_upload_button").attr("disabled"), "disabled"); assert.equal($("#user-avatar-upload-widget .image_upload_button").attr("disabled"), "disabled");
assert.equal( assert.equal(
$("#user-avatar-upload-widget .settings-page-delete-button .button").attr("disabled"), $("#user-avatar-upload-widget .image-delete-button .button").attr("disabled"),
"disabled", "disabled",
); );
page_params.realm_avatar_changes_disabled = true; page_params.realm_avatar_changes_disabled = true;
page_params.server_avatar_changes_disabled = true; page_params.server_avatar_changes_disabled = true;
settings_account.update_avatar_change_display(); settings_account.update_avatar_change_display();
assert.equal($("#user-avatar-upload-widget .image_upload_button").attr("disabled"), "disabled"); assert.equal($("#user-avatar-upload-widget .image_upload_button").attr("disabled"), "disabled");
assert.equal( assert.equal(
$("#user-avatar-upload-widget .settings-page-delete-button .button").attr("disabled"), $("#user-avatar-upload-widget .image-delete-button .button").attr("disabled"),
"disabled", "disabled",
); );

11
static/js/avatar.js
View File

@@ -44,20 +44,21 @@ exports.build_user_avatar_widget = function (upload_function) {
return $("#user-avatar-upload-widget .image_file_input").expectOne(); return $("#user-avatar-upload-widget .image_file_input").expectOne();
}; };
if (page_params.avatar_source === "G") { if (page_params.avatar_source === 'G') {
$("#user-avatar-upload-widget .settings-page-delete-button").hide(); $("#user-avatar-upload-widget .image-delete-button").hide();
$("#user-avatar-source").show(); $("#user-avatar-source").show();
} else { } else {
$("#user-avatar-source").hide(); $("#user-avatar-source").hide();
} }
$("#user-avatar-upload-widget .settings-page-delete-button").on("click keydown", (e) => {
$("#user-avatar-upload-widget .image-delete-button").on('click keydown', (e) => {
e.preventDefault(); e.preventDefault();
e.stopPropagation(); e.stopPropagation();
channel.del({ channel.del({
url: "/json/users/me/avatar", url: "/json/users/me/avatar",
success() { success () {
$("#user-avatar-upload-widget .settings-page-delete-button").hide(); $("#user-avatar-upload-widget .image-delete-button").hide();
$("#user-avatar-source").show(); $("#user-avatar-source").show();
// Need to clear input because of a small edge case // Need to clear input because of a small edge case
// where you try to upload the same image you just deleted. // where you try to upload the same image you just deleted.

10
static/js/realm_icon.js
View File

@@ -7,11 +7,11 @@ exports.build_realm_icon_widget = function (upload_function) {
return; return;
} }
if (page_params.realm_icon_source === "G") { if (page_params.realm_icon_source === "G") {
$("#realm-icon-upload-widget .settings-page-delete-button").hide(); $("#realm-icon-upload-widget .image-delete-button").hide();
} else { } else {
$("#realm-icon-upload-widget .settings-page-delete-button").show(); $("#realm-icon-upload-widget .image-delete-button").show();
} }
$("#realm-icon-upload-widget .settings-page-delete-button").on("click", (e) => { $("#realm-icon-upload-widget .image-delete-button").on("click", (e) => {
e.preventDefault(); e.preventDefault();
e.stopPropagation(); e.stopPropagation();
channel.del({ channel.del({
@@ -31,9 +31,9 @@ exports.build_realm_icon_widget = function (upload_function) {
exports.rerender = function () { exports.rerender = function () {
$("#realm-icon-upload-widget .image-block").attr("src", page_params.realm_icon_url); $("#realm-icon-upload-widget .image-block").attr("src", page_params.realm_icon_url);
if (page_params.realm_icon_source === "U") { if (page_params.realm_icon_source === "U") {
$("#realm-icon-upload-widget .settings-page-delete-button").show(); $("#realm-icon-upload-widget .image-delete-button").show();
} else { } else {
$("#realm-icon-upload-widget .settings-page-delete-button").hide(); $("#realm-icon-upload-widget .image-delete-button").hide();
// Need to clear input because of a small edge case // Need to clear input because of a small edge case
// where you try to upload the same image you just deleted. // where you try to upload the same image you just deleted.
const file_input = $("#realm-icon-upload-widget .image_file_input"); const file_input = $("#realm-icon-upload-widget .image_file_input");

6
static/js/realm_logo.js
View File

@@ -9,7 +9,7 @@ exports.build_realm_logo_widget = function (upload_function, is_night) {
logo_source = page_params.realm_night_logo_source; logo_source = page_params.realm_night_logo_source;
} }
const delete_button_elem = $(logo_section_id + " .settings-page-delete-button"); const delete_button_elem = $(logo_section_id + " .image-delete-button");
const file_input_elem = $(logo_section_id + " .image_file_input"); const file_input_elem = $(logo_section_id + " .image_file_input");
const file_input_error_elem = $(logo_section_id + " .image_file_input_error"); const file_input_error_elem = $(logo_section_id + " .image_file_input_error");
const upload_button_elem = $(logo_section_id + " .image_upload_button"); const upload_button_elem = $(logo_section_id + " .image_upload_button");
@@ -92,12 +92,12 @@ exports.rerender = function () {
change_logo_delete_button( change_logo_delete_button(
page_params.realm_logo_source, page_params.realm_logo_source,
$("#realm-day-logo-upload-widget .settings-page-delete-button"), $("#realm-day-logo-upload-widget .image-delete-button"),
file_input, file_input,
); );
change_logo_delete_button( change_logo_delete_button(
page_params.realm_night_logo_source, page_params.realm_night_logo_source,
$("#realm-night-logo-upload-widget .settings-page-delete-button"), $("#realm-night-logo-upload-widget .image-delete-button"),
night_file_input, night_file_input,
); );
}; };

14
static/js/settings_account.js
View File

@@ -68,30 +68,24 @@ exports.update_email_change_display = function () {
exports.update_avatar_change_display = function () { exports.update_avatar_change_display = function () {
if (!exports.user_can_change_avatar()) { if (!exports.user_can_change_avatar()) {
$("#user-avatar-upload-widget .image_upload_button").attr("disabled", "disabled"); $("#user-avatar-upload-widget .image_upload_button").attr("disabled", "disabled");
$("#user-avatar-upload-widget .settings-page-delete-button .button").attr( $("#user-avatar-upload-widget .image-delete-button .button").attr("disabled", "disabled");
"disabled",
"disabled",
);
} else { } else {
$("#user-avatar-upload-widget .image_upload_button").attr("disabled", false); $("#user-avatar-upload-widget .image_upload_button").attr("disabled", false);
$("#user-avatar-upload-widget .settings-page-delete-button .button").attr( $("#user-avatar-upload-widget .image-delete-button .button").attr("disabled", false);
"disabled",
false,
);
} }
}; };
function display_avatar_upload_complete() { function display_avatar_upload_complete() {
$("#user-avatar-upload-widget .upload-spinner-background").css({visibility: "hidden"}); $("#user-avatar-upload-widget .upload-spinner-background").css({visibility: "hidden"});
$("#user-avatar-upload-widget .settings-page-upload-text").show(); $("#user-avatar-upload-widget .settings-page-upload-text").show();
$("#user-avatar-upload-widget .settings-page-delete-button").show(); $("#user-avatar-upload-widget .image-delete-button").show();
} }
function display_avatar_upload_started() { function display_avatar_upload_started() {
$("#user-avatar-source").hide(); $("#user-avatar-source").hide();
$("#user-avatar-upload-widget .upload-spinner-background").css({visibility: "visible"}); $("#user-avatar-upload-widget .upload-spinner-background").css({visibility: "visible"});
$("#user-avatar-upload-widget .settings-page-upload-text").hide(); $("#user-avatar-upload-widget .settings-page-upload-text").hide();
$("#user-avatar-upload-widget .settings-page-delete-button").hide(); $("#user-avatar-upload-widget .image-delete-button").hide();
} }
function settings_change_error(message, xhr) { function settings_change_error(message, xhr) {

2
static/js/settings_org.js
View File

@@ -1047,7 +1047,7 @@ exports.build_page = function () {
} }
const spinner = $(`${widget} .upload-spinner-background`).expectOne(); const spinner = $(`${widget} .upload-spinner-background`).expectOne();
const upload_text = $(`${widget} .settings-page-upload-text`).expectOne(); const upload_text = $(`${widget} .settings-page-upload-text`).expectOne();
const delete_button = $(`${widget} .settings-page-delete-button`).expectOne(); const delete_button = $(`${widget} .image-delete-button`).expectOne();
const error_field = $(`${widget} .image_file_input_error`).expectOne(); const error_field = $(`${widget} .image_file_input_error`).expectOne();
realm_icon_logo_upload_start(spinner, upload_text, delete_button); realm_icon_logo_upload_start(spinner, upload_text, delete_button);
error_field.hide(); error_field.hide();

2
static/js/upload_widget.js
View File

@@ -154,7 +154,7 @@ exports.build_direct_upload_widget = function (
if (file.size > max_file_upload_size * 1024 * 1024) { if (file.size > max_file_upload_size * 1024 * 1024) {
input_error.text( input_error.text(
i18n.t("File size must be < __max_file_size__Mb.", { i18n.t("File size must be < __max_file_size__Mb.", {
max_file_size: max_file_upload_size, max_file_size: max_file_upload_size,
}), }),
); );
input_error.show(); input_error.show();

12
static/styles/image_upload_widget.scss
View File

@@ -24,7 +24,7 @@
cursor: pointer; cursor: pointer;
} }
.settings-page-delete-button { .image-delete-button {
cursor: pointer; cursor: pointer;
color: hsl(0, 0%, 75%); color: hsl(0, 0%, 75%);
opacity: 0; opacity: 0;
@@ -35,15 +35,15 @@
z-index: 99; z-index: 99;
} }
.settings-page-delete-button:hover { .image-delete-button:hover {
color: hsl(0, 0%, 100%); color: hsl(0, 0%, 100%);
} }
.settings-page-delete-button:hover ~ .settings-page-upload-text { .image-delete-button:hover ~ .settings-page-upload-text {
visibility: hidden; visibility: hidden;
} }
.settings-page-delete-button:hover ~ .settings-page-delete-text { .image-delete-button:hover ~ .settings-page-delete-text {
visibility: visible; visibility: visible;
} }
@@ -87,7 +87,7 @@
} }
&:hover { &:hover {
.settings-page-delete-button { .image-delete-button {
opacity: 1; opacity: 1;
} }
@@ -122,7 +122,7 @@
z-index: 99; z-index: 99;
} }
.settings-page-delete-button { .image-delete-button {
font-size: 3rem; font-size: 3rem;
} }

2
static/templates/settings/image_upload_widget.hbs
View File

@@ -2,7 +2,7 @@
{{#if is_editable_by_current_user}} {{#if is_editable_by_current_user}}
<div class="image_upload_button"> <div class="image_upload_button">
<div class="image-upload-background"></div> <div class="image-upload-background"></div>
<span class="settings-page-delete-button" aria-label="{{ delete_text }}" role="button" tabindex="0"> <span class="image-delete-button" aria-label="{{ delete_text }}" role="button" tabindex="0">
&times; &times;
</span> </span>
<span class="settings-page-delete-text" aria-label="{{ delete_text }}" tabindex="0"> <span class="settings-page-delete-text" aria-label="{{ delete_text }}" tabindex="0">