Commit Graph

398 Commits

Author SHA1 Message Date
Aman Agrawal 6efcb7a349 dropdown_widget: Refactor to use Class. 2023-07-27 14:10:08 -07:00
Karl Stolley 3b63faf33c bot_icon: Correct vertical alignment. 2023-07-26 12:15:11 -07:00
Karl Stolley 61f30fa347 print: Add print styles targeted at topics. 2023-07-25 17:30:40 -07:00
Sahil Batra befcb46ba3 dialog_widget: Rename "dialog_cancel_button" to "dialog_exit_button".
This commit renames "dialog_cancel_button" class in the exit button
of modals to "dialog_exit_button", which seems a much better name
for a button that is used to close a modal.
2023-07-25 10:25:12 -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
Zixuan James Li 000761ac0c realm_playgrounds: Replace url_prefix with url_template.
Dropping support for url_prefix for RealmPlayground, the server now uses
url_template instead only for playground creation, retrieval and audit
logging upon removal.

This does the necessary handling so that url_template is expanded with
the extracted code.

Fixes #25723.

Signed-off-by: Zixuan James Li <p359101898@gmail.com>
2023-07-24 17:40:59 -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 bc1e953f0f dark_theme: Remove Firefox override for dropdown appearance.
We get the right background-color from line 487 in the same way as
Chrome.

Signed-off-by: Anders Kaseorg <anders@zulip.com>
2023-07-24 13:43:17 -07:00
Anders Kaseorg 1b72d5c413 styles: Remove Firefox override for dropdown appearance.
The default appearance in modern Firefox is totally fine, and our
override was incorrectly changing the dropdown triangle to black for
the dark theme.

Signed-off-by: Anders Kaseorg <anders@zulip.com>
2023-07-24 13:10:03 -07:00
Sahil Batra 2926337404 templates: Re-add bootstrap CSS for tweet blockquote elements.
This CSS will only be used if somehow the tweet is renderd as
a simple quote without iframe either due to network problem
or if the actual tweet is deleted.
2023-07-23 15:44:58 -07:00
Sahil Batra fdc0fc9d97 markdown: Re-add bootstrap CSS for blockquote used in markdown.
This commit re-adds bootstrap CSS rules for blockquote elements
used in various markdown pages including the ones which are
rendered during message formatting like when quoting a message.

This is a prep commit to remove the blockquote CSS rules from
bootstrap.css.
2023-07-23 15:44:58 -07:00
Sahil Batra 30dec9822b landing_page: Re-add bootstrap CSS for blockquote in testimonials.
This commit re-adds bootstrap CSS rules for blockquote elements
used for testimonials in the landing page.

This is a prep commit to remove the blockquote CSS rules from
bootstrap.css.
2023-07-23 15:44:58 -07:00
Sahil Batra 1c98252a85 portico: Re-add bootstrap CSS for blockquote in markdown pages.
This commit re-adds bootstrap CSS rules for blockquote written
using ">" in case study pages and some other pages like
"/why-zulip", "/history", etc.

We also remove the unnecessary CSS for "blockquote::after"
selector in this commit.

This is a prep commit to remove the blockquote CSS rules from
bootstrap.css.
2023-07-23 15:44:58 -07:00
Sahil Batra d15222db22 corporate: Re-add bootstrap CSS for blockquotes in "for/" pages.
This commit re-adds the required bootstrap CSS for blockquote
elements used in "for/businesd", "for/research", "for/events"
and "for/open-source" pages.

This commit only handles the blockquote elements inside ".quote"
and ".intro-quote" elements and not "blockquote.twitter-tweet"
elements which will be handled separately. The blockquote
elements rendered using markdown using ">" will also be handled
separately.

This commit also updates blockquotes in self-hosting page as
blockquote element on this page is also inside ".quote" element.

This is a prep commit to remove the blockquote CSS rules from
bootstrap.css.
2023-07-23 15:44:58 -07:00
Sahil Batra fab29eb779 landing_page: Remove unnecessary CSS.
We use "testimonials" class only to show the testimonials
in landing page, i.e. hello.html and that page does not
use "why-page" class. So, the CSS with selectors including
".portico-landing.why-page .testimonials" is not required
and this commit removes it.

The removed CSS was added in fc6833e46a when we used
"testimonials" class for quotes in why-zulip.html page
but this changed since we moved the quotes to markdown file.
2023-07-23 15:44:58 -07:00
Sahil Batra ae7db86b79 bootstrap: Remove CSS for ".label" elements.
The "label" class was only used for the labels shown in
activity support page. This commit adds the required CSS
rules to activity.css and removes them from bootstrap.css.
2023-07-23 15:44:58 -07:00
Sahil Batra 861312e120 bootstrap: Remove bootstrap CSS for "small" element.
We use "small" element only to show secondary details in
a typeahead option. This commit re-adds bootstrap CSS
rule to the specific element in compose.css and removes
the CSS from bootstrap.css.

Also, we do not use small elements inside any of h1, h2,
h3, h4 and blockquote elements, so the CSS for those can
be safely removed.
2023-07-23 15:44:58 -07:00
Sahil Batra b95d23bb07 bootstrap: Remove bootstrap CSS for input-append class.
We use input-append class only for some search elements
in the app and the CSS rules applied by bootstrap which
are really used are "white-space" and "margin-bottom"
for a couple of ".input-append" elements and "margin-left"
property on clear button which is re-added to the CSS for
specific elements in this commit.

Others are either redundant or overridden by the other CSS
for the specific elements.

