Commit graph

3867 commits

Author SHA1 Message Date
Suguru Hirahara
0c30f0c838
Simplify nodes on ThirdPartyMemberInfo (#10889)
* Remove mx_MemberInfo_profileField

* Merge mx_MemberInfo_profile with mx_MemberInfo_container

* Remove redundant div elements

* Update a Jest snapshot
2023-05-24 08:28:15 +00:00
Kerry
9f011b955b
Use semantic headings in user settings - discovery (#10838)
* 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

* use currentColor in warning-triangle svg, update use in RoomStatusBar

* use semantic headings for discovery section

* test manage integration settings

* test deactivate account section display

* remove SettingsFieldset margins

* threepids styles

* remove debug

* test discovery email and phone
2023-05-24 02:37:10 +00:00
Kerry
9211da20f4
Use semantic headings in user settings - Notifications (#10948)
* use semantic headings in user notif settings

* unset margin for subsection content when no heading

* remove debug
2023-05-23 23:36:09 +00:00
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
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
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
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
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
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
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
00fe0b4316
Fix the color of the verified E2EE icon on RoomSummaryCard (#10812) 2023-05-08 02:26:29 +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
Suguru Hirahara
bbdca11a02
Tidy up _MessageComposer.pcss (#10767)
* Nesting: mx_MessageComposer

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

* Nesting: mx_MessageComposer_editor

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

* Nesting: mx_MessageComposer_input

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

* Nesting: mx_MessageComposer_formatbar

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

* Nesting: textarea

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

* Run prettier

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

* stylelint

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

---------

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
2023-05-03 22:05:18 +00:00
Suguru Hirahara
7df07d80ac
Remove obsolete CSS files - _AuthButtons.pcss, _NewSessionReviewDialog.pcss, and _ManageIntegsButton.pcss (#10753)
* Remove _AuthButtons.pcss

Follow-up to fd6c594a8f

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

* Remove _NewSessionReviewDialog.pcss

Follow-up to 7e8bb70621

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

* Remove _ManageIntegsButton.pcss

Added by eac50aa800
Deprecated by a5f296457f

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

---------

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
2023-05-03 21:43:17 +00:00
Suguru Hirahara
f5d79897d9
Remove some obsolete CSS rules (#10754)
* Remove `mx_MImageReplyBody_info` from `_MImageReplyBody.pcss`

Edited by 866a11d7e3
Deprecated by 6b3098d8fe

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

* Remove `mx_WidgetCard_maxPinnedTooltip` from `_WidgetCard.pcss`

Added by ef0843d4ad
Deprecated by ada6d1aa46

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

* Remove `mx_AliasSettings_editable` from `_AliasSettings.pcss`

Added by eac50aa800
Deprecated by 2903a0e712

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

* Remove `mx_AliasSettings_localAliasHeader` from `_AliasSettings.pcss`

Added by 3253d0b93d
Deprecated by 2e3f225520

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

* Remove `mx_RoomList_explorePrompt` from `_RoomList.pcss`

Added by e20b375433
Deprecated by 328d7ea5eb

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

* Remove `mx_Stickers_hideStickers` from `_Stickers.pcss`

Added by 79d3cca6e9
Deprecated by 31b3b2e2ed

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

---------

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
2023-05-03 13:26:10 +00:00
Suguru Hirahara
af3a0e3d59
Update some class names of AppTile (AppTileMenuBar_iconButton) on the naming policy (#10778) 2023-05-03 12:42:36 +00:00
Suguru Hirahara
9b7e7864c9
Merge styles of _EmailAddresses.pcss and _PhoneNumbers.pcss (#10679)
* Rename: `mx_ExistingPhoneNumber_*` to `mx_PhoneNumber--existing_*`

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

* Rename: `mx_ExistingEmailAddress_*` to `mx_EmailAddress--existing_*`

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

* Merge styles for maitainability: `mx_GeneralUserSettingsTab_discovery_existing_*`

`mx_EmailAddress--existing_*` and `mx_PhoneNumber--existing_*` adopt the same declarations, so maintaining them with common selectors should improve the maintainability.

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

* Rename: `mx_EmailAddress--existing_*` and `mx_PhoneNumber--existing_*` to `mx_GeneralUserSettingsTab_discovery_existing_*`

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

* Remove empty selectors

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

* Remove a duplicate selector: `.mx_GeneralUserSettingsTab_discovery--existing`

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

* Rename the button

The button with the class name 'mx_GeneralUserSettingsTab_discovery_existing_button' is used for various types of action, so 'confirm' seems to be a bit misleading.

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

* Include: `mx_GeneralUserSettingsTab_discovery_existing_*`

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

* Run prettier

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

* lint

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

* Review

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

---------

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com
2023-05-03 11:34:32 +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