Commit graph

65 commits

Author SHA1 Message Date
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
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
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
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
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
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
Suguru Hirahara
43d9e30673
Fix fadein spinner placement on AppTileBody (#10970) 2023-06-01 15:17:28 +00: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
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
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 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
Michael Telatynski
e5291c195d
Replace react-dom tests with react testing-library tests (#10260) 2023-03-01 15:59:27 +00:00
Michael Telatyński
f40d15388c
Update tests to prefer RTL over Enzyme (#10247
* Update tests to prefer RTL over Enzyme

* Strict types
2023-02-28 08:58:23 +00:00
Michael Telatynski
c29e5f18ff
Update usages of test utilities preferring RTL (#10203) 2023-02-22 10:52:55 +00:00
Suguru Hirahara
ea4000cf1e
Fix 'Failed check: Ellipsis' on Weblate (#10144)
* Fix 'Failed check: Ellipsis' on Weblate

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Fix tests

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Remove white space characters before the horizontal ellipsis from RoomPreviewBar

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* yarn run i18n

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Additional change

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

---------

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
2023-02-14 09:05:01 +00:00
Kerry
18ab325eaf
Poll history - filter by active or ended (#10098)
* wip

* remove dupe

* use poll model relations in all cases

* update mpollbody tests to use poll instance

* update poll fetching login in pinned messages card

* add pinned polls to room polls state

* add spinner while relations are still loading

* handle no poll in end poll dialog

* strict errors

* render a poll body that errors for poll end events

* add fetching logic to pollend tile

* extract poll testing utilities

* test mpollend

* strict fix

* more strict fix

* strict fix for forwardref

* add filter component

* update poll test utils

* add unstyled filter tab group

* filtertabgroup snapshot

* lint

* update test util setupRoomWithPollEvents to allow testing multiple polls in one room

* style filter tabs

* test error message for past polls

* sort polls list by latest

* move FilterTabGroup into generic components

* comments

* Update src/components/views/dialogs/polls/types.ts

Co-authored-by: Richard van der Hoff <1389908+richvdh@users.noreply.github.com>

* Apply suggestions from code review

Co-authored-by: Richard van der Hoff <1389908+richvdh@users.noreply.github.com>

---------

Co-authored-by: Richard van der Hoff <1389908+richvdh@users.noreply.github.com>
2023-02-13 09:19:45 +13:00
Michael Weimann
2501dad0a3
Migrate LabelledCheckbox-test to react-testing-library (#10115) 2023-02-09 12:23:34 +01:00
Clark Fischer
2417482667
Fix error when viewing source of redacted events (#9914)
* Fix viewing source of redacted events

Clicking 'View Source' in the context menu of a redacted event causes an error,
and the user gets no visible result.

This fixes <ViewSource /> to indicate that the source is unavailable when a
message has been redacted. The original source remains available.

<SyntaxHighlight /> requires a non-null string for its `content` prop, and, in
the case of redacted events, <ViewSource /> was passing `undefined`. This is
ultimately because redacting an event causes `MatrixEvent.clearEvent` to be
`undefined`, which <ViewSource /> wasn't checking.

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

Signed-off-by: Clark Fischer <clark.fischer@gmail.com>

* Use correct highlight.js call

Previous call signature was deprecated.

See https://github.com/highlightjs/highlight.js/issues/2277

Signed-off-by: Clark Fischer <clark.fischer@gmail.com>

Signed-off-by: Clark Fischer <clark.fischer@gmail.com>
2023-01-15 16:22:59 +00:00
Johannes Marbach
214fa13d7d Update snapshots 2023-01-06 17:44:36 +01:00
Germain
d2763c329d
Migrate AccessibleButton-test to RTL (#9833) 2022-12-28 10:40:34 +00:00
Michael Telatynski
04bc8fb71c
Optimise Jest run in CI (#9542) 2022-11-04 10:48:08 +00:00
Hugh Nimmo-Smith
f05cc5d8f3
Refactor + improve test coverage for QR login (#9525) 2022-11-02 10:51:20 +00:00
Kerry
69642544ac
Device manager - add learn more popups to filtered sessions section (#9497)
* add learn more to filtered sessions

* fullstop

* update tests and i18n for fullstop

* remove unused switch

* whitespace

* use correct card type
2022-10-26 11:04:16 +02:00
Michael Telatynski
913af09e61
Convert some tests from Enzyme to RTL (#9483) 2022-10-24 09:06:20 +01:00
Robin
06dbea6255
New group call experience: Room header and PiP designs (#9351)
* Update our cancel icon

The cancel icon we're using in the app has drifted out of sync with the ones used in our designs. We also had two identical-looking icons, so this consolidates them into one.

I've simultaneously updated our chevron icons, since in the case of the 'jump to unread' timeline button, it became clear that the weight of the new close icon did not match the thinner chevron.

* Don't squish bottom/top-aligned tooltips near the edge of the screen

* Close the timeline panel when returning to the fullscreen timeline view

* Add layout switching capabilities to ElementCall

* Bring the room header in line with the group call designs

* Bring the PiP header in line with the group call designs

* Fix lints

* Clarify tooltip CSS calculations

* Test PipView

* Expand RoomHeader test coverage

* Test PipView more
2022-10-07 02:27:28 +00:00
Robin
0d6a550c33
Prepare for Element Call integration (#9224)
* Improve accessibility and testability of Tooltip

Adding a role to Tooltip was motivated by React Testing Library's
reliance on accessibility-related attributes to locate elements.

* Make the ReadyWatchingStore constructor safer

The ReadyWatchingStore constructor previously had a chance to
immediately call onReady, which was dangerous because it was potentially
calling the derived class's onReady at a point when the derived class
hadn't even finished construction yet. In normal usage, I guess this
never was a problem, but it was causing some of the tests I was writing
to crash. This is solved by separating out the onReady call into a start
method.

* Rename 1:1 call components to 'LegacyCall'

to reflect the fact that they're slated for removal, and to not clash
with the new Call code.

* Refactor VideoChannelStore into Call and CallStore

Call is an abstract class that currently only has a Jitsi
implementation, but this will make it easy to later add an Element Call
implementation.

* Remove WidgetReady, ClientReady, and ForceHangupCall hacks

These are no longer used by the new Jitsi call implementation, and can
be removed.

* yarn i18n

* Delete call map entries instead of inserting nulls

* Allow multiple active calls and consolidate call listeners

* Fix a race condition when creating a video room

* Un-hardcode the media device fallback labels

* Apply misc code review fixes

* yarn i18n

* Disconnect from calls more politely on logout

* Fix some strict mode errors

* Fix another updateRoom race condition
2022-08-30 15:13:39 -04:00
Kerry
50f6986f6c
Device manager - updated dropdown style in filtered device list (PSG-689) (#9226)
* add FilterDropdown wrapper on Dropdown for filter styles

* test and fix strict errors

* fix comment
2022-08-30 19:11:33 +02:00
Michael Telatynski
27a7263965
Attempt to fix Failed to execute 'removeChild' on 'Node' (#9196)
* Switch tooltips to use React Portals

* Remove redundant React key to simplify reconciliation

* Fix cleanup and it.each test

* Update snapshots due to style order difference
2022-08-17 13:35:33 +00:00
Kerry
5a9c2e530a
Device manager - selectable device tile wrapper (PSG-637) (#9153)
* add selectabledevicetile wrapper

* set pointer cursor

* line up own device icon with new checkboxes
2022-08-09 13:07:25 +00:00
Kerry
14cf6275d0
Fix: AccessibleButton does not set disabled attribute (PSF-1055) (#8682)
* remove old styles for pin drop buttons

Signed-off-by: Kerry Archibald <kerrya@element.io>

* fully disable share location button until location is shared

Signed-off-by: Kerry Archibald <kerrya@element.io>

* set disabled on button

Signed-off-by: Kerry Archibald <kerrya@element.io>

* test AccessibleButton disabled

Signed-off-by: Kerry Archibald <kerrya@element.io>

* remove disbaled check in LocationPicker

Signed-off-by: Kerry Archibald <kerrya@element.io>
2022-05-27 07:13:50 +00:00
Travis Ralston
e87bda9f37
Add an option to ignore (block) a user when reporting their events (#8471)
* Add an option to ignore (block) a user when reporting their events

This is primarily useful if the content being reported really doesn't belong on your screen, and the room moderators are slow to react.

Ideally we'd use the word "block" instead of "ignore", but we call it "ignore user" everywhere else. See https://github.com/vector-im/element-web/issues/19590 for further context on the word choice.

This change includes a minor refactor to the styles of labelled toggles (for reusability).

* Appease the linter

* Use a checkbox instead of toggle in the dialog

* Update classnames handling for toggle switch

* Appease the linter
2022-05-18 16:20:55 +00:00