From 6af61ebb09b76a50d89e921369706dcedb3388e0 Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Fri, 19 Oct 2018 12:07:36 +0200 Subject: [PATCH 1/5] add plus button for rooms and people --- res/css/structures/_RoomSubList.scss | 22 ++++++++++++++++++---- res/themes/dharma/css/_dharma.scss | 1 + res/themes/light/css/_base.scss | 1 + src/components/structures/RoomSubList.js | 8 +++++++- src/components/views/rooms/RoomList.js | 2 ++ 5 files changed, 29 insertions(+), 5 deletions(-) diff --git a/res/css/structures/_RoomSubList.scss b/res/css/structures/_RoomSubList.scss index baecc62b2a..681852d705 100644 --- a/res/css/structures/_RoomSubList.scss +++ b/res/css/structures/_RoomSubList.scss @@ -32,17 +32,17 @@ limitations under the License. } .mx_RoomSubList_labelContainer { - height: 31px; /* mx_RoomSubList_label height including border */ - position: relative; + display: flex; + flex-direction: row; } .mx_RoomSubList_label { + flex: 1; position: relative; text-transform: uppercase; color: $roomsublist-label-fg-color; font-weight: 700; - font-size: 12px; - height: 19px; /* height + padding = 31px = mx_RoomSubList_label height */ + font-size: 14px; margin-left: 16px; padding-left: 16px; /* gutter */ padding-right: 16px; /* gutter */ @@ -90,6 +90,20 @@ limitations under the License. filter: brightness($focus-brightness); } +.mx_RoomSubList_addRoom { + background-color: $roomheader-addroom-color; + color: $roomsublist-background; + margin: 5px 10px; + border-radius: 9px; + text-align: center; + vertical-align: middle; + line-height: 18px; + font-weight: bold; + font-size: 18px; + width: 18px; + height: 18px; +} + .mx_RoomSubList_badgeHighlight { background-color: $warning-color; } diff --git a/res/themes/dharma/css/_dharma.scss b/res/themes/dharma/css/_dharma.scss index ea6b24dec4..4e4b2cd66f 100644 --- a/res/themes/dharma/css/_dharma.scss +++ b/res/themes/dharma/css/_dharma.scss @@ -109,6 +109,7 @@ $rte-group-pill-color: #aaa; $topleftmenu-color: #212121; $roomheader-color: #45474a; +$roomheader-addroom-color: #929eb4; $roomtopic-color: #9fa9ba; // ******************** diff --git a/res/themes/light/css/_base.scss b/res/themes/light/css/_base.scss index 228f44fdef..c17eba5398 100644 --- a/res/themes/light/css/_base.scss +++ b/res/themes/light/css/_base.scss @@ -108,6 +108,7 @@ $rte-group-pill-color: #aaa; $topleftmenu-color: $primary-fg-color; $roomheader-color: $primary-fg-color; +$roomheader-addroom-color: $primary-bg-color; $roomtopic-color: $settings-grey-fg-color; // ******************** diff --git a/src/components/structures/RoomSubList.js b/src/components/structures/RoomSubList.js index 8a017c9252..8c9305a7ce 100644 --- a/src/components/structures/RoomSubList.js +++ b/src/components/structures/RoomSubList.js @@ -266,6 +266,7 @@ const RoomSubList = React.createClass({ }, _getHeaderJsx: function() { + const AccessibleButton = sdk.getComponent('elements.AccessibleButton'); const subListNotifications = this.roomNotificationCount(); const subListNotifCount = subListNotifications[0]; const subListNotifHighlight = subListNotifications[1]; @@ -319,9 +320,13 @@ const RoomSubList = React.createClass({ } } + let addRoomButton; + if (this.props.onAddRoom) { + addRoomButton = (+); + } + const tabindex = this.props.searchFilter === "" ? "0" : "-1"; - const AccessibleButton = sdk.getComponent('elements.AccessibleButton'); return (
@@ -330,6 +335,7 @@ const RoomSubList = React.createClass({ { badge } { incomingCall } + { addRoomButton }
); //
{ roomCount }
diff --git a/src/components/views/rooms/RoomList.js b/src/components/views/rooms/RoomList.js index d9913907d1..e4a9700ff9 100644 --- a/src/components/views/rooms/RoomList.js +++ b/src/components/views/rooms/RoomList.js @@ -573,6 +573,7 @@ module.exports = React.createClass({ headerItems: this._getHeaderItems('im.vector.fake.direct'), order: "recent", alwaysShowHeader: true, + onAddRoom: () => {dis.dispatch({action: 'view_create_chat'})}, }, { list: self.state.lists['im.vector.fake.recent'], @@ -580,6 +581,7 @@ module.exports = React.createClass({ emptyContent: this._getEmptyContent('im.vector.fake.recent'), headerItems: this._getHeaderItems('im.vector.fake.recent'), order: "recent", + onAddRoom: () => {dis.dispatch({action: 'view_create_room'})}, }, ]; const tagSubLists = Object.keys(self.state.lists) From 798be2d514ed180750354e0c1b86403b1ac3c613 Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Fri, 19 Oct 2018 12:08:05 +0200 Subject: [PATCH 2/5] remove room count leftovers --- res/css/structures/_RoomSubList.scss | 13 ------------- src/components/structures/RoomSubList.js | 4 ---- 2 files changed, 17 deletions(-) diff --git a/res/css/structures/_RoomSubList.scss b/res/css/structures/_RoomSubList.scss index 681852d705..e37fc4bf8c 100644 --- a/res/css/structures/_RoomSubList.scss +++ b/res/css/structures/_RoomSubList.scss @@ -59,15 +59,6 @@ limitations under the License. /* pointer-events: none; */ } -.mx_RoomSubList_roomCount { - display: inline-block; - font-size: 12px; - font-weight: normal; - color: $accent-color; - padding-left: 5px; - text-transform: none; -} - .mx_RoomSubList_badge { display: inline-block; min-width: 15px; @@ -155,10 +146,6 @@ limitations under the License. width: 28px; /* collapsed LHS Panel width */ } - .mx_RoomSubList_roomCount { - display: none; - } - /* Hide the bottom of speech bubble */ .mx_RoomSubList_badgeHighlight:after { display: none; diff --git a/src/components/structures/RoomSubList.js b/src/components/structures/RoomSubList.js index 8c9305a7ce..112a9bbb0c 100644 --- a/src/components/structures/RoomSubList.js +++ b/src/components/structures/RoomSubList.js @@ -300,9 +300,6 @@ const RoomSubList = React.createClass({ let title; if (this.props.collapsed) { title = this.props.label; - if (roomCount !== '') { - title += " [" + roomCount + "]"; - } } let incomingCall; @@ -338,7 +335,6 @@ const RoomSubList = React.createClass({ { addRoomButton } ); - //
{ roomCount }
}, render: function() { From bbd50e75eeae9ecf91b5dd75560db68e9763f68b Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Fri, 19 Oct 2018 12:10:37 +0200 Subject: [PATCH 3/5] disable old style of showing focus for now --- res/css/views/elements/_AccessibleButton.scss | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/res/css/views/elements/_AccessibleButton.scss b/res/css/views/elements/_AccessibleButton.scss index edf455049b..d6702a232c 100644 --- a/res/css/views/elements/_AccessibleButton.scss +++ b/res/css/views/elements/_AccessibleButton.scss @@ -16,9 +16,8 @@ limitations under the License. .mx_AccessibleButton:focus { outline: 0; - filter: brightness($focus-brightness); } .mx_AccessibleButton { cursor: pointer; -} \ No newline at end of file +} From 07799f609fc8bdb2777dafa0d066b96a19cad092 Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Fri, 19 Oct 2018 12:34:55 +0200 Subject: [PATCH 4/5] fix lint --- src/components/structures/RoomSubList.js | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/src/components/structures/RoomSubList.js b/src/components/structures/RoomSubList.js index 112a9bbb0c..a6117b1a00 100644 --- a/src/components/structures/RoomSubList.js +++ b/src/components/structures/RoomSubList.js @@ -271,9 +271,6 @@ const RoomSubList = React.createClass({ const subListNotifCount = subListNotifications[0]; const subListNotifHighlight = subListNotifications[1]; - const totalTiles = this.props.list.length + (this.props.extraTiles || []).length; - const roomCount = totalTiles > 0 ? totalTiles : ''; - const chevronClasses = classNames({ 'mx_RoomSubList_chevron': true, 'mx_RoomSubList_chevronRight': this.state.hidden, @@ -319,7 +316,11 @@ const RoomSubList = React.createClass({ let addRoomButton; if (this.props.onAddRoom) { - addRoomButton = (+); + addRoomButton = ( + + + + + ); } const tabindex = this.props.searchFilter === "" ? "0" : "-1"; From f14c2cf2b22ef92ac8988ff15cbdaea12eadf8f9 Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Fri, 19 Oct 2018 12:46:59 +0200 Subject: [PATCH 5/5] don't hide empty sections that have a (+) button --- src/components/views/rooms/RoomList.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/components/views/rooms/RoomList.js b/src/components/views/rooms/RoomList.js index e4a9700ff9..ef82075e89 100644 --- a/src/components/views/rooms/RoomList.js +++ b/src/components/views/rooms/RoomList.js @@ -526,8 +526,9 @@ module.exports = React.createClass({ props = Object.assign({}, defaultProps, props); const isLast = i === subListsProps.length - 1; const len = props.list.length + (props.extraTiles ? props.extraTiles.length : 0); - if (!len) { - return components; //dont render + // empty and no add button? dont render + if (!len && !props.onAddRoom) { + return components; } const {key, label, ... otherProps} = props; const chosenKey = key || label;