mirrors/element-web
1
0
Fork 0
mirror of https://github.com/element-hq/element-web synced 2024-11-27 03:36:07 +03:00
Code Issues Projects Releases Packages Wiki Activity

Merge pull request #4773 from matrix-org/joriks/appearance-tab-layout-options

Browse source 
Add layout options to the appearance tab
This commit is contained in:
Jorik Schellekens 2020-06-22 11:22:16 +01:00 committed by GitHub
commit 9f56036371
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
7 changed files with 140 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
res/css/views/rooms/_IRCLayout.scss
View file

@ -121,8 +121,8 @@ $irc-line-height: $font-18px;
}
}
.mx_EvenTile_line .mx_MessageActionBar,
.mx_EvenTile_line .mx_ReplyThread_wrapper {
.mx_EventTile_line .mx_MessageActionBar,
.mx_EventTile_line .mx_ReplyThread_wrapper {
display: block;
}

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

@ -16,6 +16,7 @@ limitations under the License.
.mx_AppearanceUserSettingsTab_fontSlider,
.mx_AppearanceUserSettingsTab_fontSlider_preview,
.mx_AppearanceUserSettingsTab_Layout,
.mx_AppearanceUserSettingsTab .mx_Field {
@mixin mx_Settings_fullWidthField;
}
@ -41,6 +42,14 @@ limitations under the License.
border-radius: 10px;
padding: 0 16px 9px 16px;
pointer-events: none;
.mx_EventTile_msgOption {
display: none;
}
&.mx_IRCLayout {
padding-top: 9px;
}
}
.mx_AppearanceUserSettingsTab_fontSlider_smallText {
@ -135,3 +144,58 @@ limitations under the License.
.mx_SettingsTab_customFontSizeField {
margin-left: calc($font-16px + 10px);
}
.mx_AppearanceUserSettingsTab_Layout_RadioButtons {
display: flex;
flex-direction: row;
color: $primary-fg-color;
.mx_AppearanceUserSettingsTab_spacer {
width: 24px;
}
> .mx_AppearanceUserSettingsTab_Layout_RadioButton {
flex-grow: 0;
flex-shrink: 1;
display: flex;
flex-direction: column;
width: 300px;
border: 1px solid $input-darker-bg-color;
border-radius: 10px;
.mx_EventTile_msgOption {
display: none;
}
.mx_AppearanceUserSettingsTab_Layout_RadioButton_preview {
flex-grow: 1;
display: flex;
align-items: center;
padding: 10px;
}
.mx_RadioButton {
flex-grow: 0;
padding: 10px;
}
.mx_EventTile_content {
margin-right: 0;
}
}
.mx_RadioButton {
border-top: 1px solid $input-darker-bg-color;
> input + div {
border-color: rgba($muted-fg-color, 0.2);
}
}
.mx_RadioButton_checked {
background-color: rgba($accent-color, 0.08);
}
}

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

@ -55,9 +55,12 @@ interface IState extends IThemeState {
customThemeUrl: string;
customThemeMessage: CustomThemeMessage;
useCustomFontSize: boolean;
useIRCLayout: boolean;
}
export default class AppearanceUserSettingsTab extends React.Component<IProps, IState> {
private readonly MESSAGE_PREVIEW_TEXT = _t("Hey you. You're the best!");
private themeTimer: NodeJS.Timeout;
@ -70,6 +73,7 @@ export default class AppearanceUserSettingsTab extends React.Component<IProps, I
customThemeUrl: "",
customThemeMessage: {isError: false, text: ""},
useCustomFontSize: SettingsStore.getValue("useCustomFontSize"),
useIRCLayout: SettingsStore.getValue("useIRCLayout"),
};
}
@ -200,6 +204,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 themeWatcher = new ThemeWatcher();
let systemThemeSection: JSX.Element;
@ -262,7 +276,7 @@ export default class AppearanceUserSettingsTab extends React.Component<IProps, I
return <StyledRadioButton
key={theme.id}
value={theme.id}
name={"theme"}
name="theme"
disabled={this.state.useSystemTheme}
checked={!this.state.useSystemTheme && theme.id === this.state.theme}
className={"mx_ThemeSelector_" + theme.id}
@ -283,8 +297,8 @@ export default class AppearanceUserSettingsTab extends React.Component<IProps, I
<span className="mx_SettingsTab_subheading">{_t("Font size")}</span>
<EventTilePreview
className="mx_AppearanceUserSettingsTab_fontSlider_preview"
message={_t("Hey you. You're the best!")}
useIRCLayout={false}
message={this.MESSAGE_PREVIEW_TEXT}
useIRCLayout={this.state.useIRCLayout}
/>
<div className="mx_AppearanceUserSettingsTab_fontSlider">
<div className="mx_AppearanceUserSettingsTab_fontSlider_smallText">Aa</div>
@ -320,6 +334,46 @@ export default class AppearanceUserSettingsTab extends React.Component<IProps, I
</div>;
}
private renderLayoutSection = () => {
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">
<EventTilePreview
className="mx_AppearanceUserSettingsTab_Layout_RadioButton_preview"
message={this.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">
<EventTilePreview
className="mx_AppearanceUserSettingsTab_Layout_RadioButton_preview"
message={this.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">
@ -329,6 +383,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>
);
}

8
src/i18n/strings/en_EN.json
View file

@ -435,7 +435,7 @@
"Try out new ways to ignore people (experimental)": "Try out new ways to ignore people (experimental)",
"Use the improved room list (in development - will refresh to apply changes)": "Use the improved room list (in development - will refresh to apply changes)",
"Support adding custom themes": "Support adding custom themes",
"Use IRC layout": "Use IRC layout",
"Enable IRC layout option in the appearance tab": "Enable IRC layout option in the appearance tab",
"Show info about bridges in room settings": "Show info about bridges in room settings",
"Font size": "Font size",
"Use custom size": "Use custom size",
@ -483,6 +483,7 @@
"How fast should messages be downloaded.": "How fast should messages be downloaded.",
"Manually verify all remote sessions": "Manually verify all remote sessions",
"IRC display name width": "IRC display name width",
"Use IRC layout": "Use IRC layout",
"Collecting app version information": "Collecting app version information",
"Collecting logs": "Collecting logs",
"Uploading report": "Uploading report",
@ -770,6 +771,7 @@
"Downloading update...": "Downloading update...",
"New version available. <a>Update now.</a>": "New version available. <a>Update now.</a>",
"Check for update": "Check for update",
"Hey you. You're the best!": "Hey you. You're the best!",
"Size must be a number": "Size must be a number",
"Custom font size can only be between %(min)s pt and %(max)s pt": "Custom font size can only be between %(min)s pt and %(max)s pt",
"Use between %(min)s pt and %(max)s pt": "Use between %(min)s pt and %(max)s pt",
@ -779,7 +781,9 @@
"Custom theme URL": "Custom theme URL",
"Add theme": "Add theme",
"Theme": "Theme",
"Hey you. You're the best!": "Hey you. You're the best!",
"Message layout": "Message layout",
"Compact": "Compact",
"Modern": "Modern",
"Customise your appearance": "Customise your appearance",
"Appearance Settings only affect this Riot session.": "Appearance Settings only affect this Riot session.",
"Flair": "Flair",

7
src/settings/Settings.js
View file

@ -153,7 +153,7 @@ export const SETTINGS = {
},
"feature_irc_ui": {
supportedLevels: LEVELS_ACCOUNT_SETTINGS,
displayName: _td('Use IRC layout'),
displayName: _td('Enable IRC layout option in the appearance tab'),
default: false,
isFeature: true,
},
@ -545,4 +545,9 @@ export const SETTINGS = {
displayName: _td("IRC display name width"),
default: 80,
},
"useIRCLayout": {
supportedLevels: LEVELS_ACCOUNT_SETTINGS,
displayName: _td("Use IRC layout"),
default: false,
},
};