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

compose: Rename classes, CSS vars to reflect attention level.

Browse Source
This commit is contained in:
Karl Stolley
2025-06-20 12:53:30 -05:00
committed by Tim Abbott
parent e19b815eaf
commit 062b83bfec
5 changed files with 23 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
web/src/compose_actions.ts
View File

@@ -93,7 +93,7 @@ function hide_box(): void {
$("#compose_controls").show();
// Assume a muted recipient row for the next time
// the compose box is reopened
$("#compose-recipient").addClass("muted-recipient-row");
$("#compose-recipient").addClass("low-attention-recipient-row");
$("#compose").removeClass("compose-box-open");
}

6
web/src/compose_recipient.ts
View File

@@ -69,9 +69,9 @@ export let update_recipient_row_attention_level = (): void => {
compose_state.has_full_recipient() &&
!compose_state.is_recipient_edited_manually()
) {
$("#compose-recipient").toggleClass("muted-recipient-row", true);
$("#compose-recipient").toggleClass("low-attention-recipient-row", true);
} else {
$("#compose-recipient").toggleClass("muted-recipient-row", false);
$("#compose-recipient").toggleClass("low-attention-recipient-row", false);
}
};
@@ -82,7 +82,7 @@ export function rewire_update_recipient_row_attention_level(
}
export function set_high_attention_recipient_row(): void {
$("#compose-recipient").removeClass("muted-recipient-row");
$("#compose-recipient").removeClass("low-attention-recipient-row");
}
export let update_narrow_to_recipient_visibility = (): void => {

6
web/styles/app_variables.css
View File

@@ -523,8 +523,8 @@
}
/* Compose-specific transitions and delays. */
--compose-muted-recipient-row-transition-delay: 100ms;
--compose-muted-recipient-row-transition: 150ms ease;
--compose-recipient-row-transition-delay: 100ms;
--compose-recipient-row-transition: 150ms ease;
/*
User group info popover elements and values.
@@ -1825,7 +1825,7 @@
hsl(237deg 68% 94% / 50%),
hsl(240deg 65% 60% / 60%)
);
--color-outline-muted-input-pill: light-dark(
--color-outline-low-attention-input-pill: light-dark(
hsl(237deg 68% 88%),
hsl(240deg 65% 60% / 22%)
);

38
web/styles/compose.css
View File

@@ -1227,38 +1227,30 @@ textarea.new_message_textarea {
to the topic box) show instant changes, so we don't need to
accommodate them here. */
#compose.compose-box-open:hover {
.muted-recipient-row {
.low-attention-recipient-row {
#compose_select_recipient_widget,
#compose_recipient_box,
#compose-direct-recipient .pill-container {
transition: var(--compose-muted-recipient-row-transition);
transition-delay: var(
--compose-muted-recipient-row-transition-delay
);
transition: var(--compose-recipient-row-transition);
transition-delay: var(--compose-recipient-row-transition-delay);
transition-property: background-color, border-color;
}
#compose_select_recipient_widget .channel-privacy-type-icon {
transition: var(--compose-muted-recipient-row-transition);
transition-delay: var(
--compose-muted-recipient-row-transition-delay
);
transition: var(--compose-recipient-row-transition);
transition-delay: var(--compose-recipient-row-transition-delay);
transition-property: color;
}
#recipient_box_clear_topic_button {
transition: var(--compose-muted-recipient-row-transition);
transition-delay: var(
--compose-muted-recipient-row-transition-delay
);
transition: var(--compose-recipient-row-transition);
transition-delay: var(--compose-recipient-row-transition-delay);
transition-property: color, background-color, opacity;
}
#compose-direct-recipient .pill {
transition: var(--compose-muted-recipient-row-transition);
transition-delay: var(
--compose-muted-recipient-row-transition-delay
);
transition: var(--compose-recipient-row-transition);
transition-delay: var(--compose-recipient-row-transition-delay);
transition-property: outline-color;
}
@@ -1267,17 +1259,15 @@ textarea.new_message_textarea {
.zulip-icon-chevron-down,
.conversation-arrow,
#stream_message_recipient_topic {
transition: var(--compose-muted-recipient-row-transition);
transition-delay: var(
--compose-muted-recipient-row-transition-delay
);
transition: var(--compose-recipient-row-transition);
transition-delay: var(--compose-recipient-row-transition-delay);
transition-property: opacity;
}
}
}
}
.muted-recipient-row {
.low-attention-recipient-row {
&#compose-recipient {
.decorated-channel-name,
.conversation-arrow,
@@ -1298,9 +1288,9 @@ textarea.new_message_textarea {
/* Particularly in light mode, pill colors are almost identical
to the compose-box background. We place a higher-contrast
outline on them in the muted state. */
outline on them in the low-attention state. */
.pill {
outline: 1px solid var(--color-outline-muted-input-pill);
outline: 1px solid var(--color-outline-low-attention-input-pill);
}
&:hover {

4
web/templates/compose.hbs
View File

@@ -49,14 +49,14 @@
<form id="send_message_form" action="/json/messages" method="post">
<div class="compose_table">
<div id="compose_top">
{{!-- We start with the muted-recipient-row class
{{!-- We start with the low-attention-recipient-row class
on the template to avoid showing the transition
when the compose box first opens. Note that this
class is immediately removed when it's not used,
so, for example, opening the compose box from
Inbox view does not cause any flash of unwanted
styling. --}}
<div id="compose-recipient" class="muted-recipient-row">
<div id="compose-recipient" class="low-attention-recipient-row">
{{> dropdown_widget_wrapper
widget_name="compose_select_recipient"}}
<div class="topic-marker-container">