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: Refine breakpoints for new compose control buttons.

Browse Source 
This is a preparatory commit for new formatting buttons which are added
in the following commits.

Earlier we used multiple classes, each of which handled the hiding or
showing of the element it was applied to, at each breakpoint. Now all
the media queries of those classes have been combined into a new class,
for cleaner and more reusable code. This new combined media query is
also updated to accommodate the new formatting buttons.
This commit is contained in:
N-Shar-ma
2023-11-20 17:04:13 +05:30
committed by Tim Abbott
parent 3471e84d7f
commit 42fa4c0011
5 changed files with 39 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
web/src/css_variables.js
View File

@@ -17,6 +17,12 @@ const ms = 320; // Mobile small
// Breakpoints for middle column
const mc = 849; // Middle column as wide as it appears after the `sm` breakpoint
// Breakpoints for showing and hiding compose buttons which do not always fit in
// a single row below the compose box
const cb1 = 1240;
const cb2 = 998;
const cb3 = 676;
module.exports = {
media_breakpoints: {
xs_min: xs + "px",
@@ -28,6 +34,9 @@ module.exports = {
ml_min: ml + "px",
mm_min: mm + "px",
ms_min: ms + "px",
cb1_min: cb1 + "px",
cb2_min: cb2 + "px",
cb3_min: cb3 + "px",
},
media_breakpoints_num: {

34
web/styles/app_components.css
View File

@@ -28,51 +28,17 @@ kbd {
user-select: none;
}
@media (width < $mc_min) {
.hide-mc {
display: none !important;
}
.show-mc {
display: block !important;
}
}
@media (width < $md_min) {
.hide-md {
display: none !important;
}
.show-md {
display: flex !important;
}
}
@media (width < $sm_min) {
.hide-sm {
display: none !important;
}
.show-sm {
display: block !important;
}
#settings_page .save-button-controls {
display: block;
margin: 10px 0 0;
}
}
@media (width < $lg_min) {
.hide-lg {
display: none !important;
}
.show-lg {
display: block !important;
}
}
@media (width < $xl_min) {
.hide-xl {
display: none !important;

39
web/styles/compose.css
View File

@@ -975,10 +975,6 @@ textarea.new_message_textarea,
/* We use the selector in this manner to maintain specificity. */
.compose_control_button_container .compose_gif_icon {
font-size: 22px;
/* Remove top and bottom padding. This is necessary
* because `compose_gif_icon` is no longer a flex item. */
padding: 0 5px;
}
.compose_control_button {
@@ -1015,16 +1011,17 @@ textarea.new_message_textarea,
.compose_control_menu {
opacity: 1;
}
}
display: none;
.hide-sm,
.hide-lg {
display: flex;
align-items: center;
gap: 4px;
padding: 0;
margin: 0;
/* The media query below handles the hiding and showing of the
vdot menu icon, so that it is hidden when all compose buttons fit
in the main row below the compose box. So, this is the same as
the media query for .show_popover_buttons. */
@media (((width < $cb1_min) and (width >= $xl_min)) or ((width < $cb2_min) and (width >= $md_min)) or (width < $cb3_min)) {
display: flex;
}
}
}
.divider {
@@ -1046,6 +1043,22 @@ textarea.new_message_textarea,
font-size: 20px;
line-height: 17px;
}
.show_popover_buttons {
display: flex;
align-items: center;
padding: 0;
margin: 0;
/* We use this class for the div containing those compose buttons, which
we hide and show in a popover instead when they no longer fit in a
single row. The media query below handles the hiding and showing of the
buttons from the main row of compose buttons below the compose box. */
@media (((width < $cb1_min) and (width >= $xl_min)) or ((width < $cb2_min) and (width >= $md_min)) or (width < $cb3_min)) {
display: none;
}
}
}
.message-send-controls {

6
web/templates/compose_control_buttons.hbs
View File

@@ -22,11 +22,11 @@
<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="divider hide-sm show-md hide-mc">|</div>
<div class="{{#if message_id}}hide-lg{{else}}hide-sm show-md hide-mc{{/if}}">
<div class="show_popover_buttons">
<div class="divider">|</div>
{{> popovers/compose_control_buttons/compose_control_buttons_in_popover}}
</div>
<div class="compose_control_menu_wrapper" role="button" tabindex=0>
<a class="compose_control_button zulip-icon zulip-icon-more-vertical hide {{#if message_id}}show-lg{{else}}show-sm hide-md show-mc{{/if}} compose_control_menu" tabindex="-1" data-tippy-content="Compose actions"></a>
<a class="compose_control_button zulip-icon zulip-icon-more-vertical hide compose_control_menu" tabindex="-1" data-tippy-content="Compose actions"></a>
</div>
</div>

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

@@ -4,6 +4,6 @@
<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>
<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="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>
<div class="divider hide-sm show-md hide-mc">|</div>
<div class="divider">|</div>
</div>
<a role="button" class="compose_control_button compose_help_button fa fa-question" tabindex=0 data-tippy-content="{{t 'Message formatting' }}" data-overlay-trigger="message-formatting"></a>