Commit Graph

171 Commits (54b71140b8fe2ec553cf6ab42f11f61344340fff)

Author SHA1 Message Date
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
Michael Weimann 3eb6a55b93
Tweak pill UI (#10417) 2023-03-22 13:27:24 +01:00
Michael Weimann 96d1b74ffc
Pillify event permalinks (#10392) 2023-03-21 10:23:20 +01:00
Michael Telatynski 1c9ea423c9
Conform more code to `strictNullChecks` (#10374)
* Apply `strictNullChecks` to `src/components/views/room_settings/*`

* Restore tsconfig.json

* Conform more code to `strictNullChecks`

* Iterate

* Update matrix-widget-api

* Conform more code to `strictNullChecks`
2023-03-16 11:07:29 +00:00
Michael Weimann 41d88ad6ae
Fix user pill click (#10359) 2023-03-13 15:43:13 +01:00
Michael Weimann 85e8d27697
Extract avatars from permalink hook (#10328) 2023-03-09 12:48:36 +01:00
Michael Weimann ad26925bb6
Refactor pill and add tests (#10304) 2023-03-08 13:06:50 +01:00