From 2f8f2ce76ebed7c33775d0c4a69f284349ff03cd Mon Sep 17 00:00:00 2001
From: Luke Barnard <lukeb@openmarket.com>
Date: Wed, 25 Oct 2017 11:09:48 +0100
Subject: [PATCH] Swap from `ui_opacity` to `panel_disabled`
to simplify the process of disabling panels in the UI.
---
src/components/structures/FilePanel.js | 2 +-
src/components/structures/GroupView.js | 8 ++---
src/components/structures/LoggedInView.js | 16 +++++----
src/components/structures/MatrixChat.js | 15 ++++----
src/components/structures/MessagePanel.js | 17 +++++----
src/components/structures/RoomView.js | 36 ++++++++++++++------
src/components/structures/TimelinePanel.js | 6 ++--
src/components/structures/UserSettings.js | 12 +++----
src/components/views/rooms/ForwardMessage.js | 13 ++++---
src/components/views/rooms/RoomSettings.js | 12 +++----
10 files changed, 77 insertions(+), 60 deletions(-)
diff --git a/src/components/structures/FilePanel.js b/src/components/structures/FilePanel.js
index 6696f3cc0f..595e27585b 100644
--- a/src/components/structures/FilePanel.js
+++ b/src/components/structures/FilePanel.js
@@ -116,7 +116,7 @@ const FilePanel = React.createClass({
timelineSet={this.state.timelineSet}
showUrlPreview = {false}
tileShape="file_grid"
- opacity={this.props.opacity}
+ disabled={this.props.disabled}
empty={_t('There are no visible files in this room')}
/>
);
diff --git a/src/components/structures/GroupView.js b/src/components/structures/GroupView.js
index 52680ea5fa..859397e91d 100644
--- a/src/components/structures/GroupView.js
+++ b/src/components/structures/GroupView.js
@@ -482,8 +482,8 @@ export default React.createClass({
profileForm: Object.assign({}, this.state.summary.profile),
});
dis.dispatch({
- action: 'ui_opacity',
- sideOpacity: 0.3,
+ action: 'panel_disable',
+ sideDisabled: true,
});
},
@@ -492,7 +492,7 @@ export default React.createClass({
editing: false,
profileForm: null,
});
- dis.dispatch({action: 'ui_opacity'});
+ dis.dispatch({action: 'panel_disable'});
},
_onNameChange: function(value) {
@@ -549,7 +549,7 @@ export default React.createClass({
editing: false,
summary: null,
});
- dis.dispatch({action: 'ui_opacity'});
+ dis.dispatch({action: 'panel_disable'});
this._initGroupStore(this.props.groupId);
}).catch((e) => {
this.setState({
diff --git a/src/components/structures/LoggedInView.js b/src/components/structures/LoggedInView.js
index 7e6fc05599..5d1d47c5b2 100644
--- a/src/components/structures/LoggedInView.js
+++ b/src/components/structures/LoggedInView.js
@@ -240,11 +240,13 @@ export default React.createClass({
oobData={this.props.roomOobData}
eventPixelOffset={this.props.initialEventPixelOffset}
key={this.props.currentRoomId || 'roomview'}
- opacity={this.props.middleOpacity}
+ disabled={this.props.middleDisabled}
collapsedRhs={this.props.collapseRhs}
ConferenceHandler={this.props.ConferenceHandler}
/>;
- if (!this.props.collapseRhs) right_panel = <RightPanel roomId={this.props.currentRoomId} opacity={this.props.rightOpacity} />;
+ if (!this.props.collapseRhs) {
+ right_panel = <RightPanel roomId={this.props.currentRoomId} disabled={this.props.rightDisabled} />;
+ }
break;
case PageTypes.UserSettings:
@@ -254,7 +256,7 @@ export default React.createClass({
referralBaseUrl={this.props.config.referralBaseUrl}
teamToken={this.props.teamToken}
/>;
- if (!this.props.collapseRhs) right_panel = <RightPanel opacity={this.props.rightOpacity} />;
+ if (!this.props.collapseRhs) right_panel = <RightPanel disabled={this.props.rightDisabled} />;
break;
case PageTypes.MyGroups:
@@ -266,7 +268,7 @@ export default React.createClass({
onRoomCreated={this.props.onRoomCreated}
collapsedRhs={this.props.collapseRhs}
/>;
- if (!this.props.collapseRhs) right_panel = <RightPanel opacity={this.props.rightOpacity} />;
+ if (!this.props.collapseRhs) right_panel = <RightPanel disabled={this.props.rightDisabled} />;
break;
case PageTypes.RoomDirectory:
@@ -294,14 +296,14 @@ export default React.createClass({
case PageTypes.UserView:
page_element = null; // deliberately null for now
- right_panel = <RightPanel opacity={this.props.rightOpacity} />;
+ right_panel = <RightPanel disabled={this.props.rightDisabled} />;
break;
case PageTypes.GroupView:
page_element = <GroupView
groupId={this.props.currentGroupId}
collapsedRhs={this.props.collapseRhs}
/>;
- if (!this.props.collapseRhs) right_panel = <RightPanel groupId={this.props.currentGroupId} opacity={this.props.rightOpacity} />;
+ if (!this.props.collapseRhs) right_panel = <RightPanel groupId={this.props.currentGroupId} disabled={this.props.rightDisabled} />;
break;
}
@@ -334,7 +336,7 @@ export default React.createClass({
<LeftPanel
selectedRoom={this.props.currentRoomId}
collapsed={this.props.collapseLhs || false}
- opacity={this.props.leftOpacity}
+ disabled={this.props.leftDisabled}
/>
<main className='mx_MatrixChat_middlePanel'>
{ page_element }
diff --git a/src/components/structures/MatrixChat.js b/src/components/structures/MatrixChat.js
index 3fa628b8a3..e679276a08 100644
--- a/src/components/structures/MatrixChat.js
+++ b/src/components/structures/MatrixChat.js
@@ -145,9 +145,9 @@ module.exports = React.createClass({
collapseLhs: false,
collapseRhs: false,
- leftOpacity: 1.0,
- middleOpacity: 1.0,
- rightOpacity: 1.0,
+ leftDisabled: false,
+ middleDisabled: false,
+ rightDisabled: false,
version: null,
newVersion: null,
@@ -534,12 +534,11 @@ module.exports = React.createClass({
collapseRhs: false,
});
break;
- case 'ui_opacity': {
- const sideDefault = payload.sideOpacity >= 0.0 ? payload.sideOpacity : 1.0;
+ case 'panel_disable': {
this.setState({
- leftOpacity: payload.leftOpacity >= 0.0 ? payload.leftOpacity : sideDefault,
- middleOpacity: payload.middleOpacity || 1.0,
- rightOpacity: payload.rightOpacity >= 0.0 ? payload.rightOpacity : sideDefault,
+ leftDisabled: payload.leftDisabled || payload.sideDisabled || false,
+ middleDisabled: payload.middleDisabled || false,
+ rightDisabled: payload.rightDisabled || payload.sideDisabled || false,
});
break; }
case 'set_theme':
diff --git a/src/components/structures/MessagePanel.js b/src/components/structures/MessagePanel.js
index 5ce36b4b82..6e9e6aff7c 100644
--- a/src/components/structures/MessagePanel.js
+++ b/src/components/structures/MessagePanel.js
@@ -16,6 +16,7 @@ limitations under the License.
import React from 'react';
import ReactDOM from 'react-dom';
+import classNames from 'classnames';
import UserSettingsStore from '../../UserSettingsStore';
import shouldHideEvent from '../../shouldHideEvent';
import dis from "../../dispatcher";
@@ -78,8 +79,8 @@ module.exports = React.createClass({
// callback which is called when more content is needed.
onFillRequest: React.PropTypes.func,
- // opacity for dynamic UI fading effects
- opacity: React.PropTypes.number,
+ // whether to display as faded and uninteractable
+ disabled: React.PropTypes.bool,
// className for the panel
className: React.PropTypes.string.isRequired,
@@ -649,12 +650,14 @@ module.exports = React.createClass({
}
const style = this.props.hidden ? { display: 'none' } : {};
- style.opacity = this.props.opacity;
- let className = this.props.className + " mx_fadable";
- if (this.props.alwaysShowTimestamps) {
- className += " mx_MessagePanel_alwaysShowTimestamps";
- }
+ const className = classNames(
+ this.props.className, "mx_fadable",
+ {
+ "mx_MessagePanel_alwaysShowTimestamps": this.props.alwaysShowTimestamps,
+ "mx_fadable_faded": this.props.disabled,
+ },
+ );
return (
<ScrollPanel ref="scrollPanel" className={className}
diff --git a/src/components/structures/RoomView.js b/src/components/structures/RoomView.js
index 83ca987276..19f79ff50e 100644
--- a/src/components/structures/RoomView.js
+++ b/src/components/structures/RoomView.js
@@ -281,7 +281,7 @@ module.exports = React.createClass({
this.setState({
isPeeking: false,
});
-
+
// This won't necessarily be a MatrixError, but we duck-type
// here and say if it's got an 'errcode' key with the right value,
// it means we can't peek.
@@ -1697,7 +1697,7 @@ module.exports = React.createClass({
onResize={this.onChildResize}
uploadFile={this.uploadFile}
callState={this.state.callState}
- opacity={this.props.opacity}
+ disabled={this.props.disabled}
showApps={this.state.showApps}
/>;
}
@@ -1753,12 +1753,17 @@ module.exports = React.createClass({
let hideMessagePanel = false;
if (this.state.searchResults) {
+ const searchResultsClasses = classNames(
+ "mx_RoomView_messagePanel", "mx_RoomView_searchResultsPanel", "mx_fadable",
+ {
+ "mx_fadable_faded": this.props.disabled,
+ },
+ );
searchResultsPanel = (
<ScrollPanel ref="searchResultsPanel"
- className="mx_RoomView_messagePanel mx_RoomView_searchResultsPanel"
+ className={searchResultsClasses}
onFillRequest={this.onSearchResultsFillRequest}
onResize={this.onSearchResultsResize}
- style={{ opacity: this.props.opacity }}
>
<li className={scrollheader_classes}></li>
{ this.getSearchResultTiles() }
@@ -1789,15 +1794,21 @@ module.exports = React.createClass({
onScroll={this.onMessageListScroll}
onReadMarkerUpdated={this._updateTopUnreadMessagesBar}
showUrlPreview = {this.state.showUrlPreview}
- opacity={this.props.opacity}
+ disabled={this.props.disabled}
className="mx_RoomView_messagePanel"
/>);
let topUnreadMessagesBar = null;
if (this.state.showTopUnreadMessagesBar) {
const TopUnreadMessagesBar = sdk.getComponent('rooms.TopUnreadMessagesBar');
+ const topUnreadMessagesBarClasses = classNames(
+ "mx_RoomView_topUnreadMessagesBar", "mx_fadable",
+ {
+ "mx_fadable_faded": this.props.disabled,
+ },
+ );
topUnreadMessagesBar = (
- <div className="mx_RoomView_topUnreadMessagesBar mx_fadable" style={{ opacity: this.props.opacity }}>
+ <div className={topUnreadMessagesBarClasses}>
<TopUnreadMessagesBar
onScrollUpClick={this.jumpToReadMarker}
onCloseClick={this.forgetReadMarker}
@@ -1805,10 +1816,13 @@ module.exports = React.createClass({
</div>
);
}
- let statusBarAreaClass = "mx_RoomView_statusArea mx_fadable";
- if (isStatusAreaExpanded) {
- statusBarAreaClass += " mx_RoomView_statusArea_expanded";
- }
+ const statusBarAreaClass = classNames(
+ "mx_RoomView_statusArea", "mx_fadable",
+ {
+ "mx_RoomView_statusArea_expanded": isStatusAreaExpanded,
+ "mx_fadable_faded": this.props.disabled,
+ },
+ );
return (
<div className={"mx_RoomView" + (inCall ? " mx_RoomView_inCall" : "")} ref="roomView">
@@ -1830,7 +1844,7 @@ module.exports = React.createClass({
{ topUnreadMessagesBar }
{ messagePanel }
{ searchResultsPanel }
- <div className={statusBarAreaClass} style={{opacity: this.props.opacity}}>
+ <div className={statusBarAreaClass}>
<div className="mx_RoomView_statusAreaBox">
<div className="mx_RoomView_statusAreaBox_line"></div>
{ statusBar }
diff --git a/src/components/structures/TimelinePanel.js b/src/components/structures/TimelinePanel.js
index e3b3b66f97..a6c1fcde6c 100644
--- a/src/components/structures/TimelinePanel.js
+++ b/src/components/structures/TimelinePanel.js
@@ -89,8 +89,8 @@ var TimelinePanel = React.createClass({
// callback which is called when the read-up-to mark is updated.
onReadMarkerUpdated: React.PropTypes.func,
- // opacity for dynamic UI fading effects
- opacity: React.PropTypes.number,
+ // whether to display as faded and uninteractable
+ disabled: React.PropTypes.bool,
// maximum number of events to show in a timeline
timelineCap: React.PropTypes.number,
@@ -1157,7 +1157,7 @@ var TimelinePanel = React.createClass({
onScroll={this.onMessageListScroll}
onFillRequest={this.onMessageListFillRequest}
onUnfillRequest={this.onMessageListUnfillRequest}
- opacity={this.props.opacity}
+ disabled={this.props.disabled}
isTwelveHour={this.state.isTwelveHour}
alwaysShowTimestamps={this.state.alwaysShowTimestamps}
className={this.props.className}
diff --git a/src/components/structures/UserSettings.js b/src/components/structures/UserSettings.js
index b69bea9282..7704cce0c7 100644
--- a/src/components/structures/UserSettings.js
+++ b/src/components/structures/UserSettings.js
@@ -271,9 +271,9 @@ module.exports = React.createClass({
MatrixClientPeg.get().on("RoomMember.membership", this._onInviteStateChange);
dis.dispatch({
- action: 'ui_opacity',
- sideOpacity: 0.3,
- middleOpacity: 0.3,
+ action: 'panel_disable',
+ sideDisabled: true,
+ middleDisabled: true,
});
this._refreshFromServer();
@@ -311,9 +311,9 @@ module.exports = React.createClass({
componentWillUnmount: function() {
this._unmounted = true;
dis.dispatch({
- action: 'ui_opacity',
- sideOpacity: 1.0,
- middleOpacity: 1.0,
+ action: 'panel_disable',
+ sideDisabled: false,
+ middleDisabled: false,
});
dis.unregister(this.dispatcherRef);
const cli = MatrixClientPeg.get();
diff --git a/src/components/views/rooms/ForwardMessage.js b/src/components/views/rooms/ForwardMessage.js
index 67e55101e8..b0fba12865 100644
--- a/src/components/views/rooms/ForwardMessage.js
+++ b/src/components/views/rooms/ForwardMessage.js
@@ -30,10 +30,9 @@ module.exports = React.createClass({
componentWillMount: function() {
dis.dispatch({
- action: 'ui_opacity',
- leftOpacity: 1.0,
- rightOpacity: 0.3,
- middleOpacity: 0.5,
+ action: 'panel_disable',
+ rightDisabled: true,
+ middleDisabled: true,
});
},
@@ -43,9 +42,9 @@ module.exports = React.createClass({
componentWillUnmount: function() {
dis.dispatch({
- action: 'ui_opacity',
- sideOpacity: 1.0,
- middleOpacity: 1.0,
+ action: 'panel_disable',
+ sideDisabled: false,
+ middleDisabled: false,
});
document.removeEventListener('keydown', this._onKeyDown);
},
diff --git a/src/components/views/rooms/RoomSettings.js b/src/components/views/rooms/RoomSettings.js
index 9934456597..f37e38c55e 100644
--- a/src/components/views/rooms/RoomSettings.js
+++ b/src/components/views/rooms/RoomSettings.js
@@ -158,9 +158,9 @@ module.exports = React.createClass({
});
dis.dispatch({
- action: 'ui_opacity',
- sideOpacity: 0.3,
- middleOpacity: 0.3,
+ action: 'panel_disable',
+ sideDisabled: true,
+ middleDisabled: true,
});
},
@@ -171,9 +171,9 @@ module.exports = React.createClass({
}
dis.dispatch({
- action: 'ui_opacity',
- sideOpacity: 1.0,
- middleOpacity: 1.0,
+ action: 'panel_disable',
+ sideDisabled: false,
+ middleDisabled: false,
});
},