Commit Graph

5006 Commits

Author SHA1 Message Date
David Baker
4ae94ae247
Mark all threads as read button (#12378)
* Mark all threads as read button

* Wrap in TooltipProvider and update snapshots

* Remove TooltipProvider wrapper: just add it to the test

* Add some more tests

* Add test for no-room-context handler because sonarcloud

* Add playwright test

* Make assertNoTacIndicator wait

* Use dedicated useMatrixClientContext function

Co-authored-by: Florian Duros <florianduros@element.io>

* Use dedicated useRoomContext function

Co-authored-by: Florian Duros <florianduros@element.io>

* Compound spacing variables

Co-authored-by: Florian Duros <florianduros@element.io>

* Compound spacing variables

Co-authored-by: Florian Duros <florianduros@element.io>

* Imports

* Use createTestClient()

* Add function to utils

* Use mkRoom

---------

Co-authored-by: Florian Duros <florianduros@element.io>
2024-03-28 17:38:21 +00:00
Timo
a24aa7e0f7
Video call meta space (#12297)
* add video room meta space button

Signed-off-by: Timo K <toger5@hotmail.de>

* Add videoRoomsSpace to meta space configuration

Signed-off-by: Timo K <toger5@hotmail.de>

* temp

Signed-off-by: Timo K <toger5@hotmail.de>

* dont show ppl section in video room space

Signed-off-by: Timo K <toger5@hotmail.de>

* add i18n strings

Signed-off-by: Timo K <toger5@hotmail.de>

* revert waitForIframe=false (this is part of another PR)

Signed-off-by: Timo K <toger5@hotmail.de>

* fix missing mock room method

Signed-off-by: Timo K <toger5@hotmail.de>

* test snapshot: add video room meta space

Signed-off-by: Timo K <toger5@hotmail.de>

* rename Conferences -> Conference

Signed-off-by: Timo K <toger5@hotmail.de>

* space panel snap test

Signed-off-by: Timo K <toger5@hotmail.de>

* update snapshot

Signed-off-by: Timo K <toger5@hotmail.de>

* fix test

Signed-off-by: Timo K <toger5@hotmail.de>

* add video room space tests

Signed-off-by: Timo K <toger5@hotmail.de>

* better logic

Signed-off-by: Timo K <toger5@hotmail.de>

* Add Video MetaSpace Test

Signed-off-by: Timo K <toger5@hotmail.de>

* make room join rule update reactive for the video room meta space

Signed-off-by: Timo K <toger5@hotmail.de>

* temp

Signed-off-by: Timo K <toger5@hotmail.de>

* fix description for meta space video room settings

Signed-off-by: Timo K <toger5@hotmail.de>

* tests

Signed-off-by: Timo K <toger5@hotmail.de>

* update snapshot

Signed-off-by: Timo K <toger5@hotmail.de>

* review

Signed-off-by: Timo K <toger5@hotmail.de>

* i18n

Signed-off-by: Timo K <toger5@hotmail.de>

* fix tests

Signed-off-by: Timo K <toger5@hotmail.de>

* put video meta space behind "feature_video_rooms" labs flag

Signed-off-by: Timo K <toger5@hotmail.de>

* review

Signed-off-by: Timo K <toger5@hotmail.de>

* update space store on RoomCreate state event

Signed-off-by: Timo K <toger5@hotmail.de>

* test for updating video room space on room type update

Signed-off-by: Timo K <toger5@hotmail.de>

* remove comment

Signed-off-by: Timo K <toger5@hotmail.de>

* also make knock join rule rooms part of the conference section

Signed-off-by: Timo K <toger5@hotmail.de>

---------

Signed-off-by: Timo K <toger5@hotmail.de>
2024-03-25 18:35:31 +00:00
Robin
10526c92bb
Remove the glass border from modal spinners (#12367)
It was not intentional, as these spinners are not a real dialog.
2024-03-25 17:36:00 +00:00
Michael Telatynski
56d7911897
Iterate styles around Link new device via QR (#12356)
* Rearrange user settings tab order to move Sessions up to 2nd

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

* Iterate copy & iconography on Settings > Sessions > Link new device

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

* Iterate design of Scan QR code screen

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

* Tweak styles

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

* Update tests and snapshots

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

* Update tests and snapshots

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

* Update screenshots

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

---------

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
2024-03-22 15:50:06 +00:00
Robin
a0795c7518
Improve readability of badges and pills (#12360)
* Improve readability of badges and pills

Badges will now always use light theme colors so that they become white-on-gray in both themes, and the contrast of pills has been increased so that they use primary action colors as the background.

* Fix tests
2024-03-22 00:27:13 +00:00
Florian Duros
ddd0ec48ac
Change user permission by using a new apply button (#12346)
* Add PowerLevelSelector.tsx.
It's extracting the current behavior of the privileged users and muted of `RolesRoomSettingsTab.tsx` into a dedicated component.
It's also adding a new apply button.

* Use `PowerLevelSelector` to render privileged and muted users in `RolesRoomSettingsTab`

* Update existing tests

* Add playwright test

* Fix typo

* Fix typo
2024-03-19 13:45:23 +00:00
David Baker
a5ed97b903
Mark as Unread (#12254)
* Support the mark as unread flag

* Add mark as unread menu option

and make clering notifications also clear the unread flag

* Mark as read on viewing room

* Tests

* Remove random import

* Don't show mark as unread for historical rooms

* Fix tests & add test for menu option

* Test RoomNotificationState updates on unread flag change

* Test it doesn't update on other room account data

* New icon for mark as unread

* Add analytics events for mark as (un)read

* Bump to new analytics-events package

* Read from both stable & unstable prefixes

* Cast to boolean before checking

to avoid setting state unnecessarily

* Typo

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

* Doc external interface (and the rest at the same time)

* Doc & rename unread market set function

* Doc const exports

* Remove listener on destroy

* Add playwright test

* Clearer language, hopefully

* Move comment

* Add reference to the MSC

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

* Expand on function doc

* Remove empty beforeEach

* Rejig badge logic a little and add tests

* Fix basdges to not display dots in room sublists again

and hopefully rename the forceDot option to something that better
indicates what it does, and add tests.

* Remove duplicate license header (?)

* Missing word (several times...)

* Incorporate PR suggestion on badge type switch

* Better description in doc comment

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

* Update other doc comments in the same way

* Remove duplicate quote

* Use quotes consistently

* Better test name

* c+p fail

---------

Co-authored-by: Richard van der Hoff <1389908+richvdh@users.noreply.github.com>
2024-03-19 13:28:20 +00:00
Robin
26b4d47af1
Refine the colors of some more components (#12343)
* Refine the colors of some more components

This is a reintroduction of https://github.com/matrix-org/matrix-react-sdk/pull/12255, and should be the last part of the Compound color refinement work (https://github.com/element-hq/element-web/issues/26992). I've updated the following components to reflect design decisions (https://www.figma.com/file/pqhlirZFEwEp5XpudSbiia/Theming-Web-templates?type=design&node-id=80-60219&mode=design&t=mjqwylUie1vRwzOV-0) that will help them fit in better with the new design system:

- Message bubbles
- Pills
- Sent indicators
- Jump to bottom/unread buttons
- Composer placeholder
- Notification badges
- Room sublists
- Verification shields
- Date separators
- Tooltips

Closes https://github.com/element-hq/element-web/issues/22122

* Update some screenshots
2024-03-18 15:47:55 +00:00
Florian Duros
e309410266
TAC: Fix hover state when expanded (#12337)
* Fix TAC hover state

* Add playwright test

* Update playwright snapshot after last compound style changes
2024-03-14 16:21:18 +00:00
Robin
49be30bbc3
Fix the image view (#12341) 2024-03-14 15:33:43 +00:00
Robin
80c4c3c28c
Refine styles of menus, toasts, popovers, and modals (#12332)
* Refine styles of menus, toasts, popovers, and modals

This is a reintroduction of https://github.com/matrix-org/matrix-react-sdk/pull/12247, with the difference that modal styles have now been refreshed as well.

* Restore the fixed heights of some dialogs

* Fix formatting and flaky screenshot
2024-03-13 13:38:32 +00:00
Florian Duros
753fc2d33a
TAC: Fix CSS & component typos (#12333)
* Fix CSS & component typo

* Update snapshots
2024-03-11 15:48:11 +00:00
Michael Telatynski
8e68d5d6be
Improve Forward Dialog a11y by switching to roving tab index interactions (#12306)
* Improve Forward Dialog a11y by switching to roving tab index interactions

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

* Improve screen reader readout

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

* Improve screen reader readout

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

* Add tests

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

---------

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
2024-03-08 14:45:15 +00:00
Florian Duros
ddbc6439ce
Fix spotlight opening in TAC (#12315)
* Fix spotlight opening in TAC

* Add tests

* Remove `RovingTabIndexProvider`
2024-03-08 10:18:30 +00:00
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
60f3c2eae5
Remove unused slider component (#12303)
It is unused as of https://github.com/matrix-org/matrix-react-sdk/pull/12246. I noticed this while working on https://github.com/matrix-org/matrix-react-sdk/pull/12299.
2024-03-07 03:52:20 +00:00
Michael Telatynski
26176116bf
Use strong element to semantically denote visually emphasised content (#12320)
* Use `strong` element to semantically denote visually emphasised content

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>

---------

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
2024-03-06 23:34:14 +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
29b79ef351
Fix TAC opening with keyboard (#12285)
* Fix TAC opening with keyboard

* Use compound tooltip and icon button

* Revert "Fix TAC opening with keyboard"

This reverts commit 5a1e5d0c

* Add missing aria-label

* Update tests

* Add tests

* Fix visual regression

* Fix remaining tooltip

* Fix ref typing

* Fix typing
2024-02-29 14:07:46 +00:00
David Baker
5ac222e1c4
Fix alignment of user menu avatar (#12289)
* Fix alignment of user menu avatar

https://github.com/matrix-org/matrix-react-sdk/pull/12267 made the avatar
a couple of pixels out of alignment with the space icons. It just needed
to be moved 2px to the right to match the 18px margin of the space icons
(including the padding from the black border).

Also change elements in the user menu to block elements so they don't
generate extra vertical space in the user menu div, which was causing the
hairline to be too far down.

* Update snapshots

* Typo

Co-authored-by: Robin <robin@robin.town>

* Reference the span by class

* The img wasn't actually necessary here

---------

Co-authored-by: Robin <robin@robin.town>
2024-02-27 19:50:44 +00:00
Florian Duros
b9bdd18666
Use green dot for activity notification in LegacyRoomHeader (#12270) 2024-02-22 13:36:12 +00:00
David Baker
ebd0a046b1
Fix the space panel getting bigger when gaining a scroll bar (#12267)
* Fix the space panel getting bigger when gaining a scroll bar

Just makes the scrollbar gutter stable and removes 8px of padding
to compensate, so it will make the bar slightly larger, but it will
no longer change size weirdly if you have too many spaces in too short
a window.

* Tweak margins to keep space panel the same size

* Try 1px more

* Try 1px more to the left

* Fix sizes and disable flex when in narrow mode

* Update screenshots

* Another screenshot

* Last screenshot hopefully
2024-02-21 15:18:58 +00:00
Florian Duros
6d55ce0217
Use browser's font size instead of hardcoded 16px as root font size (#12246)
* WIP Use browser font size instead of hardcoded 16px

* Add font migration to v3

* Remove custom font size input

* Use a dropdown instead of a slider

* Add margin to the font size dropdown

* Fix `UpdateFontSizeDelta` action typo

* Fix `fontScale`in `Call.ts`

* Rename `baseFontSizeV3` to `fontSizeDelta`

* Update playwright test

* Add `default` next to the browser font size

* Remove remaining `TODO`

* Remove falsy `private`

* Improve doc

* Update snapshots after develop merge

* Remove commented import
2024-02-21 11:23:07 +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
David Baker
d20e9e4f8e
Fix gradients spacings on the space panel (#12262)
* Fix gradients spacings on the space panel

Make the gradients two separate ones so they can be fixed pixel widths
from the top & bottom rather than percentages of the height.

Tweak the spacings between the user menu & threads panel to match
the figma and from Gaelle's design.

* Update snapshots

* More screenshots
2024-02-20 15:28:46 +00:00
Florian Duros
ac435c8d4e
Revert "Refine menu, toast, and popover colors (#12247)" (#12263)
This reverts commit 0856c7617d.

Co-authored-by: David Langley <langley.dave@gmail.com>
2024-02-20 13:54:33 +00:00
David Baker
e8ce9cb360
Use h1 as first heading in dialogs (#12250)
* Use h1 as first heading in dialogs

The dialog should be modal and therefore the only content active
on the screen, so the title of the dialog should be the top level.

Update snapshots & tests appropriately.

* Just customise the letter spacing on dialog titles
2024-02-16 14:23:33 +00:00
Robin
0856c7617d
Refine menu, toast, and popover colors (#12247)
So that they use Compound semantic colors correctly and appear more similar to the real components now found in Compound.
2024-02-14 22:30:16 +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
8bbad9f653
Enable custom themes to theme Compound (#12240)
* Enable custom themes to theme Compound

* Remove the now redundant username color variables

They are replaced by the Compound theming options (specifically, username colors can be themed by changing the color of Compound's decorative color tokens).
2024-02-13 14:07:58 +00:00
Florian Duros
1c789cbb18
Reduce TAC width by 16px (#12239) 2024-02-08 14:46:34 +00:00
Florian Duros
cf5d9f86fd
Fix TAC button alignment when expanded (#12238) 2024-02-08 14:09:32 +00:00
Florian Duros
a4987060b7
Pop out of Threads Activity Centre (#12136)
* Add `Thread Activity centre` labs flag

* Rename translation string

* WIP Thread Activity Centre

* Update supportedLevels

* css lint

* i18n lint

* Fix labs subsection test

* Update Threads Activity Centre label

* Rename Thread Activity Centre to Threads Activity Centre

* Use compound `MenuItem` instead of custom button

* Color thread icon when hovered

* Make the pop-up scrollable and add a max height

* Remove Math.random in key

* Remove unused class

* Change add comments on `mx_ThreadsActivityRows` and `mx_ThreadsActivityRow`

* Make threads activity centre labs flag split out unread counts

Just shows notif & unread counts for main thread if the TAC is enabled.

* Fix tests

* Simpler fix

* Open thread panel when thread clicke in Threads Activity Centre

Hopefully this is a sensible enough way. The panel will stay open of
course (ie. if you go to a different room & come back), but that's the
nature of the right panel.

* Dynamic state of room

* Add doc

* Use the StatelessNotificationBadge component in ThreadsActivityCentre

and re-use the existing NotificationLevel

* Remove unused style

* Add room sorting

* Fix `ThreadsActivityRow` props doc

* Pass in & cache the status of the TAC labs flag

* Pass includeThreads as setting to doesRoomHaveUnreadMessages too

* Fix tests

* Add analytics to the TAC (#12179)

* Update TAC label (#12186)

* Add `IndicatorIcon` to the TAC button (#12182)

Add `IndicatorIcon` to the TAC button

* Threads don't have activity if the room is muted

This makes it match the computation in determineUnreadState.
Ideally this logic should all be in one place.

* Re-use doesRoomHaveUnreadThreads for useRoomThreadNotifications

This incorporates the logic of not showing unread dots if the room
is muted

* Add TAC description in labs (#12197)

* Fox position & size of dot on the tac button

IndicatorIcon doesn't like having the size of its icon adjusted and
we probably shouldn't do it anyway: better to specify to the component
what size we want it.

* TAC: Utils tests (#12200)

* Add tests for `doesRoomHaveUnreadThreads`
* Add tests for `getThreadNotificationLevel`

* Add test for the ThreadsActivityCentre component

* Add snapshot test

* Fix narrow hover background on TAC button

Make the button 32x32 (and the inner icon 24x24)

* Add caption for empty TAC

* s/tac/threads_activity_centre/

* Fix i18n & add tests

* Add playwright tests for the TAC (#12227)

* Fox comments

---------

Co-authored-by: David Baker <dbkr@users.noreply.github.com>
2024-02-07 13:49:40 +00:00
Robin
3052025dd0
Use new semantic tokens for username colors (#12209)
* Use new semantic tokens for username colors

To match the tokens now used by the Compound Web avatar component

* Fix incorrect lock icon

* Update screenshots
2024-02-06 20:54:30 +00:00
David Baker
95430cecbc
Add notification dots to thread summary icons (#12146)
* Add notification dots to thread summary icons

Adopts new IndicatorIcon from compound to have threads icons with
indicator dot (that aren't also buttons). Adds green & red dots on
the threads icon in the thread summary to indicate notifications.
Changes the notification level dots colours in the threads panel to
be green to match.

* Update test for new CSS class

* Update snapshots with new class name

* Another snapshot update for new class name

* Replace more uses of old class name in tests

* More snapshot updates for new class name

* Unsure how this ever worked in chronological mode

* More snapshot updates

* Fix dot colours

* Upgrade to compound-web 3

* Fix computed notification levels

* Add test for notificationLevelToIndicator
2024-01-25 16:53:41 +00:00
David Baker
d110660dc3
Make the unread badge component more reusable (#12163)
Add a paramter to make it a dot rather than a badge rather than mangling
it to a dot with CSS in EventTile. Move it to a place in the DOM that reflects
where it's actually supposed to sit rather than repositioning it with CSS.
Tweak sizes to match what figma says (8px everywhere for dots rather than 6px in
some places as it was).
2024-01-23 14:39:50 +00:00
Manan Sadana
b3ab5fc2c3
Fixed shield alignment on message Input (#12149)
* Fixed shield alignment on message Input

* Fixed shield alignment on message Input

* Updated fix

* reversing merged changes
2024-01-18 14:48:29 +00:00
Richard van der Hoff
993a7029b8
Show a progress bar while migrating from legacy crypto (#12104)
* Show a progress bar during migration of crypto data

* playwright: add new `pageWithCredentials` fixture

* Add a playwright test for migration progress

* Add documentation for `idbSave`
2024-01-17 07:14:49 +00:00
Michael Telatynski
5983528a8d
Remove Cypress & Playwright in their entirety (#12145) 2024-01-16 09:48:49 +00:00
David Baker
9254e9562e
Don't reference the notification levels by colour (#12138)
* Don't reference the notification levels by colour

We're about to change what colours they are so either we'd have to rename
a bunch of constants. We may as well make things not reference what colour
anything is in the actual UI. Hopefully these constants are clear enough.

 * Rename NotificationColor -> NotificationLevel
 * Red -> Highlight
 * Grey -> Notification
 * Bold -> Activity
 * Anywhere else that calls it 'color' -> 'level'

Also fixes some weird mixes of US & UK English.

It turns out this is referenced in... quite a lot of places, so this is
quite a large PR. It can't really be much smaller, sorry.

* One test rename & some hiding due to ts-ignore

* More hiding behind ts-ignore

* Damn you, @ts-ignore...

* Fix test CSS values

* Missed some colour -> level

Co-authored-by: Florian Duros <florianduros@element.io>

* Change other instances of variables renamed in suggestion

* Update new test for renames

---------

Co-authored-by: Florian Duros <florianduros@element.io>
2024-01-15 15:25:48 +00:00
Florian Duros
80e75e3b70
Change Quick Settings icon (#12141)
* Change Quick Settings icon

* Update space panel playwright snapshot
2024-01-15 10:56:46 +00:00
Michael Telatynski
0820994463
Use Compound tooltips more widely (#12128)
* Switch MIMageBody & MStickerBody to Compound Tooltip

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

* Switch E2ePadlock & SentReceipt to Compound Tooltips

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

* Workaround compound bug

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

* Fix tests

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

* Improve coverage

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

* Iterate tests

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

* Iterate tests

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

* Fix tests

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

---------

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
2024-01-11 11:49:24 +00:00
Michael Telatynski
061c269f36
Use Compound Tooltips in StatelessNotificationBadge, VerifyEmailModal, CheckEmail (#12084)
* Switch StatelessNotificationBadge to using Compound Tooltips

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

* Fix test

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

* Migrate CheckEmail & VerifyEmailModal to Compound tooltips

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

* Fix test

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

* Fix CSS stacking contexts for Dialogs & PersistedElement

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

* Switch to PersistedElement sharing a CSS stacking context for z-index to continue functioning

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

* Fix Widget PIP overlay being under the widget and dragging being broken

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

* Fix border-radius on widget pip

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

* Fix majority of tests

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

* Fix jest retryTimes applying outside of CI

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

* Fix remaining tests

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

* Fix React unique key warnings

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

* Fix sticker picker

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

* id not class

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

* Fix widget pip button colour in light theme

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

---------

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
2024-01-09 11:46:27 +00:00
Michael Telatynski
57da29de58
Fix regression around CSS stacking contexts and PIP widgets (#12094)
* Fix CSS stacking contexts for Dialogs & PersistedElement

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

* Switch to PersistedElement sharing a CSS stacking context for z-index to continue functioning

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

* Fix Widget PIP overlay being under the widget and dragging being broken

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

* Fix border-radius on widget pip

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

* Fix majority of tests

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

* Fix jest retryTimes applying outside of CI

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

* Fix remaining tests

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

* Fix React unique key warnings

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

* Fix sticker picker

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

* id not class

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

* Fix widget pip button colour in light theme

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

* Revert unrelated change

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

---------

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
2024-01-08 12:11:44 +00:00
Richard van der Hoff
fd64eccd4a
Factor out post-login splash screen to a new component (#12103)
* Factor out post-login splash screen to a new component

* Move CSS classes to per-component file

* Rename CSS classes

... to reflect the component that uses them

* code review
2024-01-04 18:12:08 +00:00
renovate[bot]
a0c8575113
Update dependency prettier to v3 (#12095)
Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
Co-authored-by: Michael Telatynski <7t3chguy@gmail.com>
2024-01-02 18:56:39 +00:00
Michael Telatynski
176237ee9b
Prepare for switching AccessibleTooltipButton to using Compound Tooltips (#12082)
* Fix Compound tooltips in Dialogs

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

* Fix setting labels not being correctly linked

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

* Update snapshots

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

* Fix playwright test

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

* Iterate

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>

---------

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
2024-01-02 09:21:53 +00:00
Timo
e26d3e9b68
Update element call embedding UI (#12056)
Signed-off-by: Timo K <toger5@hotmail.de>
2023-12-20 12:39:57 +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
Anoop P
18f11b8024
Fix position of thumbnail in room timeline (#12016)
Co-authored-by: David Baker <dbkr@users.noreply.github.com>
2023-12-14 11:16:05 +00:00
Michael Telatynski
e180ca841b
Improve stability of Playwright screenshot tests (#11983) 2023-12-04 11:02:48 +00:00
Michael Telatynski
446400b6b6
Migrate right-panel/* from Cypress to Playwright (#11954)
* Migrate file-panel.spec.ts from Cypress to Playwright

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

* Migrate right-panel.spec.ts from Cypress to Playwright

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

* Migrate notification-panel.spec.ts from Cypress to Playwright

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

* Update screenshots

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

* Update screenshots

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

* Fix test flakes

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

* delint

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

* Update screenshot

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

* Fix tests

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

* Update screenshots

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

* Try stabilise test

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

* sleep

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

* Handle both cases

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

* Fix assertion

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

* Flip

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

* Test

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

* Iterate

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

* Test

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

---------

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
2023-12-01 12:24:49 +00:00
Germain
07b7ee6111
Deprecate lab experiment 'feature_state_counters' (#11343)
* Deprecate lab experiment 'feature_state_counters'

* i18n

* Regenerate strings

---------

Co-authored-by: Johannes Marbach <johannesm@element.io>
2023-11-30 08:19:16 +00:00
Kerry
1ffa1c9c18
Fix: Space scope header overflow (#11933)
* fix spacing for scope header

* extract scope header into component, apply line clamp

* update ThirdPartyMemberInfo styles

* pass onClose to ThirdPartyRoomMemberInfo

* rethemendex

* add View3pidInvite to actions enum, replace uses

* extract out action handler

* push card instead, test

* comment

* reinstate data-testid

* fix typo in styles
2023-11-29 08:25:34 +00:00
Kerry
cd985d6d6a
make room info button to open room details (#11951) 2023-11-28 21:15:21 +00:00
Michael Telatynski
ee485ffcfd
Default to system emoji font (#11925)
* Disable Twemoji emoji font by default

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

* Force Twemoji font in SAS Verification

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

* Iterate

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

* Iterate

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

* Add tests

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

* Improve tests

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

---------

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
2023-11-23 13:04:05 +00:00
Michael Telatynski
2f0eb8fb05
Fix ended polls overlapping event bubbles (#11895)
* Fix ended polls overlapping event bubbles

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

* Update snapshot

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

---------

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
2023-11-20 17:27:54 +00:00
Germain
f96583e74a
Update RoomSummaryCard navigation links (#11812)
* Update RoomSummaryCard navigation links

* Fix tests

* remove unneeded test

* "@vector-im/compound-web": "0.8.0"

* Fix: search button no transition on hover

* Fix: disabled invite option is not reflected in UI

* test canInviteTo

* update snapshots for CW 0.8.1

* unit test inviteToRoom

* unit test tagRoom

* add member link to roomsummarycard when using legacy room header

* use onChange instead of onClick for ToggleMenuItem favourite room

* update selectors in cypress tests

* always show people menu item

* add hover style to close button

* add padding around room name

* prettier

---------

Co-authored-by: Kerry Archibald <kerrya@element.io>
2023-11-16 03:25:34 +00:00
Kerry
f6ef476f79
Fix: Emoji cause topics being cut off in new room header (#11865)
* Order of buttons on the right should be Video Call, Voice Call, Threads, Facepile

* Fix 26326: Emoji cause topics being cut off in new room header
2023-11-14 22:20:21 +00:00
Kerry
2a3fd93afa
Room header: do not collapse avatar or facepile (#11866)
* Room header: do not collapse avatar or facepile

* comment
2023-11-14 06:48:26 +00:00
Kerry
a3f0633037
Fix: align base card close button to the right always (#11861) 2023-11-13 21:57:20 +00:00
Germain
722c5ad493
Update room summary card header (#11823)
* Update room summary card header

* test coverage for public room label

* test coverage for public room label (#11841)

* fix encrypted badge selector in cypress/crypto.spec

---------

Co-authored-by: Kerry <kerrya@element.io>
2023-11-11 07:24:48 +00:00
R Midhun Suresh
90419bdffd
Implement new unreachable state and fix broken string ref (#11748)
* Fix string ref issue

* Implement unreachable state

* Fix eslint failure

* Fix i18n

* Fix i18n again

* Write cypress test

* Write jest test

* Write more jest tests

* Update method name

* Use unstable prefix

* Always use prefix

This is never to going to be in the spec so always use the io.element
prefix

* Update tests

* Remove redundant code from cypress test

* Use unstable prefix

* Refactor code

* Remove supressOnHover prop

* Remove sub-text label

* Join lines

* Remove blank line

* Add jsdoc
2023-11-07 10:14:30 +00:00
Kerry
6849afd9fc
fix rightpanel hiding scrollbar (#11831) 2023-11-06 23:22:40 +00:00
Dharshan
53f35b6d28
Fix Incorrect message scaling for verification request (#11793)
* Fix CSS for uploading-files in threads

* fix-close button to stick at top of container

* re-align close button

* re-align close button

* Fix verification-message-scaling

* add min width to mx_EventTileBubble

---------

Co-authored-by: Kerry <kerrya@element.io>
2023-10-26 07:07:32 +00:00
nurjin jafar
b2fb41b91c
Make invitation dialog scrollable when infos are too long (#11753)
* make invitation dialog scrollable when room name or invitation text/info is too long.

Signed-off-by: nurjinn jafar <nurjin.jafar@nordeck.net>

* truncate room name in invitation dialog to two lines

Signed-off-by: nurjinn jafar <nurjin.jafar@nordeck.net>

* truncate room name in invitation dialog to two lines

Signed-off-by: nurjinn jafar <nurjin.jafar@nordeck.net>

* fix linter issue

Signed-off-by: nurjinn jafar <nurjin.jafar@nordeck.net>

---------

Signed-off-by: nurjinn jafar <nurjin.jafar@nordeck.net>
2023-10-24 16:06:44 +00:00
Ajay Bura
827715cf1e
fix spoiler text-align (#11790) 2023-10-24 15:48:12 +00:00
Germain
c28f3164bd
Fix margin of invite to room button (#11780) 2023-10-20 20:26:32 +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
Kerry
a63b99f687
Revert "remove problematic big emoji style (#11757)" (#11774)
This reverts commit eb7ce666b7.
2023-10-20 02:41:53 +00:00
Dharshan
3902ce9c40
Fix CSS for uploading-files in threads (#11751)
* Fix CSS for uploading-files in threads

* fix-close button to stick at top of container

* re-align close button

* re-align close button

---------

Co-authored-by: Kerry <kerrya@element.io>
2023-10-19 04:07:38 +00:00
Kerry
eb7ce666b7
remove problematic big emoji style (#11757) 2023-10-18 21:39:47 +00:00
Manan Sadana
01714d9c83
Fix: Bubble layout design is broken (#11763)
* Fixed the layout, added border to match design

* Border fixed for hover and highlighted messages

* moved some selectors up to avoid duplicate selectors
2023-10-18 09:46:09 +00:00
Michael Telatynski
4ff307b562
Iterate io.element.late_event decoration (#11760)
* Update copy

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

* Add icon to late event timestamp

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

* Update snapshot

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

---------

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
2023-10-17 12:31:41 +00:00
Manan Sadana
6d1aea49db
Fix: Message shield alignment is not right. (#11703)
* Message shield alignment fixed

* Alignment fixed in all layouts

* Fixed for all font sizes
2023-10-17 07:01:37 +00:00
Michael Telatynski
5ff965106a
Render timeline separator for late event groups (#11739)
* Use Compound tooltips on MessageTimestamp to improve UX of date time discovery

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

* Show io.element.late_event in MessageTimestamp when known

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

* Update snapshot

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

* Avoid needing new Compound changes

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

* Move groupers into their own directory

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

* Refactor date separator code to be more generic

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

* Render timeline separator for late event groups

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

* Fix date used in copy

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

* Update snapshot

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

* Move groupers into their own directory

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

* Update copy

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

* Update copy

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

* Update snapshot

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

* i18n

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

* Add comments

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

* Add comments

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

---------

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
2023-10-16 14:14:04 +00:00
Manan Sadana
7dc40e6613
Fix: <detail> HTML elements clickable area too wide. (#11666)
* Fix: Details element wide clickable area

* LogoutDialog-test.tsx snapshot updated

* Fixed open state clickable area for dropdowns

* Advanced changed to advanced

---------

Co-authored-by: Manan Sadana <manan.sadana@cnhteam.onmicrosoft.com>
Co-authored-by: Florian Duros <florianduros@element.io>
2023-10-12 08:50:49 +00:00
Gabriel Rodríguez
a80cf58aa3
Fix alignment and poor contrast on user pills in invite dialog (#11722)
* improve invite tile color

* change checkmark color for consistency

* switch to cpd-color-text-info-primary

* fix misaligned "x"

* use --cpd-color-bg-success-subtle instead
2023-10-11 16:00:15 +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
Abhinav Dixit
54ca20df4b
Prevent select element in General settings overflowing in a room with very long room-id (#11597)
* #25614 Updated mx_Field select

* making the changes reset

* #25614 Updated mx_Field select

* Changes made in the grid and Select tag

* Adding test for mx_Field overflow

* Adding test for mx_Field overflow for long address

* Adding test for mx_Field overflow after formatting

---------

Co-authored-by: R Midhun Suresh <hi@midhun.dev>
2023-10-09 10:55:43 +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
Manan Sadana
34a0cf7e54
Members shield alignment fixed (#11700) 2023-10-03 14:49:09 +00:00
Andy Balaam
c27c230195
Merge pull request #11678 from manancodes/manancodes/Room_avatar_alignment
Fix: Wierd shadow below room avatar in dark mode.
2023-10-03 15:39:47 +01:00
Manan Sadana
ab2aef3f3e
Avatar image shrink fixed (#11698)
Co-authored-by: Manan Sadana <manan.sadana@cnhteam.onmicrosoft.com>
2023-10-03 07:55:31 +00:00
Andy Balaam
97d871cba9
Merge pull request #11674 from manancodes/manancodes/Edited_message_ux_fix
Fix: Edited message remove button is hard to reach.
2023-10-02 10:53:19 +01:00
Michael Telatynski
e0f4b26512
Remove focus-visible polyfill (#11677)
* Remove focus-visible polyfill

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

* Update snapshots

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

---------

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
2023-09-28 11:52:26 +00:00
Manan Sadana
8e4de798a5
Fix: Theme selector radio button not aligned in center with the text (#11676)
* Theme selector radio button aligned in center with the text

* fixed alignment, align-items at correct position now

---------

Co-authored-by: Manan Sadana <manan.sadana@cnhteam.onmicrosoft.com>
2023-09-28 10:26:01 +00:00
Manan Sadana
2e0eb63fe2 Room avatar alignment fixed 2023-09-27 21:19:07 +05:30
Manan Sadana
c16aba5c3a
Merge branch 'develop' into manancodes/Edited_message_ux_fix 2023-09-27 17:03:00 +05:30
Manan Sadana
99a2d024ec Changed hover ui of edited messages for a better experience 2023-09-27 16:12:49 +05:30
Manan Sadana
2cfdf2ced9
Fix: Unread notification dot aligned (#11658)
Co-authored-by: Manan Sadana <manan.sadana@cnhteam.onmicrosoft.com>
2023-09-27 06:36:31 +00:00
Germain
d99618263a
Merge branch 'develop' into germain-gg/facepile-offset 2023-09-25 11:33:28 +01:00
Germain
7378b7fdd1 Fix more button sizing in face pile 2023-09-22 17:07:43 +01:00
Germain
477d79cb92 Fix FacePile 'more' rendering 2023-09-22 16:31:52 +01:00
Manan Sadana
560449676b
Fix: Alignment Fixed (#11648)
* Fix: Alignment Fixed

* Fix: Pinned Widget also aligned

---------

Co-authored-by: Manan Sadana <manan.sadana@cnhteam.onmicrosoft.com>
2023-09-22 12:57:07 +00:00
Germain
224f34c211
Merge branch 'develop' into germain-gg/facepile-offset 2023-09-22 08:46:37 +01:00
Germain
c6fec9b95b
Fix add to space avatar text centering (#11643) 2023-09-21 11:56:05 +00:00
Germain
54ec7e696d
Render space pills with square corners to match new avatar (#11632) 2023-09-21 11:04:57 +00:00
Germain
51e2a161e1 Revert "Fix regression around FacePile with overflow (#11527)"
This reverts commit 93ccccc03d.
2023-09-20 13:54:54 +01:00
maheichyk
86e86ba49f
Show knock rooms in the list (#11573)
* Show knock rooms in the list

Signed-off-by: Mikhail Aheichyk <mikhail.aheichyk@nordeck.net>

* Pass userId to IndexedDBStore

Signed-off-by: Mikhail Aheichyk <mikhail.aheichyk@nordeck.net>

* Revert "Pass userId to IndexedDBStore"

Signed-off-by: Mikhail Aheichyk <mikhail.aheichyk@nordeck.net>

* Code review changes

Signed-off-by: Mikhail Aheichyk <mikhail.aheichyk@nordeck.net>

---------

Signed-off-by: Mikhail Aheichyk <mikhail.aheichyk@nordeck.net>
Co-authored-by: Mikhail Aheichyk <mikhail.aheichyk@nordeck.net>
2023-09-19 11:24:35 +00:00