PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 3

add toggle between font slider and custom setting

Browse source
This commit is contained in:
Jorik Schellekens 2020-04-23 12:09:08 +01:00
parent a83993f1ff
commit c86638c667
3 changed files with 17 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -36,7 +36,7 @@ export default class StyleUserSettingsTab extends React.Component {
...this._calculateThemeState(), ...this._calculateThemeState(),
customThemeUrl: "", customThemeUrl: "",
customThemeMessage: {isError: false, text: ""}, customThemeMessage: {isError: false, text: ""},
useCustomFontSize: SettingsStore.getValue("useCustomFontSize"),
}; };
} }
@ -224,6 +224,7 @@ export default class StyleUserSettingsTab extends React.Component {
} }
_renderFontSection() { _renderFontSection() {
const SettingsFlag = sdk.getComponent("views.elements.SettingsFlag");
return <div className="mx_SettingsTab_section mx_AppearanceUserSettingsTab_fontScaling"> return <div className="mx_SettingsTab_section mx_AppearanceUserSettingsTab_fontScaling">
<span className="mx_SettingsTab_subheading">{_t("Font size")}</span> <span className="mx_SettingsTab_subheading">{_t("Font size")}</span>
<div className="mx_AppearanceUserSettingsTab_fontSlider"> <div className="mx_AppearanceUserSettingsTab_fontSlider">
@ -233,10 +234,15 @@ export default class StyleUserSettingsTab extends React.Component {
value={this.state.fontSize} value={this.state.fontSize}
onSelectionChange={this._onFontSizeChanged} onSelectionChange={this._onFontSizeChanged}
displayFunc={value => {}} displayFunc={value => {}}
disabled={false} disabled={this.state.useCustomFontSize}
/> />
<div className="mx_AppearanceUserSettingsTab_fontSlider_largeText">Aa</div> <div className="mx_AppearanceUserSettingsTab_fontSlider_largeText">Aa</div>
</div> </div>
<SettingsFlag
name="useCustomFontSize"
level={SettingLevel.ACCOUNT}
onChange={(checked)=> this.setState({useCustomFontSize: checked})}
/>
<Field <Field
type="text" type="text"
label={_t("Font size")} label={_t("Font size")}
@ -245,6 +251,7 @@ export default class StyleUserSettingsTab extends React.Component {
value={this.state.fontSize} value={this.state.fontSize}
id="font_size_field" id="font_size_field"
onChange={(ev) => this._onFontSizeChanged(ev.target.value)} onChange={(ev) => this._onFontSizeChanged(ev.target.value)}
disabled={!this.state.useCustomFontSize}
/> />
</div>; </div>;
} }

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

@ -407,6 +407,9 @@
"Show info about bridges in room settings": "Show info about bridges in room settings", "Show info about bridges in room settings": "Show info about bridges in room settings",
"Show padlocks on invite only rooms": "Show padlocks on invite only rooms", "Show padlocks on invite only rooms": "Show padlocks on invite only rooms",
"Font size": "Font size", "Font size": "Font size",
"Min font size": "Min font size",
"Max font size": "Max font size",
"Custom font size": "Custom font size",
"Enable Emoji suggestions while typing": "Enable Emoji suggestions while typing", "Enable Emoji suggestions while typing": "Enable Emoji suggestions while typing",
"Use compact timeline layout": "Use compact timeline layout", "Use compact timeline layout": "Use compact timeline layout",
"Show a placeholder for removed messages": "Show a placeholder for removed messages", "Show a placeholder for removed messages": "Show a placeholder for removed messages",

5
src/settings/Settings.js
View file

@ -187,6 +187,11 @@ export const SETTINGS = {
supportedLevels: LEVELS_ACCOUNT_SETTINGS, supportedLevels: LEVELS_ACCOUNT_SETTINGS,
default: 24, default: 24,
}, },
"useCustomFontSize": {
displayName: _td("Custom font size"),
supportedLevels: LEVELS_ACCOUNT_SETTINGS,
default: false,
},
"MessageComposerInput.suggestEmoji": { "MessageComposerInput.suggestEmoji": {
supportedLevels: LEVELS_ACCOUNT_SETTINGS, supportedLevels: LEVELS_ACCOUNT_SETTINGS,
displayName: _td('Enable Emoji suggestions while typing'), displayName: _td('Enable Emoji suggestions while typing'),