* Collapse UserSettings tabs to just icons on narrow screens
* Add screenshot test
* Better comment formatting.
Co-authored-by: Richard van der Hoff <1389908+richvdh@users.noreply.github.com>
* Comment the media query
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>
* Move LoginWithQRSection to the top of the settings tab
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
* Refactor LoginWithQRSection to a Functional Component
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
* Extract LoginWithQR types
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
* Update LoginWithQRFlow styling & copy
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
* Re-add missing buttons and update snapshots
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
* Use compound spacings
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
---------
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
* Ask the user to change the room access settings if they click the create link button.
Signed-off-by: Timo K <toger5@hotmail.de>
* disable call button if appropriate.
Signed-off-by: Timo K <toger5@hotmail.de>
* Add tests
Refactor tests to be in CallGuestLinkButton-test instead of the RoomHeader
Signed-off-by: Timo K <toger5@hotmail.de>
* add test for: no button if cannot change join rule and room not public nor knock
Signed-off-by: Timo K <toger5@hotmail.de>
* fix tests
Signed-off-by: Timo K <toger5@hotmail.de>
* add JoinRuleDialog tests
Signed-off-by: Timo K <toger5@hotmail.de>
* move spy into before each
Signed-off-by: Timo K <toger5@hotmail.de>
* Update src/i18n/strings/en_EN.json
Co-authored-by: Robin <robin@robin.town>
* remove inline css and update modal style
Signed-off-by: Timo K <toger5@hotmail.de>
* Update src/i18n/strings/en_EN.json
Co-authored-by: Robin <robin@robin.town>
* Update src/i18n/strings/en_EN.json
Co-authored-by: Robin <robin@robin.town>
* Invite state was not reactive.
Changing power level did not update the ui.
Signed-off-by: Timo K <toger5@hotmail.de>
* linter
Signed-off-by: Timo K <toger5@hotmail.de>
* make useGuestAccessInformation use useRoomState
Signed-off-by: Timo K <toger5@hotmail.de>
* fix tests and simplify logic
* fix tests
* review
Signed-off-by: Timo K <toger5@hotmail.de>
---------
Signed-off-by: Timo K <toger5@hotmail.de>
Co-authored-by: Robin <robin@robin.town>
* 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>
* 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>
* 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>
* 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
* 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
* 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>
* 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
* 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>
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.
* 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>
* 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
* 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
* 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
* 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
* 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
* 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).
* 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>
* 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
* 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
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).
* 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`
* 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>
