From 11f3d5f9930320595ead9c42784cfd518b30b126 Mon Sep 17 00:00:00 2001 From: Matthew Hodgson Date: Tue, 12 Apr 2016 17:18:32 +0100 Subject: [PATCH] make the UI fadable to help with decluttering --- src/components/structures/MatrixChat.js | 25 +++++++++++++------ src/components/structures/MessagePanel.js | 10 ++++++-- src/components/structures/RoomView.js | 19 ++++++++------ src/components/structures/TimelinePanel.js | 4 +++ src/components/views/rooms/MessageComposer.js | 5 +++- src/components/views/rooms/RoomSettings.js | 15 +++++++++++ 6 files changed, 60 insertions(+), 18 deletions(-) diff --git a/src/components/structures/MatrixChat.js b/src/components/structures/MatrixChat.js index 497251e5aa..7e7c6564ab 100644 --- a/src/components/structures/MatrixChat.js +++ b/src/components/structures/MatrixChat.js @@ -67,6 +67,8 @@ module.exports = React.createClass({ collapse_rhs: false, ready: false, width: 10000, + sideOpacity: 1.0, + middleOpacity: 1.0, }; if (s.logged_in) { if (MatrixClientPeg.get().getRooms().length) { @@ -369,7 +371,7 @@ module.exports = React.createClass({ onFinished: function(should_leave) { if (should_leave) { var d = MatrixClientPeg.get().leave(roomId); - + // FIXME: controller shouldn't be loading a view :( var Loader = sdk.getComponent("elements.Spinner"); var modal = Modal.createDialog(Loader); @@ -534,6 +536,12 @@ module.exports = React.createClass({ collapse_rhs: false, }); break; + case 'ui_opacity': + this.setState({ + sideOpacity: payload.sideOpacity, + middleOpacity: payload.middleOpacity, + }); + break; } }, @@ -887,7 +895,7 @@ module.exports = React.createClass({ dis.dispatch({ action: 'view_user', member: member, - }); + }); }, onLogoutClick: function(event) { @@ -1034,7 +1042,7 @@ module.exports = React.createClass({ var NewVersionBar = sdk.getComponent('globals.NewVersionBar'); var ForgotPassword = sdk.getComponent('structures.login.ForgotPassword'); - // work out the HS URL prompts we should show for + // work out the HS URL prompts we should show for // needs to be before normal PageTypes as you are logged in technically if (this.state.screen == 'post_registration') { @@ -1060,21 +1068,22 @@ module.exports = React.createClass({ highlightedEventId={this.state.highlightedEventId} eventPixelOffset={this.state.initialEventPixelOffset} key={this.state.currentRoom} + opacity={this.state.middleOpacity} ConferenceHandler={this.props.ConferenceHandler} /> ); - right_panel = + right_panel = break; case this.PageTypes.UserSettings: page_element = - right_panel = + right_panel = break; case this.PageTypes.CreateRoom: page_element = - right_panel = + right_panel = break; case this.PageTypes.RoomDirectory: page_element = - right_panel = + right_panel = break; } @@ -1098,7 +1107,7 @@ module.exports = React.createClass({
{topBar}
- +
{page_element}
diff --git a/src/components/structures/MessagePanel.js b/src/components/structures/MessagePanel.js index 8f5ffd9e56..8292c0dee1 100644 --- a/src/components/structures/MessagePanel.js +++ b/src/components/structures/MessagePanel.js @@ -65,6 +65,9 @@ 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, }, componentWillMount: function() { @@ -423,12 +426,15 @@ module.exports = React.createClass({ bottomSpinner =
    • ; } + var style = this.props.hidden ? { display: 'none' } : {}; + style.opacity = this.props.opacity; + return ( - {topSpinner} {this._getEventTiles()} diff --git a/src/components/structures/RoomView.js b/src/components/structures/RoomView.js index 3749ee3bc6..14ce2065df 100644 --- a/src/components/structures/RoomView.js +++ b/src/components/structures/RoomView.js @@ -1167,7 +1167,7 @@ module.exports = React.createClass({
    - ); + ); } else { var inviterName = undefined; @@ -1233,7 +1233,7 @@ module.exports = React.createClass({ inviterName={ inviterName } canJoin={ true } canPreview={ false } spinner={this.state.joining} - room={this.state.room} + room={this.state.room} />
    @@ -1314,7 +1314,7 @@ module.exports = React.createClass({ inviterName={inviterName} invitedEmail={invitedEmail} canPreview={this.state.canPeek} - room={this.state.room} + room={this.state.room} /> ); } @@ -1339,7 +1339,7 @@ module.exports = React.createClass({ messageComposer = + callState={this.state.callState} tabComplete={this.tabComplete} opacity={ this.props.opacity }/> } // TODO: Why aren't we storing the term/scope/count in this format @@ -1394,8 +1394,12 @@ module.exports = React.createClass({ if (this.state.searchResults) { searchResultsPanel = ( - +
  • {this.getSearchResultTiles()}     @@ -1412,6 +1416,7 @@ module.exports = React.createClass({ eventPixelOffset={this.props.eventPixelOffset} onScroll={ this.onMessageListScroll } onReadMarkerUpdated={ this._updateTopUnreadMessagesBar } + opacity={ this.props.opacity } />); var topUnreadMessagesBar = null; @@ -1446,7 +1451,7 @@ module.exports = React.createClass({ { topUnreadMessagesBar } { messagePanel } { searchResultsPanel } -
    +
    { statusBar } diff --git a/src/components/structures/TimelinePanel.js b/src/components/structures/TimelinePanel.js index 640ad66d72..3afa0fb77c 100644 --- a/src/components/structures/TimelinePanel.js +++ b/src/components/structures/TimelinePanel.js @@ -76,6 +76,9 @@ 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, }, statics: { @@ -861,6 +864,7 @@ var TimelinePanel = React.createClass({ stickyBottom={ stickyBottom } onScroll={ this.onMessageListScroll } onFillRequest={ this.onMessageListFillRequest } + opacity={ this.props.opacity } /> ); }, diff --git a/src/components/views/rooms/MessageComposer.js b/src/components/views/rooms/MessageComposer.js index 6d26e7884d..8a0a91fae9 100644 --- a/src/components/views/rooms/MessageComposer.js +++ b/src/components/views/rooms/MessageComposer.js @@ -40,6 +40,9 @@ module.exports = React.createClass({ // callback when a file to upload is chosen uploadFile: React.PropTypes.func.isRequired, + + // opacity for dynamic UI fading effects + opacity: React.PropTypes.number, }, onUploadClick: function(ev) { @@ -182,7 +185,7 @@ module.exports = React.createClass({ } return ( -
    +
    {controls} diff --git a/src/components/views/rooms/RoomSettings.js b/src/components/views/rooms/RoomSettings.js index 2b5a6c7172..fd8bcbfe96 100644 --- a/src/components/views/rooms/RoomSettings.js +++ b/src/components/views/rooms/RoomSettings.js @@ -20,6 +20,7 @@ var MatrixClientPeg = require('../../../MatrixClientPeg'); var sdk = require('../../../index'); var Modal = require('../../../Modal'); var ObjectUtils = require("../../../ObjectUtils"); +var dis = require("../../../dispatcher"); module.exports = React.createClass({ displayName: 'RoomSettings', @@ -69,6 +70,20 @@ module.exports = React.createClass({ }, (err) => { console.error("Failed to get room visibility: " + err); }); + + dis.dispatch({ + action: 'ui_opacity', + sideOpacity: 0.3, + middleOpacity: 0.3, + }); + }, + + componentWillUnmount: function() { + dis.dispatch({ + action: 'ui_opacity', + sideOpacity: 1.0, + middleOpacity: 1.0, + }); }, setName: function(name) {