Merge pull request #273 from matrix-org/matthew/design_tweaks

Matthew/design tweaks

src/components/structures/RoomView.js

@@ -94,6 +94,9 @@ module.exports = React.createClass({
         // ID of an event to highlight. If undefined, no event will be highlighted.
         // Typically this will either be the same as 'eventId', or undefined.
         highlightedEventId: React.PropTypes.string,
+
+        // is the RightPanel collapsed?
+        rightPanelCollapsed: React.PropTypes.bool,
     },
 
     getInitialState: function() {
@@ -1214,7 +1217,11 @@ module.exports = React.createClass({
                     // We've got to this room by following a link, possibly a third party invite.
                     return (
                         <div className="mx_RoomView">
-                            <RoomHeader ref="header" room={this.state.room} oobData={this.props.oobData} />
+                            <RoomHeader ref="header"
+                                room={this.state.room}
+                                oobData={this.props.oobData}
+                                rightPanelCollapsed={ this.props.rightPanelCollapsed }
+                            />
                             <div className="mx_RoomView_auxPanel">
                                 <RoomPreviewBar onJoinClick={ this.onJoinButtonClicked } 
                                                 onRejectClick={ this.onRejectThreepidInviteButtonClicked }
@@ -1227,7 +1234,7 @@ module.exports = React.createClass({
                             </div>
                             <div className="mx_RoomView_messagePanel"></div>
                         </div>
-                    );                    
+                    );
                 }
         }
 
@@ -1282,13 +1289,6 @@ module.exports = React.createClass({
 
         var statusBar;
 
-        // for testing UI...
-        // this.state.upload = {
-        //     uploadedBytes: 123493,
-        //     totalBytes: 347534,
-        //     fileName: "testing_fooble.jpg",
-        // }
-
         if (ContentMessages.getCurrentUploads().length > 0) {
             var UploadBar = sdk.getComponent('structures.UploadBar');
             statusBar = <UploadBar room={this.state.room} />

src/components/structures/UploadBar.js

@@ -45,6 +45,17 @@ module.exports = React.createClass({displayName: 'UploadBar',
 
     render: function() {
         var uploads = ContentMessages.getCurrentUploads();
+
+        // for testing UI... - also fix up the ContentMessages.getCurrentUploads().length
+        // check in RoomView
+        //
+        // uploads = [{
+        //     roomId: this.props.room.roomId,
+        //     loaded: 123493,
+        //     total: 347534,
+        //     fileName: "testing_fooble.jpg",
+        // }];
+
         if (uploads.length == 0) {
             return <div />
         }

src/components/structures/UserSettings.js

@@ -51,7 +51,11 @@ module.exports = React.createClass({
     },
 
     componentWillMount: function() {
-        var self = this;
+        dis.dispatch({
+            action: 'ui_opacity',
+            sideOpacity: 0.3,
+            middleOpacity: 0.3,
+        });
         this._refreshFromServer();
     },
 
@@ -61,6 +65,11 @@ module.exports = React.createClass({
     },
 
     componentWillUnmount: function() {
+        dis.dispatch({
+            action: 'ui_opacity',
+            sideOpacity: 1.0,
+            middleOpacity: 1.0,
+        });
         dis.unregister(this.dispatcherRef);
     },
 
@@ -321,7 +330,7 @@ module.exports = React.createClass({
         var notification_area;
         if (!MatrixClientPeg.get().isGuest()) {
             notification_area = (<div>
-                <h2>Notifications</h2>
+                <h3>Notifications</h3>
 
                 <div className="mx_UserSettings_section">
                     <Notifications/>
@@ -335,7 +344,7 @@ module.exports = React.createClass({
 
                 <GeminiScrollbar className="mx_UserSettings_body" autoshow={true}>
 
-                <h2>Profile</h2>
+                <h3>Profile</h3>
 
                 <div className="mx_UserSettings_section">
                     <div className="mx_UserSettings_profileTable">
@@ -366,10 +375,10 @@ module.exports = React.createClass({
                     </div>
                 </div>
 
-                <h2>Account</h2>
+                <h3>Account</h3>
 
                 <div className="mx_UserSettings_section">
-                    
+
                     <div className="mx_UserSettings_logout mx_UserSettings_button" onClick={this.onLogoutClicked}>
                         Log out
                     </div>
@@ -379,7 +388,7 @@ module.exports = React.createClass({
 
                 {notification_area}
 
-                <h2>Advanced</h2>
+                <h3>Advanced</h3>
 
                 <div className="mx_UserSettings_section">
                     <div className="mx_UserSettings_advanced">

src/components/views/elements/EditableText.js

@@ -24,6 +24,7 @@ const KEY_WINDOWS = 91;
 
 module.exports = React.createClass({
     displayName: 'EditableText',
+
     propTypes: {
         onValueChanged: React.PropTypes.func,
         initialValue: React.PropTypes.string,

src/components/views/elements/TintableSvg.js

@@ -59,7 +59,7 @@ module.exports = React.createClass({
 
     render: function() {
         return (
-            <object className={ "mx_TintableSvg " + this.props.className }
+            <object className={ "mx_TintableSvg " + (this.props.className ? this.props.className : "") }
                     type="image/svg+xml"
                     data={ this.props.src }
                     width={ this.props.width }

src/components/views/rooms/MemberList.js

@@ -449,10 +449,6 @@ module.exports = React.createClass({
                         </TruncatedList>
                         {invitedSection}
                     </GeminiScrollbar>
-                    <div className="mx_MemberList_bottom">
-                        <div className="mx_MemberList_bottomRule">
-                        </div>
-                    </div>
             </div>
         );
     }

src/components/views/rooms/MessageComposer.js

@@ -58,7 +58,7 @@ module.exports = React.createClass({
         var fileList = [];
         for(var i=0; i<files.length; i++) {
             fileList.push(<li>
-                <TintableSvg src="img/files.svg" width="16" height="16" /> {files[i].name}
+                <TintableSvg key={i} src="img/files.svg" width="16" height="16" /> {files[i].name}
             </li>);
         }
 

src/components/views/rooms/RoomHeader.js

@@ -35,6 +35,7 @@ module.exports = React.createClass({
         oobData: React.PropTypes.object,
         editing: React.PropTypes.bool,
         saving: React.PropTypes.bool,
+        rightPanelCollapsed: React.PropTypes.bool,
         onSettingsClick: React.PropTypes.func,
         onSaveClick: React.PropTypes.func,
         onSearchClick: React.PropTypes.func,
@@ -264,6 +265,11 @@ module.exports = React.createClass({
                 </div>;
         }
 
+        var rightPanel_buttons;
+        if (this.props.rightPanelCollapsed) {
+            // TODO: embed the RightPanel header in here if it's collapsed.
+        }
+
         var right_row;
         if (!this.props.editing) {
             right_row = 
@@ -273,6 +279,7 @@ module.exports = React.createClass({
                     <div className="mx_RoomHeader_button" onClick={this.props.onSearchClick} title="Search">
                         <TintableSvg src="img/search.svg" width="21" height="19"/>
                     </div>
+                    { rightPanel_buttons }
                 </div>;
         }
 

src/components/views/rooms/RoomList.js

@@ -34,7 +34,8 @@ module.exports = React.createClass({
     propTypes: {
         ConferenceHandler: React.PropTypes.any,
         collapsed: React.PropTypes.bool,
-        currentRoom: React.PropTypes.string
+        currentRoom: React.PropTypes.string,
+        searchFilter: React.PropTypes.string,
     },
 
     getInitialState: function() {
@@ -82,7 +83,7 @@ module.exports = React.createClass({
                 else {
                     this.setState({
                         incomingCall: null
-                    });            
+                    });
                 }
                 break;
         }
@@ -312,12 +313,6 @@ module.exports = React.createClass({
         }
     },
 
-    onShowClick: function() {
-        dis.dispatch({
-            action: 'show_left_panel',
-        });
-    },
-
     onShowMoreRooms: function() {
         // kick gemini in the balls to get it to wake up
         // XXX: uuuuuuugh.
@@ -325,18 +320,12 @@ module.exports = React.createClass({
     },
 
     render: function() {
-        var expandButton = this.props.collapsed ? 
-                           <img className="mx_RoomList_expandButton" onClick={ this.onShowClick } src="img/menu.png" width="20" alt=">"/> :
-                           null;
-
         var RoomSubList = sdk.getComponent('structures.RoomSubList');
         var self = this;
 
         return (
             <GeminiScrollbar className="mx_RoomList_scrollbar" autoshow={true} onScroll={ self._repositionTooltips } ref="gemscroll">
             <div className="mx_RoomList">
-                { expandButton }
-
                 <RoomSubList list={ self.state.lists['im.vector.fake.invite'] }
                              label="Invites"
                              editable={ false }
@@ -344,7 +333,8 @@ module.exports = React.createClass({
                              selectedRoom={ self.props.selectedRoom }
                              incomingCall={ self.state.incomingCall }
                              collapsed={ self.props.collapsed }
-                             onShowMoreRooms={ this.onShowMoreRooms } />
+                             searchFilter={ self.props.searchFilter }
+                             onShowMoreRooms={ self.onShowMoreRooms } />
 
                 <RoomSubList list={ self.state.lists['m.favourite'] }
                              label="Favourites"
@@ -355,7 +345,8 @@ module.exports = React.createClass({
                              selectedRoom={ self.props.selectedRoom }
                              incomingCall={ self.state.incomingCall }
                              collapsed={ self.props.collapsed }
-                             onShowMoreRooms={ this.onShowMoreRooms } />
+                             searchFilter={ self.props.searchFilter }
+                             onShowMoreRooms={ self.onShowMoreRooms } />
 
                 <RoomSubList list={ self.state.lists['im.vector.fake.recent'] }
                              label="Rooms"
@@ -365,7 +356,8 @@ module.exports = React.createClass({
                              selectedRoom={ self.props.selectedRoom }
                              incomingCall={ self.state.incomingCall }
                              collapsed={ self.props.collapsed }
-                             onShowMoreRooms={ this.onShowMoreRooms } />
+                             searchFilter={ self.props.searchFilter }
+                             onShowMoreRooms={ self.onShowMoreRooms } />
 
                 { Object.keys(self.state.lists).map(function(tagName) {
                     if (!tagName.match(/^(m\.(favourite|lowpriority)|im\.vector\.fake\.(invite|recent|archived))$/)) {
@@ -379,6 +371,7 @@ module.exports = React.createClass({
                              selectedRoom={ self.props.selectedRoom }
                              incomingCall={ self.state.incomingCall }
                              collapsed={ self.props.collapsed }
+                             searchFilter={ self.props.searchFilter }
                              onShowMoreRooms={ self.onShowMoreRooms } />
 
                     }
@@ -393,7 +386,8 @@ module.exports = React.createClass({
                              selectedRoom={ self.props.selectedRoom }
                              incomingCall={ self.state.incomingCall }
                              collapsed={ self.props.collapsed }
-                             onShowMoreRooms={ this.onShowMoreRooms } />
+                             searchFilter={ self.props.searchFilter }
+                             onShowMoreRooms={ self.onShowMoreRooms } />
 
                 <RoomSubList list={ self.state.lists['im.vector.fake.archived'] }
                              label="Historical"
@@ -406,7 +400,8 @@ module.exports = React.createClass({
                              showSpinner={ self.state.isLoadingLeftRooms }
                              onHeaderClick= { self.onArchivedHeaderClick }
                              incomingCall={ self.state.incomingCall }
-                             onShowMoreRooms={ this.onShowMoreRooms } />
+                             searchFilter={ self.props.searchFilter }
+                             onShowMoreRooms={ self.onShowMoreRooms } />
             </div>
             </GeminiScrollbar>
         );

src/components/views/rooms/RoomTile.js

@@ -104,7 +104,10 @@ module.exports = React.createClass({
         var label;
         if (!this.props.collapsed) {
             var className = 'mx_RoomTile_name' + (this.props.isInvite ? ' mx_RoomTile_invite' : '');
-            label = <div className={ className }>{name}</div>;
+            if (this.props.selected) {
+                name = <span>{ name }</span>;
+            }
+            label = <div className={ className }>{ name }</div>;
         }
         else if (this.state.hover) {
             var RoomTooltip = sdk.getComponent("rooms.RoomTooltip");