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

Merge remote-tracking branch 'origin/develop' into dbkr/email_notifs

pull/1469/head
David Baker 2016-04-21 10:17:15 +01:00
parent 3cb092051e b8018942fc
commit a72d0c5b7f
45 changed files with 1060 additions and 320 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
CHANGELOG.md
View File

@ -1,3 +1,27 @@
Changes in [0.6.0](https://github.com/vector-im/vector-web/releases/tag/v0.6.0) (2016-04-19)
============================================================================================
[Full Changelog](https://github.com/vector-im/vector-web/compare/v0.5.0...v0.6.0)
* Matthew/design tweaks
[\#1402](https://github.com/vector-im/vector-web/pull/1402)
* Improve handling of notification rules we can't parse
[\#1399](https://github.com/vector-im/vector-web/pull/1399)
* Do less mangling of jenkins builds
[\#1391](https://github.com/vector-im/vector-web/pull/1391)
* Start Notifications component refactor
[\#1386](https://github.com/vector-im/vector-web/pull/1386)
* make the UI fadable to help with decluttering
[\#1376](https://github.com/vector-im/vector-web/pull/1376)
* Get and display a user's pushers in settings
[\#1374](https://github.com/vector-im/vector-web/pull/1374)
* URL previewing support
[\#1343](https://github.com/vector-im/vector-web/pull/1343)
* 😄 Emoji autocomplete and unicode emoji to image conversion using emojione.
[\#1332](https://github.com/vector-im/vector-web/pull/1332)
* Show full-size avatar on MemberInfo avatar click
[\#1340](https://github.com/vector-im/vector-web/pull/1340)
* Numerous other changes via [matrix-react-sdk 0.5.1](https://github.com/matrix-org/matrix-react-sdk/blob/v0.5.1/CHANGELOG.md)
Changes in [0.5.0](https://github.com/vector-im/vector-web/releases/tag/v0.5.0) (2016-03-30)
============================================================================================
[Full Changelog](https://github.com/vector-im/vector-web/compare/v0.4.1...v0.5.0)
@ -71,7 +95,7 @@ Changes in vector v0.1.2 (2015-10-28)
* Better hover-over on member list
* Support CAS auth
* Many other bug fixes
Changes in vector v0.1.1 (2015-08-10)
======================================

19
package.json
View File

@ -1,6 +1,6 @@
{
"name": "vector-web",
"version": "0.5.0",
"version": "0.6.0",
"description": "Vector webapp",
"author": "matrix.org",
"repository": {
@ -16,7 +16,7 @@
"build:css": "catw \"src/skins/vector/css/**/*.css\" -o vector/components.css --no-watch",
"build:compile": "babel --source-maps -d lib src",
"build:bundle": "NODE_ENV=production webpack -p lib/vector/index.js vector/bundle.js",
"build:bundle:dev": "webpack --optimize-occurence-order lib/vector/index.js vector/bundle.js",
"build:bundle:dev": "NODE_ENV=production webpack --optimize-occurence-order lib/vector/index.js vector/bundle.js",
"build": "npm run build:css && npm run build:compile && npm run build:bundle",
"build:dev": "npm run build:css && npm run build:compile && npm run build:bundle:dev",
"package": "scripts/package.sh",
@ -37,7 +37,7 @@
"extract-text-webpack-plugin": "^0.9.1",
"filesize": "^3.1.2",
"flux": "~2.0.3",
"gemini-scrollbar": "matrix-org/gemini-scrollbar#7dc736d",
"gemini-scrollbar": "matrix-org/gemini-scrollbar#87ebaa7",
"gfm.css": "^1.1.1",
"highlight.js": "^9.0.0",
"linkifyjs": "^2.0.0-beta.4",
@ -45,11 +45,11 @@
"matrix-react-sdk": "matrix-org/matrix-react-sdk#develop",
"modernizr": "^3.1.0",
"q": "^1.4.1",
"react": "^0.14.8",
"react-dnd": "^2.0.2",
"react-dnd-html5-backend": "^2.0.0",
"react-dom": "^0.14.2",
"react-gemini-scrollbar": "matrix-org/react-gemini-scrollbar#869a86b",
"react": "^15.0.1",
"react-dnd": "^2.1.4",
"react-dnd-html5-backend": "^2.1.2",
"react-dom": "^15.0.1",
"react-gemini-scrollbar": "matrix-org/react-gemini-scrollbar#c3d942e",
"sanitize-html": "^1.11.1"
},
"devDependencies": {
@ -72,7 +72,8 @@
"mocha": "^2.4.5",
"parallelshell": "^1.2.0",
"phantomjs-prebuilt": "^2.1.7",
"react-addons-test-utils": "^0.14.8",
"react-addons-test-utils": "^15.0.1",
"react-addons-perf": "^15.0",
"rimraf": "^2.4.3",
"source-map-loader": "^0.1.5",
"webpack": "^1.12.14"

4
src/component-index.js
View File

@ -19,6 +19,9 @@ limitations under the License.
* You can edit it you like, but your changes will be overwritten,
* so you'd just be trying to swim upstream like a salmon.
* You are not a salmon.
*
* To update it, run:
* ./reskindex.js -h header
*/
module.exports.components = require('matrix-react-sdk/lib/component-index').components;
@ -29,6 +32,7 @@ module.exports.components['structures.LeftPanel'] = require('./components/struct
module.exports.components['structures.RightPanel'] = require('./components/structures/RightPanel');
module.exports.components['structures.RoomDirectory'] = require('./components/structures/RoomDirectory');
module.exports.components['structures.RoomSubList'] = require('./components/structures/RoomSubList');
module.exports.components['structures.SearchBox'] = require('./components/structures/SearchBox');
module.exports.components['structures.ViewSource'] = require('./components/structures/ViewSource');
module.exports.components['views.elements.ImageView'] = require('./components/views/elements/ImageView');
module.exports.components['views.elements.Spinner'] = require('./components/views/elements/Spinner');

13
src/components/structures/BottomLeftMenu.js
View File

@ -47,12 +47,19 @@ module.exports = React.createClass({
render: function() {
var BottomLeftMenuTile = sdk.getComponent('rooms.BottomLeftMenuTile');
var TintableSvg = sdk.getComponent('elements.TintableSvg');
return (
<div className="mx_BottomLeftMenu">
<div className="mx_BottomLeftMenu_options">
<BottomLeftMenuTile collapsed={ this.props.collapsed } img="img/create-big.svg" label="Start chat" onClick={ this.onCreateRoomClick }/>
<BottomLeftMenuTile collapsed={ this.props.collapsed } img="img/directory-big.svg" label="Directory" onClick={ this.onRoomDirectoryClick }/>
<BottomLeftMenuTile collapsed={ this.props.collapsed } img="img/settings-big.svg" label="Settings" onClick={ this.onSettingsClick }/>
<div className="mx_BottomLeftMenu_createRoom" title="Start chat" onClick={ this.onCreateRoomClick }>
<TintableSvg src="img/icons-create-room.svg" width="24" height="24"/>
</div>
<div className="mx_BottomLeftMenu_directory" title="Room directory" onClick={ this.onRoomDirectoryClick }>
<TintableSvg src="img/icons-directory.svg" width="24" height="24"/>
</div>
<div className="mx_BottomLeftMenu_settings" title="Settings" onClick={ this.onSettingsClick }>
<TintableSvg src="img/icons-settings.svg" width="24" height="24"/>
</div>
</div>
</div>
);

8
src/components/structures/LeftPanel.js
View File

@ -31,6 +31,7 @@ var LeftPanel = React.createClass({
getInitialState: function() {
return {
showCallElement: null,
searchFilter: '',
};
},
@ -84,9 +85,14 @@ var LeftPanel = React.createClass({
}
},
onSearch: function(term) {
this.setState({ searchFilter: term });
},
render: function() {
var RoomList = sdk.getComponent('rooms.RoomList');
var BottomLeftMenu = sdk.getComponent('structures.BottomLeftMenu');
var SearchBox = sdk.getComponent('structures.SearchBox');
var collapseButton;
var classes = "mx_LeftPanel mx_fadable";
@ -110,11 +116,13 @@ var LeftPanel = React.createClass({
return (
<aside className={classes} style={{ opacity: this.props.opacity }}>
<SearchBox collapsed={ this.props.collapsed } onSearch={ this.onSearch } />
{ collapseButton }
{ callPreview }
<RoomList
selectedRoom={this.props.selectedRoom}
collapsed={this.props.collapsed}
searchFilter={this.state.searchFilter}
ConferenceHandler={VectorConferenceHandler} />
<BottomLeftMenu collapsed={this.props.collapsed}/>
</aside>

5
src/components/structures/RightPanel.js
View File

@ -155,7 +155,10 @@ module.exports = React.createClass({
panel = <MemberInfo roomId={this.props.roomId} member={this.state.member} key={this.props.roomId} />
}
}
}
if (!panel) {
panel = <div className="mx_RightPanel_blank"></div>;
}
var classes = "mx_RightPanel mx_fadable";
@ -169,6 +172,8 @@ module.exports = React.createClass({
{ buttonGroup }
</div>
{ panel }
<div className="mx_RightPanel_footer">
</div>
</aside>
);
}

24
src/components/structures/RoomDirectory.js
View File

@ -43,6 +43,14 @@ module.exports = React.createClass({
}
},
componentWillMount: function() {
// dis.dispatch({
// action: 'ui_opacity',
// sideOpacity: 0.3,
// middleOpacity: 0.3,
// });
},
componentDidMount: function() {
var self = this;
MatrixClientPeg.get().publicRooms(function (err, data) {
@ -65,6 +73,14 @@ module.exports = React.createClass({
});
},
componentWillUnmount: function() {
// dis.dispatch({
// action: 'ui_opacity',
// sideOpacity: 1.0,
// middleOpacity: 1.0,
// });
},
showRoom: function(roomId) {
// extract the metadata from the publicRooms structure to pass
// as out-of-band data to view_room, because we get information
@ -113,8 +129,8 @@ module.exports = React.createClass({
var rooms = this.state.publicRooms.filter(function(a) {
// FIXME: if incrementally typing, keep narrowing down the search set
// incrementally rather than starting over each time.
return (((a.name && a.name.toLowerCase().search(filter.toLowerCase()) >= 0) ||
(a.aliases && a.aliases[0].toLowerCase().search(filter.toLowerCase()) >= 0)) &&
return (((a.name && a.name.toLowerCase().search(filter.toLowerCase()) >= 0) ||
(a.aliases && a.aliases[0].toLowerCase().search(filter.toLowerCase()) >= 0)) &&
a.num_joined_members > 0);
}).sort(function(a,b) {
return a.num_joined_members - b.num_joined_members;
@ -197,7 +213,8 @@ 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">
<GeminiScrollbar className="mx_RoomDirectory_tableWrapper"
relayoutOnUpdate={false} >
<table ref="directory_table" className="mx_RoomDirectory_table">
<tbody>
{ this.getRows(this.state.roomAlias) }
@ -209,4 +226,3 @@ module.exports = React.createClass({
);
}
});

23
src/components/structures/RoomSubList.js
View File

@ -65,16 +65,12 @@ var RoomSubList = React.createClass({
selectedRoom: React.PropTypes.string.isRequired,
startAsHidden: React.PropTypes.bool,
showSpinner: React.PropTypes.bool, // true to show a spinner if 0 elements when expanded
// TODO: Fix the name of this. This is too easily confused with the
// "hidden" state which is the expanded (or not) view of the list of rooms.
// What this prop *really* does is control whether the room name is displayed
// so it should be named as such.
collapsed: React.PropTypes.bool.isRequired,
collapsed: React.PropTypes.bool.isRequired, // is LeftPanel collapsed?
onHeaderClick: React.PropTypes.func,
alwaysShowHeader: React.PropTypes.bool,
incomingCall: React.PropTypes.object,
onShowMoreRooms: React.PropTypes.func
onShowMoreRooms: React.PropTypes.func,
searchFilter: React.PropTypes.string,
},
getInitialState: function() {
@ -93,13 +89,20 @@ var RoomSubList = React.createClass({
},
componentWillMount: function() {
this.sortList(this.props.list, this.props.order);
this.sortList(this.applySearchFilter(this.props.list, this.props.searchFilter), this.props.order);
},
componentWillReceiveProps: function(newProps) {
// order the room list appropriately before we re-render
//if (debug) console.log("received new props, list = " + newProps.list);
this.sortList(newProps.list, newProps.order);
this.sortList(this.applySearchFilter(newProps.list, newProps.searchFilter), newProps.order);
},
applySearchFilter: function(list, filter) {
if (filter === "") return list;
return list.filter((room) => {
return room.name && room.name.toLowerCase().indexOf(filter.toLowerCase()) >= 0
});
},
onClick: function(ev) {
@ -278,7 +281,7 @@ var RoomSubList = React.createClass({
return (
<h2 onClick={ this.onClick } className="mx_RoomSubList_label">
{ this.props.collapsed ? '' : this.props.label }
<TintableSvg className="mx_RoomSubList_chevron"
<img className="mx_RoomSubList_chevron"
src={ this.state.hidden ? "img/list-close.svg" : "img/list-open.svg" }
width="10" height="10" />
</h2>

109
src/components/structures/SearchBox.js Normal file
View File

@ -0,0 +1,109 @@
/*
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 React = require('react');
var sdk = require('matrix-react-sdk')
var dis = require('matrix-react-sdk/lib/dispatcher');
var rate_limited_func = require('matrix-react-sdk/lib/ratelimitedfunc');
module.exports = React.createClass({
displayName: 'SearchBox',
propTypes: {
collapsed: React.PropTypes.bool,
onSearch: React.PropTypes.func,
},
getInitialState: function() {
return {
searchTerm: "",
};
},
onChange: function() {
if (!this.refs.search) return;
this.setState({ searchTerm: this.refs.search.value });
this.onSearch();
},
onSearch: new rate_limited_func(
function() {
this.props.onSearch(this.refs.search.value);
},
100
),
onToggleCollapse: function(show) {
if (show) {
dis.dispatch({
action: 'show_left_panel',
});
}
else {
dis.dispatch({
action: 'hide_left_panel',
});
}
},
render: function() {
var TintableSvg = sdk.getComponent('elements.TintableSvg');
var toggleCollapse;
if (this.props.collapsed) {
toggleCollapse =
<div className="mx_SearchBox_maximise" onClick={ this.onToggleCollapse.bind(this, true) }>
<TintableSvg src="img/maximise.svg" width="10" height="16" alt="&lt;"/>
</div>
}
else {
toggleCollapse =
<div className="mx_SearchBox_minimise" onClick={ this.onToggleCollapse.bind(this, false) }>
<TintableSvg src="img/minimise.svg" width="10" height="16" alt="&lt;"/>
</div>
}
var searchControls;
if (!this.props.collapsed) {
searchControls = [
<TintableSvg
key="button"
className="mx_SearchBox_searchButton"
src="img/right_search.svg" width="24" height="24"
/>,
<input
key="searchfield"
type="text"
ref="search"
className="mx_SearchBox_search"
value={ this.state.searchTerm }
onChange={ this.onChange }
placeholder="Search room names"
/>
];
}
var self = this;
return (
<div className="mx_SearchBox">
{ searchControls }
{ toggleCollapse }
</div>
);
}
});

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

@ -34,7 +34,7 @@ module.exports = React.createClass({
});
}
else {
tooltip.style.top = tooltip.parentElement.getBoundingClientRect().top + "px";
tooltip.style.top = (70 + tooltip.parentElement.getBoundingClientRect().top) + "px";
tooltip.style.display = "block";
}
},

185
src/components/views/settings/Notifications.js
View File

@ -27,9 +27,13 @@ var notifications = require('../../../notifications');
// TODO: this "view" component still has far to 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
// is VERY NAUGHTY.
var NotificationUtils = notifications.NotificationUtils;
var VectorPushRulesDefinitions = notifications.VectorPushRulesDefinitions;
var PushRuleVectorState = notifications.PushRuleVectorState;
var ContentRules = notifications.ContentRules;
/**
* Rules that Vector used to set in order to override the actions of default rules.
@ -104,6 +108,7 @@ module.exports = React.createClass({
},
onNotifStateButtonClicked: function(event) {
// FIXME: use .bind() rather than className metadata here surely
var vectorRuleId = event.target.className.split("-")[0];
var newPushRuleVectorState = event.target.className.split("-")[1];
@ -411,7 +416,10 @@ module.exports = React.createClass({
_refreshFromServer: function() {
var self = this;
var pushRulesPromise = MatrixClientPeg.get().getPushRules().then(self._portRulesToNewAPI).done(function(rulesets) {
var pushRulesPromise = MatrixClientPeg.get().getPushRules().then(self._portRulesToNewAPI).then(function(rulesets) {
//console.log("resolving pushRulesPromise");
/// XXX seriously? wtf is this?
MatrixClientPeg.get().pushRules = rulesets;
// Get homeserver default rules and triage them by categories
@ -434,8 +442,6 @@ module.exports = React.createClass({
// HS default rules
var defaultRules = {master: [], vector: {}, others: []};
// Content/keyword rules
var contentRules = {on: [], on_but_disabled:[], loud: [], loud_but_disabled: [], other: []};
for (var kind in rulesets.global) {
for (var i = 0; i < Object.keys(rulesets.global[kind]).length; ++i) {
@ -454,84 +460,25 @@ module.exports = React.createClass({
defaultRules['others'].push(r);
}
}
else if (kind === 'content') {
switch (PushRuleVectorState.contentRuleVectorStateKind(r)) {
case PushRuleVectorState.ON:
if (r.enabled) {
contentRules.on.push(r);
}
else {
contentRules.on_but_disabled.push(r);
}
break;
case PushRuleVectorState.LOUD:
if (r.enabled) {
contentRules.loud.push(r);
}
else {
contentRules.loud_but_disabled.push(r);
}
break;
default:
contentRules.other.push(r);
break;
}
}
}
}
// Decide which content rules to display in Vector UI.
// Vector displays a single global rule for a list of keywords
// whereas Matrix has a push rule per keyword.
// Vector can set the unique rule in ON, LOUD or OFF state.
// Matrix has enabled/disabled plus a combination of (highlight, sound) tweaks.
// The code below determines which set of user's content push rules can be
// displayed by the vector UI.
// Push rules that does not fit, ie defined by another Matrix client, ends
// in self.state.externalContentRules.
// There is priority in the determination of which set will be the displayed one.
// The set with rules that have LOUD tweaks is the first choice. Then, the ones
// with ON tweaks (no tweaks).
if (contentRules.loud.length) {
self.state.vectorContentRules = {
vectorState: PushRuleVectorState.LOUD,
rules: contentRules.loud
}
self.state.externalContentRules = [].concat(contentRules.loud_but_disabled, contentRules.on, contentRules.on_but_disabled, contentRules.other);
}
else if (contentRules.loud_but_disabled.length) {
self.state.vectorContentRules = {
vectorState: PushRuleVectorState.OFF,
rules: contentRules.loud_but_disabled
}
self.state.externalContentRules = [].concat(contentRules.on, contentRules.on_but_disabled, contentRules.other);
}
else if (contentRules.on.length) {
self.state.vectorContentRules = {
vectorState: PushRuleVectorState.ON,
rules: contentRules.on
}
self.state.externalContentRules = [].concat(contentRules.on_but_disabled, contentRules.other);
}
else if (contentRules.on_but_disabled.length) {
self.state.vectorContentRules = {
vectorState: PushRuleVectorState.OFF,
rules: contentRules.on_but_disabled
}
self.state.externalContentRules = contentRules.other;
}
else {
self.state.externalContentRules = contentRules.other;
}
// Get the master rule if any defined by the hs
if (defaultRules.master.length > 0) {
self.state.masterPushRule = defaultRules.master[0];
}
// parse the keyword rules into our state
var contentRules = ContentRules.parseContentRules(rulesets);
self.state.vectorContentRules = {
vectorState: contentRules.vectorState,
rules: contentRules.rules,
};
self.state.externalContentRules = contentRules.externalRules;
// Build the rules displayed in the Vector UI matrix table
self.state.vectorPushRules = [];
self.state.externalPushRules = [];
var vectorRuleIds = [
'.m.rule.contains_display_name',
@ -545,7 +492,6 @@ module.exports = React.createClass({
];
for (var i in vectorRuleIds) {
var vectorRuleId = vectorRuleIds[i];
var ruleDefinition = VectorPushRulesDefinitions[vectorRuleId];
if (vectorRuleId === '_keywords') {
// keywords needs a special handling
@ -558,42 +504,12 @@ module.exports = React.createClass({
});
}
else {
var ruleDefinition = VectorPushRulesDefinitions[vectorRuleId];
var rule = defaultRules.vector[vectorRuleId];
// Translate the rule actions and its enabled value into vector state
var vectorState;
if (rule) {
for (var stateKey in PushRuleVectorState) {
var state = PushRuleVectorState[stateKey];
var vectorStateToActions = ruleDefinition.vectorStateToActions[state];
var vectorState = ruleDefinition.ruleToVectorState(rule);
if (!vectorStateToActions) {
// No defined actions means that this vector state expects a disabled default hs rule
if (rule.enabled === false) {
vectorState = state;
break;
}
}
else {
// The actions must match to the ones expected by vector state
if (JSON.stringify(rule.actions) === JSON.stringify(vectorStateToActions)) {
// And the rule must be enabled.
if (rule.enabled === true) {
vectorState = state;
break;
}
}
}
}
if (!vectorState) {
console.error("Cannot translate rule actions into Vector rule state. Rule: " + rule);
vectorState = PushRuleVectorState.OFF;
}
}
else {
vectorState = PushRuleVectorState.OFF;
}
//console.log("Refreshing vectorPushRules for " + vectorRuleId +", "+ ruleDefinition.description +", " + rule +", " + vectorState);
self.state.vectorPushRules.push({
"vectorRuleId": vectorRuleId,
@ -601,6 +517,12 @@ module.exports = React.createClass({
"rule": rule,
"vectorState": vectorState,
});
// if there was a rule which we couldn't parse, add it to the external list
if (rule && !vectorState) {
rule.description = ruleDefinition.description;
self.state.externalPushRules.push(rule);
}
}
}
@ -610,7 +532,6 @@ module.exports = React.createClass({
'.m.rule.fallback': "Notify me for anything else"
};
self.state.externalPushRules = [];
for (var i in defaultRules.others) {
var rule = defaultRules.others[i];
var ruleDescription = otherRulesDescriptions[rule.rule_id];
@ -624,10 +545,11 @@ module.exports = React.createClass({
});
var pushersPromise = MatrixClientPeg.get().getPushers().then(function(resp) {
//console.log("resolving pushersPromise");
self.setState({pushers: resp.pushers});
});
q.all([pushRulesPromise, pushersPromise]).done(function() {
q.all([pushRulesPromise, pushersPromise]).then(function() {
self.setState({
phase: self.phases.DISPLAY
});
@ -635,7 +557,16 @@ module.exports = React.createClass({
self.setState({
phase: self.phases.ERROR
});
});
}).finally(() => {
// actually explicitly update our state having been deep-manipulating it
self.setState({
masterPushRule: self.state.masterPushRule,
vectorContentRules: self.state.vectorContentRules,
vectorPushRules: self.state.vectorPushRules,
externalContentRules: self.state.externalContentRules,
externalPushRules: self.state.externalPushRules,
});
}).done();
},
_updatePushRuleActions: function(rule, actions, enabled) {
@ -655,7 +586,7 @@ module.exports = React.createClass({
renderNotifRulesTableRow: function(title, className, pushRuleVectorState) {
return (
<tr key = {className}>
<tr key={ className }>
<th>
{title}
</th>
@ -688,6 +619,7 @@ module.exports = React.createClass({
var rows = [];
for (var i in this.state.vectorPushRules) {
var rule = this.state.vectorPushRules[i];
//console.log("rendering: " + rule.description + ", " + rule.vectorRuleId + ", " + rule.vectorState);
rows.push(this.renderNotifRulesTableRow(rule.description, rule.vectorRuleId, rule.vectorState));
}
return rows;
@ -731,13 +663,10 @@ module.exports = React.createClass({
render: function() {
var self = this;
var spinner;
if (this.state.phase === this.phases.LOADING) {
var Loader = sdk.getComponent("elements.Spinner");
return (
<div className="mx_UserSettings_notifTable">
<Loader />
</div>
);
spinner = <Loader />;
}
if (this.state.masterPushRule) {
@ -820,19 +749,21 @@ module.exports = React.createClass({
// and this wouldn't be hard to add.
var rows = [];
for (var i = 0; i < this.state.pushers.length; ++i) {
var p = this.state.pushers[i];
rows.push(<tr key={p.app_id+p.pushkey}>
<td>{p.app_display_name}</td>
<td>{p.device_display_name}</td>
rows.push(<tr key={ i }>
<td>{this.state.pushers[i].app_display_name}</td>
<td>{this.state.pushers[i].device_display_name}</td>
</tr>);
}
devicesSection = (<table className="mx_UserSettings_devicesTable"><thead>
<tr>
<th>Application</th>
<th>Device</th>
</tr></thead>
<tbody>{rows}</tbody>
devicesSection = (<table className="mx_UserSettings_devicesTable">
<thead>
<tr>
<th>Application</th>
<th>Device</th>
</tr>
</thead>
<tbody>
{rows}
</tbody>
</table>);
}
@ -857,6 +788,8 @@ module.exports = React.createClass({
<div className="mx_UserSettings_notifTable">
{ spinner }
<div className="mx_UserNotifSettings_tableRow">
<div className="mx_UserNotifSettings_inputCell">
<input id="enableDesktopNotifications"
@ -901,7 +834,7 @@ module.exports = React.createClass({
<th width="55%"></th>
<th width="15%">Off</th>
<th width="15%">On</th>
<th width="15%">Loud</th>
<th width="15%">Highlight<br/>&amp; sound</th>
</tr>
</thead>
<tbody>

125
src/notifications/ContentRules.js Normal file
View File

@ -0,0 +1,125 @@
/*
Copyright 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 PushRuleVectorState = require('./PushRuleVectorState');
module.exports = {
/**
* Extract the keyword rules from a list of rules, and parse them
* into a form which is useful for Vector's UI.
*
* Returns an object containing:
* rules: the primary list of keyword rules
* vectorState: a PushRuleVectorState indicating whether those rules are
* OFF/ON/LOUD
* externalRules: a list of other keyword rules, with states other than
* vectorState
*/
parseContentRules: function(rulesets) {
// first categorise the keyword rules in terms of their actions
var contentRules = this._categoriseContentRules(rulesets);
// Decide which content rules to display in Vector UI.
// Vector displays a single global rule for a list of keywords
// whereas Matrix has a push rule per keyword.
// Vector can set the unique rule in ON, LOUD or OFF state.
// Matrix has enabled/disabled plus a combination of (highlight, sound) tweaks.
// The code below determines which set of user's content push rules can be
// displayed by the vector UI.
// Push rules that does not fit, ie defined by another Matrix client, ends
// in externalRules.
// There is priority in the determination of which set will be the displayed one.
// The set with rules that have LOUD tweaks is the first choice. Then, the ones
// with ON tweaks (no tweaks).
if (contentRules.loud.length) {
return {
vectorState: PushRuleVectorState.LOUD,
rules: contentRules.loud,
externalRules: [].concat(contentRules.loud_but_disabled, contentRules.on, contentRules.on_but_disabled, contentRules.other),
};
}
else if (contentRules.loud_but_disabled.length) {
return {
vectorState: PushRuleVectorState.OFF,
rules: contentRules.loud_but_disabled,
externalRules: [].concat(contentRules.on, contentRules.on_but_disabled, contentRules.other),
};
}
else if (contentRules.on.length) {
return {
vectorState: PushRuleVectorState.ON,
rules: contentRules.on,
externalRules: [].concat(contentRules.on_but_disabled, contentRules.other),
};
}
else if (contentRules.on_but_disabled.length) {
return {
vectorState: PushRuleVectorState.OFF,
rules: contentRules.on_but_disabled,
externalRules: contentRules.other,
}
} else {
return {
vectorState: PushRuleVectorState.ON,
rules: [],
externalRules: contentRules.other,
}
}
},
_categoriseContentRules: function(rulesets) {
var contentRules = {on: [], on_but_disabled:[], loud: [], loud_but_disabled: [], other: []};
for (var kind in rulesets.global) {
for (var i = 0; i < Object.keys(rulesets.global[kind]).length; ++i) {
var r = rulesets.global[kind][i];
// check it's not a default rule
if (r.rule_id[0] === '.' || kind !== 'content') {
continue;
}
r.kind = kind; // is this needed? not sure
switch (PushRuleVectorState.contentRuleVectorStateKind(r)) {
case PushRuleVectorState.ON:
if (r.enabled) {
contentRules.on.push(r);
}
else {
contentRules.on_but_disabled.push(r);
}
break;
case PushRuleVectorState.LOUD:
if (r.enabled) {
contentRules.loud.push(r);
}
else {
contentRules.loud_but_disabled.push(r);
}
break;
default:
contentRules.other.push(r);
break;
}
}
}
return contentRules;
},
};

48
src/notifications/PushRuleVectorState.js
View File

@ -16,12 +16,10 @@ limitations under the License.
'use strict';
/**
* Enum for state of a push rule as defined by the Vector UI.
* @readonly
* @enum {string}
*/
module.exports = {
var StandardActions = require('./StandardActions');
var NotificationUtils = require('./NotificationUtils');
var states = {
/** The push rule is disabled */
OFF: "off",
@ -31,6 +29,16 @@ module.exports = {
/** The user will receive push notification for this rule with sound and
highlight if this is legitimate */
LOUD: "loud",
};
module.exports = {
/**
* Enum for state of a push rule as defined by the Vector UI.
* @readonly
* @enum {string}
*/
states: states,
/**
* Convert a PushRuleVectorState to a list of actions
@ -39,10 +47,10 @@ module.exports = {
*/
actionsFor: function(pushRuleVectorState) {
if (pushRuleVectorState === this.ON) {
return ACTION_NOTIFY;
return StandardActions.ACTION_NOTIFY;
}
else if (pushRuleVectorState === this.LOUD) {
return ACTION_HIGHLIGHT_DEFAULT_SOUND;
return StandardActions.ACTION_HIGHLIGHT_DEFAULT_SOUND;
}
},
@ -51,20 +59,24 @@ module.exports = {
*
* Determines whether a content rule is in the PushRuleVectorState.ON
* category or in PushRuleVectorState.LOUD, regardless of its enabled
* state. Returns undefined if it does not match these categories.
* state. Returns null if it does not match these categories.
*/
contentRuleVectorStateKind: function(rule) {
var stateKind;
var decoded = NotificationUtils.decodeActions(rule.actions);
if (!decoded) {
return null;
}
// Count tweaks to determine if it is a ON or LOUD rule
var tweaks = 0;
for (var j in rule.actions) {
var action = rule.actions[j];
if (action.set_tweak === 'sound' ||
(action.set_tweak === 'highlight' && action.value)) {
tweaks++;
}
if (decoded.sound) {
tweaks++;
}
if (decoded.highlight) {
tweaks++;
}
var stateKind = null;
switch (tweaks) {
case 0:
stateKind = this.ON;
@ -76,3 +88,7 @@ module.exports = {
return stateKind;
},
};
for (var k in states) {
module.exports[k] = states[k];
};

30
src/notifications/StandardActions.js Normal file
View File

@ -0,0 +1,30 @@
/*
Copyright 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 NotificationUtils = require('./NotificationUtils');
var encodeActions = NotificationUtils.encodeActions;
module.exports = {
ACTION_NOTIFY: encodeActions({notify: true}),
ACTION_NOTIFY_DEFAULT_SOUND: encodeActions({notify: true, sound: "default"}),
ACTION_NOTIFY_RING_SOUND: encodeActions({notify: true, sound: "ring"}),
ACTION_HIGHLIGHT_DEFAULT_SOUND: encodeActions({notify: true, sound: "default", highlight: true}),
ACTION_DONT_NOTIFY: encodeActions({notify: false}),
ACTION_DISABLED: null,
};

108
src/notifications/VectorPushRulesDefinitions.js
View File

@ -16,17 +16,47 @@ limitations under the License.
'use strict';
var NotificationUtils = require('./NotificationUtils');
var StandardActions = require('./StandardActions');
var PushRuleVectorState = require('./PushRuleVectorState');
var encodeActions = NotificationUtils.encodeActions;
var decodeActions = NotificationUtils.decodeActions;
class VectorPushRuleDefinition {
constructor(opts) {
this.kind = opts.kind;
this.description = opts.description;
this.vectorStateToActions = opts.vectorStateToActions;
}
const ACTION_NOTIFY = encodeActions({notify: true});
const ACTION_NOTIFY_DEFAULT_SOUND = encodeActions({notify: true, sound: "default"});
const ACTION_NOTIFY_RING_SOUND = encodeActions({notify: true, sound: "ring"});
const ACTION_HIGHLIGHT_DEFAULT_SOUND = encodeActions({notify: true, sound: "default", highlight: true});
const ACTION_DONT_NOTIFY = encodeActions({notify: false});
const ACTION_DISABLED = null;
// Translate the rule actions and its enabled value into vector state
ruleToVectorState(rule) {
var enabled = false;
var actions = null;
if (rule) {
enabled = rule.enabled;
actions = rule.actions;
}
for (var stateKey in PushRuleVectorState.states) {
var state = PushRuleVectorState.states[stateKey];
var vectorStateToActions = this.vectorStateToActions[state];
if (!vectorStateToActions) {
// No defined actions means that this vector state expects a disabled (or absent) rule
if (!enabled) {
return state;
}
} else {
// The actions must match to the ones expected by vector state
if (enabled && JSON.stringify(rule.actions) === JSON.stringify(vectorStateToActions)) {
return state;
}
}
}
console.error("Cannot translate rule actions into Vector rule state. Rule: " +
JSON.stringify(rule));
return undefined;
}
};
/**
* The descriptions of rules managed by the Vector UI.
@ -34,71 +64,71 @@ const ACTION_DISABLED = null;
module.exports = {
// Messages containing user's display name
// (skip contains_user_name which is too geeky)
".m.rule.contains_display_name": {
".m.rule.contains_display_name": new VectorPushRuleDefinition({
kind: "underride",
description: "Messages containing my name",
vectorStateToActions: { // The actions for each vector state, or null to disable the rule.
on: ACTION_NOTIFY,
loud: ACTION_HIGHLIGHT_DEFAULT_SOUND,
off: ACTION_DISABLED
on: StandardActions.ACTION_NOTIFY,
loud: StandardActions.ACTION_HIGHLIGHT_DEFAULT_SOUND,
off: StandardActions.ACTION_DISABLED
}
},
}),
// Messages just sent to the user in a 1:1 room
".m.rule.room_one_to_one": {
".m.rule.room_one_to_one": new VectorPushRuleDefinition({
kind: "underride",
description: "Messages in one-to-one chats",
vectorStateToActions: {
on: ACTION_NOTIFY,
loud: ACTION_NOTIFY_DEFAULT_SOUND,
off: ACTION_DONT_NOTIFY
on: StandardActions.ACTION_NOTIFY,
loud: StandardActions.ACTION_NOTIFY_DEFAULT_SOUND,
off: StandardActions.ACTION_DONT_NOTIFY
}
},
}),
// Messages just sent to a group chat room
// 1:1 room messages are catched by the .m.rule.room_one_to_one rule if any defined
// By opposition, all other room messages are from group chat rooms.
".m.rule.message": {
".m.rule.message": new VectorPushRuleDefinition({
kind: "underride",
description: "Messages in group chats",
vectorStateToActions: {
on: ACTION_NOTIFY,
loud: ACTION_NOTIFY_DEFAULT_SOUND,
off: ACTION_DONT_NOTIFY
on: StandardActions.ACTION_NOTIFY,
loud: StandardActions.ACTION_NOTIFY_DEFAULT_SOUND,
off: StandardActions.ACTION_DONT_NOTIFY
}
},
}),
// Invitation for the user
".m.rule.invite_for_me": {
".m.rule.invite_for_me": new VectorPushRuleDefinition({
kind: "underride",
description: "When I'm invited to a room",
vectorStateToActions: {
on: ACTION_NOTIFY,
loud: ACTION_NOTIFY_DEFAULT_SOUND,
off: ACTION_DISABLED
on: StandardActions.ACTION_NOTIFY,
loud: StandardActions.ACTION_NOTIFY_DEFAULT_SOUND,
off: StandardActions.ACTION_DISABLED
}
},
}),
// Incoming call
".m.rule.call": {
".m.rule.call": new VectorPushRuleDefinition({
kind: "underride",
description: "Call invitation",
vectorStateToActions: {
on: ACTION_NOTIFY,
loud: ACTION_NOTIFY_RING_SOUND,
off: ACTION_DISABLED
on: StandardActions.ACTION_NOTIFY,
loud: StandardActions.ACTION_NOTIFY_RING_SOUND,
off: StandardActions.ACTION_DISABLED
}
},
}),
// Notifications from bots
".m.rule.suppress_notices": {
".m.rule.suppress_notices": new VectorPushRuleDefinition({
kind: "override",
description: "Messages sent by bot",
vectorStateToActions: {
// .m.rule.suppress_notices is a "negative" rule, we have to invert its enabled value for vector UI
on: ACTION_DISABLED,
loud: ACTION_NOTIFY_DEFAULT_SOUND,
off: ACTION_DONT_NOTIFY,
on: StandardActions.ACTION_DISABLED,
loud: StandardActions.ACTION_NOTIFY_DEFAULT_SOUND,
off: StandardActions.ACTION_DONT_NOTIFY,
}
}
}),
};

1
src/notifications/index.js
View File

@ -20,4 +20,5 @@ module.exports = {
NotificationUtils: require('./NotificationUtils'),
PushRuleVectorState: require('./PushRuleVectorState'),
VectorPushRulesDefinitions: require('./VectorPushRulesDefinitions'),
ContentRules: require('./ContentRules'),
};

25
src/skins/vector/css/matrix-react-sdk/structures/RoomStatusBar.css
View File

@ -1,7 +1,23 @@
/*
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.
*/
.mx_RoomStatusBar {
margin-top: 5px;
margin-top: 15px;
margin-left: 65px;
min-height: 24px;
min-height: 34px;
}
/* position the indicator in the same place horizontally as .mx_EventTile_avatar. */
@ -17,8 +33,9 @@
.mx_RoomStatusBar_placeholderIndicator span {
color: #4a4a4a;
opacity: 0.5;
/*
position: relative;
top: -4px;
/*
animation-duration: 1s;
animation-name: bounce;
animation-direction: alternate;
@ -99,7 +116,7 @@
.mx_RoomStatusBar_tabCompleteWrapper {
display: flex;
display: -webkit-flex;
height: 24px;
height: 26px;
}
.mx_RoomStatusBar_tabCompleteWrapper .mx_TabCompleteBar {

15
src/skins/vector/css/matrix-react-sdk/structures/RoomView.css
View File

@ -36,8 +36,8 @@ limitations under the License.
-webkit-order: 1;
order: 1;
-webkit-flex: 0 0 83px;
flex: 0 0 83px;
-webkit-flex: 0 0 70px;
flex: 0 0 70px;
}
.mx_RoomView_fileDropTarget {
@ -64,7 +64,7 @@ limitations under the License.
border: 2px #e1dddd solid;
border-bottom: none;
position: absolute;
top: 83px;
top: 70px;
bottom: 0px;
z-index: 3000;
}
@ -89,7 +89,7 @@ limitations under the License.
margin: auto;
overflow: auto;
border-bottom: 1px solid #ccc;
border-bottom: 1px solid #e5e5e5;
-webkit-flex: 0 0 auto;
flex: 0 0 auto;
@ -158,7 +158,7 @@ limitations under the License.
margin-bottom: 8px;
margin-left: 63px;
padding-bottom: 6px;
border-bottom: 1px solid #eee;
border-bottom: 1px solid #e5e5e5;
}
.mx_RoomView_invitePrompt {
@ -207,11 +207,12 @@ hr.mx_RoomView_myReadMarker {
.mx_RoomView_statusAreaBox {
max-width: 960px;
margin: auto;
min-height: 36px;
min-height: 60px;
}
.mx_RoomView_statusAreaBox_line {
border-top: 1px solid #eee;
margin-left: 65px;
border-top: 1px solid #e5e5e5;
height: 1px;
}

63
src/skins/vector/css/matrix-react-sdk/structures/SearchBox.css Normal file
View File

@ -0,0 +1,63 @@
/*
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.
*/
.mx_SearchBox {
height: 24px;
margin-left: 16px;
margin-right: 20px;
padding-top: 24px;
padding-bottom: 22px;
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
display: flex;
display: -webkit-flex;
}
.mx_SearchBox_searchButton {
margin-right: 10px;
}
.mx_SearchBox_search {
flex: 1 1 auto;
-webkit-flex: 1 1 auto;
width: 0px;
font-family: 'Open Sans', Arial, Helvetica, Sans-Serif;
font-size: 12px;
margin-top: -2px;
height: 24px;
border: 0px ! important;
/* border-bottom: 1px solid rgba(0, 0, 0, 0.1) ! important; */
background-color: transparent;
border: 0px;
}
.mx_SearchBox_minimise,
.mx_SearchBox_maximise {
margin-top: 3px;
cursor: pointer;
}
.mx_SearchBox_minimise {
margin-left: 10px;
}
.mx_SearchBox_maximise {
margin-left: 9px;
}
.mx_SearchBox object {
pointer-events: none;
}

23
src/skins/vector/css/matrix-react-sdk/structures/UploadBar.css
View File

@ -1,16 +1,33 @@
/*
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.
*/
.mx_UploadBar {
position: relative;
}
.mx_UploadBar_uploadProgressOuter {
height: 4px;
height: 5px;
margin-left: 63px;
margin-top: -1px;
padding-bottom: 5px;
}
.mx_UploadBar_uploadProgressInner {
background-color: #76cfa6;
height: 4px;
height: 5px;
}
.mx_UploadBar_uploadFilename {
@ -22,7 +39,7 @@
.mx_UploadBar_uploadIcon {
float: left;
margin-top: 1px;
margin-top: 5px;
margin-left: 14px;
}

40
src/skins/vector/css/matrix-react-sdk/structures/UserSettings.css
View File

@ -36,8 +36,8 @@ limitations under the License.
-webkit-order: 1;
order: 1;
-webkit-flex: 0 0 83px;
flex: 0 0 83px;
-webkit-flex: 0 0 70px;
flex: 0 0 70px;
}
.mx_UserSettings_body {
@ -50,9 +50,25 @@ limitations under the License.
-webkit-flex: 1 1 0;
flex: 1 1 0;
margin-top: -20px;
overflow-y: auto;
}
.mx_UserSettings h3 {
clear: both;
margin-left: 63px;
text-transform: uppercase;
color: #3d3b39;
font-weight: 600;
font-size: 13px;
margin-top: 26px;
margin-bottom: 10px;
}
.mx_UserSettings_section h3 {
margin-left: 0px;
}
.mx_UserSettings_spinner {
display: inline-block;
vertical-align: middle;
@ -78,22 +94,6 @@ limitations under the License.
cursor: pointer;
}
.mx_UserSettings h2 {
clear: both;
margin-top: 32px;
margin-bottom: 8px;
margin-left: 63px;
padding-bottom: 6px;
border-bottom: 1px solid #eee;
}
.mx_UserSettings h3 {
font-weight: bold;
font-size: 15px;
margin-top: 4px;
margin-bottom: 4px;
}
.mx_UserSettings_section {
margin-left: 63px;
margin-top: 28px;
@ -106,6 +106,10 @@ limitations under the License.
display: table;
}
.mx_UserSettings_notifTable .mx_Spinner {
position: absolute;
}
.mx_UserSettings_profileTable
{
display: table;

1
src/skins/vector/css/matrix-react-sdk/views/rooms/MemberInfo.css
View File

@ -15,6 +15,7 @@ limitations under the License.
*/
.mx_MemberInfo {
margin-top: 20px;
height: 100%;
}

13
src/skins/vector/css/matrix-react-sdk/views/rooms/MemberList.css
View File

@ -17,6 +17,8 @@ limitations under the License.
.mx_MemberList {
height: 100%;
margin-top: 12px;
-webkit-flex: 1;
flex: 1;
@ -77,17 +79,6 @@ limitations under the License.
}
*/
.mx_MemberList_bottom {
order: 4;
flex: 0 0 72px;
-webkit-flex: 0 0 72px;
}
.mx_MemberList_bottomRule {
border-top: 2px solid #e1dddd;
margin-right: 15px;
}
.mx_MemberList_invited h2 {
text-transform: uppercase;
color: #3d3b39;

6
src/skins/vector/css/matrix-react-sdk/views/rooms/MessageComposer.css
View File

@ -18,7 +18,7 @@ limitations under the License.
max-width: 960px;
vertical-align: middle;
margin: auto;
border-top: 2px solid #e1dddd;
border-top: 1px solid #e5e5e5;
}
.mx_MessageComposer_row {
@ -45,7 +45,7 @@ limitations under the License.
display: table-cell;
width: 100%;
vertical-align: middle;
height: 70px;
height: 60px;
text-align: center;
font-style: italic;
color: #888;
@ -55,7 +55,7 @@ limitations under the License.
display: table-cell;
width: 100%;
vertical-align: middle;
height: 70px;
height: 60px;
}
.mx_MessageComposer_input textarea {

17
src/skins/vector/css/matrix-react-sdk/views/rooms/RoomHeader.css
View File

@ -23,8 +23,7 @@ limitations under the License.
.mx_RoomHeader_wrapper {
max-width: 960px;
margin: auto;
height: 83px;
border-bottom: 1px solid #eeeeee;
height: 70px;
-webkit-align-items: center;
align-items: center;
@ -36,10 +35,6 @@ limitations under the License.
display: flex;
}
.mx_RoomHeader_editing .mx_RoomHeader_wrapper {
border-bottom: 1px solid transparent;
}
.mx_RoomHeader_leftRow {
margin-left: -2px;
@ -123,7 +118,7 @@ limitations under the License.
}
.mx_RoomHeader_simpleHeader {
line-height: 83px;
line-height: 70px;
color: #454545;
font-size: 22px;
font-weight: bold;
@ -133,11 +128,8 @@ limitations under the License.
width: 100%;
}
.mx_RoomHeader_simpleHeaderCancel {
.mx_RoomHeader_simpleHeader .mx_RoomHeader_cancelButton {
float: right;
margin-top: 8px;
padding: 24px;
cursor: pointer;
}
.mx_RoomHeader_name {
@ -215,8 +207,9 @@ limitations under the License.
vertical-align: bottom;
float: left;
max-height: 42px;
color: #454545;
color: #A2A2A2;
font-weight: 300;
font-size: 13px;
margin-left: 19px;
margin-right: 16px;
overflow: hidden;

2
src/skins/vector/css/matrix-react-sdk/views/rooms/RoomList.css
View File

@ -15,7 +15,7 @@ limitations under the License.
*/
.mx_RoomList {
padding-top: 24px;
padding-top: 8px;
padding-bottom: 12px;
min-height: 400px;
}

37
src/skins/vector/css/matrix-react-sdk/views/rooms/RoomTile.css
View File

@ -23,10 +23,10 @@ limitations under the License.
.mx_RoomTile_avatar {
display: table-cell;
padding-right: 8px;
padding-right: 11px;
padding-top: 6px;
padding-bottom: 6px;
padding-left: 18px;
padding-left: 20px;
width: 24px;
height: 24px;
position: relative;
@ -38,8 +38,8 @@ limitations under the License.
width: 100%;
vertical-align: middle;
overflow: hidden;
text-overflow: ellipsis;
padding-right: 16px;
word-break: break-word;
padding-right: 19px;
color: rgba(69, 69, 69, 0.8);
}
@ -98,11 +98,13 @@ limitations under the License.
.mx_RoomTile_badge {
background-color: #ff0064;
width: 4px;
width: 8px;
height: 8px;
position: absolute;
left: 0px;
top: 5px;
bottom: 5px;
left: 7px;
top: 50%;
margin-top: -4px;
border-radius: 4px;
}
.mx_RoomTile_unreadNotify .mx_RoomTile_badge {
@ -119,18 +121,35 @@ limitations under the License.
}
.mx_RoomTile_selected .mx_RoomTile_name {
color: #76cfa6 ! important;
padding-right: 23px;
}
.mx_RoomTile_highlight .mx_RoomTile_name {
color: #ff0064 ! important;
}
.mx_RoomTile.mx_RoomTile_selected .mx_RoomTile_avatar {
padding-right: 7px;
}
.mx_RoomTile.mx_RoomTile_selected .mx_RoomTile_name span {
display: inline-block;
position: relative;
width: 100%;
padding: 4px;
margin-top: -4px;
margin-bottom: -4px;
border-radius: 2px;
background-color: rgba(118,207,166,0.2);
}
/*
.mx_RoomTile.mx_RoomTile_selected .mx_RoomTile_name {
background: url('img/selected.png');
background-repeat: no-repeat;
background-position: right center;
}
*/
.mx_RoomTile_arrow {
position: absolute;

3
src/skins/vector/css/matrix-react-sdk/views/rooms/TabCompleteBar.css
View File

@ -21,6 +21,7 @@ limitations under the License.
.mx_TabCompleteBar_item {
display: inline-block;
margin-right: 15px;
margin-bottom: 2px;
cursor: pointer;
}
@ -37,6 +38,7 @@ limitations under the License.
.mx_TabCompleteBar_command .mx_TabCompleteBar_text {
opacity: 1.0;
vertical-align: initial;
color: #fff;
}
@ -47,5 +49,6 @@ limitations under the License.
.mx_TabCompleteBar_text {
color: #4a4a4a;
vertical-align: middle;
opacity: 0.5;
}

2
src/skins/vector/css/matrix-react-sdk/views/rooms/TopUnreadMessagesBar.css
View File

@ -19,7 +19,7 @@ limitations under the License.
max-width: 960px;
padding-top: 5px;
padding-bottom: 5px;
border-bottom: 1px solid #eee;
border-bottom: 1px solid #e5e5e5;
}
.mx_TopUnreadMessagesBar_scrollUp {

45
src/skins/vector/css/vector-web/structures/LeftPanel.css
View File

@ -58,23 +58,40 @@ limitations under the License.
-webkit-order: 3;
order: 3;
-webkit-flex: 0 0 140px;
flex: 0 0 140px;
background-color: rgba(118,207,166,0.2);
border-top: 1px solid rgba(0, 0, 0, 0.1);
margin-left: 20px;
margin-right: 20px;
-webkit-flex: 0 0 60px;
flex: 0 0 60px;
}
.mx_LeftPanel .mx_BottomLeftMenu .mx_RoomTile {
color: #454545;
.mx_LeftPanel .mx_BottomLeftMenu_options {
margin-top: 18px;
}
.mx_LeftPanel .mx_BottomLeftMenu .mx_BottomLeftMenu_options {
margin-top: 15px;
width: 100%;
.mx_BottomLeftMenu_options object {
pointer-events: none;
}
.mx_LeftPanel .mx_BottomLeftMenu img {
border-radius: 0px;
background-color: transparent;
vertical-align: middle;
}
.mx_LeftPanel .mx_BottomLeftMenu_createRoom,
.mx_LeftPanel .mx_BottomLeftMenu_directory,
.mx_LeftPanel .mx_BottomLeftMenu_settings {
display: inline-block;
cursor: pointer;
}
.collapsed .mx_BottomLeftMenu_createRoom,
.collapsed .mx_BottomLeftMenu_directory,
.collapsed .mx_BottomLeftMenu_settings {
margin-left: 0px ! important;
padding-top: 3px ! important;
padding-bottom: 3px ! important;
}
.mx_LeftPanel .mx_BottomLeftMenu_directory {
margin-left: 10px;
}
.mx_LeftPanel .mx_BottomLeftMenu_settings {
float: right;
}

28
src/skins/vector/css/vector-web/structures/RightPanel.css
View File

@ -33,14 +33,17 @@ limitations under the License.
-webkit-order: 1;
order: 1;
-webkit-flex: 0 0 83px;
flex: 0 0 83px;
border-bottom: 1px solid #e5e5e5;
margin-right: 20px;
-webkit-flex: 0 0 70px;
flex: 0 0 70px;
}
/** Fixme - factor this out with the main header **/
.mx_RightPanel_headerButtonGroup {
margin-top: 32px;
margin-top: 25px;
float: left;
background-color: #fff;
margin-left: -4px;
@ -83,10 +86,27 @@ limitations under the License.
}
.mx_RightPanel .mx_MemberList,
.mx_RightPanel .mx_MemberInfo {
.mx_RightPanel .mx_MemberInfo,
.mx_RightPanel_blank {
-webkit-box-ordinal-group: 2;
-moz-box-ordinal-group: 2;
-ms-flex-order: 2;
-webkit-order: 2;
order: 2;
flex: 1;
-webkit-flex: 1;
}
.mx_RightPanel_footer {
-webkit-box-ordinal-group: 3;
-moz-box-ordinal-group: 3;
-ms-flex-order: 3;
-webkit-order: 3;
order: 3;
border-top: 1px solid #e5e5e5;
margin-right: 20px;
-webkit-flex: 0 0 60px;
flex: 0 0 60px;
}

2
src/skins/vector/css/vector-web/structures/RoomDirectory.css
View File

@ -22,6 +22,8 @@ limitations under the License.
margin-bottom: 12px;
color: #4a4a4a;
border-top: 1px solid #c5c5c5;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;

5
src/skins/vector/css/vector-web/structures/RoomSubList.css
View File

@ -29,13 +29,14 @@ limitations under the License.
padding-right: 12px;
margin-top: 8px;
margin-bottom: 4px;
cursor: pointer;
}
.mx_RoomSubList_chevron {
padding-left: 5px;
padding-left: 4px;
pointer-events: none;
}
.collapsed .mx_RoomSubList_chevron {
padding-left: 13px;
padding-left: 12px;
}

20
src/skins/vector/img/icons-create-room.svg Normal file
View File

@ -0,0 +1,20 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
<!-- Generator: sketchtool 3.5.1 (25234) - http://www.bohemiancoding.com/sketch -->
<title>icons_create_room</title>
<desc>Created with sketchtool.</desc>
<defs></defs>
<g id="03-Input" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<g id="03_4-Uploading" sketch:type="MSArtboardGroup" transform="translate(-20.000000, -726.000000)">
<g id="Room-list" sketch:type="MSLayerGroup">
<g id="Room-list/Footer" transform="translate(0.000000, 708.000000)" sketch:type="MSShapeGroup">
<g id="icons_create_room" transform="translate(20.000000, 18.000000)">
<circle id="Oval-1-Copy-7" fill="#76CFA6" cx="12" cy="12" r="12"></circle>
<path d="M7,12 L17,12" id="Line" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round"></path>
<path d="M12,7 L12,17" id="Line" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round"></path>
</g>
</g>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

21
src/skins/vector/img/icons-directory.svg Normal file
View File

@ -0,0 +1,21 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
<!-- Generator: sketchtool 3.5.1 (25234) - http://www.bohemiancoding.com/sketch -->
<title>icons_directory</title>
<desc>Created with sketchtool.</desc>
<defs></defs>
<g id="03-Input" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<g id="03_4-Uploading" sketch:type="MSArtboardGroup" transform="translate(-54.000000, -726.000000)">
<g id="Room-list" sketch:type="MSLayerGroup">
<g id="Room-list/Footer" transform="translate(0.000000, 708.000000)" sketch:type="MSShapeGroup">
<g id="icons_directory" transform="translate(54.000000, 18.000000)">
<ellipse id="Oval-1-Copy-7" fill="#76CFA6" cx="12.48" cy="12" rx="11.52" ry="12"></ellipse>
<path d="M10.919715,8.29307518 C10.8407601,8.29307518 10.7883135,8.12984737 10.7170546,7.88143019 C10.616152,7.53041266 10.4645131,7 9.9312114,7 L7.38327791,7 C7.02270784,7 6.73168646,7.30842284 6.72057007,7.70887507 L6.72,17.2758903 C6.72,17.6754098 7.01786223,18 7.38327791,18 L17.5770071,18 C17.9424228,18 18.24,17.6754098 18.24,17.2758903 L18.24,9.01687394 C18.24,8.61766535 17.9424228,8.29307518 17.5770071,8.29307518 L10.919715,8.29307518 Z M17.28,16.7470688 C17.28,16.8865013 17.1755713,17 17.0471522,17 L6.95341227,17 C6.82499318,17 6.72,16.8865013 6.72,16.7470688 L6.72056448,10 L17.28,10 L17.28,16.7470688 L17.28,16.7470688 Z M17.28,9 L6.72,9 L6.72,7.20209147 C6.72395157,7.0886985 6.82641007,7 6.95286024,7 L9.47593617,7 C9.67210328,7 9.74040895,7.13682752 9.84964157,7.44903616 C9.93826959,7.70177649 10.0596392,8.04800302 10.4547959,8.04800302 L17.0471398,8.04800302 C17.1755657,8.04800302 17.28,8.14148923 17.28,8.25664609 L17.28,9 L17.28,9 Z" id="Fill-137"></path>
<path d="M18,17 C18,16.8865013 17.8912201,17 18,17 L7,17 C7.1093679,17 7,16.8865013 7,17 L7,10 L18,10 L18,17 L18,17 Z" id="Path-Copy-2" fill="#FFFFFF"></path>
<path d="M7,9 L7,7 C7.00411622,7.0886985 7.11084382,7 7,7 L10,7 C10.0751076,7 10.1462593,7.13682752 10,7 C10.3523642,7.70177649 10.4787908,8.04800302 11,8 L18,8 C17.8912143,8.04800302 18,8.14148923 18,8 L18,9 L7,9 Z" id="Path-Copy" fill="#FFFFFF"></path>
</g>
</g>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.5 KiB

17
src/skins/vector/img/icons-settings.svg Normal file
View File

@ -0,0 +1,17 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
<!-- Generator: sketchtool 3.5.1 (25234) - http://www.bohemiancoding.com/sketch -->
<title>icons_settings</title>
<desc>Created with sketchtool.</desc>
<defs></defs>
<g id="09-Invitations-and-joining" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<g id="09_1-Invite-members" sketch:type="MSArtboardGroup" transform="translate(-886.000000, -25.000000)">
<g id="Room-header" sketch:type="MSLayerGroup" transform="translate(210.000000, 0.000000)">
<g id="icons_settings" transform="translate(676.000000, 25.000000)" sketch:type="MSShapeGroup">
<circle id="Oval-1-Copy-7" fill="#76CFA6" cx="12" cy="12" r="12"></circle>
<path d="M15,12 C15,11.1718709 14.7070342,10.4648467 14.1210938,9.87890625 C13.5351533,9.29296582 12.8281291,9 12,9 C11.1718709,9 10.4648467,9.29296582 9.87890625,9.87890625 C9.29296582,10.4648467 9,11.1718709 9,12 C9,12.8281291 9.29296582,13.5351533 9.87890625,14.1210938 C10.4648467,14.7070342 11.1718709,15 12,15 C12.8281291,15 13.5351533,14.7070342 14.1210938,14.1210938 C14.7070342,13.5351533 15,12.8281291 15,12 L15,12 Z M19,11.0065104 L19,13.0299479 C19,13.1028649 18.9756947,13.1727427 18.9270833,13.2395833 C18.878472,13.3064239 18.8177087,13.3459201 18.7447917,13.3580729 L17.0585938,13.6132812 C16.9431418,13.9414079 16.8246534,14.2178808 16.703125,14.4427083 C16.9157997,14.7465293 17.2408832,15.1657959 17.6783854,15.7005208 C17.7391496,15.7734379 17.7695312,15.849392 17.7695312,15.9283854 C17.7695312,16.0073789 17.7421878,16.0772566 17.6875,16.1380208 C17.5234367,16.3628483 17.2226584,16.6909701 16.7851562,17.1223958 C16.3476541,17.5538216 16.0620666,17.7695312 15.9283854,17.7695312 C15.8554684,17.7695312 15.7764761,17.7421878 15.6914062,17.6875 L14.4335938,16.703125 C14.1662313,16.8428826 13.8897584,16.9583329 13.6041667,17.0494792 C13.506944,17.8758722 13.4188372,18.4409707 13.3398438,18.7447917 C13.2973088,18.9149314 13.1879349,19 13.0117188,19 L10.9882812,19 C10.9032114,19 10.8287764,18.9741756 10.764974,18.922526 C10.7011716,18.8708765 10.6662327,18.805556 10.6601562,18.7265625 L10.4049479,17.0494792 C10.1072034,16.9522565 9.83376861,16.8398444 9.58463542,16.7122396 L8.29947917,17.6875 C8.23871497,17.7421878 8.16276087,17.7695312 8.07161458,17.7695312 C7.98654471,17.7695312 7.91059061,17.7361114 7.84375,17.6692708 C7.07812117,16.976559 6.5768241,16.4661475 6.33984375,16.1380208 C6.29730882,16.0772566 6.27604167,16.0073789 6.27604167,15.9283854 C6.27604167,15.8554684 6.30034698,15.7855906 6.34895833,15.71875 C6.44010462,15.5911452 6.59505099,15.3891073 6.81380208,15.1126302 C7.03255318,14.8361531 7.19661404,14.6219626 7.30598958,14.4700521 C7.14192626,14.1662311 7.01736154,13.8654529 6.93229167,13.5677083 L5.26432292,13.3216146 C5.18532947,13.3094617 5.12152802,13.2714847 5.07291667,13.2076823 C5.02430531,13.1438799 5,13.072483 5,12.9934896 L5,10.9700521 C5,10.8971351 5.02430531,10.8272573 5.07291667,10.7604167 C5.12152802,10.6935761 5.17925314,10.6540799 5.24609375,10.6419271 L6.94140625,10.3867188 C7.02647612,10.1072035 7.14496452,9.82769237 7.296875,9.54817708 C7.05381823,9.20182118 6.72873467,8.78255454 6.32161458,8.29036458 C6.26085039,8.21744755 6.23046875,8.14453161 6.23046875,8.07161458 C6.23046875,8.01085039 6.25781223,7.94097262 6.3125,7.86197917 C6.4704869,7.64322807 6.76974606,7.31662544 7.21028646,6.88216146 C7.65082686,6.44769748 7.93793336,6.23046875 8.07161458,6.23046875 C8.15060803,6.23046875 8.2296003,6.26085039 8.30859375,6.32161458 L9.56640625,7.296875 C9.8337687,7.15711736 10.1102416,7.04166712 10.3958333,6.95052083 C10.493056,6.12412781 10.5811628,5.5590293 10.6601562,5.25520833 C10.7026912,5.08506859 10.8120651,5 10.9882812,5 L13.0117188,5 C13.0967886,5 13.1712236,5.02582439 13.235026,5.07747396 C13.2988284,5.12912352 13.3337673,5.19444405 13.3398438,5.2734375 L13.5950521,6.95052083 C13.8927966,7.04774354 14.1662314,7.16015561 14.4153646,7.28776042 L15.7096354,6.3125 C15.7643232,6.25781223 15.8372391,6.23046875 15.9283854,6.23046875 C16.0073789,6.23046875 16.083333,6.26085039 16.15625,6.32161458 C16.9401081,7.04470848 17.4414052,7.56119637 17.6601562,7.87109375 C17.7026912,7.9197051 17.7239583,7.98654471 17.7239583,8.07161458 C17.7239583,8.14453161 17.699653,8.21440939 17.6510417,8.28125 C17.5598954,8.4088548 17.404949,8.61089271 17.1861979,8.88736979 C16.9674468,9.16384687 16.803386,9.37803743 16.6940104,9.52994792 C16.8519973,9.83376888 16.976562,10.131509 17.0677083,10.4231771 L18.7356771,10.6783854 C18.8146705,10.6905383 18.878472,10.7285153 18.9270833,10.7923177 C18.9756947,10.8561201 19,10.927517 19,11.0065104 L19,11.0065104 Z" id="icons_settings-copy" fill="#FFFFFF"></path>
</g>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 4.9 KiB

25
src/skins/vector/img/list-close.svg
View File

@ -1,10 +1,15 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
<!-- Generator: Sketch 3.4.2 (15857) - http://www.bohemiancoding.com/sketch -->
<title>Slice 1</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<path d="M0,5 L20,5 L10,15 L0,5 Z" id="Triangle-1" fill="#76CFA6" sketch:type="MSShapeGroup" transform="translate(10.000000, 10.000000) rotate(-90.000000) translate(-10.000000, -10.000000) "></path>
</g>
</svg>
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="-249 251 20 20"
style="enable-background:new -249 251 20 20;" xml:space="preserve">
<style type="text/css">
.st0{opacity:0.2;}
.st1{fill:#444444;}
</style>
<title>Slice 1</title>
<desc>Created with Sketch.</desc>
<g id="Page-1" sketch:type="MSPage" class="st0">
<path id="Triangle-1" sketch:type="MSShapeGroup" class="st1" d="M-245,270v-18l12,9L-245,270z"/>
</g>
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 748 B

After

Width:  |  Height:  |  Size: 716 B

25
src/skins/vector/img/list-open.svg
View File

@ -1,10 +1,15 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
<!-- Generator: Sketch 3.4.2 (15857) - http://www.bohemiancoding.com/sketch -->
<title>Slice 1</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<path d="M0,5 L20,5 L10,15 L0,5 Z" id="Triangle-1" fill="#76CFA6" sketch:type="MSShapeGroup"></path>
</g>
</svg>
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="-249 251 20 20"
style="enable-background:new -249 251 20 20;" xml:space="preserve">
<style type="text/css">
.st0{opacity:0.2;}
.st1{fill:#444444;}
</style>
<title>Slice 1</title>
<desc>Created with Sketch.</desc>
<g id="Page-1" sketch:type="MSPage" class="st0">
<path id="Triangle-1" sketch:type="MSShapeGroup" class="st1" d="M-248,255h18l-9,12L-248,255z"/>
</g>
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 650 B

After

Width:  |  Height:  |  Size: 716 B

19
src/skins/vector/img/maximise.svg Normal file
View File

@ -0,0 +1,19 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="-254 253 10 16"
style="enable-background:new -254 253 10 16;" xml:space="preserve">
<title>minimise</title>
<desc>Created with sketchtool.</desc>
<g id="_x30_2-Chat" sketch:type="MSPage">
<g id="_x30_2_x5F_1-Chat-collapsed-w-topic" transform="translate(-176.000000, -27.000000)" sketch:type="MSArtboardGroup">
<g id="Room-list" sketch:type="MSLayerGroup">
<g id="Room-list_x2F_Header" sketch:type="MSShapeGroup">
<g id="minimise" transform="translate(172.000000, 25.000000)">
<path id="Path-53-Copy" fill="none" stroke-width="2" stroke="#76CFA6" d="M-248.7,256.3l5.7,5.7l-5.7,5.7"/>
</g>
</g>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 987 B

18
src/skins/vector/img/minimise.svg Normal file
View File

@ -0,0 +1,18 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="10px" height="16px" viewBox="-1 -1 10 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
<!-- Generator: sketchtool 3.5.1 (25234) - http://www.bohemiancoding.com/sketch -->
<title>minimise</title>
<desc>Created with sketchtool.</desc>
<defs></defs>
<g id="02-Chat" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<g id="02_1-Chat-collapsed-w-topic" sketch:type="MSArtboardGroup" transform="translate(-176.000000, -27.000000)" stroke-width="2" stroke="#76CFA6">
<g id="Room-list" sketch:type="MSLayerGroup">
<g id="Room-list/Header" sketch:type="MSShapeGroup">
<g id="minimise" transform="translate(172.000000, 25.000000)">
<path d="M7,5 L15,5 L15,13" id="Path-53-Copy" transform="translate(11.000000, 9.000000) scale(-1, -1) rotate(-315.000000) translate(-11.000000, -9.000000) "></path>
</g>
</g>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

17
src/skins/vector/img/right_search.svg Normal file
View File

@ -0,0 +1,17 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 3.7 (28169) - http://www.bohemiancoding.com/sketch -->
<title>right_search</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Room-header/Vector-Design" transform="translate(-710.000000, -25.000000)">
<g id="right_search" transform="translate(710.000000, 25.000000)">
<g id="Oval-1-Copy-7-+-Group-Copy-5-Copy-Copy-Copy-Copy-Copy-Copy-Copy-Copy-Copy-Copy" fill="#76CFA6">
<circle id="Oval-1-Copy-7" cx="12" cy="12" r="12"></circle>
</g>
<path d="M14,10.5 C14,9.53645352 13.6575555,8.71224301 12.9726562,8.02734375 C12.287757,7.34244449 11.4635465,7 10.5,7 C9.53645352,7 8.71224301,7.34244449 8.02734375,8.02734375 C7.34244449,8.71224301 7,9.53645352 7,10.5 C7,11.4635465 7.34244449,12.287757 8.02734375,12.9726562 C8.71224301,13.6575555 9.53645352,14 10.5,14 C11.4635465,14 12.287757,13.6575555 12.9726562,12.9726562 C13.6575555,12.287757 14,11.4635465 14,10.5 L14,10.5 Z M18,17 C18,17.2708347 17.9010427,17.5052073 17.703125,17.703125 C17.5052073,17.9010427 17.2708347,18 17,18 C16.7187486,18 16.4843759,17.9010427 16.296875,17.703125 L13.6171875,15.03125 C12.6848912,15.6770866 11.6458391,16 10.5,16 C9.75520461,16 9.04297215,15.8554702 8.36328125,15.5664062 C7.68359035,15.2773423 7.09765871,14.8867212 6.60546875,14.3945312 C6.11327879,13.9023413 5.7226577,13.3164096 5.43359375,12.6367188 C5.1445298,11.9570279 5,11.2447954 5,10.5 C5,9.75520461 5.1445298,9.04297215 5.43359375,8.36328125 C5.7226577,7.68359035 6.11327879,7.09765871 6.60546875,6.60546875 C7.09765871,6.11327879 7.68359035,5.7226577 8.36328125,5.43359375 C9.04297215,5.1445298 9.75520461,5 10.5,5 C11.2447954,5 11.9570279,5.1445298 12.6367188,5.43359375 C13.3164096,5.7226577 13.9023413,6.11327879 14.3945312,6.60546875 C14.8867212,7.09765871 15.2773423,7.68359035 15.5664062,8.36328125 C15.8554702,9.04297215 16,9.75520461 16,10.5 C16,11.6458391 15.6770866,12.6848912 15.03125,13.6171875 L17.7109375,16.296875 C17.9036468,16.4895843 18,16.723957 18,17 L18,17 Z" id="" fill="#FFFFFF"></path>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.4 KiB

9
src/vector/index.js
View File

@ -27,8 +27,15 @@ require('gemini-scrollbar/gemini-scrollbar.css');
require('gfm.css/gfm.css');
require('highlight.js/styles/github.css');
// add React and ReactPerf to the global namespace, to make them easier to
// access via the console
global.React = require("react");
if (process.env.NODE_ENV !== 'production') {
global.ReactPerf = require("react-addons-perf");
}
var RunModernizrTests = require("./modernizr"); // this side-effects a global
var React = require("react");
var ReactDOM = require("react-dom");
var sdk = require("matrix-react-sdk");
sdk.loadSkin(require('../component-index'));

117
test/unit-tests/notifications/ContentRules-test.js Normal file
View File

@ -0,0 +1,117 @@
/*
Copyright 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.
*/
var notifications = require('notifications');
var ContentRules = notifications.ContentRules;
var PushRuleVectorState = notifications.PushRuleVectorState;
var expect = require('expect');
var test_utils = require('../../test-utils');
var NORMAL_RULE = {
actions: [
"notify",
{ set_tweak: "highlight", value: false },
],
enabled: true,
pattern: "vdh2",
rule_id: "vdh2",
};
var LOUD_RULE = {
actions: [
"notify",
{ set_tweak: "highlight" },
{ set_tweak: "sound", value: "default" },
],
enabled: true,
pattern: "vdh2",
rule_id: "vdh2",
};
var USERNAME_RULE = {
actions: [
"notify",
{ set_tweak: "sound", value: "default" },
{ set_tweak: "highlight" },
],
default: true,
enabled: true,
pattern: "richvdh",
rule_id: ".m.rule.contains_user_name",
};
describe("ContentRules", function() {
beforeEach(function() {
test_utils.beforeEach(this);
});
describe("parseContentRules", function() {
it("should handle there being no keyword rules", function() {
var rules = { 'global': { 'content': [
USERNAME_RULE,
]}};
var parsed = ContentRules.parseContentRules(rules);
expect(parsed.rules).toEqual([]);
expect(parsed.vectorState).toEqual(PushRuleVectorState.ON);
expect(parsed.externalRules).toEqual([]);
});
it("should parse regular keyword notifications", function() {
var rules = { 'global': { 'content': [
NORMAL_RULE,
USERNAME_RULE,
]}};
var parsed = ContentRules.parseContentRules(rules);
expect(parsed.rules.length).toEqual(1);
expect(parsed.rules[0]).toEqual(NORMAL_RULE);
expect(parsed.vectorState).toEqual(PushRuleVectorState.ON);
expect(parsed.externalRules).toEqual([]);
});
it("should parse loud keyword notifications", function() {
var rules = { 'global': { 'content': [
LOUD_RULE,
USERNAME_RULE,
]}};
var parsed = ContentRules.parseContentRules(rules);
expect(parsed.rules.length).toEqual(1);
expect(parsed.rules[0]).toEqual(LOUD_RULE);
expect(parsed.vectorState).toEqual(PushRuleVectorState.LOUD);
expect(parsed.externalRules).toEqual([]);
});
it("should parse mixed keyword notifications", function() {
var rules = { 'global': { 'content': [
LOUD_RULE,
NORMAL_RULE,
USERNAME_RULE,
]}};
var parsed = ContentRules.parseContentRules(rules);
expect(parsed.rules.length).toEqual(1);
expect(parsed.rules[0]).toEqual(LOUD_RULE);
expect(parsed.vectorState).toEqual(PushRuleVectorState.LOUD);
expect(parsed.externalRules.length).toEqual(1);
expect(parsed.externalRules[0]).toEqual(NORMAL_RULE);
});
});
});

34
test/unit-tests/notifications/PushRuleVectorState-test.js
View File

@ -23,8 +23,40 @@ var expect = require('expect');
describe("PushRuleVectorState", function() {
describe("contentRuleVectorStateKind", function() {
it("should understand normal notifications", function () {
expect(prvs.contentRuleVectorStateKind(["notify"])).
var rule = {
actions: [
"notify",
],
};
expect(prvs.contentRuleVectorStateKind(rule)).
toEqual(prvs.ON);
});
it("should handle loud notifications", function () {
var rule = {
actions: [
"notify",
{ set_tweak: "highlight", value: true },
{ set_tweak: "sound", value: "default" },
]
};
expect(prvs.contentRuleVectorStateKind(rule)).
toEqual(prvs.LOUD);
});
it("should understand missing highlight.value", function () {
var rule = {
actions: [
"notify",
{ set_tweak: "highlight" },
{ set_tweak: "sound", value: "default" },
]
};
expect(prvs.contentRuleVectorStateKind(rule)).
toEqual(prvs.LOUD);
});
});
});

1
webpack.config.js
View File

@ -41,6 +41,7 @@ module.exports = {
// alias any requires to the react module to the one in our path, otherwise
// we tend to get the react source included twice when using npm link.
react: path.resolve('./node_modules/react'),
"react-addons-perf": path.resolve('./node_modules/react-addons-perf'),
// same goes for js-sdk
"matrix-js-sdk": path.resolve('./node_modules/matrix-js-sdk'),