Commit Graph

115 Commits

Author SHA1 Message Date
nimish d3c99682c3 message_feed: Fix collapsed messages for highlighted texts.
Fixes #26346.
2023-08-08 12:19:54 -07:00
Karl Stolley d020a100c3 css: Isolate dark theme to screen only.
The primary motivation for this change is to default to the light
theme when printing.
2023-08-06 13:27:40 -07:00
Tim Abbott 213387249e css: Fix prettier error and reorganize some colors. 2023-07-24 18:06:25 -07:00
Ishita Gupta aa86533f22 UI redesign: more-less message interaction.
This commit encompasses the following changes:
* Replace the [More...] link with a button titled "Show more".
* Replace the [Show Less...] link with a button titled "Show less".
* Add various on-hover interactions to the buttons.
* In the condensed view, add fading to the bottom of the message to
  visually communicate that the message is truncated.
* Update /help/ description.

Fixes #22801.

Co-authored-by: Evy Kassirer <evy.kassirer@gmail.com>
2023-07-24 17:42:08 -07:00
evykassirer c4bc0ad589 message feed: Change color of zulip logo at top of feed. 2023-07-24 17:27:59 -07:00
Karl Stolley 5d819ea254 grid: Remove unnecessary mobile-scale padding.
This also removes padding on .message_content that wasn't actually
rendered due to its low specificity. It was likely also leftover
from an earlier, non-grid-based layout.
2023-07-24 16:47:14 -07:00
Anders Kaseorg 7746e11486 dependencies: Upgrade JavaScript dependencies.
Signed-off-by: Anders Kaseorg <anders@zulip.com>
2023-07-21 15:58:42 -07:00
Karl Stolley 1cd587d24b me_message: Center first line with center of avatar.
This commit also demonstrates how precise line-heights contribute
to a design: by matching the line-height on the avatar's grid area
to the dimensions of the square avatar image, it's possible to
center the first line of text (me-messages, in this case) with a
non-text element.
2023-07-15 09:55:42 -07:00
Karl Stolley ce04c98b47 me_messages: Clean up unused .sender_name-in-status class. 2023-07-13 14:01:32 -07:00
Karl Stolley b6d072a8d9 message_grid: Share same message grid with me-messages. 2023-07-13 09:02:00 -07:00
Karl Stolley 2bbf357f0e message_grid: Remove positioning cruft.
Because the message box is a CSS Grid, its children elements do not
need to continue to use positioning properties removed in this
commit.
2023-07-13 09:02:00 -07:00
Karl Stolley 762934896a css: Consolidate .message_edit_notice in row file. 2023-07-13 09:02:00 -07:00
Akshat d302ac4a18 message_view_header: Fix bad rendering of stream links in description.
This bad rendering was the result of unwanted css applied
in the stream description. In message view header, the stream
link (title) we have defined has css defined but the markdown
rendered stream link in stream description had the same class
resulting in unwanted css applied to it.

Fixes: #25961.

Signed-off-by: Akshat <akshat25iiit@gmail.com>
2023-07-10 13:47:22 -07:00
Sahil Batra 924879a049 css: Re-add bootstrap CSS for inline topic edit input.
This commit re-adds the required bootstrap CSS rules for inline
topic edit input to the specific selector in zulip.css.

This is a prep commit for removing bootstrap CSS for text type
inputs.
2023-07-07 10:10:28 -07:00
Sahil Batra 1db5ebae53 invite: Re-add bootstrap CSS for custom expiration text input.
This commit re-adds bootstrap CSS for custom expiration time
input in invite modal.

We also need to add the code to handle dark theme CSS here to
make sure the CSS for dark theme is prioritized correctly.

This commit also refactors the CSS to modify the selectors to
be simple and remove unnecessary IDs.
2023-07-07 10:10:28 -07:00
Aman Agrawal 233b486618 css: Use variable font when using Source Sans 3.
This is to overcome the limitations of previous static font,
which didn't allow us to use various font widths.
2023-07-06 17:57:37 -07:00
Aman Agrawal 98ee387197 css: Use 700 font weight for 800 since they default to it.
We don't have 800 font weight available, so the font weight defaults
to 700, so we use it directly here to avoid any changes when
we convert to variable font.
2023-07-06 17:57:37 -07:00
Karl Stolley 0c55fb7e89 stream_settings: Fix scroll at max-height.
Simplebar seems unaware of the `max-height: 1000px` on
`.subscriptions-container`, and therefore does not properly provide
a scrollbar when it's needed.

