Merge branch 'experimental' into bwindels/memberqueryfield

karma.conf.js

@@ -199,25 +199,12 @@ module.exports = function (config) {
 
                     'matrix-react-sdk': path.resolve('test/skinned-sdk.js'),
                     'sinon': 'sinon/pkg/sinon.js',
-
-                    // To make webpack happy
-                    // Related: https://github.com/request/request/issues/1529
-                    // (there's no mock available for fs, so we fake a mock by using
-                    // an in-memory version of fs)
-                    "fs": "memfs",
                 },
                 modules: [
                     path.resolve('./test'),
                     "node_modules"
                 ],
             },
-            node: {
-                // Because webpack is made of fail
-                // https://github.com/request/request/issues/1529
-                // Note: 'mock' is the new 'empty'
-                net: 'mock',
-                tls: 'mock'
-            },
             devtool: 'inline-source-map',
             externals: {
                 // Don't try to bundle electron: leave it as a commonjs dependency

package.json

@@ -76,7 +76,6 @@
     "lodash": "^4.13.1",
     "lolex": "2.3.2",
     "matrix-js-sdk": "matrix-org/matrix-js-sdk#develop",
-    "memfs": "^2.10.1",
     "optimist": "^0.6.1",
     "pako": "^1.0.5",
     "prop-types": "^15.5.8",

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));
 }

res/css/structures/_RoomSubList.scss

@@ -22,98 +22,74 @@ 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;
+    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;
-}
-
-.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 {
@@ -131,47 +107,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_labelContainer {
-        width: 28px; /* collapsed LHS Panel width */
-    }
-
-    /* Hide the bottom of speech bubble */
-    .mx_RoomSubList_badgeHighlight:after {
-        display: none;
-    }
 
-    .mx_RoomSubList_line {
-        display: none;
+    .mx_RoomSubList_scroll {
+        padding: 0;
     }
 
-    .mx_RoomSubList_moreBadge {
-        position: static;
-        margin-left: 16px;
-        margin-top: 2px;
+    .mx_RoomSubList_labelContainer {
+        margin-right: 14px;
+        margin-left: 2px;
     }
 
-    .mx_RoomSubList_ellipsis {
-        height: 20px;
+    .mx_RoomSubList_addRoom {
+        margin-left: 3px;
+        margin-right: 28px;
     }
 
-    .mx_RoomSubList_more {
+    .mx_RoomSubList_label > span {
         display: none;
     }
 }

res/css/views/rooms/_RoomTile.scss

@@ -21,10 +21,30 @@ limitations under the License.
     cursor: pointer;
     height: 40px;
     margin: 0;
-    padding: 2px 12px;
+    padding: 0 8px 0 10px;
     position: relative;
 }
 
+.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;
@@ -62,72 +82,39 @@ 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 {
         display: none;
     }
 
     .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 {
@@ -169,10 +156,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;