From 9059f00b29570ce3f730458607ff679d036373a9 Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Mon, 10 Feb 2020 14:20:54 +0100 Subject: [PATCH] move css to correct file Move the CSS for the dialog layout used in VerificationPanel to _VerificationPanel.scss, and delete the latter as it doesn't have any css of it's own anymore --- res/css/_components.scss | 1 - .../views/right_panel/_VerificationPanel.scss | 68 +++++++++++++++ .../_VerificationQREmojiOptions.scss | 86 ------------------- .../views/right_panel/VerificationPanel.js | 12 +-- 4 files changed, 74 insertions(+), 93 deletions(-) delete mode 100644 res/css/views/verification/_VerificationQREmojiOptions.scss diff --git a/res/css/_components.scss b/res/css/_components.scss index ad6bbdc486..bc636eb3c6 100644 --- a/res/css/_components.scss +++ b/res/css/_components.scss @@ -206,7 +206,6 @@ @import "./views/settings/tabs/user/_SecurityUserSettingsTab.scss"; @import "./views/settings/tabs/user/_VoiceUserSettingsTab.scss"; @import "./views/terms/_InlineTermsAgreement.scss"; -@import "./views/verification/_VerificationQREmojiOptions.scss"; @import "./views/verification/_VerificationShowSas.scss"; @import "./views/voip/_CallView.scss"; @import "./views/voip/_IncomingCallbox.scss"; diff --git a/res/css/views/right_panel/_VerificationPanel.scss b/res/css/views/right_panel/_VerificationPanel.scss index 827f2a2c49..8473b860db 100644 --- a/res/css/views/right_panel/_VerificationPanel.scss +++ b/res/css/views/right_panel/_VerificationPanel.scss @@ -36,4 +36,72 @@ limitations under the License. max-width: 240px; } } + +} + +// Special case styling for EncryptionPanel in a Modal dialog +.mx_Dialog, .mx_CompleteSecurity_body { + .mx_VerificationPanel_QRPhase_startOptions { + display: flex; + margin-top: 10px; + margin-bottom: 10px; + align-items: stretch; + + > .mx_VerificationPanel_QRPhase_betweenText { + width: 50px; + vertical-align: middle; + text-align: center; + display: flex; + align-items: center; + justify-content: center; + } + + .mx_VerificationPanel_QRPhase_startOption { + background-color: $user-tile-hover-bg-color; + border-radius: 10px; + flex: 1; + display: flex; + padding: 10px; + align-items: center; + flex-direction: column; + position: relative; + + canvas, .mx_VerificationPanel_QRPhase_noQR { + width: 220px !important; + height: 220px !important; + background-color: #fff; + border-radius: 4px; + vertical-align: middle; + text-align: center; + padding: 10px; + } + + > p { + font-weight: 700; + } + + .mx_VerificationPanel_QRPhase_helpText { + font-size: 14px; + margin-top: 71px; + text-align: center; + } + + .mx_AccessibleButton { + position: absolute; + bottom: 30px; + } + } + } + + // EncryptionPanel when verification is done + .mx_VerificationPanel_verified_section { + // center the big shield icon + .mx_E2EIcon { + margin: 0 auto; + } + // right align the "Got it" button + .mx_AccessibleButton { + float: right; + } + } } diff --git a/res/css/views/verification/_VerificationQREmojiOptions.scss b/res/css/views/verification/_VerificationQREmojiOptions.scss deleted file mode 100644 index 1f488cc758..0000000000 --- a/res/css/views/verification/_VerificationQREmojiOptions.scss +++ /dev/null @@ -1,86 +0,0 @@ -/* -Copyright 2020 The Matrix.org Foundation C.I.C. - -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_IncomingSasDialog_startOptions { - display: flex; - margin-top: 10px; - margin-bottom: 10px; - align-items: stretch; - - > .mx_IncomingSasDialog_betweenText { - width: 50px; - vertical-align: middle; - text-align: center; - display: flex; - align-items: center; - justify-content: center; - } - - .mx_IncomingSasDialog_startOption { - background-color: $user-tile-hover-bg-color; - border-radius: 10px; - flex: 1; - display: flex; - padding: 10px; - align-items: center; - flex-direction: column; - position: relative; - - canvas, .mx_VerificationQREmojiOptions_noQR { - width: 220px !important; - height: 220px !important; - background-color: #fff; - border-radius: 4px; - vertical-align: middle; - text-align: center; - padding: 10px; - } - - > p { - font-weight: 700; - } - - .mx_IncomingSasDialog_helpText { - font-size: 14px; - margin-top: 71px; - text-align: center; - } - - .mx_AccessibleButton { - position: absolute; - bottom: 30px; - } - } -} - -// Special case styling for EncryptionPanel in a Modal dialog -.mx_Dialog { - // EncryptionPanel when verification is done - .mx_VerificationPanel_verified_section { - // center the big shield icon - .mx_E2EIcon { - margin: 0 auto; - } - // right align the "Got it" button - .mx_AccessibleButton { - float: right; - } - } -} - -//mx_IncomingSasDialog_startOptions -//mx_IncomingSasDialog_startOption > canvas -//mx_VerificationQREmojiOptions_noQR diff --git a/src/components/views/right_panel/VerificationPanel.js b/src/components/views/right_panel/VerificationPanel.js index b007b6b54c..08b90f9114 100644 --- a/src/components/views/right_panel/VerificationPanel.js +++ b/src/components/views/right_panel/VerificationPanel.js @@ -73,22 +73,22 @@ export default class VerificationPanel extends React.PureComponent { if (this.props.layout === 'dialog') { // HACK: This is a terrible idea. - let qrCode =
; + let qrCode =
; if (this.state.qrCodeProps) { qrCode = ; } return (
{_t("Verify this session by completing one of the following:")} -
-
+
+

{_t("Scan this unique code")}

{qrCode}
-
{_t("or")}
-
+
{_t("or")}
+

{_t("Compare unique emoji")}

- {_t("Compare a unique set of emoji if you don't have a camera on either device")} + {_t("Compare a unique set of emoji if you don't have a camera on either device")} {_t("Start")}