mad-star-studio/element-web
2
0
Fork 0
Code Pull requests Activity

Merge branch 'develop' into matthew/scalar

Browse source
This commit is contained in:
Matthew Hodgson 2016-08-04 13:41:04 +01:00
commit eb108c7866
68 changed files with 1449 additions and 364 deletions
Download patch file Download diff file Expand all files Collapse all files

6
src/components/structures/BottomLeftMenu.js
View file

@ -52,13 +52,13 @@ module.exports = React.createClass({
<div className="mx_BottomLeftMenu">
<div className="mx_BottomLeftMenu_options">
<div className="mx_BottomLeftMenu_createRoom" title="Start chat" onClick={ this.onCreateRoomClick }>
<TintableSvg src="img/icons-create-room.svg" width="24" height="24"/>
<TintableSvg src="img/icons-create-room.svg" width="25" height="25"/>
</div>
<div className="mx_BottomLeftMenu_directory" title="Room directory" onClick={ this.onRoomDirectoryClick }>
<TintableSvg src="img/icons-directory.svg" width="24" height="24"/>
<TintableSvg src="img/icons-directory.svg" width="25" height="25"/>
</div>
<div className="mx_BottomLeftMenu_settings" title="Settings" onClick={ this.onSettingsClick }>
<TintableSvg src="img/icons-settings.svg" width="24" height="24"/>
<TintableSvg src="img/icons-settings.svg" width="25" height="25"/>
</div>
</div>
</div>

4
src/components/structures/CompatibilityPage.js
View file

@ -45,8 +45,8 @@ module.exports = React.createClass({
available or experimental in your current browser.
</p>
<p>
Please install <a href="https://www.google.com/chrome">Chrome</a> for
the best experience. <a href="https://getfirefox.com">Firefox</a>,
Please install <a href="https://www.google.com/chrome">Chrome</a> or
<a href="https://getfirefox.com">Firefox</a> for the best experience.
<a href="http://apple.com/safari">Safari</a> and
<a href="http://opera.com">Opera</a> work too.
</p>

2
src/components/structures/RightPanel.js
View file

@ -136,8 +136,8 @@ module.exports = React.createClass({
buttonGroup =
<div className="mx_RightPanel_headerButtonGroup">
<div className="mx_RightPanel_headerButton" title="Members" onClick={ this.onMemberListButtonClick }>
<TintableSvg src="img/members.svg" width="17" height="22"/>
{ membersBadge }
<TintableSvg src="img/icons-people.svg" width="25" height="25"/>
{ membersHighlight }
</div>
<div className="mx_RightPanel_headerButton mx_RightPanel_filebutton" title="Files">

139
src/components/structures/RoomDirectory.js
View file

@ -52,6 +52,18 @@ module.exports = React.createClass({
},
componentDidMount: function() {
this.getPublicRooms();
},
componentWillUnmount: function() {
// dis.dispatch({
// action: 'ui_opacity',
// sideOpacity: 1.0,
// middleOpacity: 1.0,
// });
},
getPublicRooms: function() {
var self = this;
MatrixClientPeg.get().publicRooms(function (err, data) {
if (err) {
@ -68,35 +80,79 @@ module.exports = React.createClass({
publicRooms: data.chunk,
loading: false,
});
self.forceUpdate();
}
});
},
componentWillUnmount: function() {
// dis.dispatch({
// action: 'ui_opacity',
// sideOpacity: 1.0,
// middleOpacity: 1.0,
// });
/**
* A limited interface for removing rooms from the directory.
* Will set the room to not be publicly visible and delete the
* default alias. In the long term, it would be better to allow
* HS admins to do this through the RoomSettings interface, but
* this needs SPEC-417.
*/
removeFromDirectory: function(room) {
var alias = get_display_alias_for_room(room);
var name = room.name || alias || "Unnamed room";
var QuestionDialog = sdk.getComponent("dialogs.QuestionDialog");
var ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
var desc;
if (alias) {
desc = `Delete the room alias '${alias}' and remove '${name}' from the directory?`;
} else {
desc = `Remove '${name}' from the directory?`;
}
Modal.createDialog(QuestionDialog, {
title: "Remove from Directory",
description: desc,
onFinished: (should_delete) => {
if (!should_delete) return;
var Loader = sdk.getComponent("elements.Spinner");
var modal = Modal.createDialog(Loader);
var step = `remove '${name}' from the directory.`;
MatrixClientPeg.get().setRoomDirectoryVisibility(room.room_id, 'private').then(() => {
if (!alias) return;
step = 'delete the alias.';
return MatrixClientPeg.get().deleteAlias(alias);
}).done(() => {
modal.close();
this.getPublicRooms();
}, function(err) {
modal.close();
this.getPublicRooms();
Modal.createDialog(ErrorDialog, {
title: "Failed to "+step,
description: err.toString()
});
});
}
});
},
showRoom: function(roomId, roomAlias) {
// extract the metadata from the publicRooms structure to pass
// as out-of-band data to view_room, because we get information
// here that we can't get other than by joining the room in some
// cases.
var room;
if (roomId) {
for (var i = 0; i < this.state.publicRooms.length; ++i) {
if (this.state.publicRooms[i].room_id == roomId) {
room = this.state.publicRooms[i];
break;
}
}
onRoomClicked: function(room, ev) {
if (ev.shiftKey) {
ev.preventDefault();
this.removeFromDirectory(room);
} else {
this.showRoom(room);
}
var oob_data = {};
},
showRoomAlias: function(alias) {
this.showRoom(null, alias);
},
showRoom: function(room, room_alias) {
var payload = {action: 'view_room'};
if (room) {
// Don't let the user view a room they won't be able to either
// peek or join: fail earlier so they don't have to click back
// to the directory.
if (MatrixClientPeg.get().isGuest()) {
if (!room.world_readable && !room.guest_can_join) {
var NeedToRegisterDialog = sdk.getComponent("dialogs.NeedToRegisterDialog");
@ -108,26 +164,25 @@ module.exports = React.createClass({
}
}
oob_data = {
if (!room_alias) {
room_alias = get_display_alias_for_room(room);
}
payload.oob_data = {
avatarUrl: room.avatar_url,
// XXX: This logic is duplicated from the JS SDK which
// would normally decide what the name is.
name: room.name || room.canonical_alias || (room.aliases ? room.aliases[0] : "Unnamed room"),
name: room.name || room_alias || "Unnamed room",
};
}
var payload = {
oob_data: oob_data,
action: 'view_room',
};
// It's not really possible to join Matrix rooms by ID because the HS has no way to know
// which servers to start querying. However, there's no other way to join rooms in
// this list without aliases at present, so if roomAlias isn't set here we have no
// choice but to supply the ID.
if (roomAlias) {
payload.room_alias = roomAlias;
if (room_alias) {
payload.room_alias = room_alias;
} else {
payload.room_id = roomId;
payload.room_id = room.room_id;
}
dis.dispatch(payload);
},
@ -150,8 +205,7 @@ module.exports = React.createClass({
var self = this;
var guestRead, guestJoin, perms;
for (var i = 0; i < rooms.length; i++) {
var alias = rooms[i].canonical_alias || (rooms[i].aliases ? rooms[i].aliases[0] : "");
var name = rooms[i].name || alias || "Unnamed room";
var name = rooms[i].name || get_display_alias_for_room(rooms[i]) || "Unnamed room";
guestRead = null;
guestJoin = null;
@ -175,7 +229,11 @@ module.exports = React.createClass({
topic = linkifyString(sanitizeHtml(topic));
rows.unshift(
<tr key={ rooms[i].room_id } onClick={self.showRoom.bind(null, rooms[i].room_id, alias)}>
<tr key={ rooms[i].room_id }
onClick={self.onRoomClicked.bind(self, rooms[i])}
// cancel onMouseDown otherwise shift-clicking highlights text
onMouseDown={(ev) => {ev.preventDefault();}}
>
<td className="mx_RoomDirectory_roomAvatar">
<BaseAvatar width={24} height={24} resizeMethod='crop'
name={ name } idName={ name }
@ -189,7 +247,7 @@ module.exports = React.createClass({
<div className="mx_RoomDirectory_topic"
onClick={ function(e) { e.stopPropagation() } }
dangerouslySetInnerHTML={{ __html: topic }}/>
<div className="mx_RoomDirectory_alias">{ alias }</div>
<div className="mx_RoomDirectory_alias">{ get_display_alias_for_room(rooms[i]) }</div>
</td>
<td className="mx_RoomDirectory_roomMemberCount">
{ rooms[i].num_joined_members }
@ -204,7 +262,7 @@ module.exports = React.createClass({
this.forceUpdate();
this.setState({ roomAlias : this.refs.roomAlias.value })
if (ev.key == "Enter") {
this.showRoom(null, this.refs.roomAlias.value);
this.showRoomAlias(this.refs.roomAlias.value);
}
},
@ -224,8 +282,7 @@ module.exports = React.createClass({
<SimpleRoomHeader title="Directory" />
<div className="mx_RoomDirectory_list">
<input ref="roomAlias" placeholder="Join a room (e.g. #foo:domain.com)" className="mx_RoomDirectory_input" size="64" onKeyUp={ this.onKeyUp }/>
<GeminiScrollbar className="mx_RoomDirectory_tableWrapper"
relayoutOnUpdate={false} >
<GeminiScrollbar className="mx_RoomDirectory_tableWrapper">
<table ref="directory_table" className="mx_RoomDirectory_table">
<tbody>
{ this.getRows(this.state.roomAlias) }
@ -237,3 +294,9 @@ module.exports = React.createClass({
);
}
});
// Similar to matrix-react-sdk's MatrixTools.getDisplayAliasForRoom
// but works with the objects we get from the public room list
function get_display_alias_for_room(room) {
return room.canonical_alias || (room.aliases ? room.aliases[0] : "");
}

6
src/components/structures/RoomSubList.js
View file

@ -61,8 +61,12 @@ var RoomSubList = React.createClass({
label: React.PropTypes.string.isRequired,
tagName: React.PropTypes.string,
editable: React.PropTypes.bool,
order: React.PropTypes.string.isRequired,
selectedRoom: React.PropTypes.string.isRequired,
// undefined if no room is selected (eg we are showing settings)
selectedRoom: React.PropTypes.string,
startAsHidden: React.PropTypes.bool,
showSpinner: React.PropTypes.bool, // true to show a spinner if 0 elements when expanded
collapsed: React.PropTypes.bool.isRequired, // is LeftPanel collapsed?

2
src/components/structures/SearchBox.js
View file

@ -94,7 +94,7 @@ module.exports = React.createClass({
<TintableSvg
key="button"
className="mx_SearchBox_searchButton"
src="img/right_search.svg" width="24" height="24"
src="img/icons-search-copy.svg" width="13" height="13"
/>,
<input
key="searchfield"

14
src/components/views/rooms/MessageContextMenu.js → src/components/views/context_menus/MessageContextMenu.js
View file

@ -47,7 +47,7 @@ module.exports = React.createClass({
var ViewSource = sdk.getComponent('structures.ViewSource');
Modal.createDialog(ViewSource, {
mxEvent: this.props.mxEvent
});
}, 'mx_Dialog_viewsource');
if (this.props.onFinished) this.props.onFinished();
},
@ -95,7 +95,7 @@ module.exports = React.createClass({
if (eventStatus === 'not_sent') {
resendButton = (
<div className="mx_ContextualMenu_field" onClick={this.onResendClick}>
<div className="mx_MessageContextMenu_field" onClick={this.onResendClick}>
Resend
</div>
);
@ -103,7 +103,7 @@ module.exports = React.createClass({
if (!eventStatus) { // sent
redactButton = (
<div className="mx_ContextualMenu_field" onClick={this.onRedactClick}>
<div className="mx_MessageContextMenu_field" onClick={this.onRedactClick}>
Redact
</div>
);
@ -111,14 +111,14 @@ module.exports = React.createClass({
if (eventStatus === "queued" || eventStatus === "not_sent") {
cancelButton = (
<div className="mx_ContextualMenu_field" onClick={this.onCancelSendClick}>
<div className="mx_MessageContextMenu_field" onClick={this.onCancelSendClick}>
Cancel Sending
</div>
);
}
viewSourceButton = (
<div className="mx_ContextualMenu_field" onClick={this.onViewSourceClick}>
<div className="mx_MessageContextMenu_field" onClick={this.onViewSourceClick}>
View Source
</div>
);
@ -126,7 +126,7 @@ module.exports = React.createClass({
if (this.props.eventTileOps) {
if (this.props.eventTileOps.isWidgetHidden()) {
unhidePreviewButton = (
<div className="mx_ContextualMenu_field" onClick={this.onUnhidePreviewClick}>
<div className="mx_MessageContextMenu_field" onClick={this.onUnhidePreviewClick}>
Unhide Preview
</div>
)
@ -136,7 +136,7 @@ module.exports = React.createClass({
// XXX: this should be https://matrix.to.
// XXX: if we use room ID, we should also include a server where the event can be found (other than in the domain of the event ID)
permalinkButton = (
<div className="mx_ContextualMenu_field">
<div className="mx_MessageContextMenu_field">
<a href={ "#/room/" + this.props.mxEvent.getRoomId() +"/"+ this.props.mxEvent.getId() }
onClick={ this.onPermalinkClick }>Permalink</a>
</div>

150
src/components/views/context_menus/NotificationStateContextMenu.js Normal file
View file

@ -0,0 +1,150 @@
/*
Copyright 2015, 2016 OpenMarket Ltd
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/
'use strict';
var q = require("q");
var React = require('react');
var classNames = require('classnames');
var MatrixClientPeg = require('matrix-react-sdk/lib/MatrixClientPeg');
var dis = require('matrix-react-sdk/lib/dispatcher');
module.exports = React.createClass({
displayName: 'NotificationStateContextMenu',
propTypes: {
room: React.PropTypes.object.isRequired,
/* callback called when the menu is dismissed */
onFinished: React.PropTypes.func,
},
getInitialState: function() {
var areNotifsMuted = false;
var cli = MatrixClientPeg.get();
if (!cli.isGuest()) {
var roomPushRule = cli.getRoomPushRule("global", this.props.room.roomId);
if (roomPushRule) {
if (0 <= roomPushRule.actions.indexOf("dont_notify")) {
areNotifsMuted = true;
}
}
}
return {
areNotifsMuted: areNotifsMuted,
};
},
_save: function( isMuted ) {
var self = this;
const roomId = this.props.room.roomId;
var cli = MatrixClientPeg.get();
if (!cli.isGuest()) {
cli.setRoomMutePushRule(
"global", roomId, isMuted
).then(function() {
self.setState({areNotifsMuted: isMuted});
// delay slightly so that the user can see their state change
// before closing the menu
q.delay(500).then(function() {
// tell everyone that wants to know of the change in
// notification state
dis.dispatch({
action: 'notification_change',
roomId: self.props.room.roomId,
isMuted: isMuted,
});
// Close the context menu
if (self.props.onFinished) {
self.props.onFinished();
};
});
}).fail(function(error) {
// TODO: some form of error notification to the user
// to inform them that their state change failed.
});
}
},
_onClickAlertMe: function() {
// Placeholder
},
_onClickAllNotifs: function() {
this._save(false);
},
_onClickMentions: function() {
// Placeholder
},
_onClickMute: function() {
this._save(true);
},
render: function() {
var cli = MatrixClientPeg.get();
var alertMeClasses = classNames({
'mx_NotificationStateContextMenu_field': true,
'mx_NotificationStateContextMenu_fieldDisabled': true,
});
var allNotifsClasses = classNames({
'mx_NotificationStateContextMenu_field': true,
'mx_NotificationStateContextMenu_fieldSet': !this.state.areNotifsMuted,
});
var mentionsClasses = classNames({
'mx_NotificationStateContextMenu_field': true,
'mx_NotificationStateContextMenu_fieldDisabled': true,
});
var muteNotifsClasses = classNames({
'mx_NotificationStateContextMenu_field': true,
'mx_NotificationStateContextMenu_fieldSet': this.state.areNotifsMuted,
});
return (
<div>
<div className="mx_NotificationStateContextMenu_picker" >
<img src="img/notif-slider.svg" width="20" height="107" />
</div>
<div className={ alertMeClasses } onClick={this._onClickAlertMe} >
<img className="mx_NotificationStateContextMenu_icon" src="img/icon-context-mute-off-copy.svg" width="16" height="12" />
All messages (loud)
</div>
<div className={ allNotifsClasses } onClick={this._onClickAllNotifs} >
<img className="mx_NotificationStateContextMenu_activeIcon" src="img/notif-active.svg" width="12" height="12" />
<img className="mx_NotificationStateContextMenu_icon" src="img/icon-context-mute-off.svg" width="16" height="12" />
All messages
</div>
<div className={ mentionsClasses } onClick={this._onClickMentions} >
<img className="mx_NotificationStateContextMenu_icon" src="img/icon-context-mute-mentions.svg" width="16" height="12" />
Mentions only
</div>
<div className={ muteNotifsClasses } onClick={this._onClickMute} >
<img className="mx_NotificationStateContextMenu_activeIcon" src="img/notif-active.svg" width="12" height="12" />
<img className="mx_NotificationStateContextMenu_icon" src="img/icon-context-mute.svg" width="16" height="12" />
Mute
</div>
</div>
);
}
});

3
src/components/views/globals/MatrixToolbar.js
View file

@ -35,7 +35,7 @@ module.exports = React.createClass({
return (
<div className="mx_MatrixToolbar">
<img className="mx_MatrixToolbar_warning" src="img/warning.svg" width="24" height="23" alt="/!\"/>
<div>
<div className="mx_MatrixToolbar_content">
You are not receiving desktop notifications. <a className="mx_MatrixToolbar_link" onClick={ this.onClick }>Enable them now</a>
</div>
<div className="mx_MatrixToolbar_close"><img src="img/cancel.svg" width="18" height="18" onClick={ this.hideToolbar } /></div>
@ -43,4 +43,3 @@ module.exports = React.createClass({
);
}
});

2
src/components/views/settings/Notifications.js
View file

@ -24,7 +24,7 @@ var Modal = require('matrix-react-sdk/lib/Modal');
var notifications = require('../../../notifications');
// TODO: this "view" component still has far to much application logic in it,
// TODO: this "view" component still has far too much application logic in it,
// which should be factored out to other files.
// TODO: this component also does a lot of direct poking into this.state, which