imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Improve device list in Security & Privacy settings (#7004)

Browse source 
Overhaul the device list in the "Security and Privacy" settings tab to include device trust status, provide buttons for verifying unverified devices, and improve overall usability and style. This should now be the primary interface for checking and changing the trust status of your own devices, rather than looking at your own user profile in the right panel.
This commit is contained in:
Faye Duxovni 2021-10-29 18:11:39 -04:00 • committed by GitHub
parent ea54ea89d4
commit d88b8efd19
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
8 changed files with 489 additions and 130 deletions
Download patch file Download diff file Expand all files Collapse all files

40
res/css/views/elements/_AccessibleButton.scss
View file

@ -115,3 +115,43 @@ limitations under the License.
.mx_AccessibleButton_kind_link_sm.mx_AccessibleButton_disabled {
opacity: 0.4;
}
.mx_AccessibleButton_hasKind.mx_AccessibleButton_kind_confirm_sm {
background-color: $button-primary-bg-color;
&::before {
mask-image: url('$(res)/img/feather-customised/check.svg');
}
}
.mx_AccessibleButton_hasKind.mx_AccessibleButton_kind_cancel_sm {
background-color: $button-danger-bg-color;
&::before {
mask-image: url('$(res)/img/feather-customised/x.svg');
}
}
.mx_AccessibleButton_kind_confirm_sm,
.mx_AccessibleButton_kind_cancel_sm {
padding: 0px;
width: 16px;
height: 16px;
border-radius: 100%;
position: relative;
display: block;
&::before {
content: "";
display: block;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: #ffffff;
mask-repeat: no-repeat;
mask-position: center;
mask-size: 80%;
}
}

81
res/css/views/settings/_DevicesPanel.scss
View file

@ -15,42 +15,81 @@ limitations under the License.
*/
.mx_DevicesPanel {
table-layout: fixed;
// Normally the panel is 880px, however this can easily overflow the container.
// TODO: Fix the table to not be squishy
width: auto;
max-width: 880px;
border-spacing: 10px;
hr {
opacity: 0.2;
border: none;
border-bottom: 1px solid $primary-content;
}
}
.mx_DevicesPanel_header {
font-weight: bold;
display: flex;
align-items: center;
margin-block: 10px;
.mx_DevicesPanel_header_title {
font-size: $font-18px;
font-weight: 600;
color: $primary-content;
}
.mx_DevicesPanel_selectButton {
padding-top: 9px;
}
.mx_E2EIcon {
width: 24px;
height: 24px;
margin-left: 0;
margin-right: 5px;
}
}
.mx_DevicesPanel_header .mx_DevicesPanel_deviceButtons {
height: 48px; // make this tall so the table doesn't move down when the delete button appears
width: 20%;
.mx_DevicesPanel_deleteButton {
margin-top: 10px;
}
.mx_DevicesPanel_header th {
padding: 0px;
text-align: left;
vertical-align: middle;
.mx_DevicesPanel_device {
display: flex;
align-items: flex-start;
margin-block: 10px;
min-height: 35px;
}
.mx_DevicesPanel_header .mx_DevicesPanel_deviceName {
width: 50%;
.mx_DevicesPanel_icon, .mx_DevicesPanel_checkbox {
margin-left: 9px;
margin-top: 2px;
}
.mx_DevicesPanel_header .mx_DevicesPanel_deviceLastSeen {
width: 30%;
.mx_DevicesPanel_deviceInfo {
flex-grow: 1;
}
.mx_DevicesPanel_device td {
vertical-align: baseline;
padding: 0px;
.mx_DevicesPanel_deviceName {
color: $primary-content;
}
.mx_DevicesPanel_myDevice {
font-weight: bold;
.mx_DevicesPanel_lastSeen {
font-size: $font-12px;
}
.mx_DevicesPanel_deviceButtons {
flex-shrink: 0;
display: flex;
align-items: center;
gap: 9px;
}
.mx_DevicesPanel_renameForm {
display: flex;
align-items: center;
gap: 5px;
.mx_Field_input {
width: 240px;
margin: 0;
}
}