"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.
By default, iOS safari will automatically zoom into focused inputs with
font-sizes less than 16px. To avoid this, we had a CSS rule to ensure
inputs always had a large font-size on iOS. This worked, but did lead to
design inconsistencies.
Instead, we can set `user-scalable=no` on the viewport meta tag. Since
iOS 10, this property doesn't actually stop users zooming. But it *does*
still prevent the automatic zooming of inputs. So it solves our zoom
problem, and allows us to remove the CSS font-size workaround.
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.
This is a small clean-up PR that does the following:
- Convert api-keys.hbs to a RouteTemplate backed api-keys.gjs.
- Move the sub-page templates (index, show, new) into /api-keys sub-directory.
- Removes some styles that aren't used after the admin UI conversion.
There are a few changes here to make the Emails admin page more consistent with the rest of the admin UI.
- The header and navigation menu have been updated.
- The sidebar now stays highlighted when visiting the email admin sub-pages.
- Moved the Template editor from /admin/customize/email_templates to /admin/email/templates, so it fit as a sub-page.
- Removed the link to the Template editor from the Customize section of the old top menu, since it's accessible from the Emails section, instead.
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).
This PR addresses an issue where the dropdown container width was
inconsistent, resizing based on its content.
**Changes included:**
- Added a fixed width for the dropdown container.
- Adjusted margin spacing by applying it to the `.identifier` class
instead of `.name`. This prevents awkward spacing when either contains a
large number of characters.
Internal topic: /t/143862
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 change adds a new dropdown trigger next to the "New Topic" button.
When clicked a menu will display a list of topic/post drafts that can be
clicked to resume the draft within the composer.
The "New Topic" button will no longer change text to show "Open Draft"
when a draft topic exists, it will still attempt to load the existing
draft if one exists (this will change later when we support multiple
drafts in a separate PR).
The "My Posts" link in desktop sidebar will now be "My Drafts" and only
appear when the current user has existing drafts.
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>
In #30096 we converted the API keys UI to follow the new admin UI guidelines.
During this conversion, the step where you get a chance to copy the API key after creating, was lost due to a rebase mistake.
This re-introduces it.
This pull request is doing the following changes:
prevents clicking on a section to scroll the document body
do not show favorites section if empty
do not close the user-status modal on emoji selection
giving its own context for user-status picker, that way if you frequently use same emojis for the picker they will always be in favorites
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>
This adds the Silence Reason column to silenced user lists.
This feature helps combat large spam attacks cause you can quickly see
why a user was silenced and then bulk act on all the silenced users
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 PR makes the secondary sidebar in the admin UI more consistent
navigation experience:
* Added a coloured background for links on hover
* Replaced the bold text and line style with a distinct background
highlight, ensuring it complements the admin sidebar while maintaining
its own identity
* Bringing in arrow indicators to match the active navigation state in
the category settings
### Before
<img width="488" alt="image"
src="https://github.com/user-attachments/assets/aa843766-0ed7-435a-8880-6f0598aa4782"
/>
### After
<img width="475" alt="image"
src="https://github.com/user-attachments/assets/ec31bab9-0f51-4757-ab06-95a961ae17ee"
/>
