Improve decryption error UI by consolidating error messages and providing instructions when possible (#9544)
* Improve decryption error UI by consolidating error messages and providing instructions when possible * Fix TS strict errors * Rename .scss to .pcss * Avoid accessing clipboard, Cypress doesn't like it * Display DecryptionFailureBar alongside other AuxPanel bars * Add comments * Add small margin off-screen for visible decryption failures * Fix some more TS strict errors * Add unit tests for DecryptionFailureBar * Add button to resend key requests manually * Remove references to matrix-js-sdk crypto internals * Add hysteresis to visible decryption failures * Add comment Co-authored-by: Richard van der Hoff <1389908+richvdh@users.noreply.github.com> * Add comment Co-authored-by: Richard van der Hoff <1389908+richvdh@users.noreply.github.com> * Don't create empty div if we're not showing resend requests button * cancel updateSessions on unmount * Update unit tests * Fix lint and implicit any * Simplify visible event bounds checking * Adjust cypress test descriptions * Add percy snapshots * Update src/components/structures/TimelinePanel.tsx Co-authored-by: Richard van der Hoff <1389908+richvdh@users.noreply.github.com> * Add comments on TimelinePanel IState * comment * Add names to percy snapshots * Show Resend Key Requests button when there are sessions that haven't already been requested via this bar * We no longer request keys from senders * update i18n * update expected text in cypress test * don't download keys ourselves, update device info in response to updates from client * fix ts strict errors * visibledecryptionfailures undefined handling * Fix implicitAny errors Co-authored-by: Richard van der Hoff <1389908+richvdh@users.noreply.github.com> Co-authored-by: Michael Telatynski <7t3chguy@gmail.com>
This commit is contained in:
Faye Duxovni
co-authored by
Richard van der Hoff
Michael Telatynski
Richard van der Hoff
Michael Telatynski
parent
b728b27435
commit
4724506320
@@ -218,6 +218,7 @@
|
||||
@import "./views/messages/_CallEvent.pcss";
|
||||
@import "./views/messages/_CreateEvent.pcss";
|
||||
@import "./views/messages/_DateSeparator.pcss";
|
||||
@import "./views/messages/_DecryptionFailureBody.pcss";
|
||||
@import "./views/messages/_DisambiguatedProfile.pcss";
|
||||
@import "./views/messages/_EventTileBubble.pcss";
|
||||
@import "./views/messages/_HiddenBody.pcss";
|
||||
@@ -260,6 +261,7 @@
|
||||
@import "./views/rooms/_Autocomplete.pcss";
|
||||
@import "./views/rooms/_AuxPanel.pcss";
|
||||
@import "./views/rooms/_BasicMessageComposer.pcss";
|
||||
@import "./views/rooms/_DecryptionFailureBar.pcss";
|
||||
@import "./views/rooms/_E2EIcon.pcss";
|
||||
@import "./views/rooms/_EditMessageComposer.pcss";
|
||||
@import "./views/rooms/_EmojiButton.pcss";
|
||||
|
||||
@@ -0,0 +1,20 @@
|
||||
/*
|
||||
Copyright 2022 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_DecryptionFailureBody {
|
||||
color: $secondary-content;
|
||||
font-style: italic;
|
||||
}
|
||||
@@ -0,0 +1,60 @@
|
||||
/*
|
||||
Copyright 2022 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_DecryptionFailureBar {
|
||||
background-color: $system;
|
||||
padding: $spacing-12;
|
||||
margin-left: $spacing-16;
|
||||
margin-right: $spacing-16;
|
||||
border-radius: 4px;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: $spacing-12;
|
||||
}
|
||||
|
||||
.mx_DecryptionFailureBar_icon {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
mask-image: url("$(res)/img/e2e/decryption-failure.svg");
|
||||
background-color: $alert;
|
||||
mask-repeat: no-repeat;
|
||||
mask-position: center;
|
||||
mask-size: contain;
|
||||
}
|
||||
|
||||
.mx_DecryptionFailureBar_icon,
|
||||
.mx_DecryptionFailureBar .mx_Spinner {
|
||||
flex-shrink: 0;
|
||||
flex-grow: 0;
|
||||
}
|
||||
|
||||
.mx_DecryptionFailureBar_message {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.mx_DecryptionFailureBar_message_headline {
|
||||
font-weight: $font-semi-bold;
|
||||
font-size: $font-16px;
|
||||
margin-bottom: $spacing-4;
|
||||
}
|
||||
|
||||
.mx_DecryptionFailureBar_message_body {
|
||||
color: $secondary-content;
|
||||
}
|
||||
|
||||
.mx_DecryptionFailureBar_button {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
@@ -478,11 +478,9 @@ limitations under the License.
|
||||
grid-template:
|
||||
"reply reply" auto
|
||||
"shield body" auto
|
||||
"shield link" auto
|
||||
/ auto 1fr;
|
||||
|
||||
.mx_UnknownBody,
|
||||
.mx_EventTile_keyRequestInfo,
|
||||
.mx_ReplyChain_wrapper,
|
||||
.mx_ViewSourceEvent {
|
||||
min-width: 0; /* Prevent a grid blowout */
|
||||
@@ -490,16 +488,15 @@ limitations under the License.
|
||||
|
||||
.mx_EventTile_e2eIcon {
|
||||
grid-area: shield;
|
||||
margin-top: auto;
|
||||
margin-bottom: auto;
|
||||
}
|
||||
|
||||
.mx_UnknownBody {
|
||||
.mx_UnknownBody,
|
||||
.mx_DecryptionFailureBody {
|
||||
grid-area: body;
|
||||
}
|
||||
|
||||
.mx_EventTile_keyRequestInfo {
|
||||
grid-area: link;
|
||||
}
|
||||
|
||||
.mx_ReplyChain_wrapper {
|
||||
grid-area: reply;
|
||||
}
|
||||
@@ -512,7 +509,6 @@ limitations under the License.
|
||||
align-items: center;
|
||||
grid-template:
|
||||
"shield source" auto
|
||||
"shield link" auto
|
||||
/ auto 1fr;
|
||||
|
||||
.mx_ViewSourceEvent {
|
||||
|
||||
@@ -685,6 +685,11 @@ $left-gutter: 64px;
|
||||
mask-image: url("$(res)/img/e2e/normal.svg");
|
||||
background-color: $header-panel-text-primary-color;
|
||||
}
|
||||
|
||||
&.mx_EventTile_e2eIcon_decryption_failure::after {
|
||||
mask-image: url("$(res)/img/e2e/decryption-failure.svg");
|
||||
background-color: $secondary-content;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_EventTile_body {
|
||||
@@ -793,33 +798,6 @@ $left-gutter: 64px;
|
||||
mask-image: url("$(res)/img/element-icons/maximise-expand.svg");
|
||||
}
|
||||
|
||||
.mx_EventTile_keyRequestInfo {
|
||||
font-size: $font-12px;
|
||||
|
||||
.mx_EventTile_keyRequestInfo_text {
|
||||
opacity: 0.5;
|
||||
|
||||
.mx_AccessibleButton {
|
||||
color: $primary-content;
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mx_EventTile_keyRequestInfo_tooltip_contents p {
|
||||
text-align: auto;
|
||||
margin-left: 3px;
|
||||
margin-right: 3px;
|
||||
|
||||
&:first-child {
|
||||
margin-top: 0px;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_EventTile_tileError {
|
||||
color: red;
|
||||
text-align: center;
|
||||
|
||||
@@ -0,0 +1,3 @@
|
||||
<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" fill="#000000" d="m 13.693359,4.8320312 c -0.831702,0.014848 -1.62869,0.3142589 -2.236328,0.921875 -1.205391,1.2054645 -1.19044,3.1514722 -0.164062,4.6464848 l -2.9101565,2.96875 -0.2617187,-0.269532 -0.00195,-0.002 C 8.0071963,12.985739 7.8869254,12.852667 7.6484375,12.767578 7.4099496,12.68249 7.0329991,12.769696 6.8398438,12.962891 L 5.8964844,13.90625 c -0.3865104,0.386392 -0.3518945,1.031029 0.015625,1.398438 l 0.2890625,0.289062 -0.1640625,0.167969 c -0.1940263,0.194049 -0.3312306,0.444035 -0.3574219,0.730469 -0.026191,0.286433 0.082836,0.602331 0.3027344,0.822265 0.2199669,0.219905 0.5630302,0.325807 0.84375,0.273438 0.2807198,-0.05237 0.4907236,-0.203587 0.6621093,-0.375 L 13.003906,11.896484 C 14.40572,12.59862 16.0549,12.487976 17.123047,11.419922 18.511821,10.031028 18.283868,7.6569034 16.751953,6.125 15.986,5.3590578 15.009306,4.9188574 14.050781,4.84375 c -0.119815,-0.00939 -0.238607,-0.01384 -0.357422,-0.011719 z m 0.111329,1.7011719 c 0.064,9.655e-4 0.128025,0.00455 0.193359,0.011719 0.522674,0.05732 1.080601,0.3130273 1.550781,0.7832031 0.940357,0.9403487 1.026123,2.2336423 0.371094,2.888672 C 15.26488,10.871761 13.971607,10.786061 13.03125,9.8457031 12.090894,8.905364 12.005137,7.6120286 12.660156,6.9570312 12.946738,6.670459 13.356711,6.5264448 13.804688,6.5332031 Z M 22,11 A 11,11 0 0 1 11,22 11,11 0 0 1 0,11 11,11 0 0 1 11,0 11,11 0 0 1 22,11 Z" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.5 KiB |
Reference in New Issue
Block a user