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

Improve radio outlines for message layout to be more consistent

Browse source 
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
This commit is contained in:
Michael Telatynski 2020-07-03 19:48:22 +01:00
parent 5a542281ed
commit c8bb6f5904
2 changed files with 14 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

6
res/css/views/settings/tabs/user/_AppearanceUserSettingsTab.scss
View file

@ -188,11 +188,17 @@ limitations under the License.
.mx_RadioButton { .mx_RadioButton {
flex-grow: 0; flex-grow: 0;
padding: 10px; padding: 10px;
// create a horizontal separation line between the preview and the radio interaction
border-top: 1px solid $input-darker-bg-color;
} }
.mx_EventTile_content { .mx_EventTile_content {
margin-right: 0; margin-right: 0;
} }
&.mx_AppearanceUserSettingsTab_Layout_RadioButton_selected {
border-color: $accent-color;
}
} }
.mx_RadioButton { .mx_RadioButton {

11
src/components/views/settings/tabs/user/AppearanceUserSettingsTab.tsx
View file

@ -34,6 +34,7 @@ import SettingsFlag from '../../../elements/SettingsFlag';
import Field from '../../../elements/Field'; import Field from '../../../elements/Field';
import EventTilePreview from '../../../elements/EventTilePreview'; import EventTilePreview from '../../../elements/EventTilePreview';
import StyledRadioGroup from "../../../elements/StyledRadioGroup"; import StyledRadioGroup from "../../../elements/StyledRadioGroup";
import classNames from 'classnames';
interface IProps { interface IProps {
} }
@ -345,7 +346,9 @@ export default class AppearanceUserSettingsTab extends React.Component<IProps, I
<span className="mx_SettingsTab_subheading">{_t("Message layout")}</span> <span className="mx_SettingsTab_subheading">{_t("Message layout")}</span>
<div className="mx_AppearanceUserSettingsTab_Layout_RadioButtons"> <div className="mx_AppearanceUserSettingsTab_Layout_RadioButtons">
<div className="mx_AppearanceUserSettingsTab_Layout_RadioButton"> <div className={classNames("mx_AppearanceUserSettingsTab_Layout_RadioButton", {
mx_AppearanceUserSettingsTab_Layout_RadioButton_selected: this.state.useIRCLayout,
})}>
<EventTilePreview <EventTilePreview
className="mx_AppearanceUserSettingsTab_Layout_RadioButton_preview" className="mx_AppearanceUserSettingsTab_Layout_RadioButton_preview"
message={this.MESSAGE_PREVIEW_TEXT} message={this.MESSAGE_PREVIEW_TEXT}
@ -356,13 +359,14 @@ export default class AppearanceUserSettingsTab extends React.Component<IProps, I
value="true" value="true"
checked={this.state.useIRCLayout} checked={this.state.useIRCLayout}
onChange={this.onLayoutChange} onChange={this.onLayoutChange}
outlined
> >
{_t("Compact")} {_t("Compact")}
</StyledRadioButton> </StyledRadioButton>
</div> </div>
<div className="mx_AppearanceUserSettingsTab_spacer" /> <div className="mx_AppearanceUserSettingsTab_spacer" />
<div className="mx_AppearanceUserSettingsTab_Layout_RadioButton"> <div className={classNames("mx_AppearanceUserSettingsTab_Layout_RadioButton", {
mx_AppearanceUserSettingsTab_Layout_RadioButton_selected: !this.state.useIRCLayout,
})}>
<EventTilePreview <EventTilePreview
className="mx_AppearanceUserSettingsTab_Layout_RadioButton_preview" className="mx_AppearanceUserSettingsTab_Layout_RadioButton_preview"
message={this.MESSAGE_PREVIEW_TEXT} message={this.MESSAGE_PREVIEW_TEXT}
@ -373,7 +377,6 @@ export default class AppearanceUserSettingsTab extends React.Component<IProps, I
value="false" value="false"
checked={!this.state.useIRCLayout} checked={!this.state.useIRCLayout}
onChange={this.onLayoutChange} onChange={this.onLayoutChange}
outlined
> >
{_t("Modern")} {_t("Modern")}
</StyledRadioButton> </StyledRadioButton>