This commit adds a `max-height` to the stream Simplebar container,
ensuring that otherwise hidden content that Simplebar believes to
be visible can be scrolled to.

Finally, rather than rely on magic numbers or math done in comments,
this commit establishes CSS variables for all relevant modal-element
heights, doing the math inline using CSS calc().

Fixes #26107.
2023-06-29 11:19:01 -07:00
Karl Stolley a9bc5e94e7 bot_icon: Adjust bot-icon color for light and dark modes. 2023-06-23 14:43:22 -07:00
Sahil Batra 8c0ff704df bootstrap: Remove bootstrap CSS for pull-right class.
We use pull-right class for copy button with the multi-use
invite link only and this commit adds CSS for that specific
element. This commit then removes the bootstrap CSS for
pull-right class and also removes pull-right class from the
copy button since it is no longer required.
2023-06-23 11:53:38 -07:00
evykassirer 239b6737c0 navbar: Fix regression where navbar didn't extend all the way.
Followup to d0c1668399
2023-06-19 15:04:54 -07:00
Daniil Fadeev 4fde4e7c0d popovers: Prevent the popover from closing on scroll.
This commit prevent popover closure when scrolling reaches the top or
 bottom.

 Fixes: #25967.
2023-06-19 15:02:18 -07:00
Joelute ccdbdb35b2 unread_banner: Refactor HTML to use main view banner stylings.
Previously, the HTML structure of unread banners continued to utilize the
old stylings. We are currently in the process of simplifing both the
compose banner and unread banner stylings into one. These change will
update the HTML structure to be the same as the compose banner and use
the new stylings.
2023-06-09 11:31:51 -07:00
Karl Stolley 37192e8af3 css: Explicitly set text-message color.
This commit darkens the text-message color in the light theme
to the HSL equivalent of a dark gray (#262626).

This is the first time in the Zulip codebase where one CSS
custom property is set to another: the dark theme preserves
its use of `--color-text-default` in this way, but can be
adjusted independently of the reset of the theme in the future
by setting a different color value on
`--color-text-message-default`. Related reading on this
technique:
https://css-tricks.com/a-complete-guide-to-custom-properties/#aa-properties-as-properties

Fixes a part of #22022.
2023-06-08 16:18:14 -07:00
Karl Stolley e0883d0341 css: Integrate color vars into specific areas. 2023-06-08 16:18:14 -07:00
evykassirer d0c1668399 navbar: Remove top_navbar_full_width now that scrollbar is on html. 2023-06-07 16:54:58 -07:00
evykassirer aa270bcef0 search: Remove support for experimental search pills.
This in-progress feature was started in 2018 and hasn't
been worked on much since. It's already in a broken state,
which makes it hard to iterate on the existing search bar
since it's hard to know how those changes will affect search
pills.

We do still want to add search pills eventually, and when
we work on that, we can refer to this diff to readd the
changes back.
2023-06-06 18:36:02 -07:00
Akarsh Jain e20e7482ca invite: Restructure "Invite user" modal for improved user experience.
This commit revamps the invite type section of the "Invite user" modal
to provide a more intuitive user experience. The section now includes a
radio button option with two choices: "Send an email" and "Generate an
invite link." The email input box is hidden when the "Generate an invite
link" option is selected.

Fixes #24692.
2023-06-06 17:48:29 -07:00
Aman Agrawal 086db7621c css: Use a variable to track bottom_whitespace height.
Since we want the same space in recent topics to display the
compose box without overlapping with any other topics, it makes
sense to use a common variable.
2023-05-30 12:41:08 -07:00
Aman Agrawal 0f4bccd107 recent_conversation: Make all topics visible with compose open.
Fixes #25751
2023-05-30 12:41:08 -07:00
Aman Agrawal 230b3f075b scroll_bar: Fix overlapping right sidebar and browser scrollbars.
Fixes #25779

We move the simplebar scroll on the right sidebar to a little left
when there is an overlay scrollbar present so that user can drag
either of them.
2023-05-29 08:50:06 -07:00
Tim Abbott 1f8b3fd09a css: Fix fluid_layout_width setting.
0457f6807c seems to have accidentally
inverted the setting; we also clean up duplicate declarations of this
1400px value.
2023-05-28 22:06:16 -07:00
Aman Agrawal 8654f839b5 overlays: Stop document from occupying the extra scrollbar width.
When overlay / modal is displayed, scrollbar is hidden due to
the disabled scrolling on `html`. Reduce width of fixed elements
that will be visible in background and `html` so that they don't
occupy that extra space.

Also, I was over-thinking how we can get the scrollbar width. The
moment we allowed scrolling on `html`, it was easy to get the
scrollbar width.
2023-05-28 15:20:20 -07:00
Aman Agrawal 0457f6807c scroll_bar: Use a CSS class to toggle fluid layout. 2023-05-28 15:16:08 -07:00
Karl Stolley 4df04f1032 compose_box: Correct topic input-box height.
While this commit achieves what the subject advertises (fixing the
input box's height to match the recipient drop-down), but it does
so by relying heavily on flexbox's behavior to manage the height
of the elements and vertical centering, where necessary, rather
than positioning hacks or vertical padding.

This commit also removes some additional styles that do not make
sense (e.g., `min-width: 0`) or that need not be set.
2023-05-25 17:19:29 -07:00
Aman Agrawal dc04b0e171 navbar_alerts: Adjust app based on navbar height. 2023-05-24 15:43:19 -07:00
Aman Agrawal a78dc4a2bd css: Scroll on `html` instead of `.app`. 2023-05-24 15:43:19 -07:00
Aman Agrawal 263ee4cb86 feedback_widget: Don't use non-optimal animation properties.
Animating `box-shadow` and `top` is slow since the browser
drops frames when animating them. We can fix it by using `will-change`
property but it is just better to not animate them and instead
use transform.
2023-05-24 11:30:55 -07:00
evykassirer c486588360 search: Make search box bottom border visible again.
The nav bar's bottom border was being hidden by the search
bar. This makes the search bar slightly less high to fix this
issue.

Soon this code will be replaced with the changes in #24345.
2023-05-23 14:46:44 -07:00
evykassirer 9427fb7230 settings: Fix narrow-screen background color, use color variable.
Fixes #25708.
2023-05-23 11:31:03 -07:00
Aman Agrawal dc6099d656 message_row: Use equal top/bottom padding in message content.
We had the `3px 0 1px` padding before migration to use grid,
then I switched it to use `4px 0 1px` since we were planning to
use blue box border which seemed to have helped that case.

Since we switched to using outline for blue box, it makes sense
to just use equal padding.
2023-05-23 10:45:28 -07:00
Karl Stolley ab94bcb21b css: Move recipient-row unread markers to message row file. 2023-05-22 15:54:57 -07:00
Karl Stolley 36c5df7663 css: Move message-row styles to own file. 2023-05-22 15:54:57 -07:00
Karl Stolley ffbd0cb316 css: Clean up comments for future readers. 2023-05-22 15:54:57 -07:00
Aman Agrawal eeea5c1713 css: Fix @everyone and @stream displayed as user mentions.
Backend incorrectly renders @everyone and @stream as `user-mention`
while they are clearly `group_mention`. To fix this, we use
`data-user-id` property of @everyone and @stream which are
set to `*` for them.
2023-05-22 12:41:44 -07:00
Aman Agrawal 67ff421194 css: Change mention text and background colors. 2023-05-22 12:41:44 -07:00
Aman Agrawal c415944e55 css: Separate mention pill colors. 2023-05-22 12:41:44 -07:00
Karl Stolley c2f6167c01 css: Remove superfluous grid- properties.
The use of named areas with `grid-area` make it unnecessary to
declare `grid-row` or `grid-column` values. (Note also that
grid areas must not be presented in quotation marks.)

Additionally, because `.unread_marker` is no longer placed on the
grid by itself (i.e., it always accompanies `.date_unread_marker`
or `.message_unread_marker`), it does not need any manual grid
placement, `grid-area` or otherwise.
2023-05-19 13:48:16 -07:00
Aman Agrawal 9aa9f9b3c8 message: Separate unread marker of date_row from message.
This allows us to easily disable unread marker for date row of
the first unread message without producing any bugs.
2023-05-19 13:48:16 -07:00
Karl Stolley ef3289b73b css: Present message_row as CSS Grid.
This change enables the unread marker to participate as a grid item,
rather than the product of various absolute/relative positioning
hacks. The intention is to therefore prevent the blue active-message
box from disappearing on browsers that have zoomed out (~80% zoom).

With grid in place, this also makes for a more robust presentation
of each message row, and named grid areas should make it possible to
modify and extend the grid into the future.

Finally, this change removes styles that are no longer necessary in
the context of CSS Grid.
2023-05-19 13:48:16 -07:00