mirrors/element-web
1
0
Fork 0
mirror of https://github.com/element-hq/element-web synced 2024-10-23 19:25:48 +03:00
Code Issues Projects Releases Packages Wiki Activity

Organize style rules of AccessSecretStorageDialog to avoid visual bugs (#8395)

Browse source 
* .mx_AccessSecretStorageDialog

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* .mx_AccessSecretStorageDialog_primaryContainer

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* .mx_AccessSecretStorageDialog_titleWithIcon

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Adopt BEM style

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* yarn run lint:style --fix

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
This commit is contained in:
Suguru Hirahara 2022-06-15 15:47:25 +00:00 committed by GitHub
parent 78ba5e35a3
commit 1b426ce0c8
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 109 additions and 103 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

208
res/css/views/dialogs/security/_AccessSecretStorageDialog.scss
View file

@ -14,126 +14,132 @@ See the License for the specific language governing permissions and
limitations under the License. limitations under the License.
*/ */
.mx_AccessSecretStorageDialog_titleWithIcon::before { .mx_AccessSecretStorageDialog {
content: ''; .mx_AccessSecretStorageDialog_titleWithIcon {
display: inline-block; &::before {
width: 24px; content: '';
height: 24px; display: inline-block;
margin-inline-end: $spacing-8; width: 24px;
position: relative; height: 24px;
top: 5px; // TODO: spacing variable margin-inline-end: $spacing-8;
background-color: $primary-content; position: relative;
} top: 5px; // TODO: spacing variable
background-color: $primary-content;
}
.mx_AccessSecretStorageDialog_resetBadge::before { &.mx_AccessSecretStorageDialog_resetBadge::before {
// The image isn't capable of masking, so we use a background instead. // The image isn't capable of masking, so we use a background instead.
background-image: url("$(res)/img/element-icons/warning-badge.svg"); background-image: url("$(res)/img/element-icons/warning-badge.svg");
background-size: 24px; background-size: 24px;
background-color: transparent; background-color: transparent;
} }
.mx_AccessSecretStorageDialog_secureBackupTitle::before { &.mx_AccessSecretStorageDialog_secureBackupTitle::before {
mask-image: url('$(res)/img/feather-customised/secure-backup.svg'); mask-image: url('$(res)/img/feather-customised/secure-backup.svg');
} }
.mx_AccessSecretStorageDialog_securePhraseTitle::before { &.mx_AccessSecretStorageDialog_securePhraseTitle::before {
mask-image: url('$(res)/img/feather-customised/secure-phrase.svg'); mask-image: url('$(res)/img/feather-customised/secure-phrase.svg');
} }
.mx_AccessSecretStorageDialog_keyStatus {
height: 30px;
}
.mx_AccessSecretStorageDialog_passPhraseInput {
width: 300px;
border: 1px solid $accent;
border-radius: 5px;
}
.mx_AccessSecretStorageDialog_recoveryKeyEntry {
display: flex;
align-items: center;
}
.mx_AccessSecretStorageDialog_recoveryKeyEntry_textInput {
flex-grow: 1;
}
.mx_AccessSecretStorageDialog_recoveryKeyEntry_entryControlSeparatorText {
margin: $spacing-16;
}
.mx_AccessSecretStorageDialog_recoveryKeyFeedback {
&::before {
content: "";
display: inline-block;
vertical-align: bottom;
width: 20px;
height: 20px;
mask-repeat: no-repeat;
mask-position: center;
mask-size: 20px;
margin-inline-end: 5px; // TODO: spacing variable
} }
}
.mx_AccessSecretStorageDialog_recoveryKeyFeedback_valid { .mx_AccessSecretStorageDialog_primaryContainer {
color: $accent; .mx_AccessSecretStorageDialog_passPhraseInput {
&::before { width: 300px;
mask-image: url('$(res)/img/feather-customised/check.svg'); border: 1px solid $accent;
background-color: $accent; border-radius: 5px;
} }
}
.mx_AccessSecretStorageDialog_recoveryKeyFeedback_invalid { .mx_AccessSecretStorageDialog_keyStatus {
color: $alert; height: 30px;
&::before { }
mask-image: url('$(res)/img/feather-customised/x.svg');
background-color: $alert;
}
}
.mx_AccessSecretStorageDialog_recoveryKeyEntry_fileInput { .mx_AccessSecretStorageDialog_recoveryKeyEntry {
display: none; display: flex;
} align-items: center;
.mx_AccessSecretStorageDialog_primaryContainer { .mx_AccessSecretStorageDialog_recoveryKeyEntry_textInput {
.mx_Dialog_buttons { flex-grow: 1;
$spacingStart: $spacing-24; // 16px icon + 8px padding }
text-align: initial; .mx_AccessSecretStorageDialog_recoveryKeyEntry_entryControlSeparatorText {
display: flex; margin: $spacing-16;
flex-flow: column; }
gap: 14px; // TODO: spacing variable
.mx_Dialog_buttons_additive { .mx_AccessSecretStorageDialog_recoveryKeyEntry_fileInput {
float: none; display: none;
}
}
.mx_AccessSecretStorageDialog_reset { .mx_AccessSecretStorageDialog_recoveryKeyFeedback {
position: relative; &::before {
padding-inline-start: $spacingStart; content: "";
display: inline-block;
vertical-align: bottom;
width: 20px;
height: 20px;
mask-repeat: no-repeat;
mask-position: center;
mask-size: 20px;
margin-inline-end: 5px; // TODO: spacing variable
}
&.mx_AccessSecretStorageDialog_recoveryKeyFeedback--valid {
color: $accent;
&::before { &::before {
content: ""; mask-image: url('$(res)/img/feather-customised/check.svg');
display: inline-block; background-color: $accent;
position: absolute;
height: 16px;
width: 16px;
left: 0;
top: 2px; // alignment
background-image: url("$(res)/img/element-icons/warning-badge.svg");
background-size: contain;
} }
}
.mx_AccessSecretStorageDialog_reset_link { &.mx_AccessSecretStorageDialog_recoveryKeyFeedback--invalid {
color: $alert; color: $alert;
&::before {
mask-image: url('$(res)/img/feather-customised/x.svg');
background-color: $alert;
} }
} }
} }
.mx_Dialog_buttons_row { .mx_Dialog_buttons {
gap: $spacing-16; // TODO: needs normalization $spacingStart: $spacing-24; // 16px icon + 8px padding
padding-inline-start: $spacingStart;
text-align: initial;
display: flex;
flex-flow: column;
gap: 14px; // TODO: spacing variable
.mx_Dialog_buttons_additive {
float: none;
.mx_AccessSecretStorageDialog_reset {
position: relative;
padding-inline-start: $spacingStart;
&::before {
content: "";
display: inline-block;
position: absolute;
height: 16px;
width: 16px;
left: 0;
top: 2px; // alignment
background-image: url("$(res)/img/element-icons/warning-badge.svg");
background-size: contain;
}
.mx_AccessSecretStorageDialog_reset_link {
color: $alert;
}
}
}
.mx_Dialog_buttons_row {
gap: $spacing-16; // TODO: needs normalization
padding-inline-start: $spacingStart;
}
} }
} }
} }

4
src/components/views/dialogs/security/AccessSecretStorageDialog.tsx
View file

@ -366,8 +366,8 @@ export default class AccessSecretStorageDialog extends React.PureComponent<IProp
const feedbackClasses = classNames({ const feedbackClasses = classNames({
'mx_AccessSecretStorageDialog_recoveryKeyFeedback': true, 'mx_AccessSecretStorageDialog_recoveryKeyFeedback': true,
'mx_AccessSecretStorageDialog_recoveryKeyFeedback_valid': this.state.recoveryKeyCorrect === true, 'mx_AccessSecretStorageDialog_recoveryKeyFeedback--valid': this.state.recoveryKeyCorrect === true,
'mx_AccessSecretStorageDialog_recoveryKeyFeedback_invalid': this.state.recoveryKeyCorrect === false, 'mx_AccessSecretStorageDialog_recoveryKeyFeedback--invalid': this.state.recoveryKeyCorrect === false,
}); });
const recoveryKeyFeedback = <div className={feedbackClasses}> const recoveryKeyFeedback = <div className={feedbackClasses}>
{ this.getKeyValidationText() } { this.getKeyValidationText() }