nikrozman/element-web
1
0
Fork 0
Code Issues Actions 3 Packages Projects Releases Wiki Activity

Replace checkboxes with Compound checkboxes, and appropriately label each checkbox. (#29363)

Browse Source 
* Fix labelling of avatar menu

* Make the integration manager toggle more clear.

* fix label

* lint

* Update snapshots.

* Refactor many cases of checkbox to use the new compound component.

* Remove non-checkbox related changes

* Reset some things

* Remove usages of mx_checkbox* styling.

* Use label locators for apperance tests.

* small linter tweaks

* lint

* update screenshot

* Test updates

* lint

* Realign checkboxes for device selection.

* Fixup QuickSettings styling

* remove comment

* lint

* flex comment

* remove unused label

* remove redundant classes

* add test for spaces

* lint

* Copyright

* fixup spaces test

* spaces lint

* Replace pin with compound pin.

* Realign icons

* Remove hack for colouring icons

* Adjust existing rooms component to correctly label room.

* Add test for adding an existing room to an existing space.

* Set deterministic sort order for rooms

* lint
This commit is contained in:
Will Hunt
2025-03-20 15:35:54 +00:00
committed by GitHub
parent 170dcd1c0e
commit 599112e122
43 changed files with 2361 additions and 1436 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
res/css/_components.pcss
View File

@@ -128,7 +128,6 @@
@import "./views/dialogs/_AddExistingToSpaceDialog.pcss";
@import "./views/dialogs/_AnalyticsLearnMoreDialog.pcss";
@import "./views/dialogs/_BugReportDialog.pcss";
@import "./views/dialogs/_BulkRedactDialog.pcss";
@import "./views/dialogs/_ChangelogDialog.pcss";
@import "./views/dialogs/_CompoundDialog.pcss";
@import "./views/dialogs/_ConfirmSpaceUserActionDialog.pcss";
@@ -212,7 +211,6 @@
@import "./views/elements/_ServerPicker.pcss";
@import "./views/elements/_SettingsFlag.pcss";
@import "./views/elements/_Spinner.pcss";
@import "./views/elements/_StyledCheckbox.pcss";
@import "./views/elements/_StyledRadioButton.pcss";
@import "./views/elements/_SyntaxHighlight.pcss";
@import "./views/elements/_TagComposer.pcss";

10
res/css/components/views/settings/devices/_SelectableDeviceTile.pcss
View File

@@ -1,5 +1,5 @@
/*
Copyright 2024 New Vector Ltd.
Copyright 2024,2025 New Vector Ltd.
Copyright 2022 The Matrix.org Foundation C.I.C.
SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
@@ -16,9 +16,9 @@ Please see LICENSE files in the repository root for full details.
.mx_SelectableDeviceTile_checkbox {
flex: 1 0;
.mx_Checkbox_background + div {
flex: 1 0;
/* override more specific selector */
margin-left: $spacing-16 !important;
> div {
margin-top: auto;
margin-bottom: auto;
margin-right: var(--cpd-space-1x);
}
}

49
res/css/structures/_QuickSettingsButton.pcss
View File

@@ -1,5 +1,5 @@
/*
Copyright 2024 New Vector Ltd.
Copyright 2024,2025 New Vector Ltd.
Copyright 2021 The Matrix.org Foundation C.I.C.
SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
@@ -70,38 +70,26 @@ Please see LICENSE files in the repository root for full details.
text-transform: uppercase;
color: var(--cpd-color-text-secondary);
margin: 20px 0 12px;
}
.mx_QuickSettingsButton_pinToSidebarHeading {
padding-left: 24px;
position: relative;
}
.mx_Checkbox {
margin-bottom: 8px;
}
.mx_QuickSettingsButton_favouritesCheckbox,
.mx_QuickSettingsButton_peopleCheckbox {
.mx_Checkbox_background + div {
padding-left: 22px;
position: relative;
margin-left: 6px;
font-size: $font-15px;
line-height: $font-24px;
color: var(--cpd-color-text-primary);
}
display: flex;
}
.mx_QuickSettingsButton_moreOptionsButton {
padding-left: 22px;
margin-left: 22px;
margin-left: var(--cpd-space-7x);
font-size: $font-15px;
line-height: $font-24px;
color: var(--cpd-color-text-primary);
position: relative;
margin-bottom: 16px;
}
.mx_QuickSettingsButton_option {
margin-bottom: var(--cpd-space-3x);
label {
/* Correctly line up icons and text. */
display: flex;
}
}
}
.mx_QuickSettingsButton_ContextMenuWrapper_new_room_list {
@@ -111,15 +99,10 @@ Please see LICENSE files in the repository root for full details.
}
.mx_QuickSettingsButton_icon {
// TODO remove when all icons have fill=currentColor
* {
fill: $secondary-content;
}
margin-right: var(--cpd-space-1x);
color: $secondary-content;
width: 16px;
height: 16px;
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 18px;
height: 18px;
margin-top: auto;
margin-bottom: auto;
}

