Merge pull request #1535 from matrix-org/luke/fix-interactable-greyed-ui
Swap from `ui_opacity` to `panel_disabled`
This commit is contained in:
commit
39fa866d68
12 changed files with 72 additions and 73 deletions
|
@ -116,7 +116,6 @@ const FilePanel = React.createClass({
|
||||||
timelineSet={this.state.timelineSet}
|
timelineSet={this.state.timelineSet}
|
||||||
showUrlPreview = {false}
|
showUrlPreview = {false}
|
||||||
tileShape="file_grid"
|
tileShape="file_grid"
|
||||||
opacity={this.props.opacity}
|
|
||||||
empty={_t('There are no visible files in this room')}
|
empty={_t('There are no visible files in this room')}
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
|
|
|
@ -482,8 +482,8 @@ export default React.createClass({
|
||||||
profileForm: Object.assign({}, this.state.summary.profile),
|
profileForm: Object.assign({}, this.state.summary.profile),
|
||||||
});
|
});
|
||||||
dis.dispatch({
|
dis.dispatch({
|
||||||
action: 'ui_opacity',
|
action: 'panel_disable',
|
||||||
sideOpacity: 0.3,
|
sideDisabled: true,
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
|
|
||||||
|
@ -492,7 +492,7 @@ export default React.createClass({
|
||||||
editing: false,
|
editing: false,
|
||||||
profileForm: null,
|
profileForm: null,
|
||||||
});
|
});
|
||||||
dis.dispatch({action: 'ui_opacity'});
|
dis.dispatch({action: 'panel_disable'});
|
||||||
},
|
},
|
||||||
|
|
||||||
_onNameChange: function(value) {
|
_onNameChange: function(value) {
|
||||||
|
@ -549,7 +549,7 @@ export default React.createClass({
|
||||||
editing: false,
|
editing: false,
|
||||||
summary: null,
|
summary: null,
|
||||||
});
|
});
|
||||||
dis.dispatch({action: 'ui_opacity'});
|
dis.dispatch({action: 'panel_disable'});
|
||||||
this._initGroupStore(this.props.groupId);
|
this._initGroupStore(this.props.groupId);
|
||||||
}).catch((e) => {
|
}).catch((e) => {
|
||||||
this.setState({
|
this.setState({
|
||||||
|
|
|
@ -240,11 +240,13 @@ export default React.createClass({
|
||||||
oobData={this.props.roomOobData}
|
oobData={this.props.roomOobData}
|
||||||
eventPixelOffset={this.props.initialEventPixelOffset}
|
eventPixelOffset={this.props.initialEventPixelOffset}
|
||||||
key={this.props.currentRoomId || 'roomview'}
|
key={this.props.currentRoomId || 'roomview'}
|
||||||
opacity={this.props.middleOpacity}
|
disabled={this.props.middleDisabled}
|
||||||
collapsedRhs={this.props.collapseRhs}
|
collapsedRhs={this.props.collapseRhs}
|
||||||
ConferenceHandler={this.props.ConferenceHandler}
|
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;
|
break;
|
||||||
|
|
||||||
case PageTypes.UserSettings:
|
case PageTypes.UserSettings:
|
||||||
|
@ -254,7 +256,7 @@ export default React.createClass({
|
||||||
referralBaseUrl={this.props.config.referralBaseUrl}
|
referralBaseUrl={this.props.config.referralBaseUrl}
|
||||||
teamToken={this.props.teamToken}
|
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;
|
break;
|
||||||
|
|
||||||
case PageTypes.MyGroups:
|
case PageTypes.MyGroups:
|
||||||
|
@ -266,7 +268,7 @@ export default React.createClass({
|
||||||
onRoomCreated={this.props.onRoomCreated}
|
onRoomCreated={this.props.onRoomCreated}
|
||||||
collapsedRhs={this.props.collapseRhs}
|
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;
|
break;
|
||||||
|
|
||||||
case PageTypes.RoomDirectory:
|
case PageTypes.RoomDirectory:
|
||||||
|
@ -294,14 +296,14 @@ export default React.createClass({
|
||||||
|
|
||||||
case PageTypes.UserView:
|
case PageTypes.UserView:
|
||||||
page_element = null; // deliberately null for now
|
page_element = null; // deliberately null for now
|
||||||
right_panel = <RightPanel opacity={this.props.rightOpacity} />;
|
right_panel = <RightPanel disabled={this.props.rightDisabled} />;
|
||||||
break;
|
break;
|
||||||
case PageTypes.GroupView:
|
case PageTypes.GroupView:
|
||||||
page_element = <GroupView
|
page_element = <GroupView
|
||||||
groupId={this.props.currentGroupId}
|
groupId={this.props.currentGroupId}
|
||||||
collapsedRhs={this.props.collapseRhs}
|
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;
|
break;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -334,7 +336,7 @@ export default React.createClass({
|
||||||
<LeftPanel
|
<LeftPanel
|
||||||
selectedRoom={this.props.currentRoomId}
|
selectedRoom={this.props.currentRoomId}
|
||||||
collapsed={this.props.collapseLhs || false}
|
collapsed={this.props.collapseLhs || false}
|
||||||
opacity={this.props.leftOpacity}
|
disabled={this.props.leftDisabled}
|
||||||
/>
|
/>
|
||||||
<main className='mx_MatrixChat_middlePanel'>
|
<main className='mx_MatrixChat_middlePanel'>
|
||||||
{ page_element }
|
{ page_element }
|
||||||
|
|
|
@ -145,9 +145,9 @@ module.exports = React.createClass({
|
||||||
|
|
||||||
collapseLhs: false,
|
collapseLhs: false,
|
||||||
collapseRhs: false,
|
collapseRhs: false,
|
||||||
leftOpacity: 1.0,
|
leftDisabled: false,
|
||||||
middleOpacity: 1.0,
|
middleDisabled: false,
|
||||||
rightOpacity: 1.0,
|
rightDisabled: false,
|
||||||
|
|
||||||
version: null,
|
version: null,
|
||||||
newVersion: null,
|
newVersion: null,
|
||||||
|
@ -534,12 +534,11 @@ module.exports = React.createClass({
|
||||||
collapseRhs: false,
|
collapseRhs: false,
|
||||||
});
|
});
|
||||||
break;
|
break;
|
||||||
case 'ui_opacity': {
|
case 'panel_disable': {
|
||||||
const sideDefault = payload.sideOpacity >= 0.0 ? payload.sideOpacity : 1.0;
|
|
||||||
this.setState({
|
this.setState({
|
||||||
leftOpacity: payload.leftOpacity >= 0.0 ? payload.leftOpacity : sideDefault,
|
leftDisabled: payload.leftDisabled || payload.sideDisabled || false,
|
||||||
middleOpacity: payload.middleOpacity || 1.0,
|
middleDisabled: payload.middleDisabled || false,
|
||||||
rightOpacity: payload.rightOpacity >= 0.0 ? payload.rightOpacity : sideDefault,
|
rightDisabled: payload.rightDisabled || payload.sideDisabled || false,
|
||||||
});
|
});
|
||||||
break; }
|
break; }
|
||||||
case 'set_theme':
|
case 'set_theme':
|
||||||
|
|
|
@ -16,6 +16,7 @@ limitations under the License.
|
||||||
|
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import ReactDOM from 'react-dom';
|
import ReactDOM from 'react-dom';
|
||||||
|
import classNames from 'classnames';
|
||||||
import UserSettingsStore from '../../UserSettingsStore';
|
import UserSettingsStore from '../../UserSettingsStore';
|
||||||
import shouldHideEvent from '../../shouldHideEvent';
|
import shouldHideEvent from '../../shouldHideEvent';
|
||||||
import dis from "../../dispatcher";
|
import dis from "../../dispatcher";
|
||||||
|
@ -78,9 +79,6 @@ module.exports = React.createClass({
|
||||||
// callback which is called when more content is needed.
|
// callback which is called when more content is needed.
|
||||||
onFillRequest: React.PropTypes.func,
|
onFillRequest: React.PropTypes.func,
|
||||||
|
|
||||||
// opacity for dynamic UI fading effects
|
|
||||||
opacity: React.PropTypes.number,
|
|
||||||
|
|
||||||
// className for the panel
|
// className for the panel
|
||||||
className: React.PropTypes.string.isRequired,
|
className: React.PropTypes.string.isRequired,
|
||||||
|
|
||||||
|
@ -648,12 +646,13 @@ module.exports = React.createClass({
|
||||||
}
|
}
|
||||||
|
|
||||||
const style = this.props.hidden ? { display: 'none' } : {};
|
const style = this.props.hidden ? { display: 'none' } : {};
|
||||||
style.opacity = this.props.opacity;
|
|
||||||
|
|
||||||
let className = this.props.className + " mx_fadable";
|
const className = classNames(
|
||||||
if (this.props.alwaysShowTimestamps) {
|
this.props.className,
|
||||||
className += " mx_MessagePanel_alwaysShowTimestamps";
|
{
|
||||||
}
|
"mx_MessagePanel_alwaysShowTimestamps": this.props.alwaysShowTimestamps,
|
||||||
|
},
|
||||||
|
);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<ScrollPanel ref="scrollPanel" className={className}
|
<ScrollPanel ref="scrollPanel" className={className}
|
||||||
|
|
|
@ -45,7 +45,6 @@ const NotificationPanel = React.createClass({
|
||||||
manageReadMarkers={false}
|
manageReadMarkers={false}
|
||||||
timelineSet={timelineSet}
|
timelineSet={timelineSet}
|
||||||
showUrlPreview = {false}
|
showUrlPreview = {false}
|
||||||
opacity={this.props.opacity}
|
|
||||||
tileShape="notif"
|
tileShape="notif"
|
||||||
empty={_t('You have no visible notifications')}
|
empty={_t('You have no visible notifications')}
|
||||||
/>
|
/>
|
||||||
|
|
|
@ -1697,7 +1697,7 @@ module.exports = React.createClass({
|
||||||
onResize={this.onChildResize}
|
onResize={this.onChildResize}
|
||||||
uploadFile={this.uploadFile}
|
uploadFile={this.uploadFile}
|
||||||
callState={this.state.callState}
|
callState={this.state.callState}
|
||||||
opacity={this.props.opacity}
|
disabled={this.props.disabled}
|
||||||
showApps={this.state.showApps}
|
showApps={this.state.showApps}
|
||||||
/>;
|
/>;
|
||||||
}
|
}
|
||||||
|
@ -1758,7 +1758,6 @@ module.exports = React.createClass({
|
||||||
className="mx_RoomView_messagePanel mx_RoomView_searchResultsPanel"
|
className="mx_RoomView_messagePanel mx_RoomView_searchResultsPanel"
|
||||||
onFillRequest={this.onSearchResultsFillRequest}
|
onFillRequest={this.onSearchResultsFillRequest}
|
||||||
onResize={this.onSearchResultsResize}
|
onResize={this.onSearchResultsResize}
|
||||||
style={{ opacity: this.props.opacity }}
|
|
||||||
>
|
>
|
||||||
<li className={scrollheader_classes}></li>
|
<li className={scrollheader_classes}></li>
|
||||||
{ this.getSearchResultTiles() }
|
{ this.getSearchResultTiles() }
|
||||||
|
@ -1789,7 +1788,6 @@ module.exports = React.createClass({
|
||||||
onScroll={this.onMessageListScroll}
|
onScroll={this.onMessageListScroll}
|
||||||
onReadMarkerUpdated={this._updateTopUnreadMessagesBar}
|
onReadMarkerUpdated={this._updateTopUnreadMessagesBar}
|
||||||
showUrlPreview = {this.state.showUrlPreview}
|
showUrlPreview = {this.state.showUrlPreview}
|
||||||
opacity={this.props.opacity}
|
|
||||||
className="mx_RoomView_messagePanel"
|
className="mx_RoomView_messagePanel"
|
||||||
/>);
|
/>);
|
||||||
|
|
||||||
|
@ -1797,7 +1795,7 @@ module.exports = React.createClass({
|
||||||
if (this.state.showTopUnreadMessagesBar) {
|
if (this.state.showTopUnreadMessagesBar) {
|
||||||
const TopUnreadMessagesBar = sdk.getComponent('rooms.TopUnreadMessagesBar');
|
const TopUnreadMessagesBar = sdk.getComponent('rooms.TopUnreadMessagesBar');
|
||||||
topUnreadMessagesBar = (
|
topUnreadMessagesBar = (
|
||||||
<div className="mx_RoomView_topUnreadMessagesBar mx_fadable" style={{ opacity: this.props.opacity }}>
|
<div className="mx_RoomView_topUnreadMessagesBar">
|
||||||
<TopUnreadMessagesBar
|
<TopUnreadMessagesBar
|
||||||
onScrollUpClick={this.jumpToReadMarker}
|
onScrollUpClick={this.jumpToReadMarker}
|
||||||
onCloseClick={this.forgetReadMarker}
|
onCloseClick={this.forgetReadMarker}
|
||||||
|
@ -1805,10 +1803,19 @@ module.exports = React.createClass({
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
let statusBarAreaClass = "mx_RoomView_statusArea mx_fadable";
|
const statusBarAreaClass = classNames(
|
||||||
if (isStatusAreaExpanded) {
|
"mx_RoomView_statusArea",
|
||||||
statusBarAreaClass += " mx_RoomView_statusArea_expanded";
|
{
|
||||||
}
|
"mx_RoomView_statusArea_expanded": isStatusAreaExpanded,
|
||||||
|
},
|
||||||
|
);
|
||||||
|
|
||||||
|
const fadableSectionClasses = classNames(
|
||||||
|
"mx_RoomView_body", "mx_fadable",
|
||||||
|
{
|
||||||
|
"mx_fadable_faded": this.props.disabled,
|
||||||
|
},
|
||||||
|
);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className={"mx_RoomView" + (inCall ? " mx_RoomView_inCall" : "")} ref="roomView">
|
<div className={"mx_RoomView" + (inCall ? " mx_RoomView_inCall" : "")} ref="roomView">
|
||||||
|
@ -1827,10 +1834,11 @@ module.exports = React.createClass({
|
||||||
onLeaveClick={(myMember && myMember.membership === "join") ? this.onLeaveClick : null}
|
onLeaveClick={(myMember && myMember.membership === "join") ? this.onLeaveClick : null}
|
||||||
/>
|
/>
|
||||||
{ auxPanel }
|
{ auxPanel }
|
||||||
|
<div className={fadableSectionClasses}>
|
||||||
{ topUnreadMessagesBar }
|
{ topUnreadMessagesBar }
|
||||||
{ messagePanel }
|
{ messagePanel }
|
||||||
{ searchResultsPanel }
|
{ searchResultsPanel }
|
||||||
<div className={statusBarAreaClass} style={{opacity: this.props.opacity}}>
|
<div className={statusBarAreaClass}>
|
||||||
<div className="mx_RoomView_statusAreaBox">
|
<div className="mx_RoomView_statusAreaBox">
|
||||||
<div className="mx_RoomView_statusAreaBox_line"></div>
|
<div className="mx_RoomView_statusAreaBox_line"></div>
|
||||||
{ statusBar }
|
{ statusBar }
|
||||||
|
@ -1838,6 +1846,7 @@ module.exports = React.createClass({
|
||||||
</div>
|
</div>
|
||||||
{ messageComposer }
|
{ messageComposer }
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
);
|
);
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
|
@ -89,9 +89,6 @@ var TimelinePanel = React.createClass({
|
||||||
// callback which is called when the read-up-to mark is updated.
|
// callback which is called when the read-up-to mark is updated.
|
||||||
onReadMarkerUpdated: React.PropTypes.func,
|
onReadMarkerUpdated: React.PropTypes.func,
|
||||||
|
|
||||||
// opacity for dynamic UI fading effects
|
|
||||||
opacity: React.PropTypes.number,
|
|
||||||
|
|
||||||
// maximum number of events to show in a timeline
|
// maximum number of events to show in a timeline
|
||||||
timelineCap: React.PropTypes.number,
|
timelineCap: React.PropTypes.number,
|
||||||
|
|
||||||
|
@ -1157,7 +1154,6 @@ var TimelinePanel = React.createClass({
|
||||||
onScroll={this.onMessageListScroll}
|
onScroll={this.onMessageListScroll}
|
||||||
onFillRequest={this.onMessageListFillRequest}
|
onFillRequest={this.onMessageListFillRequest}
|
||||||
onUnfillRequest={this.onMessageListUnfillRequest}
|
onUnfillRequest={this.onMessageListUnfillRequest}
|
||||||
opacity={this.props.opacity}
|
|
||||||
isTwelveHour={this.state.isTwelveHour}
|
isTwelveHour={this.state.isTwelveHour}
|
||||||
alwaysShowTimestamps={this.state.alwaysShowTimestamps}
|
alwaysShowTimestamps={this.state.alwaysShowTimestamps}
|
||||||
className={this.props.className}
|
className={this.props.className}
|
||||||
|
|
|
@ -271,9 +271,9 @@ module.exports = React.createClass({
|
||||||
MatrixClientPeg.get().on("RoomMember.membership", this._onInviteStateChange);
|
MatrixClientPeg.get().on("RoomMember.membership", this._onInviteStateChange);
|
||||||
|
|
||||||
dis.dispatch({
|
dis.dispatch({
|
||||||
action: 'ui_opacity',
|
action: 'panel_disable',
|
||||||
sideOpacity: 0.3,
|
sideDisabled: true,
|
||||||
middleOpacity: 0.3,
|
middleDisabled: true,
|
||||||
});
|
});
|
||||||
this._refreshFromServer();
|
this._refreshFromServer();
|
||||||
|
|
||||||
|
@ -311,9 +311,9 @@ module.exports = React.createClass({
|
||||||
componentWillUnmount: function() {
|
componentWillUnmount: function() {
|
||||||
this._unmounted = true;
|
this._unmounted = true;
|
||||||
dis.dispatch({
|
dis.dispatch({
|
||||||
action: 'ui_opacity',
|
action: 'panel_disable',
|
||||||
sideOpacity: 1.0,
|
sideDisabled: false,
|
||||||
middleOpacity: 1.0,
|
middleDisabled: false,
|
||||||
});
|
});
|
||||||
dis.unregister(this.dispatcherRef);
|
dis.unregister(this.dispatcherRef);
|
||||||
const cli = MatrixClientPeg.get();
|
const cli = MatrixClientPeg.get();
|
||||||
|
|
|
@ -30,10 +30,9 @@ module.exports = React.createClass({
|
||||||
|
|
||||||
componentWillMount: function() {
|
componentWillMount: function() {
|
||||||
dis.dispatch({
|
dis.dispatch({
|
||||||
action: 'ui_opacity',
|
action: 'panel_disable',
|
||||||
leftOpacity: 1.0,
|
rightDisabled: true,
|
||||||
rightOpacity: 0.3,
|
middleDisabled: true,
|
||||||
middleOpacity: 0.5,
|
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
|
|
||||||
|
@ -43,9 +42,9 @@ module.exports = React.createClass({
|
||||||
|
|
||||||
componentWillUnmount: function() {
|
componentWillUnmount: function() {
|
||||||
dis.dispatch({
|
dis.dispatch({
|
||||||
action: 'ui_opacity',
|
action: 'panel_disable',
|
||||||
sideOpacity: 1.0,
|
sideDisabled: false,
|
||||||
middleOpacity: 1.0,
|
middleDisabled: false,
|
||||||
});
|
});
|
||||||
document.removeEventListener('keydown', this._onKeyDown);
|
document.removeEventListener('keydown', this._onKeyDown);
|
||||||
},
|
},
|
||||||
|
|
|
@ -371,7 +371,7 @@ export default class MessageComposer extends React.Component {
|
||||||
);
|
);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="mx_MessageComposer mx_fadable" style={{ opacity: this.props.opacity }}>
|
<div className="mx_MessageComposer">
|
||||||
<div className="mx_MessageComposer_wrapper">
|
<div className="mx_MessageComposer_wrapper">
|
||||||
<div className="mx_MessageComposer_row">
|
<div className="mx_MessageComposer_row">
|
||||||
{ controls }
|
{ controls }
|
||||||
|
@ -410,9 +410,6 @@ MessageComposer.propTypes = {
|
||||||
// callback when a file to upload is chosen
|
// callback when a file to upload is chosen
|
||||||
uploadFile: React.PropTypes.func.isRequired,
|
uploadFile: React.PropTypes.func.isRequired,
|
||||||
|
|
||||||
// opacity for dynamic UI fading effects
|
|
||||||
opacity: React.PropTypes.number,
|
|
||||||
|
|
||||||
// string representing the current room app drawer state
|
// string representing the current room app drawer state
|
||||||
showApps: React.PropTypes.bool,
|
showApps: React.PropTypes.bool,
|
||||||
};
|
};
|
||||||
|
|
|
@ -158,9 +158,9 @@ module.exports = React.createClass({
|
||||||
});
|
});
|
||||||
|
|
||||||
dis.dispatch({
|
dis.dispatch({
|
||||||
action: 'ui_opacity',
|
action: 'panel_disable',
|
||||||
sideOpacity: 0.3,
|
sideDisabled: true,
|
||||||
middleOpacity: 0.3,
|
middleDisabled: true,
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
|
|
||||||
|
@ -171,9 +171,9 @@ module.exports = React.createClass({
|
||||||
}
|
}
|
||||||
|
|
||||||
dis.dispatch({
|
dis.dispatch({
|
||||||
action: 'ui_opacity',
|
action: 'panel_disable',
|
||||||
sideOpacity: 1.0,
|
sideDisabled: false,
|
||||||
middleOpacity: 1.0,
|
middleDisabled: false,
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue