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