mirror of https://github.com/vector-im/riot-web
				
				
				
			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/28788/head^2
							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