Skip to content
This repository has been archived by the owner on Sep 11, 2024. It is now read-only.

Use semantic headings in space preferences #11021

Merged
merged 4 commits into from
May 31, 2023
Merged

Use semantic headings in space preferences #11021

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
2f9c937
remove mx_SettingsTab_heading style
May 31, 2023
33eecc5
use semantic headings in space preferences dialog
May 31, 2023
5c70bc3
remove unused settings style: mx_SettingsTab_subheading
May 31, 2023
660271c
Merge branch 'develop' into kerry/24922/semantic-headings-space-pref
May 31, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 0 additions & 10 deletions res/css/views/dialogs/_SpacePreferencesDialog.pcss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,16 +31,6 @@ limitations under the License.

.mx_SettingsTab {
min-width: unset;

.mx_SettingsTab_section {
font-size: $font-15px;
line-height: $font-24px;

.mx_Checkbox + p {
color: $secondary-content;
margin: 0 20px 0 24px;
}
}
}
}
}
Expand Down
6 changes: 0 additions & 6 deletions res/css/views/dialogs/_SpaceSettingsDialog.pcss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,12 +37,6 @@ limitations under the License.
margin-bottom: 20px;
}

& + .mx_SettingsTab_subheading {
border-top: 1px solid $menu-border-color;
margin-top: 0;
padding-top: 24px;
}

.mx_StyledRadioButton {
margin-top: 8px;
margin-bottom: 4px;
Expand Down
24 changes: 0 additions & 24 deletions res/css/views/settings/tabs/_SettingsTab.pcss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,6 @@ limitations under the License.
*/

.mx_SettingsTab {
--SettingsTab_heading_nth_child-margin-top: 30px; /* TODO: Use a spacing variable */
--SettingsTab_tooltip-max-width: 120px; /* So it fits in the space provided by the page */

color: $primary-content;
Expand Down Expand Up @@ -47,29 +46,6 @@ limitations under the License.
color: $alert;
}

.mx_SettingsTab_heading {
font-size: $font-20px;
font-weight: var(--font-semi-bold);
color: $primary-content;
margin-top: 10px; /* TODO: Use a spacing variable */
margin-bottom: 10px; /* TODO: Use a spacing variable */
margin-right: 100px; /* TODO: Use a spacing variable */

&:nth-child(n + 2) {
margin-top: var(--SettingsTab_heading_nth_child-margin-top);
}
}

.mx_SettingsTab_subheading {
font-size: $font-16px;
display: block;
font-weight: var(--font-semi-bold);
color: $primary-content;
margin-top: $spacing-12;
margin-bottom: 10px; /* TODO: Use a spacing variable */
margin-right: 100px; /* TODO: Use a spacing variable */
}

Comment on lines -50 to -72
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🎉

.mx_SettingsTab_subsectionText {
color: $secondary-content;
font-size: $font-14px;
Expand Down
59 changes: 31 additions & 28 deletions src/components/views/dialogs/SpacePreferencesDialog.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,9 @@ import { SettingLevel } from "../../../settings/SettingLevel";
import RoomName from "../elements/RoomName";
import { SpacePreferenceTab } from "../../../dispatcher/payloads/OpenSpacePreferencesPayload";
import { NonEmptyArray } from "../../../@types/common";
import SettingsTab from "../settings/tabs/SettingsTab";
import { SettingsSection } from "../settings/shared/SettingsSection";
import SettingsSubsection, { SettingsSubsectionText } from "../settings/shared/SettingsSubsection";

interface IProps {
space: Room;
Expand All @@ -38,34 +41,34 @@ const SpacePreferencesAppearanceTab: React.FC<Pick<IProps, "space">> = ({ space
const showPeople = useSettingValue("Spaces.showPeopleInSpace", space.roomId);

return (
<div className="mx_SettingsTab">
<div className="mx_SettingsTab_heading">{_t("Sections to show")}</div>

<div className="mx_SettingsTab_section">
<StyledCheckbox
checked={!!showPeople}
onChange={(e: ChangeEvent<HTMLInputElement>) => {
SettingsStore.setValue(
"Spaces.showPeopleInSpace",
space.roomId,
SettingLevel.ROOM_ACCOUNT,
!showPeople,
);
}}
>
{_t("People")}
</StyledCheckbox>
<p>
{_t(
"This groups your chats with members of this space. " +
"Turning this off will hide those chats from your view of %(spaceName)s.",
{
spaceName: space.name,
},
)}
</p>
</div>
</div>
<SettingsTab>
<SettingsSection heading={_t("Sections to show")}>
<SettingsSubsection>
<StyledCheckbox
checked={!!showPeople}
onChange={(e: ChangeEvent<HTMLInputElement>) => {
SettingsStore.setValue(
"Spaces.showPeopleInSpace",
space.roomId,
SettingLevel.ROOM_ACCOUNT,
!showPeople,
);
}}
>
{_t("People")}
</StyledCheckbox>
<SettingsSubsectionText>
{_t(
"This groups your chats with members of this space. " +
"Turning this off will hide those chats from your view of %(spaceName)s.",
{
spaceName: space.name,
},
)}
</SettingsSubsectionText>
</SettingsSubsection>
</SettingsSection>
</SettingsTab>
);
};

Expand Down
1 change: 0 additions & 1 deletion test/components/views/dialogs/UserSettingsDialog-test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -75,7 +75,6 @@ describe("<UserSettingsDialog />", () => {
const getActiveTabLabel = (container: Element) =>
container.querySelector(".mx_TabbedView_tabLabel_active")?.textContent;
const getActiveTabHeading = (container: Element) =>
container.querySelector(".mx_SettingsTab_heading")?.textContent ||
container.querySelector(".mx_SettingsSection .mx_Heading_h2")?.textContent;

it("should render general settings tab when no initialTabId", () => {
Expand Down