Skip to content
This repository has been archived by the owner on Sep 11, 2024. It is now read-only.

Prevent Invite and DevTools dialogs from being cut off #8646

Merged
merged 11 commits into from
Jun 2, 2022
Merged
14 changes: 10 additions & 4 deletions res/css/views/dialogs/_DevtoolsDialog.scss
Original file line number Diff line number Diff line change
Expand Up @@ -16,18 +16,24 @@ limitations under the License.

.mx_DevtoolsDialog_wrapper {
.mx_Dialog {
height: 100%;
display: flex;
flex-direction: column;
}

.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 {
Expand Down
59 changes: 35 additions & 24 deletions res/css/views/dialogs/_InviteDialog.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Expand Down Expand Up @@ -128,8 +133,9 @@ limitations under the License.
text-transform: uppercase;
}

.mx_CopyableText {
.mx_CopyableText.mx_CopyableText_border {
width: unset; // full width
margin-bottom: 0;

> a {
text-decoration: none;
Expand Down Expand Up @@ -270,44 +276,54 @@ 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 {
padding-bottom: 0;
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;
}
Expand All @@ -327,10 +343,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;
}
Expand Down Expand Up @@ -380,14 +392,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;
Expand Down
4 changes: 2 additions & 2 deletions src/RoomInvite.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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,
);
}

Expand All @@ -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,
);
}

Expand Down
9 changes: 6 additions & 3 deletions src/utils/DialogOpener.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand Down Expand Up @@ -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;
Expand Down