diff --git a/src/components/structures/LeftPanel.js b/src/components/structures/LeftPanel.js index 95b57a0ca5..88b6a13a5d 100644 --- a/src/components/structures/LeftPanel.js +++ b/src/components/structures/LeftPanel.js @@ -45,11 +45,22 @@ const LeftPanel = React.createClass({ getInitialState: function() { return { searchFilter: '', + breadcrumbs: false, }; }, componentWillMount: function() { this.focusedElement = null; + + this._settingWatchRef = SettingsStore.watchSetting( + "feature_room_breadcrumbs", null, + this._onBreadcrumbsChanged); + + this.setState({breadcrumbs: SettingsStore.isFeatureEnabled("feature_room_breadcrumbs")}); + }, + + componentWillUnmount: function() { + SettingsStore.unwatchSetting(this._settingWatchRef); }, shouldComponentUpdate: function(nextProps, nextState) { @@ -73,6 +84,16 @@ const LeftPanel = React.createClass({ return false; }, + _onBreadcrumbsChanged: function(settingName, roomId, level, valueAtLevel, value) { + // Features are only possible at a single level, so we can get away with using valueAtLevel. + // The SettingsStore runs on the same tick as the update, so `value` will be wrong. + this.setState({breadcrumbs: valueAtLevel}); + + // For some reason the setState doesn't trigger a render of the component, so force one. + // Probably has to do with the change happening outside of a change detector cycle. + this.forceUpdate(); + }, + _onFocus: function(ev) { this.focusedElement = ev.target; }, @@ -220,7 +241,7 @@ const LeftPanel = React.createClass({ collapsed={this.props.collapsed} />); let breadcrumbs; - if (SettingsStore.isFeatureEnabled("feature_room_breadcrumbs")) { + if (this.state.breadcrumbs) { breadcrumbs = (); } diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json index 5b95c7ffe3..358f78b75f 100644 --- a/src/i18n/strings/en_EN.json +++ b/src/i18n/strings/en_EN.json @@ -288,7 +288,7 @@ "Failed to join room": "Failed to join room", "Message Pinning": "Message Pinning", "Custom user status messages": "Custom user status messages", - "Show recent room avatars above the room list (refresh to apply changes)": "Show recent room avatars above the room list (refresh to apply changes)", + "Show recent room avatars above the room list": "Show recent room avatars above the room list", "Group & filter rooms by custom tags (refresh to apply changes)": "Group & filter rooms by custom tags (refresh to apply changes)", "Render simple counters in room header": "Render simple counters in room header", "Enable Emoji suggestions while typing": "Enable Emoji suggestions while typing", diff --git a/src/settings/Settings.js b/src/settings/Settings.js index 6e17ffbbd7..71a81ae4db 100644 --- a/src/settings/Settings.js +++ b/src/settings/Settings.js @@ -102,7 +102,7 @@ export const SETTINGS = { }, "feature_room_breadcrumbs": { isFeature: true, - displayName: _td("Show recent room avatars above the room list (refresh to apply changes)"), + displayName: _td("Show recent room avatars above the room list"), supportedLevels: LEVELS_FEATURE, default: false, }, diff --git a/src/settings/handlers/DeviceSettingsHandler.js b/src/settings/handlers/DeviceSettingsHandler.js index bca7679a47..b5c4382768 100644 --- a/src/settings/handlers/DeviceSettingsHandler.js +++ b/src/settings/handlers/DeviceSettingsHandler.js @@ -127,6 +127,6 @@ export default class DeviceSettingsHandler extends SettingsHandler { _writeFeature(featureName, enabled) { localStorage.setItem("mx_labs_feature_" + featureName, enabled); - this._watchers.notifyUpdate(featureName, null, enabled); + this._watchers.notifyUpdate(featureName, null, SettingLevel.DEVICE, enabled); } }