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'>

src/components/structures/UserSettings.js

@@ -79,11 +79,11 @@ const SETTINGS_LABELS = [
         id: 'showTwelveHourTimestamps',
         label: 'Show timestamps in 12 hour format (e.g. 2:30pm)',
     },
-/*
     {
         id: 'useCompactLayout',
         label: 'Use compact timeline layout',
     },
+/*
     {
         id: 'useFixedWidthFont',
         label: 'Use fixed width font',

src/i18n/strings/en_EN.json

@@ -517,6 +517,7 @@
   "Upload Files": "Upload Files",
   "Upload file": "Upload file",
   "Usage": "Usage",
+  "Use compact timeline layout": "Use compact timeline layout",
   "Use with caution": "Use with caution",
   "User ID": "User ID",
   "User Interface": "User Interface",