PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 3

move css to correct file

Browse source 
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
This commit is contained in:
Bruno Windels 2020-02-10 14:20:54 +01:00
parent 8c3004c2ac
commit 9059f00b29
4 changed files with 74 additions and 93 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
res/css/_components.scss
View file

@ -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";

68
res/css/views/right_panel/_VerificationPanel.scss
View file

@ -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;
}
}
}

86
res/css/views/verification/_VerificationQREmojiOptions.scss
View file

@ -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

12
src/components/views/right_panel/VerificationPanel.js
View file

@ -73,22 +73,22 @@ export default class VerificationPanel extends React.PureComponent {
if (this.props.layout === 'dialog') {
// HACK: This is a terrible idea.
let qrCode = <div className='mx_VerificationQREmojiOptions_noQR'><Spinner /></div>;
let qrCode = <div className='mx_VerificationPanel_QRPhase_noQR'><Spinner /></div>;
if (this.state.qrCodeProps) {
qrCode = <VerificationQRCode {...this.state.qrCodeProps} />;
}
return (
<div>
{_t("Verify this session by completing one of the following:")}
<div className='mx_IncomingSasDialog_startOptions'>
<div className='mx_IncomingSasDialog_startOption'>
<div className='mx_VerificationPanel_QRPhase_startOptions'>
<div className='mx_VerificationPanel_QRPhase_startOption'>
<p>{_t("Scan this unique code")}</p>
{qrCode}
</div>
<div className='mx_IncomingSasDialog_betweenText'>{_t("or")}</div>
<div className='mx_IncomingSasDialog_startOption'>
<div className='mx_VerificationPanel_QRPhase_betweenText'>{_t("or")}</div>
<div className='mx_VerificationPanel_QRPhase_startOption'>
<p>{_t("Compare unique emoji")}</p>
<span className='mx_IncomingSasDialog_helpText'>{_t("Compare a unique set of emoji if you don't have a camera on either device")}</span>
<span className='mx_VerificationPanel_QRPhase_helpText'>{_t("Compare a unique set of emoji if you don't have a camera on either device")}</span>
<AccessibleButton onClick={this._startSAS} kind='primary'>
{_t("Start")}
</AccessibleButton>