Commit Graph

5019 Commits (92906c2130b447f4bccd07eb5800c2cb513092a4)

Author SHA1 Message Date
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
Richard van der Hoff 5fc402cda0
Deprecate the `$spacing-` variables (#10686)
* Deprecate the $spacing variables

* more comments
2023-04-21 13:30:21 +00:00
Michael Telatynski 792a39a39b
ARIA Accessibility improvements (#10675)
* Fix confusing tab indexes in EventTilePreview

* Stop using headings inside buttons

* Prefer labelledby and describedby over duplicated aria-labels

* Improve semantics of tables used in settings

* Fix types

* Update tests

* Fix timestamps
2023-04-21 09:48:48 +00:00
Michael Telatynski 782060a26e
ARIA Accessibility improvements (#10674)
* Add missing aria-expanded attributes

* Improve autoComplete for phone numbers & email addresses

* Fix room summary card heading order

* Fix missing label on timeline search field

* Use appropriate semantic elements for dropdown listbox

* Use semantic list elements in keyboard settings tab

* Use semantic list elements in spotlight

* Fix types and i18n

* Improve types

* Update tests

* Add snapshot test
2023-04-20 17:13:30 +00:00
Michael Telatynski 2da52372d4
Add arrow key controls to emoji and reaction pickers (#10637)
* Add arrow key controls to emoji and reaction pickers

* Iterate types

* Switch to using aria-activedescendant

* Add tests

* Fix tests

* Iterate

* Update test

* Tweak header keyboard navigation behaviour

* Also handle scrolling on left/right arrow keys

* Iterate
2023-04-20 14:56:21 +00:00
Suguru Hirahara 8867f1801e
Remove obsolete CSS declarations from `_RoomHeader.pcss` (#10496)
* Remove obsolete mx_RoomHeader_textButton and mx_RoomHeader_cancelButton

These declarations have been obsolete since GroupView.js was deleted by fce36ec826.

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

* Remove obsolete mx_RoomHeader_spinner

As of 79d3cca6 it was used as follows:

````
if (this.props.saving) {
    const Spinner = sdk.getComponent("elements.Spinner");
    spinner = <div className="mx_RoomHeader_spinner"><Spinner /></div>;
}
````

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

* Remove obsolete mx_RoomHeader_info

This was deprecated by 18fedb23ec

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

---------

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
2023-04-20 08:21:06 +00:00
Michael Weimann 83e6a6057d
Add developer tools option to room list context menu (#10635)
* Make developer tools more accessible

* Extend tests

* Use settings hook

* Trigger CI
2023-04-19 11:34:27 +00:00
Suguru Hirahara 869856df2d
Remove obsolete class name and declarations on `General` user settings tab (#10659)
* Remove an obsolete class name: `mx_EmailAddresses_new`

The class name was added by aa7afe819f for an initial implementation and became obsolete thanks to 1090b7d912.

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

* Remove obsolete declarations: `mx_ExistingPhoneNumber_delete`

The declarations have been obsolete since 11f2b4320d.

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

* Remove obsolete declarations: `mx_ExistingEmailAddress_delete`

The declarations have also been deprecated by 11f2b4320d.

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

---------

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
2023-04-18 20:59:18 +00:00
Michael Weimann 7632f36624
Implement new toast UI (#10467)
* Implement new toast UI

* Use PCSS vars and Caption component

* Add GenericToast-test

* Tweak call toast

* Fix code style
2023-04-18 11:38:41 +00:00
Michael Telatynski 1a0e5c1805
Fix multiple accessibility defects identified by AXE (#10606)
* Mark effects overlay canvas as aria hidden

* Ensure date separators aren't seen as focusable aria separators

* Fix

* Fix font slider not having aria label

* Add missing aria labels

* Fix settings flags setting aria-checked={null}

* Update snapshots
2023-04-17 16:09:45 +00:00
Michael Telatynski 8f8b74b32c
Fix overflow on auth pages (#10605) 2023-04-14 14:15:21 +00:00
Suguru Hirahara 747afec27e
Use `AccessibleButton` for "Accept" on AuthPage (#10508)
* Use AccessibleButton for "Accept" on AuthPage

- Use AccessibleButton
- Remove mx_InteractiveAuthEntryComponents_termsSubmit:disabled as disabled state is handled by AccessibleButton

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

* Empty commit

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

---------

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
2023-04-13 01:29:09 +00:00
Michael Telatynski 287a3fd0cf
Fix issues with inhibited accessible focus outlines (#10579) 2023-04-12 12:49:12 +00:00
Michael Telatynski d2066ba5f5
Improve accessibility of font slider (#10473)
* Clamp font size when disabling "Use custom size"

* Switch Slider to use a semantic input range element

* Iterate

* delint

* delint

* snapshot

* Iterate

* Iterate

* Fix step size

* Add focus outline to slider

* Derp
2023-04-12 10:57:31 +00:00
alunturner e03eac12c3
Add room and user avatars to rte (#10497)
Co-authored-by: Michael Telatynski <7t3chguy@gmail.com>
2023-04-06 08:43:49 +00:00
Michael Telatynski 09eefe14ea
Remove feedback buttons from onboarding, search, and spaces (#10506) 2023-04-05 12:17:25 +01:00
Suguru Hirahara 7503bf6b96
Fix spacing of headings of integration manager on General settings tab (#10232)
* Fix spacing of headings of integration manager on General settings tab

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

* lint

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

* Check the column gap

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

* Iterate

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

* Scroll to 'mx_SetIntegrationManager' and take a snapshot of the dialog

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

* Revert "Scroll to 'mx_SetIntegrationManager' and take a snapshot of the dialog"

This reverts commit 9151d6a34de109c0dffa95046397c13f4b61f5a4.

* Specify actual width of mx_SetIntegrationManager

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

---------

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
2023-04-05 08:13:32 +01: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
Suguru Hirahara a340387374
Remove an obsolete CSS declaration and add a test to `file-panel.spec.ts` (#10498)
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
2023-04-04 18:38:05 +01:00
alunturner 7a250f41ac
Update rte autocomplete styling (#10503)
* amend className to reflect usage
* move new class into file used by Send/Edit composers
* add border styling to autocomplete
2023-04-04 14:52:57 +01:00
alunturner 974dc35c41
Allow editing with RTE to overflow for autocomplete visibility (#10499) 2023-04-04 11:43:02 +01:00
Suguru Hirahara b06b602c5b
Remove an obsolete style block related to highlighting from `_IRCLayout.pcss` (#10451)
* Remove an obsolete style block related to highlighting from _IRCLayout.pcss

Initially it has been added with this commit 67249e1e9c for the implementation of IRC layout, but the border declarations for highlighting were removed with this commit 3a2aa9d96c to replace the 'border-left' declaration with the 'box-shadow' declaration.

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
2023-04-04 11:07:53 +02:00
alunturner 6ac366ee5a
Style mentions as pills in rich text editor (#10448) 2023-04-03 10:16:29 +01:00
alunturner 6f791d28c8
Add mentions as links to rte (#10463)
* adds autocomplete behaviour for mentions in rich text editor
* allows adding mentions as links
* adds tests
2023-03-31 14:14:55 +01: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
alunturner 0fcb9d6a3e
Remove css causing list and paragraph issues (#10424) 2023-03-27 18:16:37 +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
Janne Mareike Koschinski 63678603e0
Revert "Mentions as links rte (#10422)" (#10458)
This reverts commit 1af71089dd.
2023-03-27 12:57:05 +02:00
alunturner 1af71089dd
Mentions as links rte (#10422)
* bumps the RTE dependency to introduce user/room mention handling
* adds autocomplete behaviour to allow users to insert user and room mentions as links
* sets up tests for the autocomplete behaviour
2023-03-24 17:07:24 +00:00
Suguru Hirahara 8e1b9f46d4
Set expected value of line-height to expanded generic event list summary (GELS) spacer on IRC layout (#10211)
* Set expected line height to an expanded GELS line on IRC layout, add a test
* Add a test for compact modern/group layout
* Create a new test category on timeline.spec.ts
* Rename the class name as 'spacer'
* Add a test for GELS' spacer on bubble layout
---------

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
Co-authored-by: Germain <germain@souquet.com>
2023-03-24 12:57:32 +00:00
Michael Weimann 3eb6a55b93
Tweak pill UI (#10417) 2023-03-22 13:27:24 +01:00
Michael Weimann 96d1b74ffc
Pillify event permalinks (#10392) 2023-03-21 10:23:20 +01: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
maheichyk d4b81882e5
Show filterContainer if "UIComponent.filterContainer" is enabled (#10381)
Signed-off-by: Mikhail Aheichyk <mikhail.aheichyk@nordeck.net>
Co-authored-by: Mikhail Aheichyk <mikhail.aheichyk@nordeck.net>
2023-03-21 09:06:43 +00:00
Eric Eastwood 7a68bd9cef
Fix big date separators when jump to date is enabled (#10404)
Fix https://github.com/vector-im/element-web/issues/22969
2023-03-20 11:03:36 -05:00
Jaiwanth 747d65f1f9
Increase space panel collapse clickable area (#6084) 2023-03-17 13:11:42 +00:00
Suguru Hirahara 587da5b7dc
Initialize line-height for room name on IRC layout (#10188) 2023-03-14 15:32:12 +01:00
Kerry 4c2b5df1f2
Poll history - access poll history from room settings (#10356)
* add poll history tab to room settings

* test poll history in room settings

* remove posthog tracking for poll his

* use consistent label for polls history
2023-03-13 22:08:59 +00:00
Kerry 9f66082486
Notifications: inline error message on notifications saving error (#10288)
* basic sync setup

* formatting

* get loudest value for synced rules

* more types

* test synced rules in notifications settings

* type fixes

* noimplicitany fixes

* remove debug

* tidying

* extract updatePushRuleActions fn to utils

* extract update synced rules

* just synchronise in one place?

* monitor account data changes AND trigger changes sync in notifications form

* lint

* setup LoggedInView test with enough mocks

* test rule syncing in LoggedInView

* strict fixes

* more comments

* one more comment

* add error variant for caption component

* tests for new error message

* tweak styles

* noImplicitAny

* revert out of date prettier changes to unrelated files

* limit inline message to radios only, tests

* strict fix
2023-03-13 21:59:04 +00: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
Suguru Hirahara d244b9065c
Fix long display name overflowing reply tile on IRC layout (#10343)
* Prevent long name blowout from Replytile on IRC layout

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

* Add a test to check long strings do not overflow

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

* Sort declarations based on .mx_IRCLayout .mx_EventTile .mx_DisambiguatedProfile

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

---------

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
2023-03-10 10:47:14 +00: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
Michael Weimann 6fa00a20b0
Use compound icons (#10292) 2023-03-08 11:11:01 +01:00
Suguru Hirahara fef8f3955f
Change --name-width on _IRCLayout.pcss based on ircDisplayNameWidth on Settings.tsx (#10285)
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
2023-03-07 13:32:38 +00:00
Suguru Hirahara 1b806bb47b
Remove obsolete mx_BetaDot style rules introduced for Space release (#10286)
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
2023-03-07 11:03:39 +00:00
Suguru Hirahara 4de9071934
Use spacing variables on _BetaCard.pcss (#10291) 2023-03-06 17:25:10 +01:00
Michael Weimann 9b74b0f057
Only allow to start a DM with one email if encryption by default is enabled (#10253) 2023-03-06 12:08:17 +01:00
Suguru Hirahara 94950c6987
Reduce height of toggle on expanded view source event (#10283)
* Reduce height of toggle on expanded view source event

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

* Add a test to check size and position of toggle on expanded view source event

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

---------

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
2023-03-06 10:01:18 +00: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