From 681b59499a8b5f6742d6fada96f6d239acd09b89 Mon Sep 17 00:00:00 2001 From: Janne Mareike Koschinski Date: Wed, 18 May 2022 15:49:58 +0200 Subject: [PATCH 1/7] fix: replace fixed height based styling with flex for invite and dev dialogs --- res/css/views/dialogs/_DevtoolsDialog.scss | 11 +++-- res/css/views/dialogs/_InviteDialog.scss | 52 ++++++++++++---------- 2 files changed, 37 insertions(+), 26 deletions(-) diff --git a/res/css/views/dialogs/_DevtoolsDialog.scss b/res/css/views/dialogs/_DevtoolsDialog.scss index b1fed0d29bd..abc2db2d0fd 100644 --- a/res/css/views/dialogs/_DevtoolsDialog.scss +++ b/res/css/views/dialogs/_DevtoolsDialog.scss @@ -20,14 +20,19 @@ limitations under the License. } .mx_Dialog_fixedWidth { - overflow-y: hidden; - height: 100%; + display: flex; + flex-direction: column; + min-height: 0; + max-height: 100%; + + .mx_Dialog_buttons button { + margin-bottom: 0; + } } } .mx_DevTools_content { overflow-y: auto; - height: calc(100% - 124px); // 58px for buttons + 50px for header + 8px margin around } .mx_DevTools_RoomStateExplorer_query { diff --git a/res/css/views/dialogs/_InviteDialog.scss b/res/css/views/dialogs/_InviteDialog.scss index 35fedd7cf28..3f25dde8d87 100644 --- a/res/css/views/dialogs/_InviteDialog.scss +++ b/res/css/views/dialogs/_InviteDialog.scss @@ -130,6 +130,7 @@ limitations under the License. .mx_CopyableText { width: unset; // full width + margin-bottom: 0; > a { text-decoration: none; @@ -270,14 +271,16 @@ limitations under the License. .mx_InviteDialog_other { // Prevent the dialog from jumping around randomly when elements change. - height: 600px; + display: flex; + flex-direction: column; + max-height: 600px; + overflow: hidden; .mx_InviteDialog_addressBar { margin-right: 0; } .mx_InviteDialog_userSections { - height: calc(100% - 115px); // mx_InviteDialog's height minus some for the upper and lower elements padding-right: 0; .mx_InviteDialog_section { @@ -285,29 +288,37 @@ limitations under the License. margin-top: 12px; } } - - .mx_InviteDialog_hasFooter { - .mx_InviteDialog_userSections { - height: calc(100% - 175px); // For displaying an invite link on the footer of the dialog - } - } } .mx_InviteDialog_content { - height: calc(100% - 36px); // full height minus the size of the header + display: flex; + flex-direction: column; + flex-shrink: 1; overflow: hidden; } .mx_InviteDialog_transfer { - width: 496px; - height: 466px; - flex-direction: column; + width: auto; .mx_InviteDialog_content { - flex-direction: column; + width: 496px; + height: 430px; .mx_TabbedView { - height: calc(100% - 60px); + display: flex; + flex-direction: column; + flex-shrink: 1; + flex-grow: 1; + min-height: 0; + + .mx_TabbedView_tabPanel { + flex-direction: column; + + .mx_TabbedView_tabPanelContent { + display: flex; + flex-direction: column; + } + } } overflow: visible; } @@ -327,10 +338,6 @@ limitations under the License. padding: 0 45px 4px 0; } -.mx_InviteDialog_hasFooter .mx_InviteDialog_userSections { - height: calc(100% - 175px); -} - .mx_InviteDialog_helpText { margin: 0; } @@ -380,14 +387,13 @@ limitations under the License. .mx_InviteDialog_transferConsultConnect { padding-top: 16px; - /* This wants a drop shadow the full width of the dialog, so relative-position it - * and make it wider, then compensate with padding + /* This wants a drop shadow the full width of the dialog, so use negative margin to make it full width, + * then compensate with padding */ - position: relative; - width: 496px; - left: -24px; padding-left: 24px; padding-right: 24px; + margin-left: -24px; + margin-right: -24px; border-top: 1px solid $quinary-content; display: flex; From c9d5aea7ab2fc1193c3fb3b17c9f936ed99d2346 Mon Sep 17 00:00:00 2001 From: Janne Mareike Koschinski Date: Thu, 19 May 2022 15:56:25 +0200 Subject: [PATCH 2/7] feat: create flex wrapper class for invite dialogs --- res/css/views/dialogs/_InviteDialog.scss | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/res/css/views/dialogs/_InviteDialog.scss b/res/css/views/dialogs/_InviteDialog.scss index 3f25dde8d87..6420cf61790 100644 --- a/res/css/views/dialogs/_InviteDialog.scss +++ b/res/css/views/dialogs/_InviteDialog.scss @@ -14,6 +14,11 @@ See the License for the specific language governing permissions and limitations under the License. */ +.mx_InviteDialog_flexWrapper .mx_Dialog { + display: flex; + flex-direction: column; +} + .mx_InviteDialog_transferWrapper .mx_Dialog { padding-bottom: 16px; } @@ -128,7 +133,7 @@ limitations under the License. text-transform: uppercase; } - .mx_CopyableText { + .mx_CopyableText.mx_CopyableText_border { width: unset; // full width margin-bottom: 0; From 6a6481621a3e572bc9dddd9279c9de932ce90434 Mon Sep 17 00:00:00 2001 From: Janne Mareike Koschinski Date: Thu, 19 May 2022 15:56:38 +0200 Subject: [PATCH 3/7] feat: make invite dialogs use flex wrapper class --- src/RoomInvite.tsx | 4 ++-- src/utils/DialogOpener.ts | 9 ++++++--- 2 files changed, 8 insertions(+), 5 deletions(-) diff --git a/src/RoomInvite.tsx b/src/RoomInvite.tsx index e9204996ed2..f7cad382543 100644 --- a/src/RoomInvite.tsx +++ b/src/RoomInvite.tsx @@ -63,7 +63,7 @@ export function showStartChatInviteDialog(initialText = ""): void { // This dialog handles the room creation internally - we don't need to worry about it. Modal.createTrackedDialog( 'Start DM', '', InviteDialog, { kind: KIND_DM, initialText }, - /*className=*/null, /*isPriority=*/false, /*isStatic=*/true, + /*className=*/"mx_InviteDialog_flexWrapper", /*isPriority=*/false, /*isStatic=*/true, ); } @@ -75,7 +75,7 @@ export function showRoomInviteDialog(roomId: string, initialText = ""): void { initialText, roomId, }, - /*className=*/null, /*isPriority=*/false, /*isStatic=*/true, + /*className=*/"mx_InviteDialog_flexWrapper", /*isPriority=*/false, /*isStatic=*/true, ); } diff --git a/src/utils/DialogOpener.ts b/src/utils/DialogOpener.ts index 8c5c9c374ba..8bd6c137342 100644 --- a/src/utils/DialogOpener.ts +++ b/src/utils/DialogOpener.ts @@ -14,6 +14,8 @@ See the License for the specific language governing permissions and limitations under the License. */ +import classnames from "classnames"; + import defaultDispatcher from "../dispatcher/dispatcher"; import { ActionPayload } from "../dispatcher/payloads"; import Modal from "../Modal"; @@ -89,9 +91,10 @@ export class DialogOpener { kind: payload.kind, call: payload.call, roomId: payload.roomId, - }, payload.className, false, true).finished.then((results) => { - payload.onFinishedCallback?.(results); - }); + }, classnames("mx_InviteDialog_flexWrapper", payload.className), false, true).finished + .then((results) => { + payload.onFinishedCallback?.(results); + }); break; case Action.OpenAddToExistingSpaceDialog: { const space = payload.space; From a9e3096c3b67aaf23d1f00f65f92e5e58961c489 Mon Sep 17 00:00:00 2001 From: Janne Mareike Koschinski Date: Thu, 19 May 2022 15:57:33 +0200 Subject: [PATCH 4/7] feat: make devtools dialogs wrapper class use flex layout --- res/css/views/dialogs/_DevtoolsDialog.scss | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/res/css/views/dialogs/_DevtoolsDialog.scss b/res/css/views/dialogs/_DevtoolsDialog.scss index abc2db2d0fd..967d7c2fb9b 100644 --- a/res/css/views/dialogs/_DevtoolsDialog.scss +++ b/res/css/views/dialogs/_DevtoolsDialog.scss @@ -16,7 +16,8 @@ limitations under the License. .mx_DevtoolsDialog_wrapper { .mx_Dialog { - height: 100%; + display: flex; + flex-direction: column; } .mx_Dialog_fixedWidth { From 9e0d00f3d87e07cfc41c748c99b837e34e38757e Mon Sep 17 00:00:00 2001 From: Janne Mareike Koschinski Date: Fri, 20 May 2022 13:52:34 +0200 Subject: [PATCH 5/7] ci: empty commit to force CI to run again From d44a48cb2fff8d87b9f0916c9257b24d7ae96dc6 Mon Sep 17 00:00:00 2001 From: Janne Mareike Koschinski Date: Fri, 20 May 2022 14:10:17 +0200 Subject: [PATCH 6/7] ci: empty commit to force CI to run again From afbf6ad47a62db1f3ccb7e8b01c5fb71a36a4e5e Mon Sep 17 00:00:00 2001 From: Janne Mareike Koschinski Date: Wed, 1 Jun 2022 15:28:41 +0200 Subject: [PATCH 7/7] ci: empty commit to force CI to run again