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

Message preview for font slider

Browse source
This commit is contained in:
Jorik Schellekens 2020-06-16 15:41:10 +01:00
parent 94f52c4ee2
commit 17dbb1ac8b
5 changed files with 150 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -280,8 +280,15 @@ export default class AppearanceUserSettingsTab extends React.Component<IProps, I
private renderFontSection() {
const SettingsFlag = sdk.getComponent("views.elements.SettingsFlag");
const MessagePreview = sdk.getComponent("views.elements.MessagePreview");
return <div className="mx_SettingsTab_section mx_AppearanceUserSettingsTab_fontScaling">
<span className="mx_SettingsTab_subheading">{_t("Font size")}</span>
<MessagePreview
className="mx_AppearanceUserSettingsTab_fontSlider_preview"
message="Hey you. You're the best"
/>
<div className="mx_AppearanceUserSettingsTab_fontSlider">
<div className="mx_AppearanceUserSettingsTab_fontSlider_smallText">Aa</div>
<Slider
@ -293,12 +300,14 @@ export default class AppearanceUserSettingsTab extends React.Component<IProps, I
/>
<div className="mx_AppearanceUserSettingsTab_fontSlider_largeText">Aa</div>
</div>
<SettingsFlag
name="useCustomFontSize"
level={SettingLevel.ACCOUNT}
onChange={(checked) => this.setState({useCustomFontSize: checked})}
useCheckbox={true}
/>
<Field
type="number"
label={_t("Font size")}