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

user_card_popover: Reposition bot owner field and display as user pill.

Browse Source 
This commit repositions the bot owner field from below the bot’s name to
align with the user fields, providing more space for the newly added
bot owner user pill.
This commit is contained in:
Sayam Samal
2024-07-25 04:12:12 +05:30
committed by Tim Abbott
parent 8ace23ffa9
commit 5590c704ca
4 changed files with 42 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
web/src/user_card_popover.js
View File

@@ -708,15 +708,6 @@ function register_click_handlers() {
e.preventDefault();
});
$("body").on("click", ".view_bot_owner_user_profile", (e) => {
const user_id = Number.parseInt($(e.currentTarget).attr("data-user-id"), 10);
const user = people.get_by_user_id(user_id);
const $target = $(e.currentTarget).closest(".popover-menu-user-type");
toggle_user_card_popover($target, user);
e.stopPropagation();
e.preventDefault();
});
$("body").on("click", ".view_user_profile, .person_picker .pill[data-user-id]", (e) => {
const user_id = Number.parseInt($(e.currentTarget).attr("data-user-id"), 10);
const user = people.get_by_user_id(user_id);

2
web/styles/app_variables.css
View File

@@ -795,6 +795,7 @@
/* Input pills */
--color-background-input-pill: hsl(237deg 68% 94%);
--color-background-input-pill-hover: hsl(240deg 70% 70% / 30%);
--color-focus-outline-input-pill: hsl(240deg 50% 50%);
--color-input-pill-close: hsl(240deg 60% 65%);
--color-background-input-pill-exit-hover: hsla(240deg 70% 70% / 15%);
@@ -1220,6 +1221,7 @@
/* Input pills */
--color-background-input-pill: hsl(240deg 65% 60% / 22%);
--color-background-input-pill-hover: hsl(240deg 52% 60% / 45%);
--color-focus-outline-input-pill: hsl(0deg 0% 100% / 60%);
--color-input-pill-close: hsl(240deg 50% 74%);
--color-background-input-pill-exit-hover: hsl(0deg 0% 100% / 7%);

33
web/styles/popovers.css
View File

@@ -122,8 +122,7 @@
--box-shadow-popover-menu: var(--box-shadow-gear-menu);
}
.user_full_name,
.bot_owner {
.user_full_name {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
@@ -132,6 +131,36 @@
.user-card-popover-actions {
--color-text-item: var(--color-text-user-card-secondary);
.user-card-popover-bot-owner-field {
&.text-item {
align-items: center;
white-space: nowrap;
}
.pill-container {
border: none !important;
}
.pill {
border: none;
text-decoration: none;
color: var(--color-text-popover-menu);
background-color: var(--color-background-text-direct-mention);
&:hover {
color: var(--color-text-popover-menu);
background-color: var(
--color-background-text-hover-direct-mention
);
text-decoration: none;
}
}
}
.pill-container {
padding: 0;
}
.custom-profile-field-value {
display: flex;
align-items: center;

16
web/templates/popovers/user_card/user_card_popover.hbs
View File

@@ -15,13 +15,7 @@
</div>
<div class="popover-menu-user-type">
{{#if is_bot}}
{{#if bot_owner}}
<div class="bot_owner" data-tippy-content="{{ bot_owner.full_name }}">{{t "Owner" }}:
<span class="bot-owner-name view_bot_owner_user_profile" data-user-id='{{ bot_owner.user_id }}'>
{{bot_owner.full_name}}
</span>
</div>
{{else if is_system_bot}}
{{#if is_system_bot}}
<div>{{t "System bot" }}</div>
{{else}}
<div>{{t "Bot" }}</div>
@@ -123,6 +117,14 @@
</li>
{{/if}}
<li role="separator" class="popover-menu-separator hidden-for-spectators"></li>
{{#if is_bot}}
{{#if bot_owner}}
<li role="none" class="popover-menu-list-item user-card-popover-bot-owner-field text-item hidden-for-spectators">
<span class="bot_owner" data-tippy-content="{{ bot_owner.full_name }}">{{t "Bot owner" }}:</span>
{{> ../../user_display_only_pill display_value=bot_owner.full_name user_id=bot_owner.user_id img_src=bot_owner.avatar_url is_active=true}}
</li>
{{/if}}
{{/if}}
{{#if is_active }}
{{#if user_email}}
<li role="none" class="popover-menu-list-item text-item user-card-popover-email-field hidden-for-spectators">