Apply changes to breadcrumbs setting live

pull/21833/head
Travis Ralston 2019-04-01 11:49:29 -06:00
parent 57d72b4deb
commit 842e19280d
4 changed files with 25 additions and 4 deletions

View File

@ -45,11 +45,22 @@ const LeftPanel = React.createClass({
getInitialState: function() { getInitialState: function() {
return { return {
searchFilter: '', searchFilter: '',
breadcrumbs: false,
}; };
}, },
componentWillMount: function() { componentWillMount: function() {
this.focusedElement = null; 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) { shouldComponentUpdate: function(nextProps, nextState) {
@ -73,6 +84,16 @@ const LeftPanel = React.createClass({
return false; 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) { _onFocus: function(ev) {
this.focusedElement = ev.target; this.focusedElement = ev.target;
}, },
@ -220,7 +241,7 @@ const LeftPanel = React.createClass({
collapsed={this.props.collapsed} />); collapsed={this.props.collapsed} />);
let breadcrumbs; let breadcrumbs;
if (SettingsStore.isFeatureEnabled("feature_room_breadcrumbs")) { if (this.state.breadcrumbs) {
breadcrumbs = (<RoomBreadcrumbs collapsed={this.props.collapsed} />); breadcrumbs = (<RoomBreadcrumbs collapsed={this.props.collapsed} />);
} }

View File

@ -288,7 +288,7 @@
"Failed to join room": "Failed to join room", "Failed to join room": "Failed to join room",
"Message Pinning": "Message Pinning", "Message Pinning": "Message Pinning",
"Custom user status messages": "Custom user status messages", "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)", "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", "Render simple counters in room header": "Render simple counters in room header",
"Enable Emoji suggestions while typing": "Enable Emoji suggestions while typing", "Enable Emoji suggestions while typing": "Enable Emoji suggestions while typing",

View File

@ -102,7 +102,7 @@ export const SETTINGS = {
}, },
"feature_room_breadcrumbs": { "feature_room_breadcrumbs": {
isFeature: true, 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, supportedLevels: LEVELS_FEATURE,
default: false, default: false,
}, },

View File

@ -127,6 +127,6 @@ export default class DeviceSettingsHandler extends SettingsHandler {
_writeFeature(featureName, enabled) { _writeFeature(featureName, enabled) {
localStorage.setItem("mx_labs_feature_" + featureName, enabled); localStorage.setItem("mx_labs_feature_" + featureName, enabled);
this._watchers.notifyUpdate(featureName, null, enabled); this._watchers.notifyUpdate(featureName, null, SettingLevel.DEVICE, enabled);
} }
} }