Commit graph

36 commits

Author SHA1 Message Date
Michael Telatynski
dde19f36ac
Add missing presence indicator to new room header (#12865)
* Add missing presence indicator to new room header

DecoratedRoomAvatar doesn't match Figma styles so created a composable avatar wrapper

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

* Add oobData to new room header avatar

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

* Simplify

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

* Iterate

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

* Simplify

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

* Add tests

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>
2024-08-06 14:51:25 +00:00
R Midhun Suresh
dafc97fe83
Add release announcement for the new room header (#12802) 2024-07-23 12:46:24 +01:00
renovate[bot]
ba7cf60cd8
Update dependency @vector-im/compound-web to v5.4.0 (#12773)
* Update dependency @vector-im/compound-web to v5.4.0

* Update snapshots

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-07-12 15:27:51 +00:00
R Midhun Suresh
cf8b87fd14
Add tabs to the right panel (#12672)
* Create new method for header button behaviour

With the introduction of tabs, the behaviour of the header buttons is
changed as follows:
- Close any right panel if open
- Open the correct right panel if no panel was open before

The old method (and behaviour) is retained as showOrHidePhase.

* Implement tabs in the right panel

There are three tabs: Info, People and Threads

* Remove unwanted code from RoomSummaryCard

- Remove the menu item for opening the memberlist since that is now
  taken of by the tabs.
- Remove the close button

* Remove code for focusing close button from tac item

See https://github.com/matrix-org/matrix-react-sdk/pull/12410

There's no longer a close button to focus so we instead focus the thread
tab. This is done in RightPaneltabs.tsx so we just need to remove this
code.

* Introduce a room info icon to the header

This was previously present in the legacy room header but not in the new
header.

* BaseCard changes

- Adds id, ariaLabelledBy and role props to implement tab accessibility.
- Adds hideHeaderButtons prop to hide header buttons (think back and
  close buttons).
- Change confusing header rendering code:
  header is not rendered ONLY when no header is passed AND
  hideHeaderButtons is true.

* Refactor repeated code into function

Created a new function createSpaceScopeHeader which returns the
component if the room is a space room. Previously this code was
duplicated in every component that uses SpaceScopeHeader component.

* Pass BaseCard attributes and use helper function

Actually using the code from the last two commits

* Add, update and remove tests/screenshots/snapshots

* Fix distance between search bar and tabs

* Update compound

* Update screenshots/snapshots
2024-07-09 11:36:50 +00:00
Florian Duros
f59bd6d403
Update @vector-im/compound-web (#12675)
* update deps: `@vector-im/compound-web`

* test: update snapshots
2024-06-24 12:51:10 +00:00
Florian Duros
f8e040a890
Tooltip: Remove extra data attribute (#12483)
* Update `@vector-im/compound-web`

* Update snapshots

* Update jest snapshotss

* Update snapshots
2024-05-06 08:54:40 +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
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
David Baker
c1871ea59f
Update to compound-web 3.0.1 (#12208)
* Update to compound-web 3.0.1

Pulls in a fix to make the indicator icon dot black/white rather than
grey for activity.

* Update snapshots

* More snapshots
2024-02-02 10:26:06 +00:00
Timo
73b16239a5
Add Element call related functionality to new room header (#12091)
* New room header
 - add chat button during call
 - close lobby button in lobby
 - join button if session exists
 - allow to toggle call <-> timeline during call with call button

Compound style for join button in call notify toast.

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

* dont show start call, join button in video rooms.

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

* Make active call check based on participant count
Not based on available call object

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

* fix room header tests

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

* fix room header tests

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

* remove chat button test for displaying.
Chat button display logic is now part of the RoomHeader.

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

* remove duplicate notification Tread icon

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

* remove obsolete jest snapshot

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

* Update src/components/views/rooms/RoomHeader.tsx

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

* update isECWidget logic

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

* remove dead code

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

* refactor call options
Add menu to choose if there are multiple options

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

* join ec when clicking join button (dont start jitsi)
Use icon buttons
don't show call icon when join button is visible

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

* refactor isViewingCall

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

* fix room header tests

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

* fix header snapshot

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

* sonar proposals

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

* fix event shiftKey may be undefined

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

* more lobby time before timeout
only await sticky promise on becoming sticky.

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

* don't allow starting new calls if there is an ongoing other call.

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

* review

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

* fix translation typo

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

---------

Signed-off-by: Timo K <toger5@hotmail.de>
Co-authored-by: Robin <robin@robin.town>
2024-01-31 15:18:52 +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
Michael Telatynski
0a881e2123
Iterate landmarks around the app in order to improve a11y (#12064)
* Iterate landmarks around the app in order to improve a11y

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

* Add missing aria-label

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

* Update snapshots

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

* i18n

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

* Fix tests

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

* Iterate

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

* Update screenshots which have changed a fraction due to default heading margins being different in different landmarks

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

---------

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
2023-12-20 15:32:24 +00:00
renovate[bot]
6669cb70e4
Update dependency @vector-im/compound-web to v0.9.4 (#11891)
Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
Co-authored-by: Michael Telatynski <7t3chguy@gmail.com>
2023-12-14 11:10:01 +00:00
Kerry
cd985d6d6a
make room info button to open room details (#11951) 2023-11-28 21:15:21 +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
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
Germain
899cc53a3e upgrade snapshots 2023-09-22 09:35:36 +01:00
Michael Telatynski
c839123b83
Merge branch 'develop' of github.com:matrix-org/matrix-react-sdk into t3chguy/cr/72
# Conflicts:
#	src/components/views/rooms/RoomHeader.tsx
#	test/components/views/rooms/__snapshots__/RoomHeader-test.tsx.snap
2023-09-19 10:36:29 +01:00
Michael Telatynski
e301fe474b
Merge branch 'develop' of github.com:matrix-org/matrix-react-sdk into t3chguy/cr/72
# Conflicts:
#	test/components/views/rooms/__snapshots__/RoomHeader-test.tsx.snap
2023-09-14 11:33:22 +01:00
RMidhunSuresh
1ba419fe11
Merge branch 'develop' into germain-gg/notifications-labs 2023-09-14 12:14:08 +05:30
Michael Telatynski
4deb864322
Update Compound to fix Firefox-specific avatar regression (#11604) 2023-09-13 11:32:47 +01:00
Michael Telatynski
e54dd60381
Update tests
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
2023-09-11 17:55:32 +01:00
RMidhunSuresh
9ceac6eae1
Merge branch 'develop' into germain-gg/notifications-labs 2023-09-06 19:13:10 +05:30
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
Johannes Marbach
44d4de14c9 Merge branch 'develop' into germain-gg/notifications-labs
# Conflicts:
#	src/i18n/strings/en_EN.json
#	test/components/views/rooms/__snapshots__/RoomHeader-test.tsx.snap
2023-09-04 14:08:50 +02:00
Germain
b75b6f7f74
Prevent event propagation when clicking icon buttons (#11515)
* Prevent event propagation when clicking icon buttons

* Inhibit view user on click behaviour for room header face pile

* Update snapshot
2023-09-04 11:42:27 +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
84922fc488 Update tests 2023-08-31 21:57:45 +01: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
d94808a197
Make room model mandatory on the RoomHeader (#11355)
* Remove oobData from RoomHeader

It is never used as the RoomHeader is not shown unless a Room model exists

* Make room model mandatory on the RoomHeader
2023-08-02 15:29:19 +00:00
Germain
d49581344e
Integrate @vector-im/compound-web (#11354)
* Create useRoomName hook

Mark RoomName component as deprecated

* Pass out-of-band data to relevant RoomHeader component

* Mark LegacyRoomHeader as deprecated

* Fix incorrect search&replace in _RoomHeader.pcss

* lintfix

* Mark room as optional in room topic hook

* Fix i18n

* Discard use of useCallback

* Change export of useRoomName

* fix ts issue

* lints

* Add room topic to room header

* lintfix

* lintfix & clamp to one line

* Revert optimisations to DecoratedRoomAvatar

* Add test for opening the room summary

* Make transition honour prefer-reduced-motion

* Integrate @vector-im/compound-web

* Use compound type styles

* Use latest version of @vector-im/compound-web

* Change component name

* Fallback when room is undefined

* fix snapshot
2023-08-02 13:03:04 +00:00
Germain
33299af5c9
Add room topic and animation (#11352)
* Create useRoomName hook

Mark RoomName component as deprecated

* Pass out-of-band data to relevant RoomHeader component

* Mark LegacyRoomHeader as deprecated

* Fix incorrect search&replace in _RoomHeader.pcss

* lintfix

* Mark room as optional in room topic hook

* Fix i18n

* Discard use of useCallback

* Change export of useRoomName

* fix ts issue

* lints

* Add room topic to room header

* lintfix

* lintfix & clamp to one line

* Revert optimisations to DecoratedRoomAvatar

* Add test for opening the room summary

* Make transition honour prefer-reduced-motion

* Fallback when room is undefined

* fix snapshot
2023-08-02 10:54:06 +00:00
Germain
5d9f5ccf0b
Create useRoomName hook (#11346)
* Create useRoomName hook

Mark RoomName component as deprecated

* Pass out-of-band data to relevant RoomHeader component

* Mark LegacyRoomHeader as deprecated

* Fix incorrect search&replace in _RoomHeader.pcss

* lintfix

* Fix i18n

* Discard use of useCallback

* Change export of useRoomName

* fix ts issue

* lints
2023-08-01 13:47:09 +00:00
Germain
6ae7c033d5
Add feature flag 'feature_new_room_decoration_ui' and segrate legacy UI component (#11345)
* Move RoomHeader to LegacyRoomHeader

* Create new RoomHeader component
2023-08-01 07:32:53 +00:00