Commit Graph

79 Commits

Author SHA1 Message Date
Sayam Samal 467b36dc4a copy: Rename copy-btn -> copy-button.
This commit is a part of the efforts to rename btn-related classes
and variables to align with Zulip's no-abbreviations policy and
streamline the search results.
2024-11-14 12:03:36 -08:00
Vishesh Singh 5b70775ab6 mention_pill: Show bot icon in bot mention pill.
Render a bot icon to the right of bot name, in case
it is a bot.
2024-11-12 09:34:07 -08:00
Anders Kaseorg 2671a5c32c stylelint: Enable stylelint-high-performance-animation.
Signed-off-by: Anders Kaseorg <anders@zulip.com>
2024-10-23 14:56:39 -07:00
Anders Kaseorg f023fa6fc0 styles: Be specific about which properties are transitioned.
Signed-off-by: Anders Kaseorg <anders@zulip.com>
2024-10-23 14:56:39 -07:00
Sayam Samal e0d685ce92 message: Improve the copy codeblock and playground buttons.
This commit improves the copy codeblock button and playground button
in the codeblocks to improve their visibility, particularly when on
top of some code.

Previously, the text under these buttons was difficult to select, as the
buttons would block the selection. This commit now hides these buttons
when a user clicks on any part of the codeblock, allowing to view the
code without any distractions, as well as, allowing the user to select
any part of the code.
2024-10-09 17:37:08 -07:00
Sayam Samal a743bb0eb6 copy: Use redesigned copy button in rendered codeblocks. 2024-09-20 15:44:20 -07:00
Shubham Padia 4a7983fad3 css: Use a class for spoiler header text.
Having the :not() rule there affected the performance, see
https://chat.zulip.org/#narrow/stream/6-frontend/topic/CSS.20selector.20performance/near/1920156
for more details.
2024-09-03 10:24:40 -07:00
Karl Stolley 562e6d6802 global_times: Allow global times to display inline. 2024-08-21 16:02:33 -07:00
Karl Stolley 02161582fd mentions: Allow mentions to display inline. 2024-08-21 16:02:33 -07:00
Shubham Padia 29809ea61b user_group_popover: Show popover on all .messagebox user group mention.
Show user group popover for scheduled messages overlay, compose box
preview, message edit preview, message edit history.
`.messagebox` was chosen as the selector since that was the nearest
parent class that was common for all of the above.

This commit won't work for drafts overlay since drafts has a direct
event listener which receives the event before our delegated event
listener.

This commit also adds an explicit `cursor: pointer` to
`user-group-mention`.
2024-08-15 16:28:53 -07:00
Shubham Padia 2b3a41be58 user_card_popover: Show popover on all .messagebox user mention.
Show user card popover for scheduled messages overlay, compose box
preview, message edit preview, message edit history.

`.messagebox` was chosen as the selector since that was the nearest
parent class that was common for all of the above.

`@all` does not have a popover and that's why it will have the same
pointer as its parent element. We also introduce a new class called
`.user-mention-all` for managing css rules specific to that mention.
2024-08-15 16:28:08 -07:00
Shubham Padia a48ce954aa rendered_markdown: Remove unused .data-container div css.
Having that css there or not did not make any visual difference.
2024-08-13 22:36:35 -07:00
Karl Stolley bee5cd4e04 rendered_markdown: Update markdown timestamps to use Zulip icon.
Fixes: #28830
2024-08-01 16:28:30 -07:00
Karl Stolley 6b8fc6de36 rendered_markdown: Lay out time spans with inline-flex. 2024-07-31 13:14:35 -07:00
Karl Stolley 887e7e1e13 rendered_markdown: Remove expensive :first-child and :last-child selectors.
With the refactoring of the rendered-Markdown area to use only
margin bottom, including in message-edit previewsk, these expensive,
general selectors are unnecessary.

Headings and horizontal rules, which do have margin-top, are zeroed
out elsewhere in the rendered-markdown file.
2024-07-31 12:37:19 -07:00
Sayam Samal 5549e807eb rendered_markdown: Remove universal selector for embedded content.
This removes the `.message_embed > *` selector which was expensive, and
instead moves the styles to the specific elements that need them.
2024-07-29 15:08:54 -07:00
Karl Stolley c8ba0f7abf rendered_markdown: Remove incorrect selector with unused color. 2024-07-29 13:18:26 -07:00
roanster007 66a96bee71 settings: Add setting to control how animated images are played.
Previously animated images were automatically played in the
message feed of the web app.

Now that we have still thumbnails available for them, we can add a new
personal setting, "web_animate_image_previews", which controls how the
animated images would be played in the web app message feed -- always
played, on hover, or only in the image viewer.

Fixes #31016.
2024-07-22 14:53:31 -07:00
Alex Vandiver 39d6f4ce10 thumbnail: Show the right spinner based on dark/light mode. 2024-07-21 18:41:59 -07:00
codewithnick b4c699db85 ui: Fix overflowing time tag in spoiler block.
When rendering a spoiler block that includes a datetime format,
the dropdown button was pushed out of view on smaller devices.
This happened because the time tag was overflowing past
the spoiler blocks width.

This commit intends to fix this problem by adding a `white-space`
attribute to the rendered time tags which will stop it from
overflowing.

Fixes #30641.
2024-07-18 12:37:03 -07:00
Aman Agrawal 84f22440dd rendered_markdown: Fix text wrapping in message view header.
For elements that can wrap in a rendered markdown, we don't want them
to in places like message view header.
2024-07-09 09:42:10 -07:00
adnan-td 4bde1586e4 topic_name: Fix compressing of display topic names.
Fixes part of #30478.
2024-06-26 12:23:32 -07:00
Karl Stolley 4c1cc4e62e mention_pills: Allow pills to scale with other message text. 2024-06-26 09:51:29 -07:00
Karl Stolley ac002b358c markdown: Improve alignment, spacing around horizontal rules. 2024-06-21 16:45:16 -07:00
Karl Stolley 7febb78b3b markdown: Use interelement spacing on horizontal rules. 2024-06-21 16:45:16 -07:00
PieterCK e16b8eba56 css: Refactor css for markdown thead background color.
This refactor aims to make managing css for rendered
markdown table easier by abstracting the css for thead
background color into a new variable in app_variable.
2024-06-12 06:45:00 -07:00
PieterCK 55fe0c5c85 css: Refactor css for markdown table border color.
This refactor aims to make managing css for rendered
markdown table easier by abstracting the css for table
border color into a new variable in app_variable.
2024-06-12 06:45:00 -07:00
Karl Stolley db5f584684 info_density: Sanely restore Zulip-style oversize emoji. 2024-06-11 12:25:16 -07:00
Karl Stolley cc3202a1be info_density: Size and align emoji precisely with line-fitted values. 2024-06-11 12:25:16 -07:00
Karl Stolley 0884b96fc6 spoilers: Style headers in Markdown-neutral way. 2024-05-28 14:34:10 -07:00
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