Commit Graph

49 Commits

Author SHA1 Message Date
Anders Kaseorg b545abe1e2 typos: Fix typos caught by mwic.
Signed-off-by: Anders Kaseorg <anders@zulip.com>
2024-05-20 13:55:00 -07:00
N-Shar-ma 74cdd6148e compose: Fix bug in preview where image at the end would be misaligned.
The `margin-bottom` was removed for the last element in the preview in
e55f5a1b59 to remove vertical shifts when
toggling preview mode, but it is not needed for image / video previews,
so now `margin-bottom` is not set to 0 for the last inline preview.
2024-05-09 10:48:02 -07:00
Karl Stolley 4909438f2c info_density: Describe interelement Markdown spacing as CSS vars. 2024-04-26 12:41:46 -07:00
Karl Stolley 68ea6704a4 widgets: Unify spacing beneath widgets and spoilers. 2024-04-22 10:33:47 -07:00
Karl Stolley a3476af97c markdown: Move all inter-element spacing to bottom. 2024-04-22 10:33:47 -07:00
Karl Stolley fc8e16f5e4 markdown: Set 5px for bottom margin on p, blockquote.
This establishes the same 5px bottom margin on all Markdown
elements, which will aid in converting such values to variables
as part of the information-density project.
2024-04-22 10:33:47 -07:00
Karl Stolley 6e32ce9084 markdown: Clarify and reorder margin and padding on KaTeX. 2024-04-22 10:33:47 -07:00
Karl Stolley 282d900bea markdown: Remove unnecessary inheritance declarations. 2024-04-22 10:33:47 -07:00
Karl Stolley f97cecdfe2 markdown: Remove inapplicable margin-top values.
Because paragraphs have a 3px bottom margin, the 2px top margin
on ordered and unordered lists would collapse into it, for 3px
of space total. So setting 0 on these special selectors has no
effect.
2024-04-22 10:33:47 -07:00
Karl Stolley 1878f920a8 katex: Properly align timestamps with KaTeX-only messages. 2024-04-17 12:46:30 -07:00
Karl Stolley e43384bd90 markdown: Modernize presentation of spoiler headers. 2024-04-12 17:39:36 -07:00
Afonso Azaruja e217d35ccd link_preview: Fix extraneous shadow.
Fix extraneous shadow at bottom of link preview
in stream messages in dark theme, in private
messages for both themes and in mentions, group
mentions and direct mentions.

This is done by applying the same color, used
in the background, to the shadow. There are CSS
variables that hold the values of the background
color.

Fixes #28853.
2024-04-01 13:06:42 -07:00
Karl Stolley 3a0621fb66 rendered_markdown: Blur code content behind REPL and copy buttons. 2024-03-11 15:38:03 -07:00
Karl Stolley 2df6b6c02a rendered_markdown: Present REPL and Copy buttons with modern techniques.
This also removes the `.btn` class and interference from Bootstrap
on the code Copy buttons.

Fixes: #29165
2024-03-11 15:38:03 -07:00
shashank-23002 5803d4afec clipboard: Align click to copy button inside spoiler tag.
Fixes: #20712
2024-02-20 10:18:43 -08:00
Joydeep Bhattacharjee e3744627ac
css: Fix the color of alert word in dark theme.
This was incorrectly not declared as a theme-dependant color.

Fixes #28407.
2024-01-04 10:53:14 -08:00
Karl Stolley 6d4f852dc4 markdown: Remove background colors from code blocks.
It appears as though we're still setting a background color,
but that is only to push back against the background set by
Pygments.

However, code blocks in mention messages get the same color
background as ordinary messages, preserving contrast on syntax
highlighting.
2023-12-04 13:03:34 -08:00
Karl Stolley 78d4232fc4 markdown: Present code spans without borders. 2023-12-04 13:03:34 -08:00
Karl Stolley 2811f2fe0f markdown: Implement redesigned Markdown code styles.
Fixes a part of #22022.
2023-12-04 13:03:34 -08:00
Karl Stolley f1a5fffae9 markdown: Express Markdown code/pre colors as CSS vars.
This ensures that all colors (text, background, and border) are
explicitly declared for Markdown-rendered pre elements, even when
the colors replicate values already declared, e.g., with Pygments.
2023-12-04 13:03:34 -08:00
Karl Stolley a8612ee9bc markdown: Remove unreachable color properties. 2023-12-04 13:03:34 -08:00
Prakhar Pratyush 0c159c5f47 mention: Fix mention highlighting in unsubscribed streams.
Rules followed:
1. Bold and highlighted background if the mention was processed
as a mention that includes you.
2. Bold personal mention (but not highlighted) if you were mentioned
but not subscribed at the time.
3. Otherwise not bold, no highlighting.

As we plan to keep the mention pill CSS the same if a user
was mentioned via that personal/wildcard/usergroup mention
irrespective of whether the user is subscribed or not, we use
usermessage flags to determine when to add 'user-mention-me' class.

Fixes #27654.
2023-11-24 07:10:20 -08:00
Prakhar Pratyush 64005c03b6 topic_mentions: Highlight the @topic mention for topic participants.
This commit adds support to highlight the '@topic' wildcard
mention text for the users having 'topic_wildcard_mentioned'
flag set.

