Commit graph

47 commits

Author SHA1 Message Date
Richard van der Hoff
30d997e21c
Remove green "verified" bar for e2e events (#11496)
There is a little-known feature where, if you have verified a user (eg, via the
emoji game), then when you mouse-over a message that they sent, it gets a green
highlight.

We also show a brown bar sometimes, and according to the CSS there may be a
yellow bar too?

Very few people seem to know this exists, and even if you do know it exists
nobody seems to understand what exactly the various colours are supposed to be.

So, rather than porting this magic mystery feature to Rust Crypto, let's rip it
out.
2023-09-01 09:41:14 +00:00
Germain
09c5e06d12
Change avatar to use Compound implementation (#11448)
* Move avatar to new compound implementation

* Make space avatars square

* Remove reference to the avatar initial CSS class

* remove references to mx_BaseAvatar_image

* Fixe test suites

* Fix accessbility violations

* Add ConfirmUserActionDialog test

* Fix tests

* Add FacePile test

* Fix items clipping in members list

* Fix user info avatar sizing

* Fix tests
2023-08-24 03:48:35 +00:00
Kerry
e0d498e338
Enable jsx-a11y/click-events-have-key-events eslint rule (#10362)
* enable "jsx-a11y/alt-text" lint rule

* enable "jsx-a11y/label-has-associated-control"

* make Spoilers keyboard accessible

* make invite reason keyboard accessible

* make invite suggestions keyboard accessible

* make avatar upload in space basic settings keyboard accessible

* ignore jsx-a11y/click-events-have-key-events issues in tests

* Update test expectation

---------

Co-authored-by: Michael Telatynski <7t3chguy@gmail.com>
2023-08-09 06:27:31 +00:00
Germain
5ec2c35497
Adjust typography in key part of the app (#11313) 2023-08-01 10:31:21 +00:00
Michael Telatynski
b496fe0a2b
Unhide the view source event toggle - it works well enough (#11336) 2023-07-28 08:02:43 +00:00
Germain
d0c6880335
Fix blockquote colour contrast (#11299)
* Fix blockquote colour contrast

* Blockquote update
2023-07-21 12:16:33 +00:00
Germain
5d4153fa64
Fix colour regressions (#11273)
* Fix color contrast of notice events

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

* Restore alert color for highlighted events

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

* Fix quote border for highlighted events

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

* Fix media background mixing with event highlighted

Fixes https://github.com/vector-im/element-web/issues/25812
2023-07-17 09:59:10 +00:00
Germain
9077592bec
Make event highliht use primary content token (#11255) 2023-07-13 12:42:23 +00:00
Germain
06403d07f8
Fix event info events size and color (#11252) 2023-07-13 09:35:08 +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
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
d340fa8d2a
Remove TODO comments about spacing variables (#10695)
The variables on _spacing.pcss have been deprecated by https://github.com/matrix-org/matrix-react-sdk/pull/10686
2023-06-06 14:03:52 +00:00
Suguru Hirahara
610ee53257
Extract style rules specific to ThreadsList to prevent a visual regression (#10894) 2023-06-01 15:04:52 +00:00
Michael Telatynski
176daad49f
Fix room list notification badges going missing in compact layout (#11022) 2023-05-31 12:20:26 +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
b3fd9377d6
Use shorthand "inset" property (#10825) 2023-05-09 10:02:12 +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
23174904ed
Merge style rules related to EventTile on IRC layout (#10700)
* Manage rules related to EventTile on `_EventTile.pcss`

The style rules with the selector "mx_EventTile" should be managed on _EventTile.pcss.

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

* Merge - `--EventTile_irc_line_info-margin-inline-start`

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

* Merge - `mx_EventTile_msgOption`

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

* Merge - `mx_MessageTimestamp`

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

* Merge - `mx_EventTileBubble`

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

* Merge - `mx_ReplyChain`

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

* Merge - `mx_ReplyTile .mx_EventTileBubble`

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

* Merge - `&.mx_EventTile_isEditing > .mx_EventTile_line`

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

* Merge - `&.mx_EventTile_info`

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

* Convert the variable with a custom property

To fix the syntax error "Undefined variable $irc-line-height" because of cascading order.

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

* Merge - '.mx_EventTile_emote'

The class is both specified by the const 'classes' (for classNames of mx_EventTile) and const 'lineClasses' (for mx_EventTile_line), but it is irrelevant here because the style rule does not expect mx_EventTile_avatar to be a direct descendant. In other words, both ".mx_EventTile.mx_EventTile_emote" and ".mx_EventTile .mx_EventTile_emote" are accepted.

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

---------

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
2023-05-03 11:06:51 +00:00
Suguru Hirahara
569ef31f9d
Remove mx_EventTile:not([data-layout="bubble"]) selector (#9033)
* Move declarations out of `mx_EventTile:not([data-layout=bubble])`

merging style rules on _EventBubbleTile.scss

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

* Remove an obsolete `!important` flag from `&.mx_EventTile_continuation`

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

* Remove `clear: unset` declaration from EventTile on bubble layout

While mx_EventTile:not([data-layout="bubble"]) suggests that "clear: both" would not be applied to the bubble layout, the value "both" has been in fact luckily applied thanks to "mx_RoomView_MessageList li" on _RoomView.pcss, imported later than _EventTile.pcss.

Since "clear: both" is declared for mx_EventTile, this declaration is no longer needed here.

Though the value of that declaration of mx_EventTile on the timeline (including ThreadView) seems to have been overridden by "mx_RoomView_MessageList li" for all layouts, it should not be removed yet until E2E tests which check visual regressions are implemented, in order to minimize the risk of a regression outside of the timeline.

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

* Remove `:not()` pseudo class from `_FilePanel.pcss`

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

* Remove `!important` flag from `_MessageEditHistoryDialog.pcss`

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

* Remove a comment about overriding

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

* Run prettier

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

---------

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
Co-authored-by: Richard van der Hoff <1389908+richvdh@users.noreply.github.com>
2023-04-27 13:02:34 +00:00
Kerry
2434749f65
Highlight event when any version triggered a highlight (#10502)
* check previous events pushactions when deciding to highlight

* test event highlight

* strict fix

* highlight edited text to red
2023-04-05 02:46:17 +00:00
alunturner
974dc35c41
Allow editing with RTE to overflow for autocomplete visibility (#10499) 2023-04-04 11:43:02 +01:00
alunturner
0fcb9d6a3e
Remove css causing list and paragraph issues (#10424) 2023-03-27 18:16:37 +01:00
Suguru Hirahara
f60f7a19af
Display redacted body on ThreadView in the same way as normal messages (#9016) 2023-03-08 12:23:41 +01:00
Suguru Hirahara
727afdc33a
Reduce bottom margin of ReplyChain on compact modern layout (#8972) 2023-03-06 09:19:38 +00:00
Suguru Hirahara
ecebac6ea1
Align info EventTile and normal EventTile on IRC layout (#10197)
* fixes alignment issue in IRC layout
* adds cypress test for alignment

---------

Contributed-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
Signed-off-by: Alun Turner <alunturner@users.noreply.github.com>
2023-03-03 09:32:38 +00:00
alunturner
41c8ab5e59
fix paragraph display for MD from plain text editor (#10071) 2023-02-03 13:55:12 +00:00
alunturner
43e7870d92
Change ul list style to disc when editing message (#10043)
* ensures consistency between timeline, composer and "editor" composer
2023-02-02 09:09:52 +00:00
alunturner
39f5fc034f
Paragraph integration for rich text editor (#10008)
* integrates paragraph refactor in rich text editor
* minor CSS changes to accomodate this
* bumps rich text editor version to 0.22.0
2023-01-31 09:45:34 +00:00
alunturner
a63da74f06
Add code blocks to rich text editor (#9921)
* Applies small changes to code block display in timeline
* Makes the composer code block look like the timeline display, but without line numbers
* Adds a button to allow code blocks to be implemented
* Adds tests for the new button
2023-01-19 15:49:21 +00:00
Florian Duros
314b2e7ba6
Add new style for inline code (#9936)
Add new style for inline code
2023-01-19 13:42:59 +00:00
Janne Mareike Koschinski
4d2b27a96d
Fix broken threads list timestamp layout (#9922)
* Add option to show full identifier as tooltip on sender profiles
* Show full user id as tooltip on threads list entries
* Fix broken threads list timestamp layout

Previously, thread list timestamps would overflow
into the unread messages bubble on the right.

This is fixed by resetting the width of the
timestamp and ensuring both the timestamp and the
display name can shrink if necessary.
Both now also use ellipses if necessary.
2023-01-18 15:56:43 +01:00
Janne Mareike Koschinski
9ef4e14385
Replace outdated css attribute (#9912) 2023-01-16 14:46:54 +01:00
alunturner
6052db1e8a
Add list functionality to rich text editor (#9871)
* adds buttons to toggle bulleted and numbered lists on and off
* adds icons for those buttons
* css changes to timeline display
* adds tests for the new buttons, refactors existing tests
2023-01-13 15:44:35 +00:00
Janne Mareike Koschinski
cce506b1c1
Fix misaligned timestamps for thread roots which are emotes (#9875)
* Fix misaligned timestamps for thread roots which are emotes
* Use cross-browser variant instead of webkit-only variant for fill-available
2023-01-11 16:39:44 +01:00
Germain
bef8e077f6
Unify notifications panel event design (#9754) 2022-12-21 10:25:50 +00:00
Kerry
d3ab11928b
Use compound colours for verification badges (#9794)
* update e2e colour variables to compound colours

* use e2e colour vars for e2e icons
2022-12-20 02:07:28 +00:00
Faye Duxovni
4724506320
Improve decryption error UI by consolidating error messages and providing instructions when possible (#9544)
* Improve decryption error UI by consolidating error messages and providing instructions when possible

* Fix TS strict errors

* Rename .scss to .pcss

* Avoid accessing clipboard, Cypress doesn't like it

* Display DecryptionFailureBar alongside other AuxPanel bars

* Add comments

* Add small margin off-screen for visible decryption failures

* Fix some more TS strict errors

* Add unit tests for DecryptionFailureBar

* Add button to resend key requests manually

* Remove references to matrix-js-sdk crypto internals

* Add hysteresis to visible decryption failures

* Add comment

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

* Add comment

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

* Don't create empty div if we're not showing resend requests button

* cancel updateSessions on unmount

* Update unit tests

* Fix lint and implicit any

* Simplify visible event bounds checking

* Adjust cypress test descriptions

* Add percy snapshots

* Update src/components/structures/TimelinePanel.tsx

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

* Add comments on TimelinePanel IState

* comment

* Add names to percy snapshots

* Show Resend Key Requests button when there are sessions that haven't already been requested via this bar

* We no longer request keys from senders

* update i18n

* update expected text in cypress test

* don't download keys ourselves, update device info in response to updates from client

* fix ts strict errors

* visibledecryptionfailures undefined handling

* Fix implicitAny errors

Co-authored-by: Richard van der Hoff <1389908+richvdh@users.noreply.github.com>
Co-authored-by: Michael Telatynski <7t3chguy@gmail.com>
2022-12-15 17:24:33 +00:00
Michael Weimann
526645c791
Apply prettier formatting 2022-12-12 12:24:14 +01:00
Robin
2d9fa81cf5
Improve the visual balance of bubble layout (#9704) 2022-12-03 17:31:40 -05:00
Germain
9eb4f8d723
Add thread notification with server assistance (MSC3773) (#9400)
Co-authored-by: Janne Mareike Koschinski <janne@kuschku.de>
2022-10-24 07:50:21 +01:00
Suguru Hirahara
82fb21aff5
Apply inline start padding to selected lines on modern layout only (#9006) 2022-08-01 08:19:22 +02:00
Germain
72c24af5c0
Disallow invalid inline style comments in stylesheets (#9099) 2022-07-27 14:39:29 +01:00
Michael Telatynski
8eeeee1aa2
Use default styling on nested numbered lists due to MD being sensitive (#9110) 2022-07-27 14:38:34 +01:00
Suguru Hirahara
92fce71e39
Align the right edge of info tile lines with normal ones on IRC layout (#9058)
* Apply inline start margin to info event tile line to align the right edge with normal event tile lines

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

* Rename the variable

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

* Add a test to check inline start margin

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

* Rerun CI

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

* Improve tests a little bit

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
2022-07-25 10:05:32 +01:00
Suguru Hirahara
b90ea87d11
Re-add inline start padding to EventTile_line of GenericEventListSummary (#9063) 2022-07-16 12:15:12 +00: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/views/rooms/_EventTile.scss (Browse further)