mirror of
https://github.com/discourse/discourse.git
synced 2026-03-03 23:54:20 +08:00
749d8f4325
This adds some polish to our translation feature and involves changing some button positions and styling. * Updated to the Font Awesome 7 "language" icon — this is an out-of-band update but feels worth it for the better icon (it's larger/clearer) * Repositioned the translation toggle so it doesn't stack for admins above the timeline * Repositioned the mobile translation toggle so it matches the desktop position (admin first, then translation button) * Removed use of the globe icon for translations — everything now uses the consistent "language" icon to make it clear that it's all part of the same system * Adjusted a couple issues where things weren't as reactive as they could be (switching from composer directly to editing a translation would cause a button to remain when it shouldn't) * Styling improvement for "active" state of translations * When toggling translations on/off we now confirm with a toast * Moved the language dropdown in the composer when editing translations, this saves a good amount of space Toasts appear on toggle: <img width="250" alt="image" src="https://github.com/user-attachments/assets/536b84bd-8499-4f01-8ffa-5afa85b7f9e0" /> Before|After — the icon is blue in the active state (a pattern we also use for bookmarks) <img width="140" alt="image" src="https://github.com/user-attachments/assets/13fb3f83-5639-49ca-9379-92617d8b2bbb" /><img width="150" alt="image" src="https://github.com/user-attachments/assets/0e35ef09-074a-46db-9aaa-d8ae087bb2fd" /> Before|After - positioning mirrors the timeline order <img width="200" alt="image" src="https://github.com/user-attachments/assets/cf5921e0-9c1f-45d3-9f15-7f8a5df382e8" /> <img width="200" alt="image" src="https://github.com/user-attachments/assets/dc897c90-d207-4123-b42b-c46f8f75110e" /> Before|After - dropdown repositioned and restyled (wraps on mobile if needed) <img width="260" alt="image" src="https://github.com/user-attachments/assets/c2c11465-70d1-4c8a-8147-9d96154c9ec8" /> <img width="600" alt="image" src="https://github.com/user-attachments/assets/7f731891-1de2-4a30-ad0a-59d0bf0d9da7" /> Before|After - consistent language icon when setting composer language <img width="440" alt="image" src="https://github.com/user-attachments/assets/ac83ab2d-b1fd-4b4e-9411-e65557a1582d" /> <img width="440" alt="image" src="https://github.com/user-attachments/assets/49bd6660-d7c5-4515-8bb2-8ffe10590338" /> Before|after - Icon consistency in posts: <img width="600" alt="image" src="https://github.com/user-attachments/assets/04c0b8a7-4921-4d2e-8ddc-b2f0c7f20ae0" /> <img width="600" alt="image" src="https://github.com/user-attachments/assets/1c2c99c0-5d83-4c57-8619-5fdb42ba9d38" /> Before|after - Post control is now consistent: <img width="420" alt="image" src="https://github.com/user-attachments/assets/ed5540a6-ae6e-4be9-b253-5bc8f2ad7377" /> <img width="420" alt="image" src="https://github.com/user-attachments/assets/fa941b4c-7eb9-4bb8-b8e1-5f313ad30c17" /> |
||
|---|---|---|
| .. | ||
| brands.svg | ||
| regular.svg | ||
| solid.svg | ||
