From 825a0af4a9dda1d2938cb5824302f8e24bc6acc0 Mon Sep 17 00:00:00 2001 From: Kerry Date: Mon, 29 Aug 2022 12:48:00 +0200 Subject: [PATCH] Device manager - device type and verification icons on device tile (PSG-637) (#9197) * add unknown device icon * add device type and verification icon component * test * stylelint * fix securitycard spacing Co-authored-by: Travis Ralston --- res/css/_components.pcss | 1 + .../settings/devices/_DeviceSecurityCard.pcss | 4 ++ .../views/settings/devices/_DeviceType.pcss | 66 +++++++++++++++++ res/css/views/settings/_DevicesPanel.pcss | 6 ++ .../element-icons/settings/unknown-device.svg | 3 + .../settings/devices/DeviceSecurityCard.tsx | 4 +- .../views/settings/devices/DeviceTile.tsx | 2 + .../views/settings/devices/DeviceType.tsx | 56 +++++++++++++++ src/i18n/strings/en_EN.json | 1 + .../__snapshots__/DevicesPanel-test.tsx.snap | 42 +++++++++++ .../settings/devices/DeviceType-test.tsx | 44 ++++++++++++ .../CurrentDeviceSection-test.tsx.snap | 28 ++++++++ .../DeviceSecurityCard-test.tsx.snap | 8 ++- .../__snapshots__/DeviceTile-test.tsx.snap | 56 +++++++++++++++ .../__snapshots__/DeviceType-test.tsx.snap | 58 +++++++++++++++ .../SecurityRecommendations-test.tsx.snap | 72 ++++++++++++------- .../SelectableDeviceTile-test.tsx.snap | 14 ++++ .../SessionManagerTab-test.tsx.snap | 42 +++++++++++ 18 files changed, 480 insertions(+), 27 deletions(-) create mode 100644 res/css/components/views/settings/devices/_DeviceType.pcss create mode 100644 res/img/element-icons/settings/unknown-device.svg create mode 100644 src/components/views/settings/devices/DeviceType.tsx create mode 100644 test/components/views/settings/devices/DeviceType-test.tsx create mode 100644 test/components/views/settings/devices/__snapshots__/DeviceType-test.tsx.snap diff --git a/res/css/_components.pcss b/res/css/_components.pcss index 3f23e6de572..e7f94c3ad79 100644 --- a/res/css/_components.pcss +++ b/res/css/_components.pcss @@ -31,6 +31,7 @@ @import "./components/views/settings/devices/_DeviceExpandDetailsButton.pcss"; @import "./components/views/settings/devices/_DeviceSecurityCard.pcss"; @import "./components/views/settings/devices/_DeviceTile.pcss"; +@import "./components/views/settings/devices/_DeviceType.pcss"; @import "./components/views/settings/devices/_FilteredDeviceList.pcss"; @import "./components/views/settings/devices/_SecurityRecommendations.pcss"; @import "./components/views/settings/devices/_SelectableDeviceTile.pcss"; diff --git a/res/css/components/views/settings/devices/_DeviceSecurityCard.pcss b/res/css/components/views/settings/devices/_DeviceSecurityCard.pcss index 2c267b43144..c2a0d5bb780 100644 --- a/res/css/components/views/settings/devices/_DeviceSecurityCard.pcss +++ b/res/css/components/views/settings/devices/_DeviceSecurityCard.pcss @@ -68,3 +68,7 @@ limitations under the License. font-size: $font-12px; color: $secondary-content; } + +.mx_DeviceSecurityCard_actions { + margin-top: $spacing-16; +} diff --git a/res/css/components/views/settings/devices/_DeviceType.pcss b/res/css/components/views/settings/devices/_DeviceType.pcss new file mode 100644 index 00000000000..66372bbdea0 --- /dev/null +++ b/res/css/components/views/settings/devices/_DeviceType.pcss @@ -0,0 +1,66 @@ +/* +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_DeviceType { + flex: 0 0 auto; + position: relative; + margin-right: $spacing-8; + /* creates space for verification icon to overlap */ + padding: 0 $spacing-8 $spacing-8 0; +} + +.mx_DeviceType_deviceIcon { + --background-color: $system; + --icon-color: $secondary-content; + + height: 40px; + width: 40px; + box-sizing: border-box; + + border: $spacing-8 solid var(--background-color); + border-radius: 50%; + color: var(--icon-color); + background-color: var(--background-color); +} + +.mx_DeviceType_selected .mx_DeviceType_deviceIcon { + --background-color: $primary-content; + --icon-color: $background; +} + +.mx_DeviceType_verificationIcon { + position: absolute; + bottom: 0; + right: 0; + height: 24px; + width: 24px; + box-sizing: border-box; + padding: $spacing-4; + + border: 1px solid $system; + border-radius: 50%; + background-color: $background; + + color: var(--v-icon-color); + + &.verified { + --v-icon-color: $e2e-verified-color; + } + + &.unverified { + --v-icon-color: $e2e-warning-color; + } +} diff --git a/res/css/views/settings/_DevicesPanel.pcss b/res/css/views/settings/_DevicesPanel.pcss index 8581225cee8..23a737c9779 100644 --- a/res/css/views/settings/_DevicesPanel.pcss +++ b/res/css/views/settings/_DevicesPanel.pcss @@ -57,6 +57,12 @@ limitations under the License. margin-block: 10px; min-height: 35px; padding: 0 $spacing-8; + + .mx_DeviceType { + /* hide the new device type in legacy device list + for backwards compat reasons */ + display: none; + } } .mx_DevicesPanel_icon { diff --git a/res/img/element-icons/settings/unknown-device.svg b/res/img/element-icons/settings/unknown-device.svg new file mode 100644 index 00000000000..c02c2eadf50 --- /dev/null +++ b/res/img/element-icons/settings/unknown-device.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/components/views/settings/devices/DeviceSecurityCard.tsx b/src/components/views/settings/devices/DeviceSecurityCard.tsx index 01fe4888821..3e4eadb3229 100644 --- a/src/components/views/settings/devices/DeviceSecurityCard.tsx +++ b/src/components/views/settings/devices/DeviceSecurityCard.tsx @@ -47,7 +47,9 @@ const DeviceSecurityCard: React.FC = ({ variation, heading, description,

{ heading }

{ description }

- { children } + { !!children &&
+ { children } +
}
; }; diff --git a/src/components/views/settings/devices/DeviceTile.tsx b/src/components/views/settings/devices/DeviceTile.tsx index c791d2cd259..73ee17b2f4a 100644 --- a/src/components/views/settings/devices/DeviceTile.tsx +++ b/src/components/views/settings/devices/DeviceTile.tsx @@ -24,6 +24,7 @@ import { Alignment } from "../../elements/Tooltip"; import Heading from "../../typography/Heading"; import { INACTIVE_DEVICE_AGE_DAYS, isDeviceInactive } from "./filter"; import { DeviceWithVerification } from "./types"; +import { DeviceType } from "./DeviceType"; export interface DeviceTileProps { device: DeviceWithVerification; children?: React.ReactNode; @@ -93,6 +94,7 @@ const DeviceTile: React.FC = ({ device, children, onClick }) => ]; return
+
diff --git a/src/components/views/settings/devices/DeviceType.tsx b/src/components/views/settings/devices/DeviceType.tsx new file mode 100644 index 00000000000..a0fbe75c565 --- /dev/null +++ b/src/components/views/settings/devices/DeviceType.tsx @@ -0,0 +1,56 @@ +/* +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. +*/ + +import React from 'react'; +import classNames from 'classnames'; + +import { Icon as UnknownDeviceIcon } from '../../../../../res/img/element-icons/settings/unknown-device.svg'; +import { Icon as VerifiedIcon } from '../../../../../res/img/e2e/verified.svg'; +import { Icon as UnverifiedIcon } from '../../../../../res/img/e2e/warning.svg'; +import { _t } from '../../../../languageHandler'; +import { DeviceWithVerification } from './types'; + +interface Props { + isVerified?: DeviceWithVerification['isVerified']; + isSelected?: boolean; +} + +export const DeviceType: React.FC = ({ isVerified, isSelected }) => ( +
+ { /* TODO(kerrya) all devices have an unknown type until PSG-650 */ } + + { + isVerified + ? + : + } +
); + diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json index 5135e51da88..ae602ac216c 100644 --- a/src/i18n/strings/en_EN.json +++ b/src/i18n/strings/en_EN.json @@ -1712,6 +1712,7 @@ "Inactive for %(inactiveAgeDays)s+ days": "Inactive for %(inactiveAgeDays)s+ days", "Verified": "Verified", "Unverified": "Unverified", + "Unknown device type": "Unknown device type", "Verified session": "Verified session", "This session is ready for secure messaging.": "This session is ready for secure messaging.", "Unverified session": "Unverified session", diff --git a/test/components/views/settings/__snapshots__/DevicesPanel-test.tsx.snap b/test/components/views/settings/__snapshots__/DevicesPanel-test.tsx.snap index b0a056b10f9..f0c569a82f1 100644 --- a/test/components/views/settings/__snapshots__/DevicesPanel-test.tsx.snap +++ b/test/components/views/settings/__snapshots__/DevicesPanel-test.tsx.snap @@ -111,6 +111,20 @@ exports[` renders device panel with devices 1`] = ` class="mx_DeviceTile" data-testid="device-tile-device_1" > +
+