enable useCompactLayout user setting an add a class when it's enabled

Signed-off-by: Hubert Chathi <hubert@uhoreg.ca>

src/components/structures/LoggedInView.js

@@ -18,6 +18,7 @@ limitations under the License.
 import * as Matrix from 'matrix-js-sdk';
 import React from 'react';
 
+import UserSettingsStore from '../../UserSettingsStore';
 import KeyCode from '../../KeyCode';
 import Notifier from '../../Notifier';
 import PageTypes from '../../PageTypes';
@@ -63,6 +64,13 @@ export default React.createClass({
         };
     },
 
+    getInitialState: function() {
+        return {
+            // use compact timeline view
+            useCompactLayout: UserSettingsStore.getSyncedSetting('useCompactLayout'),
+        };
+    },
+
     componentWillMount: function() {
         // stash the MatrixClient in case we log out before we are unmounted
         this._matrixClient = this.props.matrixClient;
@@ -72,10 +80,12 @@ export default React.createClass({
         this._scrollStateMap = {};
 
         document.addEventListener('keydown', this._onKeyDown);
+        this._matrixClient.on("accountData", this.onAccountData);
     },
 
     componentWillUnmount: function() {
         document.removeEventListener('keydown', this._onKeyDown);
+        this._matrixClient.removeListener("accountData", this.onAccountData);
     },
 
     getScrollStateForRoom: function(roomId) {
@@ -89,6 +99,14 @@ export default React.createClass({
         return this.refs.roomView.canResetTimeline();
     },
 
+    onAccountData: function(event) {
+        if (event.getType() === "im.vector.web.settings") {
+            this.setState({
+                useCompactLayout: event.getContent().useCompactLayout
+            });
+        }
+    },
+
     _onKeyDown: function(ev) {
             /*
             // Remove this for now as ctrl+alt = alt-gr so this breaks keyboards which rely on alt-gr for numbers
@@ -245,6 +263,9 @@ export default React.createClass({
         if (topBar) {
             bodyClasses += ' mx_MatrixChat_toolbarShowing';
         }
+        if (this.state.useCompactLayout) {
+            bodyClasses += ' mx_MatrixChat_useCompactLayout';
+        }
 
         return (
             <div className='mx_MatrixChat_wrapper'>