Message layout will update according to the selected style (#10170)
* message_layout_preview_update * using_settings_watcher * Update FontScalingPanel.tsx * Marked the class property as optional * Optional variable was still giving error. * Fix: typescript fail for layoutWatcherRef * Fix: using value from SettingStore * Update src/components/views/settings/FontScalingPanel.tsx Co-authored-by: Michael Telatynski <7t3chguy@gmail.com> * Fix: Prettier formatting added for ESList checks --------- Co-authored-by: Manan Sadana <manan.sadana@cnhteam.onmicrosoft.com> Co-authored-by: Michael Telatynski <7t3chguy@gmail.com>pull/28217/head
parent
f4d056fd38
commit
f841757906
|
@ -47,7 +47,7 @@ interface IState {
|
||||||
|
|
||||||
export default class FontScalingPanel extends React.Component<IProps, IState> {
|
export default class FontScalingPanel extends React.Component<IProps, IState> {
|
||||||
private readonly MESSAGE_PREVIEW_TEXT = _t("common|preview_message");
|
private readonly MESSAGE_PREVIEW_TEXT = _t("common|preview_message");
|
||||||
|
private layoutWatcherRef?: string;
|
||||||
private unmounted = false;
|
private unmounted = false;
|
||||||
|
|
||||||
public constructor(props: IProps) {
|
public constructor(props: IProps) {
|
||||||
|
@ -65,6 +65,15 @@ export default class FontScalingPanel extends React.Component<IProps, IState> {
|
||||||
const client = MatrixClientPeg.safeGet();
|
const client = MatrixClientPeg.safeGet();
|
||||||
const userId = client.getSafeUserId();
|
const userId = client.getSafeUserId();
|
||||||
const profileInfo = await client.getProfileInfo(userId);
|
const profileInfo = await client.getProfileInfo(userId);
|
||||||
|
this.layoutWatcherRef = SettingsStore.watchSetting("layout", null, () => {
|
||||||
|
// Update the layout for the preview window according to the user selection
|
||||||
|
const value = SettingsStore.getValue("layout");
|
||||||
|
if (this.state.layout !== value) {
|
||||||
|
this.setState({
|
||||||
|
layout: value,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
if (this.unmounted) return;
|
if (this.unmounted) return;
|
||||||
|
|
||||||
this.setState({
|
this.setState({
|
||||||
|
@ -76,6 +85,9 @@ export default class FontScalingPanel extends React.Component<IProps, IState> {
|
||||||
|
|
||||||
public componentWillUnmount(): void {
|
public componentWillUnmount(): void {
|
||||||
this.unmounted = true;
|
this.unmounted = true;
|
||||||
|
if (this.layoutWatcherRef) {
|
||||||
|
SettingsStore.unwatchSetting(this.layoutWatcherRef);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
private onFontSizeChanged = (size: number): void => {
|
private onFontSizeChanged = (size: number): void => {
|
||||||
|
|
Loading…
Reference in New Issue