OpenCloud
/
element-web
mirror of https://github.com/vector-im/element-web
1
0
Fork 0
Code Issues Releases Wiki Activity

Improve radio outlines for message layout to be more consistent 

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
pull/21833/head
Michael Telatynski 2020-07-03 19:48:22 +01:00
parent 5a542281ed
commit c8bb6f5904
2 changed files with 14 additions and 5 deletions
Show Stats 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 {
flex-grow: 0;
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 {
margin-right: 0;
}
&.mx_AppearanceUserSettingsTab_Layout_RadioButton_selected {
border-color: $accent-color;
}
}
.mx_RadioButton {

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