Commit graph

35 commits

Author SHA1 Message Date
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
46037d2357
Add E2E status in room header (#11493)
* Add E2E status in room header

* Clearer logic for dmRoomList

Co-authored-by: Andy Balaam <andy.balaam@matrix.org>

* Add test for E2E shield

* Remove dead code

---------

Co-authored-by: Andy Balaam <andy.balaam@matrix.org>
2023-08-31 11:06:14 +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
d0c6880335
Fix blockquote colour contrast (#11299)
* Fix blockquote colour contrast

* Blockquote update
2023-07-21 12:16:33 +00:00
Germain
f4e7e08425
Restoring optional ligatures by resetting letter-spacing (#11202)
* Restoring optional ligatures by resetting letter-spacing

* Revert "Restoring optional ligatures by resetting letter-spacing"

This reverts commit 6536265ce2c5a2ae81023cc26aaa3cc11e85703b.

* Restore ligatures with inter dynamic metrics

* lintfix
2023-07-13 14:17:55 +00:00
Germain
38d24f164a
Compound color pass (#11079)
* Integrate compound design tokens

The icons should not be included in this repo, and should live in the compound design token repo, but for simplicity sake at this phase of the integration they will be added here

* Pareto color pass on the light theme

* bugfixes in the light color pass

* Compound color pass dark theme

* Compound color pass high contrast

* Fix typo

* fix tooltip

* Fix PR feedback

* fix composer button mixin

* Normalise some of the auth page colors

* Update based on figma feedback

* lintfix

* regenerate theme index

* Fix cypress tests

Removed the CSS assertions in the room header as it overlaps with the Percy snapshot

* fix more e2e tests

* update colors based on feedback

* fix color pass

* Fix theme overrides

* Restore -transparent

* fix color mapping

* Final colour pass update

* Do not consume compound colors directly

* rethemedex

* Update pass

* Final tweaks

* a11y pass

* scope opacity to checkbox and not label

* Add missing customisations var for theming

* lintfix

* remove unwanted test
2023-07-12 17:46:49 +00:00
Germain
880d9b1004
fix markdown content (#11177) 2023-07-03 15:07:30 +00:00
Germain
68b04a83e8
Fix font-family definition for emojis (#11170)
* Fix font-family definition for emojis

* prettier fix

* Rephrase comment about font family overrides
2023-07-03 08:48:42 +00:00
Germain
9c7d935aae
Compound Typography pass (#11103)
* Integrate compound design tokens

The icons should not be included in this repo, and should live in the compound design token repo, but for simplicity sake at this phase of the integration they will be added here

* Delete unused or incorrect - sass variables

* Typography pass

* Deprecate _font-weights.pcss and use Compound instead

* lint fix

* Fix snapshot

* Fix typography pass feedback

* Remove unwanted e2e test

cypress tests should test functionality not visual output. And we should not test visual output by inspecting CSS properties

* lintfix

* Migration script for baseFontSize

* Updates after design review

* Update font scaling panel to use min/max size

* Fix custom font

* Fix font slider e2e test

* Update custom font

* Update new baseFontSizeV2

* Disambiguate heading props

* Fix appearance test

* change max font size

* fix e2ee test

* fix tests

* test baseFontSize migration code

* typescript strict

* Migrate baseFontSize account setting

* Change assertion for font size

* Fix font size controller test
2023-06-29 10:30:25 +00:00
Suguru Hirahara
707fd9ccf0
Move style rules for AppWarning.tsx and AppPermission.tsx from _AppsDrawer.pcss to _common.pcss (#11094)
Because the style rules do not belong to AppsDrawer.tsx and are used by other multiple components, it is sensible to manage the rules on _common.pcss rather than _AppsDrapwer.pcss to improve maintainability.
2023-06-15 12:22:15 +00:00
Germain
4243847f4f
Integrate compound design tokens (#11091)
* Integrate compound design tokens

The icons should not be included in this repo, and should live in the compound design token repo, but for simplicity sake at this phase of the integration they will be added here

* lintfix

* Use correct SpyInstance import

* Using npm build of design tokens
2023-06-14 15:49:14 +00:00
Suguru Hirahara
6871667741
Tidy style rules related to mx_Dialog (#10549)
* Nest - .mx_Dialog .markdown-body

* Nest - .mx_Dialog .markdown-body *

* Run prettier

* Nest

* Nest - * .mx_Dialog_background

* Run prettier

* Nest - * .mx_Dialog

* Nest - mx_Dialog_title.danger

* Use a variable for z-index: default wrapper index

* Use a variable for z-index: static dialog background

* Use a variable for z-index: static dialog itself

* Use a variable for z-index: standard dialog background

* Use a variable for z-index: standard dialog

* Merge :root selector blocks

* Calculate z-index values to fix the order

* Rename the variables

* Include mx_Dialog_buttons_row in mx_Dialog_buttons

mx_Dialog_buttons_row is used on DialogButtons.tsx only inside mx_Dialog_buttons under {additive}

* Run prettier

* Nest `pre code` in `pre`
2023-05-26 13:28:29 +00:00
Suguru Hirahara
2e3cb0adf7
Replace a Sass variable with a CSS custom property - hover-transition (#10786) 2023-05-22 07:40:40 +00:00
Suguru Hirahara
9f574cc764
Replace Sass variable with CSS custom property: --selected-message-border-width (#10876) 2023-05-18 04:18:59 +00:00
Suguru Hirahara
dc8ea8dc27
Replace $timeline-image-border-radius with a CSS custom property (#10792)
* Use CSS custom property: --timeline-image-border-radius

Remove the same variable from _MImageBody.pcss

* Rename the property

The property is neither limited to a timeline nor image, but applied to M.*?Body components as well, such as MLocationBody and MVideoBody.
2023-05-09 21:06:19 +00:00
Suguru Hirahara
dc9a00f280
Remove an obsolete variable and use a custom property for Slider (#10779) 2023-05-09 05:16:40 +00:00
Suguru Hirahara
53fcb0c36e
Remove mixin mx_Tooltip_dark and rename class mx_Tooltip_dark (#10801)
* Remove a mixin - mx_Tooltip_dark

The mixin has been used on `_AppsDrawer.pcss` only.

* Rename mx_Tooltip_dark based on the naming policy

'mx_Tooltip_dark' has been used on `AppPermission.tsx` only.
2023-05-08 03:01:00 +00:00
Suguru Hirahara
fbf3de52cd
Remove mixin 'mx_Dialog_link' (#10787)
There is not a component named 'mx_Dialog_link', and removing a mixin is good for pushing our style codebase toward vanilla CSS.
2023-05-05 09:01:54 +00:00
Suguru Hirahara
9fc4410ee9
Update style rules of MessageTimestamp (#10780)
* Remove an obsolete variable - `$MessageTimestamp_width_hover`

Added by 9b54aba4c0
Deprecated 5343be7814

* Replace a variable with a custom property - $MessageTimestamp_width

* Merge with an existing property in :root

rename

* Manage the variable on _MessageTimestamp.pcss
2023-05-04 12:19:26 +00:00
Suguru Hirahara
5162cefa78
Replace Sass variables with CSS custom properties - $container-gap-width and $container-border-width (#10776)
* Replace a Sass variable with a CSS custom property - $container-gap-width

* Replace a Sass variable with a CSS custom property - $container-border-width
2023-05-03 09:24:41 +00:00
Suguru Hirahara
382d2787c2
Remove obsolete style rules - mx_DialogDesignChanges_wrapper (#10550)
The style rules have been obsolete since IA 1.1 feedback toast was removed by 5d89230271.

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
2023-04-26 04:47:56 +00:00
Suguru Hirahara
ca102c4d36
Remove some obsolete button styles from _common.pcss (#10548)
* Remove obsolete style rules - `mx_linkButton`

The block was added with fbab8ceeef for CreateKeyBackupDialog.js. It has been replaced with AccessibleButton element (see: onSkipPassPhraseClick on L283 and changeText on L314-316). The last function which had used mx_linkButton (_onOptOutClick) has been removed.

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

* Remove obsolete style rules - `mx_textButton`

mx_textButton has been replaced with AccessibleButton (with kind="link"). There is also not an element which uses the class.

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

---------

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
2023-04-24 08:21:24 +00:00
Suguru Hirahara
92906c2130
Replace Sass variables with custom properties on _font-weights.pcss (#10554)
* Replace `$font-normal` and `$font-semi-bold`

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

* Replace `font-weight: 600` with the custom property

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

* Replace the existing variables

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

---------

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
2023-04-21 14:16:00 +00:00
Michael Telatynski
287a3fd0cf
Fix issues with inhibited accessible focus outlines (#10579) 2023-04-12 12:49:12 +00:00
Suguru Hirahara
232daaff68
Fix decryption failure bar covering the timeline (#10360)
* Use grid layout instead

- BEM naming style
- Increase block gap from 4px to 8px
- Use flexbox inside 'header' grid-area to let the buttons wrapped
- Use variables
- Remove 4px gap when one of the buttons is not rendered
- Change 'body' to 'message'
- Set 'align-self: start' to the icon and spinner

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

* Unset height of spinner

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

* Break lines at newline characters with white-space: pre-line

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

* Edit tests to check decryption failure bars on narrow timeline

- checkTimelineNarrow() looks for buttons by default
- Test indicator as well

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

* Remove a line

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

* Edit the test to have it check mx_EventTile_last only inside mx_RoomView_body

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

* Fix double underscores

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

* Fix double underscores - pcss

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

* Iterate - buttons at the bottom

- Set common spacing to buttons with variables
- Remove line breaks, yarn run i18n
- Set data-testid for headlines and buttons in case the tested strings would be displayed elsewhere simultaneously

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

* Check waiting headline as well

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

* Increase spacing between the message and the buttons

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

* lint

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

* Increase block gap between wrapped buttons for clickability

Apply 8px between wrapped buttons

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

* Revert bottom margin of buttons which are not expected to be wrapped

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

* Check visibility instead of existence

This commit removes data-testid from headlines and data-testid-button and checks whether the elements are really visible, not overflowing the viewport.

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

* Remove redundant gap between 'mx_DecryptionFailureBar_start' and the bottom edge

This commit adds '.mx_DecryptionFailureBar--withEnd' class name to have it applied to the bar only if it has button(s). This way the bar is rendered with a flexbox and the row-gap declaration is respected only if there is a 'mx_DecryptionFailureBar--withEnd' element. The element  currently includes the button(s) only.

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

* lint - prettier

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

* Have Percy take a snapshot of the bar loading spinner before checkTimelineNarrow()

The loading spinner is likely to disappear while checking the bar on the narrow timeline.

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

---------

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
Co-authored-by: Kerry <kerrya@element.io>
2023-03-30 10:11:16 +01:00
Suguru Hirahara
afb2cb93f2
Fix flaky Percy tests of ReplyChain (#10450)
* Fix flaky Percy tests of ReplyChain

- Add media query for percy on _ReplyChain.pcss to apply the same color to vertical strokes (border-left)of ReplyChain
- Use CSS variables for visibility
- Manage those variables on _common.pcss for maintainability

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

* Check receptSent as well for consistency

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

* Add a comment

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

* Specify zero spacing and remove list-style

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

---------

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
2023-03-27 12:13:25 +00:00
Suguru Hirahara
d8acdd1750
Fix profile resizer to make first character of a line selectable in IRC layout (#10396) 2023-03-21 10:10:13 +01:00
Kerry
1e46efe89c
Poll history - make poll history independent from dialogs (#10349)
* move pollhistory from dialogs to polls directory

* rename PollHistoryDialog -> PollHistory

* rename references to PollHistoryDialog

* move title to PollHistory

* add option to collapse empty dialog header
2023-03-12 20:22:30 +00:00
Michael Weimann
526645c791
Apply prettier formatting 2022-12-12 12:24:14 +01:00
zooster
d6ea92f735
fix(visual): make cursor a pointer for summaries (#9419)
Co-authored-by: Šimon Brandner <simon.bra.ag@gmail.com>
2022-11-28 18:09:21 +01:00
Michael Telatynski
272aae0973
Add CI to run rethemendex.sh (#9577) 2022-11-14 18:31:20 +00: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
Germain
72c24af5c0
Disallow invalid inline style comments in stylesheets (#9099) 2022-07-27 14:39:29 +01:00
Michael Telatynski
01f4bb8c78
Rename PostCSS files to .pcss (#9013)
* Rename PostCSS files to `.pcss`

* Make Stylelint happy

* Delint

* Rename new files too

* delint

* Fix bad comment placement
2022-07-15 14:53:23 +01:00
Renamed from res/css/_common.scss (Browse further)