From 4d221c609981945d612c6d8d0c2cca937e16cf1f Mon Sep 17 00:00:00 2001 From: Matthew Hodgson Date: Thu, 14 Apr 2016 18:15:51 +0100 Subject: [PATCH 01/42] spell out that images are clickable --- .../css/matrix-react-sdk/views/rooms/LinkPreviewWidget.css | 1 + 1 file changed, 1 insertion(+) diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/LinkPreviewWidget.css b/src/skins/vector/css/matrix-react-sdk/views/rooms/LinkPreviewWidget.css index 8a92ae4c..93372424 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/rooms/LinkPreviewWidget.css +++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/LinkPreviewWidget.css @@ -29,6 +29,7 @@ limitations under the License. flex: 0 0 100px; margin-left: 15px; text-align: center; + cursor: pointer; } .mx_LinkPreviewWidget_caption { From 8b6cf1fc4127093a64e88a56d6f1203b380a3bbc Mon Sep 17 00:00:00 2001 From: Matthew Hodgson Date: Thu, 14 Apr 2016 19:11:58 +0100 Subject: [PATCH 02/42] change badge look & feel; change status bar sizing --- .../matrix-react-sdk/structures/RoomStatusBar.css | 6 +++--- .../css/matrix-react-sdk/structures/RoomView.css | 3 ++- .../css/matrix-react-sdk/structures/UploadBar.css | 7 ++++--- .../matrix-react-sdk/views/rooms/MessageComposer.css | 2 +- .../css/matrix-react-sdk/views/rooms/RoomTile.css | 12 +++++++----- .../matrix-react-sdk/views/rooms/TabCompleteBar.css | 1 + 6 files changed, 18 insertions(+), 13 deletions(-) diff --git a/src/skins/vector/css/matrix-react-sdk/structures/RoomStatusBar.css b/src/skins/vector/css/matrix-react-sdk/structures/RoomStatusBar.css index 0f6955ce..45d16426 100644 --- a/src/skins/vector/css/matrix-react-sdk/structures/RoomStatusBar.css +++ b/src/skins/vector/css/matrix-react-sdk/structures/RoomStatusBar.css @@ -1,7 +1,7 @@ .mx_RoomStatusBar { - margin-top: 5px; + margin-top: 12px; margin-left: 65px; - min-height: 24px; + min-height: 37px; } /* position the indicator in the same place horizontally as .mx_EventTile_avatar. */ @@ -99,7 +99,7 @@ .mx_RoomStatusBar_tabCompleteWrapper { display: flex; display: -webkit-flex; - height: 24px; + height: 26px; } .mx_RoomStatusBar_tabCompleteWrapper .mx_TabCompleteBar { diff --git a/src/skins/vector/css/matrix-react-sdk/structures/RoomView.css b/src/skins/vector/css/matrix-react-sdk/structures/RoomView.css index 4c014461..6656767d 100644 --- a/src/skins/vector/css/matrix-react-sdk/structures/RoomView.css +++ b/src/skins/vector/css/matrix-react-sdk/structures/RoomView.css @@ -207,10 +207,11 @@ hr.mx_RoomView_myReadMarker { .mx_RoomView_statusAreaBox { max-width: 960px; margin: auto; - min-height: 36px; + min-height: 49px; } .mx_RoomView_statusAreaBox_line { + margin-left: 65px; border-top: 1px solid #eee; height: 1px; } diff --git a/src/skins/vector/css/matrix-react-sdk/structures/UploadBar.css b/src/skins/vector/css/matrix-react-sdk/structures/UploadBar.css index 5a22e91c..1a7ce47e 100644 --- a/src/skins/vector/css/matrix-react-sdk/structures/UploadBar.css +++ b/src/skins/vector/css/matrix-react-sdk/structures/UploadBar.css @@ -3,14 +3,15 @@ } .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 +23,7 @@ .mx_UploadBar_uploadIcon { float: left; - margin-top: 1px; + margin-top: 5px; margin-left: 14px; } diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/MessageComposer.css b/src/skins/vector/css/matrix-react-sdk/views/rooms/MessageComposer.css index 9ed5f1cb..6299a0f6 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/rooms/MessageComposer.css +++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/MessageComposer.css @@ -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 { diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomTile.css b/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomTile.css index d62c5d17..e1e8b312 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomTile.css +++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomTile.css @@ -26,7 +26,7 @@ limitations under the License. padding-right: 8px; padding-top: 6px; padding-bottom: 6px; - padding-left: 18px; + padding-left: 20px; width: 24px; height: 24px; position: relative; @@ -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 { diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/TabCompleteBar.css b/src/skins/vector/css/matrix-react-sdk/views/rooms/TabCompleteBar.css index e0d0965e..84ca3684 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/rooms/TabCompleteBar.css +++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/TabCompleteBar.css @@ -37,6 +37,7 @@ limitations under the License. .mx_TabCompleteBar_command .mx_TabCompleteBar_text { opacity: 1.0; + vertical-align: middle; color: #fff; } From 8557a3b70e7d12c24b65074bb2417a392d8249ac Mon Sep 17 00:00:00 2001 From: Matthew Hodgson Date: Thu, 14 Apr 2016 19:15:35 +0100 Subject: [PATCH 03/42] fix vertical alignment within status bar --- .../vector/css/matrix-react-sdk/views/rooms/TabCompleteBar.css | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/TabCompleteBar.css b/src/skins/vector/css/matrix-react-sdk/views/rooms/TabCompleteBar.css index 84ca3684..71bcd8f7 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/rooms/TabCompleteBar.css +++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/TabCompleteBar.css @@ -37,7 +37,7 @@ limitations under the License. .mx_TabCompleteBar_command .mx_TabCompleteBar_text { opacity: 1.0; - vertical-align: middle; + vertical-align: initial; color: #fff; } @@ -48,5 +48,6 @@ limitations under the License. .mx_TabCompleteBar_text { color: #4a4a4a; + vertical-align: middle; opacity: 0.5; } From 0996a0b14090eb145ce44476525cc1dfd0da98e8 Mon Sep 17 00:00:00 2001 From: Richard van der Hoff Date: Thu, 14 Apr 2016 19:52:57 +0100 Subject: [PATCH 04/42] Fixes to refactored notifications A few things I managed to break in the recent refactor --- src/notifications/PushRuleVectorState.js | 6 ++- src/notifications/StandardActions.js | 30 ++++++++++++ .../VectorPushRulesDefinitions.js | 48 ++++++++----------- 3 files changed, 53 insertions(+), 31 deletions(-) create mode 100644 src/notifications/StandardActions.js diff --git a/src/notifications/PushRuleVectorState.js b/src/notifications/PushRuleVectorState.js index 5c6934aa..019ce8a9 100644 --- a/src/notifications/PushRuleVectorState.js +++ b/src/notifications/PushRuleVectorState.js @@ -16,6 +16,8 @@ limitations under the License. 'use strict'; +var StandardActions = require('./StandardActions'); + /** * Enum for state of a push rule as defined by the Vector UI. * @readonly @@ -39,10 +41,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; } }, diff --git a/src/notifications/StandardActions.js b/src/notifications/StandardActions.js new file mode 100644 index 00000000..22a8f1db --- /dev/null +++ b/src/notifications/StandardActions.js @@ -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, +}; diff --git a/src/notifications/VectorPushRulesDefinitions.js b/src/notifications/VectorPushRulesDefinitions.js index 8e2a0a65..cae28a0f 100644 --- a/src/notifications/VectorPushRulesDefinitions.js +++ b/src/notifications/VectorPushRulesDefinitions.js @@ -16,17 +16,7 @@ limitations under the License. 'use strict'; -var NotificationUtils = require('./NotificationUtils'); - -var encodeActions = NotificationUtils.encodeActions; -var decodeActions = NotificationUtils.decodeActions; - -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; +var StandardActions = require('./StandardActions'); /** * The descriptions of rules managed by the Vector UI. @@ -38,9 +28,9 @@ module.exports = { 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 } }, @@ -49,9 +39,9 @@ module.exports = { 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 } }, @@ -62,9 +52,9 @@ module.exports = { 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 } }, @@ -73,9 +63,9 @@ module.exports = { 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 } }, @@ -84,9 +74,9 @@ module.exports = { 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 } }, @@ -96,9 +86,9 @@ module.exports = { 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, } } }; From c6b501811fe7481f06e097aad95a2124c709dbc6 Mon Sep 17 00:00:00 2001 From: Richard van der Hoff Date: Thu, 14 Apr 2016 14:28:28 +0100 Subject: [PATCH 05/42] Move more stuff out of Notifications.js --- .../views/settings/Notifications.js | 79 ++--------- src/notifications/ContentRules.js | 125 ++++++++++++++++++ src/notifications/index.js | 1 + 3 files changed, 135 insertions(+), 70 deletions(-) create mode 100644 src/notifications/ContentRules.js diff --git a/src/components/views/settings/Notifications.js b/src/components/views/settings/Notifications.js index 2518c420..aec14e6e 100644 --- a/src/components/views/settings/Notifications.js +++ b/src/components/views/settings/Notifications.js @@ -30,6 +30,7 @@ var notifications = require('../../../notifications'); 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. @@ -429,8 +430,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) { @@ -449,82 +448,22 @@ 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 = []; diff --git a/src/notifications/ContentRules.js b/src/notifications/ContentRules.js new file mode 100644 index 00000000..25a7bac9 --- /dev/null +++ b/src/notifications/ContentRules.js @@ -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; + }, +}; diff --git a/src/notifications/index.js b/src/notifications/index.js index 9672b67c..8ed77e9d 100644 --- a/src/notifications/index.js +++ b/src/notifications/index.js @@ -20,4 +20,5 @@ module.exports = { NotificationUtils: require('./NotificationUtils'), PushRuleVectorState: require('./PushRuleVectorState'), VectorPushRulesDefinitions: require('./VectorPushRulesDefinitions'), + ContentRules: require('./ContentRules'), }; From 96c4a24d3d922da3d4d3aab67c0ce2542376e56b Mon Sep 17 00:00:00 2001 From: Matthew Hodgson Date: Thu, 14 Apr 2016 21:10:55 +0100 Subject: [PATCH 06/42] skin RoomSubList chevrons, horizontal rules and selected room --- src/components/structures/RoomSubList.js | 2 +- .../matrix-react-sdk/structures/RoomView.css | 6 ++--- .../structures/UserSettings.css | 2 +- .../views/rooms/MemberList.css | 2 +- .../views/rooms/RoomHeader.css | 5 ---- .../matrix-react-sdk/views/rooms/RoomTile.css | 20 +++++++++++++-- .../views/rooms/TabCompleteBar.css | 1 + .../views/rooms/TopUnreadMessagesBar.css | 2 +- .../css/vector-web/structures/RoomSubList.css | 4 +-- src/skins/vector/img/list-close.svg | 25 +++++++++++-------- src/skins/vector/img/list-open.svg | 25 +++++++++++-------- 11 files changed, 58 insertions(+), 36 deletions(-) diff --git a/src/components/structures/RoomSubList.js b/src/components/structures/RoomSubList.js index 0b96ed18..ab89fd0f 100644 --- a/src/components/structures/RoomSubList.js +++ b/src/components/structures/RoomSubList.js @@ -278,7 +278,7 @@ var RoomSubList = React.createClass({ return (

{ this.props.collapsed ? '' : this.props.label } -

diff --git a/src/skins/vector/css/matrix-react-sdk/structures/RoomView.css b/src/skins/vector/css/matrix-react-sdk/structures/RoomView.css index 6656767d..1c18df28 100644 --- a/src/skins/vector/css/matrix-react-sdk/structures/RoomView.css +++ b/src/skins/vector/css/matrix-react-sdk/structures/RoomView.css @@ -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 { @@ -212,7 +212,7 @@ hr.mx_RoomView_myReadMarker { .mx_RoomView_statusAreaBox_line { margin-left: 65px; - border-top: 1px solid #eee; + border-top: 1px solid #e5e5e5; height: 1px; } diff --git a/src/skins/vector/css/matrix-react-sdk/structures/UserSettings.css b/src/skins/vector/css/matrix-react-sdk/structures/UserSettings.css index 71a9b299..a1392f05 100644 --- a/src/skins/vector/css/matrix-react-sdk/structures/UserSettings.css +++ b/src/skins/vector/css/matrix-react-sdk/structures/UserSettings.css @@ -84,7 +84,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_UserSettings h3 { diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/MemberList.css b/src/skins/vector/css/matrix-react-sdk/views/rooms/MemberList.css index 283addcb..967b4bef 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/rooms/MemberList.css +++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/MemberList.css @@ -84,7 +84,7 @@ limitations under the License. } .mx_MemberList_bottomRule { - border-top: 2px solid #e1dddd; + border-top: 1px solid #e5e5e5; margin-right: 15px; } diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomHeader.css b/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomHeader.css index eeb45b4d..181420f3 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomHeader.css +++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomHeader.css @@ -24,7 +24,6 @@ limitations under the License. max-width: 960px; margin: auto; height: 83px; - border-bottom: 1px solid #eeeeee; -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; diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomTile.css b/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomTile.css index e1e8b312..476cce49 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomTile.css +++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomTile.css @@ -23,7 +23,7 @@ limitations under the License. .mx_RoomTile_avatar { display: table-cell; - padding-right: 8px; + padding-right: 11px; padding-top: 6px; padding-bottom: 6px; padding-left: 20px; @@ -121,18 +121,34 @@ limitations under the License. } .mx_RoomTile_selected .mx_RoomTile_name { - color: #76cfa6 ! important; } .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; diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/TabCompleteBar.css b/src/skins/vector/css/matrix-react-sdk/views/rooms/TabCompleteBar.css index 71bcd8f7..f7f4a0bd 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/rooms/TabCompleteBar.css +++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/TabCompleteBar.css @@ -21,6 +21,7 @@ limitations under the License. .mx_TabCompleteBar_item { display: inline-block; margin-right: 15px; + margin-bottom: 2px; cursor: pointer; } diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/TopUnreadMessagesBar.css b/src/skins/vector/css/matrix-react-sdk/views/rooms/TopUnreadMessagesBar.css index ef639e2e..77184d42 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/rooms/TopUnreadMessagesBar.css +++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/TopUnreadMessagesBar.css @@ -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 { diff --git a/src/skins/vector/css/vector-web/structures/RoomSubList.css b/src/skins/vector/css/vector-web/structures/RoomSubList.css index d385397b..95248db0 100644 --- a/src/skins/vector/css/vector-web/structures/RoomSubList.css +++ b/src/skins/vector/css/vector-web/structures/RoomSubList.css @@ -32,10 +32,10 @@ limitations under the License. } .mx_RoomSubList_chevron { - padding-left: 5px; + padding-left: 4px; pointer-events: none; } .collapsed .mx_RoomSubList_chevron { - padding-left: 13px; + padding-left: 12px; } diff --git a/src/skins/vector/img/list-close.svg b/src/skins/vector/img/list-close.svg index eb60864e..cd88b2a8 100644 --- a/src/skins/vector/img/list-close.svg +++ b/src/skins/vector/img/list-close.svg @@ -1,10 +1,15 @@ - - - - Slice 1 - Created with Sketch. - - - - - \ No newline at end of file + + + + +Slice 1 +Created with Sketch. + + + + diff --git a/src/skins/vector/img/list-open.svg b/src/skins/vector/img/list-open.svg index a682ec90..e180be88 100644 --- a/src/skins/vector/img/list-open.svg +++ b/src/skins/vector/img/list-open.svg @@ -1,10 +1,15 @@ - - - - Slice 1 - Created with Sketch. - - - - - \ No newline at end of file + + + + +Slice 1 +Created with Sketch. + + + + From 6bc4c87ce4629234c51fc0273dbcdbeb82137a76 Mon Sep 17 00:00:00 2001 From: Matthew Hodgson Date: Thu, 14 Apr 2016 21:43:49 +0100 Subject: [PATCH 07/42] update to new bottomleftmenu. update header and composer heights --- src/components/structures/BottomLeftMenu.js | 13 +++++-- .../matrix-react-sdk/structures/RoomView.css | 6 ++-- .../structures/UserSettings.css | 4 +-- .../views/rooms/MemberList.css | 4 +-- .../views/rooms/MessageComposer.css | 4 +-- .../views/rooms/RoomHeader.css | 4 +-- .../matrix-react-sdk/views/rooms/RoomList.css | 2 +- .../css/vector-web/structures/LeftPanel.css | 36 +++++++++++-------- .../css/vector-web/structures/RightPanel.css | 6 ++-- 9 files changed, 46 insertions(+), 33 deletions(-) diff --git a/src/components/structures/BottomLeftMenu.js b/src/components/structures/BottomLeftMenu.js index a4d89fcf..a4450d67 100644 --- a/src/components/structures/BottomLeftMenu.js +++ b/src/components/structures/BottomLeftMenu.js @@ -47,12 +47,19 @@ module.exports = React.createClass({ render: function() { var BottomLeftMenuTile = sdk.getComponent('rooms.BottomLeftMenuTile'); + var TintableSvg = sdk.getComponent('elements.TintableSvg'); return (
- - - +
+ +
+
+ +
+
+ +
); diff --git a/src/skins/vector/css/matrix-react-sdk/structures/RoomView.css b/src/skins/vector/css/matrix-react-sdk/structures/RoomView.css index 1c18df28..8553e202 100644 --- a/src/skins/vector/css/matrix-react-sdk/structures/RoomView.css +++ b/src/skins/vector/css/matrix-react-sdk/structures/RoomView.css @@ -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; } diff --git a/src/skins/vector/css/matrix-react-sdk/structures/UserSettings.css b/src/skins/vector/css/matrix-react-sdk/structures/UserSettings.css index a1392f05..43881420 100644 --- a/src/skins/vector/css/matrix-react-sdk/structures/UserSettings.css +++ b/src/skins/vector/css/matrix-react-sdk/structures/UserSettings.css @@ -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 { diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/MemberList.css b/src/skins/vector/css/matrix-react-sdk/views/rooms/MemberList.css index 967b4bef..b631f05d 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/rooms/MemberList.css +++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/MemberList.css @@ -79,8 +79,8 @@ limitations under the License. .mx_MemberList_bottom { order: 4; - flex: 0 0 72px; - -webkit-flex: 0 0 72px; + flex: 0 0 60px; + -webkit-flex: 0 0 60px; } .mx_MemberList_bottomRule { diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/MessageComposer.css b/src/skins/vector/css/matrix-react-sdk/views/rooms/MessageComposer.css index 6299a0f6..daf15001 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/rooms/MessageComposer.css +++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/MessageComposer.css @@ -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 { diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomHeader.css b/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomHeader.css index 181420f3..0413e404 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomHeader.css +++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomHeader.css @@ -23,7 +23,7 @@ limitations under the License. .mx_RoomHeader_wrapper { max-width: 960px; margin: auto; - height: 83px; + height: 70px; -webkit-align-items: center; align-items: center; @@ -118,7 +118,7 @@ limitations under the License. } .mx_RoomHeader_simpleHeader { - line-height: 83px; + line-height: 70px; color: #454545; font-size: 22px; font-weight: bold; diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomList.css b/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomList.css index 1a4ec869..a2241853 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomList.css +++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomList.css @@ -15,7 +15,7 @@ limitations under the License. */ .mx_RoomList { - padding-top: 24px; + padding-top: 8px; padding-bottom: 12px; min-height: 400px; } diff --git a/src/skins/vector/css/vector-web/structures/LeftPanel.css b/src/skins/vector/css/vector-web/structures/LeftPanel.css index 4ee44426..3dcc4eda 100644 --- a/src/skins/vector/css/vector-web/structures/LeftPanel.css +++ b/src/skins/vector/css/vector-web/structures/LeftPanel.css @@ -58,23 +58,29 @@ 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 .mx_BottomLeftMenu_options { - margin-top: 15px; +.mx_LeftPanel .mx_BottomLeftMenu_options { + margin-top: 18px; width: 100%; } -.mx_LeftPanel .mx_BottomLeftMenu img { - border-radius: 0px; - background-color: transparent; - vertical-align: middle; -} \ No newline at end of file +.mx_LeftPanel .mx_BottomLeftMenu_createRoom, +.mx_LeftPanel .mx_BottomLeftMenu_directory, +.mx_LeftPanel .mx_BottomLeftMenu_settings { + display: inline-block; + cursor: pointer; +} + +.mx_LeftPanel .mx_BottomLeftMenu_directory { + margin-left: 10px; +} + +.mx_LeftPanel .mx_BottomLeftMenu_settings { + float: right; +} diff --git a/src/skins/vector/css/vector-web/structures/RightPanel.css b/src/skins/vector/css/vector-web/structures/RightPanel.css index 7cad2649..56e1fb4b 100644 --- a/src/skins/vector/css/vector-web/structures/RightPanel.css +++ b/src/skins/vector/css/vector-web/structures/RightPanel.css @@ -33,14 +33,14 @@ 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; } /** 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; From 25b5c14527672458393b0ba598875c9009e729ee Mon Sep 17 00:00:00 2001 From: Matthew Hodgson Date: Thu, 14 Apr 2016 22:26:48 +0100 Subject: [PATCH 08/42] fix new bottomleft menu --- src/components/structures/BottomLeftMenu.js | 6 +++--- .../vector/css/vector-web/structures/LeftPanel.css | 14 +++++++++++++- 2 files changed, 16 insertions(+), 4 deletions(-) diff --git a/src/components/structures/BottomLeftMenu.js b/src/components/structures/BottomLeftMenu.js index a4450d67..ae49a347 100644 --- a/src/components/structures/BottomLeftMenu.js +++ b/src/components/structures/BottomLeftMenu.js @@ -52,13 +52,13 @@ module.exports = React.createClass({
- +
- +
- +
diff --git a/src/skins/vector/css/vector-web/structures/LeftPanel.css b/src/skins/vector/css/vector-web/structures/LeftPanel.css index 3dcc4eda..610f1526 100644 --- a/src/skins/vector/css/vector-web/structures/LeftPanel.css +++ b/src/skins/vector/css/vector-web/structures/LeftPanel.css @@ -58,7 +58,7 @@ limitations under the License. -webkit-order: 3; order: 3; - border-top: 1px solid rgba(0,0,0,0.1); + border-top: 1px solid rgba(0, 0, 0, 0.1); margin-left: 20px; margin-right: 20px; -webkit-flex: 0 0 60px; @@ -70,6 +70,10 @@ limitations under the License. width: 100%; } +.mx_BottomLeftMenu_options object { + pointer-events: none; +} + .mx_LeftPanel .mx_BottomLeftMenu_createRoom, .mx_LeftPanel .mx_BottomLeftMenu_directory, .mx_LeftPanel .mx_BottomLeftMenu_settings { @@ -77,6 +81,14 @@ limitations under the License. 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; } From 5450223cc76f75c5e0dda75f46427f5117f75695 Mon Sep 17 00:00:00 2001 From: Richard van der Hoff Date: Thu, 14 Apr 2016 22:31:40 +0100 Subject: [PATCH 09/42] More notifications fixes Fix another thing I broke during the refactor --- .../views/settings/Notifications.js | 4 ++-- src/notifications/PushRuleVectorState.js | 21 +++++++++++++------ 2 files changed, 17 insertions(+), 8 deletions(-) diff --git a/src/components/views/settings/Notifications.js b/src/components/views/settings/Notifications.js index aec14e6e..01d7e70b 100644 --- a/src/components/views/settings/Notifications.js +++ b/src/components/views/settings/Notifications.js @@ -497,8 +497,8 @@ module.exports = React.createClass({ // Translate the rule actions and its enabled value into vector state var vectorState; if (rule) { - for (var stateKey in PushRuleVectorState) { - var state = PushRuleVectorState[stateKey]; + for (var stateKey in PushRuleVectorState.states) { + var state = PushRuleVectorState.states[stateKey]; var vectorStateToActions = ruleDefinition.vectorStateToActions[state]; if (!vectorStateToActions) { diff --git a/src/notifications/PushRuleVectorState.js b/src/notifications/PushRuleVectorState.js index 019ce8a9..67f9a3c0 100644 --- a/src/notifications/PushRuleVectorState.js +++ b/src/notifications/PushRuleVectorState.js @@ -18,12 +18,7 @@ limitations under the License. var StandardActions = require('./StandardActions'); -/** - * Enum for state of a push rule as defined by the Vector UI. - * @readonly - * @enum {string} - */ -module.exports = { +var states = { /** The push rule is disabled */ OFF: "off", @@ -33,6 +28,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 @@ -78,3 +83,7 @@ module.exports = { return stateKind; }, }; + +for (var k in states) { + module.exports[k] = states[k]; +}; From 121fe3418010a441da4a8a7f45625a654194bf75 Mon Sep 17 00:00:00 2001 From: Richard van der Hoff Date: Thu, 14 Apr 2016 22:45:00 +0100 Subject: [PATCH 10/42] Improve parsing of keyword notification rules For notification rules, the absence of a value on a 'highlight' tweak means that the highlight should happen; this was previously confusing us. Use the action parser from NotificationUtils to simplify the code. Fixes https://github.com/vector-im/vector-web/issues/1330 --- src/notifications/PushRuleVectorState.js | 21 ++-- .../notifications/ContentRules-test.js | 117 ++++++++++++++++++ .../notifications/PushRuleVectorState-test.js | 34 ++++- 3 files changed, 163 insertions(+), 9 deletions(-) create mode 100644 test/unit-tests/notifications/ContentRules-test.js diff --git a/src/notifications/PushRuleVectorState.js b/src/notifications/PushRuleVectorState.js index 67f9a3c0..c838aa20 100644 --- a/src/notifications/PushRuleVectorState.js +++ b/src/notifications/PushRuleVectorState.js @@ -17,6 +17,7 @@ limitations under the License. 'use strict'; var StandardActions = require('./StandardActions'); +var NotificationUtils = require('./NotificationUtils'); var states = { /** The push rule is disabled */ @@ -58,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; diff --git a/test/unit-tests/notifications/ContentRules-test.js b/test/unit-tests/notifications/ContentRules-test.js new file mode 100644 index 00000000..e7928147 --- /dev/null +++ b/test/unit-tests/notifications/ContentRules-test.js @@ -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); + }); + }); +}); diff --git a/test/unit-tests/notifications/PushRuleVectorState-test.js b/test/unit-tests/notifications/PushRuleVectorState-test.js index 48084f08..6b0f81c6 100644 --- a/test/unit-tests/notifications/PushRuleVectorState-test.js +++ b/test/unit-tests/notifications/PushRuleVectorState-test.js @@ -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); + }); }); }); From cc1e30c963bfb00506a884cd7d1d0e666c612633 Mon Sep 17 00:00:00 2001 From: Matthew Hodgson Date: Fri, 15 Apr 2016 01:42:44 +0100 Subject: [PATCH 11/42] dinkier topic --- .../vector/css/matrix-react-sdk/views/rooms/RoomHeader.css | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomHeader.css b/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomHeader.css index 0413e404..026b3de1 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomHeader.css +++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomHeader.css @@ -210,8 +210,9 @@ limitations under the License. vertical-align: bottom; float: left; max-height: 42px; - color: #454545; + color: #A2A2A2; font-weight: 300; + font-size: 12px; margin-left: 19px; margin-right: 16px; overflow: hidden; From f8d5101dbcc35e566b00a700638447b8234b1ea1 Mon Sep 17 00:00:00 2001 From: Matthew Hodgson Date: Fri, 15 Apr 2016 02:23:12 +0100 Subject: [PATCH 12/42] add lost SVGs and implement SearchBox skeleton --- src/component-index.js | 4 ++ src/components/structures/LeftPanel.js | 2 + src/components/structures/SearchBox.js | 55 +++++++++++++++++++ .../structures/RoomStatusBar.css | 16 ++++++ .../matrix-react-sdk/structures/UploadBar.css | 16 ++++++ .../matrix-react-sdk/views/rooms/RoomTile.css | 3 +- src/skins/vector/img/icons-create-room.svg | 20 +++++++ src/skins/vector/img/icons-directory.svg | 21 +++++++ src/skins/vector/img/icons-settings.svg | 17 ++++++ src/skins/vector/img/maximise.svg | 22 ++++++++ src/skins/vector/img/minimise.svg | 18 ++++++ 11 files changed, 193 insertions(+), 1 deletion(-) create mode 100644 src/components/structures/SearchBox.js create mode 100644 src/skins/vector/img/icons-create-room.svg create mode 100644 src/skins/vector/img/icons-directory.svg create mode 100644 src/skins/vector/img/icons-settings.svg create mode 100644 src/skins/vector/img/maximise.svg create mode 100644 src/skins/vector/img/minimise.svg diff --git a/src/component-index.js b/src/component-index.js index b25b5ef9..b3baf22a 100644 --- a/src/component-index.js +++ b/src/component-index.js @@ -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'); diff --git a/src/components/structures/LeftPanel.js b/src/components/structures/LeftPanel.js index 5c27abc5..f8a68a88 100644 --- a/src/components/structures/LeftPanel.js +++ b/src/components/structures/LeftPanel.js @@ -87,6 +87,7 @@ var LeftPanel = React.createClass({ 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,6 +111,7 @@ var LeftPanel = React.createClass({ return ( ); } diff --git a/src/components/structures/SearchBox.js b/src/components/structures/SearchBox.js index beec83bf..69434dc2 100644 --- a/src/components/structures/SearchBox.js +++ b/src/components/structures/SearchBox.js @@ -25,7 +25,6 @@ module.exports = React.createClass({ render: function() { var TintableSvg = sdk.getComponent('elements.TintableSvg'); - var EditableText = sdk.getComponent("elements.EditableText"); var toggleCollapse; if (this.props.collapsed) { @@ -41,11 +40,9 @@ module.exports = React.createClass({ className="mx_SearchBox_searchButton" src="img/search.svg" width="21" height="19" /> - { toggleCollapse } diff --git a/src/skins/vector/css/matrix-react-sdk/structures/RoomView.css b/src/skins/vector/css/matrix-react-sdk/structures/RoomView.css index 8553e202..c8772b49 100644 --- a/src/skins/vector/css/matrix-react-sdk/structures/RoomView.css +++ b/src/skins/vector/css/matrix-react-sdk/structures/RoomView.css @@ -207,7 +207,7 @@ hr.mx_RoomView_myReadMarker { .mx_RoomView_statusAreaBox { max-width: 960px; margin: auto; - min-height: 49px; + min-height: 60px; } .mx_RoomView_statusAreaBox_line { diff --git a/src/skins/vector/css/matrix-react-sdk/structures/SearchBox.css b/src/skins/vector/css/matrix-react-sdk/structures/SearchBox.css index 77c8e54f..8c8c470a 100644 --- a/src/skins/vector/css/matrix-react-sdk/structures/SearchBox.css +++ b/src/skins/vector/css/matrix-react-sdk/structures/SearchBox.css @@ -18,8 +18,8 @@ limitations under the License. height: 24px; margin-left: 20px; margin-right: 20px; - padding-top: 23px; - padding-bottom: 23px; + padding-top: 26px; + padding-bottom: 20px; border-bottom: 1px solid rgba(0, 0, 0, 0.1); display: flex; @@ -33,13 +33,14 @@ limitations under the License. .mx_SearchBox_search { flex: 1; -webkit-flex: 1; + font-family: 'Open Sans', Arial, Helvetica, Sans-Serif; font-size: 12px; height: 24px; - vertical-align: middle; -} - -.mx_SearchBox_searchPlaceholder { - opacity: 0.5; + margin-top: -4px; + border: 0px ! important; + /* border-bottom: 1px solid rgba(0, 0, 0, 0.1) ! important; */ + background-color: transparent; + border: 0px; } .mx_SearchBox_minimise, diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/MemberInfo.css b/src/skins/vector/css/matrix-react-sdk/views/rooms/MemberInfo.css index e6a340df..30de9324 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/rooms/MemberInfo.css +++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/MemberInfo.css @@ -15,6 +15,7 @@ limitations under the License. */ .mx_MemberInfo { + margin-top: 20px; height: 100%; } diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/MemberList.css b/src/skins/vector/css/matrix-react-sdk/views/rooms/MemberList.css index b631f05d..88f7fafe 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/rooms/MemberList.css +++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/MemberList.css @@ -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 60px; - -webkit-flex: 0 0 60px; -} - -.mx_MemberList_bottomRule { - border-top: 1px solid #e5e5e5; - margin-right: 15px; -} - .mx_MemberList_invited h2 { text-transform: uppercase; color: #3d3b39; diff --git a/src/skins/vector/css/vector-web/structures/RightPanel.css b/src/skins/vector/css/vector-web/structures/RightPanel.css index 56e1fb4b..f6112da6 100644 --- a/src/skins/vector/css/vector-web/structures/RightPanel.css +++ b/src/skins/vector/css/vector-web/structures/RightPanel.css @@ -33,6 +33,9 @@ limitations under the License. -webkit-order: 1; order: 1; + border-bottom: 1px solid #e5e5e5; + margin-right: 20px; + -webkit-flex: 0 0 70px; flex: 0 0 70px; } @@ -90,3 +93,17 @@ limitations under the License. -webkit-order: 2; order: 2; } + +.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; +} From 26d12bebe47d635a90455f576bab5ba567aa569a Mon Sep 17 00:00:00 2001 From: Matthew Hodgson Date: Fri, 15 Apr 2016 17:54:48 +0100 Subject: [PATCH 16/42] wire up searchbox filtering, and some minor overall tweaks --- src/components/structures/LeftPanel.js | 8 ++- src/components/structures/RoomSubList.js | 21 +++--- src/components/structures/SearchBox.js | 68 ++++++++++++++++--- .../structures/RoomStatusBar.css | 7 +- .../matrix-react-sdk/structures/SearchBox.css | 12 ++++ 5 files changed, 92 insertions(+), 24 deletions(-) diff --git a/src/components/structures/LeftPanel.js b/src/components/structures/LeftPanel.js index f8a68a88..58347a06 100644 --- a/src/components/structures/LeftPanel.js +++ b/src/components/structures/LeftPanel.js @@ -31,6 +31,7 @@ var LeftPanel = React.createClass({ getInitialState: function() { return { showCallElement: null, + searchFilter: '', }; }, @@ -84,6 +85,10 @@ 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'); @@ -111,12 +116,13 @@ var LeftPanel = React.createClass({ return ( diff --git a/src/components/structures/RoomSubList.js b/src/components/structures/RoomSubList.js index ab89fd0f..497acdec 100644 --- a/src/components/structures/RoomSubList.js +++ b/src/components/structures/RoomSubList.js @@ -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) { diff --git a/src/components/structures/SearchBox.js b/src/components/structures/SearchBox.js index 69434dc2..553feffe 100644 --- a/src/components/structures/SearchBox.js +++ b/src/components/structures/SearchBox.js @@ -19,32 +19,78 @@ limitations under the License. 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, + }, + + onChange: new rate_limited_func( + function() { + if (this.refs.search) { + 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 = <; + toggleCollapse = +
+ +
} else { - toggleCollapse = <; + toggleCollapse = +
+ +
} + var searchControls; + if (!this.props.collapsed) { + searchControls = [ + , + + ]; + } + + var self = this; return (
- - + { searchControls } { toggleCollapse }
); diff --git a/src/skins/vector/css/matrix-react-sdk/structures/RoomStatusBar.css b/src/skins/vector/css/matrix-react-sdk/structures/RoomStatusBar.css index dfbc354a..4d91755c 100644 --- a/src/skins/vector/css/matrix-react-sdk/structures/RoomStatusBar.css +++ b/src/skins/vector/css/matrix-react-sdk/structures/RoomStatusBar.css @@ -15,9 +15,9 @@ limitations under the License. */ .mx_RoomStatusBar { - margin-top: 12px; + margin-top: 15px; margin-left: 65px; - min-height: 37px; + min-height: 34px; } /* position the indicator in the same place horizontally as .mx_EventTile_avatar. */ @@ -33,8 +33,9 @@ limitations under the License. .mx_RoomStatusBar_placeholderIndicator span { color: #4a4a4a; opacity: 0.5; -/* position: relative; + top: -4px; +/* animation-duration: 1s; animation-name: bounce; animation-direction: alternate; diff --git a/src/skins/vector/css/matrix-react-sdk/structures/SearchBox.css b/src/skins/vector/css/matrix-react-sdk/structures/SearchBox.css index 8c8c470a..d94efd98 100644 --- a/src/skins/vector/css/matrix-react-sdk/structures/SearchBox.css +++ b/src/skins/vector/css/matrix-react-sdk/structures/SearchBox.css @@ -45,5 +45,17 @@ limitations under the License. .mx_SearchBox_minimise, .mx_SearchBox_maximise { + cursor: pointer; +} + +.mx_SearchBox_minimise { margin-left: 10px; } + +.mx_SearchBox_maximise { + margin-left: 6px; +} + +.mx_SearchBox object { + pointer-events: none; +} \ No newline at end of file From 51bc18aef081d5350159a6df139c3bf4954bdbd0 Mon Sep 17 00:00:00 2001 From: Matthew Hodgson Date: Fri, 15 Apr 2016 18:05:57 +0100 Subject: [PATCH 17/42] prettier icon --- src/components/structures/SearchBox.js | 2 +- .../matrix-react-sdk/structures/SearchBox.css | 7 ++++--- src/skins/vector/img/right_search.svg | 19 +++++++++++++++++++ 3 files changed, 24 insertions(+), 4 deletions(-) create mode 100644 src/skins/vector/img/right_search.svg diff --git a/src/components/structures/SearchBox.js b/src/components/structures/SearchBox.js index 553feffe..8c98859e 100644 --- a/src/components/structures/SearchBox.js +++ b/src/components/structures/SearchBox.js @@ -74,7 +74,7 @@ module.exports = React.createClass({ , + + + right_search + Created with Sketch. + + + + + + + + + + + + + + \ No newline at end of file From d0d4760ddc40a9fd6e8f8a441f17a09df9c6df7d Mon Sep 17 00:00:00 2001 From: Matthew Hodgson Date: Fri, 15 Apr 2016 18:09:10 +0100 Subject: [PATCH 18/42] align highlight with droptarget RHS --- src/skins/vector/css/matrix-react-sdk/views/rooms/RoomTile.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomTile.css b/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomTile.css index 3be8cacf..e0faa87c 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomTile.css +++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomTile.css @@ -39,7 +39,7 @@ limitations under the License. vertical-align: middle; overflow: hidden; word-break: break-word; - padding-right: 16px; + padding-right: 19px; color: rgba(69, 69, 69, 0.8); } From cf3cdaccf3404698e22404713ded943900e58194 Mon Sep 17 00:00:00 2001 From: Matthew Hodgson Date: Fri, 15 Apr 2016 18:23:47 +0100 Subject: [PATCH 19/42] fix up UserSettings a bit --- src/components/structures/RightPanel.js | 3 ++ .../matrix-react-sdk/structures/SearchBox.css | 2 +- .../structures/UserSettings.css | 32 +++++++++---------- .../css/vector-web/structures/RightPanel.css | 3 +- src/skins/vector/img/maximise.svg | 5 +-- 5 files changed, 23 insertions(+), 22 deletions(-) diff --git a/src/components/structures/RightPanel.js b/src/components/structures/RightPanel.js index f03c63b3..431bdba5 100644 --- a/src/components/structures/RightPanel.js +++ b/src/components/structures/RightPanel.js @@ -155,7 +155,10 @@ module.exports = React.createClass({ panel = } } + } + if (!panel) { + panel =
; } var classes = "mx_RightPanel mx_fadable"; diff --git a/src/skins/vector/css/matrix-react-sdk/structures/SearchBox.css b/src/skins/vector/css/matrix-react-sdk/structures/SearchBox.css index 8b9e9896..ecd8c429 100644 --- a/src/skins/vector/css/matrix-react-sdk/structures/SearchBox.css +++ b/src/skins/vector/css/matrix-react-sdk/structures/SearchBox.css @@ -54,7 +54,7 @@ limitations under the License. } .mx_SearchBox_maximise { - margin-left: 6px; + margin-left: 9px; } .mx_SearchBox object { diff --git a/src/skins/vector/css/matrix-react-sdk/structures/UserSettings.css b/src/skins/vector/css/matrix-react-sdk/structures/UserSettings.css index 43881420..6ef69f1d 100644 --- a/src/skins/vector/css/matrix-react-sdk/structures/UserSettings.css +++ b/src/skins/vector/css/matrix-react-sdk/structures/UserSettings.css @@ -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 #e5e5e5; -} - -.mx_UserSettings h3 { - font-weight: bold; - font-size: 15px; - margin-top: 4px; - margin-bottom: 4px; -} - .mx_UserSettings_section { margin-left: 63px; margin-top: 28px; diff --git a/src/skins/vector/css/vector-web/structures/RightPanel.css b/src/skins/vector/css/vector-web/structures/RightPanel.css index f6112da6..af8517b2 100644 --- a/src/skins/vector/css/vector-web/structures/RightPanel.css +++ b/src/skins/vector/css/vector-web/structures/RightPanel.css @@ -86,7 +86,8 @@ 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; diff --git a/src/skins/vector/img/maximise.svg b/src/skins/vector/img/maximise.svg index 4df7d5bb..79c6c0ab 100644 --- a/src/skins/vector/img/maximise.svg +++ b/src/skins/vector/img/maximise.svg @@ -3,9 +3,6 @@ - minimise Created with sketchtool. @@ -13,7 +10,7 @@ - + From c7d717f0a44bdf9a531272c837b9c3f057c8bf68 Mon Sep 17 00:00:00 2001 From: Matthew Hodgson Date: Fri, 15 Apr 2016 18:29:49 +0100 Subject: [PATCH 20/42] fix RightPanel --- src/skins/vector/css/vector-web/structures/RightPanel.css | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/skins/vector/css/vector-web/structures/RightPanel.css b/src/skins/vector/css/vector-web/structures/RightPanel.css index af8517b2..7257d8b4 100644 --- a/src/skins/vector/css/vector-web/structures/RightPanel.css +++ b/src/skins/vector/css/vector-web/structures/RightPanel.css @@ -93,6 +93,8 @@ limitations under the License. -ms-flex-order: 2; -webkit-order: 2; order: 2; + flex: 1; + -webkit-flex: 1; } .mx_RightPanel_footer { From 7cd24e7dbd93e30ac71b10fa765e21616fad1127 Mon Sep 17 00:00:00 2001 From: Matthew Hodgson Date: Fri, 15 Apr 2016 18:29:57 +0100 Subject: [PATCH 21/42] commented out fading for RoomDirectory --- src/components/structures/RoomDirectory.js | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) diff --git a/src/components/structures/RoomDirectory.js b/src/components/structures/RoomDirectory.js index f3614092..a4a5670d 100644 --- a/src/components/structures/RoomDirectory.js +++ b/src/components/structures/RoomDirectory.js @@ -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 From c606912a8d08f4cb838b86a5a7ba7e816cbe6f7f Mon Sep 17 00:00:00 2001 From: Matthew Hodgson Date: Fri, 15 Apr 2016 18:45:52 +0100 Subject: [PATCH 22/42] fix topic font size --- .../vector/css/matrix-react-sdk/views/rooms/RoomHeader.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomHeader.css b/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomHeader.css index 026b3de1..0229500c 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomHeader.css +++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomHeader.css @@ -212,7 +212,7 @@ limitations under the License. max-height: 42px; color: #A2A2A2; font-weight: 300; - font-size: 12px; + font-size: 13px; margin-left: 19px; margin-right: 16px; overflow: hidden; From 756da03b9a00d9dab3924365aedd8017df343bda Mon Sep 17 00:00:00 2001 From: Matthew Hodgson Date: Fri, 15 Apr 2016 20:50:22 +0100 Subject: [PATCH 23/42] fix wrapping of RoomTile when selected --- src/skins/vector/css/matrix-react-sdk/views/rooms/RoomTile.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomTile.css b/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomTile.css index e0faa87c..27b2d229 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomTile.css +++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomTile.css @@ -121,6 +121,7 @@ limitations under the License. } .mx_RoomTile_selected .mx_RoomTile_name { + padding-right: 23px; } .mx_RoomTile_highlight .mx_RoomTile_name { @@ -136,7 +137,6 @@ limitations under the License. position: relative; width: 100%; padding: 4px; - padding-right: 0px; margin-top: -4px; margin-bottom: -4px; border-radius: 2px; From 37fbad0dbe7b44c8e9006f844696501aa1f34d8f Mon Sep 17 00:00:00 2001 From: Matthew Hodgson Date: Fri, 15 Apr 2016 21:37:52 +0100 Subject: [PATCH 24/42] fix LeftPanel width in FF --- .../vector/css/matrix-react-sdk/structures/SearchBox.css | 5 +++-- src/skins/vector/css/vector-web/structures/RoomDirectory.css | 2 ++ 2 files changed, 5 insertions(+), 2 deletions(-) diff --git a/src/skins/vector/css/matrix-react-sdk/structures/SearchBox.css b/src/skins/vector/css/matrix-react-sdk/structures/SearchBox.css index ecd8c429..badf33da 100644 --- a/src/skins/vector/css/matrix-react-sdk/structures/SearchBox.css +++ b/src/skins/vector/css/matrix-react-sdk/structures/SearchBox.css @@ -31,8 +31,9 @@ limitations under the License. } .mx_SearchBox_search { - flex: 1; - -webkit-flex: 1; + 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; diff --git a/src/skins/vector/css/vector-web/structures/RoomDirectory.css b/src/skins/vector/css/vector-web/structures/RoomDirectory.css index 2f75724d..c745706b 100644 --- a/src/skins/vector/css/vector-web/structures/RoomDirectory.css +++ b/src/skins/vector/css/vector-web/structures/RoomDirectory.css @@ -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; From b58265a69c637d10d8a0e7a757f5718817900801 Mon Sep 17 00:00:00 2001 From: Matthew Hodgson Date: Fri, 15 Apr 2016 21:48:09 +0100 Subject: [PATCH 25/42] fix comedy FontAwesome bug --- src/skins/vector/img/right_search.svg | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/src/skins/vector/img/right_search.svg b/src/skins/vector/img/right_search.svg index b1681734..b430a6be 100644 --- a/src/skins/vector/img/right_search.svg +++ b/src/skins/vector/img/right_search.svg @@ -10,9 +10,7 @@ - - - + From c98e06e1aaa256d660bf0a93701418b3ba5e3e89 Mon Sep 17 00:00:00 2001 From: Matthew Hodgson Date: Fri, 15 Apr 2016 22:16:06 +0100 Subject: [PATCH 26/42] add cancelButton to simpleHeader --- .../vector/css/matrix-react-sdk/views/rooms/RoomHeader.css | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomHeader.css b/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomHeader.css index 0229500c..c0e919b8 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomHeader.css +++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomHeader.css @@ -128,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 { From fdf83a5ad524917f43740d9dd5cbcb2989fde375 Mon Sep 17 00:00:00 2001 From: Matthew Hodgson Date: Fri, 15 Apr 2016 22:24:20 +0100 Subject: [PATCH 27/42] fix tooltip offset --- src/components/views/rooms/RoomTooltip.js | 2 +- .../vector/css/matrix-react-sdk/structures/SearchBox.css | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/views/rooms/RoomTooltip.js b/src/components/views/rooms/RoomTooltip.js index fbe2fa56..2f5de837 100644 --- a/src/components/views/rooms/RoomTooltip.js +++ b/src/components/views/rooms/RoomTooltip.js @@ -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"; } }, diff --git a/src/skins/vector/css/matrix-react-sdk/structures/SearchBox.css b/src/skins/vector/css/matrix-react-sdk/structures/SearchBox.css index badf33da..93e6d7c8 100644 --- a/src/skins/vector/css/matrix-react-sdk/structures/SearchBox.css +++ b/src/skins/vector/css/matrix-react-sdk/structures/SearchBox.css @@ -18,8 +18,8 @@ limitations under the License. height: 24px; margin-left: 16px; margin-right: 20px; - padding-top: 26px; - padding-bottom: 24px; + padding-top: 24px; + padding-bottom: 22px; border-bottom: 1px solid rgba(0, 0, 0, 0.1); display: flex; From fbd974df55b62d24941ea2cc2e6006d7cc8dabc4 Mon Sep 17 00:00:00 2001 From: Matthew Hodgson Date: Sat, 16 Apr 2016 23:49:16 +0100 Subject: [PATCH 28/42] fix bottomleft bug in chrome canary --- src/skins/vector/css/vector-web/structures/LeftPanel.css | 1 - 1 file changed, 1 deletion(-) diff --git a/src/skins/vector/css/vector-web/structures/LeftPanel.css b/src/skins/vector/css/vector-web/structures/LeftPanel.css index 610f1526..c78dfd33 100644 --- a/src/skins/vector/css/vector-web/structures/LeftPanel.css +++ b/src/skins/vector/css/vector-web/structures/LeftPanel.css @@ -67,7 +67,6 @@ limitations under the License. .mx_LeftPanel .mx_BottomLeftMenu_options { margin-top: 18px; - width: 100%; } .mx_BottomLeftMenu_options object { From 65d93331041d2acbb66557ac89433843b3b777ac Mon Sep 17 00:00:00 2001 From: Matthew Hodgson Date: Sat, 16 Apr 2016 23:49:21 +0100 Subject: [PATCH 29/42] pointer on roomsublist --- src/skins/vector/css/vector-web/structures/RoomSubList.css | 1 + 1 file changed, 1 insertion(+) diff --git a/src/skins/vector/css/vector-web/structures/RoomSubList.css b/src/skins/vector/css/vector-web/structures/RoomSubList.css index 95248db0..8f9db8fe 100644 --- a/src/skins/vector/css/vector-web/structures/RoomSubList.css +++ b/src/skins/vector/css/vector-web/structures/RoomSubList.css @@ -29,6 +29,7 @@ limitations under the License. padding-right: 12px; margin-top: 8px; margin-bottom: 4px; + cursor: pointer; } .mx_RoomSubList_chevron { From d512e25ccaf828acfb1593459be7b9ceb414d4b6 Mon Sep 17 00:00:00 2001 From: Matthew Hodgson Date: Sun, 17 Apr 2016 00:28:33 +0100 Subject: [PATCH 30/42] persist search filter over being hidden --- src/components/structures/SearchBox.js | 19 +++++++++++++++---- 1 file changed, 15 insertions(+), 4 deletions(-) diff --git a/src/components/structures/SearchBox.js b/src/components/structures/SearchBox.js index 8c98859e..a49f845e 100644 --- a/src/components/structures/SearchBox.js +++ b/src/components/structures/SearchBox.js @@ -29,11 +29,21 @@ module.exports = React.createClass({ onSearch: React.PropTypes.func, }, - onChange: new rate_limited_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() { - if (this.refs.search) { - this.props.onSearch(this.refs.search.value); - } + this.props.onSearch(this.refs.search.value); }, 100 ), @@ -81,6 +91,7 @@ module.exports = React.createClass({ type="text" ref="search" className="mx_SearchBox_search" + value={ this.state.searchTerm } onChange={ this.onChange } placeholder="Search room names" /> From 58c431abc22140fc313e2b622a2a7017828ec0e5 Mon Sep 17 00:00:00 2001 From: Matthew Hodgson Date: Sun, 17 Apr 2016 14:00:20 +0100 Subject: [PATCH 31/42] fix spinner layout bouncing when changing notifs all-important s/done/then/ on pushRulesPromise to ensure that the refresh completes before relaying-out the page s/Loud/Highlight & sound/ --- .../views/settings/Notifications.js | 31 ++++++++++++++----- .../structures/UserSettings.css | 4 +++ 2 files changed, 27 insertions(+), 8 deletions(-) diff --git a/src/components/views/settings/Notifications.js b/src/components/views/settings/Notifications.js index e0cfd159..7ca3fa3a 100644 --- a/src/components/views/settings/Notifications.js +++ b/src/components/views/settings/Notifications.js @@ -103,6 +103,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]; @@ -410,7 +411,9 @@ 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; @@ -501,6 +504,8 @@ module.exports = React.createClass({ var vectorState = ruleDefinition.ruleToVectorState(rule); + //console.log("Refreshing vectorPushRules for " + vectorRuleId +", "+ ruleDefinition.description +", " + rule +", " + vectorState); + self.state.vectorPushRules.push({ "vectorRuleId": vectorRuleId, "description" : ruleDefinition.description, @@ -535,10 +540,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 }); @@ -546,6 +552,15 @@ module.exports = React.createClass({ self.setState({ phase: self.phases.ERROR }); + }).finally(() => { + // actually explicitly update our state having been deep-manipulating it + self.state({ + masterPushRule: self.state.masterPushRule, + vectorContentRules: self.state.vectorContentRules, + vectorPushRules: self.state.vectorPushRules, + externalContentRules: self.state.externalContentRules, + externalPushRules: self.state.externalPushRules, + }); }); }, @@ -599,6 +614,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; @@ -607,13 +623,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 ( -
- -
- ); + spinner = ; } if (this.state.masterPushRule) { @@ -714,6 +727,8 @@ module.exports = React.createClass({
+ { spinner } +
Off On - Loud + Highlight
& sound diff --git a/src/skins/vector/css/matrix-react-sdk/structures/UserSettings.css b/src/skins/vector/css/matrix-react-sdk/structures/UserSettings.css index 6ef69f1d..2ab1f5eb 100644 --- a/src/skins/vector/css/matrix-react-sdk/structures/UserSettings.css +++ b/src/skins/vector/css/matrix-react-sdk/structures/UserSettings.css @@ -106,6 +106,10 @@ limitations under the License. display: table; } +.mx_UserSettings_notifTable .mx_Spinner { + position: absolute; +} + .mx_UserSettings_profileTable { display: table; From 10a053019dbeb924db95763c23725024afe700b4 Mon Sep 17 00:00:00 2001 From: Matthew Hodgson Date: Sun, 17 Apr 2016 17:35:17 +0100 Subject: [PATCH 32/42] fix thinkos - thanks @richvdh for posthoc review --- src/components/views/settings/Notifications.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/views/settings/Notifications.js b/src/components/views/settings/Notifications.js index 7ca3fa3a..f6536aa0 100644 --- a/src/components/views/settings/Notifications.js +++ b/src/components/views/settings/Notifications.js @@ -554,14 +554,14 @@ module.exports = React.createClass({ }); }).finally(() => { // actually explicitly update our state having been deep-manipulating it - self.state({ + 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) { From aeb438dc62ecce538c0a61e0ba76bf4c2438333d Mon Sep 17 00:00:00 2001 From: Matthew Hodgson Date: Sun, 17 Apr 2016 17:44:04 +0100 Subject: [PATCH 33/42] fix tbody & keying warnings --- src/components/views/settings/Notifications.js | 18 +++++++++++------- 1 file changed, 11 insertions(+), 7 deletions(-) diff --git a/src/components/views/settings/Notifications.js b/src/components/views/settings/Notifications.js index f6536aa0..72dc4e94 100644 --- a/src/components/views/settings/Notifications.js +++ b/src/components/views/settings/Notifications.js @@ -581,7 +581,7 @@ module.exports = React.createClass({ renderNotifRulesTableRow: function(title, className, pushRuleVectorState) { return ( - + {title} @@ -692,17 +692,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) { - rows.push( + rows.push( {this.state.pushers[i].app_display_name} {this.state.pushers[i].device_display_name} ); } devicesSection = ( - - - - - {rows} + + + + + + + + {rows} +
ApplicationDevice
ApplicationDevice
); } From 210cb3185227a0557c0a27a0b388ef228f9b2ce5 Mon Sep 17 00:00:00 2001 From: Richard van der Hoff Date: Sun, 17 Apr 2016 21:41:50 +0100 Subject: [PATCH 34/42] Upgrade to react 15.0 (which also requires upgrades to react-gemini-scrollbar and react-dnd) --- package.json | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/package.json b/package.json index 6c85f552..ec895a88 100644 --- a/package.json +++ b/package.json @@ -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#4707b88", "sanitize-html": "^1.11.1" }, "devDependencies": { @@ -72,7 +72,7 @@ "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", "rimraf": "^2.4.3", "source-map-loader": "^0.1.5", "webpack": "^1.12.14" From da7909f1ceed6aecda6dd214a2a0230c859cb451 Mon Sep 17 00:00:00 2001 From: Richard van der Hoff Date: Tue, 19 Apr 2016 13:36:25 +0100 Subject: [PATCH 35/42] Bump to release versions of js-sdk and react-sdk ... in preparation for vector release. --- package.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/package.json b/package.json index ec895a88..c9f1a1ff 100644 --- a/package.json +++ b/package.json @@ -41,8 +41,8 @@ "gfm.css": "^1.1.1", "highlight.js": "^9.0.0", "linkifyjs": "^2.0.0-beta.4", - "matrix-js-sdk": "matrix-org/matrix-js-sdk#develop", - "matrix-react-sdk": "matrix-org/matrix-react-sdk#develop", + "matrix-js-sdk": "^0.5.2", + "matrix-react-sdk": "^0.5.1", "modernizr": "^3.1.0", "q": "^1.4.1", "react": "^15.0.1", From 5627089a2ab1113f9cc64edae7ccec255bbcad90 Mon Sep 17 00:00:00 2001 From: Richard van der Hoff Date: Tue, 19 Apr 2016 13:39:40 +0100 Subject: [PATCH 36/42] Prepare changelog for v0.6.0 --- CHANGELOG.md | 26 +++++++++++++++++++++++++- 1 file changed, 25 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index c9faad2b..b0991182 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -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) ====================================== From abca28c80b593b584c0bf9090cd3d83305d67505 Mon Sep 17 00:00:00 2001 From: Richard van der Hoff Date: Tue, 19 Apr 2016 13:39:40 +0100 Subject: [PATCH 37/42] 0.6.0 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index c9f1a1ff..7673f61a 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "vector-web", - "version": "0.5.0", + "version": "0.6.0", "description": "Vector webapp", "author": "matrix.org", "repository": { From a0b460b084c256739699fbe27ae4af4c25ee7c98 Mon Sep 17 00:00:00 2001 From: Richard van der Hoff Date: Sun, 17 Apr 2016 21:06:51 +0100 Subject: [PATCH 38/42] Include react-addons-perf for non-production builds This makes it possible to gather a few performance stats --- package.json | 1 + src/vector/index.js | 9 ++++++++- webpack.config.js | 1 + 3 files changed, 10 insertions(+), 1 deletion(-) diff --git a/package.json b/package.json index 7673f61a..21e40ecb 100644 --- a/package.json +++ b/package.json @@ -73,6 +73,7 @@ "parallelshell": "^1.2.0", "phantomjs-prebuilt": "^2.1.7", "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" diff --git a/src/vector/index.js b/src/vector/index.js index 6dd975d2..e3178c96 100644 --- a/src/vector/index.js +++ b/src/vector/index.js @@ -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')); diff --git a/webpack.config.js b/webpack.config.js index dfe127d6..297881f3 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -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'), From e71ca328e79c60ba81e1ae10a0846be5f55a758a Mon Sep 17 00:00:00 2001 From: Richard van der Hoff Date: Tue, 19 Apr 2016 18:32:35 +0100 Subject: [PATCH 39/42] Switch back to dev builds of the react-sdk and js-sdk --- package.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/package.json b/package.json index 7673f61a..d011b2dd 100644 --- a/package.json +++ b/package.json @@ -41,8 +41,8 @@ "gfm.css": "^1.1.1", "highlight.js": "^9.0.0", "linkifyjs": "^2.0.0-beta.4", - "matrix-js-sdk": "^0.5.2", - "matrix-react-sdk": "^0.5.1", + "matrix-js-sdk": "matrix-org/matrix-js-sdk#develop", + "matrix-react-sdk": "matrix-org/matrix-react-sdk#develop", "modernizr": "^3.1.0", "q": "^1.4.1", "react": "^15.0.1", From b5f029d10e8a3b7a0d03cc65504de00ac0c4d1f4 Mon Sep 17 00:00:00 2001 From: Richard van der Hoff Date: Tue, 19 Apr 2016 20:28:29 +0100 Subject: [PATCH 40/42] Turn react consistency checks off in develop builds For now at least, turn off the consistency checks in build:dev, and hence in /develop. This will allow us to more meaningfully compare performance between /beta and /develop. --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index f9c3c53d..b10b097c 100644 --- a/package.json +++ b/package.json @@ -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", From 02f58ef9e39505dfd4dd00e8ee4636d98977b545 Mon Sep 17 00:00:00 2001 From: Richard van der Hoff Date: Wed, 20 Apr 2016 12:29:32 +0100 Subject: [PATCH 41/42] Don't relayout scrollpanels every time something changes Gemini's habit of reflowing everything everytime anything changes at all makes for an unresponsive app. Turn it off everywhere we use gemini. --- package.json | 4 ++-- src/components/structures/RoomDirectory.js | 8 ++++---- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/package.json b/package.json index b10b097c..4bf5046c 100644 --- a/package.json +++ b/package.json @@ -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", @@ -49,7 +49,7 @@ "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#4707b88", + "react-gemini-scrollbar": "matrix-org/react-gemini-scrollbar#6f5336c", "sanitize-html": "^1.11.1" }, "devDependencies": { diff --git a/src/components/structures/RoomDirectory.js b/src/components/structures/RoomDirectory.js index a4a5670d..d7808230 100644 --- a/src/components/structures/RoomDirectory.js +++ b/src/components/structures/RoomDirectory.js @@ -129,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; @@ -213,7 +213,8 @@ module.exports = React.createClass({
- + { this.getRows(this.state.roomAlias) } @@ -225,4 +226,3 @@ module.exports = React.createClass({ ); } }); - From b8018942fc0d425bcb365972f9c6166e7fd005da Mon Sep 17 00:00:00 2001 From: Richard van der Hoff Date: Wed, 20 Apr 2016 13:46:59 +0100 Subject: [PATCH 42/42] Bump react-gemini-scrollbar (to pick up a non-broken version) --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 4bf5046c..43b17325 100644 --- a/package.json +++ b/package.json @@ -49,7 +49,7 @@ "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#6f5336c", + "react-gemini-scrollbar": "matrix-org/react-gemini-scrollbar#c3d942e", "sanitize-html": "^1.11.1" }, "devDependencies": {