Merge branch 'develop' into improve-codeblock

res/css/structures/_LeftPanel.scss

@@ -180,6 +180,11 @@ $groupFilterPanelWidth: 56px; // only applies in this file, used for calculation
         .mx_LeftPanel_roomListContainer {
             width: 68px;
 
+            .mx_LeftPanel_userHeader {
+                flex-direction: row;
+                justify-content: center;
+            }
+
             .mx_LeftPanel_filterContainer {
                 // Organize the flexbox into a centered column layout
                 flex-direction: column;

res/css/structures/_UserMenu.scss

@@ -119,14 +119,10 @@ limitations under the License.
     }
 
     &.mx_UserMenu_minimized {
-        .mx_UserMenu_userHeader {
+        padding-right: 0px;
-            .mx_UserMenu_row {
-                justify-content: center;
-            }
 
-            .mx_UserMenu_userAvatarContainer {
+        .mx_UserMenu_userAvatarContainer {
-                margin-right: 0;
+            margin-right: 0px;
-            }
         }
     }
 }

res/css/views/rooms/_AppsDrawer.scss

@@ -24,26 +24,45 @@ $MiniAppTileHeight: 200px;
     flex-direction: column;
     overflow: hidden;
 
+    .mx_AppsContainer_resizerHandleContainer {
+        width: 100%;
+        height: 10px;
+        margin-top: -3px; // move it up so the interactions are slightly more comfortable
+        display: block;
+        position: relative;
+    }
+
     .mx_AppsContainer_resizerHandle {
         cursor: ns-resize;
-        border-radius: 3px;
 
-        // Override styles from library
+        // Override styles from library, making the whole area the target area
-        width: unset !important;
+        width: 100% !important;
-        height: 4px !important;
+        height: 100% !important;
 
         // This is positioned directly below frame
         position: absolute;
-        bottom: -8px !important; // override from library
+        bottom: 0 !important; // override from library
 
-        // Together, these make the bar 64px wide
+        // We then render the pill handle in an ::after to keep it in the handle's
-        // These are also overridden from the library
+        // area without being a massive line across the screen
-        left: calc(50% - 32px) !important;
+        &::after {
-        right: calc(50% - 32px) !important;
+            content: '';
+            position: absolute;
+            border-radius: 3px;
+
+            // The combination of these two should make the pill 4px high
+            top: 6px;
+            bottom: 0;
+
+            // Together, these make the bar 64px wide
+            // These are also overridden from the library
+            left: calc(50% - 32px);
+            right: calc(50% - 32px);
+        }
     }
 
     &:hover {
-        .mx_AppsContainer_resizerHandle {
+        .mx_AppsContainer_resizerHandle::after {
             opacity: 0.8;
             background: $primary-fg-color;
         }

scripts/reskindex.js

@@ -1,29 +1,30 @@
 #!/usr/bin/env node
-var fs = require('fs');
+const fs = require('fs');
-var path = require('path');
+const path = require('path');
-var glob = require('glob');
+const glob = require('glob');
-var args = require('minimist')(process.argv);
+const util = require('util');
-var chokidar = require('chokidar');
+const args = require('minimist')(process.argv);
+const chokidar = require('chokidar');
 
-var componentIndex = path.join('src', 'component-index.js');
+const componentIndex = path.join('src', 'component-index.js');
-var componentIndexTmp = componentIndex+".tmp";
+const componentIndexTmp = componentIndex+".tmp";
-var componentsDir = path.join('src', 'components');
+const componentsDir = path.join('src', 'components');
-var componentJsGlob = '**/*.js';
+const componentJsGlob = '**/*.js';
-var componentTsGlob = '**/*.tsx';
+const componentTsGlob = '**/*.tsx';
-var prevFiles = [];
+let prevFiles = [];
 
-function reskindex() {
+async function reskindex() {
-    var jsFiles = glob.sync(componentJsGlob, {cwd: componentsDir}).sort();
+    const jsFiles = glob.sync(componentJsGlob, {cwd: componentsDir}).sort();
-    var tsFiles = glob.sync(componentTsGlob, {cwd: componentsDir}).sort();
+    const tsFiles = glob.sync(componentTsGlob, {cwd: componentsDir}).sort();
-    var files = [...tsFiles, ...jsFiles];
+    const files = [...tsFiles, ...jsFiles];
     if (!filesHaveChanged(files, prevFiles)) {
         return;
     }
     prevFiles = files;
 
-    var header = args.h || args.header;
+    const header = args.h || args.header;
 
-    var strm = fs.createWriteStream(componentIndexTmp);
+    const strm = fs.createWriteStream(componentIndexTmp);
 
     if (header) {
        strm.write(fs.readFileSync(header));
@@ -38,11 +39,11 @@ function reskindex() {
     strm.write(" */\n\n");
     strm.write("let components = {};\n");
 
-    for (var i = 0; i < files.length; ++i) {
+    for (let i = 0; i < files.length; ++i) {
-        var file = files[i].replace('.js', '').replace('.tsx', '');
+        const file = files[i].replace('.js', '').replace('.tsx', '');
 
-        var moduleName = (file.replace(/\//g, '.'));
+        const moduleName = (file.replace(/\//g, '.'));
-        var importName = moduleName.replace(/\./g, "$");
+        const importName = moduleName.replace(/\./g, "$");
 
         strm.write("import " + importName + " from './components/" + file + "';\n");
         strm.write(importName + " && (components['"+moduleName+"'] = " + importName + ");");
@@ -51,9 +52,10 @@ function reskindex() {
     }
 
     strm.write("export {components};\n");
-    strm.end();
+    // Ensure the file has been fully written to disk before proceeding
+    await util.promisify(strm.end);
     fs.rename(componentIndexTmp, componentIndex, function(err) {
-        if(err) {
+        if (err) {
             console.error("Error moving new index into place: " + err);
         } else {
             console.log('Reskindex: completed');
@@ -67,7 +69,7 @@ function filesHaveChanged(files, prevFiles) {
         return true;
     }
     // Check for name changes
-    for (var i = 0; i < files.length; i++) {
+    for (let i = 0; i < files.length; i++) {
         if (prevFiles[i] !== files[i]) {
             return true;
         }
@@ -81,7 +83,7 @@ if (!args.w) {
     return;
 }
 
-var watchDebouncer = null;
+let watchDebouncer = null;
 chokidar.watch(path.join(componentsDir, componentJsGlob)).on('all', (event, path) => {
     if (path === componentIndex) return;
     if (watchDebouncer) clearTimeout(watchDebouncer);

src/components/structures/RoomDirectory.js

@@ -487,7 +487,11 @@ export default class RoomDirectory extends React.Component {
         let previewButton;
         let joinOrViewButton;
 
-        if (room.world_readable && !hasJoinedRoom) {
+        // Element Web currently does not allow guests to join rooms, so we
+        // instead show them preview buttons for all rooms. If the room is not
+        // world readable, a modal will appear asking you to register first. If
+        // it is readable, the preview appears as normal.
+        if (!hasJoinedRoom && (room.world_readable || isGuest)) {
             previewButton = (
                 <AccessibleButton kind="secondary" onClick={(ev) => this.onPreviewClick(ev, room)}>{_t("Preview")}</AccessibleButton>
             );
@@ -496,7 +500,7 @@ export default class RoomDirectory extends React.Component {
             joinOrViewButton = (
                 <AccessibleButton kind="secondary" onClick={(ev) => this.onViewClick(ev, room)}>{_t("View")}</AccessibleButton>
             );
-        } else if (!isGuest || room.guest_can_join) {
+        } else if (!isGuest) {
             joinOrViewButton = (
                 <AccessibleButton kind="primary" onClick={(ev) => this.onJoinClick(ev, room)}>{_t("Join")}</AccessibleButton>
             );

src/components/views/rooms/AppsDrawer.js

@@ -252,6 +252,7 @@ export default class AppsDrawer extends React.Component {
                     minHeight={100}
                     maxHeight={this.props.maxHeight ? this.props.maxHeight - 50 : undefined}
                     handleClass="mx_AppsContainer_resizerHandle"
+                    handleWrapperClass="mx_AppsContainer_resizerHandleContainer"
                     className="mx_AppsContainer_resizer"
                     resizeNotifier={this.props.resizeNotifier}
                 >