Related to
https://meta.discourse.org/t/double-button-inconsistencies-post-menu/349845
This does some general clean up...
* **Moves shared mobile/desktop styles into /common**
We had some mobile hover states for some reason, and desktop hover/focus
states can be moved to common and gated with `.discourse-no-touch`...
this means we're applying them on capabilities rather than device type
* **Adds some `-d-post-control-` variables to make theming easier**
Theme authors can replace the variables without worrying about selector
specificity
* **Removes an overridden fade-out class from likes**
We were overriding the effect here anyway
* **Fixes a janky hover transition effect on the like button**
This was being incorrectly inherited from another button
...and fixes some issues
* **Corrects border radius on double buttons (likes, flags)**
* **Corrects double button height issues for flags**
* **Adjusts the flag count to avoid the lumpy circle CSS problem**
* **Removes lingering post-tap focus/hover states on mobile by applying
`.discourse-no-touch` and `focus-visible`**
Tested both glimmer and legacy.
We're seeing drops in CLS performance and the animation of this element
may likely be the culprit. We can try removing and seeing if this is
indeed the issue.
The name "Staff Notice" was not quite right since TL4 users
can also add these notices. This commit changes the wording to
"Official Notice".
In addition to this, currently you have to go look into the staff
action logs to see who is responsible for a notice. This commit
stores the ID of the user who created the notice, then shows this
information on each notice to staff users.
Finally, I migrated the ChangePostNoticeModal component to gjs.
The solution in (https://github.com/discourse/discourse/pull/30547)
using `em` units was causing readability problems for code blocks in
mobile. This reverts to the previous solution
(https://github.com/discourse/discourse/pull/30536) of using `font-size:
inherit` for code within heading elements.
The downside is that the code in heading won't be slightly smaller than
the other text like it is for inline code in paragraphs, but it seems
worth it to avoid causing other size issues.
Users can now decide if they want to send a message on:
- <kbd>enter</kbd>
- <kbd>meta + enter</kbd>
If you choose <kbd>meta + enter</kbd>, <kbd>enter</kbd> will add a
linebreak.
<img width="192" alt="Screenshot 2025-01-21 at 12 57 48"
src="https://github.com/user-attachments/assets/abfd6f8b-83b3-4e6f-be67-8f63d536ca8a"
/>
"context" notation is not supported in iOS < 16.4, and we don't have any
post-processing on our CSS files which can automatically make that
conversion.
For now, changing the stylelint config to enforce the more-compatible
syntax, and updating all occurences.
Stylelint is a css linter: https://stylelint.io/
As part of this change we have added two javascript scripts:
```
pnpm lint:css
pnpm lint:css:fix
```
Look at `.vscode/settings.json.sample` and `.vscode/extensions.json` for
configuration in VSCode.
---------
Co-authored-by: Joffrey JAFFEUX <j.jaffeux@gmail.com>
One of the big advantages is a nicer menu on mobile.
This commit also fixes a bug where the close modal action was called for any destroyed d-menu trigger, even if this specific menu was not expanding, which means it was closing a different modal than its own modal, given we can only have one modal at a time.
Not sure why, but it looks like this `z-index: -1` on the composer
causes iOS to crash super quickly when pinch zooming . This change was
introduced in 07e5f8907e2a8de27c42c2d6f5a02fc153212288 and is not
strictly necessary, let's try removing.
Adds a loading state to prevent multiple requests when clicking the
drafts menu button.
We are also making a very slight adjustment to button spacing (needed
for both desktop and mobile).
In the groups page (/g) where we list all the groups, we were only
showing one group "name" per group. If a full name was set, we would
show it, otherwise we would show the group's "display name".
This was somewhat inconsistent because we only show the group's names
in all the various controls we use to filter/search by group.
Plus we used a slightly different logic when displaying the names of a
group on the "group page".
So I updated the "GroupsInfo" component to show either 1 or 2 names
depending on whether a full name is set, and it's different from the
display name or the name of the group.
I used this component in the "group page" so the names will be
consistent between the "groups page" and the "group page".
Also renamed the "GroupsInfo" component to "GroupInfo" since it only
ever deals with 1 group at a time.
Ref - https://meta.discourse.org/t/-/345415
---
## When "full name" differs from the "group's name"
(cf. `@admins`, `@staff`, and `@moderators`)
<img width="1250" alt="Screenshot 2025-01-09 at 15 56 29"
src="https://github.com/user-attachments/assets/f8a0ecdd-2715-40d9-a1ed-26288f638d9f"
/>
## When "full name" is the same as the "group's name"
When `unicode` is allowed in usernames, then the group's full name is
the same as the group's name, so we only show one name.
<img width="1249" alt="Screenshot 2025-01-09 at 16 25 53"
src="https://github.com/user-attachments/assets/03438fbd-04f1-4672-91d5-bd6af2b32475"
/>
This removes some longstanding Safari iOS positioning hacks and refactors the mobile positioning strategy across Safari, Chrome and Firefox. See PR descriptions for more details.
Co-authored-by: Joffrey JAFFEUX <j.jaffeux@gmail.com>
On WebKit-based browsers, triple clicking on the last paragraph of a post won't stop at the end of the paragraph, leaking the selection into the following nodes until it finds a non-empty node.
This commit introduces a workaround to fix this behavior.
The chat emoji picker is renamed emoji-picker, and the old emoji-picker is removed.
This commit doesn't attempt to fully rework a new emoji-picker but instead tries to migrate everything to one picker (the chat one) and add small changes.
Other notable changes:
- all the favorite emojis code has been mixed into one service which is able to store one state per context, favorites emojis will be stored for all topics, and for each chat channel. Meaning that if you always use a specific emoji in a channel, it will only show as favorite emoji in this channel.
- a lot of static code has been removed which should improve initial load perf of discourse. Initially this code was around to improve the performance of the emoji picker rendering.
- the emojis are now stored, once the full list has been loaded, if you close and reopen the picker it won't have to load them again.
List of components:
- `<EmojiPicker />` will render a button which will open a dropdown
- `<EmojiPickerContent />` represents the content of the dropdown alone, it's useful when you want to render a picker from an action which is not the default picker button
- `<EmojiPickerDetached />` just a simple wrapper over `<EmojiPickerContent />` to make it easier to use it with `this.menu.show(...)`
---------
Co-authored-by: Renato Atilio <renatoat@gmail.com>
topic-navigation and topic-map appear in the DOM before the post stream, and are then rearranged with CSS grid. That means that, if they are entirely within the viewport, and does not have a fixed/sticky position, then they will be chosen as the browser's scroll anchor point.
We never want these elements to be used as the anchor, so we can set `overflow-anchor: none`.
https://meta.discourse.org/t/344386/16
This commit adds `showLogin` as an available action to the post menu buttons. They can use this action to show the login form when there is no user logged in.
It also adds a small CSS tweak to prevent the content from the post menu to being user selectable. This was causing small UX issues in touch devices.
