OpenCloud
/
element-web
mirror of https://github.com/vector-im/element-web
1
0
Fork 0
Code Issues Releases Wiki Activity

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

Matthew/design tweaks
pull/21833/head
Matthew Hodgson 2016-04-15 18:48:22 +01:00
parent 21fd5078f9 009781dac7
commit 8ec13d2752
10 changed files with 63 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
src/components/structures/RoomView.js
View File

@ -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} />

11
src/components/structures/UploadBar.js
View File

@ -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 />
}

21
src/components/structures/UserSettings.js
View File

@ -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">

1
src/components/views/elements/EditableText.js
View File

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

2
src/components/views/elements/TintableSvg.js
View File

@ -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 }

4
src/components/views/rooms/MemberList.js
View File

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

2
src/components/views/rooms/MessageComposer.js
View File

@ -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>);
}

7
src/components/views/rooms/RoomHeader.js
View File

@ -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>;
}

33
src/components/views/rooms/RoomList.js
View File

@ -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>
);

5
src/components/views/rooms/RoomTile.js
View File

@ -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");