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

user_profile_modal: Use icon button component for modal header buttons.

Browse Source 
This commit updates the modal header buttons to use the icon button
component.

Fixes part of #33027.
This commit is contained in:
Sayam Samal
2025-04-02 05:43:56 +05:30
committed by Tim Abbott
parent 47419fbfc3
commit 0e7a5c1774
5 changed files with 21 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
web/src/user_profile.ts
View File

@@ -1449,12 +1449,14 @@ export function initialize(): void {
},
);
$("body").on("click", "#user-profile-modal #name .user-profile-manage-own-edit-button", () => {
browser_history.go_to_location("#settings/profile");
hide_user_profile();
});
/* These click handlers are implemented as just deep links to the
* relevant part of the Zulip UI, so we don't want preventDefault,
* but we do want to close the modal when you click them. */
$("body").on("click", "#user-profile-modal #name .user-profile-manage-own-edit-button", () => {
hide_user_profile();
});
$("body").on("click", "#user-profile-modal .user-profile-channel-list-item", () => {
hide_user_profile();
@@ -1484,7 +1486,7 @@ export function initialize(): void {
new ClipboardJS(".copy-link-to-user-profile", {
text(trigger) {
const user_id = $(trigger).attr("data-user-id");
const user_id = $(trigger).closest("#user-profile-modal").attr("data-user-id");
const user_profile_link = window.location.origin + "/#user/" + user_id;
return user_profile_link;

11
web/styles/dark_theme.css
View File

@@ -18,17 +18,6 @@
}
/************************* MODAL DARK THEME *******************/
.user-profile-manage-own-edit-button,
.user-profile-manage-others-edit-button,
.user-profile-manage-own-copy-link-button {
color: hsl(200deg 100% 50%);
cursor: pointer;
&:hover {
color: hsl(200deg 79% 66%);
}
}
.modal__content.simplebar-scrollable-y + .modal__footer {
border-top: 1px solid hsl(0deg 0% 100% / 20%);
}

11
web/styles/modal.css
View File

@@ -100,17 +100,6 @@
overflow: hidden;
text-overflow: ellipsis;
}
.user-profile-manage-own-edit-button,
.user-profile-manage-others-edit-button,
.user-profile-manage-own-copy-link-button {
color: hsl(200deg 100% 50%);
cursor: pointer;
&:hover {
color: hsl(200deg 100% 25%);
}
}
}
.modal__close {

19
web/styles/popovers.css
View File

@@ -450,24 +450,9 @@ ul.popover-group-menu-member-list {
}
}
.user-profile-manage-own-edit-button,
.user-profile-manage-others-edit-button {
.user-profile-header-actions {
display: flex;
text-decoration: none;
/* 15px at 22px/1em */
font-size: 0.6818em;
}
.user-profile-manage-own-copy-link-button {
display: flex;
/* 19px at 22px/1em */
font-size: 0.8638em;
text-decoration: none;
}
.zulip-icon-link,
.zulip-icon-edit {
vertical-align: middle;
gap: 5px;
}
.deactivated-user-icon {

26
web/templates/user_profile_modal.hbs
View File

@@ -18,19 +18,19 @@
<i class="zulip-icon zulip-icon-bot" aria-hidden="true"></i>
{{/if}}
<span class="user-profile-name">{{> user_full_name name=full_name}}</span>
<a class="copy-link-to-user-profile user-profile-manage-own-copy-link-button" tabindex="0" data-user-id="{{user_id}}">
<i class="zulip-icon zulip-icon-link tippy-zulip-tooltip " data-tippy-content="{{t 'Copy link to profile' }}" aria-hidden="true"></i>
</a>
{{#if is_me}}
<a class="user-profile-manage-own-edit-button" href="/#settings/profile">
<i class="zulip-icon zulip-icon-edit tippy-zulip-tooltip" data-tippy-content="{{t 'Edit profile' }}" aria-hidden="true"></i>
</a>
{{/if}}
{{#if can_manage_profile}}
<div class="user-profile-manage-others-edit-button">
<i class="zulip-icon zulip-icon-edit tippy-zulip-tooltip" data-tippy-content="{{#if is_bot}}{{t 'Manage bot'}}{{else}}{{t 'Manage user' }}{{/if}}" aria-hidden="true"></i>
</div>
{{/if}}
<span class="user-profile-header-actions">
{{> components/icon_button custom_classes="copy-link-to-user-profile tippy-zulip-delayed-tooltip" icon="link-alt" intent="neutral" data-tippy-content=(t "Copy link to profile") aria-label=(t "Copy link to profile") }}
{{#if is_me}}
{{> components/icon_button custom_classes="user-profile-manage-own-edit-button tippy-zulip-delayed-tooltip" icon="edit" intent="neutral" data-tippy-content=(t "Edit profile") aria-label=(t "Edit profile") }}
{{/if}}
{{#if can_manage_profile}}
{{#if is_bot}}
{{> components/icon_button custom_classes="user-profile-manage-others-edit-button tippy-zulip-delayed-tooltip" icon="edit" intent="neutral" data-tippy-content=(t "Manage bot") aria-label=(t "Manage bot") }}
{{else}}
{{> components/icon_button custom_classes="user-profile-manage-others-edit-button tippy-zulip-delayed-tooltip" icon="edit" intent="neutral" data-tippy-content=(t "Manage user") aria-label=(t 'Manage user') }}
{{/if}}
{{/if}}
</span>
</h1>
<button class="modal__close" aria-label="{{t 'Close modal' }}" data-micromodal-close></button>
</div>