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

Add layout options to the appearance tab

Browse source
This commit is contained in:
Jorik Schellekens 2020-06-16 17:55:19 +01:00
parent b27334f448
commit 2192332968
7 changed files with 138 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

6
src/components/structures/RoomView.js
View file

@ -166,7 +166,7 @@ export default createReactClass({
canReact: false,
canReply: false,
useIRCLayout: SettingsStore.getValue("feature_irc_ui"),
useIRCLayout: SettingsStore.getValue("useIRCLayout"),
matrixClientIsReady: this.context && this.context.isInitialSyncComplete(),
};
@ -199,7 +199,7 @@ export default createReactClass({
this._roomView = createRef();
this._searchResultsPanel = createRef();
this._layoutWatcherRef = SettingsStore.watchSetting("feature_irc_ui", null, this.onLayoutChange);
this._layoutWatcherRef = SettingsStore.watchSetting("useIRCLayout", null, this.onLayoutChange);
},
_onReadReceiptsChange: function() {
@ -546,7 +546,7 @@ export default createReactClass({
onLayoutChange: function() {
this.setState({
useIRCLayout: SettingsStore.getValue("feature_irc_ui"),
useIRCLayout: SettingsStore.getValue("useIRCLayout"),
});
},

1
src/components/views/elements/StyledRadioButton.tsx
View file

@ -36,6 +36,7 @@ export default class StyledRadioButton extends React.PureComponent<IProps, IStat
{
"mx_RadioButton_disabled": disabled,
"mx_RadioButton_enabled": !disabled,
"mx_RadioButton_checked": this.props.checked,
});
return <label className={_className}>
<input type='radio' disabled={disabled} {...otherProps} />

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

@ -52,8 +52,11 @@ interface IState extends IThemeState {
customThemeUrl: string,
customThemeMessage: CustomThemeMessage,
useCustomFontSize: boolean,
useIRCLayout: boolean,
}
const MESSAGE_PREVIEW_TEXT = "Hey you. You're the best"
export default class AppearanceUserSettingsTab extends React.Component<IProps, IState> {
private themeTimer: NodeJS.Timeout;
@ -67,6 +70,7 @@ export default class AppearanceUserSettingsTab extends React.Component<IProps, I
customThemeUrl: "",
customThemeMessage: {isError: false, text: ""},
useCustomFontSize: SettingsStore.getValue("useCustomFontSize"),
useIRCLayout: SettingsStore.getValue("useIRCLayout", null),
};
}
@ -197,6 +201,16 @@ export default class AppearanceUserSettingsTab extends React.Component<IProps, I
this.setState({customThemeUrl: e.target.value});
};
private onLayoutChange = (e: React.ChangeEvent<HTMLInputElement>): void => {
const val = e.target.value === "true";
this.setState({
useIRCLayout: val,
});
SettingsStore.setValue("useIRCLayout", null, SettingLevel.DEVICE, val);
}
private renderThemeSection() {
const SettingsFlag = sdk.getComponent("views.elements.SettingsFlag");
const StyledCheckbox = sdk.getComponent("views.elements.StyledCheckbox");
@ -287,7 +301,8 @@ export default class AppearanceUserSettingsTab extends React.Component<IProps, I
<span className="mx_SettingsTab_subheading">{_t("Font size")}</span>
<MessagePreview
className="mx_AppearanceUserSettingsTab_fontSlider_preview"
message="Hey you. You're the best"
message={MESSAGE_PREVIEW_TEXT}
useIRCLayout={this.state.useIRCLayout}
/>
<div className="mx_AppearanceUserSettingsTab_fontSlider">
<div className="mx_AppearanceUserSettingsTab_fontSlider_smallText">Aa</div>
@ -323,6 +338,49 @@ export default class AppearanceUserSettingsTab extends React.Component<IProps, I
</div>;
}
private renderLayoutSection = () => {
const StyledRadioButton = sdk.getComponent("views.elements.StyledRadioButton");
const MessagePreview = sdk.getComponent("views.elements.MessagePreview");
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">
<MessagePreview
className="mx_AppearanceUserSettingsTab_Layout_RadioButton_preview"
message={MESSAGE_PREVIEW_TEXT}
useIRCLayout={true}
/>
<StyledRadioButton
name={"layout"}
value={true}
checked={this.state.useIRCLayout}
onChange={this.onLayoutChange}
>
{_t("Compact")}
</StyledRadioButton>
</div>
<div className="mx_AppearanceUserSettingsTab_spacer" />
<div className="mx_AppearanceUserSettingsTab_Layout_RadioButton">
<MessagePreview
className="mx_AppearanceUserSettingsTab_Layout_RadioButton_preview"
message={MESSAGE_PREVIEW_TEXT}
useIRCLayout={false}
/>
<StyledRadioButton
name={"layout"}
value={false}
checked={!this.state.useIRCLayout}
onChange={this.onLayoutChange}
>
{_t("Modern")}
</StyledRadioButton>
</div>
</div>
</div>
}
render() {
return (
<div className="mx_SettingsTab mx_AppearanceUserSettingsTab">
@ -332,6 +390,7 @@ export default class AppearanceUserSettingsTab extends React.Component<IProps, I
</div>
{this.renderThemeSection()}
{SettingsStore.isFeatureEnabled("feature_font_scaling") ? this.renderFontSection() : null}
{SettingsStore.isFeatureEnabled("feature_irc_ui") ? this.renderLayoutSection() : null}
</div>
);
}