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

organization-settings: Redesign the buttons in the Users tab of organization settings.

Browse Source 
- Manage user button -> Neutral icon
- Deactivate user button -> Danger icon
- Reactivate user button -> Success icon

Fixes part of #34200.
This commit is contained in:
Maneesh Shukla
2025-03-30 00:49:02 +05:30
committed by Tim Abbott
parent 5b46d43f54
commit 61acebf0ce
5 changed files with 45 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
web/src/settings_users.ts
View File

@@ -123,14 +123,14 @@ export function update_view_on_deactivate(user_id: number, is_bot: boolean): voi
const $button = $row.find("button.deactivate"); const $button = $row.find("button.deactivate");
$button.prop("disabled", false); $button.prop("disabled", false);
$row.find("i.deactivated-user-icon").show(); $row.find("i.deactivated-user-icon").show();
$button.addClass("button-warning reactivate"); $button.addClass("icon-button-success reactivate");
$button.removeClass("button-danger deactivate"); $button.removeClass("icon-button-danger deactivate");
if (is_bot) { if (is_bot) {
$button.addClass("reactivate-bot-tooltip"); $button.closest("span").addClass("reactivate-bot-tooltip");
$button.removeClass("deactivate-bot-tooltip"); $button.closest("span").removeClass("deactivate-bot-tooltip");
} else { } else {
$button.addClass("reactivate-user-tooltip"); $button.closest("span").addClass("reactivate-user-tooltip");
$button.removeClass("deactivate-user-tooltip"); $button.closest("span").removeClass("deactivate-user-tooltip");
} }
$button $button
.empty() .empty()
@@ -160,14 +160,14 @@ export function update_view_on_reactivate(user_id: number, is_bot: boolean): voi
const $button = $row.find("button.reactivate"); const $button = $row.find("button.reactivate");
$row.find("i.deactivated-user-icon").hide(); $row.find("i.deactivated-user-icon").hide();
$button.addClass("button-danger deactivate"); $button.addClass("icon-button-danger deactivate");
$button.removeClass("button-warning reactivate"); $button.removeClass("icon-button-success reactivate");
if (is_bot) { if (is_bot) {
$button.addClass("deactivate-bot-tooltip"); $button.closest("span").addClass("deactivate-bot-tooltip");
$button.removeClass("reactivate-bot-tooltip"); $button.closest("span").removeClass("reactivate-bot-tooltip");
} else { } else {
$button.addClass("deactivate-user-tooltip"); $button.closest("span").addClass("deactivate-user-tooltip");
$button.removeClass("reactivate-user-tooltip"); $button.closest("span").removeClass("reactivate-user-tooltip");
} }
$button $button
.empty() .empty()
@@ -749,7 +749,7 @@ function handle_edit_form($tbody: JQuery): void {
e.stopPropagation(); e.stopPropagation();
e.preventDefault(); e.preventDefault();
const user_id = Number.parseInt($(this).attr("data-user-id")!, 10); const user_id = Number.parseInt($(this).closest("tr").attr("data-user-id")!, 10);
if (people.is_my_user_id(user_id)) { if (people.is_my_user_id(user_id)) {
browser_history.go_to_location("#settings/profile"); browser_history.go_to_location("#settings/profile");
return; return;

8
web/src/tippyjs.ts
View File

@@ -507,16 +507,16 @@ export function initialize(): void {
target: ".user_row .actions button", target: ".user_row .actions button",
trigger: "mouseenter", trigger: "mouseenter",
onShow(instance) { onShow(instance) {
if ($(instance.reference).hasClass("deactivate-user-tooltip")) { if ($(instance.reference).closest("span").hasClass("deactivate-user-tooltip")) {
instance.setContent($t({defaultMessage: "Deactivate user"})); instance.setContent($t({defaultMessage: "Deactivate user"}));
return undefined; return undefined;
} else if ($(instance.reference).hasClass("reactivate-user-tooltip")) { } else if ($(instance.reference).closest("span").hasClass("reactivate-user-tooltip")) {
instance.setContent($t({defaultMessage: "Reactivate user"})); instance.setContent($t({defaultMessage: "Reactivate user"}));
return undefined; return undefined;
} else if ($(instance.reference).hasClass("deactivate-bot-tooltip")) { } else if ($(instance.reference).closest("span").hasClass("deactivate-bot-tooltip")) {
instance.setContent($t({defaultMessage: "Deactivate bot"})); instance.setContent($t({defaultMessage: "Deactivate bot"}));
return undefined; return undefined;
} else if ($(instance.reference).hasClass("reactivate-bot-tooltip")) { } else if ($(instance.reference).closest("span").hasClass("reactivate-bot-tooltip")) {
instance.setContent($t({defaultMessage: "Reactivate bot"})); instance.setContent($t({defaultMessage: "Reactivate bot"}));
return undefined; return undefined;
} }

8
web/styles/settings.css
View File

@@ -1310,14 +1310,6 @@ label.preferences-radio-choice-label {
margin-right: 1px; margin-right: 1px;
} }
.manage-user-button,
.deactivate-user-button,
.reactivate-user-button {
display: inline-flex;
align-items: center;
min-height: 35px;
}
.download_bot_zuliprc, .download_bot_zuliprc,
.copy_zuliprc, .copy_zuliprc,
.open_bots_subscribed_streams, .open_bots_subscribed_streams,

1
web/templates/components/icon_button.hbs
View File

@@ -1,5 +1,6 @@
<button type="button" {{#if id}}id="{{id}}"{{/if}} class="{{#if custom_classes}}{{custom_classes}} {{/if}}icon-button {{#if squared}}icon-button-square {{/if}}icon-button-{{intent}} {{#if hidden}}hide{{/if}}" {{#if data-tooltip-template-id}}data-tooltip-template-id="{{data-tooltip-template-id}}"{{/if}} tabindex="0" {{#if aria-label}}aria-label="{{aria-label}}"{{/if}} <button type="button" {{#if id}}id="{{id}}"{{/if}} class="{{#if custom_classes}}{{custom_classes}} {{/if}}icon-button {{#if squared}}icon-button-square {{/if}}icon-button-{{intent}} {{#if hidden}}hide{{/if}}" {{#if data-tooltip-template-id}}data-tooltip-template-id="{{data-tooltip-template-id}}"{{/if}} tabindex="0" {{#if aria-label}}aria-label="{{aria-label}}"{{/if}}
{{#if data-tippy-content}}data-tippy-content="{{data-tippy-content}}"{{/if}} {{#if data-tippy-content}}data-tippy-content="{{data-tippy-content}}"{{/if}}
{{#if disabled}}disabled{{/if}}
> >
<i class="zulip-icon zulip-icon-{{icon}}" aria-hidden="true"></i> <i class="zulip-icon zulip-icon-{{icon}}" aria-hidden="true"></i>
</button> </button>

38
web/templates/settings/settings_user_list_row.hbs
View File

@@ -39,21 +39,37 @@
{{#if can_modify}} {{#if can_modify}}
<td class="actions"> <td class="actions">
<span class="user-status-settings"> <span class="user-status-settings">
<span {{#if (and is_bot cannot_edit)}}class="tippy-zulip-tooltip"{{/if}} {{#if (and is_bot cannot_edit)}}data-tippy-content="{{t 'This bot cannot be edited.'}}"{{/if}}> <span class="{{#if (and is_bot cannot_edit)}}tippy-zulip-tooltip{{else}}tippy-zulip-delayed-tooltip{{/if}}"
<button class="button rounded small button-warning open-user-form tippy-zulip-delayed-tooltip manage-user-button" data-tippy-content="{{#if is_bot}}{{#unless cannot_edit}}{{t 'Manage bot' }}{{/unless}}{{else}}{{t 'Manage user' }}{{/if}}" data-user-id="{{user_id}}" {{#if cannot_edit}}disabled="disabled"{{/if}}> {{#if (and is_bot cannot_edit)}}
<i class="zulip-icon zulip-icon-user-cog" aria-hidden="true"></i> data-tippy-content="{{t 'This bot cannot be managed.'}}"
</button> {{else}}
data-tippy-content="{{#if is_bot}}{{#unless cannot_edit}}{{t 'Manage bot'}}{{/unless}}{{else}}{{t 'Manage user'}}{{/if}}"
{{/if}}>
{{> ../components/icon_button
icon="user-cog"
intent="neutral"
custom_classes="open-user-form manage-user-button"
disabled=cannot_edit
}}
</span> </span>
{{#if is_active}} {{#if is_active}}
<span {{#if cannot_deactivate}}class="tippy-zulip-tooltip"{{/if}} {{#if (and is_bot cannot_deactivate)}}data-tippy-content="{{t 'This bot cannot be deactivated.'}}"{{else if cannot_deactivate}}data-tippy-content="{{t 'This user cannot be deactivated.'}}"{{/if}}> <span class="{{#if is_bot}}deactivate-bot-tooltip{{else}}deactivate-user-tooltip{{/if}} {{#if cannot_deactivate}}tippy-zulip-tooltip{{/if}}"
<button class="button rounded small button-danger deactivate deactivate-user-button {{#if is_bot}}deactivate-bot-tooltip{{else}}deactivate-user-tooltip{{/if}}" {{#if cannot_deactivate}}disabled="disabled"{{/if}}> {{#if (and is_bot cannot_deactivate)}}data-tippy-content="{{t 'This bot cannot be deactivated.'}}"{{else if cannot_deactivate}}data-tippy-content="{{t 'This user cannot be deactivated.'}}"{{/if}}>
<i class="zulip-icon zulip-icon-user-x" aria-hidden="true"></i> {{> ../components/icon_button
</button> icon="user-x"
intent="danger"
custom_classes="deactivate deactivate-user-button"
disabled=cannot_deactivate
}}
</span> </span>
{{else}} {{else}}
<button class="button rounded small button-warning reactivate reactivate-user-button {{#if is_bot}}reactivate-bot-tooltip{{else}}reactivate-user-tooltip{{/if}}"> <span class="{{#if is_bot}}reactivate-bot-tooltip{{else}}reactivate-user-tooltip{{/if}}">
<i class="zulip-icon zulip-icon-user-plus" aria-hidden="true"></i> {{> ../components/icon_button
</button> icon="user-plus"
intent="success"
custom_classes="reactivate reactivate-user-button"
}}
</span>
{{/if}} {{/if}}
</span> </span>
</td> </td>