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

compose: Control formatting dividers with CSS.

Browse Source
This commit is contained in:
Karl Stolley
2024-12-16 12:16:50 -06:00
committed by Tim Abbott
parent b56c838688
commit f8cbff51e0
6 changed files with 15 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
web/styles/app_variables.css
View File

@@ -778,6 +778,7 @@
--color-message-content-container-border: hsl(0deg 0% 0% / 10%);
--color-message-content-container-border-focus: hsl(0deg 0% 57%);
--color-compose-control-button-background-hover: hsl(0deg 0% 0% / 5%);
--color-compose-formatting-button-divider: hsl(0deg 0% 75%);
--color-compose-focus-ring: var(--color-outline-focus);
/* Text colors */
@@ -1540,6 +1541,7 @@
--color-message-content-container-border-focus: hsl(0deg 0% 100% / 27%);
--color-message-content-container-border-over-limit: hsl(0deg 76% 65%);
--color-compose-control-button-background-hover: hsl(0deg 0% 100% / 5%);
--color-compose-formatting-button-divider: hsl(236deg 33% 90% / 25%);
--color-compose-focus-ring: hsl(0deg 0% 67%);
/* Text colors */

13
web/styles/compose.css
View File

@@ -1267,14 +1267,15 @@ textarea.new_message_textarea {
}
.divider {
color: hsl(0deg 0% 75%);
/* 20px at 14px/1em */
font-size: 1.4286em;
margin: 0 3px;
margin: 0 5px;
/* Coordinate with the value of
--compose-formatting-buttons-row-height */
/* 28px at 20px/1em */
height: 1.4em;
/* 22px at 14px/1em */
height: 1.5714em;
width: 1.5px;
/* Prevent dividers from growing or shrinking. */
flex: 0 0 auto;
background-color: var(--color-compose-formatting-button-divider);
@media (width < 400px) {
/* Remove at mobile widths to make more space

4
web/styles/dark_theme.css
View File

@@ -399,10 +399,6 @@
border-color: hsl(0deg 0% 0% / 90%);
}
.compose-control-buttons-container .divider {
color: hsl(236deg 33% 90% / 25%);
}
.compose_control_button:hover {
color: inherit;
}

6
web/templates/compose_control_buttons.hbs
View File

@@ -17,7 +17,7 @@
<div class="compose_control_button_container preview_mode_disabled" data-tippy-content="{{t 'Add voice call' }}">
<a role="button" class="compose_control_button zulip-icon zulip-icon-voice-call audio_link" aria-label="{{t 'Add voice call' }}" tabindex=0></a>
</div>
<div class="divider">|</div>
<div class="divider"></div>
<div class="compose_control_button_container preview_mode_disabled" data-tippy-content="{{t 'Add emoji' }}">
<a role="button" class="compose_control_button zulip-icon zulip-icon-smile-bigger emoji_map" aria-label="{{t 'Add emoji' }}" tabindex=0></a>
</div>
@@ -33,11 +33,11 @@
<a role="button" class="compose_control_button compose_gif_icon zulip-icon zulip-icon-gif" aria-label="{{t 'Add GIF' }}" tabindex=0></a>
</div>
<div class="show_popover_buttons_2">
<div class="divider">|</div>
<div class="divider"></div>
{{> popovers/compose_control_buttons/compose_control_buttons_in_popover_2 .}}
</div>
<div class="show_popover_buttons">
<div class="divider">|</div>
<div class="divider"></div>
{{> popovers/compose_control_buttons/compose_control_buttons_in_popover .}}
</div>
<div class="compose_control_menu_wrapper" role="button" tabindex=0>

4
web/templates/popovers/compose_control_buttons/compose_control_buttons_in_popover.hbs
View File

@@ -1,11 +1,11 @@
<div class="compose-control-buttons-container preview_mode_disabled">
<a role="button" data-format-type="numbered" class="compose_control_button zulip-icon zulip-icon-ordered-list formatting_button" aria-label="{{t 'Numbered list' }}" {{#unless preview_mode_on}} tabindex=0 {{/unless}} data-tippy-content="{{t 'Numbered list' }}"></a>
<a role="button" data-format-type="bulleted" class="compose_control_button zulip-icon zulip-icon-unordered-list formatting_button" aria-label="{{t 'Bulleted list' }}" {{#unless preview_mode_on}} tabindex=0 {{/unless}} data-tippy-content="{{t 'Bulleted list' }}"></a>
<div class="divider">|</div>
<div class="divider"></div>
<a role="button" data-format-type="quote" class="compose_control_button zulip-icon zulip-icon-quote formatting_button" aria-label="{{t 'Quote' }}" {{#unless preview_mode_on}} tabindex=0 {{/unless}} data-tippy-content="{{t 'Quote' }}"></a>
<a role="button" data-format-type="spoiler" class="compose_control_button zulip-icon zulip-icon-spoiler formatting_button" aria-label="{{t 'Spoiler' }}" {{#unless preview_mode_on}} tabindex=0 {{/unless}} data-tippy-content="{{t 'Spoiler' }}"></a>
<a role="button" data-format-type="code" class="compose_control_button zulip-icon zulip-icon-code formatting_button" aria-label="{{t 'Code' }}" {{#unless preview_mode_on}} tabindex=0 {{/unless}} data-tippy-content="{{t 'Code' }}"></a>
<a role="button" data-format-type="latex" class="compose_control_button zulip-icon zulip-icon-math formatting_button" aria-label="{{t 'Math (LaTeX)' }}" {{#unless preview_mode_on}} tabindex=0 {{/unless}} data-tippy-content="{{t 'Math (LaTeX)' }}"></a>
<div class="divider">|</div>
<div class="divider"></div>
</div>
<a role="button" class="compose_control_button compose_help_button zulip-icon zulip-icon-question" tabindex=0 data-tippy-content="{{t 'Message formatting' }}" data-overlay-trigger="message-formatting"></a>

2
web/templates/popovers/compose_control_buttons/compose_control_buttons_in_popover_2.hbs
View File

@@ -4,6 +4,6 @@
<a role="button" data-format-type="italic" class="compose_control_button zulip-icon zulip-icon-italic formatting_button" aria-label="{{t 'Italic' }}" {{#unless preview_mode_on}} tabindex=0 {{/unless}} data-tooltip-template-id="italic-tooltip" data-tippy-maxWidth="none"></a>
<a role="button" data-format-type="strikethrough" class="compose_control_button zulip-icon zulip-icon-strikethrough formatting_button" aria-label="{{t 'Strikethrough' }}" {{#unless preview_mode_on}} tabindex=0 {{/unless}} data-tippy-content="{{t 'Strikethrough' }}"></a>
{{#if inside_popover}}
<div class="divider">|</div>
<div class="divider"></div>
{{/if}}
</div>