From f98cefe63489ff17d6deea05bf37cd748d79dfd0 Mon Sep 17 00:00:00 2001 From: Manan Sadana Date: Mon, 25 Sep 2023 23:48:33 +0530 Subject: [PATCH 1/4] Fix: Details element wide clickable area --- res/css/_components.pcss | 1 + res/css/views/dialogs/_CreateRoomDialog.pcss | 1 + res/css/views/dialogs/_LogoutDialog.pcss | 19 +++++++++++++++++++ .../views/room_settings/_AliasSettings.pcss | 1 + .../tabs/user/_HelpUserSettingsTab.pcss | 15 ++------------- src/components/views/dialogs/LogoutDialog.tsx | 2 +- .../tabs/user/HelpUserSettingsTab.tsx | 2 +- 7 files changed, 26 insertions(+), 15 deletions(-) create mode 100644 res/css/views/dialogs/_LogoutDialog.pcss diff --git a/res/css/_components.pcss b/res/css/_components.pcss index 4414a422d5f..4297b9f1908 100644 --- a/res/css/_components.pcss +++ b/res/css/_components.pcss @@ -144,6 +144,7 @@ @import "./views/dialogs/_JoinRuleDropdown.pcss"; @import "./views/dialogs/_LeaveSpaceDialog.pcss"; @import "./views/dialogs/_LocationViewDialog.pcss"; +@import "./views/dialogs/_LogoutDialog.pcss"; @import "./views/dialogs/_ManageRestrictedJoinRuleDialog.pcss"; @import "./views/dialogs/_MessageEditHistoryDialog.pcss"; @import "./views/dialogs/_ModalWidgetDialog.pcss"; diff --git a/res/css/views/dialogs/_CreateRoomDialog.pcss b/res/css/views/dialogs/_CreateRoomDialog.pcss index 4e3d90cffe6..70401c4386b 100644 --- a/res/css/views/dialogs/_CreateRoomDialog.pcss +++ b/res/css/views/dialogs/_CreateRoomDialog.pcss @@ -22,6 +22,7 @@ limitations under the License. font-weight: var(--cpd-font-weight-semibold); cursor: pointer; color: $accent; + width: fit-content; /* list-style doesn't do it for webkit */ &::-webkit-details-marker { diff --git a/res/css/views/dialogs/_LogoutDialog.pcss b/res/css/views/dialogs/_LogoutDialog.pcss new file mode 100644 index 00000000000..3c07674971f --- /dev/null +++ b/res/css/views/dialogs/_LogoutDialog.pcss @@ -0,0 +1,19 @@ +/* +Copyright 2023 Manan Sadana + +Licensed under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. +You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software +distributed under the License is distributed on an "AS IS" BASIS, +WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +See the License for the specific language governing permissions and +limitations under the License. +*/ + +.mx_LogoutDialog_ExportKeyAdvanced { + width: fit-content; +} diff --git a/res/css/views/room_settings/_AliasSettings.pcss b/res/css/views/room_settings/_AliasSettings.pcss index cd384162928..8cd081ebe09 100644 --- a/res/css/views/room_settings/_AliasSettings.pcss +++ b/res/css/views/room_settings/_AliasSettings.pcss @@ -19,6 +19,7 @@ limitations under the License. color: $accent; font-weight: var(--cpd-font-weight-semibold); list-style: none; + width: fit-content; /* list-style doesn't do it for webkit */ &::-webkit-details-marker { diff --git a/res/css/views/settings/tabs/user/_HelpUserSettingsTab.pcss b/res/css/views/settings/tabs/user/_HelpUserSettingsTab.pcss index c03de9f36ce..b5e5f39b079 100644 --- a/res/css/views/settings/tabs/user/_HelpUserSettingsTab.pcss +++ b/res/css/views/settings/tabs/user/_HelpUserSettingsTab.pcss @@ -15,17 +15,6 @@ See the License for the specific language governing permissions and limitations under the License. */ -.mx_HelpUserSettingsTab { - code { - word-break: break-all; - user-select: all; - } - - details { - margin: $spacing-16 auto; - - summary { - margin-bottom: $spacing-16; - } - } +.mx_HelpUserSettingsTab_accessTokenDetails { + width: fit-content; } diff --git a/src/components/views/dialogs/LogoutDialog.tsx b/src/components/views/dialogs/LogoutDialog.tsx index b96cc3fd068..d80b2ae3505 100644 --- a/src/components/views/dialogs/LogoutDialog.tsx +++ b/src/components/views/dialogs/LogoutDialog.tsx @@ -202,7 +202,7 @@ export default class LogoutDialog extends React.Component { > -
+
{_t("Advanced")}

diff --git a/src/components/views/settings/tabs/user/HelpUserSettingsTab.tsx b/src/components/views/settings/tabs/user/HelpUserSettingsTab.tsx index 52d3e2e6cda..a2626919181 100644 --- a/src/components/views/settings/tabs/user/HelpUserSettingsTab.tsx +++ b/src/components/views/settings/tabs/user/HelpUserSettingsTab.tsx @@ -348,7 +348,7 @@ export default class HelpUserSettingsTab extends React.Component )} -

+
{_t("common|access_token")} {_t("setting|help_about|access_token_detail")} this.context.getAccessToken()}> From 3342fc2bf9a461bae49f9d3d886aa3992b8ad1a7 Mon Sep 17 00:00:00 2001 From: Manan Sadana Date: Wed, 27 Sep 2023 11:30:45 +0530 Subject: [PATCH 2/4] LogoutDialog-test.tsx snapshot updated --- .../dialogs/__snapshots__/LogoutDialog-test.tsx.snap | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/test/components/views/dialogs/__snapshots__/LogoutDialog-test.tsx.snap b/test/components/views/dialogs/__snapshots__/LogoutDialog-test.tsx.snap index 0e4a2763a37..7860bdd2d94 100644 --- a/test/components/views/dialogs/__snapshots__/LogoutDialog-test.tsx.snap +++ b/test/components/views/dialogs/__snapshots__/LogoutDialog-test.tsx.snap @@ -65,7 +65,9 @@ exports[`LogoutDialog Prompts user to connect backup if there is a backup on the -
+
Advanced @@ -150,7 +152,9 @@ exports[`LogoutDialog Prompts user to set up backup if there is no backup on the -
+
Advanced From 9e511489e16e737cc10f89d02324e6ed446e8bfa Mon Sep 17 00:00:00 2001 From: manancodes Date: Wed, 11 Oct 2023 22:32:34 +0530 Subject: [PATCH 3/4] Fixed open state clickable area for dropdowns --- res/css/views/settings/_CrossSigningPanel.pcss | 4 ++++ res/css/views/settings/_SecureBackupPanel.pcss | 4 ++++ src/components/views/dialogs/LogoutDialog.tsx | 4 ++-- .../views/settings/CrossSigningPanel.tsx | 2 +- .../views/settings/SecureBackupPanel.tsx | 2 +- .../settings/tabs/user/HelpUserSettingsTab.tsx | 6 ++++-- .../__snapshots__/LogoutDialog-test.tsx.snap | 16 ++++++++-------- .../SecureBackupPanel-test.tsx.snap | 8 ++++++-- .../SecurityUserSettingsTab-test.tsx.snap | 8 ++++++-- 9 files changed, 36 insertions(+), 18 deletions(-) diff --git a/res/css/views/settings/_CrossSigningPanel.pcss b/res/css/views/settings/_CrossSigningPanel.pcss index 1b5f7d1f74c..c00c9dfdcdf 100644 --- a/res/css/views/settings/_CrossSigningPanel.pcss +++ b/res/css/views/settings/_CrossSigningPanel.pcss @@ -38,3 +38,7 @@ limitations under the License. margin-inline-end: 10px; } } + +.mx_CrossSigningPanel_advanced { + width: fit-content; +} diff --git a/res/css/views/settings/_SecureBackupPanel.pcss b/res/css/views/settings/_SecureBackupPanel.pcss index 5ff3cba4040..38250e97767 100644 --- a/res/css/views/settings/_SecureBackupPanel.pcss +++ b/res/css/views/settings/_SecureBackupPanel.pcss @@ -46,3 +46,7 @@ limitations under the License. } } } + +.mx_SecureBackupPanel_advanced { + width: fit-content; +} diff --git a/src/components/views/dialogs/LogoutDialog.tsx b/src/components/views/dialogs/LogoutDialog.tsx index 107244cbe37..b72a978f7e0 100644 --- a/src/components/views/dialogs/LogoutDialog.tsx +++ b/src/components/views/dialogs/LogoutDialog.tsx @@ -202,8 +202,8 @@ export default class LogoutDialog extends React.Component { > -
- {_t("common|Advanced")} +
+ {_t("common|Advanced")}

diff --git a/src/components/views/settings/CrossSigningPanel.tsx b/src/components/views/settings/CrossSigningPanel.tsx index dd5e828cee9..23b38c97cce 100644 --- a/src/components/views/settings/CrossSigningPanel.tsx +++ b/src/components/views/settings/CrossSigningPanel.tsx @@ -258,7 +258,7 @@ export default class CrossSigningPanel extends React.PureComponent<{}, IState> { <> {summarisedStatus}
- {_t("common|Advanced")} + {_t("common|Advanced")} diff --git a/src/components/views/settings/SecureBackupPanel.tsx b/src/components/views/settings/SecureBackupPanel.tsx index 9cf8609e732..b51d7f319e5 100644 --- a/src/components/views/settings/SecureBackupPanel.tsx +++ b/src/components/views/settings/SecureBackupPanel.tsx @@ -397,7 +397,7 @@ export default class SecureBackupPanel extends React.PureComponent<{}, IState> { {statusDescription}
- {_t("common|Advanced")} + {_t("common|Advanced")}
{_t("settings|security|cross_signing_public_keys")}
diff --git a/src/components/views/settings/tabs/user/HelpUserSettingsTab.tsx b/src/components/views/settings/tabs/user/HelpUserSettingsTab.tsx index b743da46f50..d5ecc4301ea 100644 --- a/src/components/views/settings/tabs/user/HelpUserSettingsTab.tsx +++ b/src/components/views/settings/tabs/user/HelpUserSettingsTab.tsx @@ -348,8 +348,10 @@ export default class HelpUserSettingsTab extends React.Component )} -
- {_t("common|access_token")} +
+ + {_t("common|access_token")} + {_t("setting|help_about|access_token_detail")} this.context.getAccessToken()}> {this.context.getAccessToken()} diff --git a/test/components/views/dialogs/__snapshots__/LogoutDialog-test.tsx.snap b/test/components/views/dialogs/__snapshots__/LogoutDialog-test.tsx.snap index 7860bdd2d94..bac31d1d81e 100644 --- a/test/components/views/dialogs/__snapshots__/LogoutDialog-test.tsx.snap +++ b/test/components/views/dialogs/__snapshots__/LogoutDialog-test.tsx.snap @@ -65,10 +65,10 @@ exports[`LogoutDialog Prompts user to connect backup if there is a backup on the -
- +
+ Advanced

@@ -152,10 +152,10 @@ exports[`LogoutDialog Prompts user to set up backup if there is no backup on the -

- +
+ Advanced

diff --git a/test/components/views/settings/__snapshots__/SecureBackupPanel-test.tsx.snap b/test/components/views/settings/__snapshots__/SecureBackupPanel-test.tsx.snap index 47a6c83f79c..fa3a5fbb91d 100644 --- a/test/components/views/settings/__snapshots__/SecureBackupPanel-test.tsx.snap +++ b/test/components/views/settings/__snapshots__/SecureBackupPanel-test.tsx.snap @@ -13,7 +13,9 @@ exports[` handles error fetching backup 1`] = ` Unable to load key backup status

- + Advanced
{_t("Backup key stored:")}
suggests connecting session to key backup when ba Connect this session to key backup before signing out to avoid losing any keys that may only be on this session.
- + Advanced
renders security section 1`] = ` />
- + Advanced
renders security section 1`] = ` />
- + Advanced
Date: Wed, 11 Oct 2023 22:44:37 +0530 Subject: [PATCH 4/4] Advanced changed to advanced --- src/components/views/dialogs/LogoutDialog.tsx | 2 +- src/components/views/settings/CrossSigningPanel.tsx | 2 +- src/components/views/settings/SecureBackupPanel.tsx | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/views/dialogs/LogoutDialog.tsx b/src/components/views/dialogs/LogoutDialog.tsx index 96ad5960a0b..f6d8af0c892 100644 --- a/src/components/views/dialogs/LogoutDialog.tsx +++ b/src/components/views/dialogs/LogoutDialog.tsx @@ -195,7 +195,7 @@ export default class LogoutDialog extends React.Component {
- {_t("common|Advanced")} + {_t("common|advanced")}

diff --git a/src/components/views/settings/CrossSigningPanel.tsx b/src/components/views/settings/CrossSigningPanel.tsx index 23b38c97cce..65886902544 100644 --- a/src/components/views/settings/CrossSigningPanel.tsx +++ b/src/components/views/settings/CrossSigningPanel.tsx @@ -258,7 +258,7 @@ export default class CrossSigningPanel extends React.PureComponent<{}, IState> { <> {summarisedStatus}
- {_t("common|Advanced")} + {_t("common|advanced")}
diff --git a/src/components/views/settings/SecureBackupPanel.tsx b/src/components/views/settings/SecureBackupPanel.tsx index 75eea5521ec..4a379508c76 100644 --- a/src/components/views/settings/SecureBackupPanel.tsx +++ b/src/components/views/settings/SecureBackupPanel.tsx @@ -384,7 +384,7 @@ export default class SecureBackupPanel extends React.PureComponent<{}, IState> { {_t("settings|security|backup_keys_description")} {statusDescription}
- {_t("common|Advanced")} + {_t("common|advanced")}
{_t("settings|security|cross_signing_public_keys")}
{_t("settings|security|backup_key_stored_status")}