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
This commit is contained in:
Kerry
GitHub
parent
e652177706
commit
b3b03e5dcb
18 changed files with 765 additions and 770 deletions
|
|
@ -179,7 +179,6 @@
|
|||
@import "./views/elements/_Dropdown.pcss";
|
||||
@import "./views/elements/_EditableItemList.pcss";
|
||||
@import "./views/elements/_ErrorBoundary.pcss";
|
||||
@import "./views/elements/_EventTilePreview.pcss";
|
||||
@import "./views/elements/_ExternalLink.pcss";
|
||||
@import "./views/elements/_FacePile.pcss";
|
||||
@import "./views/elements/_Field.pcss";
|
||||
|
|
|
|||
|
|
@ -1,21 +0,0 @@
|
|||
/*
|
||||
Copyright 2021 The Matrix.org Foundation C.I.C.
|
||||
|
||||
Licensed under the Apache License, Version 2.0 (the "License");
|
||||
you may not use this file except in compliance with the License.
|
||||
You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing, software
|
||||
distributed under the License is distributed on an "AS IS" BASIS,
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
See the License for the specific language governing permissions and
|
||||
limitations under the License.
|
||||
*/
|
||||
|
||||
.mx_FontScalingPanel {
|
||||
.mx_FontScalingPanel_preview.mx_EventTilePreview_loader {
|
||||
padding: var(--FontScalingPanel_preview-padding-block) 0;
|
||||
}
|
||||
}
|
||||
|
|
@ -14,63 +14,48 @@ See the License for the specific language governing permissions and
|
|||
limitations under the License.
|
||||
*/
|
||||
|
||||
.mx_FontScalingPanel {
|
||||
color: $primary-content;
|
||||
.mx_FontScalingPanel_preview {
|
||||
--FontScalingPanel_preview-padding-block: 9px;
|
||||
|
||||
.mx_FontScalingPanel_preview,
|
||||
.mx_FontScalingPanel_fontSlider {
|
||||
margin-inline-end: var(--SettingsTab_fullWidthField-margin-inline-end);
|
||||
border: 1px solid $quinary-content;
|
||||
border-radius: 10px;
|
||||
padding: 0 $spacing-16 var(--FontScalingPanel_preview-padding-block) $spacing-16;
|
||||
pointer-events: none;
|
||||
display: flow-root;
|
||||
|
||||
&.mx_IRCLayout {
|
||||
padding-top: 9px; /* TODO: Use a spacing variable */
|
||||
}
|
||||
|
||||
.mx_FontScalingPanel_preview {
|
||||
--FontScalingPanel_preview-padding-block: 9px;
|
||||
|
||||
border: 1px solid $quinary-content;
|
||||
border-radius: 10px;
|
||||
padding: 0 $spacing-16 var(--FontScalingPanel_preview-padding-block) $spacing-16;
|
||||
pointer-events: none;
|
||||
display: flow-root;
|
||||
|
||||
&.mx_IRCLayout {
|
||||
padding-top: 9px; /* TODO: Use a spacing variable */
|
||||
}
|
||||
|
||||
.mx_EventTile[data-layout="bubble"] {
|
||||
margin-top: 30px; /* TODO: Use a spacing variable */
|
||||
}
|
||||
|
||||
.mx_EventTile_msgOption {
|
||||
display: none;
|
||||
}
|
||||
.mx_EventTile[data-layout="bubble"] {
|
||||
margin-top: 30px; /* TODO: Use a spacing variable */
|
||||
}
|
||||
|
||||
.mx_FontScalingPanel_fontSlider {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 15px $spacing-20 35px; /* TODO: Use spacing variables */
|
||||
background: rgba($quinary-content, 0.2);
|
||||
border-radius: 10px;
|
||||
font-size: $font-10px;
|
||||
margin-top: $spacing-24;
|
||||
margin-bottom: $spacing-24;
|
||||
|
||||
.mx_FontScalingPanel_fontSlider_smallText,
|
||||
.mx_FontScalingPanel_fontSlider_largeText {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.mx_FontScalingPanel_fontSlider_smallText {
|
||||
font-size: $font-15px;
|
||||
padding-inline-end: $spacing-20;
|
||||
}
|
||||
|
||||
.mx_FontScalingPanel_fontSlider_largeText {
|
||||
font-size: $font-18px;
|
||||
padding-inline-start: $spacing-20;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_FontScalingPanel_customFontSizeField {
|
||||
margin-inline-start: var(--AppearanceUserSettingsTab_Field-margin-inline-start);
|
||||
.mx_EventTile_msgOption {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_FontScalingPanel_fontSlider {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 15px $spacing-20 35px; /* TODO: Use spacing variables */
|
||||
background: rgba($quinary-content, 0.2);
|
||||
border-radius: 10px;
|
||||
font-size: $font-10px;
|
||||
|
||||
.mx_FontScalingPanel_fontSlider_smallText,
|
||||
.mx_FontScalingPanel_fontSlider_largeText {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.mx_FontScalingPanel_fontSlider_smallText {
|
||||
font-size: $font-15px;
|
||||
padding-inline-end: $spacing-20;
|
||||
}
|
||||
|
||||
.mx_FontScalingPanel_fontSlider_largeText {
|
||||
font-size: $font-18px;
|
||||
padding-inline-start: $spacing-20;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -14,34 +14,31 @@ See the License for the specific language governing permissions and
|
|||
limitations under the License.
|
||||
*/
|
||||
|
||||
.mx_ImageSizePanel {
|
||||
color: $primary-content;
|
||||
.mx_ImageSizePanel_radios {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: $spacing-16;
|
||||
|
||||
.mx_ImageSizePanel_radios {
|
||||
display: flex;
|
||||
margin-top: 16px; /* move away from header a bit */
|
||||
> label {
|
||||
margin-right: 68px; /* keep the boxes separate */
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
> label {
|
||||
margin-right: 68px; /* keep the boxes separate */
|
||||
cursor: pointer;
|
||||
.mx_ImageSizePanel_size {
|
||||
background-color: $quinary-content;
|
||||
mask-repeat: no-repeat;
|
||||
mask-size: 221px;
|
||||
mask-position: center;
|
||||
width: 221px;
|
||||
height: 148px;
|
||||
margin-bottom: 14px; /* move radio button away from bottom edge a bit */
|
||||
|
||||
&.mx_ImageSizePanel_sizeDefault {
|
||||
mask: url("$(res)/img/element-icons/settings/img-size-normal.svg");
|
||||
}
|
||||
|
||||
.mx_ImageSizePanel_size {
|
||||
background-color: $quinary-content;
|
||||
mask-repeat: no-repeat;
|
||||
mask-size: 221px;
|
||||
mask-position: center;
|
||||
width: 221px;
|
||||
height: 148px;
|
||||
margin-bottom: 14px; /* move radio button away from bottom edge a bit */
|
||||
|
||||
&.mx_ImageSizePanel_sizeDefault {
|
||||
mask: url("$(res)/img/element-icons/settings/img-size-normal.svg");
|
||||
}
|
||||
|
||||
&.mx_ImageSizePanel_sizeLarge {
|
||||
mask: url("$(res)/img/element-icons/settings/img-size-large.svg");
|
||||
}
|
||||
&.mx_ImageSizePanel_sizeLarge {
|
||||
mask: url("$(res)/img/element-icons/settings/img-size-large.svg");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -15,79 +15,77 @@ See the License for the specific language governing permissions and
|
|||
limitations under the License.
|
||||
*/
|
||||
|
||||
.mx_LayoutSwitcher {
|
||||
.mx_LayoutSwitcher_RadioButtons {
|
||||
.mx_LayoutSwitcher_RadioButtons {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 24px;
|
||||
|
||||
color: $primary-content;
|
||||
|
||||
> .mx_LayoutSwitcher_RadioButton {
|
||||
flex-grow: 0;
|
||||
flex-shrink: 1;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 24px;
|
||||
flex-direction: column;
|
||||
|
||||
color: $primary-content;
|
||||
flex-basis: 33%;
|
||||
min-width: 0;
|
||||
|
||||
> .mx_LayoutSwitcher_RadioButton {
|
||||
flex-grow: 0;
|
||||
flex-shrink: 1;
|
||||
border: 1px solid $quinary-content;
|
||||
border-radius: 10px;
|
||||
|
||||
.mx_EventTile_msgOption,
|
||||
.mx_MessageActionBar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.mx_LayoutSwitcher_RadioButton_preview {
|
||||
flex-grow: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 10px;
|
||||
pointer-events: none;
|
||||
|
||||
width: 300px;
|
||||
min-width: 0;
|
||||
|
||||
border: 1px solid $quinary-content;
|
||||
border-radius: 10px;
|
||||
|
||||
.mx_EventTile_msgOption,
|
||||
.mx_MessageActionBar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.mx_LayoutSwitcher_RadioButton_preview {
|
||||
flex-grow: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 10px;
|
||||
pointer-events: none;
|
||||
|
||||
.mx_EventTile[data-layout="bubble"] .mx_EventTile_line {
|
||||
padding-right: 11px;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_StyledRadioButton {
|
||||
flex-grow: 0;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.mx_EventTile_content {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
&.mx_LayoutSwitcher_RadioButton_selected {
|
||||
border-color: $accent;
|
||||
.mx_EventTile[data-layout="bubble"] .mx_EventTile_line {
|
||||
padding-right: 11px;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_StyledRadioButton {
|
||||
border-top: 1px solid $quinary-content;
|
||||
flex-grow: 0;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.mx_StyledRadioButton_checked {
|
||||
background-color: rgba($accent, 0.08);
|
||||
.mx_EventTile_content {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.mx_EventTile {
|
||||
margin: 0;
|
||||
&[data-layout="bubble"] {
|
||||
margin-right: 40px;
|
||||
flex-shrink: 1;
|
||||
}
|
||||
&[data-layout="irc"] {
|
||||
> a {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.mx_EventTile_line {
|
||||
max-width: 90%;
|
||||
&.mx_LayoutSwitcher_RadioButton_selected {
|
||||
border-color: $accent;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_StyledRadioButton {
|
||||
border-top: 1px solid $quinary-content;
|
||||
}
|
||||
|
||||
.mx_StyledRadioButton_checked {
|
||||
background-color: rgba($accent, 0.08);
|
||||
}
|
||||
|
||||
.mx_EventTile {
|
||||
margin: 0;
|
||||
&[data-layout="bubble"] {
|
||||
margin-right: 40px;
|
||||
flex-shrink: 1;
|
||||
}
|
||||
&[data-layout="irc"] {
|
||||
> a {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.mx_EventTile_line {
|
||||
max-width: 90%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -14,53 +14,47 @@ See the License for the specific language governing permissions and
|
|||
limitations under the License.
|
||||
*/
|
||||
|
||||
.mx_ThemeChoicePanel {
|
||||
.mx_ThemeChoicePanel_themeSelectors {
|
||||
color: $primary-content;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
|
||||
> .mx_ThemeSelectors {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
> .mx_StyledRadioButton {
|
||||
padding: $font-16px;
|
||||
box-sizing: border-box;
|
||||
border-radius: 10px;
|
||||
width: 180px;
|
||||
|
||||
margin-top: 4px;
|
||||
margin-bottom: 30px;
|
||||
background: $quinary-content;
|
||||
opacity: 0.4;
|
||||
|
||||
> .mx_StyledRadioButton {
|
||||
padding: $font-16px;
|
||||
box-sizing: border-box;
|
||||
border-radius: 10px;
|
||||
width: 180px;
|
||||
flex-shrink: 1;
|
||||
flex-grow: 0;
|
||||
|
||||
background: $quinary-content;
|
||||
opacity: 0.4;
|
||||
margin-right: 15px;
|
||||
margin-top: 10px;
|
||||
|
||||
flex-shrink: 1;
|
||||
flex-grow: 0;
|
||||
font-weight: var(--font-semi-bold);
|
||||
|
||||
margin-right: 15px;
|
||||
margin-top: 10px;
|
||||
> span {
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
font-weight: var(--font-semi-bold);
|
||||
> .mx_StyledRadioButton_enabled {
|
||||
opacity: 1;
|
||||
|
||||
> span {
|
||||
justify-content: center;
|
||||
}
|
||||
/* These colors need to be hardcoded because they don't change with the theme */
|
||||
&.mx_ThemeSelector_light {
|
||||
background-color: #f3f8fd;
|
||||
color: #2e2f32;
|
||||
}
|
||||
|
||||
> .mx_StyledRadioButton_enabled {
|
||||
opacity: 1;
|
||||
|
||||
/* These colors need to be hardcoded because they don't change with the theme */
|
||||
&.mx_ThemeSelector_light {
|
||||
background-color: #f3f8fd;
|
||||
color: #2e2f32;
|
||||
}
|
||||
|
||||
&.mx_ThemeSelector_dark {
|
||||
/* 5% lightened version of 181b21 */
|
||||
background-color: #25282e;
|
||||
color: #f3f8fd;
|
||||
}
|
||||
&.mx_ThemeSelector_dark {
|
||||
/* 5% lightened version of 181b21 */
|
||||
background-color: #25282e;
|
||||
color: #f3f8fd;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -14,25 +14,9 @@ See the License for the specific language governing permissions and
|
|||
limitations under the License.
|
||||
*/
|
||||
|
||||
.mx_AppearanceUserSettingsTab {
|
||||
--AppearanceUserSettingsTab_Field-margin-inline-start: calc($font-16px + 10px);
|
||||
|
||||
.mx_SettingsTab_subsectionText {
|
||||
margin-block: $spacing-12 $spacing-32;
|
||||
color: $primary-content; /* Same as mx_SettingsTab */
|
||||
}
|
||||
|
||||
.mx_Field {
|
||||
width: 256px;
|
||||
}
|
||||
|
||||
.mx_AppearanceUserSettingsTab_Advanced {
|
||||
.mx_Checkbox {
|
||||
margin-block: $spacing-16;
|
||||
}
|
||||
|
||||
.mx_AppearanceUserSettingsTab_systemFont {
|
||||
margin-inline-start: var(--AppearanceUserSettingsTab_Field-margin-inline-start);
|
||||
}
|
||||
}
|
||||
.mx_Field.mx_AppearanceUserSettingsTab_checkboxControlledField {
|
||||
width: 256px;
|
||||
// matches checkbox box + padding
|
||||
// to align with checkbox label
|
||||
margin-inline-start: calc($font-16px + 10px);
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue