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
Manan Sadana 2023-09-22 21:42:48 +05:30 committed by GitHub
parent f4d056fd38
commit f841757906
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 13 additions and 1 deletions

View File

@ -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 => {