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 e062a912a5..2223d8eee8 100644 --- a/res/css/structures/_RoomSubList.scss +++ b/res/css/structures/_RoomSubList.scss @@ -22,99 +22,75 @@ limitations under the License. } .mx_RoomSubList_nonEmpty { - margin-bottom: 8px; + margin-bottom: 4px; } .mx_RoomSubList_labelContainer { display: flex; 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 { - height: 18px; - border-radius: 9px; + flex: 0 0 auto; + 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; } -.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 { 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; } .mx_RoomSubList_badgeHighlight { 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; - position: absolute; - top: 11px; - width: 9px; - height: 4px; 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; + width: 10px; + height: 10px; + background-position: center; + margin-left: 2px; } .mx_RoomSubList_chevronDown { @@ -132,47 +108,26 @@ limitations under the License. .mx_RoomSubList_scroll { /* let rooms list grab all available space */ flex: 0 1 auto; - padding: 0 15px !important; -} -/* -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_label { - height: 17px; - width: 28px; /* collapsed LHS Panel width */ + + .mx_RoomSubList_scroll { + padding: 0; } .mx_RoomSubList_labelContainer { - width: 28px; /* collapsed LHS Panel width */ + margin-right: 14px; + margin-left: 2px; } - /* Hide the bottom of speech bubble */ - .mx_RoomSubList_badgeHighlight:after { - display: none; + .mx_RoomSubList_addRoom { + margin-left: 3px; + margin-right: 28px; } - .mx_RoomSubList_line { - display: none; - } - - .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/res/css/views/rooms/_RoomTile.scss b/res/css/views/rooms/_RoomTile.scss index ca23d79137..3bb6339a3c 100644 --- a/res/css/views/rooms/_RoomTile.scss +++ b/res/css/views/rooms/_RoomTile.scss @@ -21,11 +21,31 @@ limitations under the License. cursor: pointer; height: 40px; margin: 0; - padding: 2px 12px; + padding: 0 8px 0 10px; position: relative; 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: center; +} + +// toggle menuButton and badge on hover/menu displayed +.mx_LeftPanel_container:not(.collapsed) .mx_RoomTile:hover, .mx_RoomTile_menuDisplayed { + .mx_RoomTile_menuButton { + display: block; + } + + .mx_RoomTile_badge { + display: none; + } +} + .mx_RoomTile_tooltip { display: inline-block; position: relative; @@ -63,14 +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 { @@ -78,57 +96,26 @@ 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; } - /* Hide the bottom of speech bubble */ - .mx_RoomTile_highlight .mx_RoomTile_badge:after { - display: none; + .mx_RoomTile_menuButton { + display: none; //no design for this for now } } -/* 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; + border-radius: 0.8em; + padding: 0 0.4em; color: $accent-fg-color; font-weight: 600; font-size: 12px; - text-align: center; - padding-top: 1px; - padding-left: 4px; - padding-right: 4px; -} - -.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 { - background-color: $neutral-badge-color; } .mx_RoomTile_unreadNotify .mx_RoomTile_badge { @@ -170,10 +157,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/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/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 + + 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 } +
); } } diff --git a/src/components/structures/LeftPanel.js b/src/components/structures/LeftPanel.js index f2c7f08f0d..77f6f1f948 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(); diff --git a/src/components/structures/RoomSubList.js b/src/components/structures/RoomSubList.js index f99c4bf90b..0bebc50da6 100644 --- a/src/components/structures/RoomSubList.js +++ b/src/components/structures/RoomSubList.js @@ -243,9 +243,8 @@ const RoomSubList = React.createClass({ const subListNotifCount = subListNotifications[0]; const subListNotifHighlight = subListNotifications[1]; - let badge; - if (this.state.hidden) { + if (!this.props.collapsed) { const badgeClasses = classNames({ 'mx_RoomSubList_badge': true, 'mx_RoomSubList_badgeHighlight': subListNotifHighlight, @@ -285,9 +284,7 @@ const RoomSubList = React.createClass({ let addRoomButton; if (this.props.onAddRoom) { addRoomButton = ( - - + - + ); } @@ -307,7 +304,7 @@ const RoomSubList = React.createClass({
{ chevron } - { this.props.collapsed ? '' : this.props.label } + {this.props.label} { incomingCall } { badge } diff --git a/src/components/views/rooms/RoomTile.js b/src/components/views/rooms/RoomTile.js index 1afff783a1..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 : '!'; - } else { - badgeContent = '\u200B'; + const badgeContent = notificationCount ? limitedCount : '!'; + badge =
{ badgeContent }
; } - const badge =
{ badgeContent }
; - 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 }