Mirror
/
zulip
mirror of https://github.com/zulip/zulip.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

compose: Decouple compose buttons from button classes. 

In the 2024 redesigned button configurations, the compose buttons
become outliers. This retains their previous style inherited from
.button, allowing that base component class to move forward.
This commit is contained in:
Karl Stolley 2024-09-17 14:55:34 -05:00 committed by Tim Abbott
parent 5ddcbb8516
commit d73044ee57
4 changed files with 87 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
web/styles/app_variables.css
View File

@ -643,6 +643,12 @@
--color-compose-embedded-button-background-interactive: hsl( --color-compose-embedded-button-background-interactive: hsl(
231deg 100% 90% / 90% 231deg 100% 90% / 90%
); );
--color-background-compose-new-message-button: hsl(0deg 0% 100%);
--color-background-compose-new-message-button-hover: hsl(0deg 0% 100%);
--color-background-compose-new-message-button-active: hsl(0deg 0% 95%);
--color-border-compose-new-message-button: hsl(0deg 0% 80%);
--color-border-compose-new-message-button-hover: hsl(0deg 0% 60%);
--color-border-compose-new-message-button-active: hsl(0deg 0% 60%);
--color-compose-chevron-arrow: hsl(0deg 0% 58%); --color-compose-chevron-arrow: hsl(0deg 0% 58%);
--color-limit-indicator: hsl(38deg 100% 36%); --color-limit-indicator: hsl(38deg 100% 36%);
--color-limit-indicator-over-limit: hsl(3deg 80% 40%); --color-limit-indicator-over-limit: hsl(3deg 80% 40%);
@ -1086,6 +1092,12 @@
--color-compose-embedded-button-background-interactive: hsl( --color-compose-embedded-button-background-interactive: hsl(
235deg 100% 70% / 20% 235deg 100% 70% / 20%
); );
--color-background-compose-new-message-button: hsl(0deg 0% 0% / 20%);
--color-background-compose-new-message-button-hover: hsl(0deg 0% 0% / 15%);
--color-background-compose-new-message-button-active: hsl(0deg 0% 0% / 20%);
--color-border-compose-new-message-button: hsl(0deg 0% 0% / 60%);
--color-border-compose-new-message-button-hover: hsl(0deg 0% 0% / 60%);
--color-border-compose-new-message-button-active: hsl(0deg 0% 0% / 60%);
--color-background-popover: hsl(212deg 32% 14%); --color-background-popover: hsl(212deg 32% 14%);
--color-limit-indicator: hsl(38deg 100% 70%); --color-limit-indicator: hsl(38deg 100% 70%);
--color-limit-indicator-over-limit: hsl(3deg 80% 60%); --color-limit-indicator-over-limit: hsl(3deg 80% 60%);

67
web/styles/compose.css
View File

@ -9,27 +9,39 @@
reply button and the new-message button. */ reply button and the new-message button. */
align-items: stretch; align-items: stretch;
.new_message_button { .compose_mobile_button {
.button {
/* Keep the new message button sized to match /* Keep the new message button sized to match
adjacent buttons. */ adjacent buttons. */
font-size: inherit;
min-width: inherit; min-width: inherit;
line-height: var(--line-height-compose-buttons);
padding: 3px 10px; padding: 3px 10px;
} border-radius: 4px;
outline: none;
.compose_mobile_button {
/* This is ugly, but necessary to use the /* This is ugly, but necessary to use the
text + for the compose button. An icon text + for the compose button. An icon
would likely be a better choice here. would likely be a better choice here.
1.2em is 16.8px at 14px em. */ 1.2em is 16.8px at 14px em. */
font-size: 1.2em !important; font-size: 1.2em;
/* 1.2em is 16.8px at 14px em; this /* 1.2em is 16.8px at 14px em; this
maintains the 20px em-equivalent compose maintains the 20px em-equivalent compose
line height, but at a 16.8px em. */ line height, but at a 16.8px em. */
line-height: 1.19em !important; line-height: 1.19em;
font-weight: 400; font-weight: 400;
color: var(--color-text-default);
background-color: var(--color-background-compose-new-message-button);
border: 1px solid var(--color-border-compose-new-message-button);
&:hover {
background-color: var(
--color-background-compose-new-message-button-hover
);
border-color: var(--color-border-compose-new-message-button-hover);
}
&:active {
background-color: var(
--color-background-compose-new-message-button-active
);
border-color: var(--color-border-compose-new-message-button-hover);
} }
} }
@ -60,8 +72,14 @@
#left_bar_compose_reply_button_big, #left_bar_compose_reply_button_big,
#new_conversation_button { #new_conversation_button {
/* Remove the border inherited from `.button` styles. */ /* Keep the new message button sized to match
adjacent buttons. */
font-size: inherit;
min-width: inherit;
padding: 3px 10px;
outline: none;
border: none; border: none;
color: var(--color-text-default);
background: var(--color-compose-embedded-button-background); background: var(--color-compose-embedded-button-background);
border-radius: 3px; border-radius: 3px;
line-height: var(--line-height-compose-buttons); line-height: var(--line-height-compose-buttons);
@ -83,7 +101,6 @@
#new_conversation_button { #new_conversation_button {
/* Remove the `padding` to prevent margin from affecting parent height. */ /* Remove the `padding` to prevent margin from affecting parent height. */
padding: 0 10px; padding: 0 10px;
/* Removing the `min-width` inherited from the `.button` styles. */
min-width: inherit; min-width: inherit;
margin: 1px; margin: 1px;
flex-shrink: 0; flex-shrink: 0;
@ -115,6 +132,34 @@
display: none !important; display: none !important;
} }
} }
#new_direct_message_button {
/* Keep the new message button sized to match
adjacent buttons. */
font-size: inherit;
min-width: inherit;
line-height: var(--line-height-compose-buttons);
padding: 3px 10px;
border-radius: 4px;
outline: none;
color: var(--color-text-default);
background-color: var(--color-background-compose-new-message-button);
border: 1px solid var(--color-border-compose-new-message-button);
&:hover {
background-color: var(
--color-background-compose-new-message-button-hover
);
border-color: var(--color-border-compose-new-message-button-hover);
}
&:active {
background-color: var(
--color-background-compose-new-message-button-active
);
border-color: var(--color-border-compose-new-message-button-hover);
}
}
} }
/* Main geometry for this element is in zulip.css */ /* Main geometry for this element is in zulip.css */

