From 97daca4b311722faa1ec9a23a799cf024ee33e1b Mon Sep 17 00:00:00 2001 From: wmwragg Date: Mon, 22 Aug 2016 14:10:06 +0100 Subject: [PATCH 01/31] Initial restyle of the sub lists and room lists --- src/components/structures/RoomSubList.js | 14 ++++--- .../matrix-react-sdk/structures/SearchBox.css | 1 - .../matrix-react-sdk/views/rooms/RoomList.css | 1 - .../matrix-react-sdk/views/rooms/RoomTile.css | 21 +++++----- .../css/vector-web/structures/RoomSubList.css | 40 ++++++++++++++++--- 5 files changed, 52 insertions(+), 25 deletions(-) diff --git a/src/components/structures/RoomSubList.js b/src/components/structures/RoomSubList.js index 74ddb879a..6fa8a28bb 100644 --- a/src/components/structures/RoomSubList.js +++ b/src/components/structures/RoomSubList.js @@ -17,6 +17,7 @@ limitations under the License. 'use strict'; var React = require('react'); +var classNames = require('classnames'); var DropTarget = require('react-dnd').DropTarget; var sdk = require('matrix-react-sdk') var dis = require('matrix-react-sdk/lib/dispatcher'); @@ -300,13 +301,16 @@ var RoomSubList = React.createClass({ _getHeaderJsx: function() { var TintableSvg = sdk.getComponent("elements.TintableSvg"); + var classes = classNames({ + 'mx_RoomSubList_chevron': true, + 'mx_RoomSubList_chevronUp': this.state.hidden, + 'mx_RoomSubList_chevronDown': !this.state.hidden, + }); return ( -

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

+
+ ); }, 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 d9e4e05fd..0b5362593 100644 --- a/src/skins/vector/css/matrix-react-sdk/structures/SearchBox.css +++ b/src/skins/vector/css/matrix-react-sdk/structures/SearchBox.css @@ -20,7 +20,6 @@ limitations under the License. margin-right: 16px; padding-top: 24px; padding-bottom: 22px; - border-bottom: 1px solid rgba(0, 0, 0, 0.1); display: flex; display: -webkit-flex; 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 a22418534..a339d80f9 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,6 @@ limitations under the License. */ .mx_RoomList { - padding-top: 8px; padding-bottom: 12px; min-height: 400px; } 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 c266b027d..254565035 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 @@ -109,9 +109,8 @@ limitations under the License. } .collapsed .mx_RoomTile_badge { - top: -2px; + top: 0px; min-width: 12px; - height: 16px; border-radius: 16px; padding: 0px 4px 0px 4px; z-index: 200; @@ -129,22 +128,22 @@ limitations under the License. display: block; width: 0; height: 0; - margin-left: 6px; - border-top: 8px solid #ff0064; - border-right: 10px solid transparent; + margin-left: 5px; + border-top: 5px solid #ff0064; + border-right: 7px solid transparent; } .mx_RoomTile_badge { display: inline-block; - min-width: 19px; - height: 17px; + min-width: 15px; + height: 15px; position: absolute; right: 8px; /*gutter */ top: 9px; - border-radius: 14px; + border-radius: 8px; color: #fff; font-weight: 600; - font-size: 11px; + font-size: 10px; text-align: center; padding-top: 1px; padding-left: 4px; @@ -175,7 +174,7 @@ limitations under the License. } .mx_RoomTile_selected { - background-color: rgba(118,207,166,0.2); + background-color: rgba(255, 255, 255, 0.8); } .mx_RoomTile .mx_RoomTile_name.mx_RoomTile_badgeShown { @@ -187,5 +186,3 @@ limitations under the License. right: 0px; } -.mx_RoomTile:hover { -} diff --git a/src/skins/vector/css/vector-web/structures/RoomSubList.css b/src/skins/vector/css/vector-web/structures/RoomSubList.css index b54fea981..cd232181c 100644 --- a/src/skins/vector/css/vector-web/structures/RoomSubList.css +++ b/src/skins/vector/css/vector-web/structures/RoomSubList.css @@ -21,22 +21,50 @@ limitations under the License. } .mx_RoomSubList_label { + position: relative; text-transform: uppercase; color: #3d3b39; font-weight: 600; - font-size: 13px; + font-size: 12px; padding-left: 16px; /* gutter */ padding-right: 16px; /* gutter */ - margin-top: 8px; - margin-bottom: 4px; + padding-top: 6px; + padding-bottom: 6px; cursor: pointer; + background-color: rgba(118, 207, 166, 0.2); +} + +.collapsed .mx_RoomSubList_label { + height: 16px; } .mx_RoomSubList_chevron { - padding-left: 4px; pointer-events: none; + position: absolute; + right: 41px; + top: 11px; } -.collapsed .mx_RoomSubList_chevron { - padding-left: 12px; +.mx_RoomSubList_chevronDown { + width: 0; + height: 0; + border-left: 5px solid transparent; + border-right: 5px solid transparent; + border-top: 6px solid #76cfa6; +} + +.mx_RoomSubList_chevronUp { + width: 0; + height: 0; + border-left: 5px solid transparent; + border-right: 5px solid transparent; + border-bottom: 6px solid #76cfa6; +} + +.mx_RoomSubList_chevronRight { + width: 0; + height: 0; + border-top: 5px solid transparent; + border-left: 6px solid #76cfa6; + border-bottom: 5px solid transparent; } From 71f73d8df2cfd38d27f23d8e88603616e50f655b Mon Sep 17 00:00:00 2001 From: wmwragg Date: Mon, 22 Aug 2016 15:50:36 +0100 Subject: [PATCH 02/31] Collapsing and truncation initial state and onClick event logic --- src/components/structures/RoomSubList.js | 57 +++++++++++++----------- 1 file changed, 30 insertions(+), 27 deletions(-) diff --git a/src/components/structures/RoomSubList.js b/src/components/structures/RoomSubList.js index 6fa8a28bb..c5507e76b 100644 --- a/src/components/structures/RoomSubList.js +++ b/src/components/structures/RoomSubList.js @@ -27,6 +27,8 @@ var MatrixClientPeg = require('matrix-react-sdk/lib/MatrixClientPeg'); // turn this on for drop & drag console debugging galore var debug = false; +const TRUNCATE_AT = 6; + var roomListTarget = { canDrop: function() { return true; @@ -81,7 +83,8 @@ var RoomSubList = React.createClass({ getInitialState: function() { return { hidden: this.props.startAsHidden || false, - truncateAt: 20, + capTruncate: this.props.list.length > TRUNCATE_AT, + truncateAt: this.props.list.length > TRUNCATE_AT ? TRUNCATE_AT : -1, sortedList: [], }; }, @@ -111,15 +114,32 @@ var RoomSubList = React.createClass({ }, onClick: function(ev) { - var isHidden = !this.state.hidden; - this.setState({ hidden : isHidden }); + // Collapse and truncation logic + var isHidden = false; + var isTruncatable = this.props.list.length > TRUNCATE_AT; - if (isHidden) { - // as good a way as any to reset the truncate state - this.setState({ truncateAt : 20 }); - this.props.onShowMoreRooms(); + if (this.state.hidden && (this.state.capTruncate && isTruncatable)) { + isHidden = false; + this.setState({ hidden : isHidden }); + this.setState({ capTruncate : true }); + // Show truncated list + this.setState({ truncateAt : TRUNCATE_AT }); + } else if ((!this.state.hidden && this.state.capTruncate) || + (this.state.hidden && (this.state.capTruncate && !isTruncatable))) { + isHidden = false; + this.setState({ hidden : isHidden }); + this.setState({ capTruncate : false }); + // Show full list + this.setState({ truncateAt : -1 }); + } else if (!this.state.hidden && !this.state.capTruncate) { + isHidden = true; + this.setState({ hidden : isHidden }); + this.setState({ capTruncate : true }); + // Truncated list + this.setState({ truncateAt : TRUNCATE_AT }); } + this.props.onShowMoreRooms(); this.props.onHeaderClick(isHidden); }, @@ -304,7 +324,8 @@ var RoomSubList = React.createClass({ var classes = classNames({ 'mx_RoomSubList_chevron': true, 'mx_RoomSubList_chevronUp': this.state.hidden, - 'mx_RoomSubList_chevronDown': !this.state.hidden, + 'mx_RoomSubList_chevronRight': !this.state.hidden && this.state.capTruncate, + 'mx_RoomSubList_chevronDown': !this.state.hidden && !this.state.capTruncate, }); return (
@@ -314,25 +335,7 @@ var RoomSubList = React.createClass({ ); }, - _createOverflowTile: function(overflowCount, totalCount) { - var BaseAvatar = sdk.getComponent('avatars.BaseAvatar'); - // XXX: this is duplicated from RoomTile - factor it out - return ( -
-
- -
-
and { overflowCount } others...
-
- ); - }, - - _showFullMemberList: function() { - this.setState({ - truncateAt: -1 - }); - this.props.onShowMoreRooms(); - }, + _createOverflowTile: function() {}, // NOP // Fix any undefined order elements of a room in a manual ordered list // room.tag[tagname].order From 895172d4981848121a69245244316975b4911250 Mon Sep 17 00:00:00 2001 From: wmwragg Date: Mon, 22 Aug 2016 16:42:08 +0100 Subject: [PATCH 03/31] Added catch to help get the Historical and any other weird sections into a sound state, so the states can then change correctly from then on --- src/components/structures/RoomSubList.js | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/src/components/structures/RoomSubList.js b/src/components/structures/RoomSubList.js index c5507e76b..50db2b412 100644 --- a/src/components/structures/RoomSubList.js +++ b/src/components/structures/RoomSubList.js @@ -137,6 +137,13 @@ var RoomSubList = React.createClass({ this.setState({ capTruncate : true }); // Truncated list this.setState({ truncateAt : TRUNCATE_AT }); + } else { + // Catch any weird states the system gets into + isHidden = false; + this.setState({ hidden : isHidden }); + this.setState({ capTruncate : true }); + // Show truncated list + this.setState({ truncateAt : TRUNCATE_AT }); } this.props.onShowMoreRooms(); From ff55a951c9f415a88b0862d80f88d91c8e57ddea Mon Sep 17 00:00:00 2001 From: wmwragg Date: Mon, 22 Aug 2016 17:02:52 +0100 Subject: [PATCH 04/31] Number of rooms added to header of sections --- src/components/structures/RoomSubList.js | 5 +++-- .../vector/css/vector-web/structures/RoomSubList.css | 8 ++++++++ 2 files changed, 11 insertions(+), 2 deletions(-) diff --git a/src/components/structures/RoomSubList.js b/src/components/structures/RoomSubList.js index 50db2b412..a96e8d285 100644 --- a/src/components/structures/RoomSubList.js +++ b/src/components/structures/RoomSubList.js @@ -328,7 +328,7 @@ var RoomSubList = React.createClass({ _getHeaderJsx: function() { var TintableSvg = sdk.getComponent("elements.TintableSvg"); - var classes = classNames({ + var chevronClasses = classNames({ 'mx_RoomSubList_chevron': true, 'mx_RoomSubList_chevronUp': this.state.hidden, 'mx_RoomSubList_chevronRight': !this.state.hidden && this.state.capTruncate, @@ -337,7 +337,8 @@ var RoomSubList = React.createClass({ return (
{ this.props.collapsed ? '' : this.props.label } -
+
{this.props.list.length > 0 ? this.props.list.length : ''}
+
); }, diff --git a/src/skins/vector/css/vector-web/structures/RoomSubList.css b/src/skins/vector/css/vector-web/structures/RoomSubList.css index cd232181c..b1e89cb88 100644 --- a/src/skins/vector/css/vector-web/structures/RoomSubList.css +++ b/src/skins/vector/css/vector-web/structures/RoomSubList.css @@ -38,6 +38,14 @@ limitations under the License. height: 16px; } +.mx_RoomSubList_roomCount { + display: inline-block; + font-size: 12px; + font-weight: normal; + color: #76cfa6; + padding-left: 5px; +} + .mx_RoomSubList_chevron { pointer-events: none; position: absolute; From 4d5e3bc22be8b9ce4a0a13c2d508ff77ce67066a Mon Sep 17 00:00:00 2001 From: wmwragg Date: Mon, 22 Aug 2016 17:25:43 +0100 Subject: [PATCH 05/31] Initial tag section header badge --- src/components/structures/RoomSubList.js | 1 + .../css/vector-web/structures/RoomSubList.css | 26 +++++++++++++++++++ 2 files changed, 27 insertions(+) diff --git a/src/components/structures/RoomSubList.js b/src/components/structures/RoomSubList.js index a96e8d285..e4ca6edbf 100644 --- a/src/components/structures/RoomSubList.js +++ b/src/components/structures/RoomSubList.js @@ -339,6 +339,7 @@ var RoomSubList = React.createClass({ { this.props.collapsed ? '' : this.props.label }
{this.props.list.length > 0 ? this.props.list.length : ''}
+
0
); }, diff --git a/src/skins/vector/css/vector-web/structures/RoomSubList.css b/src/skins/vector/css/vector-web/structures/RoomSubList.css index b1e89cb88..974cf3e71 100644 --- a/src/skins/vector/css/vector-web/structures/RoomSubList.css +++ b/src/skins/vector/css/vector-web/structures/RoomSubList.css @@ -46,6 +46,32 @@ limitations under the License. padding-left: 5px; } +.collapsed .mx_RoomSubList_roomCount { + display: none; +} + +.mx_RoomSubList_badge { + display: inline-block; + min-width: 15px; + height: 15px; + position: absolute; + right: 8px; /*gutter */ + top: 7px; + border-radius: 8px; + color: #fff; + font-weight: 600; + font-size: 10px; + text-align: center; + padding-top: 1px; + padding-left: 4px; + padding-right: 4px; + background-color: #76cfa6; /* Temporary */ +} + +.collapsed .mx_RoomSubList_badge { + display: none; +} + .mx_RoomSubList_chevron { pointer-events: none; position: absolute; From ca4d506391d796e51b49394b247e33024a641070 Mon Sep 17 00:00:00 2001 From: wmwragg Date: Mon, 22 Aug 2016 22:47:00 +0100 Subject: [PATCH 06/31] Header wording for capped truncation count updated --- src/components/structures/RoomSubList.js | 10 +++++++++- .../vector/css/vector-web/structures/RoomSubList.css | 1 + 2 files changed, 10 insertions(+), 1 deletion(-) diff --git a/src/components/structures/RoomSubList.js b/src/components/structures/RoomSubList.js index e4ca6edbf..a60951f9e 100644 --- a/src/components/structures/RoomSubList.js +++ b/src/components/structures/RoomSubList.js @@ -328,16 +328,24 @@ var RoomSubList = React.createClass({ _getHeaderJsx: function() { var TintableSvg = sdk.getComponent("elements.TintableSvg"); + var chevronClasses = classNames({ 'mx_RoomSubList_chevron': true, 'mx_RoomSubList_chevronUp': this.state.hidden, 'mx_RoomSubList_chevronRight': !this.state.hidden && this.state.capTruncate, 'mx_RoomSubList_chevronDown': !this.state.hidden && !this.state.capTruncate, }); + + var roomCount = this.props.list.length > 0 ? this.props.list.length : ''; + var isTruncatable = this.props.list.length > TRUNCATE_AT; + if (!this.state.hidden && this.state.capTruncate && isTruncatable) { + roomCount = TRUNCATE_AT + " of " + roomCount; + } + return (
{ this.props.collapsed ? '' : this.props.label } -
{this.props.list.length > 0 ? this.props.list.length : ''}
+
{roomCount}
0
diff --git a/src/skins/vector/css/vector-web/structures/RoomSubList.css b/src/skins/vector/css/vector-web/structures/RoomSubList.css index 974cf3e71..aeef4a424 100644 --- a/src/skins/vector/css/vector-web/structures/RoomSubList.css +++ b/src/skins/vector/css/vector-web/structures/RoomSubList.css @@ -44,6 +44,7 @@ limitations under the License. font-weight: normal; color: #76cfa6; padding-left: 5px; + text-transform: none; } .collapsed .mx_RoomSubList_roomCount { From a980864886e9c6c79bd9c89d81feea7d48e5544d Mon Sep 17 00:00:00 2001 From: wmwragg Date: Tue, 23 Aug 2016 10:47:17 +0100 Subject: [PATCH 07/31] Initial sub list notifications count. Still needs propagation of muting/unmuting etc. events from room tile up to sub list --- src/components/structures/RoomSubList.js | 55 ++++++++++++++++--- .../css/vector-web/structures/RoomSubList.css | 23 +++++++- 2 files changed, 70 insertions(+), 8 deletions(-) diff --git a/src/components/structures/RoomSubList.js b/src/components/structures/RoomSubList.js index a60951f9e..740cb82e4 100644 --- a/src/components/structures/RoomSubList.js +++ b/src/components/structures/RoomSubList.js @@ -214,6 +214,38 @@ var RoomSubList = React.createClass({ this.setState({ sortedList: list.sort(comparator) }); }, + roomNotificationCount: function() { + var self = this; + var subListCount = 0; + var subListHighlight = false; + var cli = MatrixClientPeg.get(); + + this.state.sortedList.map(function(room) { + var notifsMuted = false; + if (!cli.isGuest()) { + var roomPushRule = cli.getRoomPushRule("global", room.roomId); + if (roomPushRule) { + if (0 <= roomPushRule.actions.indexOf("dont_notify")) { + notifsMuted = true; + } + } + } + + var highlight = room.getUnreadNotificationCount('highlight') > 0 || self.props.label === 'Invites'; + + var notificationCount = room.getUnreadNotificationCount(); + + if (notificationCount > 0 && (!notifsMuted || (notifsMuted && highlight))) { + subListCount += notificationCount; + if (highlight) { + subListHighlight = true; + } + } + }); + + return [subListCount, subListHighlight]; + }, + moveRoomTile: function(room, atIndex) { if (debug) console.log("moveRoomTile: id " + room.roomId + ", atIndex " + atIndex); //console.log("moveRoomTile before: " + JSON.stringify(this.state.rooms)); @@ -329,12 +361,9 @@ var RoomSubList = React.createClass({ _getHeaderJsx: function() { var TintableSvg = sdk.getComponent("elements.TintableSvg"); - var chevronClasses = classNames({ - 'mx_RoomSubList_chevron': true, - 'mx_RoomSubList_chevronUp': this.state.hidden, - 'mx_RoomSubList_chevronRight': !this.state.hidden && this.state.capTruncate, - 'mx_RoomSubList_chevronDown': !this.state.hidden && !this.state.capTruncate, - }); + var subListNotifications = this.roomNotificationCount(); + var subListNotificationsCount = subListNotifications[0]; + var subListNotificationsHighlight = subListNotifications[1]; var roomCount = this.props.list.length > 0 ? this.props.list.length : ''; var isTruncatable = this.props.list.length > TRUNCATE_AT; @@ -342,12 +371,24 @@ var RoomSubList = React.createClass({ roomCount = TRUNCATE_AT + " of " + roomCount; } + var chevronClasses = classNames({ + 'mx_RoomSubList_chevron': true, + 'mx_RoomSubList_chevronUp': this.state.hidden, + 'mx_RoomSubList_chevronRight': !this.state.hidden && this.state.capTruncate, + 'mx_RoomSubList_chevronDown': !this.state.hidden && !this.state.capTruncate, + }); + + var badgeClasses = classNames({ + 'mx_RoomSubList_badge': true, + 'mx_RoomSubList_badgeHighlight': subListNotificationsHighlight, + }); + return (
{ this.props.collapsed ? '' : this.props.label }
{roomCount}
-
0
+
{subListNotificationsCount}
); }, diff --git a/src/skins/vector/css/vector-web/structures/RoomSubList.css b/src/skins/vector/css/vector-web/structures/RoomSubList.css index aeef4a424..a5ea7d144 100644 --- a/src/skins/vector/css/vector-web/structures/RoomSubList.css +++ b/src/skins/vector/css/vector-web/structures/RoomSubList.css @@ -66,13 +66,34 @@ limitations under the License. padding-top: 1px; padding-left: 4px; padding-right: 4px; - background-color: #76cfa6; /* Temporary */ + background-color: #76cfa6; } .collapsed .mx_RoomSubList_badge { display: none; } +.mx_RoomSubList_badgeHighlight { + background-color: #ff0064; +} + +/* This is the bottom of the speech bubble */ +.mx_RoomSubList_badgeHighlight:after { + content: ""; + position: absolute; + display: block; + width: 0; + height: 0; + margin-left: 5px; + border-top: 5px solid #ff0064; + border-right: 7px solid transparent; +} + +/* Hide the bottom of speech bubble */ +.collapsed .mx_RoomSubList_badgeHighlight:after { + display: none; +} + .mx_RoomSubList_chevron { pointer-events: none; position: absolute; From d3fa680373e8ff7f8ed730b6025e41a29efe6f0e Mon Sep 17 00:00:00 2001 From: wmwragg Date: Tue, 23 Aug 2016 11:14:45 +0100 Subject: [PATCH 08/31] Added all the notification states to the sub list count logic --- src/components/structures/RoomSubList.js | 26 ++++++++++-------------- 1 file changed, 11 insertions(+), 15 deletions(-) diff --git a/src/components/structures/RoomSubList.js b/src/components/structures/RoomSubList.js index 740cb82e4..221691087 100644 --- a/src/components/structures/RoomSubList.js +++ b/src/components/structures/RoomSubList.js @@ -23,6 +23,7 @@ var sdk = require('matrix-react-sdk') var dis = require('matrix-react-sdk/lib/dispatcher'); var Unread = require('matrix-react-sdk/lib/Unread'); var MatrixClientPeg = require('matrix-react-sdk/lib/MatrixClientPeg'); +var RoomNotifs = require('matrix-react-sdk/lib/RoomNotifs'); // turn this on for drop & drag console debugging galore var debug = false; @@ -221,24 +222,19 @@ var RoomSubList = React.createClass({ var cli = MatrixClientPeg.get(); this.state.sortedList.map(function(room) { - var notifsMuted = false; - if (!cli.isGuest()) { - var roomPushRule = cli.getRoomPushRule("global", room.roomId); - if (roomPushRule) { - if (0 <= roomPushRule.actions.indexOf("dont_notify")) { - notifsMuted = true; - } - } - } - + var roomNotifState = RoomNotifs.getRoomNotifsState(room.roomId); var highlight = room.getUnreadNotificationCount('highlight') > 0 || self.props.label === 'Invites'; - var notificationCount = room.getUnreadNotificationCount(); - if (notificationCount > 0 && (!notifsMuted || (notifsMuted && highlight))) { - subListCount += notificationCount; - if (highlight) { - subListHighlight = true; + if (notificationCount > 0 && roomNotifState !== RoomNotifs.MUTE) { + if (roomNotifState === RoomNotifs.ALL_MESSAGES_LOUD + || roomNotifState === RoomNotifs.ALL_MESSAGES + || (roomNotifState === RoomNotifs.MENTIONS_ONLY && highlight)) + { + subListCount += notificationCount; + if (highlight) { + subListHighlight = true; + } } } }); From ee73bc3aa427395e02e7d895c200ce6d7715192e Mon Sep 17 00:00:00 2001 From: wmwragg Date: Tue, 23 Aug 2016 11:35:03 +0100 Subject: [PATCH 09/31] Refactor of the badge logic, and also added no badges when zero notifications --- src/components/structures/RoomSubList.js | 33 +++++++++++++++++------- 1 file changed, 23 insertions(+), 10 deletions(-) diff --git a/src/components/structures/RoomSubList.js b/src/components/structures/RoomSubList.js index 221691087..746d0fb1c 100644 --- a/src/components/structures/RoomSubList.js +++ b/src/components/structures/RoomSubList.js @@ -215,6 +215,15 @@ var RoomSubList = React.createClass({ this.setState({ sortedList: list.sort(comparator) }); }, + _shouldShowNotifBadge: function(roomNotifState) { + const showBadgeInStates = [RoomNotifs.ALL_MESSAGES, RoomNotifs.ALL_MESSAGES_LOUD]; + return showBadgeInStates.indexOf(roomNotifState) > -1; + }, + + _shouldShowMentionBadge: function(roomNotifState) { + return roomNotifState != RoomNotifs.MUTE; + }, + roomNotificationCount: function() { var self = this; var subListCount = 0; @@ -226,15 +235,14 @@ var RoomSubList = React.createClass({ var highlight = room.getUnreadNotificationCount('highlight') > 0 || self.props.label === 'Invites'; var notificationCount = room.getUnreadNotificationCount(); - if (notificationCount > 0 && roomNotifState !== RoomNotifs.MUTE) { - if (roomNotifState === RoomNotifs.ALL_MESSAGES_LOUD - || roomNotifState === RoomNotifs.ALL_MESSAGES - || (roomNotifState === RoomNotifs.MENTIONS_ONLY && highlight)) - { - subListCount += notificationCount; - if (highlight) { - subListHighlight = true; - } + const notifBadges = notificationCount > 0 && self._shouldShowNotifBadge(roomNotifState); + const mentionBadges = highlight && self._shouldShowMentionBadge(roomNotifState); + const badges = notifBadges || mentionBadges; + + if (badges) { + subListCount += notificationCount; + if (highlight) { + subListHighlight = true; } } }); @@ -379,12 +387,17 @@ var RoomSubList = React.createClass({ 'mx_RoomSubList_badgeHighlight': subListNotificationsHighlight, }); + var badge; + if (subListNotificationsCount > 0) { + badge =
{subListNotificationsCount}
; + } + return (
{ this.props.collapsed ? '' : this.props.label }
{roomCount}
-
{subListNotificationsCount}
+ {badge}
); }, From 2cf2df20f6458c933f8d806ce87ff19333494c48 Mon Sep 17 00:00:00 2001 From: wmwragg Date: Tue, 23 Aug 2016 12:40:15 +0100 Subject: [PATCH 10/31] Added updating of count when room tile notification state changed --- src/components/structures/RoomSubList.js | 66 ++++++++++++++---------- 1 file changed, 40 insertions(+), 26 deletions(-) diff --git a/src/components/structures/RoomSubList.js b/src/components/structures/RoomSubList.js index 746d0fb1c..6ddea5606 100644 --- a/src/components/structures/RoomSubList.js +++ b/src/components/structures/RoomSubList.js @@ -82,11 +82,15 @@ var RoomSubList = React.createClass({ }, getInitialState: function() { + var subListNotifications = this.roomNotificationCount(); + return { hidden: this.props.startAsHidden || false, capTruncate: this.props.list.length > TRUNCATE_AT, truncateAt: this.props.list.length > TRUNCATE_AT ? TRUNCATE_AT : -1, sortedList: [], + subListNotifCount: subListNotifications[0], + subListNotifHighlight: subListNotifications[1], }; }, @@ -121,30 +125,35 @@ var RoomSubList = React.createClass({ if (this.state.hidden && (this.state.capTruncate && isTruncatable)) { isHidden = false; - this.setState({ hidden : isHidden }); - this.setState({ capTruncate : true }); - // Show truncated list - this.setState({ truncateAt : TRUNCATE_AT }); - } else if ((!this.state.hidden && this.state.capTruncate) || - (this.state.hidden && (this.state.capTruncate && !isTruncatable))) { + this.setState({ + hidden : isHidden, + capTruncate : true, + truncateAt : TRUNCATE_AT + }); + } else if ((!this.state.hidden && this.state.capTruncate) + || (this.state.hidden && (this.state.capTruncate && !isTruncatable))) + { isHidden = false; - this.setState({ hidden : isHidden }); - this.setState({ capTruncate : false }); - // Show full list - this.setState({ truncateAt : -1 }); + this.setState({ + hidden : isHidden, + capTruncate : false, + truncateAt : -1 + }); } else if (!this.state.hidden && !this.state.capTruncate) { isHidden = true; - this.setState({ hidden : isHidden }); - this.setState({ capTruncate : true }); - // Truncated list - this.setState({ truncateAt : TRUNCATE_AT }); + this.setState({ + hidden : isHidden, + capTruncate : true, + truncateAt : TRUNCATE_AT + }); } else { // Catch any weird states the system gets into isHidden = false; - this.setState({ hidden : isHidden }); - this.setState({ capTruncate : true }); - // Show truncated list - this.setState({ truncateAt : TRUNCATE_AT }); + this.setState({ + hidden : isHidden, + capTruncate : true, + truncateAt : TRUNCATE_AT + }); } this.props.onShowMoreRooms(); @@ -230,7 +239,7 @@ var RoomSubList = React.createClass({ var subListHighlight = false; var cli = MatrixClientPeg.get(); - this.state.sortedList.map(function(room) { + this.props.list.map(function(room) { var roomNotifState = RoomNotifs.getRoomNotifsState(room.roomId); var highlight = room.getUnreadNotificationCount('highlight') > 0 || self.props.label === 'Invites'; var notificationCount = room.getUnreadNotificationCount(); @@ -250,6 +259,14 @@ var RoomSubList = React.createClass({ return [subListCount, subListHighlight]; }, + _updateSubListCount: function() { + var subListNotifications = this.roomNotificationCount(); + this.setState({ + subListNotifCount: subListNotifications[0], + subListNotifHighlight: subListNotifications[1] + }); + }, + moveRoomTile: function(room, atIndex) { if (debug) console.log("moveRoomTile: id " + room.roomId + ", atIndex " + atIndex); //console.log("moveRoomTile before: " + JSON.stringify(this.state.rooms)); @@ -357,6 +374,7 @@ var RoomSubList = React.createClass({ unread={ Unread.doesRoomHaveUnreadMessages(room) } highlight={ room.getUnreadNotificationCount('highlight') > 0 || self.props.label === 'Invites' } isInvite={ self.props.label === 'Invites' } + refreshSubList={ self._updateSubListCount } incomingCall={ self.props.incomingCall && (self.props.incomingCall.roomId === room.roomId) ? self.props.incomingCall : null } /> ); }); @@ -365,10 +383,6 @@ var RoomSubList = React.createClass({ _getHeaderJsx: function() { var TintableSvg = sdk.getComponent("elements.TintableSvg"); - var subListNotifications = this.roomNotificationCount(); - var subListNotificationsCount = subListNotifications[0]; - var subListNotificationsHighlight = subListNotifications[1]; - var roomCount = this.props.list.length > 0 ? this.props.list.length : ''; var isTruncatable = this.props.list.length > TRUNCATE_AT; if (!this.state.hidden && this.state.capTruncate && isTruncatable) { @@ -384,12 +398,12 @@ var RoomSubList = React.createClass({ var badgeClasses = classNames({ 'mx_RoomSubList_badge': true, - 'mx_RoomSubList_badgeHighlight': subListNotificationsHighlight, + 'mx_RoomSubList_badgeHighlight': this.state.subListNotifHighlight, }); var badge; - if (subListNotificationsCount > 0) { - badge =
{subListNotificationsCount}
; + if (this.state.subListNotifCount > 0) { + badge =
{this.state.subListNotifCount}
; } return ( From d2e8201d79c3188b558f82e2f83f77a31ac0c0cb Mon Sep 17 00:00:00 2001 From: wmwragg Date: Tue, 23 Aug 2016 13:24:02 +0100 Subject: [PATCH 11/31] Making sure that the sub list count always stays up to date, including when people read the outstanding notifications --- src/components/structures/RoomSubList.js | 23 +++++++++++------------ 1 file changed, 11 insertions(+), 12 deletions(-) diff --git a/src/components/structures/RoomSubList.js b/src/components/structures/RoomSubList.js index 6ddea5606..e79f612de 100644 --- a/src/components/structures/RoomSubList.js +++ b/src/components/structures/RoomSubList.js @@ -82,15 +82,11 @@ var RoomSubList = React.createClass({ }, getInitialState: function() { - var subListNotifications = this.roomNotificationCount(); - return { hidden: this.props.startAsHidden || false, capTruncate: this.props.list.length > TRUNCATE_AT, truncateAt: this.props.list.length > TRUNCATE_AT ? TRUNCATE_AT : -1, sortedList: [], - subListNotifCount: subListNotifications[0], - subListNotifHighlight: subListNotifications[1], }; }, @@ -260,11 +256,10 @@ var RoomSubList = React.createClass({ }, _updateSubListCount: function() { - var subListNotifications = this.roomNotificationCount(); - this.setState({ - subListNotifCount: subListNotifications[0], - subListNotifHighlight: subListNotifications[1] - }); + // Force an update by setting the state to the current state + // Doing it this way rather than using forceUpdate(), so that the shouldComponentUpdate() + // method is honoured + this.setState(this.state); }, moveRoomTile: function(room, atIndex) { @@ -383,6 +378,10 @@ var RoomSubList = React.createClass({ _getHeaderJsx: function() { var TintableSvg = sdk.getComponent("elements.TintableSvg"); + var subListNotifications = this.roomNotificationCount(); + var subListNotifCount = subListNotifications[0]; + var subListNotifHighlight = subListNotifications[1]; + var roomCount = this.props.list.length > 0 ? this.props.list.length : ''; var isTruncatable = this.props.list.length > TRUNCATE_AT; if (!this.state.hidden && this.state.capTruncate && isTruncatable) { @@ -398,12 +397,12 @@ var RoomSubList = React.createClass({ var badgeClasses = classNames({ 'mx_RoomSubList_badge': true, - 'mx_RoomSubList_badgeHighlight': this.state.subListNotifHighlight, + 'mx_RoomSubList_badgeHighlight': subListNotifHighlight, }); var badge; - if (this.state.subListNotifCount > 0) { - badge =
{this.state.subListNotifCount}
; + if (subListNotifCount > 0) { + badge =
{subListNotifCount}
; } return ( From 21ffe223757c4147db4e22064a5050beebe97bd4 Mon Sep 17 00:00:00 2001 From: Richard van der Hoff Date: Thu, 25 Aug 2016 17:06:12 +0100 Subject: [PATCH 12/31] Turn react consistency checks back on in develop builds The react checks are useful on /develop, to catch programming errors earlier, and the original reason for turning them off (so that we could meaningfully compare performance between /develop and /beta) is no longer so relevant. This reverts commit b5f029d10e8a3b7a0d03cc65504de00ac0c4d1f4. --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index be87139b2..3ae97e9b2 100644 --- a/package.json +++ b/package.json @@ -17,7 +17,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": "NODE_ENV=production webpack --optimize-occurence-order lib/vector/index.js vector/bundle.js", + "build:bundle:dev": "webpack --optimize-occurence-order lib/vector/index.js vector/bundle.js", "build:staticfiles": "cpx -v node_modules/olm/olm.js vector/", "build": "npm run build:staticfiles && npm run build:emojione && npm run build:css && npm run build:compile && npm run build:bundle", "build:dev": "npm run build:staticfiles && npm run build:emojione && npm run build:css && npm run build:compile && npm run build:bundle:dev", From 4cb1f8a2264ea440037f63945c83f523c05743b6 Mon Sep 17 00:00:00 2001 From: wmwragg Date: Thu, 25 Aug 2016 19:46:15 +0100 Subject: [PATCH 13/31] Initial pass at sticky headers for the LHS panel section labels --- src/components/structures/RoomSubList.js | 13 ++++++++----- .../css/vector-web/structures/RoomSubList.css | 15 +++++++++++++++ 2 files changed, 23 insertions(+), 5 deletions(-) diff --git a/src/components/structures/RoomSubList.js b/src/components/structures/RoomSubList.js index e79f612de..3a6fecec1 100644 --- a/src/components/structures/RoomSubList.js +++ b/src/components/structures/RoomSubList.js @@ -79,6 +79,7 @@ var RoomSubList = React.createClass({ incomingCall: React.PropTypes.object, onShowMoreRooms: React.PropTypes.func, searchFilter: React.PropTypes.string, + headerStack: React.PropTypes.func, }, getInitialState: function() { @@ -406,11 +407,13 @@ var RoomSubList = React.createClass({ } return ( -
- { this.props.collapsed ? '' : this.props.label } -
{roomCount}
-
- {badge} +
+
+ { this.props.collapsed ? '' : this.props.label } +
{roomCount}
+
+ {badge} +
); }, diff --git a/src/skins/vector/css/vector-web/structures/RoomSubList.css b/src/skins/vector/css/vector-web/structures/RoomSubList.css index a5ea7d144..cb80a8f76 100644 --- a/src/skins/vector/css/vector-web/structures/RoomSubList.css +++ b/src/skins/vector/css/vector-web/structures/RoomSubList.css @@ -20,18 +20,33 @@ limitations under the License. width: 100%; } +.mx_RoomSubList_stickyContainer { + height: 29px; + position: relative; +} + .mx_RoomSubList_label { position: relative; text-transform: uppercase; color: #3d3b39; font-weight: 600; font-size: 12px; + width: 203px; /* padding + width = LHS Panel width */ + height: 17px; /* padding + height = 29px, same as mx_RoomSubList_stickyContainer */ padding-left: 16px; /* gutter */ padding-right: 16px; /* gutter */ padding-top: 6px; padding-bottom: 6px; cursor: pointer; background-color: rgba(118, 207, 166, 0.2); + z-index: 3; +} + +.mx_RoomSubList_label.mx_RoomSubList_fixed { + position: fixed; + top: 0; + z-index: 2; + pointer-events: none; } .collapsed .mx_RoomSubList_label { From a0236a9b7631a22305abfdb4b80545db69c0e4d3 Mon Sep 17 00:00:00 2001 From: wmwragg Date: Fri, 26 Aug 2016 09:57:02 +0100 Subject: [PATCH 14/31] Code tidy-up and better name for label container class --- src/components/structures/RoomSubList.js | 3 +-- src/skins/vector/css/vector-web/structures/RoomSubList.css | 2 +- 2 files changed, 2 insertions(+), 3 deletions(-) diff --git a/src/components/structures/RoomSubList.js b/src/components/structures/RoomSubList.js index 3a6fecec1..e1c65c981 100644 --- a/src/components/structures/RoomSubList.js +++ b/src/components/structures/RoomSubList.js @@ -79,7 +79,6 @@ var RoomSubList = React.createClass({ incomingCall: React.PropTypes.object, onShowMoreRooms: React.PropTypes.func, searchFilter: React.PropTypes.string, - headerStack: React.PropTypes.func, }, getInitialState: function() { @@ -407,7 +406,7 @@ var RoomSubList = React.createClass({ } return ( -
+
{ this.props.collapsed ? '' : this.props.label }
{roomCount}
diff --git a/src/skins/vector/css/vector-web/structures/RoomSubList.css b/src/skins/vector/css/vector-web/structures/RoomSubList.css index cb80a8f76..8e3c228a8 100644 --- a/src/skins/vector/css/vector-web/structures/RoomSubList.css +++ b/src/skins/vector/css/vector-web/structures/RoomSubList.css @@ -20,7 +20,7 @@ limitations under the License. width: 100%; } -.mx_RoomSubList_stickyContainer { +.mx_RoomSubList_labelContainer { height: 29px; position: relative; } From d2937c2aed9d0f5a2d49259081c1ca4723523d21 Mon Sep 17 00:00:00 2001 From: wmwragg Date: Fri, 26 Aug 2016 11:02:12 +0100 Subject: [PATCH 15/31] Setting correct heights and widths for label and container --- src/skins/vector/css/vector-web/structures/RoomSubList.css | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/skins/vector/css/vector-web/structures/RoomSubList.css b/src/skins/vector/css/vector-web/structures/RoomSubList.css index 8e3c228a8..bc7f15e68 100644 --- a/src/skins/vector/css/vector-web/structures/RoomSubList.css +++ b/src/skins/vector/css/vector-web/structures/RoomSubList.css @@ -22,6 +22,7 @@ limitations under the License. .mx_RoomSubList_labelContainer { height: 29px; + width: 235px; /* LHS Panel width */ position: relative; } @@ -50,7 +51,8 @@ limitations under the License. } .collapsed .mx_RoomSubList_label { - height: 16px; + height: 17px; + width: 28px; /* collapsed LHS Panel width */ } .mx_RoomSubList_roomCount { From 5467fd89d87d209f65fc3c8f60b2bd690a141736 Mon Sep 17 00:00:00 2001 From: wmwragg Date: Fri, 26 Aug 2016 14:35:40 +0100 Subject: [PATCH 16/31] Getting click to not collapse expand when header stuck --- src/components/structures/RoomSubList.js | 85 ++++++++++--------- .../css/vector-web/structures/LeftPanel.css | 1 + .../css/vector-web/structures/RoomSubList.css | 3 +- 3 files changed, 49 insertions(+), 40 deletions(-) diff --git a/src/components/structures/RoomSubList.js b/src/components/structures/RoomSubList.js index e1c65c981..f3122decb 100644 --- a/src/components/structures/RoomSubList.js +++ b/src/components/structures/RoomSubList.js @@ -17,6 +17,7 @@ limitations under the License. 'use strict'; var React = require('react'); +var ReactDOM = require('react-dom'); var classNames = require('classnames'); var DropTarget = require('react-dnd').DropTarget; var sdk = require('matrix-react-sdk') @@ -114,46 +115,54 @@ var RoomSubList = React.createClass({ }); }, + isHeaderStuck: function() { + var stuck = this.refs.header.dataset.stuck; + return stuck !== undefined && (stuck === "top" || stuck === "bottom"); + }, + onClick: function(ev) { - // Collapse and truncation logic - var isHidden = false; - var isTruncatable = this.props.list.length > TRUNCATE_AT; + if (!this.isHeaderStuck()) { + // Collapse and truncation logic + var isHidden = false; + var isTruncatable = this.props.list.length > TRUNCATE_AT; - if (this.state.hidden && (this.state.capTruncate && isTruncatable)) { - isHidden = false; - this.setState({ - hidden : isHidden, - capTruncate : true, - truncateAt : TRUNCATE_AT - }); - } else if ((!this.state.hidden && this.state.capTruncate) - || (this.state.hidden && (this.state.capTruncate && !isTruncatable))) - { - isHidden = false; - this.setState({ - hidden : isHidden, - capTruncate : false, - truncateAt : -1 - }); - } else if (!this.state.hidden && !this.state.capTruncate) { - isHidden = true; - this.setState({ - hidden : isHidden, - capTruncate : true, - truncateAt : TRUNCATE_AT - }); - } else { - // Catch any weird states the system gets into - isHidden = false; - this.setState({ - hidden : isHidden, - capTruncate : true, - truncateAt : TRUNCATE_AT - }); + if (this.state.hidden && (this.state.capTruncate && isTruncatable)) { + isHidden = false; + this.setState({ + hidden : isHidden, + capTruncate : true, + truncateAt : TRUNCATE_AT + }); + } else if ((!this.state.hidden && this.state.capTruncate) + || (this.state.hidden && (this.state.capTruncate && !isTruncatable))) + { + isHidden = false; + this.setState({ + hidden : isHidden, + capTruncate : false, + truncateAt : -1 + }); + } else if (!this.state.hidden && !this.state.capTruncate) { + isHidden = true; + this.setState({ + hidden : isHidden, + capTruncate : true, + truncateAt : TRUNCATE_AT + }); + } else { + // Catch any weird states the system gets into + isHidden = false; + this.setState({ + hidden : isHidden, + capTruncate : true, + truncateAt : TRUNCATE_AT + }); + } + + this.props.onShowMoreRooms(); } - - this.props.onShowMoreRooms(); - this.props.onHeaderClick(isHidden); + ev.persist(); + this.props.onHeaderClick(ev, isHidden); }, tsOfNewestEvent: function(room) { @@ -406,7 +415,7 @@ var RoomSubList = React.createClass({ } return ( -
+
{ this.props.collapsed ? '' : this.props.label }
{roomCount}
diff --git a/src/skins/vector/css/vector-web/structures/LeftPanel.css b/src/skins/vector/css/vector-web/structures/LeftPanel.css index 316246cb3..e97746cbe 100644 --- a/src/skins/vector/css/vector-web/structures/LeftPanel.css +++ b/src/skins/vector/css/vector-web/structures/LeftPanel.css @@ -49,6 +49,7 @@ limitations under the License. flex: 1 1 0; overflow-y: auto; + z-index: 3; } .mx_LeftPanel.collapsed .mx_BottomLeftMenu { diff --git a/src/skins/vector/css/vector-web/structures/RoomSubList.css b/src/skins/vector/css/vector-web/structures/RoomSubList.css index bc7f15e68..0751921da 100644 --- a/src/skins/vector/css/vector-web/structures/RoomSubList.css +++ b/src/skins/vector/css/vector-web/structures/RoomSubList.css @@ -40,14 +40,13 @@ limitations under the License. padding-bottom: 6px; cursor: pointer; background-color: rgba(118, 207, 166, 0.2); - z-index: 3; } .mx_RoomSubList_label.mx_RoomSubList_fixed { position: fixed; top: 0; z-index: 2; - pointer-events: none; + /* pointer-events: none; */ } .collapsed .mx_RoomSubList_label { From 5b9d3b119fe4d6e0d566f8414af72e5ab9318690 Mon Sep 17 00:00:00 2001 From: wmwragg Date: Fri, 26 Aug 2016 15:08:47 +0100 Subject: [PATCH 17/31] Click on stuck header scrolls to that header, collapses expands for none stuck header --- src/components/structures/RoomSubList.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/components/structures/RoomSubList.js b/src/components/structures/RoomSubList.js index f3122decb..cce68b187 100644 --- a/src/components/structures/RoomSubList.js +++ b/src/components/structures/RoomSubList.js @@ -160,9 +160,10 @@ var RoomSubList = React.createClass({ } this.props.onShowMoreRooms(); + this.props.onHeaderClick(isHidden); + } else { + this.props.onHeaderClick(isHidden, this.refs.header.dataset.originalPosition); } - ev.persist(); - this.props.onHeaderClick(ev, isHidden); }, tsOfNewestEvent: function(room) { From 7ad3f4a5777de02066d7ba237a3e1dc2bd64827e Mon Sep 17 00:00:00 2001 From: wmwragg Date: Fri, 26 Aug 2016 15:53:31 +0100 Subject: [PATCH 18/31] Better comments --- src/components/structures/RoomSubList.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/components/structures/RoomSubList.js b/src/components/structures/RoomSubList.js index cce68b187..488b54912 100644 --- a/src/components/structures/RoomSubList.js +++ b/src/components/structures/RoomSubList.js @@ -115,6 +115,7 @@ var RoomSubList = React.createClass({ }); }, + // The dataset elements are added in the RoomList _initAndPositionStickyHeaders method isHeaderStuck: function() { var stuck = this.refs.header.dataset.stuck; return stuck !== undefined && (stuck === "top" || stuck === "bottom"); @@ -122,7 +123,7 @@ var RoomSubList = React.createClass({ onClick: function(ev) { if (!this.isHeaderStuck()) { - // Collapse and truncation logic + // The header is not stuck, so the click is to be interpreted as collapse and truncation logic var isHidden = false; var isTruncatable = this.props.list.length > TRUNCATE_AT; @@ -162,6 +163,7 @@ var RoomSubList = React.createClass({ this.props.onShowMoreRooms(); this.props.onHeaderClick(isHidden); } else { + // The header is stuck, so the click is to be interpreted as a scroll to the header this.props.onHeaderClick(isHidden, this.refs.header.dataset.originalPosition); } }, From 879c325b83909485471ad2271b21053d6bba0503 Mon Sep 17 00:00:00 2001 From: Matthew Hodgson Date: Fri, 26 Aug 2016 16:08:15 +0100 Subject: [PATCH 19/31] DIE ZALGO --- src/skins/vector/css/matrix-react-sdk/views/rooms/EventTile.css | 1 + 1 file changed, 1 insertion(+) diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/EventTile.css b/src/skins/vector/css/matrix-react-sdk/views/rooms/EventTile.css index 9534d9f55..22a88458a 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/rooms/EventTile.css +++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/EventTile.css @@ -50,6 +50,7 @@ limitations under the License. color: #454545; opacity: 0.5; font-size: 14px; + display: block; /* anti-zalgo, with overflow hidden */ overflow-y: hidden; cursor: pointer; padding-left: 65px; /* left gutter */ From dc4459083f9d8533f17383bb6747866ca6aad369 Mon Sep 17 00:00:00 2001 From: wmwragg Date: Fri, 26 Aug 2016 16:22:59 +0100 Subject: [PATCH 20/31] Fixed the LHS panel not collapsing but most of the content doing so --- src/skins/vector/css/vector-web/structures/RoomSubList.css | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/skins/vector/css/vector-web/structures/RoomSubList.css b/src/skins/vector/css/vector-web/structures/RoomSubList.css index 0751921da..27467fb0d 100644 --- a/src/skins/vector/css/vector-web/structures/RoomSubList.css +++ b/src/skins/vector/css/vector-web/structures/RoomSubList.css @@ -54,6 +54,10 @@ limitations under the License. width: 28px; /* collapsed LHS Panel width */ } +.collapsed .mx_RoomSubList_labelContainer { + width: 28px; /* collapsed LHS Panel width */ +} + .mx_RoomSubList_roomCount { display: inline-block; font-size: 12px; From 8d4268754eda6ad774fbedd1e207c907af5257a1 Mon Sep 17 00:00:00 2001 From: wmwragg Date: Sun, 28 Aug 2016 12:03:05 +0100 Subject: [PATCH 21/31] Fixed the stickies notification count to limit it to 99+ --- src/components/structures/RoomSubList.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/structures/RoomSubList.js b/src/components/structures/RoomSubList.js index 488b54912..29d450643 100644 --- a/src/components/structures/RoomSubList.js +++ b/src/components/structures/RoomSubList.js @@ -414,7 +414,7 @@ var RoomSubList = React.createClass({ var badge; if (subListNotifCount > 0) { - badge =
{subListNotifCount}
; + badge =
{subListNotifCount > 99 ? "99+" : subListNotifCount}
; } return ( From b782e7b9ad04e95ddcb00b15b180b4b3b40d93c4 Mon Sep 17 00:00:00 2001 From: wmwragg Date: Sun, 28 Aug 2016 13:22:14 +0100 Subject: [PATCH 22/31] Bottom line of the scroll area (well the top line of the bottom left menu) is now tinted same colour as the section headers --- src/skins/vector/css/vector-web/structures/LeftPanel.css | 2 +- 1 file changed, 1 insertion(+), 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 e97746cbe..8d8e20938 100644 --- a/src/skins/vector/css/vector-web/structures/LeftPanel.css +++ b/src/skins/vector/css/vector-web/structures/LeftPanel.css @@ -63,7 +63,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(118, 207, 166, 0.2); margin-left: 16px; /* gutter */ margin-right: 16px; /* gutter */ -webkit-flex: 0 0 60px; From 900b4b4cf848290763c0e20f549768f11a92d82d Mon Sep 17 00:00:00 2001 From: wmwragg Date: Sun, 28 Aug 2016 13:44:52 +0100 Subject: [PATCH 23/31] Added a border to the top of the sections to better seperate them when they are stuck together --- 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 27467fb0d..3bc468fe5 100644 --- a/src/skins/vector/css/vector-web/structures/RoomSubList.css +++ b/src/skins/vector/css/vector-web/structures/RoomSubList.css @@ -40,6 +40,7 @@ limitations under the License. padding-bottom: 6px; cursor: pointer; background-color: rgba(118, 207, 166, 0.2); + border-top: solid 2px #eaf5f0; } .mx_RoomSubList_label.mx_RoomSubList_fixed { From 4ae424f37a4012f5b2b07a81355593da750312da Mon Sep 17 00:00:00 2001 From: wmwragg Date: Sun, 28 Aug 2016 14:48:29 +0100 Subject: [PATCH 24/31] Removed the 2px border at top of labels to see if that has any effect on bottom stickies overscroll on matthews machine --- src/skins/vector/css/vector-web/structures/RoomSubList.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/skins/vector/css/vector-web/structures/RoomSubList.css b/src/skins/vector/css/vector-web/structures/RoomSubList.css index 3bc468fe5..f3f7037f7 100644 --- a/src/skins/vector/css/vector-web/structures/RoomSubList.css +++ b/src/skins/vector/css/vector-web/structures/RoomSubList.css @@ -40,7 +40,7 @@ limitations under the License. padding-bottom: 6px; cursor: pointer; background-color: rgba(118, 207, 166, 0.2); - border-top: solid 2px #eaf5f0; + /* border-top: solid 2px #eaf5f0; */ } .mx_RoomSubList_label.mx_RoomSubList_fixed { From 93fff53e29ed3c7e14c6bf05503d0f0bf1581b03 Mon Sep 17 00:00:00 2001 From: wmwragg Date: Sun, 28 Aug 2016 16:22:56 +0100 Subject: [PATCH 25/31] Added back the border spacing, as it wasn't the issue --- src/skins/vector/css/vector-web/structures/RoomSubList.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/skins/vector/css/vector-web/structures/RoomSubList.css b/src/skins/vector/css/vector-web/structures/RoomSubList.css index f3f7037f7..3bc468fe5 100644 --- a/src/skins/vector/css/vector-web/structures/RoomSubList.css +++ b/src/skins/vector/css/vector-web/structures/RoomSubList.css @@ -40,7 +40,7 @@ limitations under the License. padding-bottom: 6px; cursor: pointer; background-color: rgba(118, 207, 166, 0.2); - /* border-top: solid 2px #eaf5f0; */ + border-top: solid 2px #eaf5f0; } .mx_RoomSubList_label.mx_RoomSubList_fixed { From f2e8607433d0afdda70488c1c3f06cc68349fba4 Mon Sep 17 00:00:00 2001 From: wmwragg Date: Sun, 28 Aug 2016 19:14:54 +0100 Subject: [PATCH 26/31] Over scroll of bottom sticky headers should be fixed, and expansion of hidden stuck headers should now work --- src/components/structures/RoomSubList.js | 14 ++++++++++---- .../css/matrix-react-sdk/views/rooms/RoomList.css | 5 +++++ .../vector/css/vector-web/structures/LeftPanel.css | 1 - .../css/vector-web/structures/RoomSubList.css | 2 +- 4 files changed, 16 insertions(+), 6 deletions(-) diff --git a/src/components/structures/RoomSubList.js b/src/components/structures/RoomSubList.js index 29d450643..81d851dd1 100644 --- a/src/components/structures/RoomSubList.js +++ b/src/components/structures/RoomSubList.js @@ -115,15 +115,21 @@ var RoomSubList = React.createClass({ }); }, + // The header is collapsable if it is hidden or not stuck // The dataset elements are added in the RoomList _initAndPositionStickyHeaders method - isHeaderStuck: function() { + isCollapsableOnClick: function() { var stuck = this.refs.header.dataset.stuck; - return stuck !== undefined && (stuck === "top" || stuck === "bottom"); + var topBottomSticky = this.refs.header.dataset.topBottomSticky; + if (this.state.hidden || stuck === undefined || stuck === "none") { + return true; + } else { + return false; + } }, onClick: function(ev) { - if (!this.isHeaderStuck()) { - // The header is not stuck, so the click is to be interpreted as collapse and truncation logic + if (this.isCollapsableOnClick()) { + // The header iscCollapsable, so the click is to be interpreted as collapse and truncation logic var isHidden = false; var isTruncatable = this.props.list.length > TRUNCATE_AT; 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 a339d80f9..06ac885c2 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 @@ -32,3 +32,8 @@ limitations under the License. overflow-x: hidden ! important; overflow-y: scroll ! important; } + +/* Make sure the scrollbar is above the sticky headers from RoomList */ +.mx_RoomList_scrollbar .gm-scrollbar.-vertical { + z-index: 3; +} diff --git a/src/skins/vector/css/vector-web/structures/LeftPanel.css b/src/skins/vector/css/vector-web/structures/LeftPanel.css index 8d8e20938..47f286715 100644 --- a/src/skins/vector/css/vector-web/structures/LeftPanel.css +++ b/src/skins/vector/css/vector-web/structures/LeftPanel.css @@ -49,7 +49,6 @@ limitations under the License. flex: 1 1 0; overflow-y: auto; - z-index: 3; } .mx_LeftPanel.collapsed .mx_BottomLeftMenu { diff --git a/src/skins/vector/css/vector-web/structures/RoomSubList.css b/src/skins/vector/css/vector-web/structures/RoomSubList.css index 3bc468fe5..2c1c49a38 100644 --- a/src/skins/vector/css/vector-web/structures/RoomSubList.css +++ b/src/skins/vector/css/vector-web/structures/RoomSubList.css @@ -21,7 +21,7 @@ limitations under the License. } .mx_RoomSubList_labelContainer { - height: 29px; + height: 31px; /* mx_RoomSubList_label height including border */ width: 235px; /* LHS Panel width */ position: relative; } From ff3ad47be72155e7952eec770ff15d36434c8381 Mon Sep 17 00:00:00 2001 From: wmwragg Date: Tue, 30 Aug 2016 10:45:59 +0100 Subject: [PATCH 27/31] Code clean up, and better comments, along with z-index fixes for scrollbar and avatar menu --- src/components/structures/RoomSubList.js | 15 +++++---------- .../css/matrix-react-sdk/views/rooms/RoomList.css | 2 +- .../css/vector-web/structures/LeftPanel.css | 1 + .../css/vector-web/structures/RoomSubList.css | 2 +- 4 files changed, 8 insertions(+), 12 deletions(-) diff --git a/src/components/structures/RoomSubList.js b/src/components/structures/RoomSubList.js index 81d851dd1..4817218be 100644 --- a/src/components/structures/RoomSubList.js +++ b/src/components/structures/RoomSubList.js @@ -119,7 +119,6 @@ var RoomSubList = React.createClass({ // The dataset elements are added in the RoomList _initAndPositionStickyHeaders method isCollapsableOnClick: function() { var stuck = this.refs.header.dataset.stuck; - var topBottomSticky = this.refs.header.dataset.topBottomSticky; if (this.state.hidden || stuck === undefined || stuck === "none") { return true; } else { @@ -249,11 +248,8 @@ var RoomSubList = React.createClass({ roomNotificationCount: function() { var self = this; - var subListCount = 0; - var subListHighlight = false; - var cli = MatrixClientPeg.get(); - this.props.list.map(function(room) { + return this.props.list.reduce(function(result, room) { var roomNotifState = RoomNotifs.getRoomNotifsState(room.roomId); var highlight = room.getUnreadNotificationCount('highlight') > 0 || self.props.label === 'Invites'; var notificationCount = room.getUnreadNotificationCount(); @@ -263,14 +259,13 @@ var RoomSubList = React.createClass({ const badges = notifBadges || mentionBadges; if (badges) { - subListCount += notificationCount; + result[0] += notificationCount; if (highlight) { - subListHighlight = true; + result[1] = true; } } - }); - - return [subListCount, subListHighlight]; + return result; + }, [0, false]); }, _updateSubListCount: function() { 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 06ac885c2..4dcda646f 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 @@ -35,5 +35,5 @@ limitations under the License. /* Make sure the scrollbar is above the sticky headers from RoomList */ .mx_RoomList_scrollbar .gm-scrollbar.-vertical { - z-index: 3; + z-index: 5; } diff --git a/src/skins/vector/css/vector-web/structures/LeftPanel.css b/src/skins/vector/css/vector-web/structures/LeftPanel.css index 47f286715..fb023ffea 100644 --- a/src/skins/vector/css/vector-web/structures/LeftPanel.css +++ b/src/skins/vector/css/vector-web/structures/LeftPanel.css @@ -49,6 +49,7 @@ limitations under the License. flex: 1 1 0; overflow-y: auto; + z-index: 5; } .mx_LeftPanel.collapsed .mx_BottomLeftMenu { diff --git a/src/skins/vector/css/vector-web/structures/RoomSubList.css b/src/skins/vector/css/vector-web/structures/RoomSubList.css index 2c1c49a38..4d9b0668f 100644 --- a/src/skins/vector/css/vector-web/structures/RoomSubList.css +++ b/src/skins/vector/css/vector-web/structures/RoomSubList.css @@ -46,7 +46,7 @@ limitations under the License. .mx_RoomSubList_label.mx_RoomSubList_fixed { position: fixed; top: 0; - z-index: 2; + z-index: 4; /* pointer-events: none; */ } From 45a813b7953a2a2c8e10f700797099d7f00777af Mon Sep 17 00:00:00 2001 From: wmwragg Date: Tue, 30 Aug 2016 11:56:16 +0100 Subject: [PATCH 28/31] Fixed historical scetion not scrolling up when clicked if not hidden and stuck --- src/components/structures/RoomSubList.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/structures/RoomSubList.js b/src/components/structures/RoomSubList.js index 4fd2618d6..2565bd1ff 100644 --- a/src/components/structures/RoomSubList.js +++ b/src/components/structures/RoomSubList.js @@ -169,7 +169,7 @@ var RoomSubList = React.createClass({ this.props.onHeaderClick(isHidden); } else { // The header is stuck, so the click is to be interpreted as a scroll to the header - this.props.onHeaderClick(isHidden, this.refs.header.dataset.originalPosition); + this.props.onHeaderClick(this.state.hidden, this.refs.header.dataset.originalPosition); } }, From b91a0dd7a5f195e1b5075134d5a8e9b2bce5ac8b Mon Sep 17 00:00:00 2001 From: wmwragg Date: Tue, 30 Aug 2016 12:14:32 +0100 Subject: [PATCH 29/31] Increased truncation limit to 10 --- src/components/structures/RoomSubList.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/structures/RoomSubList.js b/src/components/structures/RoomSubList.js index 2565bd1ff..63b340563 100644 --- a/src/components/structures/RoomSubList.js +++ b/src/components/structures/RoomSubList.js @@ -29,7 +29,7 @@ var RoomNotifs = require('matrix-react-sdk/lib/RoomNotifs'); // turn this on for drop & drag console debugging galore var debug = false; -const TRUNCATE_AT = 6; +const TRUNCATE_AT = 10; var roomListTarget = { canDrop: function() { From c7eba0f292c293adc4e1c5f1f235291811f4587f Mon Sep 17 00:00:00 2001 From: Matthew Hodgson Date: Tue, 30 Aug 2016 13:52:30 +0100 Subject: [PATCH 30/31] repin deps to dev --- package.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/package.json b/package.json index 7f1e8d921..be190becd 100644 --- a/package.json +++ b/package.json @@ -47,8 +47,8 @@ "gfm.css": "^1.1.1", "highlight.js": "^9.0.0", "linkifyjs": "2.0.0-beta.4", - "matrix-js-sdk": "0.5.6", - "matrix-react-sdk": "0.6.5", + "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.2.1", From 0aae88d75328343be06effacfa29a66675e54684 Mon Sep 17 00:00:00 2001 From: Matthew Hodgson Date: Tue, 30 Aug 2016 14:40:30 +0100 Subject: [PATCH 31/31] nudge jenkins --- README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/README.md b/README.md index aff57eb9d..394e7c351 100644 --- a/README.md +++ b/README.md @@ -241,3 +241,4 @@ encrypted. Note that historical encrypted messages cannot currently be decoded - history is therefore lost when the page is reloaded. +