From 37fc73b1ea34c039f38c4a8df38ef6c3b60553ef Mon Sep 17 00:00:00 2001 From: wmwragg Date: Thu, 15 Sep 2016 17:31:15 +0100 Subject: [PATCH 1/9] Setting correct initial state --- src/components/structures/RoomSubList.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/components/structures/RoomSubList.js b/src/components/structures/RoomSubList.js index fb4d897ed0..0fe45f4706 100644 --- a/src/components/structures/RoomSubList.js +++ b/src/components/structures/RoomSubList.js @@ -85,8 +85,7 @@ var RoomSubList = React.createClass({ getInitialState: function() { return { hidden: this.props.startAsHidden || false, - capTruncate: this.props.list.length > TRUNCATE_AT, - truncateAt: this.props.list.length > TRUNCATE_AT ? TRUNCATE_AT : -1, + truncateAt: TRUNCATE_AT, sortedList: [], }; }, From 9375ebfb757cebfeb7e483a9e9a74dd11fff8004 Mon Sep 17 00:00:00 2001 From: wmwragg Date: Fri, 16 Sep 2016 08:06:17 +0100 Subject: [PATCH 2/9] Fixed broken tooltip positioning again --- .../vector/css/matrix-react-sdk/views/rooms/RoomTile.css | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) 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 623d578632..f43700d74e 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 @@ -25,8 +25,8 @@ limitations under the License. .mx_RoomTile_tooltip { display: inline-block; position: relative; - top: -62px; - left: 46px; + top: -54px; + left: -12px; } @@ -124,7 +124,8 @@ limitations under the License. } .collapsed .mx_RoomTile_nameContainer { - height: 0; + /* height: 0; */ + width: 60px; } .collapsed .mx_RoomTile_name { From 77085882fa11c1447bdb3dfea28fd38a51a7b1a0 Mon Sep 17 00:00:00 2001 From: wmwragg Date: Fri, 16 Sep 2016 08:08:31 +0100 Subject: [PATCH 3/9] quick tidy of CSS --- .../vector/css/matrix-react-sdk/views/rooms/RoomTile.css | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) 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 f43700d74e..d9317743a1 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 @@ -119,13 +119,11 @@ limitations under the License. } .mx_RoomTile_invite { -/* color: rgba(69, 69, 69, 0.5); -*/ +/* color: rgba(69, 69, 69, 0.5); */ } .collapsed .mx_RoomTile_nameContainer { - /* height: 0; */ - width: 60px; + width: 60px; /* colapsed panel width */ } .collapsed .mx_RoomTile_name { From 24d0b95cb23e7db26f4f71135d7cf0344ca0813a Mon Sep 17 00:00:00 2001 From: wmwragg Date: Fri, 16 Sep 2016 08:15:27 +0100 Subject: [PATCH 4/9] Corrected the tooltip text colour to match the design --- src/skins/vector/css/vector-web/views/rooms/RoomTooltip.css | 1 + 1 file changed, 1 insertion(+) diff --git a/src/skins/vector/css/vector-web/views/rooms/RoomTooltip.css b/src/skins/vector/css/vector-web/views/rooms/RoomTooltip.css index bf69f9e7bc..192fa77b39 100644 --- a/src/skins/vector/css/vector-web/views/rooms/RoomTooltip.css +++ b/src/skins/vector/css/vector-web/views/rooms/RoomTooltip.css @@ -48,5 +48,6 @@ limitations under the License. pointer-events: none; line-height: 14px; font-size: 13px; + color: rgba(0, 0, 0, 0.7); } From 737d1d88438ac4f5153484ad4f17a0c68f04144c Mon Sep 17 00:00:00 2001 From: wmwragg Date: Fri, 16 Sep 2016 10:48:52 +0100 Subject: [PATCH 5/9] Changed the overflow tile styling, but there is no collpased state or mention count yet --- src/components/structures/RoomSubList.js | 16 +++-- .../matrix-react-sdk/views/rooms/RoomTile.css | 58 ++++++++++++++++++- .../css/vector-web/structures/RoomSubList.css | 1 + 3 files changed, 68 insertions(+), 7 deletions(-) diff --git a/src/components/structures/RoomSubList.js b/src/components/structures/RoomSubList.js index 0fe45f4706..07fbb8f049 100644 --- a/src/components/structures/RoomSubList.js +++ b/src/components/structures/RoomSubList.js @@ -424,12 +424,20 @@ 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...
+//
+// ); return (
-
- -
-
and { overflowCount } others...
+
+
more
+
+
); }, 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 d9317743a1..2cc2755eb8 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 @@ -113,9 +113,61 @@ limitations under the License. text-overflow: ellipsis; } -.mx_RoomTile_ellipsis .mx_RoomTile_name { - font-style: italic; - color: #454545; +.mx_RoomTile_ellipsis { + line-height: 11px; + height: auto; + margin-bottom: 4px; +} + +.mx_RoomTile_line { + display: inline-block; + width: 159px; + border-top: dotted 2px #76cfa6; + vertical-align: middle; +} + +.mx_RoomTile_more { + display: inline-block; + text-transform: uppercase; + font-size: 10px; + font-weight: 600; + text-align: left; + color: #76cfa6; + padding-left: 7px; + padding-right: 7px; + padding-left: 7px; + vertical-align: middle; +} + +.mx_RoomTile_moreBadge { + display: inline-block; + min-width: 15px; + height: 13px; + position: absolute; + right: 8px; /*gutter */ + top: -2px; + border-radius: 8px; + border: solid 1px #76cfa6; + color: #fff; + font-weight: 600; + font-size: 10px; + text-align: center; + padding-top: 1px; + padding-left: 4px; + padding-right: 4px; + background-color: #fff; + vertical-align: middle; +} + +.mx_RoomTile_chevronDown { + width: 0; + height: 0; + border-left: 5px solid transparent; + border-right: 5px solid transparent; + border-top: 6px solid #76cfa6; + position: absolute; + top: 4px; + right: 16px; } .mx_RoomTile_invite { diff --git a/src/skins/vector/css/vector-web/structures/RoomSubList.css b/src/skins/vector/css/vector-web/structures/RoomSubList.css index 9e4162817a..43e77969bd 100644 --- a/src/skins/vector/css/vector-web/structures/RoomSubList.css +++ b/src/skins/vector/css/vector-web/structures/RoomSubList.css @@ -147,3 +147,4 @@ limitations under the License. border-left: 6px solid #76cfa6; border-bottom: 5px solid transparent; } + From 4b50a8a56e9ad06e3206056d00dee744f115d463 Mon Sep 17 00:00:00 2001 From: wmwragg Date: Fri, 16 Sep 2016 10:57:55 +0100 Subject: [PATCH 6/9] Refactored so the RoomSubList overflow element use RoomSubList CSS --- src/components/structures/RoomSubList.js | 20 ++---- .../matrix-react-sdk/views/rooms/RoomTile.css | 57 ----------------- .../css/vector-web/structures/RoomSubList.css | 62 +++++++++++++++++++ 3 files changed, 67 insertions(+), 72 deletions(-) diff --git a/src/components/structures/RoomSubList.js b/src/components/structures/RoomSubList.js index 07fbb8f049..f17f86263f 100644 --- a/src/components/structures/RoomSubList.js +++ b/src/components/structures/RoomSubList.js @@ -422,22 +422,12 @@ 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...
-//
-// ); return ( -
-
-
more
-
-
+
+
+
more
+
+
); }, 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 2cc2755eb8..5b8529438c 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 @@ -113,63 +113,6 @@ limitations under the License. text-overflow: ellipsis; } -.mx_RoomTile_ellipsis { - line-height: 11px; - height: auto; - margin-bottom: 4px; -} - -.mx_RoomTile_line { - display: inline-block; - width: 159px; - border-top: dotted 2px #76cfa6; - vertical-align: middle; -} - -.mx_RoomTile_more { - display: inline-block; - text-transform: uppercase; - font-size: 10px; - font-weight: 600; - text-align: left; - color: #76cfa6; - padding-left: 7px; - padding-right: 7px; - padding-left: 7px; - vertical-align: middle; -} - -.mx_RoomTile_moreBadge { - display: inline-block; - min-width: 15px; - height: 13px; - position: absolute; - right: 8px; /*gutter */ - top: -2px; - border-radius: 8px; - border: solid 1px #76cfa6; - color: #fff; - font-weight: 600; - font-size: 10px; - text-align: center; - padding-top: 1px; - padding-left: 4px; - padding-right: 4px; - background-color: #fff; - vertical-align: middle; -} - -.mx_RoomTile_chevronDown { - width: 0; - height: 0; - border-left: 5px solid transparent; - border-right: 5px solid transparent; - border-top: 6px solid #76cfa6; - position: absolute; - top: 4px; - right: 16px; -} - .mx_RoomTile_invite { /* color: rgba(69, 69, 69, 0.5); */ } diff --git a/src/skins/vector/css/vector-web/structures/RoomSubList.css b/src/skins/vector/css/vector-web/structures/RoomSubList.css index 43e77969bd..f22d950197 100644 --- a/src/skins/vector/css/vector-web/structures/RoomSubList.css +++ b/src/skins/vector/css/vector-web/structures/RoomSubList.css @@ -148,3 +148,65 @@ limitations under the License. border-bottom: 5px solid transparent; } +/* The overflow section */ +.mx_RoomSubList_ellipsis { + display: block; + line-height: 11px; + height: auto; + margin-bottom: 4px; + position: relative; + cursor: pointer; + font-size: 13px; +} + +.mx_RoomSubList_line { + display: inline-block; + width: 159px; + border-top: dotted 2px #76cfa6; + vertical-align: middle; +} + +.mx_RoomSubList_more { + display: inline-block; + text-transform: uppercase; + font-size: 10px; + font-weight: 600; + text-align: left; + color: #76cfa6; + padding-left: 7px; + padding-right: 7px; + padding-left: 7px; + vertical-align: middle; +} + +.mx_RoomSubList_moreBadge { + display: inline-block; + min-width: 15px; + height: 13px; + position: absolute; + right: 8px; /*gutter */ + top: -2px; + border-radius: 8px; + border: solid 1px #76cfa6; + color: #fff; + font-weight: 600; + font-size: 10px; + text-align: center; + padding-top: 1px; + padding-left: 4px; + padding-right: 4px; + background-color: #fff; + vertical-align: middle; +} + +.mx_RoomSubList_moreChevronDown { + width: 0; + height: 0; + border-left: 5px solid transparent; + border-right: 5px solid transparent; + border-top: 6px solid #76cfa6; + position: absolute; + top: 4px; + right: 16px; +} + From e2b695827e0d685e36680a1f150e94e88d904b48 Mon Sep 17 00:00:00 2001 From: wmwragg Date: Fri, 16 Sep 2016 11:02:09 +0100 Subject: [PATCH 7/9] Refactor to reuse RoomSubList chevron styling --- src/components/structures/RoomSubList.js | 2 +- src/skins/vector/css/vector-web/structures/RoomSubList.css | 7 +------ 2 files changed, 2 insertions(+), 7 deletions(-) diff --git a/src/components/structures/RoomSubList.js b/src/components/structures/RoomSubList.js index f17f86263f..546ed8075e 100644 --- a/src/components/structures/RoomSubList.js +++ b/src/components/structures/RoomSubList.js @@ -427,7 +427,7 @@ var RoomSubList = React.createClass({
more
-
+
); }, diff --git a/src/skins/vector/css/vector-web/structures/RoomSubList.css b/src/skins/vector/css/vector-web/structures/RoomSubList.css index f22d950197..1711956da1 100644 --- a/src/skins/vector/css/vector-web/structures/RoomSubList.css +++ b/src/skins/vector/css/vector-web/structures/RoomSubList.css @@ -199,12 +199,7 @@ limitations under the License. vertical-align: middle; } -.mx_RoomSubList_moreChevronDown { - width: 0; - height: 0; - border-left: 5px solid transparent; - border-right: 5px solid transparent; - border-top: 6px solid #76cfa6; +.mx_RoomSubList_ellipsis .mx_RoomSubList_chevronDown { position: absolute; top: 4px; right: 16px; From 72e108c4f9b7256a1e68b7877211377927556125 Mon Sep 17 00:00:00 2001 From: wmwragg Date: Fri, 16 Sep 2016 11:34:16 +0100 Subject: [PATCH 8/9] More robust badge positioning --- src/components/structures/RoomSubList.js | 4 +-- .../css/vector-web/structures/RoomSubList.css | 27 ++++++++++++++++--- 2 files changed, 25 insertions(+), 6 deletions(-) diff --git a/src/components/structures/RoomSubList.js b/src/components/structures/RoomSubList.js index 546ed8075e..ca3efcef1c 100644 --- a/src/components/structures/RoomSubList.js +++ b/src/components/structures/RoomSubList.js @@ -422,12 +422,12 @@ var RoomSubList = React.createClass({ }, _createOverflowTile: function(overflowCount, totalCount) { + var content =
; return (
more
-
-
+
{ content }
); }, diff --git a/src/skins/vector/css/vector-web/structures/RoomSubList.css b/src/skins/vector/css/vector-web/structures/RoomSubList.css index 1711956da1..b50cbfdc68 100644 --- a/src/skins/vector/css/vector-web/structures/RoomSubList.css +++ b/src/skins/vector/css/vector-web/structures/RoomSubList.css @@ -159,6 +159,10 @@ limitations under the License. font-size: 13px; } +.collapsed .mx_RoomSubList_ellipsis { + height: 16px; +} + .mx_RoomSubList_line { display: inline-block; width: 159px; @@ -166,6 +170,10 @@ limitations under the License. vertical-align: middle; } +.collapsed .mx_RoomSubList_line { + display: none; +} + .mx_RoomSubList_more { display: inline-block; text-transform: uppercase; @@ -179,6 +187,10 @@ limitations under the License. vertical-align: middle; } +.collapsed .mx_RoomSubList_more { + display: none; +} + .mx_RoomSubList_moreBadge { display: inline-block; min-width: 15px; @@ -199,9 +211,16 @@ limitations under the License. vertical-align: middle; } -.mx_RoomSubList_ellipsis .mx_RoomSubList_chevronDown { - position: absolute; - top: 4px; - right: 16px; +.collapsed .mx_RoomSubList_moreBadge { + position: static; + margin-left: 16px; + margin-top: 2px; } +.mx_RoomSubList_ellipsis .mx_RoomSubList_chevronDown { + position: relative; + top: 4px; + left: 2px; +} + + From 7af765976b835b94fd911bb05a3ad935e914904f Mon Sep 17 00:00:00 2001 From: wmwragg Date: Fri, 16 Sep 2016 13:25:39 +0100 Subject: [PATCH 9/9] Notification counts now done correctly, as well as highlights --- src/components/structures/RoomSubList.js | 48 ++++++++++++++----- .../css/vector-web/structures/RoomSubList.css | 25 ++++++++-- 2 files changed, 55 insertions(+), 18 deletions(-) diff --git a/src/components/structures/RoomSubList.js b/src/components/structures/RoomSubList.js index ca3efcef1c..dff6d5c8b5 100644 --- a/src/components/structures/RoomSubList.js +++ b/src/components/structures/RoomSubList.js @@ -217,22 +217,30 @@ var RoomSubList = React.createClass({ return roomNotifState != RoomNotifs.MUTE; }, - roomNotificationCount: function() { + /** + * Total up all the notification counts from the rooms + * + * @param {Number} If supplied will only total notifications for rooms outside the truncation number + * @returns {Array} The array takes the form [total, highlight] where highlight is a bool + */ + roomNotificationCount: function(truncateAt) { var self = this; - 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(); + return this.props.list.reduce(function(result, room, index) { + if (truncateAt === undefined || index >= truncateAt) { + var roomNotifState = RoomNotifs.getRoomNotifsState(room.roomId); + var highlight = room.getUnreadNotificationCount('highlight') > 0 || self.props.label === 'Invites'; + var notificationCount = room.getUnreadNotificationCount(); - const notifBadges = notificationCount > 0 && self._shouldShowNotifBadge(roomNotifState); - const mentionBadges = highlight && self._shouldShowMentionBadge(roomNotifState); - const badges = notifBadges || mentionBadges; + const notifBadges = notificationCount > 0 && self._shouldShowNotifBadge(roomNotifState); + const mentionBadges = highlight && self._shouldShowMentionBadge(roomNotifState); + const badges = notifBadges || mentionBadges; - if (badges) { - result[0] += notificationCount; - if (highlight) { - result[1] = true; + if (badges) { + result[0] += notificationCount; + if (highlight) { + result[1] = true; + } } } return result; @@ -423,11 +431,25 @@ var RoomSubList = React.createClass({ _createOverflowTile: function(overflowCount, totalCount) { var content =
; + + var overflowNotifications = this.roomNotificationCount(TRUNCATE_AT); + var overflowNotifCount = overflowNotifications[0]; + var overflowNotifHighlight = overflowNotifications[1]; + if (overflowNotifCount && !this.props.collapsed) { + content = overflowNotifCount; + } + + var badgeClasses = classNames({ + 'mx_RoomSubList_moreBadge': true, + 'mx_RoomSubList_moreBadgeNotify': overflowNotifCount && !this.props.collapsed, + 'mx_RoomSubList_moreBadgeHighlight': overflowNotifHighlight && !this.props.collapsed, + }); + return (
more
-
{ content }
+
{ content }
); }, diff --git a/src/skins/vector/css/vector-web/structures/RoomSubList.css b/src/skins/vector/css/vector-web/structures/RoomSubList.css index b50cbfdc68..2050f6bd24 100644 --- a/src/skins/vector/css/vector-web/structures/RoomSubList.css +++ b/src/skins/vector/css/vector-web/structures/RoomSubList.css @@ -152,15 +152,14 @@ limitations under the License. .mx_RoomSubList_ellipsis { display: block; line-height: 11px; - height: auto; - margin-bottom: 4px; + height: 18px; position: relative; cursor: pointer; font-size: 13px; } .collapsed .mx_RoomSubList_ellipsis { - height: 16px; + height: 20px; } .mx_RoomSubList_line { @@ -205,12 +204,28 @@ limitations under the License. font-size: 10px; text-align: center; padding-top: 1px; - padding-left: 4px; - padding-right: 4px; + padding-left: 3px; + padding-right: 3px; background-color: #fff; vertical-align: middle; } +.mx_RoomSubList_moreBadge.mx_RoomSubList_moreBadgeNotify { + background-color: #76cfa6; + border: 0; + padding-top: 3px; + padding-left: 4px; + padding-right: 4px; +} + +.mx_RoomSubList_moreBadge.mx_RoomSubList_moreBadgeHighlight { + background-color: #ff0064; + border: 0; + padding-top: 3px; + padding-left: 4px; + padding-right: 4px; +} + .collapsed .mx_RoomSubList_moreBadge { position: static; margin-left: 16px;