OpenCloud
/
element-web
mirror of https://github.com/vector-im/element-web
1
0
Fork 0
Code Issues Releases Wiki Activity

Device manager - design tweaks (#9768) 

* hover style on dropdown

* hover states

* device details spacing

* device details h3 -> h4

* missing fullstops

* update snapshots for new copy

* device details expand icon bigger

* hide current session security card when details expanded

* filter dropdown padding and hover state

* update cypress selector for device detail heading
pull/28788/head^2
Kerry 2022-12-20 14:17:05 +13:00 committed by GitHub
parent 2152f2ab8b
commit 0485b74acb
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
16 changed files with 76 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
cypress/e2e/settings/device-management.spec.ts
View File

@ -104,7 +104,7 @@ describe("Device manager", () => {
cy.get(".mx_Spinner").should("not.exist");
// session name updated in details
cy.get(".mx_DeviceDetailHeading h3").should("have.text", sessionName);
cy.get(".mx_DeviceDetailHeading h4").should("have.text", sessionName);
// and main list item
cy.get(".mx_DeviceTile h4").should("have.text", sessionName);

13
res/css/components/views/elements/_FilterDropdown.pcss
View File

@ -20,24 +20,29 @@ limitations under the License.
left: unset;
right: -$spacing-12;
width: 232px;
padding: $spacing-12;
border: 1px solid $quinary-content;
border-radius: 8px;
box-shadow: 0px 1px 3px rgba(23, 25, 28, 0.05);
.mx_Dropdown_option_highlight {
background-color: $system;
.mx_Dropdown_option_highlight {
background-color: transparent;
}
}
.mx_Dropdown_input {
height: 24px;
background-color: $quinary-content;
border-color: $quinary-content;
background-color: transparent;
border-color: transparent;
color: $secondary-content;
border-radius: 4px;
&:focus {
&:focus,
&:hover {
background-color: $quinary-content;
border-color: $quinary-content;
}
}

9
res/css/components/views/settings/devices/_DeviceDetails.pcss
View File

@ -22,18 +22,18 @@ limitations under the License.
width: 100%;
margin-top: $spacing-16;
padding: $spacing-16;
padding: $spacing-24;
border-radius: 8px;
border: 1px solid $quinary-content;
}
.mx_DeviceDetails_section {
padding-bottom: $spacing-16;
margin-bottom: $spacing-16;
padding-bottom: $spacing-20;
margin-bottom: $spacing-20;
border-bottom: 1px solid $quinary-content;
display: grid;
grid-gap: $spacing-16;
grid-gap: $spacing-24;
justify-content: left;
grid-template-columns: 100%;
@ -52,6 +52,7 @@ limitations under the License.
font-size: $font-12px;
color: $secondary-content;
line-height: $font-14px;
margin-top: $spacing-4;
}
}

12
res/css/components/views/settings/devices/_DeviceExpandDetailsButton.pcss
View File

@ -23,17 +23,25 @@ limitations under the License.
color: $secondary-content;
--icon-transform: rotate(-90deg);
&:hover {
background: $quinary-content;
}
}
.mx_DeviceExpandDetailsButton.mx_DeviceExpandDetailsButton_expanded {
--icon-transform: rotate(0deg);
background: $system;
&:hover {
background: $quinary-content;
}
}
.mx_DeviceExpandDetailsButton_icon {
height: 12px;
width: 12px;
height: 16px;
width: 16px;
transition: all 0.3s;
transform: var(--icon-transform);

2
res/css/components/views/settings/devices/_DeviceTypeIcon.pcss
View File

@ -55,7 +55,7 @@ limitations under the License.
box-sizing: border-box;
padding: $spacing-4;
border: 1px solid $system;
border: 1px solid $quinary-content;
border-radius: 50%;
background-color: $background;

2
res/css/components/views/settings/shared/_SettingsSubsection.pcss
View File

@ -23,7 +23,7 @@ limitations under the License.
width: 100%;
box-sizing: inherit;
line-height: $font-24px;
margin-bottom: $spacing-32;
margin-bottom: $spacing-24;
color: $secondary-content;
}

7
src/components/views/settings/devices/CurrentDeviceSection.tsx
View File

@ -115,7 +115,7 @@ const CurrentDeviceSection: React.FC<Props> = ({
onClick={() => setIsExpanded(!isExpanded)}
/>
</DeviceTile>
{isExpanded && (
{isExpanded ? (
<DeviceDetails
device={device}
localNotificationSettings={localNotificationSettings}
@ -125,11 +125,14 @@ const CurrentDeviceSection: React.FC<Props> = ({
onSignOutDevice={onSignOutCurrentDevice}
saveDeviceName={saveDeviceName}
/>
)}
) : (
<>
<br />
<DeviceVerificationStatusCard device={device} onVerifyDevice={onVerifyCurrentDevice} />
</>
)}
</>
)}
</SettingsSubsection>
);
};

2
src/components/views/settings/devices/DeviceDetailHeading.tsx
View File

@ -134,7 +134,7 @@ export const DeviceDetailHeading: React.FC<Props> = ({ device, saveDeviceName })
<DeviceNameEditor device={device} saveDeviceName={saveDeviceName} stopEditing={() => setIsEditing(false)} />
) : (
<div className="mx_DeviceDetailHeading" data-testid="device-detail-heading">
<Heading size="h3">{device.display_name || device.device_id}</Heading>
<Heading size="h4">{device.display_name || device.device_id}</Heading>
<AccessibleButton
kind="link_inline"
onClick={() => setIsEditing(true)}

2
src/components/views/settings/devices/FilteredDeviceListHeader.tsx
View File

@ -50,7 +50,7 @@ const FilteredDeviceListHeader: React.FC<Props> = ({
</TooltipTarget>
<span className="mx_FilteredDeviceListHeader_label">
{selectedDeviceCount > 0
? _t("%(selectedDeviceCount)s sessions selected", { selectedDeviceCount })
? _t("%(count)s sessions selected", { count: selectedDeviceCount })
: _t("Sessions")}
</span>
{children}

4
src/components/views/settings/devices/SecurityRecommendations.tsx
View File

@ -53,7 +53,7 @@ const SecurityRecommendations: React.FC<Props> = ({ devices, currentDeviceId, go
return (
<SettingsSubsection
heading={_t("Security recommendations")}
description={_t("Improve your account security by following these recommendations")}
description={_t("Improve your account security by following these recommendations.")}
data-testid="security-recommendations-section"
>
{!!unverifiedDevicesCount && (
@ -89,7 +89,7 @@ const SecurityRecommendations: React.FC<Props> = ({ devices, currentDeviceId, go
<>
{_t(
`Consider signing out from old sessions ` +
`(%(inactiveAgeDays)s days or older) you don't use anymore`,
`(%(inactiveAgeDays)s days or older) you don't use anymore.`,
{ inactiveAgeDays },
)}
<DeviceSecurityLearnMore variation={DeviceSecurityVariation.Inactive} />

6
src/i18n/strings/en_EN.json
View File

@ -1835,14 +1835,14 @@
"Inactive for %(inactiveAgeDays)s days or longer": "Inactive for %(inactiveAgeDays)s days or longer",
"Filter devices": "Filter devices",
"Show": "Show",
"%(selectedDeviceCount)s sessions selected": "%(selectedDeviceCount)s sessions selected",
"%(count)s sessions selected|other": "%(count)s sessions selected",
"%(count)s sessions selected|one": "%(count)s session selected",
"Sign in with QR code": "Sign in with QR code",
"You can use this device to sign in a new device with a QR code. You will need to scan the QR code shown on this device with your device that's signed out.": "You can use this device to sign in a new device with a QR code. You will need to scan the QR code shown on this device with your device that's signed out.",
"Show QR code": "Show QR code",
"Security recommendations": "Security recommendations",
"Improve your account security by following these recommendations": "Improve your account security by following these recommendations",
"Improve your account security by following these recommendations.": "Improve your account security by following these recommendations.",
"View all": "View all",
"Consider signing out from old sessions (%(inactiveAgeDays)s days or older) you don't use anymore": "Consider signing out from old sessions (%(inactiveAgeDays)s days or older) you don't use anymore",
"Failed to set pusher state": "Failed to set pusher state",
"Unable to remove contact information": "Unable to remove contact information",
"Remove %(email)s?": "Remove %(email)s?",

6
test/components/views/settings/devices/__snapshots__/CurrentDeviceSection-test.tsx.snap
View File

@ -13,11 +13,11 @@ HTMLCollection [
class="mx_DeviceDetailHeading"
data-testid="device-detail-heading"
>
<h3
class="mx_Heading_h3"
<h4
class="mx_Heading_h4"
>
alices_device
</h3>
</h4>
<div
class="mx_AccessibleButton mx_DeviceDetailHeading_renameCta mx_AccessibleButton_hasKind mx_AccessibleButton_kind_link_inline"
data-testid="device-heading-rename-cta"

6
test/components/views/settings/devices/__snapshots__/DeviceDetailHeading-test.tsx.snap
View File

@ -78,11 +78,11 @@ exports[`<DeviceDetailHeading /> renders device name 1`] = `
class="mx_DeviceDetailHeading"
data-testid="device-detail-heading"
>
<h3
class="mx_Heading_h3"
<h4
class="mx_Heading_h4"
>
My device
</h3>
</h4>
<div
class="mx_AccessibleButton mx_DeviceDetailHeading_renameCta mx_AccessibleButton_hasKind mx_AccessibleButton_kind_link_inline"
data-testid="device-heading-rename-cta"

18
test/components/views/settings/devices/__snapshots__/DeviceDetails-test.tsx.snap
View File

@ -13,11 +13,11 @@ exports[`<DeviceDetails /> renders a verified device 1`] = `
class="mx_DeviceDetailHeading"
data-testid="device-detail-heading"
>
<h3
class="mx_Heading_h3"
<h4
class="mx_Heading_h4"
>
my-device
</h3>
</h4>
<div
class="mx_AccessibleButton mx_DeviceDetailHeading_renameCta mx_AccessibleButton_hasKind mx_AccessibleButton_kind_link_inline"
data-testid="device-heading-rename-cta"
@ -122,11 +122,11 @@ exports[`<DeviceDetails /> renders device with metadata 1`] = `
class="mx_DeviceDetailHeading"
data-testid="device-detail-heading"
>
<h3
class="mx_Heading_h3"
<h4
class="mx_Heading_h4"
>
My Device
</h3>
</h4>
<div
class="mx_AccessibleButton mx_DeviceDetailHeading_renameCta mx_AccessibleButton_hasKind mx_AccessibleButton_kind_link_inline"
data-testid="device-heading-rename-cta"
@ -331,11 +331,11 @@ exports[`<DeviceDetails /> renders device without metadata 1`] = `
class="mx_DeviceDetailHeading"
data-testid="device-detail-heading"
>
<h3
class="mx_Heading_h3"
<h4
class="mx_Heading_h4"
>
my-device
</h3>
</h4>
<div
class="mx_AccessibleButton mx_DeviceDetailHeading_renameCta mx_AccessibleButton_hasKind mx_AccessibleButton_kind_link_inline"
data-testid="device-heading-rename-cta"

12
test/components/views/settings/devices/__snapshots__/SecurityRecommendations-test.tsx.snap
View File

@ -18,7 +18,7 @@ exports[`<SecurityRecommendations /> renders both cards when user has both unver
<div
class="mx_SettingsSubsection_description"
>
Improve your account security by following these recommendations
Improve your account security by following these recommendations.
</div>
<div
class="mx_SettingsSubsection_content"
@ -93,7 +93,7 @@ exports[`<SecurityRecommendations /> renders both cards when user has both unver
<p
class="mx_DeviceSecurityCard_description"
>
Consider signing out from old sessions (90 days or older) you don't use anymore
Consider signing out from old sessions (90 days or older) you don't use anymore.
<div
class="mx_AccessibleButton mx_LearnMore_button mx_AccessibleButton_hasKind mx_AccessibleButton_kind_link_inline"
role="button"
@ -139,7 +139,7 @@ exports[`<SecurityRecommendations /> renders inactive devices section when user
<div
class="mx_SettingsSubsection_description"
>
Improve your account security by following these recommendations
Improve your account security by following these recommendations.
</div>
<div
class="mx_SettingsSubsection_content"
@ -214,7 +214,7 @@ exports[`<SecurityRecommendations /> renders inactive devices section when user
<p
class="mx_DeviceSecurityCard_description"
>
Consider signing out from old sessions (90 days or older) you don't use anymore
Consider signing out from old sessions (90 days or older) you don't use anymore.
<div
class="mx_AccessibleButton mx_LearnMore_button mx_AccessibleButton_hasKind mx_AccessibleButton_kind_link_inline"
role="button"
@ -260,7 +260,7 @@ exports[`<SecurityRecommendations /> renders unverified devices section when use
<div
class="mx_SettingsSubsection_description"
>
Improve your account security by following these recommendations
Improve your account security by following these recommendations.
</div>
<div
class="mx_SettingsSubsection_content"
@ -335,7 +335,7 @@ exports[`<SecurityRecommendations /> renders unverified devices section when use
<p
class="mx_DeviceSecurityCard_description"
>
Consider signing out from old sessions (90 days or older) you don't use anymore
Consider signing out from old sessions (90 days or older) you don't use anymore.
<div
class="mx_AccessibleButton mx_LearnMore_button mx_AccessibleButton_hasKind mx_AccessibleButton_kind_link_inline"
role="button"

15
test/components/views/settings/tabs/user/SessionManagerTab-test.tsx
View File

@ -420,6 +420,21 @@ describe("<SessionManagerTab />", () => {
expect(getByTestId("current-session-section")).toMatchSnapshot();
});
it("expands current session details", async () => {
mockClient.getDevices.mockResolvedValue({ devices: [alicesDevice, alicesMobileDevice] });
const { getByTestId } = render(getComponent());
await act(async () => {
await flushPromises();
});
fireEvent.click(getByTestId("current-session-toggle-details"));
expect(getByTestId(`device-detail-${alicesDevice.device_id}`)).toBeTruthy();
// only one security card rendered
expect(getByTestId("current-session-section").querySelectorAll(".mx_DeviceSecurityCard").length).toEqual(1);
});
});
describe("device detail expansion", () => {