Commit Graph

36 Commits

Author SHA1 Message Date
Karl Stolley c0c62e477c reactions: Use a flex layout for reactions. 2023-08-21 11:38:39 -07:00
Karl Stolley c25da457e5 grid: Allow message toggles to occupy message area. 2023-08-21 11:29:00 -07:00
Karl Stolley 72119d161b grid: Use message_time to maintain baseline group. 2023-08-21 11:29:00 -07:00
Karl Stolley ce7f5ba785 message_edit: Hide length controller when editing. 2023-08-21 11:29:00 -07:00
Karl Stolley d73ae26e4b alerts: Remove unused .alert-msg elements. 2023-08-15 12:20:35 -07:00
nimish d3c99682c3 message_feed: Fix collapsed messages for highlighted texts.
Fixes #26346.
2023-08-08 12:19:54 -07:00
Karl Stolley 3b63faf33c bot_icon: Correct vertical alignment. 2023-07-26 12:15:11 -07:00
Karl Stolley de23949a36 message_edit: Use CSS to manage preview scroll.
Fixes #26135.
2023-07-17 11:28:55 -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 b13f6a6127 message_grid: Refactor row grid for readability.
This satisfies the linter's desire for the `grid-template`
shorthand while keeping the illustrative template areas in
their own little diagram-like property.
2023-07-13 14:02:21 -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 ddaebb3255 message_grid: Use a 'dead' column to space controls and time.
This commit adds a 3px column between the `controls` and `time`
areas, which keeps the controls from crowding the time for
languages with longer time markers.

To make the layout easier to reason about, this includes the
minimum width for the time column as part of the message-box
grid definition.
2023-07-13 09:02:00 -07:00
Karl Stolley 42919ed2e1 message_avatar: Preserve clickable area from image to user name. 2023-07-13 09:02:00 -07:00
Karl Stolley 497ad9471a message_grid: Preserve grid layout in edit mode. 2023-07-13 09:02:00 -07:00
Karl Stolley b6d072a8d9 message_grid: Share same message grid with me-messages. 2023-07-13 09:02:00 -07:00
Karl Stolley fad4429712 message_grid: Use baseline groups to align EDITED, time, etc. 2023-07-13 09:02:00 -07:00
Karl Stolley 93dba7f381 message_grid: Let the avatar participate in CSS Grid.
This also ensures that sender info flexes and participates
in the grid's baseline group.
2023-07-13 09:02:00 -07:00
Karl Stolley 1d1a2e3c75 message_grid: Add named grid areas to .messagebox-content. 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
Karl Stolley da09e003f6 date_row: Expand padding around date reference. 2023-06-12 12:52:51 -07:00
Karl Stolley 052e6655b5 css: Remove superflous background color on date row.
This fix prevents the active-message outline from being obscured
under certain conditions, such as when setting a browser to zoom
out at 90% or less.

Suggested-by: Anders Kaseorg <anders@zulip.com>
2023-05-28 15:08:05 -07:00
Karl Stolley 199567228a unread_marker: Style as subtle linear gradient. 2023-05-25 17:43:38 -07:00
Karl Stolley 903090c582 css: Move mention-pill colors under rendered markdown.
This just ensures that the mention-pill color selectors are children
of `rendered_markdown`, which class appears both in the message-
preview area as well as individual message rows.

Fixes #25720.
2023-05-23 12:57:24 -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
Tim Abbott 07cb08b8c5 message_row: Share most CSS for /me message senders.
This fixes a bug where clicking on a /me message sender would display
a focus outline incorrectly, and likely also overflow-related bugs.
2023-04-27 11:42:21 -07:00
Tim Abbott 9847e7024a message_row: Add sender_name_padding for /me messages.
This fixes the region between the avatar and the sender name in /me
messages not being part of the blue hover/highlight region for the
sender's user card.
2023-04-27 11:42:21 -07:00
Aman Agrawal fbb2967ff0 message_body: Remove link from message time when locally echoed.
Fixes #25069

Since the locally echoed link of message doesn't work, it is
better to remove it.
2023-04-17 12:19:20 -07:00
Aman Agrawal 2c83efc6b4 message_row: Rename `local` class to be more verbose. 2023-04-17 12:19:20 -07:00
Aman Agrawal bc8d136d5c css: Implement new design for recipient row.
This mostly includes the CSS changes for recipient row design,
most of the HTML and JS changes are present in previous commits to
this.
2023-04-10 23:41:30 -07:00
Lakshay Mittal e86fe4e57c messages: Add spinner for messages sent on slow connections.
At times, it might get confusing for users who are on
slow connections if their messages has not been sent
even after 5s. Including a spinner that will only show
up after 5 seconds has elapsed will keep user informed
about their slow connection.

5s is set as minimum time because showing up a spinner
before than might be distracting for users on normal
connections.

Fixes: #19328.
2023-04-10 17:36:26 -07:00
Aman Agrawal c4903fe85a message_row: Fix rewrapping message lines after receiving ack.
Since the message time of locally echoed messages were not displayed
and their width was restricted by `notvisible` CSS class, it
resulted in width available to message text changing after the message
was successfully sent and the time was displayed.

To fix this, we just try to set opacity of the message time to 0
for locally echoed messages.
2023-03-17 08:10:13 -07:00
Aman Agrawal b0d9b319e3 message_row: Allow time row to expand if it needs more width.
While setting a min-width according to the current width, we allow
the time column to expand if the translated `AM/PM` time needs
more width.
2023-02-26 17:05:01 -08:00
Anders Kaseorg c1675913a2 web: Move web app to ‘web’ directory.
Ever since we started bundling the app with webpack, there’s been less
and less overlap between our ‘static’ directory (files belonging to
the frontend app) and Django’s interpretation of the ‘static’
directory (files served directly to the web).

Split the app out to its own ‘web’ directory outside of ‘static’, and
remove all the custom collectstatic --ignore rules.  This makes it
much clearer what’s actually being served to the web, and what’s being
bundled by webpack.  It also shrinks the release tarball by 3%.

Signed-off-by: Anders Kaseorg <anders@zulip.com>
2023-02-23 16:04:17 -08:00