Commit Graph

353 Commits

Author SHA1 Message Date
chapoi
6a67d69f7a
UX: fix alignment extra buttons in post controls (#22872) 2023-07-31 11:55:46 +02:00
Carson Chang
98e3bbd6bf
FIX: Breaking typo, missing closing parenthesis in topic-post.scss (#22852)
* Breaking typo, Update topic-post.scss

* Update topic-post.scss
2023-07-28 09:55:04 -07:00
Roman Rizzi
3820fae041
UX: Disclose AI model used and add animation to placeholder (#22670)
* UX: Disclose AI model used and add animation to placeholder

* Move text into hbs template

DTooltip (weirdly) attaches to a sibling element, so we need something else to be rendered inside the RenderGlimmer wrapper div

---------

Co-authored-by: David Taylor <david@taylorhq.com>
2023-07-19 12:03:36 -03:00
Roman Rizzi
61aeb2da90
FEATURE: Inline topic summary. Cached version accessible to everyone. (#22551)
* FEATURE:  Inline topic summary. Cached version accessible to everyone.

Anons and non-members of the `custom_summarization_allowed_groups_map` groups can see cached summaries for any accessible topic. After the first 12 hours and if the posts to summarize have changed, allowed users clicking on the button will automatically re-generate it.

* Ensure chat summaries work and prevent model hallucinations when there are no messages.
2023-07-12 11:21:51 -03:00
Kris
ffcac7bf5a
UX: consistent button hover transitions (#22157) 2023-06-16 10:25:58 -04:00
Kris
e0f848c2ea
REFACTOR: move shadow vars to css custom props (#22094) 2023-06-13 16:38:31 -04:00
Roman Rizzi
8938ecabc2
FEATURE: Custom content summarization strategies. (#21813)
* FEATURE: Content custom summarization strategies.

This PR establishes a pattern for plugins to register alternative ways of summarizing content by extending a class that defines an interface.

Core controls which strategy we'll use and who has access to it through the `summarization_strategy` and `custom_summarization_allowed_groups`. It also defines the UI for summarizing topics.

Other plugins can access this summarization mechanism and implement their features, removing cross-plugin customizations, as it currently happens between chat and the discourse-ai plugin.

* Group membership validation and rate limiting

* Work with objects instead of classes

* Port summarization feature from discourse-ai to chat

* Rename available summaries to 'Top Replies' and 'Summary'
2023-06-13 14:21:46 -03:00
Blake Erickson
e576fdbe3a
SECURITY: set max-height property for iframes (#22084)
Co-authored-by: David Battersby <info@davidbattersby.com>
2023-06-13 11:07:32 -06:00
Jordan Vidrine
928589adfd
CSS: Move table editor button to right (#21976) 2023-06-07 14:50:34 -05:00
Kris
7d9953dc15
UX: adjust frequent poster size in topic map (#21933) 2023-06-05 18:18:58 -04:00
Kris
1d9f195207
UX: adjust various avatars due to size changes (#21890) 2023-06-01 11:17:44 -04:00
Meghna
68549fe54e
UX: Vertical alignment issues on mobile (#21118)
Vertical alignment fixes for topic closed small message and poll info.
2023-04-17 22:51:13 +05:30
Canapin
4b9061ae3f
UX: Remove color attribute from <kbd> tag (#20429)
As a single example, if a `<kbd>` tag is wrapped by a `<a>` link, it doesn't inherit the link color:

`[<kbd> **Support**</kbd>](https://meta.discourse.org)`

It's because the `<kbd>` tag has a `color: var(--primary);` CSS rule which seems superfluous.

If we disable it, the `<kbd>` tag inherits all the normal colors (including the link color 👌).

The direct `<kbd>` parent that assigns the text color is `<html>` (can't go higher!) which has an identical `color: var(--primary);`. 

WCAG palettes don't seem to assign specific colors in this context.

It seems fairly safe to remove `color: var(--primary);` from `<kbd>` so it won't interfere anymore with its content.
2023-04-14 10:06:12 +08:00
Canapin
b9ca4c9031
UX: fix anchor z-index (#21002) 2023-04-14 10:02:57 +08:00
Jarek Radosz
29e2e3ff3b
DEV: Fix random typos (#20937) 2023-04-03 19:27:32 +02:00
Keegan George
83db0bf41a
FIX: Post height issues with Expand Table button (#18810) 2023-03-24 11:55:49 -07:00
Kris
6fc2cded55
UX: fix width for top embedded reply, post notice (#20546) 2023-03-06 11:24:49 -05:00
Jordan Vidrine
366f5e08d7
FIX: Copy & Fullscreen button edits in codeblocks (#20483) 2023-02-28 10:54:24 -06:00
chapoi
87de3c2319
UX: highlight vars updates (#20346)
* UX: replace highlight vars in popup menu

* UX: replace highlight vars in autcomplete

* UX: replace highlight vars in menu-panel

* UX: update style guide

* UX: bulk replace highlight vars in various small appearances
2023-02-21 10:15:49 +01:00
Canapin
4bfa130c3a
UX: Fix remove-user-from-pm hover styling (#20273) 2023-02-15 11:06:21 -05:00
chapoi
e03f6057ec
UX: Highlight var refactor (#20026)
* Add new color vars

* Select-kit > use new color vars

* update all color schemes with values for new hover/select vars

* Add variable yml names
2023-01-27 15:50:36 +01:00
Kris
3483285b89
UX: restyle quote/share popup, fix hover jitter (#19561) 2023-01-17 12:28:33 -05:00
Andrei Prigorshnev
c0b21bf9cf
FIX: styles of user status on mentions (#19563)
Reported in https://meta.discourse.org/t/users-mentions-wrongly-show-their-status-with-the-emoji/249534.

The problem was that we had styles for user status on mentions in the calendar plugin. So it looked fine on sites with Discourse Calendar but not on sites without it.
2022-12-22 14:15:52 +04:00
Kris
1719075352
UX: include space between elements in kbd tag (#19427) 2022-12-12 13:53:48 -05:00
Kris
6d1de26279
UX: refactor & update small post styles (#19274) 2022-12-05 09:54:29 -05:00
Kris
6b7bdc991d
UX: improve mention styling, simplify (#19169)
* UX: improve mention styling, simplify

* revert default
2022-11-24 09:35:57 +11:00
Kris
b0f380c4c7
UX: improve mention styling (#19156)
This updates mention styling. This reduces bold, increases contrast, and makes inactive mentions look more inactive.
2022-11-23 09:17:03 +10:00
Martin Brennan
d3f02a1270
FEATURE: Generic hashtag autocomplete lookup and markdown cooking (#18937)
This commit fleshes out and adds functionality for the new `#hashtag` search and
lookup system, still hidden behind the `enable_experimental_hashtag_autocomplete`
feature flag.

**Serverside**

We have two plugin API registration methods that are used to define data sources
(`register_hashtag_data_source`) and hashtag result type priorities depending on
the context (`register_hashtag_type_in_context`). Reading the comments in plugin.rb
should make it clear what these are doing. Reading the `HashtagAutocompleteService`
in full will likely help a lot as well.

Each data source is responsible for providing its own **lookup** and **search**
method that returns hashtag results based on the arguments provided. For example,
the category hashtag data source has to take into account parent categories and
how they relate, and each data source has to define their own icon to use for the
hashtag, and so on.

The `Site` serializer has two new attributes that source data from `HashtagAutocompleteService`.
There is `hashtag_icons` that is just a simple array of all the different icons that
can be used for allowlisting in our markdown pipeline, and there is `hashtag_context_configurations`
that is used to store the type priority orders for each registered context.

When sending emails, we cannot render the SVG icons for hashtags, so
we need to change the HTML hashtags to the normal `#hashtag` text.

**Markdown**

The `hashtag-autocomplete.js` file is where I have added the new `hashtag-autocomplete`
markdown rule, and like all of our rules this is used to cook the raw text on both the clientside
and on the serverside using MiniRacer. Only on the server side do we actually reach out to
the database with the `hashtagLookup` function, on the clientside we just render a plainer
version of the hashtag HTML. Only in the composer preview do we do further lookups based
on this.

This rule is the first one (that I can find) that uses the `currentUser` based on a passed
in `user_id` for guardian checks in markdown rendering code. This is the `last_editor_id`
for both the post and chat message. In some cases we need to cook without a user present,
so the `Discourse.system_user` is used in this case.

**Chat Channels**

This also contains the changes required for chat so that chat channels can be used
as a data source for hashtag searches and lookups. This data source will only be
used when `enable_experimental_hashtag_autocomplete` is `true`, so we don't have
to worry about channel results suddenly turning up.

------

**Known Rough Edges**

- Onebox excerpts will not render the icon svg/use tags, I plan to address that in a follow up PR
- Selecting a hashtag + pressing the Quote button will result in weird behaviour, I plan to address that in a follow up PR
- Mixed hashtag contexts for hashtags without a type suffix will not work correctly, e.g. #ux which is both a category and a channel slug will resolve to a category when used inside a post or within a [chat] transcript in that post. Users can get around this manually by adding the correct suffix, for example ::channel. We may get to this at some point in future
- Icons will not show for the hashtags in emails since SVG support is so terrible in email (this is not likely to be resolved, but still noting for posterity)
- Additional refinements and review fixes wil
2022-11-21 08:37:06 +10:00
David Taylor
d22fddf00a
UX: Ensure image size is maintained even after loading error (#18805) 2022-10-31 17:55:24 +00:00
Kris
2556e5a715
FIX: a couple of topic elements are too wide (#18775) 2022-10-27 10:59:58 -04:00
Kris
d0f88da9c9
FEATURE: control topic width with variables (#18743) 2022-10-25 14:45:37 -04:00
Pixlz
3a204f72d3
UX: Prevent reply to name from being longer than 400px (#18623) 2022-10-17 14:09:49 -04:00
Andrei Prigorshnev
c32ab70111
FIX: alignment of user status emoji on posts (#18563) 2022-10-12 20:07:07 +04:00
Jarek Radosz
4170b9bb58
DEV: Use more css vars (#18561)
Followup to #18518

This time it's mostly line-height vars and a couple of other uncommon vars.
2022-10-12 16:05:42 +02:00
Jarek Radosz
ea326906e3
DEV: Use css var font sizes (#18518)
For consistency and and the ability to change all font sizes at once in the dev tools
2022-10-12 15:31:59 +02:00
Andrei Prigorshnev
fe12817cb7
FIX: do not show user status on posts twice (#18458) 2022-10-04 10:35:27 +04:00
Kris
b515a45cf4
UX: fix topic stream placeholders (#18336) 2022-09-23 10:21:00 +08:00
Andrei Prigorshnev
3501468db7
UX: make user status emoji on post stream smaller (#18169) 2022-09-02 21:48:36 +04:00
Andrei Prigorshnev
94ac8611f4
FEATURE: show status on post streams (#17813) 2022-08-08 17:35:26 +04:00
Chapoi
d90cdba70f
Revert "UX: missing specificity (#17324)" (#17426)
This reverts commit 4730858598.
2022-07-11 20:20:40 +02:00
Kris
7711d140da
UX: staff notice should utilize full post width (#17346) 2022-07-05 15:49:47 -04:00
Chapoi
4730858598
UX: missing specificity (#17324) 2022-07-05 10:46:54 +08:00
David Taylor
5238f6788c
FEATURE: Allow hotlinked media to be blocked (#16940)
This commit introduces a new site setting: `block_hotlinked_media`. When enabled, all attempts to hotlink media (images, videos, and audio) will fail, and be replaced with a linked placeholder. Exceptions to the rule can be added via `block_hotlinked_media_exceptions`.

`download_remote_image_to_local` can be used alongside this feature. In that case, hotlinked images will be blocked immediately when the post is created, but will then be replaced with the downloaded version a few seconds later.

This implementation is purely server-side, and does not impact the composer preview.

Technically, there are two stages to this feature:

1. `PrettyText.sanitize_hotlinked_media` is called during `PrettyText.cook`, and whenever new images are introduced by Onebox. It will iterate over all src/srcset attributes in the post HTML and check if they're allowed. If not, the attributes will be removed and replaced with a `data-blocked-hotlinked-src(set)` attribute

2. In the `CookedPostProcessor`, we iterate over all `data-blocked-hotlinked-src(set)` attributes and check whether we have a downloaded version of the media. If yes, we update the src to use the downloaded version. If not, the entire media element is replaced with a placeholder. The placeholder is labelled 'external media', and is a link to the offsite media.
2022-06-07 15:23:04 +01:00
Kris
329a64969c
UX: prevent group mention from wrapping (#16558) 2022-04-26 08:30:55 -04:00
Kris
c81d4597a7
UX: improve small action button alignment (#16486) 2022-04-15 11:43:32 -04:00
David Taylor
7edc941843
FIX: Ensure images do not change height when loading is complete (#16368)
Browsers automatically calculate an aspect ratio based on the width/height attributes of an `<img`. HOWEVER that aspect ratio only applies while the image is loading. Once loaded, it'll use the image's actual dimensions. This can cause things to jump around after loading. For example:
 - if a user deliberately inserts false width/height
 - the image fails to load (404)
 - an optimised image is a few pixels different, due to a rounding when resizing

This decorator explicitly sets the `aspect-ratio` property so that things are consistent throughout the lifetime of all `<img` elements.
2022-04-05 13:43:17 +01:00
Penar Musaraj
1210cfe60e
UX: Indicate that "Show replies" button does not work for deleted posts (#16304) 2022-03-29 11:58:50 -04:00
Martin Brennan
ff96d541e9
FEATURE: Add fullscreen button for code blocks (#16044)
This commit extends the original copy-codeblocks initializer,
renaming it to codeblock-buttons, and adding another button
to make the code block fullscreen in a modal window. The fullscreen
code is then run through highlight.js.

This commit also moves much of the code out of the initializer
and into a reusable CodeblockButtons class, so it can also be used
in the fullscreen code modal for the copy + paste button.

The fullscreen button will not be shown if there is no scroll overflow
in the code block, nor will it be shown on mobile. This commit also
changes the fullscreen table button to not show on mobile.

This will make long lines of code much easier to read and interact
with. This is gated behind the same `show_copy_button_on_codeblocks`
site setting.
2022-03-01 08:37:24 +10:00
Penar Musaraj
f0c15dc399
Revert "FIX: Image sizes were slightly off in some cases (#15678)" (#15815)
This reverts commit eff0106efb. It causes
visible layout issues, especially on mobile.
2022-02-04 15:40:54 +01:00
Jarek Radosz
eff0106efb
FIX: Image sizes were slightly off in some cases (#15678)
This fixes rare cases of layout shift caused by images appearing slightly smaller after being loaded.

For example, a 371x1031 image is uploaded. It gets lightboxed, with the generated thumbnail of size 179x500. `height: auto` changes that thumbnail's size (only after being loaded) to 179x497, causing a 3px shift.

I did not observe any regressions with this change.
2022-02-01 23:30:21 +01:00