4521 Commits

Author SHA1 Message Date
Penar Musaraj
590c250239
A11Y: Show focus when tabbing to user menu items (bottom bar) (#31015) 2025-01-27 15:38:54 -05:00
Kris
85344b4b07
UX: sidebar "more" icon color fix (#31017)
Currently the vertical ellipsis is slightly darker than other sidebar
icons

Before: 

![image](https://github.com/user-attachments/assets/46f58bf0-681b-480a-b290-3ff1062a8c72)


After: 

![image](https://github.com/user-attachments/assets/5f84fa6b-111f-48c5-a501-c8cd2599dac7)
2025-01-27 13:47:45 -05:00
Kris
19aed18d4f
UX: hide user card focus until keyboard navigation begins (#31014)
When the usercard is opened, we manually assign focus to the first link
to capture focus, but this creates an undesirable focus ring for
visitors not relying on focus indicators for navigation.

With this update, the focus is assigned to the container rather than the
first link. This fulfills the goal of capturing focus within the user
card, but hides the focus ring until navigation within the card begins.

`tabindex="-1"` is necessary because this allows us to manually focus
the container (normally unfocusable) while removing it from the tab
order for subsequent navigation.

Before:


![image](https://github.com/user-attachments/assets/1da3a4bb-181b-4cf6-815b-66199757e300)



After:


![image](https://github.com/user-attachments/assets/dda06321-8558-46bf-b16b-dead68e48b92)

then on tab: 


![image](https://github.com/user-attachments/assets/c4cc3d7b-faaf-4bc0-a7c9-d6afef4c6009)

---------

Co-authored-by: Penar Musaraj <pmusaraj@gmail.com>
2025-01-27 12:34:04 -05:00
Keegan George
5d4bb4b54e
UX: Improvements to posts route (#30968)
This update makes some small improvements to the posts route front-end.
Specifically, it adds a title to the page, and it improves the
positioning of expand/collapse caret.
2025-01-23 19:04:43 -08:00
Kris
aa90ba2992
UX: fix admin dashboard link and style regressions (#30969)
Heading link regression reported here:
https://meta.discourse.org/t/admin-panel-reports-in-the-community-health-section-are-no-longer-clickable/347631

Also noticed some style regressions
2025-01-24 10:23:34 +10:00
Martin Brennan
1b9e2ff4f9
FEATURE: Add attribution to staff notice and rename functionality (#30920)
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.
2025-01-24 09:29:22 +10:00
Keegan George
7b76d25946
DEV: Adopt post list component and new posts route front-end (#30604)
Recently we introduced a new `PostList` component (d886c55f63). In this update, we make broader adoption of this component. In particular, these areas include using the new component in the user activity stream pages, user's deleted posts, and pending posts page. This update also takes the existing `posts` route and adds a barebones front-end for it to view posts all in one page.

---------

Co-authored-by: David Taylor <david@taylorhq.com>
2025-01-23 10:20:45 -08:00
Kris
097d987332
UX: add HTML class for composer preview to manage sidebar height (#30956)
This adds the class `composer-has-preview` to the HTML element when the
composer is opened and the preview is visible.

This allows us to adjust the sidebar height, so that the previewless
composer can overlap the sidebar and better utilize the available space.


Before:

![image](https://github.com/user-attachments/assets/8780f159-5d24-4ac0-8a4f-43a9b1665532)



After: 

![image](https://github.com/user-attachments/assets/baf69856-0ece-453f-aa0f-e7be9939af97)
2025-01-23 12:41:36 -05:00
Ella E.
2c8f07fe85
FIX: Adjust search menu buttons alignment (#30939)
### Before
<img width="485" alt="image"
src="https://github.com/user-attachments/assets/869a676a-604f-461e-b008-975f9e352787"
/>


### After
<img width="485" alt="image"
src="https://github.com/user-attachments/assets/3b91022c-9a7d-4237-8382-19b2174f6006"
/>
2025-01-22 19:46:37 -07:00
Bryce Huhtala
1820dd34fc
UX: Revert #30547 UX: use em units for code font-size (#30936)
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.
2025-01-22 20:09:23 -05:00
Renato Atilio
99b0ae2fc1
UX: inherit font-settings on form controls (#30935) 2025-01-22 19:54:36 -03:00
Penar Musaraj
eb041085bc
UX: Fix minimized composer position on iOS PWA and app (#30926)
See
https://meta.discourse.org/t/minimized-composer-reply-control-issues/348337
2025-01-22 13:38:34 -05:00
Joffrey JAFFEUX
2cff8c82e3
UX: adds chat send shortcut user preference (#30473)
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"
/>
2025-01-22 13:17:45 +01:00
David Taylor
83737aab5f
FIX: Restore footer-nav backdrop-filter for iOS < 18 (#30914)
This was inadvertantly removed in
d88ee33eb622e52cec5f442dd6416e68c8f758e4

See https://meta.discourse.org/t/348262/4
2025-01-21 23:48:14 +00:00
David Taylor
c266e4acb8
FIX: Enforce 'prefix' notation for media-query ranges (#30913)
"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.
2025-01-21 23:42:17 +00:00
Jarek Radosz
8c31f1aa5f
UX: Improve git/code oneboxes (#30822) 2025-01-21 14:20:36 -06:00
Penar Musaraj
120f1afc91
UX: Fix scrolling of form template composer on mobile (#30883)
This was a regression in recent composer refactors, this change ensures the `with-form-template` container is scrollable.
2025-01-20 17:32:32 -08:00
Penar Musaraj
ba5cd20ef2
UX: Remove table editor transition effect (#30878)
This fixes a bit of jitteriness on mobile, noticeable mostly when going
from the topic list to a post that has a table.
2025-01-20 17:08:53 -05:00
David Taylor
c171e3dccd
UX: Replace font-size-ios-input workaround (#30877)
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.
2025-01-20 19:17:30 +00:00
David Taylor
d88ee33eb6
DEV: Introduce stylelint (#29852)
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>
2025-01-20 15:27:42 +00:00
Joffrey JAFFEUX
89ff7d51e6
UX: replaces custom more menu by d-menu (#29090)
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.
2025-01-20 12:00:11 +01:00
Ella E.
1702212982
FIX: Adjust grid-template-columns to prevent text overflow (#30864)
### What's changed?
Added `minmax(0, 1fr)` to `grid-template-columns` to ensure the second
column can shrink to fit within the container, avoiding overflow in
smaller viewports or when the container width is limited.

### Before
<img width="489" alt="image"
src="https://github.com/user-attachments/assets/047acba2-6ce7-444e-9ef1-867d3643ee45"
/>

### After
<img width="489" alt="image"
src="https://github.com/user-attachments/assets/b5485746-8dac-422d-ba35-ab819ef78c5d"
/>
2025-01-19 22:06:09 -07:00
Ella E.
7ae5d03a2c
FIX: Prevent wrapping of select box container by applying nowrap (#30863)
Applied `white-space: nowrap` to ensure text remains on a single line.

### Before

![image](https://github.com/user-attachments/assets/f148e216-fce3-46c6-9934-fb43da7f8f47)


### After
<img width="728" alt="image"
src="https://github.com/user-attachments/assets/fce31f33-9a29-4a6d-85c0-d1566c9acd26"
/>
2025-01-19 19:37:10 -07:00
Ted Johansson
0718f940fa
DEV: Use RouteTemplate for admin API keys template (#30835)
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.
2025-01-17 11:22:47 +08:00
Kris
f942599ce1
UX: improve the alignment of long status messages (#30830)
Before: 


![image](https://github.com/user-attachments/assets/77005641-2289-4296-8988-242c139a376d)

After: 


![image](https://github.com/user-attachments/assets/25889d78-7a5d-4097-9242-5cbd82e909ca)

Short message layout stays mostly unchanged: 


![image](https://github.com/user-attachments/assets/893a8f03-0e24-4e68-bc6b-2469eba0523c)
2025-01-16 17:22:37 -05:00
Penar Musaraj
35214201b8
DEV: Target tablets differently for composer position tweaks (#30798) 2025-01-15 14:09:51 -05:00
Penar Musaraj
d16a8a5ea9
UX: Adjust styling of Back button in topic progress (#30769)
Before: 
<img width="300" alt="image"
src="https://github.com/user-attachments/assets/66c07c49-9603-4eb4-84d5-db3821a7af1a"
/>

After: 
<img width="300" alt="image"
src="https://github.com/user-attachments/assets/ba90d74a-4f63-41ae-9dd7-f5999a2d21ef"
/>
2025-01-15 17:41:00 +11:00
Gary Pendergast
5da6a06ce3
UX: Use DPageHeader on the Emails page (#30781)
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.
2025-01-15 15:36:16 +11:00
Penar Musaraj
73b28815e3
FIX: Safari on iOS crashes when pinch-zooming (#30779)
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.
2025-01-14 23:56:20 +01:00
Kris
a94009a57d
UX: remove redundant text-decoration: none, follow up to 912b002 (#30775)
This redundant `text-decoration: none` was getting in the way of showing
a strikethrough on the deleted part of the diff

before ("new strike" at the bottom missing the strikethrough): 

![image](https://github.com/user-attachments/assets/4c04696a-efe8-4bb4-a7a7-cf10fcd4b443)


after (strikethrough appears correctly):

![image](https://github.com/user-attachments/assets/22a8c658-6600-47d4-a795-dc3116971485)
2025-01-14 16:33:09 -05:00
Kris
912b002dcc
UX: show strikethrough, underline in post edit diff (#30773)
Reported here:
https://meta.discourse.org/t/strike-through-text-is-not-rendered-in-diff/347101

`text-decoration: none` needs a few exceptions here to avoid stripping
out styling that's present in posts


before (strikethrough and underline stripped): 

![image](https://github.com/user-attachments/assets/ecb8cdee-e04b-463f-93a3-16d92797f0cd)


after: 

![image](https://github.com/user-attachments/assets/b250c535-de2f-429a-8764-5a60e74ef953)
2025-01-14 15:00:12 -05:00
David Battersby
33ea3599c2
FIX: prevent multiple requests when clicking drafts trigger (#30736)
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).
2025-01-14 11:37:36 +04:00
Martin Brennan
dc0bf90069
UX: Apply admin UI guidelines to Reports pages (#30684)
Applies the admin UI guidelines from
https://meta.discourse.org/t/creating-consistent-admin-interfaces/326780
to the reports list and single report page for admins.


![image](https://github.com/user-attachments/assets/2431901f-0225-4658-b408-ab0865d022e6)

![image](https://github.com/user-attachments/assets/6f9e531b-8fec-405f-8429-151fd261ee2c)

---------

Co-authored-by: Ella <ella.estigoy@gmail.com>
2025-01-14 13:22:08 +10:00
Ella E.
9ce2ad14d1
FIX: Set fixed width for email group chooser dropdown to prevent resizing based on content (#30740)
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
2025-01-13 19:00:09 -07:00
Penar Musaraj
11cc931a64
DEV: Improve composer positioning on tablets (#30745)
Followup to 07e5f89.

See report https://meta.discourse.org/t/-/346876
2025-01-13 15:04:06 -05:00
Kris
f23e196b4f
UX: Switch button focus state to focus-visible (#30744)
From https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible:

> The :focus-visible pseudo-class applies while an element matches the
[:focus](https://developer.mozilla.org/en-US/docs/Web/CSS/:focus)
pseudo-class and the UA ([User
Agent](https://developer.mozilla.org/en-US/docs/Glossary/User_agent))
determines via heuristics that the focus should be made evident on the
element. (Many browsers show a "focus ring" by default in this case.)

This change switches buttons over to `:focus-visible` which shouldn't
change much, except for situations where focus state may linger in cases
when it's not desired, like the tracking button here for example:


![image](https://github.com/user-attachments/assets/57aaa193-0960-4757-a461-47fdcca7de2a)


When using `focus-visible` the `focus` state is no longer visible after
a tap, but the focus state will still appear when using keyboard
navigation or assistive technology like VoiceOver, as seen here:


<img
src="https://github.com/user-attachments/assets/62398532-3e05-4979-91a4-d3ddeb4758cb"
width="300" />
2025-01-13 14:05:51 -05:00
Régis Hanol
79b68bc32b
FIX: show both group's full name & name when they differ (#30672)
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"
/>
2025-01-13 11:28:29 +01:00
David Battersby
47c8197ea1
FEATURE: add drafts dropdown menu (#30277)
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.
2025-01-13 13:33:57 +04:00
Penar Musaraj
07e5f8907e
DEV: Consolidate mobile positioning strategies on mobile and iPad (#30241)
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>
2025-01-10 11:00:15 -05:00
David Taylor
ce97e51b63
UX: Improve git blob oneboxes (#30694)
Rearranges the info at the top of github/gitlab 'blob' oneboxes to make them easier to read
2025-01-10 11:49:36 +00:00
Martin Brennan
690ffcf1d5
UX: Add DPageHeader to watched words and color palettes (#30686)
Part of our admin UI consistency efforts, this is a stop-gap
until we can do a further UI review of these pages.
2025-01-10 15:32:10 +10:00
Ted Johansson
4a78999b6f
DEV: Add new admin UI header to site texts page (#30689)
This adds the new admin UI header to the site texts page.
2025-01-10 13:19:14 +08:00
Ted Johansson
b1bae9b785
FIX: Add back missing API key 'peek' step (#30683)
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.
2025-01-10 10:21:22 +08:00
Joffrey JAFFEUX
d91c48cece
FIX: correct emoji picker size in modal (#30675)
Following a change in b1e40d04b9 the width of the picker has been reduced in modals when it should have been reduced only when NOT in a modal.
2025-01-09 21:53:49 +01:00
Kris
d9c992bfdd
UX: follow-up sidebar variable fixes for c398933 (#30676) 2025-01-09 15:53:29 -05:00
Kris
c39893364b
DEV: fix and improve sidebar CSS variables (#30673) 2025-01-09 14:18:05 -05:00
Joffrey JAFFEUX
b1e40d04b9
FIX: emoji picker followups (#30670)
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
2025-01-09 14:27:48 +01:00
Ted Johansson
590b3e11fb
DEV: Convert admin API keys to conform to UI guidelines (#30660)
Re-opening of #30096. It was reverted because it was missing a sidebar link to Webhooks in the admin panel.
2025-01-09 10:57:40 +08:00
Sérgio Saquetim
e5d6ca0451
DEV: Fix triple click selection in WebKit derived browsers (#30628)
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.
2025-01-08 19:14:15 -03:00
Mark VanLandingham
4da7904ffd
REVERT: "DEV: Convert admin API keys to conform to UI guidelines"
This reverts commit d9ddc258089da0f6cd8cf75af385c8a59eeccac3.

I noticed that Webhook admin UI is now inaccessible through the subheader
2025-01-08 11:03:40 -06:00