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

Rename mx_RadioButton to mx_StyledRadioButton to match class name (#7083)

Browse Source
This commit is contained in:
Andy Balaam
2021-11-04 12:57:38 +00:00
committed by GitHub
parent 7a203461f7
commit 9c8e1d32e2
14 changed files with 47 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
res/css/views/dialogs/_ExportDialog.scss
View File

@@ -34,11 +34,11 @@ limitations under the License.
display: none;
}
.mx_RadioButton input[type="radio"]:checked + div > div {
.mx_StyledRadioButton input[type="radio"]:checked + div > div {
background: $greyed-fg-color;
}
.mx_RadioButton input[type=radio]:checked + div {
.mx_StyledRadioButton input[type=radio]:checked + div {
border-color: unset;
}
@@ -76,7 +76,7 @@ limitations under the License.
align-items: center;
}
.mx_RadioButton > .mx_RadioButton_content {
.mx_StyledRadioButton > .mx_StyledRadioButton_content {
margin-top: 5px;
margin-bottom: 5px;
}

10
res/css/views/dialogs/_FeedbackDialog.scss
View File

@@ -75,7 +75,7 @@ limitations under the License.
}
.mx_FeedbackDialog_rateApp {
.mx_RadioButton {
.mx_StyledRadioButton {
display: inline-flex;
font-size: 20px;
transition: font-size 1s, border .5s;
@@ -90,7 +90,7 @@ limitations under the License.
display: none;
}
.mx_RadioButton_content {
.mx_StyledRadioButton_content {
background: $icon-button-color;
width: 40px;
height: 40px;
@@ -100,16 +100,16 @@ limitations under the License.
margin: 5px;
}
.mx_RadioButton_spacer {
.mx_StyledRadioButton_spacer {
display: none;
}
& + .mx_RadioButton {
& + .mx_StyledRadioButton {
margin-left: 16px;
}
}
.mx_RadioButton_checked {
.mx_StyledRadioButton_checked {
font-size: 24px;
border-color: $accent-color;
}

4
res/css/views/dialogs/_SpaceSettingsDialog.scss
View File

@@ -43,11 +43,11 @@ limitations under the License.
padding-top: 24px;
}
.mx_RadioButton {
.mx_StyledRadioButton {
margin-top: 8px;
margin-bottom: 4px;
.mx_RadioButton_content {
.mx_StyledRadioButton_content {
font-weight: $font-semi-bold;
line-height: $font-18px;
color: $primary-content;

2
res/css/views/dialogs/security/_CreateSecretStorageDialog.scss
View File

@@ -82,7 +82,7 @@ limitations under the License.
display: block;
}
.mx_CreateSecretStorageDialog_primaryContainer .mx_RadioButton {
.mx_CreateSecretStorageDialog_primaryContainer .mx_StyledRadioButton {
margin-bottom: 16px;
padding: 11px;
}

12
res/css/views/elements/_StyledRadioButton.scss
View File

@@ -19,7 +19,7 @@ limitations under the License.
* width
*/
.mx_RadioButton {
.mx_StyledRadioButton {
$radio-circle-color: $muted-fg-color;
$active-radio-circle-color: $accent-color;
position: relative;
@@ -28,7 +28,7 @@ limitations under the License.
align-items: baseline;
flex-grow: 1;
> .mx_RadioButton_content {
> .mx_StyledRadioButton_content {
flex-grow: 1;
display: flex;
@@ -38,7 +38,7 @@ limitations under the License.
margin-right: 8px;
}
.mx_RadioButton_spacer {
.mx_StyledRadioButton_spacer {
flex-shrink: 0;
flex-grow: 0;
@@ -113,18 +113,18 @@ limitations under the License.
}
}
.mx_RadioButton_innerLabel {
.mx_StyledRadioButton_innerLabel {
display: flex;
position: relative;
top: 4px;
}
}
.mx_RadioButton_outlined {
.mx_StyledRadioButton_outlined {
border: 1px solid $input-darker-bg-color;
border-radius: 8px;
}
.mx_RadioButton_checked {
.mx_StyledRadioButton_checked {
border-color: $accent-color;
}

2
res/css/views/rooms/_RoomSublist.scss
View File

@@ -379,7 +379,7 @@ limitations under the License.
margin-bottom: 4px;
}
.mx_RadioButton, .mx_Checkbox {
.mx_StyledRadioButton, .mx_Checkbox {
margin-top: 8px;
}
}

4
res/css/views/settings/_JoinRuleSettings.scss
View File

@@ -59,7 +59,7 @@ limitations under the License.
padding-top: 16px;
margin-bottom: 8px;
.mx_RadioButton_content {
.mx_StyledRadioButton_content {
margin-left: 14px;
font-weight: $font-semi-bold;
font-size: $font-15px;
@@ -76,7 +76,7 @@ limitations under the License.
line-height: $font-24px;
color: $secondary-content;
& + .mx_RadioButton {
& + .mx_StyledRadioButton {
border-top: 1px solid $menu-border-color;
}
}

6
res/css/views/settings/_LayoutSwitcher.scss
View File

@@ -47,7 +47,7 @@ limitations under the License.
pointer-events: none;
}
.mx_RadioButton {
.mx_StyledRadioButton {
flex-grow: 0;
padding: 10px;
}
@@ -61,7 +61,7 @@ limitations under the License.
}
}
.mx_RadioButton {
.mx_StyledRadioButton {
border-top: 1px solid $appearance-tab-border-color;
> input + div {
@@ -69,7 +69,7 @@ limitations under the License.
}
}
.mx_RadioButton_checked {
.mx_StyledRadioButton_checked {
background-color: rgba($accent-color, 0.08);
}

6
res/css/views/settings/_Notifications.scss
View File

@@ -49,14 +49,14 @@ limitations under the License.
}
// Override StyledRadioButton default styles
.mx_RadioButton {
.mx_StyledRadioButton {
justify-content: center;
.mx_RadioButton_content {
.mx_StyledRadioButton_content {
display: none;
}
.mx_RadioButton_spacer {
.mx_StyledRadioButton_spacer {
display: none;
}
}

4
res/css/views/settings/_ThemeChoicePanel.scss
View File

@@ -26,7 +26,7 @@ limitations under the License.
margin-top: 4px;
margin-bottom: 30px;
> .mx_RadioButton {
> .mx_StyledRadioButton {
padding: $font-16px;
box-sizing: border-box;
border-radius: 10px;
@@ -49,7 +49,7 @@ limitations under the License.
}
}
> .mx_RadioButton_enabled {
> .mx_StyledRadioButton_enabled {
opacity: 1;
// These colors need to be hardcoded because they don't change with the theme

2
res/css/views/spaces/_SpaceChildrenPicker.scss
View File

@@ -17,7 +17,7 @@ limitations under the License.
.mx_SpaceChildrenPicker {
margin: 16px 0;
.mx_RadioButton + .mx_RadioButton {
.mx_StyledRadioButton + .mx_StyledRadioButton {
margin-top: 16px;
}

4
res/themes/light-high-contrast/css/_light-high-contrast.scss
View File

@@ -108,10 +108,10 @@ $roomtopic-color: $secondary-content;
background-color: $roomlist-button-bg-color !important;
}
.mx_ThemeChoicePanel > .mx_ThemeSelectors > .mx_RadioButton input[type="radio"]:disabled + div {
.mx_ThemeChoicePanel > .mx_ThemeSelectors > .mx_StyledRadioButton input[type="radio"]:disabled + div {
border-color: $primary-content;
}
.mx_ThemeChoicePanel > .mx_ThemeSelectors > .mx_RadioButton.mx_RadioButton_disabled {
.mx_ThemeChoicePanel > .mx_ThemeSelectors > .mx_StyledRadioButton.mx_StyledRadioButton_disabled {
color: $primary-content;
}

20
src/components/views/elements/StyledRadioButton.tsx
View File

@@ -39,13 +39,13 @@ export default class StyledRadioButton extends React.PureComponent<IProps, IStat
public render() {
const { children, className, disabled, outlined, childrenInLabel, ...otherProps } = this.props;
const _className = classnames(
'mx_RadioButton',
'mx_StyledRadioButton',
className,
{
"mx_RadioButton_disabled": disabled,
"mx_RadioButton_enabled": !disabled,
"mx_RadioButton_checked": this.props.checked,
"mx_RadioButton_outlined": outlined,
"mx_StyledRadioButton_disabled": disabled,
"mx_StyledRadioButton_enabled": !disabled,
"mx_StyledRadioButton_checked": this.props.checked,
"mx_StyledRadioButton_outlined": outlined,
});
const radioButton = <React.Fragment>
@@ -57,16 +57,16 @@ export default class StyledRadioButton extends React.PureComponent<IProps, IStat
if (childrenInLabel) {
return <label className={_className}>
{ radioButton }
<div className="mx_RadioButton_content">{ children }</div>
<div className="mx_RadioButton_spacer" />
<div className="mx_StyledRadioButton_content">{ children }</div>
<div className="mx_StyledRadioButton_spacer" />
</label>;
} else {
return <div className={_className}>
<label className="mx_RadioButton_innerLabel">
<label className="mx_StyledRadioButton_innerLabel">
{ radioButton }
</label>
<div className="mx_RadioButton_content">{ children }</div>
<div className="mx_RadioButton_spacer" />
<div className="mx_StyledRadioButton_content">{ children }</div>
<div className="mx_StyledRadioButton_spacer" />
</div>;
}
}

12
test/components/views/settings/__snapshots__/ThemeChoicePanel-test.tsx.snap
View File

@@ -46,7 +46,7 @@ exports[`ThemeChoicePanel renders the theme choice UI 1`] = `
value="light"
>
<label
className="mx_RadioButton mx_ThemeSelector_light mx_RadioButton_disabled mx_RadioButton_outlined"
className="mx_StyledRadioButton mx_ThemeSelector_light mx_StyledRadioButton_disabled mx_StyledRadioButton_outlined"
>
<input
checked={false}
@@ -60,12 +60,12 @@ exports[`ThemeChoicePanel renders the theme choice UI 1`] = `
<div />
</div>
<div
className="mx_RadioButton_content"
className="mx_StyledRadioButton_content"
>
Light
</div>
<div
className="mx_RadioButton_spacer"
className="mx_StyledRadioButton_spacer"
/>
</label>
</StyledRadioButton>
@@ -80,7 +80,7 @@ exports[`ThemeChoicePanel renders the theme choice UI 1`] = `
value="dark"
>
<label
className="mx_RadioButton mx_ThemeSelector_dark mx_RadioButton_disabled mx_RadioButton_outlined"
className="mx_StyledRadioButton mx_ThemeSelector_dark mx_StyledRadioButton_disabled mx_StyledRadioButton_outlined"
>
<input
checked={false}
@@ -94,12 +94,12 @@ exports[`ThemeChoicePanel renders the theme choice UI 1`] = `
<div />
</div>
<div
className="mx_RadioButton_content"
className="mx_StyledRadioButton_content"
>
Dark
</div>
<div
className="mx_RadioButton_spacer"
className="mx_StyledRadioButton_spacer"
/>
</label>
</StyledRadioButton>