Objectives are to make the width of overlay scale with font size and
reduce too much gap between text end of first column and
text start of the other column.
A new css variable is created with the same blue color in light theme as
`color-outline-focus`, and gray color in dark theme, and is used for the
focus-visible state of the compose control buttons, the compose close
button, and the send later vdots button.
We divide functionality into that for "full_size" and "expanded", which
are identical for now.
This is a prep commit for adding an intermediate expanded screen size.
The row of buttons is placed using CSS grid template areas so that
visually it is now inside the bottom edge of the textbox. The color of
the buttons row and individual buttons is changed to match the color of
the textbox. All textbox border / box shadow properties are now applied
to its parent instead which is extended under the buttons' row, so that
its border snuggly fits around the buttons row too.
Notable side effects:
- In dark mode the textbox in focused state now has a light border which
does not match the recipient input's current border which doesn't change
when focused. Likely, the recipient input should be updated to match the
textbox's border color.
- The dividers in the formatting buttons row are not vertically centered
now. This should be figured out soon.
Fixes: #28702.
The css variable `--color-outline-focus`, which affects focus rings
throughout the app, now has a different value defined for the dark theme
but this should have no visible effect, and help clean up the code.
This is a prep commit for the next, which shows focus rings only on
`focus-visible` and not on `focus` for composer buttons.
We now right align recipient input (even at very narrow widths) and
banners to the textbox, and move the close button to the absolute top
right corner of the compose box, updating the icon to be slimmer, bigger
and purplish, and adding a background highlight on hover.
This involved refactoring the send control area width into a responsive
css variable, and simplifying the html structure of the compose box.
Fixes: #28792.
Add new app variable for .notification-table class.
This variable is responsible to set the tables' thead
background color in dark theme. Previously it depended
on a genral CSS rule in dark_theme.css for its thead
color, however that cluster of rule has been deprecated
in #29859.
Note: The `thead` background color for the notification
table in the light theme is transparent, so the new
variable in `app_variable.css` does not have a
corresponding value for the light theme.
This optional commit also fixes#30431. It refactors the CSS
for the .table-bordered class, which is used directly by the
tables in the info_overlay menus (keyboard_shortcuts,
search_operators, markdown_help). This approach differs from
PR #30431, where the CSS for .overlay_body—a wrapper div
around these tables—was edited instead.
This commit make the CSS rules for .table-bordered class
use a new CSS variable for its border color where appropriate.
This is aligns with how we organizes CSS in #29859 and in
cd63e8d93cb0f84ec1e4ead348a225cb798f9cf0.
Fixes#39431.
This is a prep commit to an optional commit. It rolls back the
changes from #30431 because #30449 tries to fix a wider regression
that included the issue #30431 tried to fix.
This commit fix the regression for tables at uses the
.table-striped css, which are primarily used at the
settings menu.
In #29859, we began organizing CSS into more specific
variables and selector, which led to the deprecation of
several general CSS rules that affected these tables.
The fix switches the border-color value used by the
.table-striped css rules to a new CSS variable that
contains both dark and light theme values.
Fixes#30449
When left sidebar is hidden between 1200px and 768px, we show
smaller realm icon logo instead of the full realm logo. Also,
we use the new space to expand the middle column to better show
the narrow description.
This commit refactors the CSS for table in info_overlay
menus (keyboard_shortcuts, search_operators, markdown_help).
In #29859, we began organizing CSS into more specific
variables and selector, which led to the deprecation of
several general CSS rules that affected these tables. The
fix adds a new variable in app_variables.css which is used
at a wrapper div specificly targeting these tables.
Fixes#30428.
Add a new dark mode css in app_variable.css for rendered
markdown tables. This rule sets a brighter color for tables
in messages / chat to make it more visible when the user is
using dark theme.
Fixes zulip#29856.
This refactor aims to make managing css for rendered
markdown table easier by abstracting the css for thead
background color into a new variable in app_variable.
This refactor aims to make managing css for rendered
markdown table easier by abstracting the css for table
border color into a new variable in app_variable.
The compose expand / collapse button is moved from the top right of the
compose area to the top right corner inside the compose textarea /
preview.
The textarea / preview and the button area shares the same grid parent.
25px extra padding is added to and margin is subtracted from the right
of the element so the button is visually inside it. It appears only on
hovering the compose area, and uses a new custom icon.
Fixes: #28791.
Fixes#17933, #27517
Instead of `recent_view_table`, we make `html` as our scroll container.
This fixes an important bug for us where filters sometimes disappear
due to them scrolling under navbar which is unexpected. Since we are
now using separate containers to display rows and
filter (while includes table headers), where filters use sticky
positioning, this bug will be fixed.
The chevron arrow icon before the topic / dm user field now also acts as
a go to conversation button. Whenever the functionality is available,
the plain icon changes to look and behave like a button. The old go to
conversation button on the right of the field is removed.
Fixes: #28697.
This removes the common min-width being used across all popovers and
instead sets the min-width according to a popover's requirements.
This allows for greater control over the popovers since we have a
variety of use cases for them — which a single common min-width cannot
accommodate.
Aman Agrawal
Karl Stolley
PieterCK
N-Shar-ma
evykassirer
adnan-td
Sayam Samal