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(
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-limit-indicator: hsl(38deg 100% 36%);
--color-limit-indicator-over-limit: hsl(3deg 80% 40%);
@ -1086,6 +1092,12 @@
--color-compose-embedded-button-background-interactive: hsl(
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-limit-indicator: hsl(38deg 100% 70%);
--color-limit-indicator-over-limit: hsl(3deg 80% 60%);

87
web/styles/compose.css
View File

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

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%);
& code {

16
web/templates/compose.hbs
View File

@ -12,29 +12,29 @@
</div>
<div id="compose_controls">
<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">
<button type="button" class="button compose_reply_button"
<button type="button" class="compose_reply_button"
id="left_bar_compose_reply_button_big">
{{t 'Compose message' }}
</button>
</div>
<button type="button" class="button compose_new_conversation_button"
<button type="button" class="compose_new_conversation_button"
id="new_conversation_button"
data-tooltip-template-id="new_stream_message_button_tooltip_template">
{{t 'Start new conversation' }}
</button>
</div>
<span class="new_message_button mobile_button_container">
<button type="button" class="button rounded compose_mobile_button"
<span class="mobile_button_container">
<button type="button" class="compose_mobile_button"
id="left_bar_compose_mobile_button_big"
data-tooltip-template-id="left_bar_compose_mobile_button_tooltip_template">
+
</button>
</span>
{{#unless embedded }}
<span class="new_message_button new_direct_message_button_container">
<button type="button" class="button rounded compose_new_direct_message_button"
<span class="new_direct_message_button_container">
<button type="button" class="compose_new_direct_message_button"
id="new_direct_message_button"
data-tooltip-template-id="new_direct_message_button_tooltip_template">
{{t 'New direct message' }}
@ -57,7 +57,7 @@
</div>
<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' }}" />
<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>
</button>
</div>