Commit graph

177 commits

Author SHA1 Message Date
renovate[bot]
af51897889
Update dependency @vector-im/compound-web to v3.1.3 (#12281)
* Update dependency @vector-im/compound-web to v3.1.3

* Update snapshots

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Update snapshots

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Update snapshots

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Fix TAC width due to compound update (#12326)

---------

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
Co-authored-by: Michael Telatynski <7t3chguy@gmail.com>
Co-authored-by: Florian Duros <florianduros@element.io>
2024-03-07 14:40:03 +00:00
Robin
6eafe0e5a8
Refine styles of controls to match Compound (#12299)
This changes the styles of buttons, other form controls, and tabs in settings to:

1. Improve their usage of semantic colors, so that they adapt correctly to custom themes
2. Make them more visually coherent with the new Compound design system, as we integrate more of it into the app

This is a re-introduction of https://github.com/matrix-org/matrix-react-sdk/pull/12241 with the difference that we're now using our branding colors again on form colors, and buttons have become rounded to match the appearance of new Compound buttons.
2024-03-05 04:25:47 +00:00
Florian Duros
96a33b800a
Revert "Use Compound primary colors for most actions" (#12264)
* Revert ed5ef023b2

* Update failing snapshots

* Update snapshots after develop merge
2024-02-20 16:24:40 +00:00
Robin
ed5ef023b2
Use Compound primary colors for most actions (#12241)
* Use Compound primary colors for most actions

The "accent" color variable is something we should generally not use anymore: it maps to a Compound text token, which makes its semantics inappropriate for icons and backgrounds, and it clashes with the primary colors present on the Compound components we're now bringing into the app. As discussed with design, we would like to phase out its usage on interactive components in favor of the correct icon and background colors from Compound. This is a best-effort attempt at applying new colors to all the major places that we were previously using "accent": mainly, buttons and form controls are affected.

* Update some more colors

* Update test snapshots

* Fix broken screenshot
2024-02-13 20:10:07 +00:00
Robin
b422641258
Upgrade compound-web (#12234)
* Upgrade compound-web

I forgot to include this in https://github.com/matrix-org/matrix-react-sdk/pull/12209, which has caused avatar and username colors to be out of sync and sometimes revert to plain black/white.

* Update tests

* Update tests
2024-02-07 17:26:05 +00:00
renovate[bot]
56d8ef3640
Update dependency @vector-im/compound-web to v2 (#12133)
* Update dependency @vector-im/compound-web to v2

* Update Tooltip props

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Include TooltipProvider in MatrixChat

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Fix pillify & tooltipify

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Update tests to use TooltipProvider where necessary

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Fix tooltips in Modals, ContextMenus, PersistedElements, Spoiler, HtmlExport

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Update tests

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* delint

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Update tests

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Fix tooltips in HTMLExport

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Don't pass mountAsChild to DOM

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* prettier

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Stabilise test

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

---------

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
Co-authored-by: Michael Telatynski <7t3chguy@gmail.com>
2024-01-11 19:56:36 +00:00
Michael Telatynski
07747e24d4
Switch Pill & E2EIcon to using Compound Tooltips (#12080)
* Switch Pill to using Compound Tooltips

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Switch E2EIcon to using Compound Tooltips

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Update tests & snapshots

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

---------

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
2023-12-21 15:21:41 +00:00
Michael Telatynski
2212fbadd0
Use Compound tooltips instead of homegrown in TextWithTooltip & InfoTooltip (#12052)
* Migrate InfoTooltip to use Compound Tooltip

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Migrate DecoratedRoomAvatar.tsx to Compound tooltips

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Small type tweaks

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Remove unused props

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Migrate TextWithTooltip.tsx to Compound tooltips

This adds `contain: strict` to #matrixchat which may have side effects.

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Update snapshots

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Add comment

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Update snapshot

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Revert accidental layout change to TextWithTooltip from inline to block

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Improve test coverage and simplify

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Update snapshots

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Ditch the sleep call

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Improve coverage

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

---------

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
2023-12-19 17:19:54 +00:00
Kerry
a3f0633037
Fix: align base card close button to the right always (#11861) 2023-11-13 21:57:20 +00:00
Germain
f784a085fd
New right panel visual language (#11664)
* New right panel visual language

* Upgrade Compound

* Align old room header with right panel

* Rigth panel look and feel

* Fix linting and e2e tests

* Update snapshot

* Add test

* Lint

* Remove screenshot local script

* Update snapshots and UI based on feedback

* fix i18n key

* Update right panel visuals

* Fix tests

* lintfixes

* fix tests

* fix tests

* Add tests for search icon

* Fix invite dialog spec
2023-10-20 13:30:37 +00:00
renovate[bot]
3bd6dd9143
Update vector-im (#11621)
* Update vector-im

* Update snapshots

---------

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
Co-authored-by: Michael Telatynski <7t3chguy@gmail.com>
2023-10-12 11:12:59 +00:00
Germain
ac32d45bcd
Usability fixes for new room header (#11729)
* Usability fixes for new room header

* lintfix

* Apply padding to both heading and topic

* lintfix

* comment clarity

* Remove title attr
2023-10-11 14:43:01 +00:00
Manan Sadana
54fa9a572e
Fix: Clicking on members pile does nothing. (#11657)
* Fix: Clicking on pile opens members list

* onClick used on Accessible Component

* Updated snapshots for testing

* Snapshots updated after merging

---------

Co-authored-by: Manan Sadana <manan.sadana@cnhteam.onmicrosoft.com>
2023-10-06 06:54:25 +00:00
Andy Balaam
875fcb1a32
Merge pull request #11634 from matrix-org/germain-gg/facepile-offset
Revert "Fix regression around FacePile with overflow (#11527)"
2023-09-26 09:49:37 +01:00
Michael Telatynski
0f59298f30
Consolidate conjugation i18n strings (#11660) 2023-09-25 12:18:15 +01:00
Germain
899cc53a3e upgrade snapshots 2023-09-22 09:35:36 +01:00
renovate[bot]
d34dc0c307
Update vector-im (#11526)
* Update vector-im

* Update snapshots of Compound Avatars

* Update snapshots of Compound Avatars

---------

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
Co-authored-by: Michael Telatynski <7t3chguy@gmail.com>
2023-09-05 08:09:36 +00:00
Charly Nguyen
2ff1056cb2
Allow creating public knock rooms (#11481)
* Allow creating public knock rooms

Signed-off-by: Charly Nguyen <charly.nguyen@nordeck.net>

* Apply PR feedback

Signed-off-by: Charly Nguyen <charly.nguyen@nordeck.net>

* Apply PR feedback

Signed-off-by: Charly Nguyen <charly.nguyen@nordeck.net>

---------

Signed-off-by: Charly Nguyen <charly.nguyen@nordeck.net>
2023-09-04 16:09:44 +00:00
Germain
d551469543
Room header UI updates (#11507)
* Fix performance issues with useRoomMembers

With the current implementation it would create a new function, with leading: true, rendering the whole throttling useless

* Add public room indicator

* Format room members count better

* Add public room test

* Add search to room summary card

* Update settings UI

* Update snapshot

* Remove default title attribute
2023-09-01 09:45:50 +00:00
Germain
dc70ea5059
Add face pile to rooms (#11356)
* Add face pile to rooms

* Migrate FacePile to use Compound

* Fix CI

* Use FacePile component in room header

* Add facepile tests

* Make dead code CI happy

* Lint

* Fix tests

* Fix CSS selectors

* Update room face pile snapshot

* Use useMemo instead of useState and useEffect

* Remove unused imports

* Update snapshot

* Update snapshot
2023-08-30 17:55:02 +00:00
Germain
6aa86a858f
Fixes read receipt avatar offset (#11483)
* Fixes read receipt avatar offset

Fixes https://github.com/vector-im/element-web/issues/26059

* Fix avatar collapsing in thread list

Fixes https://github.com/vector-im/element-web/issues/26064

* Make composer pills use new avatar design

Fixes https://github.com/vector-im/element-web/issues/26067

* Update snapshots

* Update UserInfo snapshot

* Update HTMLExport snapshot

* Fixes avatar placeholder font

Fixes https://github.com/vector-im/element-web/issues/26061
2023-08-30 11:47:35 +00:00
Germain
23897dff4f
Fix colour of avatar and colour matching with username (#11470)
* Use consistent colouring of username with avatar

* Upgrade Compound to fix Firefox issue

* Use the approapriate color shade for usernames

* Use the approapriate color shade for usernames

* Upgrade Compound

* Fix tests
2023-08-24 17:12:28 +00:00
Germain
09c5e06d12
Change avatar to use Compound implementation (#11448)
* Move avatar to new compound implementation

* Make space avatars square

* Remove reference to the avatar initial CSS class

* remove references to mx_BaseAvatar_image

* Fixe test suites

* Fix accessbility violations

* Add ConfirmUserActionDialog test

* Fix tests

* Add FacePile test

* Fix items clipping in members list

* Fix user info avatar sizing

* Fix tests
2023-08-24 03:48:35 +00:00
Michael Telatynski
99e80dd296
Consume more imports from matrix-js-sdk/src/matrix (#11449) 2023-08-23 09:04:25 +00:00
Michael Telatynski
4de315fb6c
Use Intl for names of languages (#11427)
* Use Intl for names of languages

* Tweak Intl language style from "American English" -> "US English"

* Update tests

* Fix tests

* Consolidate languageHandler-test files

* Improve coverage

* Consistent casing for languages in dropdown

* Update LanguageDropdown.tsx

* Delint & update snapshot

* Fix tests

* Improve coverage

`of` will fallback to the given code with fallback=code (default)
2023-08-22 14:07:16 +00:00
Michael Telatynski
57a0d99dc8
Improve randomString mock for better snapshots (#11375) 2023-08-09 09:39:48 +01:00
Kerry
e0d498e338
Enable jsx-a11y/click-events-have-key-events eslint rule (#10362)
* enable "jsx-a11y/alt-text" lint rule

* enable "jsx-a11y/label-has-associated-control"

* make Spoilers keyboard accessible

* make invite reason keyboard accessible

* make invite suggestions keyboard accessible

* make avatar upload in space basic settings keyboard accessible

* ignore jsx-a11y/click-events-have-key-events issues in tests

* Update test expectation

---------

Co-authored-by: Michael Telatynski <7t3chguy@gmail.com>
2023-08-09 06:27:31 +00:00
Michael Telatynski
24703eea8f
Switch to importing models/event from main js-sdk export (#11363) 2023-08-07 08:24:58 +00:00
Michael Telatynski
e67ca33c4a
Switch to importing models/Room from main js-sdk export (#11361)
* Switch to importing TypedEventEmitter from main js-sdk export

* Switch to importing js-sdk/matrix in cypress

* Remove duplicated imports

* Fix lint:js-fix to run prettier last otherwise ESLint --fix may cause a mess

* Add lint rule

* Switch to importing models/Room from main js-sdk export

* Fix cypress-axe import

* Fix more imports

* Fix cypress-axe import

* Fix duplicated lint rule
2023-08-04 07:36:16 +00:00
Michael Telatynski
755f8d7ab0
Fix AppTile context menu not always showing up when it has options (#11358)
* Fix AppTile context menu not always showing up when it has options

* Comment

* Update snapshots
2023-08-03 09:23:20 +00:00
Michael Telatynski
8b8ca425d7
Hide widget menu button if it there are no options available (#11257)
* Hide widget menu button if it there are no options available

* Update snapshots
2023-07-17 10:37:07 +00:00
Richard van der Hoff
2cfbd73cd3
Replace getQRCodeBytes with generateQRCode (#11241)
* Replace `getQRCodeBytes` with `generateQRCode`

* another test update

* remove obsolete snapshot
2023-07-13 13:55:55 +00:00
Johannes Marbach
9d9c55d92e
Handle permalinks in room topic (#11115)
* Handle permalinks in room topic

Fixes: vector-im/element-web#23395

* Add test for clicking non-link
2023-06-21 18:09:22 +00:00
Suguru Hirahara
2972219959
Conform class names of mx_AppTileBody for a widget and PiP widget to our naming policy (#11002)
* Rename classes of appTileBodyClass

Include mx_AppTileBody_fadeInSpinner in mx_AppTileBody, the class name applied by default

* Apply a common CSS declaration to mx_AppTileBody

* Strictify style rule specificity to avoid visual regressions - mx_AppTileBody--*

* Run prettier

* Change --normal to --large

* Edit and add comments

When you add, edit, or remove style rules from mx_appTileBody without causing a visual regression, it is imperative to keep in mind which selector should be worked on. The comments should help developers who are not familiar with the style codebase to avoid a regression.

* Rename classes of appTileBodyClass

Include mx_AppTileBody_fadeInSpinner in mx_AppTileBody, the class name applied by default

* Apply a common CSS declaration to mx_AppTileBody

* Strictify style rule specificity to avoid visual regressions - mx_AppTileBody--*

* Run prettier

* Change --normal to --large

* Edit and add comments

When you add, edit, or remove style rules from mx_appTileBody without causing a visual regression, it is imperative to keep in mind which selector should be worked on. The comments should help developers who are not familiar with the style codebase to avoid a regression.

* Update a Jest snapshot

* Update a Jest snapshot
2023-06-16 18:24:10 +00:00
Suguru Hirahara
b40f29f04c
Fix visual regressions around widget permissions (#10954)
* Add a Jest snapshot of AppPermission

* Move the test inside 'for a pinned widget' category

* Make only spinner message bold

* Set font size specified with "mx_AppPermission_smallText" by default

- Add "mx_AppPermission_largeText" for elements whose size has not been specified with mx_AppPermission_smallText
- Create _AppWarning.pcss for AppWarning

* Make AppPermission panel scrollable, keeping the content at the center

* Run prettier

* Use Heading component

* Use Icon component

* Fix the test
2023-06-14 11:11:06 +00:00
Suguru Hirahara
0ce3664434
Conform to the naming policy - AppsContainer resizer (#11042)
* Add a snapshot to track AppTile in AppsDrawer

* Conform to the naming policy - AppsContainer resizer

* Nest 'mx_AppsContainer_resizer_container_handle' to enforce the style

- mx_AppsContainer_resizer
- mx_AppsContainer_resizer_container
- mx_AppsContainer_resizer_container_handle

* Rename "mx_AppsContainer_resizer" to "mx_AppsDrawer_resizer"

PersistentVResizer is defined by mx_AppsDrawer (see const "classes")
2023-06-13 11:13:07 +00:00
Richard van der Hoff
34439ee652
Simplify references to VerificationRequest (#11045)
* Use new `VerificationRequest.getQRCodeBytes()`

* Use new `VerificationRequest.otherDeviceId`

* Remove references to `VerificationRequest.channel`

* Replace references to `VerificationRequest.{requesting,receiving}UserId`

Normally these are guarded by `request.initiatedByMe` so we can trivially
replace it with `request.otherUserId` or `client.getUserId()`. In one place we
actually need to apply some logic.

* increase test coverage

* Even more test coverage

* Even more test coverage
2023-06-07 14:43:44 +00:00
Michael Telatynski
6b46d6e4f8
Add MatrixClientPeg::safeGet and use it in tests (#10985) 2023-06-05 18:12:23 +01:00
Suguru Hirahara
43d9e30673
Fix fadein spinner placement on AppTileBody (#10970) 2023-06-01 15:17:28 +00:00
Michael Telatynski
30429df948
Eliminate the use of MatrixClientPeg in utils (#10910) 2023-05-23 16:24:12 +01:00
Suguru Hirahara
b7cd1f00fc
Use Icon component for icons on AppTile's menu bar (#10955)
* Use icon component for buttons on mx_AppTileMenuBar_widgets

* Remove redundant declarations

* Add a Percy snapshot test

* Set color value to mx_Icon, fill and stroke with currentColor

* Iterate
2023-05-22 07:48:40 +00:00
Suguru Hirahara
c6f44d3053
Add Jest snapshots for AppTile (#10946)
- on PiP widget (PersistentApp)
- on RightPanel
2023-05-19 10:34:55 +00:00
Suguru Hirahara
8637a5d77d
Take Jest snapshots of widgets (AppTile) (#10897)
* Take a Jest snapshot of a widget (AppTile)

* Fix the comment

* Update test/components/views/elements/AppTile-test.tsx

Co-authored-by: Michael Telatynski <7t3chguy@gmail.com>

* Add container

---------

Co-authored-by: Michael Telatynski <7t3chguy@gmail.com>
2023-05-18 08:30:55 +00:00
Michael Telatynski
2da199c41d
Remove url npm dependency and use Web URL constructor (#10930) 2023-05-17 12:50:00 +01:00
Michael Telatynski
2cee8a4b01
Specify lazy loading for avatars (#10866)
* Specify lazy loading for avatars

so browser doesn't fetch eagerly if off-screen

* Update snapshots
2023-05-11 18:29:48 +00:00
Michael Telatynski
82e32035fd
Conform more of the codebase to strictNullChecks (#10842) 2023-05-11 09:56:56 +01:00
Michael Telatynski
99ac9e5029
Ensure tooltip contents is linked via aria to the target element (#10729)
* Ensure tooltip contents is linked via aria to the target element

* Iterate

* Fix tests

* Fix tests

* Update snapshot

* Fix missing aria labels for more tooltips

* Iterate

* Update snapshots
2023-05-05 08:26:11 +00:00
Michael Telatynski
782060a26e
ARIA Accessibility improvements (#10674)
* Add missing aria-expanded attributes

* Improve autoComplete for phone numbers & email addresses

* Fix room summary card heading order

* Fix missing label on timeline search field

* Use appropriate semantic elements for dropdown listbox

* Use semantic list elements in keyboard settings tab

* Use semantic list elements in spotlight

* Fix types and i18n

* Improve types

* Update tests

* Add snapshot test
2023-04-20 17:13:30 +00:00
Michael Telatynski
a47b3eb0ee
Apply strictNullChecks to src/components/views/elements/* (#10462
* Apply `strictNullChecks` to `src/components/views/elements/*`

* Iterate

* Iterate

* Iterate

* Apply `strictNullChecks` to `src/components/views/elements/*`

* Iterate

* Iterate

* Iterate

* Update snapshot
2023-03-29 08:23:54 +01:00
Michael Weimann
aec454dd6f
Add UserProfilesStore, LruCache and cache for user permalink profiles (#10425) 2023-03-27 10:07:43 +02:00