11
res/css/structures/_SpaceHierarchy.pcss
View File

@@ -1,5 +1,5 @@
/*
Copyright 2024 New Vector Ltd.
Copyright 2024,2025 New Vector Ltd.
Copyright 2021 The Matrix.org Foundation C.I.C.
SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
@@ -247,15 +247,6 @@ Please see LICENSE files in the repository root for full details.
.mx_AccessibleButton_kind_primary_outline {
padding: 3px 16px; /* to account for the 1px border */
}
.mx_Checkbox {
display: inline-flex;
label {
width: 16px;
height: 16px;
}
}
}
&:hover,

17
res/css/views/dialogs/_AddExistingToSpaceDialog.pcss
View File

@@ -1,5 +1,5 @@
/*
Copyright 2024 New Vector Ltd.
Copyright 2024,2025 New Vector Ltd.
Copyright 2021 The Matrix.org Foundation C.I.C.
SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
@@ -32,6 +32,11 @@ Please see LICENSE files in the repository root for full details.
.mx_AddExistingToSpace_section {
margin-right: 12px;
ul {
list-style: none;
padding-left: 0;
}
// provides space for scrollbar so that checkbox and scrollbar do not collide
&:not(:first-child) {
@@ -214,6 +219,12 @@ Please see LICENSE files in the repository root for full details.
display: flex;
margin-top: 12px;
form {
/* Align checkboxes. */
margin-top: auto;
margin-bottom: auto;
}
.mx_DecoratedRoomAvatar, /* we can't target .mx_BaseAvatar here as it'll break the decorated avatar styling */ {
margin-right: 12px;
}
@@ -227,8 +238,4 @@ Please see LICENSE files in the repository root for full details.
text-overflow: ellipsis;
margin-right: 12px;
}
.mx_Checkbox {
align-items: center;
}
}

19
res/css/views/dialogs/_BulkRedactDialog.pcss
View File

@@ -1,19 +0,0 @@
/*
Copyright 2024 New Vector Ltd.
Copyright 2021 Robin Townsend <robin@robin.town>
SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/
.mx_BulkRedactDialog {
.mx_Checkbox,
.mx_BulkRedactDialog_checkboxMicrocopy {
line-height: $font-20px;
}
.mx_BulkRedactDialog_checkboxMicrocopy {
margin-left: 26px;
color: $secondary-content;
}
}

7
res/css/views/dialogs/_ExportDialog.pcss
View File

@@ -1,5 +1,5 @@
/*
Copyright 2024 New Vector Ltd.
Copyright 2024,2025 New Vector Ltd.
Copyright 2021 The Matrix.org Foundation C.I.C.
SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
@@ -43,11 +43,6 @@ Please see LICENSE files in the repository root for full details.
.mx_Field_valid.mx_Field:focus-within {
border-color: $input-border-color;
}
.mx_Checkbox input[type="checkbox"]:checked + label > .mx_Checkbox_background {
background: $info-plinth-fg-color;
border-color: $info-plinth-fg-color;
}
}
.mx_ExportDialog_progress {

6
res/css/views/dialogs/_ManageRestrictedJoinRuleDialog.pcss
View File

@@ -1,5 +1,5 @@
/*
Copyright 2024 New Vector Ltd.
Copyright 2024,2025 New Vector Ltd.
Copyright 2021 The Matrix.org Foundation C.I.C.
SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
@@ -74,10 +74,6 @@ Please see LICENSE files in the repository root for full details.
line-height: $font-15px;
color: $tertiary-content;
}
.mx_Checkbox {
align-items: center;
}
}
}

9
res/css/views/dialogs/_WidgetCapabilitiesPromptDialog.pcss
View File

@@ -1,5 +1,5 @@
/*
Copyright 2024 New Vector Ltd.
Copyright 2024,2025 New Vector Ltd.
Copyright 2020 The Matrix.org Foundation C.I.C.
SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
@@ -19,13 +19,6 @@ Please see LICENSE files in the repository root for full details.
margin-top: 20px;
font-size: $font-15px;
line-height: $font-15px;
.mx_WidgetCapabilitiesPromptDialog_byline {
color: $muted-fg-color;
margin-left: 26px;
font-size: $font-12px;
line-height: $font-12px;
}
}
.mx_Dialog_buttons {

25
res/css/views/elements/_LabelledCheckbox.pcss
View File

@@ -1,5 +1,5 @@
/*
Copyright 2024 New Vector Ltd.
Copyright 2024,2025 New Vector Ltd.
Copyright 2022 The Matrix.org Foundation C.I.C.
SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
@@ -7,26 +7,5 @@ Please see LICENSE files in the repository root for full details.
*/
.mx_LabelledCheckbox {
display: flex;
gap: 8px;
flex-direction: row;
.mx_Checkbox {
margin-top: 3px; /* visually align with label text */
}
.mx_LabelledCheckbox_labels {
flex: 1;
.mx_LabelledCheckbox_label {
vertical-align: middle;
}
.mx_LabelledCheckbox_byline {
display: block;
padding-top: $spacing-4;
color: $muted-fg-color;
font-size: $font-11px;
}
}
margin-top: var(--cpd-space-2x);
}

