diff --git a/res/css/structures/_LeftPanel.scss b/res/css/structures/_LeftPanel.scss index 1424d9cda0..168590502d 100644 --- a/res/css/structures/_LeftPanel.scss +++ b/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; diff --git a/res/css/structures/_UserMenu.scss b/res/css/structures/_UserMenu.scss index 84c21364ce..0673ebb058 100644 --- a/res/css/structures/_UserMenu.scss +++ b/res/css/structures/_UserMenu.scss @@ -119,14 +119,10 @@ limitations under the License. } &.mx_UserMenu_minimized { - .mx_UserMenu_userHeader { - .mx_UserMenu_row { - justify-content: center; - } + padding-right: 0px; - .mx_UserMenu_userAvatarContainer { - margin-right: 0; - } + .mx_UserMenu_userAvatarContainer { + margin-right: 0px; } } } diff --git a/res/css/views/rooms/_AppsDrawer.scss b/res/css/views/rooms/_AppsDrawer.scss index 8731d22660..492ed95973 100644 --- a/res/css/views/rooms/_AppsDrawer.scss +++ b/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 - width: unset !important; - height: 4px !important; + // Override styles from library, making the whole area the target area + width: 100% !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 - // These are also overridden from the library - left: calc(50% - 32px) !important; - right: calc(50% - 32px) !important; + // We then render the pill handle in an ::after to keep it in the handle's + // area without being a massive line across the screen + &::after { + 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; } diff --git a/scripts/reskindex.js b/scripts/reskindex.js index 9fb0e1a7c0..12310b77c1 100755 --- a/scripts/reskindex.js +++ b/scripts/reskindex.js @@ -1,29 +1,30 @@ #!/usr/bin/env node -var fs = require('fs'); -var path = require('path'); -var glob = require('glob'); -var args = require('minimist')(process.argv); -var chokidar = require('chokidar'); +const fs = require('fs'); +const path = require('path'); +const glob = require('glob'); +const util = require('util'); +const args = require('minimist')(process.argv); +const chokidar = require('chokidar'); -var componentIndex = path.join('src', 'component-index.js'); -var componentIndexTmp = componentIndex+".tmp"; -var componentsDir = path.join('src', 'components'); -var componentJsGlob = '**/*.js'; -var componentTsGlob = '**/*.tsx'; -var prevFiles = []; +const componentIndex = path.join('src', 'component-index.js'); +const componentIndexTmp = componentIndex+".tmp"; +const componentsDir = path.join('src', 'components'); +const componentJsGlob = '**/*.js'; +const componentTsGlob = '**/*.tsx'; +let prevFiles = []; -function reskindex() { - var jsFiles = glob.sync(componentJsGlob, {cwd: componentsDir}).sort(); - var tsFiles = glob.sync(componentTsGlob, {cwd: componentsDir}).sort(); - var files = [...tsFiles, ...jsFiles]; +async function reskindex() { + const jsFiles = glob.sync(componentJsGlob, {cwd: componentsDir}).sort(); + const tsFiles = glob.sync(componentTsGlob, {cwd: componentsDir}).sort(); + 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) { - var file = files[i].replace('.js', '').replace('.tsx', ''); + for (let i = 0; i < files.length; ++i) { + const file = files[i].replace('.js', '').replace('.tsx', ''); - var moduleName = (file.replace(/\//g, '.')); - var importName = moduleName.replace(/\./g, "$"); + const moduleName = (file.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); diff --git a/src/components/structures/RoomDirectory.js b/src/components/structures/RoomDirectory.js index e3323b05fa..9ddacaf829 100644 --- a/src/components/structures/RoomDirectory.js +++ b/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 = ( this.onPreviewClick(ev, room)}>{_t("Preview")} ); @@ -496,7 +500,7 @@ export default class RoomDirectory extends React.Component { joinOrViewButton = ( this.onViewClick(ev, room)}>{_t("View")} ); - } else if (!isGuest || room.guest_can_join) { + } else if (!isGuest) { joinOrViewButton = ( this.onJoinClick(ev, room)}>{_t("Join")} ); diff --git a/src/components/views/rooms/AppsDrawer.js b/src/components/views/rooms/AppsDrawer.js index 3208844bc5..24a7d1417a 100644 --- a/src/components/views/rooms/AppsDrawer.js +++ b/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} >