Commit graph

5088 commits

Author SHA1 Message Date
Kerry
f491f2f951
use semantic headings for spellcheck and language (#10959) 2023-05-23 23:34:56 +00:00
Kerry
2f2804f8af
fix content overflow in settings subsection (#10960) 2023-05-23 23:31:56 +00:00
Suguru Hirahara
b7cd1f00fc
Use Icon component for icons on AppTile's menu bar (#10955)
* Use icon component for buttons on mx_AppTileMenuBar_widgets

* Remove redundant declarations

* Add a Percy snapshot test

* Set color value to mx_Icon, fill and stroke with currentColor

* Iterate
2023-05-22 07:48:40 +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
08c0f332b3
Remove an obsolete CSS file - _ChatCreateOrReuseChatDialog.pcss (#10949)
It has been obsolete since f85898cdca.
2023-05-21 23:50:14 +00:00
Kerry
b3b03e5dcb
Use semantic headings in user settings Appearance (#10827)
* split SettingsSection out of SettingsTab, replace usage

* correct copyright

* use semantic headings in GeneralRoomSettingsTab

* use SettingsTab and SettingsSubsection in room settings

* fix VoipRoomSettingsTab

* use SettingsSection components in space settings

* settingssubsection text component

* use semantic headings in HelpUserSetttings tab

* use ExternalLink components for external links

* test

* strict

* lint

* semantic heading in labs settings

* semantic headings in keyboard settings tab

* semantic heading in preferencesusersettingstab

* tidying

* use new settings components in eventindexpanel

* findByTestId

* prettier

* semantic headings and style refresh for crypto settings

* e2e panel

* use semantic headings in User settings appearance tab

* update selectors in tests

* tidy
2023-05-21 21:12:11 +00:00
Kerry
55336bf932
Use semantic heading in user settings Sidebar & Voip (#10782)
* split SettingsSection out of SettingsTab, replace usage

* correct copyright

* use semantic headings in GeneralRoomSettingsTab

* use SettingsTab and SettingsSubsection in room settings

* fix VoipRoomSettingsTab

* use SettingsSection components in space settings

* settingssubsection text component

* use semantic headings in HelpUserSetttings tab

* use ExternalLink components for external links

* test

* strict

* lint

* semantic heading in labs settings

* semantic headings in keyboard settings tab

* semantic heading in preferencesusersettingstab

* tidying

* use new settings components in eventindexpanel

* findByTestId

* prettier

* semantic headings and style refresh for crypto settings

* e2e panel

* semantic headings and cleanup in Sidebar user settings

* semantic heading in voice user settings

* sonarcloud bug and test
2023-05-19 00:03:39 +00:00
Kerry
d9a61c093c
Use semantic headings in user settings Security (#10774)
* split SettingsSection out of SettingsTab, replace usage

* correct copyright

* use semantic headings in GeneralRoomSettingsTab

* use SettingsTab and SettingsSubsection in room settings

* fix VoipRoomSettingsTab

* use SettingsSection components in space settings

* settingssubsection text component

* use semantic headings in HelpUserSetttings tab

* use ExternalLink components for external links

* test

* strict

* lint

* semantic heading in labs settings

* semantic headings in keyboard settings tab

* semantic heading in preferencesusersettingstab

* tidying

* use new settings components in eventindexpanel

* findByTestId

* prettier

* semantic headings and style refresh for crypto settings

* e2e panel

* test cross signing panel

* strict

* more strict

* tweak

* test eventindexpanel

* strict fixes
2023-05-18 22:32:10 +00:00
Suguru Hirahara
fabfae172b
Update _AuxPanel.pcss (#10888)
* Fix class names - from m_ to mx_

* Move mx_RoomView_auxPanel from _RoomView.pcss to _AuxPanel.pcss

The class name 'mx_RoomView_auxPanel' belongs to AuxPanel, not RoomView

* Correct naming

* Strictify: mx_RoomView_auxPanel *

* Nest mx_AuxPanel_stateViews_span

* Sort

* Run prettier

* Use custom properties

* Revert "Use custom properties"

This reverts commit fe720d05f4572e74e71887203d43c491f0723a92.
2023-05-18 08:54:31 +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
7917d973e7
Fix widget permission tooltip style rules by applying the naming policy properly (#10916) 2023-05-17 08:51:18 +00:00
Kerry
8cd84b0e7b
Use semantic headings in user settings - integrations and account deletion (#10837)
* allow testids in settings sections

* use semantic headings in LabsUserSettingsTab

* put back margin var

* use SettingsTab wrapper

* use semantic headings for deactivate acc section

* use semantic heading in manage integratios

* i18n

* explicit cast to boolean

* Update src/components/views/settings/shared/SettingsSubsection.tsx

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

* test manage integration settings

* test deactivate account section display

* remove debug

* fix cypress test

---------

Co-authored-by: Richard van der Hoff <1389908+richvdh@users.noreply.github.com>
2023-05-17 07:52:44 +00:00
Kerry
68b1930852
Use semantic headings in user settings Keyboard (#10793)
* settingssubsection text component

* use semantic headings in HelpUserSetttings tab

* test

* strict

* lint

* semantic heading in labs settings

* semantic headings in keyboard settings tab

* semantic heading in preferencesusersettingstab

* tidying

* findByTestId

* prettier

* allow testids in settings sections

* use semantic headings in LabsUserSettingsTab

* use semantic headings in usersettingspreferences

* rethemendex

* put back margin var
2023-05-17 02:34:55 +00:00
Kerry
38ae8e98e4
Use semantic headings in user settings Preferences (#10794)
* allow testids in settings sections

* use semantic headings in LabsUserSettingsTab

* use semantic headings in usersettingspreferences

* rethemendex

* put back margin var
2023-05-17 01:16:49 +00:00
Suguru Hirahara
4cc6ab1187
Remove AnalyticsPolicyLink (#10924) 2023-05-16 15:52:30 +00:00
Suguru Hirahara
e01d47923d
Deprecate mx_RightPanel_headerButton class (#10821)
* Replace: %s/mx_RightPanel_headerButton/mx_RoomHeader_button/g

* Conform the selectors to our naming policy: with flag (--)

- %s/mx_RoomHeader_button_highlight/mx_RoomHeader_button--highlight/g
- %s/mx_RoomHeader_button_unread/mx_RoomHeader_button--unread/g

* Update a Jest snapshot

* Move the declarations and Sass variables

- Move Sass variables to the place where they are used
2023-05-16 15:42:58 +00:00
Suguru Hirahara
7f017a84c2
Make Privacy Notice external link on integration manager ToS clickable (#10914) 2023-05-16 12:54:38 +00:00
Suguru Hirahara
2eedfbf566
Split mx_AppPermissionWarning on _AppsDrawer.pcss into two classes (#10824)
* Separate mx_AppWarning and mx_AppPermission

* Remove mx_AppPermission_row for a type selector

* Nest: mx_AppPermission

* Run prettier

* Create a CSS file for AppPermission
2023-05-16 11:14:52 +01:00
Suguru Hirahara
ae692f712a
Replace Sass variables with custom properties - mx_Indicator (#10808) 2023-05-16 11:12:45 +01:00
Kerry
9bab356e20
Use semantic headings in user settings Labs (#10773)
* allow testids in settings sections

* use semantic headings in LabsUserSettingsTab

* put back margin var

* explicit cast to boolean

* Update src/components/views/settings/shared/SettingsSubsection.tsx

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>
2023-05-16 01:22:45 +00:00
Suguru Hirahara
77d18f1a43
Remove default margin and padding from mx_TabbedView_tabLabels (#10907) 2023-05-15 18:57:29 +01:00
Michael Telatynski
296ed2273e
Use semantic list elements for menu lists and tab lists (#10902)
* Use semantic list elements for pop up menu lists

* Use semantic list elements for tab lists

* Fix tests

* Update snapshot
2023-05-15 13:33:49 +00:00
Suguru Hirahara
4d59a6ff1f
Fix timeline search bar being overlapped by the right panel (#10809)
* Set zero min-width to prevent input area blowout

* Set min-width values to mx_SearchBar_input and mx_SearchBar_button

* Prevent the input area and cancel button from being overlapped by BaseCard

* Use custom properties: --size-button-search

* Take Percy snapshot of mx_SearchBar

* Apply suggestions from code review

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

* Edit a comment

* Feedback

* Edit a comment

* Update cypress/e2e/timeline/timeline.spec.ts

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>
2023-05-15 11:58:59 +00:00
Robin
d213dff4c6
Make widgets take up the full height of the PiP again (#10886)
This fixes a visual regression introduced in 73007d6dd6: AppTiles with the class mx_AppTile_mini don't get an mx_AppsDrawer as their parent, so the --AppTile_mini-height variable needs a broader scope.
2023-05-15 11:54:29 +00:00
Suguru Hirahara
3b2216ec9d
Fix class name of the read marker on MessagePanel (#10745)
* Optimize mx_RoomView_myReadMarker

- Replace the compound selector with a type selector
- Nest the type selector in "mx_RoomView_myReadMarker_container"

* Conform the style rules to the naming policy

Including "container" in a class name is redundant as our naming policy tells that a string followed by an underscore (_) represents a container if it contains an element.

* Run prettier

* Replace `mx_RoomView_myReadMarker hr` with `mx_RoomView_myReadMarker`

- Remove a unit
- Hide hr's parent (mx_RoomView_myReadMarker) on Percy snapshots

* Change the class name from `mx_RoomView_myReadMarker` to `mx_MessagePanel_myReadMarker`

The read marker is specified on MessagePanel.tsx, and should be named so to avoid confusion.

- Create _MessagePanel.pcss for the style rules of MessagePanel

* Update permalinks.spec.ts
2023-05-15 11:02:04 +00:00
Suguru Hirahara
fb3f20f70c
Conform _AppsDrawer.pcss to the naming policy - AppDrawer variants (#10856)
* Conform _AppsDrawer.pcss to the naming policy - AppDrawer variants

* Sort style blocks

* Feedback
2023-05-15 09:05:14 +00:00
Suguru Hirahara
64733e5982
Conform _AppsDrawer.pcss to our naming policy - move styles specific to mx_AppTileMenuBar to be nested inside it (#10877)
* Nest: mx_AppTileMenuBar

* Run prettier
2023-05-12 11:33:23 +00:00
Suguru Hirahara
cb779fe872
Conform the style rules of GeneralUserSettingsTab.tsx to the style guide (#10595)
* Nesting: `mx_GeneralUserSettingsTab_changePassword`

* Nesting: `mx_Spinner`

* Conform the style rules to the naming policy

For elements inside "mx_GeneralUserSettingsTab_accountSection" and "mx_GeneralUserSettingsTab_discovery"

* Conform `mx_GeneralUserSettingsTab_discovery_existing*` to the naming policy
2023-05-12 10:33:01 +00:00
Suguru Hirahara
73007d6dd6
Tidy up _AppsDrawer.pcss (#10775)
* Nesting

* Run prettier

* Common style rules for `mx_AppTileBody` and `mx_AppTileBody_mini`

* Common style rules for iframe

* Use a custom property for height

* Replace with a custom property - $MiniAppTileHeight

* Replace with a custom property - $MinWidth

* Group common declarations

* Sorting
2023-05-11 15:26:41 +00:00
Suguru Hirahara
d944422417
Tidy up _MemberInfo.pcss (#10862)
* Nest: mx_MemberInfo_name *

* Nest: mx_MemberInfo *

* Nest: mx_MemberInfo_avatar
2023-05-11 13:01:12 +00:00
Michael Weimann
0a6fe83a8c
Add audible notifcation on broadcast error (#10654)
* Add audible notifcation on broadcast error

* Add error audio file

* Add error ogg

* Catch play broadcast error

* Await play error sound

* Add promise error handling

* Add comment about audio elements
2023-05-11 12:15:34 +00:00
Suguru Hirahara
5cdbdd9f97
Update some class names of AppTile on the naming policy (#10777) 2023-05-09 21:07:12 +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
b3fd9377d6
Use shorthand "inset" property (#10825) 2023-05-09 10:02:12 +00:00
Suguru Hirahara
d2fa0af3c0
Manage rules for mx_RoomView on _RoomView.pcss - _ScrollPanel.pcss (#10770)
* Move style rules of `mx_RoomView_MessageList` from _ScrollPanel.pcss on _RoomView.pcss

* Nesting: `mx_RoomView--local .mx_ScrollPanel`
2023-05-09 08:32:16 +00:00
Suguru Hirahara
556a36f7d5
Remove obsolete style blocks from _MemberInfo.pcss (#10816)
* Remove obsolete style blocks from _MemberInfo.pcss

Deprecated by 2b432b0d82

* Remove obsolete style blocks from _MemberInfo.pcss

Deprecated by fce36ec826
2023-05-09 08:22:40 +00:00
Suguru Hirahara
ed5c02be6d
Fix long room address and name not being clipped on room info card and update _RoomSummaryCard.pcss (#10811)
* Handle a long room address and name with ellipsis on RoomSummaryCard

* Use a class selector for maintainability

Sort the selectors
2023-05-09 07:56:09 +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
1cfe126e14
Fix icon on empty notification panel (#10817)
* Use custom properties for the empty panel icons on FilePanel and NotificationPanel

* Create E2E test for the notification panel
2023-05-09 05:02:08 +00:00
Suguru Hirahara
aed5fcf64a
Update mx_AppLoading to improve maintainability (#10783)
* Nesting: mx_AppLoading

* Conform class and animation name to the naming policy

* Nesting for maintainability, preventing the rule from becoming an orphan

* Rename the class: mx_AppLoading to mx_AppTile_loading
2023-05-08 12:38:04 +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
0fb4f42434
Remove an obsolete selector from _RightPanel.pcss - mx_RightPanel_blank (#10815)
Deprecated by e80a1c5051
2023-05-08 02:52:15 +00:00
Suguru Hirahara
00fe0b4316
Fix the color of the verified E2EE icon on RoomSummaryCard (#10812) 2023-05-08 02:26:29 +00:00
Suguru Hirahara
f6f5d44bde
Remove mx_HeaderButtons class and add a test (#10713)
* Remove `_HeaderButtons.pcss`

Now that mx_HeaderButtons class is no longer necessary as ARIA "tabpanel" role has been removed from it, it is possible to remove both the class and the style rule for it.

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

* Tests: add `room-header.spec.ts` and edit the existing tests

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

* Edit snapshot widths settings

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

* Fix typo

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

* Edit a comment

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

* Optimize a test to check default buttons

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

* Check highlighted buttons

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

* Loop

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

---------

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
2023-05-05 15:29:10 +00:00
Suguru Hirahara
c7ed23e972
Remove obsolete style blocks from _RightPanel.pcss (#10804)
* Remove obsolete style block from _RightPanel.pcss - mx_RightPanel_headerButtonGroup

Deprecated by e80a1c5051

* Remove obsolete style block from _RightPanel.pcss - mx_RightPanel_header

Deprecated by e80a1c5051

* Remove obsolete style block from _RightPanel.pcss - mx_RightPanel_headerButton_badge

Deprecated by 8c62dddb32

* Remove obsolete style block from _RightPanel.pcss - mx_RightPanel_collapseButton

Deprecated by e80a1c5051

* Remove obsolete style block from _RightPanel.pcss - keyframes

Deprecated by 694c39e72d
2023-05-05 14:50:36 +00:00
Suguru Hirahara
b724cb5fd2
Make cascading of mx_RoomHeader_closeButton easy to understand (#10756)
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
2023-05-05 13:19:26 +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
Michael Telatynski
99ac9e5029
Ensure tooltip contents is linked via aria to the target element (#10729)
* Ensure tooltip contents is linked via aria to the target element

* Iterate

* Fix tests

* Fix tests

* Update snapshot

* Fix missing aria labels for more tooltips

* Iterate

* Update snapshots
2023-05-05 08:26:11 +00:00
Suguru Hirahara
3ca957b541
Update _ResizeHandle.pcss (#10772)
* Nesting: `mx_ResizeHandle`

* Nesting: `> div`

* Run prettier

* Use a custom property

* Remove a redundant declaration: `cursor: row-resize`

The resizer is either vertical or horizontal, and since `cursor: row-resize` is applied by default, it does not need to be repeated here.

* Conform the class names to the naming policy

* Revert "Use a custom property"

This reverts commit 6116939eec7d9e4220b89a638623e5876e143adf.
2023-05-04 15:19:55 +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