2
web/styles/dark_theme.css
View File

@ -26,7 +26,7 @@
} }
} }
& a:hover { & a:not(.button, .compose_control_button):hover {
color: hsl(200deg 79% 66%); color: hsl(200deg 79% 66%);
& code { & code {

16
web/templates/compose.hbs
View File

@ -12,29 +12,29 @@
</div> </div>
<div id="compose_controls"> <div id="compose_controls">
<div id="compose_buttons"> <div id="compose_buttons">
<div class="new_message_button reply_button_container"> <div class="reply_button_container">
<div class="compose-reply-button-wrapper" data-reply-button-type="selected_message"> <div class="compose-reply-button-wrapper" data-reply-button-type="selected_message">
<button type="button" class="button compose_reply_button" <button type="button" class="compose_reply_button"
id="left_bar_compose_reply_button_big"> id="left_bar_compose_reply_button_big">
{{t 'Compose message' }} {{t 'Compose message' }}
</button> </button>
</div> </div>
<button type="button" class="button compose_new_conversation_button" <button type="button" class="compose_new_conversation_button"
id="new_conversation_button" id="new_conversation_button"
data-tooltip-template-id="new_stream_message_button_tooltip_template"> data-tooltip-template-id="new_stream_message_button_tooltip_template">
{{t 'Start new conversation' }} {{t 'Start new conversation' }}
</button> </button>
</div> </div>
<span class="new_message_button mobile_button_container"> <span class="mobile_button_container">
<button type="button" class="button rounded compose_mobile_button" <button type="button" class="compose_mobile_button"
id="left_bar_compose_mobile_button_big" id="left_bar_compose_mobile_button_big"
data-tooltip-template-id="left_bar_compose_mobile_button_tooltip_template"> data-tooltip-template-id="left_bar_compose_mobile_button_tooltip_template">
+ +
</button> </button>
</span> </span>
{{#unless embedded }} {{#unless embedded }}
<span class="new_message_button new_direct_message_button_container"> <span class="new_direct_message_button_container">
<button type="button" class="button rounded compose_new_direct_message_button" <button type="button" class="compose_new_direct_message_button"
id="new_direct_message_button" id="new_direct_message_button"
data-tooltip-template-id="new_direct_message_button_tooltip_template"> data-tooltip-template-id="new_direct_message_button_tooltip_template">
{{t 'New direct message' }} {{t 'New direct message' }}
@ -57,7 +57,7 @@
</div> </div>
<div id="compose_recipient_box"> <div id="compose_recipient_box">
<input type="text" name="stream_message_recipient_topic" id="stream_message_recipient_topic" maxlength="{{ max_topic_length }}" value="" placeholder="{{t 'Topic' }}" autocomplete="off" tabindex="0" aria-label="{{t 'Topic' }}" /> <input type="text" name="stream_message_recipient_topic" id="stream_message_recipient_topic" maxlength="{{ max_topic_length }}" value="" placeholder="{{t 'Topic' }}" autocomplete="off" tabindex="0" aria-label="{{t 'Topic' }}" />
<button type="button" id="recipient_box_clear_topic_button" class="button tippy-zulip-delayed-tooltip" data-tippy-content="{{t 'Clear topic' }}" tabindex="-1"> <button type="button" id="recipient_box_clear_topic_button" class="tippy-zulip-delayed-tooltip" data-tippy-content="{{t 'Clear topic' }}" tabindex="-1">
<i class="zulip-icon zulip-icon-close"></i> <i class="zulip-icon zulip-icon-close"></i>
</button> </button>
</div> </div>