98
res/css/views/elements/_StyledCheckbox.pcss
View File

@@ -1,98 +0,0 @@
/*
Copyright 2024 New Vector Ltd.
Copyright 2020 The Matrix.org Foundation C.I.C.
SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/
.mx_Checkbox {
$size: $font-16px;
$border-radius: 0.27rem;
display: flex;
align-items: flex-start;
input[type="checkbox"] {
appearance: none;
margin: 0;
padding: 0;
& + label {
display: flex;
align-items: center;
flex-grow: 1;
}
& + label > .mx_Checkbox_background {
display: inline-flex;
position: relative;
flex-shrink: 0;
height: $size;
width: $size;
size: 0.5rem;
border: 1px solid var(--cpd-color-border-interactive-primary);
box-sizing: border-box;
border-radius: $border-radius;
.mx_Checkbox_checkmark {
display: none;
height: 100%;
width: 100%;
mask-image: url("@vector-im/compound-design-tokens/icons/check.svg");
mask-position: center;
mask-size: 100%;
mask-repeat: no-repeat;
}
}
&:checked + label > .mx_Checkbox_background .mx_Checkbox_checkmark {
display: block;
}
& + label > *:not(.mx_Checkbox_background) {
margin-left: 10px;
}
&:disabled + label {
cursor: not-allowed;
}
&:focus-visible {
& + label .mx_Checkbox_background {
@mixin unreal-focus;
}
}
}
}
.mx_Checkbox.mx_Checkbox_kind_solid input[type="checkbox"] {
& + label > .mx_Checkbox_background .mx_Checkbox_checkmark {
background: var(--cpd-color-icon-on-solid-primary);
}
&:checked + label > .mx_Checkbox_background {
background: var(--cpd-color-bg-accent-rest);
border-color: var(--cpd-color-bg-accent-rest);
}
&:checked:disabled + label > .mx_Checkbox_background {
background: var(--cpd-color-bg-action-primary-disabled);
border-color: var(--cpd-color-bg-action-primary-disabled);
}
}
.mx_Checkbox.mx_Checkbox_kind_outline input[type="checkbox"] {
& + label > .mx_Checkbox_background .mx_Checkbox_checkmark {
background: var(--cpd-color-bg-accent-rest);
}
&:checked + label > .mx_Checkbox_background {
background: transparent;
border-color: var(--cpd-color-bg-accent-rest);
}
}

5
res/css/views/rooms/_RoomSublist.pcss
View File

@@ -1,5 +1,5 @@
/*
Copyright 2024 New Vector Ltd.
Copyright 2024,2025 New Vector Ltd.
Copyright 2020 The Matrix.org Foundation C.I.C.
SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
@@ -393,8 +393,7 @@ Please see LICENSE files in the repository root for full details.
margin-bottom: 4px;
}
.mx_StyledRadioButton,
.mx_Checkbox {
.mx_StyledRadioButton {
margin-top: 8px;
}
}

23
res/css/views/settings/tabs/user/_SidebarUserSettingsTab.pcss
View File

@@ -1,5 +1,5 @@
/*
Copyright 2024 New Vector Ltd.
Copyright 2024,2025 New Vector Ltd.
Copyright 2021 The Matrix.org Foundation C.I.C.
SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
@@ -14,17 +14,12 @@ Please see LICENSE files in the repository root for full details.
}
}
.mx_SidebarUserSettingsTab_checkbox {
margin-bottom: $spacing-8;
/* override checkbox styles */
label {
align-items: flex-start !important;
}
svg {
height: 16px;
width: 16px;
margin-right: $spacing-8;
margin-bottom: -1px;
}
.mx_SidebarUserSettingsTab_icon {
margin-right: var(--cpd-space-2x);
margin-top: auto;
margin-bottom: auto;
}
.mx_SidebarUserSettingsTab_checkbox label {
display: flex;
}