Merge branch 'develop' into travis/granular

This commit is contained in:
Travis Ralston 2017-11-03 21:56:46 -06:00
commit 69939e2fe3
21 changed files with 697 additions and 229 deletions

View file

@ -22,7 +22,7 @@ import classNames from 'classnames';
import { _t } from 'matrix-react-sdk/lib/languageHandler';
import sdk from 'matrix-react-sdk';
import dis from 'matrix-react-sdk/lib/dispatcher';
import MatrixClient from 'matrix-js-sdk';
import { MatrixClient } from 'matrix-js-sdk';
import Analytics from 'matrix-react-sdk/lib/Analytics';
import rate_limited_func from 'matrix-react-sdk/lib/ratelimitedfunc';
import AccessibleButton from 'matrix-react-sdk/lib/components/views/elements/AccessibleButton';
@ -90,6 +90,7 @@ module.exports = React.createClass({
RoomMemberList: 'RoomMemberList',
GroupMemberList: 'GroupMemberList',
GroupRoomList: 'GroupRoomList',
GroupRoomInfo: 'GroupRoomInfo',
FilePanel: 'FilePanel',
NotificationPanel: 'NotificationPanel',
RoomMemberInfo: 'RoomMemberInfo',
@ -205,7 +206,6 @@ module.exports = React.createClass({
} else if (this.props.groupId) {
this.setState({
phase: this.Phase.GroupMemberList,
groupId: payload.groupId,
member: payload.member,
});
}
@ -213,13 +213,20 @@ module.exports = React.createClass({
} else if (payload.action === "view_group") {
this.setState({
phase: this.Phase.GroupMemberList,
groupId: payload.groupId,
member: null,
});
} else if (payload.action === "view_group_room") {
this.setState({
phase: this.Phase.GroupRoomInfo,
groupRoomId: payload.groupRoomId,
});
} else if (payload.action === "view_group_room_list") {
this.setState({
phase: this.Phase.GroupRoomList,
});
} else if (payload.action === "view_group_user") {
this.setState({
phase: this.Phase.GroupMemberInfo,
groupId: payload.groupId,
member: payload.member,
});
} else if (payload.action === "view_room") {
@ -242,6 +249,7 @@ module.exports = React.createClass({
const GroupMemberList = sdk.getComponent('groups.GroupMemberList');
const GroupMemberInfo = sdk.getComponent('groups.GroupMemberInfo');
const GroupRoomList = sdk.getComponent('groups.GroupRoomList');
const GroupRoomInfo = sdk.getComponent('groups.GroupRoomInfo');
const TintableSvg = sdk.getComponent("elements.TintableSvg");
@ -305,7 +313,7 @@ module.exports = React.createClass({
analytics={['Right Panel', 'Group Member List Button', 'click']}
/>,
<HeaderButton key="_roomsButton" title={_t('Rooms')} iconSrc="img/icons-room.svg"
isHighlighted={this.state.phase === this.Phase.GroupRoomList}
isHighlighted={[this.Phase.GroupRoomList, this.Phase.GroupRoomInfo].includes(this.state.phase)}
clickPhase={this.Phase.GroupRoomList}
analytics={['Right Panel', 'Group Room List Button', 'click']}
/>,
@ -340,6 +348,11 @@ module.exports = React.createClass({
groupMember={this.state.member}
groupId={this.props.groupId}
key={this.state.member.user_id} />;
} else if (this.state.phase == this.Phase.GroupRoomInfo) {
panel = <GroupRoomInfo
groupRoomId={this.state.groupRoomId}
groupId={this.props.groupId}
key={this.state.groupRoomId} />;
} else if (this.state.phase == this.Phase.NotificationPanel) {
panel = <NotificationPanel />;
} else if (this.state.phase == this.Phase.FilePanel) {

View file

@ -409,7 +409,7 @@ module.exports = React.createClass({
perms = null;
if (guestRead || guestJoin) {
perms = <div className="mx_RoomDirectory_perms">{guestRead} {guestJoin}</div>;
perms = <div className="mx_RoomDirectory_perms">{guestRead}{guestJoin}</div>;
}
var topic = rooms[i].topic || '';

View file

@ -246,10 +246,14 @@ var RoomSubList = React.createClass({
roomNotificationCount: function(truncateAt) {
var self = this;
if (this.props.isInvite) {
return [0, true];
}
return this.props.list.reduce(function(result, room, index) {
if (truncateAt === undefined || index >= truncateAt) {
var roomNotifState = RoomNotifs.getRoomNotifsState(room.roomId);
var highlight = room.getUnreadNotificationCount('highlight') > 0 || self.props.isInvite;
var highlight = room.getUnreadNotificationCount('highlight') > 0;
var notificationCount = room.getUnreadNotificationCount();
const notifBadges = notificationCount > 0 && self._shouldShowNotifBadge(roomNotifState);
@ -394,7 +398,8 @@ var RoomSubList = React.createClass({
var subListNotifCount = subListNotifications[0];
var subListNotifHighlight = subListNotifications[1];
var roomCount = this.props.list.length > 0 ? this.props.list.length : '';
var totalTiles = this.props.list.length + (this.props.extraTiles || []).length;
var roomCount = totalTiles > 0 ? totalTiles : '';
var chevronClasses = classNames({
'mx_RoomSubList_chevron': true,

View file

@ -15,35 +15,24 @@ limitations under the License.
*/
import React from 'react';
import PropTypes from 'prop-types';
import sdk from 'matrix-react-sdk';
import { _t } from 'matrix-react-sdk/lib/languageHandler';
import MatrixClientPeg from 'matrix-react-sdk/lib/MatrixClientPeg';
class SendCustomEvent extends React.Component {
static propTypes = {
roomId: React.PropTypes.string.isRequired,
onBack: React.PropTypes.func.isRequired,
eventType: React.PropTypes.string.isRequired,
evContent: React.PropTypes.string.isRequired,
class DevtoolsComponent extends React.Component {
static contextTypes = {
roomId: PropTypes.string.isRequired,
};
}
static defaultProps = {
eventType: '',
evContent: '{\n\n}',
};
class GenericEditor extends DevtoolsComponent {
// static propTypes = {onBack: PropTypes.func.isRequired};
constructor(props, context) {
super(props, context);
this._send = this._send.bind(this);
this.onBack = this.onBack.bind(this);
this._onChange = this._onChange.bind(this);
this.state = {
message: null,
input_eventType: this.props.eventType,
input_evContent: this.props.evContent,
};
this.onBack = this.onBack.bind(this);
}
onBack() {
@ -54,6 +43,10 @@ class SendCustomEvent extends React.Component {
}
}
_onChange(e) {
this.setState({[e.target.id]: e.target.type === 'checkbox' ? e.target.checked : e.target.value});
}
_buttons() {
return <div className="mx_Dialog_buttons">
<button onClick={this.onBack}>{ _t('Back') }</button>
@ -61,19 +54,64 @@ class SendCustomEvent extends React.Component {
</div>;
}
textInput(id, label) {
return <div className="mx_DevTools_inputRow">
<div className="mx_DevTools_inputLabelCell">
<label htmlFor={id}>{ label }</label>
</div>
<div className="mx_DevTools_inputCell">
<input id={id} onChange={this._onChange} value={this.state[id]} size="32" />
</div>
</div>;
}
}
class SendCustomEvent extends GenericEditor {
static getLabel() { return _t('Send Custom Event'); }
static propTypes = {
onBack: PropTypes.func.isRequired,
forceStateEvent: PropTypes.bool,
inputs: PropTypes.object,
};
constructor(props, context) {
super(props, context);
this._send = this._send.bind(this);
const {eventType, stateKey, evContent} = Object.assign({
eventType: '',
stateKey: '',
evContent: '{\n\n}',
}, this.props.inputs);
this.state = {
isStateEvent: Boolean(this.props.forceStateEvent),
eventType,
stateKey,
evContent,
};
}
send(content) {
return MatrixClientPeg.get().sendEvent(this.props.roomId, this.state.input_eventType, content);
const cli = MatrixClientPeg.get();
if (this.state.isStateEvent) {
return cli.sendStateEvent(this.context.roomId, this.state.eventType, content, this.state.stateKey);
} else {
return cli.sendEvent(this.context.roomId, this.state.eventType, content);
}
}
async _send() {
if (this.state.input_eventType === '') {
if (this.state.eventType === '') {
this.setState({ message: _t('You must specify an event type!') });
return;
}
let message;
try {
const content = JSON.parse(this.state.input_evContent);
const content = JSON.parse(this.state.evContent);
await this.send(content);
message = _t('Event sent!');
} catch (e) {
@ -82,14 +120,6 @@ class SendCustomEvent extends React.Component {
this.setState({ message });
}
_additionalFields() {
return <div />;
}
_onChange(e) {
this.setState({[`input_${e.target.id}`]: e.target.value});
}
render() {
if (this.state.message) {
return <div>
@ -102,87 +132,176 @@ class SendCustomEvent extends React.Component {
return <div>
<div className="mx_Dialog_content">
{ this._additionalFields() }
<div className="mx_TextInputDialog_label">
<label htmlFor="eventType"> { _t('Event Type') } </label>
</div>
<div>
<input id="eventType" onChange={this._onChange} value={this.state.input_eventType} className="mx_TextInputDialog_input" size="64" />
</div>
{ this.textInput('eventType', _t('Event Type')) }
{ this.state.isStateEvent && this.textInput('stateKey', _t('State Key')) }
<div className="mx_TextInputDialog_label">
<br />
<div className="mx_UserSettings_profileLabelCell">
<label htmlFor="evContent"> { _t('Event Content') } </label>
</div>
<div>
<textarea id="evContent" onChange={this._onChange} value={this.state.input_evContent} className="mx_TextInputDialog_input" cols="63" rows="5" />
<textarea id="evContent" onChange={this._onChange} value={this.state.evContent} className="mx_TextInputDialog_input" cols="63" rows="5" />
</div>
</div>
{ this._buttons() }
<div className="mx_Dialog_buttons">
<button onClick={this.onBack}>{ _t('Back') }</button>
{ !this.state.message && <button onClick={this._send}>{ _t('Send') }</button> }
{ !this.state.message && !this.props.forceStateEvent && <div style={{float: "right"}}>
<input id="isStateEvent" className="mx_DevTools_tgl mx_DevTools_tgl-flip" type="checkbox" onChange={this._onChange} checked={this.state.isStateEvent} />
<label className="mx_DevTools_tgl-btn" data-tg-off="Event" data-tg-on="State Event" htmlFor="isStateEvent" />
</div> }
</div>
</div>;
}
}
class SendCustomStateEvent extends SendCustomEvent {
class SendAccountData extends GenericEditor {
static getLabel() { return _t('Send Account Data'); }
static propTypes = {
roomId: React.PropTypes.string.isRequired,
onBack: React.PropTypes.func.isRequired,
eventType: React.PropTypes.string.isRequired,
evContent: React.PropTypes.string.isRequired,
stateKey: React.PropTypes.string.isRequired,
};
static defaultProps = {
eventType: '',
evContent: '{\n\n}',
stateKey: '',
isRoomAccountData: PropTypes.bool,
forceMode: PropTypes.bool,
inputs: PropTypes.object,
};
constructor(props, context) {
super(props, context);
this.state['input_stateKey'] = this.props.stateKey;
this._send = this._send.bind(this);
const {eventType, evContent} = Object.assign({
eventType: '',
evContent: '{\n\n}',
}, this.props.inputs);
this.state = {
isRoomAccountData: Boolean(this.props.isRoomAccountData),
eventType,
evContent,
};
}
send(content) {
const cli = MatrixClientPeg.get();
return cli.sendStateEvent(this.props.roomId, this.state.input_eventType, content, this.state.input_stateKey);
if (this.state.isRoomAccountData) {
return cli.setRoomAccountData(this.context.roomId, this.state.eventType, content);
}
return cli.setAccountData(this.state.eventType, content);
}
_additionalFields() {
async _send() {
if (this.state.eventType === '') {
this.setState({ message: _t('You must specify an event type!') });
return;
}
let message;
try {
const content = JSON.parse(this.state.evContent);
await this.send(content);
message = _t('Event sent!');
} catch (e) {
message = _t('Failed to send custom event.') + ' (' + e.toString() + ')';
}
this.setState({ message });
}
render() {
if (this.state.message) {
return <div>
<div className="mx_Dialog_content">
{ this.state.message }
</div>
{ this._buttons() }
</div>;
}
return <div>
<div className="mx_TextInputDialog_label">
<label htmlFor="stateKey"> { _t('State Key') } </label>
<div className="mx_Dialog_content">
{ this.textInput('eventType', _t('Event Type')) }
<br />
<div className="mx_UserSettings_profileLabelCell">
<label htmlFor="evContent"> { _t('Event Content') } </label>
</div>
<div>
<textarea id="evContent" onChange={this._onChange} value={this.state.evContent} className="mx_TextInputDialog_input" cols="63" rows="5" />
</div>
</div>
<div>
<input id="stateKey" onChange={this._onChange} value={this.state.input_stateKey} className="mx_TextInputDialog_input" size="64" />
<div className="mx_Dialog_buttons">
<button onClick={this.onBack}>{ _t('Back') }</button>
{ !this.state.message && <button onClick={this._send}>{ _t('Send') }</button> }
{ !this.state.message && <div style={{float: "right"}}>
<input id="isRoomAccountData" className="mx_DevTools_tgl mx_DevTools_tgl-flip" type="checkbox" onChange={this._onChange} checked={this.state.isRoomAccountData} disabled={this.props.forceMode} />
<label className="mx_DevTools_tgl-btn" data-tg-off="Account Data" data-tg-on="Room Data" htmlFor="isRoomAccountData" />
</div> }
</div>
</div>;
}
}
class RoomStateExplorer extends React.Component {
class FilteredList extends React.Component {
static propTypes = {
setMode: React.PropTypes.func.isRequired,
roomId: React.PropTypes.string.isRequired,
onBack: React.PropTypes.func.isRequired,
children: PropTypes.any,
};
constructor(props, context) {
super(props, context);
this.onQuery = this.onQuery.bind(this);
this.state = {
query: '',
};
}
onQuery(ev) {
this.setState({ query: ev.target.value });
}
filterChildren() {
if (this.state.query) {
const lowerQuery = this.state.query.toLowerCase();
return this.props.children.filter((child) => child.key.toLowerCase().includes(lowerQuery));
}
return this.props.children;
}
render() {
return <div>
<input size="64"
onChange={this.onQuery}
value={this.state.query}
placeholder={_t('Filter results')}
className="mx_TextInputDialog_input mx_DevTools_RoomStateExplorer_query" />
{ this.filterChildren() }
</div>;
}
}
class RoomStateExplorer extends DevtoolsComponent {
static getLabel() { return _t('Explore Room State'); }
static propTypes = {
onBack: PropTypes.func.isRequired,
};
constructor(props, context) {
super(props, context);
const room = MatrixClientPeg.get().getRoom(this.props.roomId);
const room = MatrixClientPeg.get().getRoom(this.context.roomId);
this.roomStateEvents = room.currentState.events;
this.onBack = this.onBack.bind(this);
this.editEv = this.editEv.bind(this);
this.onQuery = this.onQuery.bind(this);
}
state = {
query: '',
eventType: null,
event: null,
};
this.state = {
eventType: null,
event: null,
editing: false,
};
}
browseEventType(eventType) {
return () => {
@ -197,7 +316,9 @@ class RoomStateExplorer extends React.Component {
}
onBack() {
if (this.state.event) {
if (this.state.editing) {
this.setState({ editing: false });
} else if (this.state.event) {
this.setState({ event: null });
} else if (this.state.eventType) {
this.setState({ eventType: null });
@ -207,20 +328,19 @@ class RoomStateExplorer extends React.Component {
}
editEv() {
const ev = this.state.event;
this.props.setMode(SendCustomStateEvent, {
eventType: ev.getType(),
evContent: JSON.stringify(ev.getContent(), null, '\t'),
stateKey: ev.getStateKey(),
});
}
onQuery(ev) {
this.setState({ query: ev.target.value });
this.setState({ editing: true });
}
render() {
if (this.state.event) {
if (this.state.editing) {
return <SendCustomEvent forceStateEvent={true} onBack={this.onBack} inputs={{
eventType: this.state.event.getType(),
evContent: JSON.stringify(this.state.event.getContent(), null, '\t'),
stateKey: this.state.event.getStateKey(),
}} />;
}
return <div className="mx_ViewSource">
<div className="mx_Dialog_content">
<pre>{ JSON.stringify(this.state.event.event, null, 2) }</pre>
@ -234,11 +354,9 @@ class RoomStateExplorer extends React.Component {
const rows = [];
const classes = 'mx_DevTools_RoomStateExplorer_button';
if (this.state.eventType === null) {
Object.keys(this.roomStateEvents).forEach((evType) => {
// Skip this entry if does not contain search query
if (this.state.query && !evType.toLowerCase().includes(this.state.query.toLowerCase())) return;
const stateGroup = this.roomStateEvents[evType];
const stateKeys = Object.keys(stateGroup);
@ -249,7 +367,7 @@ class RoomStateExplorer extends React.Component {
onClickFn = this.onViewSourceClick(stateGroup[stateKeys[0]]);
}
rows.push(<button className="mx_DevTools_RoomStateExplorer_button" key={evType} onClick={onClickFn}>
rows.push(<button className={classes} key={evType} onClick={onClickFn}>
{ evType }
</button>);
});
@ -257,12 +375,8 @@ class RoomStateExplorer extends React.Component {
const evType = this.state.eventType;
const stateGroup = this.roomStateEvents[evType];
Object.keys(stateGroup).forEach((stateKey) => {
// Skip this entry if does not contain search query
if (this.state.query && !stateKey.toLowerCase().includes(this.state.query.toLowerCase())) return;
const ev = stateGroup[stateKey];
rows.push(<button className="mx_DevTools_RoomStateExplorer_button" key={stateKey}
onClick={this.onViewSourceClick(ev)}>
rows.push(<button className={classes} key={stateKey} onClick={this.onViewSourceClick(ev)}>
{ stateKey }
</button>);
});
@ -270,8 +384,9 @@ class RoomStateExplorer extends React.Component {
return <div>
<div className="mx_Dialog_content">
<input onChange={this.onQuery} placeholder={_t('Filter results')} size="64" className="mx_TextInputDialog_input mx_DevTools_RoomStateExplorer_query" value={this.state.query} />
{ rows }
<FilteredList>
{ rows }
</FilteredList>
</div>
<div className="mx_Dialog_buttons">
<button onClick={this.onBack}>{ _t('Back') }</button>
@ -280,40 +395,157 @@ class RoomStateExplorer extends React.Component {
}
}
export default class DevtoolsDialog extends React.Component {
class AccountDataExplorer extends DevtoolsComponent {
static getLabel() { return _t('Explore Account Data'); }
static propTypes = {
roomId: React.PropTypes.string.isRequired,
onFinished: React.PropTypes.func.isRequired,
onBack: PropTypes.func.isRequired,
};
state = {
mode: null,
modeArgs: {},
constructor(props, context) {
super(props, context);
this.onBack = this.onBack.bind(this);
this.editEv = this.editEv.bind(this);
this._onChange = this._onChange.bind(this);
this.state = {
isRoomAccountData: false,
event: null,
editing: false,
};
}
getData() {
const cli = MatrixClientPeg.get();
if (this.state.isRoomAccountData) {
return cli.getRoom(this.context.roomId).accountData;
}
return cli.store.accountData;
}
onViewSourceClick(event) {
return () => {
this.setState({ event });
};
}
onBack() {
if (this.state.editing) {
this.setState({ editing: false });
} else if (this.state.event) {
this.setState({ event: null });
} else {
this.props.onBack();
}
}
_onChange(e) {
this.setState({[e.target.id]: e.target.type === 'checkbox' ? e.target.checked : e.target.value});
}
editEv() {
this.setState({ editing: true });
}
render() {
if (this.state.event) {
if (this.state.editing) {
return <SendAccountData isRoomAccountData={this.state.isRoomAccountData} onBack={this.onBack} inputs={{
eventType: this.state.event.getType(),
evContent: JSON.stringify(this.state.event.getContent(), null, '\t'),
}} forceMode={true} />;
}
return <div className="mx_ViewSource">
<div className="mx_Dialog_content">
<pre>{ JSON.stringify(this.state.event.event, null, 2) }</pre>
</div>
<div className="mx_Dialog_buttons">
<button onClick={this.onBack}>{ _t('Back') }</button>
<button onClick={this.editEv}>{ _t('Edit') }</button>
</div>
</div>;
}
const rows = [];
const classes = 'mx_DevTools_RoomStateExplorer_button';
const data = this.getData();
Object.keys(data).forEach((evType) => {
const ev = data[evType];
rows.push(<button className={classes} key={evType} onClick={this.onViewSourceClick(ev)}>
{ evType }
</button>);
});
return <div>
<div className="mx_Dialog_content">
<FilteredList>
{ rows }
</FilteredList>
</div>
<div className="mx_Dialog_buttons">
<button onClick={this.onBack}>{ _t('Back') }</button>
{ !this.state.message && <div style={{float: "right"}}>
<input id="isRoomAccountData" className="mx_DevTools_tgl mx_DevTools_tgl-flip" type="checkbox" onChange={this._onChange} checked={this.state.isRoomAccountData} />
<label className="mx_DevTools_tgl-btn" data-tg-off="Account Data" data-tg-on="Room Data" htmlFor="isRoomAccountData" />
</div> }
</div>
</div>;
}
}
const Entries = [
SendCustomEvent,
RoomStateExplorer,
SendAccountData,
AccountDataExplorer,
];
export default class DevtoolsDialog extends React.Component {
static childContextTypes = {
roomId: PropTypes.string.isRequired,
// client: PropTypes.instanceOf(MatixClient),
};
static propTypes = {
roomId: PropTypes.string.isRequired,
onFinished: PropTypes.func.isRequired,
};
constructor(props, context) {
super(props, context);
this.onBack = this.onBack.bind(this);
this.setMode = this.setMode.bind(this);
this.onCancel = this.onCancel.bind(this);
this.state = {
mode: null,
};
}
componentWillUnmount() {
this._unmounted = true;
}
getChildContext() {
return { roomId: this.props.roomId };
}
_setMode(mode) {
return () => {
this.setMode(mode);
this.setState({ mode });
};
}
setMode(mode, modeArgs={}) {
this.setState({ mode, modeArgs });
}
onBack() {
this.setState({ mode: null });
if (this.prevMode) {
this.setState({ mode: this.prevMode });
this.prevMode = null;
} else {
this.setState({ mode: null });
}
}
onCancel() {
@ -324,14 +556,27 @@ export default class DevtoolsDialog extends React.Component {
let body;
if (this.state.mode) {
body =
<this.state.mode {...this.props} {...this.state.modeArgs} onBack={this.onBack} setMode={this.setMode} />;
} else {
body = <div>
<div className="mx_Dialog_content">
<button onClick={this._setMode(SendCustomEvent)}>{ _t('Send Custom Event') }</button>
<button onClick={this._setMode(SendCustomStateEvent)}>{ _t('Send Custom State Event') }</button>
<button onClick={this._setMode(RoomStateExplorer)}>{ _t('Explore Room State') }</button>
<div className="mx_DevTools_label_left">{ this.state.mode.getLabel() }</div>
<div className="mx_DevTools_label_right">Room ID: { this.props.roomId }</div>
<div className="mx_DevTools_label_bottom" />
<this.state.mode onBack={this.onBack} />
</div>;
} else {
const classes = "mx_DevTools_RoomStateExplorer_button";
body = <div>
<div>
<div className="mx_DevTools_label_left">{ _t('Toolbox') }</div>
<div className="mx_DevTools_label_right">Room ID: { this.props.roomId }</div>
<div className="mx_DevTools_label_bottom" />
<div className="mx_Dialog_content">
{ Entries.map((Entry) => {
const label = Entry.getLabel();
const onClick = this._setMode(Entry);
return <button className={classes} key={label} onClick={onClick}>{ label }</button>;
}) }
</div>
</div>
<div className="mx_Dialog_buttons">
<button onClick={this.onCancel}>{ _t('Cancel') }</button>
@ -342,7 +587,6 @@ export default class DevtoolsDialog extends React.Component {
const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
return (
<BaseDialog className="mx_QuestionDialog" onFinished={this.props.onFinished} title={_t('Developer Tools')}>
<div>Room ID: { this.props.roomId }</div>
{ body }
</BaseDialog>
);

View file

@ -0,0 +1,33 @@
/*
Copyright 2017 New Vector 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.
*/
const React = require('react');
module.exports = React.createClass({
displayName: 'InlineSpinner',
render: function() {
var w = this.props.w || 16;
var h = this.props.h || 16;
var imgClass = this.props.imgClassName || "";
return (
<div className="mx_InlineSpinner">
<img src="img/spinner.gif" width={w} height={h} className={imgClass}/>
</div>
);
}
});

View file

@ -70,6 +70,7 @@
"What's new?": "What's new?",
"A new version of Riot is available.": "A new version of Riot is available.",
"To return to your account in future you need to <u>set a password</u>": "To return to your account in future you need to <u>set a password</u>",
"Toolbox": "Toolbox",
"Set Password": "Set Password",
"Error encountered (%(errorDetail)s).": "Error encountered (%(errorDetail)s).",
"Checking for an update...": "Checking for an update...",
@ -106,7 +107,8 @@
"Edit": "Edit",
"Filter results": "Filter results",
"Send Custom Event": "Send Custom Event",
"Send Custom State Event": "Send Custom State Event",
"Send Account Data": "Send Account Data",
"Explore Account Data": "Explore Account Data",
"Explore Room State": "Explore Room State",
"Developer Tools": "Developer Tools",
"You have successfully set a password!": "You have successfully set a password!",

View file

@ -35,7 +35,6 @@
@import "./matrix-react-sdk/views/elements/_ProgressBar.scss";
@import "./matrix-react-sdk/views/elements/_RichText.scss";
@import "./matrix-react-sdk/views/elements/_RoleButton.scss";
@import "./matrix-react-sdk/views/groups/_GroupInviteTile.scss";
@import "./matrix-react-sdk/views/groups/_GroupRoomList.scss";
@import "./matrix-react-sdk/views/login/_InteractiveAuthEntryComponents.scss";
@import "./matrix-react-sdk/views/login/_ServerConfig.scss";
@ -55,6 +54,8 @@
@import "./matrix-react-sdk/views/rooms/_MemberInfo.scss";
@import "./matrix-react-sdk/views/rooms/_MemberList.scss";
@import "./matrix-react-sdk/views/rooms/_MessageComposer.scss";
@import "./matrix-react-sdk/views/rooms/_PinnedEventTile.scss";
@import "./matrix-react-sdk/views/rooms/_PinnedEventsPanel.scss";
@import "./matrix-react-sdk/views/rooms/_PresenceLabel.scss";
@import "./matrix-react-sdk/views/rooms/_RoomHeader.scss";
@import "./matrix-react-sdk/views/rooms/_RoomList.scss";
@ -68,8 +69,6 @@
@import "./matrix-react-sdk/views/voip/_CallView.scss";
@import "./matrix-react-sdk/views/voip/_IncomingCallbox.scss";
@import "./matrix-react-sdk/views/voip/_VideoView.scss";
@import "./matrix-react-sdk/views/rooms/_PinnedEventsPanel.scss";
@import "./matrix-react-sdk/views/rooms/_PinnedEventTile.scss";
@import "./vector-web/_fonts.scss";
@import "./vector-web/structures/_CompatibilityPage.scss";
@import "./vector-web/structures/_HomePage.scss";
@ -86,6 +85,7 @@
@import "./vector-web/views/dialogs/_SetPasswordDialog.scss";
@import "./vector-web/views/directory/_NetworkDropdown.scss";
@import "./vector-web/views/elements/_ImageView.scss";
@import "./vector-web/views/elements/_InlineSpinner.scss";
@import "./vector-web/views/elements/_Spinner.scss";
@import "./vector-web/views/globals/_MatrixToolbar.scss";
@import "./vector-web/views/messages/_DateSeparator.scss";

View file

@ -68,7 +68,7 @@ limitations under the License.
box-shadow: none;
}
.mx_GroupView_header_name:hover div:not(.mx_GroupView_editable) {
.mx_GroupView_header_isUserMember .mx_GroupView_header_name:hover div:not(.mx_GroupView_editable) {
color: $accent-color;
cursor: pointer;
}
@ -204,6 +204,7 @@ limitations under the License.
flex-grow: 1;
border-top: 1px solid $primary-hairline-color;
padding-top: 10px;
word-break: break-word;
}
.mx_GroupView .mx_RoomView_messageListWrapper {

View file

@ -18,6 +18,9 @@ limitations under the License.
max-width: 960px;
margin-left: auto;
margin-right: auto;
display: flex;
flex-direction: column;
}
.mx_MyGroups .mx_RoomHeader_simpleHeader {
@ -61,10 +64,26 @@ limitations under the License.
/* Until the button is wired up */
.mx_MyGroups_joinBox {
visibility: hidden;
/* When joinBox wraps onto its own row, it should take up zero height so
that there isn't an awkward gap between MyGroups_createBox and
MyGroups_content.
*/
height: 0px;
margin: 0px;
}
.mx_MyGroups_content {
margin-left: 2px;
flex: 1 0 0;
display: flex;
flex-direction: column;
}
.mx_MyGroups_content h3 {
margin-bottom: 10px;
}
.mx_MyGroups_placeholder {
@ -75,19 +94,22 @@ limitations under the License.
text-align: center;
}
.mx_MyGroups_joinedGroups {
.mx_MyGroups_joinedGroups .gm-scroll-view {
border-top: 1px solid $primary-hairline-color;
overflow-x: hidden;
display: flex;
flex-direction: row;
flex-flow: wrap;
justify-content: space-around;
align-content: flex-start;
}
.mx_MyGroups_joinedGroups .mx_GroupTile {
.mx_MyGroups_joinedGroups .gm-scroll-view .mx_GroupTile {
min-width: 300px;
flex: 1 0 25%;
max-width: 33%;
flex: 1 0 300px;
height: 75px;
margin-bottom: 15px;
margin-right: 10px;
margin: 10px 0px;
display: flex;
align-items: flex-start;
cursor: pointer;
@ -100,6 +122,12 @@ limitations under the License.
justify-content: center;
}
.mx_GroupTile_profile h3.mx_GroupTile_name,
.mx_GroupTile_profile .mx_GroupTile_groupId,
.mx_GroupTile_profile .mx_GroupTile_desc {
padding-right: 10px;
}
.mx_GroupTile_profile h3.mx_GroupTile_name {
margin: 0px;
font-size: 15px;

View file

@ -33,3 +33,30 @@ limitations under the License.
background-color: $primary-bg-color;
}
.mx_CreateGroupDialog_input_hasPrefixAndSuffix {
border-radius: 0px;
}
.mx_CreateGroupDialog_input_group {
display: flex;
}
.mx_CreateGroupDialog_prefix,
.mx_CreateGroupDialog_suffix {
height: 35px;
padding: 0px 5px;
line-height: 37px;
background-color: $input-border-color;
border: 1px solid $input-border-color;
text-align: center;
}
.mx_CreateGroupDialog_prefix {
border-right: 0px;
border-radius: 3px 0px 0px 3px;
}
.mx_CreateGroupDialog_suffix {
border-left: 0px;
border-radius: 0px 3px 3px 0px;
}

View file

@ -3,7 +3,8 @@
// --Matthew
.mx_UserPill,
.mx_RoomPill {
.mx_RoomPill,
.mx_AtRoomPill {
border-radius: 16px;
display: inline-block;
height: 20px;
@ -24,7 +25,8 @@
padding-right: 5px;
}
.mx_EventTile_highlight .mx_EventTile_content .markdown-body a.mx_UserPill_me {
.mx_EventTile_highlight .mx_EventTile_content .markdown-body a.mx_UserPill_me,
.mx_EventTile_content .mx_AtRoomPill {
color: $accent-fg-color;
background-color: $mention-user-pill-bg-color;
padding-right: 5px;
@ -39,7 +41,8 @@
}
.mx_UserPill .mx_BaseAvatar,
.mx_RoomPill .mx_BaseAvatar {
.mx_RoomPill .mx_BaseAvatar,
.mx_AtRoomPill .mx_BaseAvatar {
position: relative;
left: -3px;
top: 2px;

View file

@ -1,74 +0,0 @@
/*
Copyright 2017 New Vector 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.
*/
.mx_GroupInviteTile {
position: relative;
cursor: pointer;
font-size: 13px;
display: block;
height: 34px;
}
.mx_GroupInviteTile_nameContainer {
display: inline-block;
width: 180px;
height: 24px;
}
.mx_GroupInviteTile_avatarContainer {
display: inline-block;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 16px;
padding-right: 6px;
width: 24px;
height: 24px;
vertical-align: middle;
}
.mx_GroupInviteTile_name {
display: inline-block;
position: relative;
width: 165px;
vertical-align: middle;
padding-left: 6px;
padding-right: 6px;
padding-top: 2px;
padding-bottom: 3px;
color: $roomtile-name-color;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.mx_GroupInviteTile_badge {
display: inline-block;
min-width: 15px;
height: 15px;
position: absolute;
right: 8px; /*gutter */
top: 9px;
border-radius: 8px;
color: $accent-fg-color;
background-color: $group-alert-color;
font-weight: 600;
font-size: 10px;
text-align: center;
padding-top: 1px;
padding-left: 4px;
padding-right: 4px;
}

View file

@ -19,18 +19,3 @@ limitations under the License.
color: $primary-fg-color;
cursor: pointer;
}
.mx_GroupRoomTile_delete {
opacity: 0.4;
position: absolute;
top: 6px;
right: 10px;
cursor: pointer;
display: none;
}
.mx_GroupRoomTile:hover > .mx_GroupRoomTile_delete {
display: initial;
}

View file

@ -74,7 +74,7 @@ limitations under the License.
margin: 0;
padding: 2px 10px;
// background-color: $e2e-verified-color;
// border-bottom: 1px solid $primary-hairline-color;
border-bottom: 1px solid $primary-hairline-color;
font-size: 10px;
}

View file

@ -57,7 +57,7 @@ limitations under the License.
font-size: 14px;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 135px;
max-width: 155px;
}
.mx_EntityTile_details {

View file

@ -94,3 +94,19 @@ limitations under the License.
cursor: pointer;
}
.mx_MemberInfo label {
font-size: 13px;
}
.mx_MemberInfo label .mx_MemberInfo_label_text {
display: inline-block;
max-width: 180px;
vertical-align: text-top;
}
.mx_MemberInfo input[type="radio"] {
vertical-align: -2px;
margin-right: 5px;
margin-left: 8px;
}

View file

@ -232,3 +232,17 @@ limitations under the License.
.mx_RoomHeader_voipButtons {
margin-top: 18px;
}
.mx_RoomHeader_pinnedButton {
position: relative;
}
.mx_RoomHeader_unreadPinsIndicator {
position: absolute;
right: 0;
bottom: 4px;
width: 8px;
height: 8px;
border-radius: 8px;
background-color: $warning-color;
}

View file

@ -23,7 +23,6 @@ $mention-user-pill-bg-color: #ff0064;
$other-user-pill-bg-color: rgba(0, 0, 0, 0.1);
// groups
$group-alert-color: #774f7e;
$group-my-groups-placeholder-bg: #f7f7f7;
$group-my-groups-placeholder-fg: #888;

View file

@ -100,6 +100,7 @@ limitations under the License.
display: inline;
padding-left: 5px;
padding-right: 5px;
margin-right: 5px;
height: 15px;
border-radius: 11px;
background-color: $plinth-bg-color;

View file

@ -17,3 +17,150 @@ limitations under the License.
.mx_DevTools_RoomStateExplorer_button, .mx_DevTools_RoomStateExplorer_query {
margin-bottom: 10px;
}
.mx_DevTools_label_left {
float: left;
}
.mx_DevTools_label_right {
float: right;
}
.mx_DevTools_label_bottom {
clear: both;
border-bottom: 1px solid #e5e5e5;
}
.mx_DevTools_inputRow
{
display: table-row;
}
.mx_DevTools_inputLabelCell
{
padding-bottom: 21px;
display: table-cell;
font-weight: bold;
padding-right: 24px;
}
.mx_DevTools_inputCell {
display: table-cell;
padding-bottom: 21px;
width: 240px;
}
.mx_DevTools_inputCell input
{
display: inline-block;
border: 0;
border-bottom: 1px solid $input-underline-color;
padding: 0;
width: 240px;
color: $input-fg-color;
font-family: 'Open Sans', Helvetica, Arial, Sans-Serif;
font-size: 16px;
}
.mx_DevTools_tgl {
display: none;
// add default box-sizing for this scope
&,
&:after,
&:before,
& *,
& *:after,
& *:before,
& + .mx_DevTools_tgl-btn {
box-sizing: border-box;
&::selection {
background: none;
}
}
+ .mx_DevTools_tgl-btn {
outline: 0;
display: block;
width: 7em;
height: 2em;
position: relative;
cursor: pointer;
user-select: none;
&:after,
&:before {
position: relative;
display: block;
content: "";
width: 50%;
height: 100%;
}
&:after {
left: 0;
}
&:before {
display: none;
}
}
&:checked + .mx_DevTools_tgl-btn:after {
left: 50%;
}
}
.mx_DevTools_tgl-flip {
+ .mx_DevTools_tgl-btn {
padding: 2px;
transition: all .2s ease;
font-family: sans-serif;
perspective: 100px;
&:after,
&:before {
display: inline-block;
transition: all .4s ease;
width: 100%;
text-align: center;
position: absolute;
line-height: 2em;
font-weight: bold;
color: #fff;
top: 0;
left: 0;
backface-visibility: hidden;
border-radius: 4px;
}
&:after {
content: attr(data-tg-on);
background: #02C66F;
transform: rotateY(-180deg);
}
&:before {
background: #FF3A19;
content: attr(data-tg-off);
}
&:active:before {
transform: rotateY(-20deg);
}
}
&:checked + .mx_DevTools_tgl-btn {
&:before {
transform: rotateY(180deg);
}
&:after {
transform: rotateY(0);
left: 0;
background: #7FC6A6;
}
&:active:after {
transform: rotateY(20deg);
}
}
}

View file

@ -0,0 +1,24 @@
/*
Copyright 2017 New Vector 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.
*/
.mx_InlineSpinner {
display: inline;
}
.mx_InlineSpinner img {
margin: 0px 6px;
vertical-align: -3px;
}