paulmataruso/zulip
1
0
Fork 0
mirror of https://github.com/zulip/zulip.git synced 2025-10-23 04:52:12 +00:00
Code Issues Packages Projects Releases Wiki Activity

settings: Update save and discard buttons to redesigned button styles.

Browse Source 
This commit updates the save and discard buttons in the setting modals
to use redesigned button styles along with the new loading indicator.
This commit is contained in:
Sayam Samal
2025-03-20 03:09:52 +05:30
committed by Tim Abbott
parent a16bc0e5b1
commit 6bf2887991
6 changed files with 27 additions and 117 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
web/src/settings_components.ts
View File

@@ -7,6 +7,7 @@ import {z} from "zod";
import render_compose_banner from "../templates/compose_banner/compose_banner.hbs";
import * as blueslip from "./blueslip.ts";
import * as buttons from "./buttons.ts";
import * as compose_banner from "./compose_banner.ts";
import type {DropdownWidget} from "./dropdown_widget.ts";
import * as group_permission_settings from "./group_permission_settings.ts";
@@ -538,10 +539,10 @@ export function change_save_button_state($element: JQuery, state: string): void
}
const $save_button = $element.find(".save-button");
const $textEl = $save_button.find(".save-discard-widget-button-text");
const $textEl = $save_button.find(".action-button-label");
if (state !== "saving") {
$save_button.removeClass("saving");
buttons.hide_button_loading_indicator($save_button);
}
if (state === "discarded") {
@@ -573,12 +574,14 @@ export function change_save_button_state($element: JQuery, state: string): void
is_show = false;
break;
case "saving":
button_text = $t({defaultMessage: "Saving"});
// We don't change the button text on the saving
// state to avoid changing the button size while
// we show the loading indicator.
data_status = "saving";
is_show = true;
$element.find(".discard-button").hide();
$save_button.addClass("saving");
buttons.show_button_loading_indicator($save_button);
break;
case "failed":
button_text = $t({defaultMessage: "Save changes"});
@@ -592,8 +595,9 @@ export function change_save_button_state($element: JQuery, state: string): void
break;
}
assert(button_text !== undefined);
$textEl.text(button_text);
if (button_text !== undefined) {
$textEl.text(button_text);
}
assert(data_status !== undefined);
$save_button.attr("data-status", data_status);
if (state === "unsaved") {

76
web/styles/app_components.css
View File

@@ -52,11 +52,6 @@ kbd {
.hide-sm {
display: none !important;
}
#settings_page .save-button-controls {
display: block;
margin: 10px 0 0;
}
}
.light {
@@ -889,80 +884,11 @@ input.settings_text_input {
display: flex;
margin: 0.2857em 0.5714em; /* 4px 8px at 14px/em */
align-items: center;
gap: 5px;
&.hide {
display: none;
}
.save-discard-widget-button {
border-radius: 5px;
border: 1px solid hsl(0deg 0% 80%);
text-decoration: none;
color: hsl(0deg 0% 47%);
min-width: 5.7142em; /* 80px at 14px/em */
display: flex;
align-items: center;
height: 1.8429em; /* 25.8px at 14px/em */
&:hover,
&:focus {
border: 1px solid hsl(0deg 0% 61%);
.discard-button.save-discard-widget-button-text {
color: hsl(0deg 0% 18%);
}
}
&.primary {
background-color: hsl(156deg 30% 50%);
color: hsl(0deg 0% 100%);
border: 1px solid hsl(155deg 30% 50%);
&:hover,
&:focus {
background-color: hsl(166deg 35% 57%);
border: 1px solid hsl(166deg 35% 57%);
}
.save-discard-widget-button-icon {
font-weight: 400;
color: hsl(0deg 0% 100%);
}
&.saving {
background-color: hsl(156deg 14% 40%);
border-color: hsl(156deg 14% 40%);
display: flex;
}
}
&.save-button {
margin-right: 5px;
.save-discard-widget-button-loading {
display: none;
}
&.saving {
.save-discard-widget-button-icon {
display: none;
}
.save-discard-widget-button-loading {
display: block;
margin-right: 0.5em; /* 7px at 14px/em */
}
}
}
.save-discard-widget-button-icon {
margin-right: 3px;
font-size: 1.0714em; /* 15px at 14px/em */
font-weight: 400;
display: flex;
align-items: center;
}
}
}
.stream-privacy-type-icon {

14
web/styles/dark_theme.css
View File

@@ -553,20 +553,6 @@
}
}
#settings_page,
#stream_settings,
#user_group_settings {
.save-button-controls .discard-button {
color: hsl(0deg 0% 80%);
&:hover {
.save-discard-widget-button-text {
color: hsl(0deg 0% 100%);
}
}
}
}
.help_link_widget:hover {
color: inherit;
}

