From c750737ed87423a16cb5c37645dfe93fd6b4110b Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Sun, 3 Apr 2022 12:56:20 +0000 Subject: [PATCH 1/4] Make dialog't title compatible with RTL Signed-off-by: Suguru Hirahara --- res/css/_common.scss | 9 +++------ 1 file changed, 3 insertions(+), 6 deletions(-) diff --git a/res/css/_common.scss b/res/css/_common.scss index 4ead7381fc5..0daade46899 100644 --- a/res/css/_common.scss +++ b/res/css/_common.scss @@ -357,6 +357,9 @@ legend { position: relative; padding: 3px 0; margin-bottom: 10px; + display: flex; + justify-content: space-between; + align-items: center; } .mx_Dialog_titleImage { @@ -378,9 +381,6 @@ legend { .mx_Dialog_header.mx_Dialog_headerWithButton > .mx_Dialog_title { text-align: center; } -.mx_Dialog_header.mx_Dialog_headerWithCancel { - padding-right: 20px; // leave space for the 'X' cancel button -} .mx_Dialog_title.danger { color: $alert; @@ -395,9 +395,6 @@ legend { height: 14px; background-color: $dialog-close-fg-color; cursor: pointer; - position: absolute; - top: 10px; - right: 0; } .mx_Dialog_content { From 37531c8a1c88896e1ee77f7df31085a06a4d6ed3 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Tue, 5 Apr 2022 09:00:19 +0000 Subject: [PATCH 2/4] Align the cancel button on the first baseline Signed-off-by: Suguru Hirahara --- res/css/_common.scss | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/res/css/_common.scss b/res/css/_common.scss index 0daade46899..e1c1836ff55 100644 --- a/res/css/_common.scss +++ b/res/css/_common.scss @@ -359,7 +359,7 @@ legend { margin-bottom: 10px; display: flex; justify-content: space-between; - align-items: center; + align-items: first baseline; } .mx_Dialog_titleImage { @@ -395,6 +395,11 @@ legend { height: 14px; background-color: $dialog-close-fg-color; cursor: pointer; + margin-inline-start: 20px; // Add 20px space between the button and mx_Dialog_title + + // Move the cancel button to align with mx_Dialog_title + position: relative; + top: -3px; } .mx_Dialog_content { From dee35b29de883cf63ddd55b41784947ad826d39a Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Tue, 5 Apr 2022 08:44:21 +0000 Subject: [PATCH 3/4] Remove mx_Dialog_headerWithCancel Signed-off-by: Suguru Hirahara --- src/components/views/dialogs/BaseDialog.tsx | 1 - .../views/dialogs/HostSignupDialog.tsx | 2 +- .../__snapshots__/ExportDialog-test.tsx.snap | 20 +++++++++---------- 3 files changed, 11 insertions(+), 12 deletions(-) diff --git a/src/components/views/dialogs/BaseDialog.tsx b/src/components/views/dialogs/BaseDialog.tsx index 519e38601ce..412a6db069f 100644 --- a/src/components/views/dialogs/BaseDialog.tsx +++ b/src/components/views/dialogs/BaseDialog.tsx @@ -161,7 +161,6 @@ export default class BaseDialog extends React.Component { >
{ headerImage } diff --git a/src/components/views/dialogs/HostSignupDialog.tsx b/src/components/views/dialogs/HostSignupDialog.tsx index 5f82ba80861..793c587a316 100644 --- a/src/components/views/dialogs/HostSignupDialog.tsx +++ b/src/components/views/dialogs/HostSignupDialog.tsx @@ -264,7 +264,7 @@ export default class HostSignupDialog extends React.PureComponent } { !this.state.minimized && -
+