From 92d1a9a6ff0487b019cd3f63ddc30218522f3616 Mon Sep 17 00:00:00 2001
From: Hubert Chathi <hubert@muchlearning.org>
Date: Wed, 31 May 2017 22:00:30 -0400
Subject: [PATCH] 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 | 21 +++++++++++++++++++++
 src/components/structures/UserSettings.js |  2 +-
 src/i18n/strings/en_EN.json               |  1 +
 3 files changed, 23 insertions(+), 1 deletion(-)

diff --git a/src/components/structures/LoggedInView.js b/src/components/structures/LoggedInView.js
index 5f1aa0d32a..b9ef73dd42 100644
--- a/src/components/structures/LoggedInView.js
+++ b/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'>
diff --git a/src/components/structures/UserSettings.js b/src/components/structures/UserSettings.js
index 725139de64..c545a75d45 100644
--- a/src/components/structures/UserSettings.js
+++ b/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',
diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
index 4cf16b3d5d..a52082a236 100644
--- a/src/i18n/strings/en_EN.json
+++ b/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",