Skip to content
This repository has been archived by the owner on Sep 11, 2024. It is now read-only.

Improve device list in Security & Privacy settings #7004

Merged
merged 9 commits into from
Oct 29, 2021
Merged

Improve device list in Security & Privacy settings #7004

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
07635d4
Implement device trust view in user settings
duxovni Oct 21, 2021
ead6a85
Merge branch 'develop' into fayed/device-trust-view
duxovni Oct 21, 2021
b804311
restore translations trashed during merge
duxovni Oct 22, 2021
aa951a7
Make 'Last seen' string translateable
duxovni Oct 22, 2021
18b023f
Bring back multi-select
duxovni Oct 28, 2021
3558ebf
Bulk unverified sessions toast should direct to this device list now
duxovni Oct 28, 2021
9da5f47
Only show "Select all" button if there are multiple devices in a section
duxovni Oct 28, 2021
587721e
Design review feedback
duxovni Oct 29, 2021
03cdd0e
Final design tweaks
duxovni Oct 29, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
40 changes: 40 additions & 0 deletions res/css/views/elements/_AccessibleButton.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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%;
}
}
55 changes: 34 additions & 21 deletions res/css/views/settings/_DevicesPanel.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,42 +15,55 @@ 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;
}

.mx_DevicesPanel_header {
font-weight: bold;
font-size: $font-18px;
font-weight: 600;
color: $primary-content;
margin-block: 10px;
}

.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_deleteOthersButton {
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_device .mx_DevicesPanel_deviceInfo {
flex-grow: 1;
}

.mx_DevicesPanel_header .mx_DevicesPanel_deviceLastSeen {
width: 30%;
.mx_DevicesPanel_deviceName {
font-weight: bold;
color: $primary-content;
}

.mx_DevicesPanel_device td {
vertical-align: baseline;
padding: 0px;
.mx_DevicesPanel_lastSeen {
font-size: $font-12px;
}

.mx_DevicesPanel_myDevice {
font-weight: bold;
.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;
}
}
12 changes: 8 additions & 4 deletions src/components/structures/auth/SetupEncryptionBody.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@ function keyHasPassphrase(keyInfo: ISecretStorageKeyInfo): boolean {
}

interface IProps {
onFinished: (boolean) => void;
onFinished: () => void;
}

interface IState {
Expand Down Expand Up @@ -70,7 +70,7 @@ export default class SetupEncryptionBody extends React.Component<IProps, IState>
private onStoreUpdate = () => {
const store = SetupEncryptionStore.sharedInstance();
if (store.phase === Phase.Finished) {
this.props.onFinished(true);
this.props.onFinished();
return;
}
this.setState({
Expand All @@ -97,13 +97,16 @@ export default class SetupEncryptionBody extends React.Component<IProps, IState>
const userId = cli.getUserId();
const requestPromise = cli.requestVerification(userId);

this.props.onFinished(true);
// We need to call onFinished now to close this dialog, and
// again later to signal that the verification is complete.
this.props.onFinished();
Modal.createTrackedDialog('New Session Verification', 'Starting dialog', VerificationRequestDialog, {
verificationRequestPromise: requestPromise,
member: cli.getUser(userId),
onFinished: async () => {
const request = await requestPromise;
request.cancel();
this.props.onFinished();
},
});
};
Expand All @@ -125,6 +128,7 @@ export default class SetupEncryptionBody extends React.Component<IProps, IState>
};

private onResetConfirmClick = () => {
this.props.onFinished();
const store = SetupEncryptionStore.sharedInstance();
store.resetConfirm();
};
Expand All @@ -140,7 +144,7 @@ export default class SetupEncryptionBody extends React.Component<IProps, IState>
};

private onEncryptionPanelClose = () => {
this.props.onFinished(false);
this.props.onFinished();
};

public render() {
Expand Down
Loading