Commit Graph

137 Commits

Author SHA1 Message Date
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
evykassirer 27bc36b7d6 settings: Revert dark mode background color changes. 2023-05-19 10:57:50 -07:00
Aman Agrawal e6c7363613 css: Make top message logo less bright. 2023-05-16 12:35:17 -07:00
Aman Agrawal c84681c69c css: Color tweaks. 2023-05-16 12:35:17 -07:00
Aman Agrawal 2a98968846 css: Use 75% white as default text color. 2023-05-16 12:35:17 -07:00
Joelute 584b11af2d unread_banner: Apply updated design to message feed banners.
In #22524, we have updated the compose banner to the new, updated design
while the unread banners have remained the same. When comparing them side
by side, they look rather old and outdated. We should apply the updated
design to the unread banners as well.

Fixes: #25551.
2023-05-15 15:59:12 -07:00
evykassirer c578a38423 navbar: Widen navbar to fill the full screen on large screens.
Now that the navbar is a different color, we want it to also
take up the full width of the screen. Because the navbar has
margin, this commit adds a new div. To not have to add a new
div, the scrollbar would need to be moved to the `html`
element, which is a bigger project.

This commit also moves the zulip logo to be left-justified instead
of centered, since it looks strange centered with the full
width navbar.
2023-05-09 16:25:28 -07:00
evykassirer e026aa1217 UI redesign: Change background color.
Fixes: #21750
2023-05-09 16:25:28 -07:00
Aman Agrawal a196b949f7 dropdown_widget: Implement dropdown widget using tippy.
This will soon replace DropdownListWidget.
2023-05-09 14:11:26 -07:00
Alex Vandiver 1769f981da blueslip: Show more-info context in alert popup, if we have it. 2023-05-09 13:16:28 -07:00
Joelute 9cabdf2033 dark_theme: Add dark themed colors to notice/info banners.
Previously, infomational banners didn't have any dark theme stylings which
resulted in a messy and terrible contrast with the dark themed app. These
changes adds those missing styles and uses the same stylings and colors
as the compose banners. Thus, making a definite improvement then before.
2023-05-08 15:00:20 -07:00
Aman Agrawal 578ddbc5c8 scheduled_message_banner: Change design.
Convert `View scheduled messages` button into a link and use
default colors for "Undo" button.
2023-05-02 09:10:58 -07:00
Aman Agrawal 1885ed783a compose: Add new banner for success message scheduled. 2023-05-01 22:45:03 -07:00
Karl Stolley e4ae4c5b75 send_later: Remove send_later_input_group.
This removes the HTML structure and CSS styles previously associated
with the element in the scheduling modal.

Preserving this all in its own commit in case it needs to be
restored.
2023-04-28 17:50:54 -07:00
Aman Agrawal e89cbf0ac1 send_later: Move some options to a modal. 2023-04-28 17:50:54 -07:00
evykassirer 18312be6db compose: Add ability to switch to PM in stream dropdown.
Fixes #3409
2023-04-27 17:04:19 -07:00
Sahil Batra 7eacd525b4 compose: Show banner if user is not allowed to post in the stream.
We now show a banner on opening the compose box and changing the
stream in dropdown, if a user is not allowed to post in a stream.

The "Send" button is also disabled if user is not allowed to post
in the stream.

This commit also moved the CSS for disabled modal button in dark
theme below after the other CSS for modals as we are using the
same CSS for the "Send" button as well in disabled state.
2023-04-27 12:31:40 -07:00
N-Shar-ma 9f2ef69c71 compose: Add banner for unmuting the muted topic a message is sent to.
We add a new banner informing the user if and when they send a message
to a muted topic / stream. It also has a button to unmute the topic.

Fixes: #24246.
2023-04-25 16:16:47 -07:00
Hardik Dharmani 98162b7a3a left_sidebar: Show unread_mention in regular font if in unmuted topic.
If there are unread_mentions in unmuted topic in muted stream then,
show `.subscription_block unread_mention` in regular font not faded.

An additional parameter is passed to the update_count_in_dom function
to add or remove the "has-unmuted-mentions" class from the
.subscription_block, allowing for the relevant CSS to be applied to
display the unread mentions in regular font.

Fixes part of #24243.
2023-04-24 11:41:21 -07:00
Hardik Dharmani 19a2365ab9 left_sidebar: Display unmuted topic in regular font (not faded).
Add class unmuted_topic to li.bottom_left_row element if topic is
unmuted. Add relevant CSS for .unmuted_topic to display unmuted
topics in regular font.

Fixes part of #24243.
2023-04-24 11:40:58 -07:00
Hardik Dharmani 8701d546f3 left_sidebar: Change CSS for fading muted stream.
Previously, muted streams in the left sidebar were faded using
opacity: 0.5, and on hover, the opacity was increased to 0.75.
This opacity was applied to all elements within the muted stream,
including the stream-privacy icon, names of the stream and topics
within, and the unread_count.

