imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

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
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
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; display: none;
} }
.mx_RadioButton input[type="radio"]:checked + div > div { .mx_StyledRadioButton input[type="radio"]:checked + div > div {
background: $greyed-fg-color; background: $greyed-fg-color;
} }
.mx_RadioButton input[type=radio]:checked + div { .mx_StyledRadioButton input[type=radio]:checked + div {
border-color: unset; border-color: unset;
} }
@ -76,7 +76,7 @@ limitations under the License.
align-items: center; align-items: center;
} }
.mx_RadioButton > .mx_RadioButton_content { .mx_StyledRadioButton > .mx_StyledRadioButton_content {
margin-top: 5px; margin-top: 5px;
margin-bottom: 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_FeedbackDialog_rateApp {
.mx_RadioButton { .mx_StyledRadioButton {
display: inline-flex; display: inline-flex;
font-size: 20px; font-size: 20px;
transition: font-size 1s, border .5s; transition: font-size 1s, border .5s;
@ -90,7 +90,7 @@ limitations under the License.
display: none; display: none;
} }
.mx_RadioButton_content { .mx_StyledRadioButton_content {
background: $icon-button-color; background: $icon-button-color;
width: 40px; width: 40px;
height: 40px; height: 40px;
@ -100,16 +100,16 @@ limitations under the License.
margin: 5px; margin: 5px;
} }
.mx_RadioButton_spacer { .mx_StyledRadioButton_spacer {
display: none; display: none;
} }
& + .mx_RadioButton { & + .mx_StyledRadioButton {
margin-left: 16px; margin-left: 16px;
} }
} }
.mx_RadioButton_checked { .mx_StyledRadioButton_checked {
font-size: 24px; font-size: 24px;
border-color: $accent-color; border-color: $accent-color;
} }

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

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

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

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

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

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

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

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

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

@ -59,7 +59,7 @@ limitations under the License.
padding-top: 16px; padding-top: 16px;
margin-bottom: 8px; margin-bottom: 8px;
.mx_RadioButton_content { .mx_StyledRadioButton_content {
margin-left: 14px; margin-left: 14px;
font-weight: $font-semi-bold; font-weight: $font-semi-bold;
font-size: $font-15px; font-size: $font-15px;
@ -76,7 +76,7 @@ limitations under the License.
line-height: $font-24px; line-height: $font-24px;
color: $secondary-content; color: $secondary-content;
& + .mx_RadioButton { & + .mx_StyledRadioButton {
border-top: 1px solid $menu-border-color; 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; pointer-events: none;
} }
.mx_RadioButton { .mx_StyledRadioButton {
flex-grow: 0; flex-grow: 0;
padding: 10px; padding: 10px;
} }
@ -61,7 +61,7 @@ limitations under the License.
} }
} }
.mx_RadioButton { .mx_StyledRadioButton {
border-top: 1px solid $appearance-tab-border-color; border-top: 1px solid $appearance-tab-border-color;
> input + div { > input + div {
@ -69,7 +69,7 @@ limitations under the License.
} }
} }
.mx_RadioButton_checked { .mx_StyledRadioButton_checked {
background-color: rgba($accent-color, 0.08); 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 // Override StyledRadioButton default styles
.mx_RadioButton { .mx_StyledRadioButton {
justify-content: center; justify-content: center;
.mx_RadioButton_content { .mx_StyledRadioButton_content {
display: none; display: none;
} }
.mx_RadioButton_spacer { .mx_StyledRadioButton_spacer {
display: none; display: none;
} }
} }

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

@ -26,7 +26,7 @@ limitations under the License.
margin-top: 4px; margin-top: 4px;
margin-bottom: 30px; margin-bottom: 30px;
> .mx_RadioButton { > .mx_StyledRadioButton {
padding: $font-16px; padding: $font-16px;
box-sizing: border-box; box-sizing: border-box;
border-radius: 10px; border-radius: 10px;
@ -49,7 +49,7 @@ limitations under the License.
} }
} }
> .mx_RadioButton_enabled { > .mx_StyledRadioButton_enabled {
opacity: 1; opacity: 1;
// These colors need to be hardcoded because they don't change with the theme // 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 { .mx_SpaceChildrenPicker {
margin: 16px 0; margin: 16px 0;
.mx_RadioButton + .mx_RadioButton { .mx_StyledRadioButton + .mx_StyledRadioButton {
margin-top: 16px; 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; 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; 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; 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() { public render() {
const { children, className, disabled, outlined, childrenInLabel, ...otherProps } = this.props; const { children, className, disabled, outlined, childrenInLabel, ...otherProps } = this.props;
const _className = classnames( const _className = classnames(
'mx_RadioButton', 'mx_StyledRadioButton',
className, className,
{ {
"mx_RadioButton_disabled": disabled, "mx_StyledRadioButton_disabled": disabled,
"mx_RadioButton_enabled": !disabled, "mx_StyledRadioButton_enabled": !disabled,
"mx_RadioButton_checked": this.props.checked, "mx_StyledRadioButton_checked": this.props.checked,
"mx_RadioButton_outlined": outlined, "mx_StyledRadioButton_outlined": outlined,
}); });
const radioButton = <React.Fragment> const radioButton = <React.Fragment>
@ -57,16 +57,16 @@ export default class StyledRadioButton extends React.PureComponent<IProps, IStat
if (childrenInLabel) { if (childrenInLabel) {
return <label className={_className}> return <label className={_className}>
{ radioButton } { radioButton }
<div className="mx_RadioButton_content">{ children }</div> <div className="mx_StyledRadioButton_content">{ children }</div>
<div className="mx_RadioButton_spacer" /> <div className="mx_StyledRadioButton_spacer" />
</label>; </label>;
} else { } else {
return <div className={_className}> return <div className={_className}>
<label className="mx_RadioButton_innerLabel"> <label className="mx_StyledRadioButton_innerLabel">
{ radioButton } { radioButton }
</label> </label>
<div className="mx_RadioButton_content">{ children }</div> <div className="mx_StyledRadioButton_content">{ children }</div>
<div className="mx_RadioButton_spacer" /> <div className="mx_StyledRadioButton_spacer" />
</div>; </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" value="light"
> >
<label <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 <input
checked={false} checked={false}
@ -60,12 +60,12 @@ exports[`ThemeChoicePanel renders the theme choice UI 1`] = `
<div /> <div />
</div> </div>
<div <div
className="mx_RadioButton_content" className="mx_StyledRadioButton_content"
> >
Light Light
</div> </div>
<div <div
className="mx_RadioButton_spacer" className="mx_StyledRadioButton_spacer"
/> />
</label> </label>
</StyledRadioButton> </StyledRadioButton>
@ -80,7 +80,7 @@ exports[`ThemeChoicePanel renders the theme choice UI 1`] = `
value="dark" value="dark"
> >
<label <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 <input
checked={false} checked={false}
@ -94,12 +94,12 @@ exports[`ThemeChoicePanel renders the theme choice UI 1`] = `
<div /> <div />
</div> </div>
<div <div
className="mx_RadioButton_content" className="mx_StyledRadioButton_content"
> >
Dark Dark
</div> </div>
<div <div
className="mx_RadioButton_spacer" className="mx_StyledRadioButton_spacer"
/> />
</label> </label>
</StyledRadioButton> </StyledRadioButton>