From e55ec4359593484bc2e877739cbb51524df6ee85 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Tue, 15 Dec 2020 14:45:10 +0100 Subject: [PATCH 1/7] Fix minimized left panel alignment MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- res/css/structures/_LeftPanel.scss | 5 +++++ res/css/structures/_UserMenu.scss | 10 +++------- 2 files changed, 8 insertions(+), 7 deletions(-) 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; } } } From a22049a67969cf1658be64193b0e6beb06dd025f Mon Sep 17 00:00:00 2001 From: "J. Ryan Stinnett" Date: Tue, 19 Jan 2021 14:36:21 +0000 Subject: [PATCH 2/7] Use const / let instead of var --- scripts/reskindex.js | 44 ++++++++++++++++++++++---------------------- 1 file changed, 22 insertions(+), 22 deletions(-) diff --git a/scripts/reskindex.js b/scripts/reskindex.js index 9fb0e1a7c0..a57fd9cbe3 100755 --- a/scripts/reskindex.js +++ b/scripts/reskindex.js @@ -1,29 +1,29 @@ #!/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 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]; + 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 +38,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 + ");"); @@ -67,7 +67,7 @@ function filesHaveChanged(files, prevFiles) { return true; } // Check for name changes - for (var i = 0; i < files.length; i++) { + for (const i = 0; i < files.length; i++) { if (prevFiles[i] !== files[i]) { return true; } @@ -81,7 +81,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); From 0e137bd0f60393d1bf3d41495beb4cf930d242c6 Mon Sep 17 00:00:00 2001 From: "J. Ryan Stinnett" Date: Tue, 19 Jan 2021 14:42:10 +0000 Subject: [PATCH 3/7] Fix code style --- scripts/reskindex.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/scripts/reskindex.js b/scripts/reskindex.js index a57fd9cbe3..e3ebefd78d 100755 --- a/scripts/reskindex.js +++ b/scripts/reskindex.js @@ -53,7 +53,7 @@ function reskindex() { strm.write("export {components};\n"); 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'); From 4e5f25206a416177fdc8e3ff0a7bb4dfa7ef8e11 Mon Sep 17 00:00:00 2001 From: "J. Ryan Stinnett" Date: Tue, 19 Jan 2021 14:45:03 +0000 Subject: [PATCH 4/7] Ensure component index has been written before renaming This ensures we correctly wait for `component-index.js.tmp` to be written to disk before trying to rename into place. This fixes an issue where stray temp files were being strewn about the repos after renaming failures. --- scripts/reskindex.js | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/scripts/reskindex.js b/scripts/reskindex.js index e3ebefd78d..1770073aad 100755 --- a/scripts/reskindex.js +++ b/scripts/reskindex.js @@ -2,6 +2,7 @@ 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'); @@ -12,7 +13,7 @@ const componentJsGlob = '**/*.js'; const componentTsGlob = '**/*.tsx'; let prevFiles = []; -function reskindex() { +async function reskindex() { const jsFiles = glob.sync(componentJsGlob, {cwd: componentsDir}).sort(); const tsFiles = glob.sync(componentTsGlob, {cwd: componentsDir}).sort(); const files = [...tsFiles, ...jsFiles]; @@ -51,7 +52,8 @@ 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) { console.error("Error moving new index into place: " + err); From 016140670b78439708ca93829bfb27756b12a558 Mon Sep 17 00:00:00 2001 From: "J. Ryan Stinnett" Date: Tue, 19 Jan 2021 17:58:17 +0000 Subject: [PATCH 5/7] Fix let binding in reskindex.js --- scripts/reskindex.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/scripts/reskindex.js b/scripts/reskindex.js index 1770073aad..12310b77c1 100755 --- a/scripts/reskindex.js +++ b/scripts/reskindex.js @@ -69,7 +69,7 @@ function filesHaveChanged(files, prevFiles) { return true; } // Check for name changes - for (const i = 0; i < files.length; i++) { + for (let i = 0; i < files.length; i++) { if (prevFiles[i] !== files[i]) { return true; } From 3115c4f3f3ed0b2f1d82c5882dcce007b188c206 Mon Sep 17 00:00:00 2001 From: "J. Ryan Stinnett" Date: Tue, 19 Jan 2021 17:59:30 +0000 Subject: [PATCH 6/7] Show only preview buttons in directory for guest users This aligns the room directory with the rest of Element Web so that it does not allow guest users to join rooms. Instead, we show preview buttons (even when the preview might not actually happen). Fixes https://github.com/vector-im/element-web/issues/16213 --- src/components/structures/RoomDirectory.js | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) 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")} ); From c7c055dd98787a18bf87924fd920e23a44194f70 Mon Sep 17 00:00:00 2001 From: Travis Ralston Date: Wed, 20 Jan 2021 15:05:18 -0700 Subject: [PATCH 7/7] Give a bigger target area to AppsDrawer vertical resizer The existing target was too hard to hit, which annoyed users. This change makes it the same sort of surface area as the horizontal resizers, as requested by design to fix the problem in the short term. --- res/css/views/rooms/_AppsDrawer.scss | 39 ++++++++++++++++++------ src/components/views/rooms/AppsDrawer.js | 1 + 2 files changed, 30 insertions(+), 10 deletions(-) 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/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} >