Fixes #27497.
2023-11-13 08:29:16 -08:00
Aman Agrawal 8ef52d55d3 markdown: Add support for inline video thumbnails. 2023-10-02 22:39:02 -07:00
Karl Stolley 35e4be0b68 message_grid: Properly align elements in media-only messages. 2023-10-02 09:20:10 -07:00
Anders Kaseorg 21edae876e Revert "markdown: Fix 3+ digit marker lists retaining alignment for 2 digits."
This reverts commit d899c03da6 (#25094).
It broke the display of list items with inline formatting.

Signed-off-by: Anders Kaseorg <anders@zulip.com>
2023-09-22 15:23:29 -07:00
Karl Stolley cbb0cb9a73 css: Move inline emoji styles under rendered markdown.
This change paves the way to update how actual status emoji are
presented in sidebars, pills, etc., care of flexboxes, which
is previewed here by the inclusion of the `align-self` property.
2023-09-21 17:18:47 -07:00
N-Shar-ma d899c03da6 markdown: Fix 3+ digit marker lists retaining alignment for 2 digits.
Until now, lists with 3+ digit markers would have their beginnings cut
off to align with 2 digit markers. We fix that by having custom styling
for markers where we align markers only up to 2 digits, and let larger
numbers take up more space pushing the list item content forward as
required to fit the marker. Works for multiline and nested list items too.
2023-09-21 10:51:22 -07:00
Sahil Batra fcaaa6566e bootstrap: Remove bootstrap CSS for <table> element.
This commit adds the required bootstrap CSS for "<table>"
element in the specific files and removes them from
bootstrap.css.
2023-08-06 18:13:33 -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
Anders Kaseorg 7746e11486 dependencies: Upgrade JavaScript dependencies.
Signed-off-by: Anders Kaseorg <anders@zulip.com>
2023-07-21 15:58:42 -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 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 67ff421194 css: Change mention text and background colors. 2023-05-22 12:41:44 -07:00
Josiah Kievit 28c5c64b8d
css: Remove copy code button outline.
Added styling to show no outline around the copy to clipboard button on click. 

Previously, when clicking this button, a rectangular outline appeared around 
the button, which didn't look good, since a 'Copied!' message was already displayed.

Fixes #25533.
2023-05-19 13:09:10 -07:00
Joelute 82a805e286 compose: Fix incorrect preview area first/last child selectors.
Following up to #24961, it was discovered that emojis looked worse with
the new changes as the spacings became uneven with each emojis.

Debugging determined that the root cause that the selectors used
applied to __every__ first child of its parent inside the
rendered_markdown area, not just the first child of the main
container.
2023-04-18 17:41:37 -07:00
Tim Abbott c43d551c5f Revert "markdown: Fix lists with 3+ digit markers retaining alignment for 2 digits."
This reverts commit d0f9e23ec6.

This didn't work correctly for lists containing more complex syntax inside.
2023-04-11 16:07:17 -07:00
N-Shar-ma d0f9e23ec6 markdown: Fix lists with 3+ digit markers retaining alignment for 2 digits.
Until now, lists with 3+ digit markers would have their beginnings cut off
to align with 2 digit markers. We fix that by having custom styling for
markers where we align markers only up to 2 digits, and let larger numbers
take up more space pushing the list item content forward as required to fit
the marker.
2023-04-10 21:54:51 -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
atharmohammad e55f5a1b59 compose: Remove vertical shifts in compose when toggling preview mode.
The vertical shifts in message body was due to the <p> tags it gets when
converted to markdown. Removing the top margin from the first <p> child
and bottom margin from the last <p> child resolves this issue as due to
those default margins in <p> tags there was vertical shifts in message
body.

Fixes: #21276.
2023-04-06 17:57:24 -07:00
Pranav2612000 ecead64718 markdown: Render larger emojis inside headings
Previously, the emoji size was fixed to 20px by 20px irrespective of
whether the emojis were inside a heading or not. This looked weird when
a small emoji was rendered next to a large h1 text.

This commit fixes that by setting the emoji height to 1.4em
which proportionately increases the size of the emojis as the text size
increases for different headings.

Fixes #12857
2023-03-28 09:17:02 -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 c446f86173 rendered-markdown: Move `pre` element CSS reset rules.
Moves CSS reset rules for `pre` elements to the `rendered_markdown`
class block.

Adds the `rendered_markdown` class to the scrollbar rules.
2023-03-16 11:30:04 -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
Lauryn Menard d98ba32588 rendered-markdown: Copy anchor tag CSS rules from bootstrap.
Prep commit for moving CSS reset rules for inline code elements
in `rendered_markdown.css` to the `rendered_markdown` class rules.
2023-03-16 11:30:04 -07:00
Lauryn Menard f1e60014fa css: Move `pre code` reset rules to `rendered_markdown` class block.
Moves and simplifies the `pre code` rules in `rendered_markdown.css`
so that they are all part of the `rendered_markdown` class block.
2023-03-03 14:10:06 -08:00
Lauryn Menard 3c63025d88 css: Remove code elements from bootstrap.css.
Updates `markdown.css` and `rendered_markdown.css` for the rules
in `bootstrap.css` that were being used to style code elements and
removes the now redundant/ignored rules from `bootstrap.css`.
2023-03-02 13:32:50 -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