From 1d77a676835c18161262de8b55ad8e7603d46343 Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Mon, 5 Nov 2018 10:09:05 +0100 Subject: [PATCH 01/16] fix room list chevron --- res/css/structures/_RoomSubList.scss | 9 ++- res/img/topleft-chevron.svg | 99 +++++++++++++++++++++++----- 2 files changed, 88 insertions(+), 20 deletions(-) diff --git a/res/css/structures/_RoomSubList.scss b/res/css/structures/_RoomSubList.scss index e062a912a5..2b89e055df 100644 --- a/res/css/structures/_RoomSubList.scss +++ b/res/css/structures/_RoomSubList.scss @@ -109,12 +109,11 @@ limitations under the License. pointer-events: none; position: absolute; top: 11px; - width: 9px; - height: 4px; + width: 10px; + height: 6px; background-image: url('../../img/topleft-chevron.svg'); - background-size: cover; - // the transition doesn't work as the chevron gets remounted - transition: rotateZ 0.2s ease-in; + background-repeat: no-repeat; + transition: transform 0.2s ease-in; } .mx_RoomSubList_chevronDown { diff --git a/res/img/topleft-chevron.svg b/res/img/topleft-chevron.svg index 9fbf5fe9ca..fa89852874 100644 --- a/res/img/topleft-chevron.svg +++ b/res/img/topleft-chevron.svg @@ -1,17 +1,86 @@ - - - - dropdown - Created with Sketch. - - - - - - - - - + + + + + + image/svg+xml + + dropdown + + + + + + dropdown + Created with Sketch. + + + + + + + + - \ No newline at end of file + + From 010f077092f8fd59a05198a5d8b2e268c3230585 Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Mon, 5 Nov 2018 10:35:38 +0100 Subject: [PATCH 02/16] align badges with design --- res/css/structures/_RoomSubList.scss | 21 ++++--------------- res/css/views/rooms/_RoomTile.scss | 30 ++-------------------------- 2 files changed, 6 insertions(+), 45 deletions(-) diff --git a/res/css/structures/_RoomSubList.scss b/res/css/structures/_RoomSubList.scss index 2b89e055df..9eebbfe63f 100644 --- a/res/css/structures/_RoomSubList.scss +++ b/res/css/structures/_RoomSubList.scss @@ -28,6 +28,7 @@ limitations under the License. .mx_RoomSubList_labelContainer { display: flex; flex-direction: row; + align-items: center; flex: 0 0 auto; margin: 8px 19px 0 0; } @@ -56,14 +57,12 @@ limitations under the License. } .mx_RoomSubList_badge { - height: 18px; - border-radius: 9px; + flex: 0 1 content; + border-radius: 8px; color: $accent-fg-color; font-weight: 600; font-size: 12px; - vertical-align: middle; - line-height: 18px; - padding: 0 4px; + padding: 0 5px; background-color: $accent-color; } @@ -92,18 +91,6 @@ limitations under the License. background-color: $warning-color; } -/* 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 $warning-color; - border-right: 7px solid transparent; -} - .mx_RoomSubList_chevron { left: 0px; pointer-events: none; diff --git a/res/css/views/rooms/_RoomTile.scss b/res/css/views/rooms/_RoomTile.scss index ca23d79137..4bedc4cf4f 100644 --- a/res/css/views/rooms/_RoomTile.scss +++ b/res/css/views/rooms/_RoomTile.scss @@ -21,7 +21,7 @@ limitations under the License. cursor: pointer; height: 40px; margin: 0; - padding: 2px 12px; + padding: 2px 10px; position: relative; background-color: $secondary-accent-color; } @@ -88,43 +88,17 @@ limitations under the License. padding: 0px 4px 0px 4px; z-index: 3; } - - /* Hide the bottom of speech bubble */ - .mx_RoomTile_highlight .mx_RoomTile_badge:after { - display: none; - } -} - -/* This is the bottom of the speech bubble */ -.mx_RoomTile_highlight .mx_RoomTile_badge:after { - content: ""; - position: absolute; - display: block; - width: 0; - height: 0; - margin-left: 5px; - border-top: 5px solid $warning-color; - border-right: 7px solid transparent; } .mx_RoomTile_badge { flex: 0 1 content; - min-width: 15px; border-radius: 8px; color: $accent-fg-color; font-weight: 600; font-size: 12px; - text-align: center; - padding-top: 1px; - padding-left: 4px; - padding-right: 4px; + padding: 0 5px; } -.mx_RoomTile .mx_RoomTile_badge.mx_RoomTile_badgeButton, -.mx_RoomTile.mx_RoomTile_menuDisplayed .mx_RoomTile_badge { - letter-spacing: 0.1em; - opacity: 1; -} .mx_RoomTile.mx_RoomTile_noBadges .mx_RoomTile_badge.mx_RoomTile_badgeButton, .mx_RoomTile.mx_RoomTile_menuDisplayed.mx_RoomTile_noBadges .mx_RoomTile_badge { From 6993dc034d0baa9caec6f45fb8240d40e3d18803 Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Mon, 5 Nov 2018 10:35:50 +0100 Subject: [PATCH 03/16] always show badges in room sub list header --- src/components/structures/RoomSubList.js | 24 +++++++++++------------- 1 file changed, 11 insertions(+), 13 deletions(-) diff --git a/src/components/structures/RoomSubList.js b/src/components/structures/RoomSubList.js index 3ea819e088..32c53cd52a 100644 --- a/src/components/structures/RoomSubList.js +++ b/src/components/structures/RoomSubList.js @@ -266,19 +266,17 @@ const RoomSubList = React.createClass({ let badge; - if (this.state.hidden) { - const badgeClasses = classNames({ - 'mx_RoomSubList_badge': true, - 'mx_RoomSubList_badgeHighlight': subListNotifHighlight, - }); - if (subListNotifCount > 0) { - badge =
- { FormattingUtils.formatCount(subListNotifCount) } -
; - } else if (this.props.isInvite) { - // no notifications but highlight anyway because this is an invite badge - badge =
!
; - } + const badgeClasses = classNames({ + 'mx_RoomSubList_badge': true, + 'mx_RoomSubList_badgeHighlight': subListNotifHighlight, + }); + if (subListNotifCount > 0) { + badge =
+ { FormattingUtils.formatCount(subListNotifCount) } +
; + } else if (this.props.isInvite) { + // no notifications but highlight anyway because this is an invite badge + badge =
!
; } // When collapsed, allow a long hover on the header to show user From 01626d6b02da826fc66e92e95262a499f7e9130b Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Mon, 5 Nov 2018 14:21:58 +0100 Subject: [PATCH 04/16] never show horizontal scrollbar in subroom list --- res/css/structures/_RoomSubList.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/res/css/structures/_RoomSubList.scss b/res/css/structures/_RoomSubList.scss index 9eebbfe63f..c0454c2914 100644 --- a/res/css/structures/_RoomSubList.scss +++ b/res/css/structures/_RoomSubList.scss @@ -119,6 +119,7 @@ limitations under the License. /* let rooms list grab all available space */ flex: 0 1 auto; padding: 0 15px !important; + overflow-x: hidden; } /* for browsers that don't support overlay scrollbars, From c0e3e3925ffe360aac253b86fc899b9f77ca1c7b Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Mon, 5 Nov 2018 14:22:41 +0100 Subject: [PATCH 05/16] more badge cleanup --- res/css/structures/_RoomSubList.scss | 5 ----- 1 file changed, 5 deletions(-) diff --git a/res/css/structures/_RoomSubList.scss b/res/css/structures/_RoomSubList.scss index c0454c2914..382e04b98e 100644 --- a/res/css/structures/_RoomSubList.scss +++ b/res/css/structures/_RoomSubList.scss @@ -140,11 +140,6 @@ body.mx_scrollbar_nooverlay .mx_RoomSubList_scroll.mx_AutoHideScrollbar_overflow width: 28px; /* collapsed LHS Panel width */ } - /* Hide the bottom of speech bubble */ - .mx_RoomSubList_badgeHighlight:after { - display: none; - } - .mx_RoomSubList_line { display: none; } From cb8393d449c5a2d94486b2ad210dc502c084b10b Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Mon, 5 Nov 2018 14:22:55 +0100 Subject: [PATCH 06/16] fix room sublist padding when collapsed --- res/css/structures/_RoomSubList.scss | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/res/css/structures/_RoomSubList.scss b/res/css/structures/_RoomSubList.scss index 382e04b98e..93d02ed100 100644 --- a/res/css/structures/_RoomSubList.scss +++ b/res/css/structures/_RoomSubList.scss @@ -131,8 +131,13 @@ body.mx_scrollbar_nooverlay .mx_RoomSubList_scroll.mx_AutoHideScrollbar_overflow } .collapsed { + + .mx_RoomSubList_scroll { + padding: 0px !important; + } .mx_RoomSubList_label { height: 17px; + padding-right: 0; width: 28px; /* collapsed LHS Panel width */ } From c0becc7664ad75ccb94cbe0a589d49448c7dfe11 Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Mon, 5 Nov 2018 14:23:28 +0100 Subject: [PATCH 07/16] fix roomtile badge only put it in the dom if it has anything to show as it has a border now in collapsed mode --- res/css/views/rooms/_RoomTile.scss | 14 +++++++------- src/components/views/rooms/RoomTile.js | 6 +++--- 2 files changed, 10 insertions(+), 10 deletions(-) diff --git a/res/css/views/rooms/_RoomTile.scss b/res/css/views/rooms/_RoomTile.scss index 4bedc4cf4f..d7726d818d 100644 --- a/res/css/views/rooms/_RoomTile.scss +++ b/res/css/views/rooms/_RoomTile.scss @@ -71,6 +71,8 @@ limitations under the License. .mx_RoomTile { margin: 2px; padding: 2px 0 2px 12px; + display: block; // not flex + position: relative; } .mx_RoomTile_name { @@ -80,23 +82,21 @@ limitations under the License. .mx_RoomTile_badge { display: block; position: absolute; - height: 15px; - right: 8px; - top: 2px; - min-width: 12px; + right: 6px; + top: 0px; border-radius: 16px; - padding: 0px 4px 0px 4px; z-index: 3; + border: 0.18em solid $secondary-accent-color; } } .mx_RoomTile_badge { flex: 0 1 content; - border-radius: 8px; + border-radius: 0.8em; + padding: 0 0.4em; color: $accent-fg-color; font-weight: 600; font-size: 12px; - padding: 0 5px; } diff --git a/src/components/views/rooms/RoomTile.js b/src/components/views/rooms/RoomTile.js index 1afff783a1..56b34c4385 100644 --- a/src/components/views/rooms/RoomTile.js +++ b/src/components/views/rooms/RoomTile.js @@ -283,11 +283,11 @@ module.exports = React.createClass({ } else if (badges) { const limitedCount = FormattingUtils.formatCount(notificationCount); badgeContent = notificationCount ? limitedCount : '!'; - } else { - badgeContent = '\u200B'; } - const badge =
{ badgeContent }
; + const badge = badgeContent ? + (
{ badgeContent }
) : + undefined; const EmojiText = sdk.getComponent('elements.EmojiText'); let label; From 05935db8fc4ef97d5596baaf7b3e9316a1375351 Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Mon, 5 Nov 2018 14:25:07 +0100 Subject: [PATCH 08/16] don't show sublist header badge in collapsed mode just not enough space --- src/components/structures/RoomSubList.js | 25 ++++++++++++------------ 1 file changed, 13 insertions(+), 12 deletions(-) diff --git a/src/components/structures/RoomSubList.js b/src/components/structures/RoomSubList.js index 32c53cd52a..ccaeda9659 100644 --- a/src/components/structures/RoomSubList.js +++ b/src/components/structures/RoomSubList.js @@ -264,19 +264,20 @@ const RoomSubList = React.createClass({ const subListNotifCount = subListNotifications[0]; const subListNotifHighlight = subListNotifications[1]; - let badge; - const badgeClasses = classNames({ - 'mx_RoomSubList_badge': true, - 'mx_RoomSubList_badgeHighlight': subListNotifHighlight, - }); - if (subListNotifCount > 0) { - badge =
- { FormattingUtils.formatCount(subListNotifCount) } -
; - } else if (this.props.isInvite) { - // no notifications but highlight anyway because this is an invite badge - badge =
!
; + if (!this.props.collapsed) { + const badgeClasses = classNames({ + 'mx_RoomSubList_badge': true, + 'mx_RoomSubList_badgeHighlight': subListNotifHighlight, + }); + if (subListNotifCount > 0) { + badge =
+ { FormattingUtils.formatCount(subListNotifCount) } +
; + } else if (this.props.isInvite) { + // no notifications but highlight anyway because this is an invite badge + badge =
!
; + } } // When collapsed, allow a long hover on the header to show user From 665d42475826245984d6b79385eba01f1d39e0a6 Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Mon, 5 Nov 2018 14:25:28 +0100 Subject: [PATCH 09/16] use svg icon in add room button --- res/css/structures/_RoomSubList.scss | 16 ++--- res/img/icons-room-add.svg | 92 ++++++++++++++++++------ src/components/structures/RoomSubList.js | 4 +- 3 files changed, 79 insertions(+), 33 deletions(-) diff --git a/res/css/structures/_RoomSubList.scss b/res/css/structures/_RoomSubList.scss index 93d02ed100..2b83e4ee03 100644 --- a/res/css/structures/_RoomSubList.scss +++ b/res/css/structures/_RoomSubList.scss @@ -77,14 +77,14 @@ limitations under the License. .mx_RoomSubList_addRoom { background-color: $roomheader-addroom-color; color: $roomsublist-background; - border-radius: 9px; - text-align: center; - vertical-align: middle; - line-height: 18px; - font-weight: bold; - font-size: 18px; - width: 18px; - height: 18px; + background-image: url('../../img/icons-room-add.svg'); + background-repeat: no-repeat; + background-position: center; + border-radius: 10px; // 16/2 + 2 padding + height: 16px; + flex: 0 0 16px; + background-clip: content-box; + padding: 2px; } .mx_RoomSubList_badgeHighlight { diff --git a/res/img/icons-room-add.svg b/res/img/icons-room-add.svg index fc0ab750b6..6dd2e21295 100644 --- a/res/img/icons-room-add.svg +++ b/res/img/icons-room-add.svg @@ -1,23 +1,71 @@ - - - - - - - - - - - - - - + + + + + + image/svg+xml + + + + + + + + + + + diff --git a/src/components/structures/RoomSubList.js b/src/components/structures/RoomSubList.js index ccaeda9659..f5a9ede9c9 100644 --- a/src/components/structures/RoomSubList.js +++ b/src/components/structures/RoomSubList.js @@ -305,9 +305,7 @@ const RoomSubList = React.createClass({ let addRoomButton; if (this.props.onAddRoom) { addRoomButton = ( - - + - + ); } From ef26189addaffc1791d3ef335684a54872f4d597 Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Mon, 5 Nov 2018 17:42:25 +0100 Subject: [PATCH 10/16] add dedicated menu button to room tile with new design --- res/css/views/rooms/_RoomTile.scss | 34 ++++++++++++++++++-------- src/components/views/rooms/RoomTile.js | 21 ++++++++-------- 2 files changed, 35 insertions(+), 20 deletions(-) diff --git a/res/css/views/rooms/_RoomTile.scss b/res/css/views/rooms/_RoomTile.scss index d7726d818d..2cda8360b1 100644 --- a/res/css/views/rooms/_RoomTile.scss +++ b/res/css/views/rooms/_RoomTile.scss @@ -26,6 +26,26 @@ limitations under the License. background-color: $secondary-accent-color; } +.mx_RoomTile_menuButton { + display: none; + flex: 0 0 16px; + height: 16px; + background-image: url('../../img/icon_context.svg'); + background-repeat: no-repeat; + background-position: right center; +} + +// toggle menuButton and badge on hover/menu displayed +.mx_RoomTile:hover, .mx_RoomTile_menuDisplayed { + .mx_RoomTile_menuButton { + display: block; + } + + .mx_RoomTile_badge { + display: none; + } +} + .mx_RoomTile_tooltip { display: inline-block; position: relative; @@ -88,6 +108,10 @@ limitations under the License. z-index: 3; border: 0.18em solid $secondary-accent-color; } + + .mx_RoomTile_menuButton { + display: none; //no design for this for now + } } .mx_RoomTile_badge { @@ -99,12 +123,6 @@ limitations under the License. font-size: 12px; } - -.mx_RoomTile.mx_RoomTile_noBadges .mx_RoomTile_badge.mx_RoomTile_badgeButton, -.mx_RoomTile.mx_RoomTile_menuDisplayed.mx_RoomTile_noBadges .mx_RoomTile_badge { - background-color: $neutral-badge-color; -} - .mx_RoomTile_unreadNotify .mx_RoomTile_badge { background-color: $accent-color; } @@ -144,10 +162,6 @@ limitations under the License. background-color: $roomtile-focused-bg-color; } -.mx_RoomTile .mx_RoomTile_name.mx_RoomTile_badgeShown { - width: 140px; -} - .mx_RoomTile_arrow { position: absolute; right: 0px; diff --git a/src/components/views/rooms/RoomTile.js b/src/components/views/rooms/RoomTile.js index 56b34c4385..faa08c7001 100644 --- a/src/components/views/rooms/RoomTile.js +++ b/src/components/views/rooms/RoomTile.js @@ -220,7 +220,7 @@ module.exports = React.createClass({ this.setState( { badgeHover: false } ); }, - onBadgeClicked: function(e) { + onOpenMenu: function(e) { // Prevent the RoomTile onClick event firing as well e.stopPropagation(); // Only allow non-guests to access the context menu @@ -276,19 +276,14 @@ module.exports = React.createClass({ if (name == undefined || name == null) name = ''; name = name.replace(":", ":\u200b"); // add a zero-width space to allow linewrapping after the colon - let badgeContent; - if (this.state.badgeHover || this.state.menuDisplayed) { - badgeContent = "\u00B7\u00B7\u00B7"; - } else if (badges) { + let badge; + if (badges) { const limitedCount = FormattingUtils.formatCount(notificationCount); - badgeContent = notificationCount ? limitedCount : '!'; + const badgeContent = notificationCount ? limitedCount : '!'; + badge =
{ badgeContent }
; } - const badge = badgeContent ? - (
{ badgeContent }
) : - undefined; - const EmojiText = sdk.getComponent('elements.EmojiText'); let label; let tooltip; @@ -317,6 +312,11 @@ module.exports = React.createClass({ // incomingCallBox = ; //} + let contextMenuButton; + if (!MatrixClientPeg.get().isGuest()) { + contextMenuButton = ; + } + const RoomAvatar = sdk.getComponent('avatars.RoomAvatar'); let dmIndicator; @@ -338,6 +338,7 @@ module.exports = React.createClass({ { label } + { contextMenuButton } { badge } { /* { incomingCallBox } */ } { tooltip } From fd0b33edafa8179df89ca9f071868908bcaeaddc Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Mon, 5 Nov 2018 17:42:59 +0100 Subject: [PATCH 11/16] margin adjusment of room tile according to design --- res/css/views/rooms/_RoomTile.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/res/css/views/rooms/_RoomTile.scss b/res/css/views/rooms/_RoomTile.scss index 2cda8360b1..c22566ee34 100644 --- a/res/css/views/rooms/_RoomTile.scss +++ b/res/css/views/rooms/_RoomTile.scss @@ -21,7 +21,7 @@ limitations under the License. cursor: pointer; height: 40px; margin: 0; - padding: 2px 10px; + padding: 1px 10px; position: relative; background-color: $secondary-accent-color; } From 3c70c2b82f4a9a29226845e0869a701e53e17352 Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Mon, 5 Nov 2018 17:43:16 +0100 Subject: [PATCH 12/16] not needed --- res/css/views/rooms/_RoomTile.scss | 2 -- 1 file changed, 2 deletions(-) diff --git a/res/css/views/rooms/_RoomTile.scss b/res/css/views/rooms/_RoomTile.scss index c22566ee34..f13e0ea2fd 100644 --- a/res/css/views/rooms/_RoomTile.scss +++ b/res/css/views/rooms/_RoomTile.scss @@ -91,7 +91,6 @@ limitations under the License. .mx_RoomTile { margin: 2px; padding: 2px 0 2px 12px; - display: block; // not flex position: relative; } @@ -100,7 +99,6 @@ limitations under the License. } .mx_RoomTile_badge { - display: block; position: absolute; right: 6px; top: 0px; From c9dc273cb0a1bb513e214d5c24776ecff766c8b7 Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Tue, 6 Nov 2018 10:20:04 +0100 Subject: [PATCH 13/16] better native scrollbar width compensation for FF instead of having to offset the padding of children of the autohiding scrollbar container, which gets fiddly quickly, add a new child to the scrollbar container that gets a negative margin of the scrollbar width when needed (on hover and overflowing when overlay is not supported). This needs an extra DOM element, but as it doesn't do anything weird layout-wise (like set position), it shouldn't affect styling at all. It also makes the auto hide scrollbar workarounds completely transparent to the rest of the code. --- res/css/structures/_AutoHideScrollbar.scss | 22 +++++++++---------- res/css/structures/_RoomSubList.scss | 13 ++--------- res/css/views/rooms/_RoomTile.scss | 2 +- .../structures/AutoHideScrollbar.js | 4 +++- 4 files changed, 16 insertions(+), 25 deletions(-) diff --git a/res/css/structures/_AutoHideScrollbar.scss b/res/css/structures/_AutoHideScrollbar.scss index 0b8558a61e..70dbbe8d07 100644 --- a/res/css/structures/_AutoHideScrollbar.scss +++ b/res/css/structures/_AutoHideScrollbar.scss @@ -18,6 +18,7 @@ limitations under the License. 1. for browsers that support native overlay auto-hiding scrollbars */ .mx_AutoHideScrollbar { + overflow-x: hidden; overflow-y: auto; -ms-overflow-style: -ms-autohiding-scrollbar; } @@ -34,23 +35,20 @@ body.mx_scrollbar_overlay_noautohide .mx_AutoHideScrollbar:hover { } /* 3. as a last fallback, compensate for the scrollbar taking up space in the layout -by playing with the paddings. the default below will add a right padding -of the scrollbar width and clear that on hover. -this won't work well on classes that also need to set their padding, -so this needs to be overriden and adjust the padding with calc like so: -``` -body.mx_scrollbar_nooverlay .componentClass.mx_AutoHideScrollbar_overflow:hover { - padding-right: calc(15px - var(--scrollbar-width)) !important; -} -``` +by having giving the child element (.mx_AutoHideScrollbar_offset) a +negative right margin of the width of the scrollbar when the container +is overflowing. This is what Firefox ends up using. Overflow is detected +in javascript, and adds the mx_AutoHideScrollbar_overflow class to the container. +This only works in Firefox, which should be fine as this fallback is only needed there. */ body.mx_scrollbar_nooverlay .mx_AutoHideScrollbar { - box-sizing: border-box; overflow-y: hidden; - padding-right: var(--scrollbar-width); } body.mx_scrollbar_nooverlay .mx_AutoHideScrollbar:hover { overflow-y: auto; - padding-right: 0; +} + +body.mx_scrollbar_nooverlay .mx_AutoHideScrollbar:hover.mx_AutoHideScrollbar_overflow > .mx_AutoHideScrollbar_offset { + margin-right: calc(-1 * var(--scrollbar-width)); } diff --git a/res/css/structures/_RoomSubList.scss b/res/css/structures/_RoomSubList.scss index 2b83e4ee03..1a92a792d6 100644 --- a/res/css/structures/_RoomSubList.scss +++ b/res/css/structures/_RoomSubList.scss @@ -118,22 +118,13 @@ limitations under the License. .mx_RoomSubList_scroll { /* let rooms list grab all available space */ flex: 0 1 auto; - padding: 0 15px !important; - overflow-x: hidden; -} -/* -for browsers that don't support overlay scrollbars, -subtract scrollbar width from right padding on hover when overflowing -so the content doesn't jump when showing the scrollbars -*/ -body.mx_scrollbar_nooverlay .mx_RoomSubList_scroll.mx_AutoHideScrollbar_overflow:hover { - padding-right: calc(15px - var(--scrollbar-width)) !important; + padding: 0 8px; } .collapsed { .mx_RoomSubList_scroll { - padding: 0px !important; + padding: 0; } .mx_RoomSubList_label { height: 17px; diff --git a/res/css/views/rooms/_RoomTile.scss b/res/css/views/rooms/_RoomTile.scss index f13e0ea2fd..1ea62b8ca8 100644 --- a/res/css/views/rooms/_RoomTile.scss +++ b/res/css/views/rooms/_RoomTile.scss @@ -36,7 +36,7 @@ limitations under the License. } // toggle menuButton and badge on hover/menu displayed -.mx_RoomTile:hover, .mx_RoomTile_menuDisplayed { +.mx_LeftPanel_container:not(.collapsed) .mx_RoomTile:hover, .mx_RoomTile_menuDisplayed { .mx_RoomTile_menuButton { display: block; } diff --git a/src/components/structures/AutoHideScrollbar.js b/src/components/structures/AutoHideScrollbar.js index 507af2c5f0..a462b2bf14 100644 --- a/src/components/structures/AutoHideScrollbar.js +++ b/src/components/structures/AutoHideScrollbar.js @@ -112,7 +112,9 @@ export default class AutoHideScrollbar extends React.Component { ref={this._collectContainerRef} className={["mx_AutoHideScrollbar", this.props.className].join(" ")} > - { this.props.children } +
+ { this.props.children } +
); } } From 3ce52d104c35f38881d5b44d36fcaf6f9d978db1 Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Tue, 6 Nov 2018 14:02:43 +0100 Subject: [PATCH 14/16] align collapsed roomtile with design --- res/css/views/rooms/_RoomTile.scss | 13 +++++-------- 1 file changed, 5 insertions(+), 8 deletions(-) diff --git a/res/css/views/rooms/_RoomTile.scss b/res/css/views/rooms/_RoomTile.scss index 1ea62b8ca8..3bb6339a3c 100644 --- a/res/css/views/rooms/_RoomTile.scss +++ b/res/css/views/rooms/_RoomTile.scss @@ -21,7 +21,7 @@ limitations under the License. cursor: pointer; height: 40px; margin: 0; - padding: 1px 10px; + padding: 0 8px 0 10px; position: relative; background-color: $secondary-accent-color; } @@ -32,7 +32,7 @@ limitations under the License. height: 16px; background-image: url('../../img/icon_context.svg'); background-repeat: no-repeat; - background-position: right center; + background-position: center; } // toggle menuButton and badge on hover/menu displayed @@ -83,15 +83,12 @@ limitations under the License. text-overflow: ellipsis; } -.mx_RoomTile_invite { -/* color: rgba(69, 69, 69, 0.5); */ -} - .collapsed { .mx_RoomTile { - margin: 2px; - padding: 2px 0 2px 12px; + margin: 0 2px; + padding: 0 2px; position: relative; + justify-content: center; } .mx_RoomTile_name { From 3bd0bcde4b054a25ad83a51e50d1920dd8ad0c29 Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Tue, 6 Nov 2018 14:03:01 +0100 Subject: [PATCH 15/16] align room sub list header with design also make css more maintainable with less hardcoded dimensions --- res/css/structures/_RoomSubList.scss | 73 ++++++++---------------- src/components/structures/RoomSubList.js | 2 +- 2 files changed, 26 insertions(+), 49 deletions(-) diff --git a/res/css/structures/_RoomSubList.scss b/res/css/structures/_RoomSubList.scss index 1a92a792d6..2223d8eee8 100644 --- a/res/css/structures/_RoomSubList.scss +++ b/res/css/structures/_RoomSubList.scss @@ -22,7 +22,7 @@ limitations under the License. } .mx_RoomSubList_nonEmpty { - margin-bottom: 8px; + margin-bottom: 4px; } .mx_RoomSubList_labelContainer { @@ -30,34 +30,30 @@ limitations under the License. flex-direction: row; align-items: center; flex: 0 0 auto; - margin: 8px 19px 0 0; + margin: 0 16px; + height: 36px; } .mx_RoomSubList_label { flex: 1; - position: relative; + cursor: pointer; + background-color: $secondary-accent-color; + display: flex; + align-items: center; + padding: 0 6px; +} + +.mx_RoomSubList_label > span { + flex: 1 1 auto; text-transform: uppercase; color: $roomsublist-label-fg-color; font-weight: 700; font-size: 12px; - margin-left: 16px; - padding-left: 16px; /* gutter */ - padding-right: 16px; /* gutter */ - padding-top: 6px; - padding-bottom: 6px; - cursor: pointer; - background-color: $secondary-accent-color; -} - -.mx_RoomSubList_label.mx_RoomSubList_fixed { - position: fixed; - top: 0; - z-index: 5; - /* pointer-events: none; */ + margin-left: 8px; } .mx_RoomSubList_badge { - flex: 0 1 content; + flex: 0 0 auto; border-radius: 8px; color: $accent-fg-color; font-weight: 600; @@ -66,12 +62,8 @@ limitations under the License. background-color: $accent-color; } -.mx_RoomSubList_label .mx_RoomSubList_badge:hover { - filter: brightness($focus-brightness); -} - .mx_RoomSubList_addRoom, .mx_RoomSubList_badge { - margin: 5px; + margin-left: 7px; } .mx_RoomSubList_addRoom { @@ -84,7 +76,6 @@ limitations under the License. height: 16px; flex: 0 0 16px; background-clip: content-box; - padding: 2px; } .mx_RoomSubList_badgeHighlight { @@ -92,15 +83,14 @@ limitations under the License. } .mx_RoomSubList_chevron { - left: 0px; pointer-events: none; - position: absolute; - top: 11px; - width: 10px; - height: 6px; background-image: url('../../img/topleft-chevron.svg'); background-repeat: no-repeat; transition: transform 0.2s ease-in; + width: 10px; + height: 10px; + background-position: center; + margin-left: 2px; } .mx_RoomSubList_chevronDown { @@ -126,31 +116,18 @@ limitations under the License. .mx_RoomSubList_scroll { padding: 0; } - .mx_RoomSubList_label { - height: 17px; - padding-right: 0; - width: 28px; /* collapsed LHS Panel width */ - } .mx_RoomSubList_labelContainer { - width: 28px; /* collapsed LHS Panel width */ + margin-right: 14px; + margin-left: 2px; } - .mx_RoomSubList_line { - display: none; + .mx_RoomSubList_addRoom { + margin-left: 3px; + margin-right: 28px; } - .mx_RoomSubList_moreBadge { - position: static; - margin-left: 16px; - margin-top: 2px; - } - - .mx_RoomSubList_ellipsis { - height: 20px; - } - - .mx_RoomSubList_more { + .mx_RoomSubList_label > span { display: none; } } diff --git a/src/components/structures/RoomSubList.js b/src/components/structures/RoomSubList.js index f5a9ede9c9..ee4aa3f11e 100644 --- a/src/components/structures/RoomSubList.js +++ b/src/components/structures/RoomSubList.js @@ -325,7 +325,7 @@ const RoomSubList = React.createClass({
{ chevron } - { this.props.collapsed ? '' : this.props.label } + {this.props.label} { incomingCall } { badge } From ba00c293511489ab39cecd7bb673034a5d31eba7 Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Tue, 6 Nov 2018 14:03:29 +0100 Subject: [PATCH 16/16] ellipsis class not used anymore --- src/components/structures/LeftPanel.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/components/structures/LeftPanel.js b/src/components/structures/LeftPanel.js index 247b12dc88..ddd8467458 100644 --- a/src/components/structures/LeftPanel.js +++ b/src/components/structures/LeftPanel.js @@ -151,8 +151,7 @@ const LeftPanel = React.createClass({ } } while (element && !( classes.contains("mx_RoomTile") || - classes.contains("mx_SearchBox_search") || - classes.contains("mx_RoomSubList_ellipsis"))); + classes.contains("mx_SearchBox_search"))); if (element) { element.focus();