The border-radius property for the clear button was applied
but since we use "x" for it, there is no border for that
button and hence it is redundant.
2023-07-23 15:44:58 -07:00
evykassirer aa9d5935ae search: Rename search_arrows to searchbox_container.
The terminology "arrows" comes from historical functionality
that is no longer relevant, so searchbox_container is a more
clear and accurate name.

It would be nice in the future to see if we can remove
some of the nesting of HTML (#searchbox, #searchbox_form,
and #searchbox_container).
2023-07-23 15:27:53 -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
Aman Agrawal b7fcce305e recent_topics: Fix clear search button misaligned.
Looks like some changes actually improved aligned of this icon so
that we don't need this hacky margin.
2023-07-19 11:09:24 -07:00
Prakhar Pratyush 237f9f4799 topic_popover: Add support to follow a topic from the topic_popover.
This commit adds support for following a topic from the topic
three-dot menu in the left sidebar.

Three options, i.e., 'Mute topic', 'Unmute topic', and 'Follow topic',
are shown at the top of the menu (in the mentioned order), regardless
of whether the stream is muted or unmuted.

We can no longer set the topic's visibility_policy to INHERIT
(the default value) from this menu.

The changes are visible in the development environment only.

Fixes #25917.

Co-authored-by: Prakhar Pratyush <prakhar841301@gmail.com>
Co-authored-by: Hardik Dharmani <Ddharmani99@gmail.com>
2023-07-17 17:39:17 -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
Prakhar Pratyush 0891f9f65a mention: Determine @topic mention during message rendering.
This commit adds a boolean field `mentions_topic_wildcard`
to the `MessageRenderingResult` dataclass.

The field is set to true only if message rendering determines
the message has an actual topic wildcard mention in it (and not,
e.g., topic wildcard mention syntax inside a code block).

The rendered content for topic wildcard mention is
'<span class="topic-mention">{wildcard}</span>'.

The 'topic-mention' class is the identifier for the wildcard
mention being a topic wildcard mention.

We don't use 'data-user-id="*"' and "user-mention" class for
topic wildcard mentions and eventually plan to remove them for
stream wildcard mentions too in a separate mini-project.
2023-07-13 11:34:48 -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 0058cc5f92 message_overlays: Apply grid to drafts and scheduled messages.
This also removes duplicate, unreachable CSS that probably
should have been removed in a941545523.
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
Aman Agrawal fcac413138 move_topic_to_stream: Migrate to use tippy dropdown widget. 2023-07-11 13:37:50 -07:00
Aman Agrawal 0024e88fcb css: Remove unused `float` property.
Ths is already alingned corrected using flex, so no need to use float.
2023-07-11 13:37:50 -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 f00dcf5674 billing: Fix licenses input in "Pay by invoice" section of upgrade page.
The bootstrap CSS was not re-added to the input for number of licenses
in "Pay by invoice" section of upgrade page while removing the bootstrap
CSS for "number" type inputs from bootstrap.css.

This commit fixes it by re-using the existing CSS for other number type
inputs.
2023-07-07 10:10:28 -07:00
Sahil Batra 5442bfb07c templates: Add filter_text_input class to inputs used for filtering.
This commit adds filter_text_input class to various search inputs
used across the app. This new class is used to re-add the bootstrap
CSS rules such that we can remove the CSS from bootstrap.css.
2023-07-07 10:10:28 -07:00
Sahil Batra f5208a7db6 settings: Re-add bootstrap CSS to custom time limit inputs.
This commit re-adds bootstrap CSS for custom time limit inputs
used by various settings by using more specific selector in
settings.css.

This is a prep commit for removing bootstrap CSS for text type
inputs.
2023-07-07 10:10:28 -07:00
Sahil Batra 96014c1123 settings: Re-add bootstrap CSS rules to ".settings_text_input" selector.
This commit re-adds bootstrap CSS rules to ".settings_text_input"
selector in settings.css and this helps in adding the bootstrap
CSS to text inputs used in settings.

This is a prep commit to remove bootstrap CSS for text type inputs.
2023-07-07 10:10:28 -07:00
Sahil Batra 87fd7b3810 integrations: Re-add bootstrap CSS for search input.
This commit re-adds bootstrap CSS for search input in
integrations page using a more specific selector in
integrations.css. We also change the selector to use
a class name instead of "input".

This is a prep commit for removing bootstrap CSS for text type
inputs.
2023-07-07 10:10:28 -07:00
Sahil Batra ec2826188b integrations_dev_panel: Re-add bootstrap CSS for text inputs.
This commit re-adds bootstrap CSS for text inputs in devtools
integrations page using a more specific selector in
integrations_dev_panel.css.

This is a prep commit for removing bootstrap CSS for text type
inputs.
2023-07-07 10:10:28 -07:00
Sahil Batra 8ae71c8f90 email_log: Re-add boostrap CSS for text inputs.
This commit re-adds bootstrap CSS for the input
used to set the email to which emails will be
forwarded in the development environment "/emails"
page by using a more specific selector in
email_log.css.

This commit also increases the width of input to be
consistent with many other text type inputs and this
also helps in viewing the full placeholder text.

This is a prep commit for removing bootstrap CSS for
text type inputs.
2023-07-07 10:10:28 -07:00
Sahil Batra 83e747d757 billing: Re-add bootstrap CSS for inputs in sponsorship page.
This commit re-adds bootstrap CSS for "Organization website"
input in sponsorship page using a more specific selector in
billing.css. This change is done by re-using the existing
CSS for number type inputs and also removes the height
property which is not required.

This is a prep commit for removing bootstrap CSS for text
type inputs.
2023-07-07 10:10:28 -07:00