From f841757906b8c9ef1ceea3423468d6a7ac0c9ed4 Mon Sep 17 00:00:00 2001 From: Manan Sadana Date: Fri, 22 Sep 2023 21:42:48 +0530 Subject: [PATCH] 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 Co-authored-by: Michael Telatynski <7t3chguy@gmail.com> --- src/components/views/settings/FontScalingPanel.tsx | 14 +++++++++++++- 1 file changed, 13 insertions(+), 1 deletion(-) diff --git a/src/components/views/settings/FontScalingPanel.tsx b/src/components/views/settings/FontScalingPanel.tsx index f9c20f0aef..f5afa8b834 100644 --- a/src/components/views/settings/FontScalingPanel.tsx +++ b/src/components/views/settings/FontScalingPanel.tsx @@ -47,7 +47,7 @@ interface IState { export default class FontScalingPanel extends React.Component { private readonly MESSAGE_PREVIEW_TEXT = _t("common|preview_message"); - + private layoutWatcherRef?: string; private unmounted = false; public constructor(props: IProps) { @@ -65,6 +65,15 @@ export default class FontScalingPanel extends React.Component { const client = MatrixClientPeg.safeGet(); const userId = client.getSafeUserId(); 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; this.setState({ @@ -76,6 +85,9 @@ export default class FontScalingPanel extends React.Component { public componentWillUnmount(): void { this.unmounted = true; + if (this.layoutWatcherRef) { + SettingsStore.unwatchSetting(this.layoutWatcherRef); + } } private onFontSizeChanged = (size: number): void => {