5
web/styles/settings.css
View File

@@ -261,7 +261,10 @@ h3,
margin-top: 9px;
}
.loading_indicator_spinner {
/* Don't apply these styling to the loading indicator inside the
action buttons, as the required CSS for them is already defined
in buttons.css */
.loading_indicator_spinner:not(.action-button .loading_indicator_spinner) {
width: 30%;
height: 1.4286em; /* 20px at 14px/em */
margin-top: 7px;

15
web/templates/settings/settings_save_discard_widget.hbs
View File

@@ -1,21 +1,10 @@
{{#unless show_only_indicator}}
<div class="save-button-controls hide">
<div class="inline-block subsection-changes-save">
<button class="save-discard-widget-button button primary save-button" data-status="save">
<span class="fa fa-spinner fa-spin save-discard-widget-button-loading"></span>
<span class="fa fa-check save-discard-widget-button-icon"></span>
<span class="save-discard-widget-button-text">
{{t 'Save changes' }}
</span>
</button>
{{> ../components/action_button custom_classes="save-button" attention="primary" intent="brand" label=(t "Save changes") }}
</div>
<div class="inline-block subsection-changes-discard">
<button class="save-discard-widget-button button discard-button">
<span class="fa fa-times save-discard-widget-button-icon"></span>
<span class="save-discard-widget-button-text">
{{t 'Discard' }}
</span>
</button>
{{> ../components/action_button custom_classes="discard-button" attention="quiet" intent="neutral" label=(t "Discard") }}
</div>
<div class="inline-block subsection-failed-status"><p class="hide"></p></div>
</div>

18
web/tests/settings_org.test.cjs
View File

@@ -16,6 +16,10 @@ mock_esm("../src/loading", {
make_indicator: noop,
destroy_indicator: noop,
});
mock_esm("../src/buttons", {
show_button_loading_indicator: noop,
hide_button_loading_indicator: noop,
});
mock_esm("../src/scroll_util", {scroll_element_into_container: noop});
set_global("document", "document-stub");
@@ -59,16 +63,16 @@ test("unloaded", () => {
function createSaveButtons(subsection) {
const $stub_save_button_header = $(`#org-${CSS.escape(subsection)}`);
const $save_button_controls = $(".save-button-controls");
const $stub_save_button = $(".save-discard-widget-button.save-button");
const $stub_discard_button = $(".save-discard-widget-button.discard-button");
const $stub_save_button_text = $(".save-discard-widget-button-text");
const $stub_save_button = $(".save-button");
const $stub_discard_button = $(".discard-button");
const $stub_save_button_text = $(".action-button-label");
$stub_save_button_header.set_find_results(
".subsection-failed-status p",
$("<failed-status-stub>"),
);
$stub_save_button.closest = () => $stub_save_button_header;
$save_button_controls.set_find_results(".save-button", $stub_save_button);
$stub_save_button.set_find_results(".save-discard-widget-button-text", $stub_save_button_text);
$stub_save_button.set_find_results(".action-button-label", $stub_save_button_text);
$stub_save_button_header.set_find_results(".save-button-controls", $save_button_controls);
$stub_save_button_header.set_find_results(
".subsection-changes-discard button",
@@ -144,7 +148,7 @@ function test_submit_settings_form(override, submit_form) {
$subsection_elem = $(`#org-${CSS.escape(subsection)}`);
$subsection_elem.set_find_results(".prop-element", [$realm_default_language_elem]);
submit_form.call({to_$: () => $(".save-discard-widget-button.save-button")}, ev);
submit_form.call({to_$: () => $(".save-button")}, ev);
assert.ok(patched);
const expected_value = {
@@ -185,9 +189,7 @@ function test_change_save_button_state() {
}
{
settings_components.change_save_button_state($save_button_controls, "saving");
assert.equal($save_button_text.text(), "translated: Saving");
assert.equal($save_button.attr("data-status"), "saving");
assert.equal($save_button.hasClass("saving"), true);
assert.equal($discard_button.visible(), false);
}
{
@@ -402,7 +404,7 @@ function test_discard_changes_button({override}, discard_changes) {
$discard_button_parent.set_find_results(".save-button-controls", $save_button_controls);
discard_changes.call({to_$: () => $(".save-discard-widget-button.discard-button")}, ev);
discard_changes.call({to_$: () => $(".discard-button")}, ev);
assert.equal(
$message_edit_history_visibility_policy.val(),