In this PR, we changed this behavior to handle opacity for each
element separately. We changed the opacity of the stream-privacy icon
and unread_count, while for the text (names of stream and topics),
we changed the alpha factor for the hsla color property.

The reason for this change is that we can have different opacity levels
for the unread_count and other elements. This will allow us to add
feature in next commits in this PR to set the opacity of unread_count
to 1 while keeping it at 0.5/0.75 for other elements in the case of
muted streams with unread messages in unmuted topics.

Fixes part of #24243
2023-04-24 11:27:53 -07:00
Aman Agrawal 043d54d170 scheduled_messages: Add overlay to display and edit them.
Fixes #20971
2023-04-17 16:59:25 -07:00
Aman Agrawal ff52187289 compose: Add UI to schedule messages.
Fixes #20971
2023-04-17 16:59:25 -07:00
Aman Agrawal 7bd66891f0 css: Add background color for date row.
The logic to avoid first unread message with a date row to not
have an unread marker works purely based on `z-index` and seems
to be working nicely.

This avoids a bug where the background color of the date row
of the first unread message is different from others.
2023-04-17 12:12:41 -07:00
Aman Agrawal a941545523 drafts: Add abstract classes for messages in an overlay.
This will help up achieve 2 things:

* Have a lot of common CSS for drafts and scheduled messages.
* Have common JS for things like keyboard navigation between drafts
  and scheduled messages.
2023-04-14 17:38:37 -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
Aman Agrawal 7e473003a6 recipient_row: Use a dimmed stream color for background.
Following important changes are being made here:
* color_class lib is removed since it not used anywhere now.
* We don't need the `dark_background` class since the background
  color is already adjusted based on color scheme. So, all
  instances of it being used is removed.
2023-04-10 23:41:30 -07:00
Hardik Dharmani f41cc29ce3 markdown: Change search and alert word highlight colors.
As part of the redesign project, this highlight colors are changed:

Light theme:
Search highlight yellow: #FFEF95 - hsl(51deg 100% 79%)
Alert highlight orange: #FFC6AE - hsl(18deg 100% 84%)

Dark theme:
Search highlight yellow: #756400 - hsl(51deg 100% 23%)
Alert highlight orange: #98491b - hsl(22deg 70% 35%)

Fixes #24922
2023-04-06 18:13:43 -07:00
palashb01 e646ed957b css: Refactor the topic_menu sidebar popover css.
This commit adds the <p> tag used for the topic name inside the
Tippy CSS for dark theme.
2023-04-05 16:47:39 -07:00
Lalit fd830ce453 popover_menus: Change the selector `.enter_sends` for opening tippyjs popover.
Changed the `.enter_sends` css selector for launching tippyjs popover from
`compose.hbs` because it was colliding with `.enter_sends` selector present in
`organization_user_settings_defaults.hbs`.

Before this change when an admin tried to change user realm default setting of
`enter_sends` it was opening a tippyjs popover despite being a checkbox and it
was hitting `/json/settings` endpoint instead of `/json/realm/user_setting_defaults`.
2023-04-05 12:05:44 -07:00
Karl Stolley fcef6a2228 css: Hyphenate .user-status-content-wrapper selector. 2023-03-27 17:31:31 -07:00
Anders Kaseorg d274583d8f styles: Use modern color notation.
postcss-preset-env transpiles this back as necessary.  (It does a
better job than we did, in fact: we had several four-argument hsl()
calls that should have been hsla().)

Signed-off-by: Anders Kaseorg <anders@zulip.com>
2023-03-24 17:26:55 -07:00
Anders Kaseorg 5cdf38b1f7 styles: Use standard CSS nesting syntax.
CSS nesting is being standardized with the syntactic restriction that
the nested selector cannot start with an identifier.  This was
necessary to allow the syntax to be parsed without lookahead.

https://webkit.org/blog/13813/try-css-nesting-today-in-safari-technology-preview/
https://www.w3.org/TR/css-nesting-1/#syntax

The postcss-nesting plugin used by postcss-preset-env enforces this
restriction.

Signed-off-by: Anders Kaseorg <anders@zulip.com>
2023-03-20 11:26:30 -07:00
Lauryn Menard 2d8283e579 rendered-markdown: Move inline code CSS reset rules.
Moves the CSS reset rules for inline code elements to be in the
`rendered_markdown` class block.
2023-03-16 11:30:04 -07:00
Ganesh Pawar 5a5203144d modal: Make the modal content scrollable instead of the whole modal.
Earlier, if the content of the modal (apart from the header and footer)
overflowed, the whole modal would become scrollable which would hide
the modal header and footer on scrolling. This commit makes only
the modal content scrollable and keeps the modal header and
footer static.
2023-03-01 15:36:29 -08:00
Ganesh Pawar 537617b46d invite_user: Convert overlay to `dialog_widget`.
Fixes #22957.
2023-02-26 18:37:05 -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