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

compose: Move buttons to popover in 2 batches instead of all at once.

Browse Source 
This ensures that there is never too much awkward empty space in the
row of buttons below the compose box.
This commit is contained in:
N-Shar-ma
2023-11-22 06:08:46 +05:30
committed by Tim Abbott
parent 143db56992
commit 9eeeabf877
7 changed files with 40 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
web/src/compose_popovers.js
View File

@@ -77,6 +77,7 @@ export function initialize() {
render_compose_control_buttons_popover({
giphy_enabled: giphy.is_giphy_enabled(),
preview_mode_on,
inside_popover: true,
}),
),
);

2
web/src/css_variables.js
View File

@@ -22,6 +22,7 @@ const mc = 849; // Middle column as wide as it appears after the `sm` breakpoint
const cb1 = 1240;
const cb2 = 998;
const cb3 = 676;
const cb4 = 448;
module.exports = {
media_breakpoints: {
@@ -37,6 +38,7 @@ module.exports = {
cb1_min: cb1 + "px",
cb2_min: cb2 + "px",
cb3_min: cb3 + "px",
cb4_min: cb4 + "px",
},
media_breakpoints_num: {

24
web/styles/compose.css
View File

@@ -967,7 +967,6 @@ textarea.new_message_textarea,
}
.compose-control-buttons-container {
margin-right: auto;
display: flex;
align-items: center;
@@ -1072,6 +1071,29 @@ textarea.new_message_textarea,
display: none;
}
}
.show_popover_buttons_2 {
display: flex;
align-items: center;
padding: 0;
margin: 0;
/* This is similar to show_popover_buttons, but it's only for those
compose buttons that we hide, and show in the popover only when the
screen gets extremely narrow. */
@media (width < $cb4_min) {
display: none;
}
}
&.show_cb4 {
display: none;
@media (width < $cb4_min) {
display: flex;
}
}
}
.message-send-controls {

4
web/templates/compose_control_buttons.hbs
View File

@@ -32,6 +32,10 @@
<div class="compose_control_button_container {{#unless giphy_enabled }}hide{{/unless}} preview_mode_disabled" data-tippy-content="{{t 'Add GIF' }}">
<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>
{{> popovers/compose_control_buttons/compose_control_buttons_in_popover_2}}
</div>
<div class="show_popover_buttons">
<div class="divider">|</div>
{{> popovers/compose_control_buttons/compose_control_buttons_in_popover}}

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

@@ -1,9 +1,4 @@
<div class="compose-control-buttons-container preview_mode_disabled">
<a role="button" data-format-type="link" class="compose_control_button fa fa-link formatting_button" aria-label="{{t 'Link' }}" {{#unless preview_mode_on}} tabindex=0 {{/unless}} data-tippy-content="{{t 'Link' }}"></a>
<a role="button" data-format-type="bold" class="compose_control_button fa fa-bold formatting_button" aria-label="{{t 'Bold' }}" {{#unless preview_mode_on}} tabindex=0 {{/unless}} data-tippy-content="{{t 'Bold' }}"></a>
<a role="button" data-format-type="italic" class="compose_control_button fa fa-italic formatting_button" aria-label="{{t 'Italic' }}" {{#unless preview_mode_on}} tabindex=0 {{/unless}} data-tippy-content="{{t 'Italic' }}"></a>
<a role="button" data-format-type="strikethrough" class="compose_control_button fa fa-strikethrough formatting_button" aria-label="{{t 'Strikethrough' }}" {{#unless preview_mode_on}} tabindex=0 {{/unless}} data-tippy-content="{{t 'Strikethrough' }}"></a>
<div class="divider">|</div>
<a role="button" data-format-type="numbered" class="compose_control_button fa fa-list-ol 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 fa fa-list-ul 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>

9
web/templates/popovers/compose_control_buttons/compose_control_buttons_in_popover_2.hbs Normal file
View File

@@ -0,0 +1,9 @@
<div class="compose-control-buttons-container preview_mode_disabled {{#if inside_popover}} show_cb4 {{/if}}">
<a role="button" data-format-type="link" class="compose_control_button fa fa-link formatting_button" aria-label="{{t 'Link' }}" {{#unless preview_mode_on}} tabindex=0 {{/unless}} data-tippy-content="{{t 'Link' }}"></a>
<a role="button" data-format-type="bold" class="compose_control_button fa fa-bold formatting_button" aria-label="{{t 'Bold' }}" {{#unless preview_mode_on}} tabindex=0 {{/unless}} data-tippy-content="{{t 'Bold' }}"></a>
<a role="button" data-format-type="italic" class="compose_control_button fa fa-italic formatting_button" aria-label="{{t 'Italic' }}" {{#unless preview_mode_on}} tabindex=0 {{/unless}} data-tippy-content="{{t 'Italic' }}"></a>
<a role="button" data-format-type="strikethrough" class="compose_control_button fa fa-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>
{{/if}}
</div>

1
web/templates/popovers/compose_control_buttons/compose_control_buttons_popover.hbs
View File

@@ -1,3 +1,4 @@
<div class="compose-control-buttons-container order-1 {{#if preview_mode_on}} preview_mode {{/if}}">
{{> compose_control_buttons_in_popover_2}}
{{> compose_control_buttons_in_popover}}
</div>