From e7cb6ffad3e33dc331ea4440927c8ed6f39eee8e Mon Sep 17 00:00:00 2001 From: kurilova Date: Thu, 16 Jan 2025 14:50:12 +0000 Subject: [PATCH] Disable 3 dots menu for device under test; adds status for device under test --- .../device-item/device-item.component.html | 22 ++++++++-- .../device-item/device-item.component.scss | 41 +++++++++++++------ .../device-item/device-item.component.spec.ts | 15 +++++++ .../device-tests/device-tests.component.scss | 4 +- .../program-type-icon.component.ts | 2 - .../app/pages/devices/devices.component.html | 1 + .../app/pages/devices/devices.component.scss | 9 ++++ modules/ui/src/theming/mixins.scss | 5 +++ 8 files changed, 80 insertions(+), 19 deletions(-) diff --git a/modules/ui/src/app/components/device-item/device-item.component.html b/modules/ui/src/app/components/device-item/device-item.component.html index f98a6e1d4..7b728b33c 100644 --- a/modules/ui/src/app/components/device-item/device-item.component.html +++ b/modules/ui/src/app/components/device-item/device-item.component.html @@ -51,16 +51,27 @@

{{ device.manufacturer }}

+ + error +

{{ device.manufacturer }}

-
+
{{ INVALID_DEVICE }}
+
+ Under test +

{{ device.model }}

diff --git a/modules/ui/src/app/components/device-item/device-item.component.scss b/modules/ui/src/app/components/device-item/device-item.component.scss index 3c1ca8c0a..9e33c3908 100644 --- a/modules/ui/src/app/components/device-item/device-item.component.scss +++ b/modules/ui/src/app/components/device-item/device-item.component.scss @@ -17,6 +17,7 @@ @use 'm3-theme' as *; @use 'colors'; @use 'variables'; +@use 'mixins'; $icon-width: 80px; $border-radius: 12px; @@ -81,7 +82,7 @@ $border-radius: 12px; width: 100%; height: 100%; background: inherit; - grid-template-columns: auto 1fr 1fr; + grid-template-columns: auto auto 1fr; grid-template-areas: 'icon manufacturer status' 'icon name name'; @@ -90,31 +91,39 @@ $border-radius: 12px; cursor: pointer; .item-manufacturer-icon { + position: absolute; + right: 0; visibility: visible; width: 24px; } } &:disabled { - pointer-events: none; - opacity: 0.5; + @include mixins.disabled; } } .item-status { - margin-right: 16px; grid-area: status; - justify-self: end; - align-self: end; - font-size: 8px; + justify-self: start; + align-self: center; + font-size: 11px; + font-weight: 500; line-height: 16px; letter-spacing: 0.64px; text-transform: uppercase; max-width: 100%; - border-radius: 2px; - background: colors.$red-700; - color: colors.$white; - padding: 0px 4px; + border-radius: 200px; + padding: 0 7px; + margin-left: -20px; + &-under-test { + background: colors.$on-secondary-container; + color: colors.$on-secondary; + } + &-invalid { + background: colors.$on-error; + color: colors.$on-error-container; + } } .item-manufacturer { @@ -128,6 +137,8 @@ $border-radius: 12px; font-weight: 500; line-height: 24px; text-align: start; + position: relative; + padding-right: variables.$icon-size; .item-manufacturer-text { margin: 0; @@ -165,10 +176,16 @@ $border-radius: 12px; margin: 0; } -app-program-type-icon { +app-program-type-icon, +mat-icon { grid-area: icon; } .device-item-outdated { height: 100%; + .item-manufacturer, + .item-name, + mat-icon { + color: colors.$on-error-container; + } } diff --git a/modules/ui/src/app/components/device-item/device-item.component.spec.ts b/modules/ui/src/app/components/device-item/device-item.component.spec.ts index 431a6d4c6..350fa7548 100644 --- a/modules/ui/src/app/components/device-item/device-item.component.spec.ts +++ b/modules/ui/src/app/components/device-item/device-item.component.spec.ts @@ -120,6 +120,21 @@ describe('DeviceItemComponent', () => { expect(status).toBeTruthy(); expect(status?.textContent?.trim()).toEqual('Outdated'); }); + + it('should have error icon', () => { + const icon = compiled.querySelector('mat-icon')?.textContent?.trim(); + + expect(icon).toEqual('error'); + }); + }); + + it('should have item status as Under test', () => { + component.disabled = true; + fixture.detectChanges(); + const status = compiled.querySelector('.item-status'); + + expect(status).toBeTruthy(); + expect(status?.textContent?.trim()).toEqual('Under test'); }); it('should emit device on click edit button', () => { diff --git a/modules/ui/src/app/components/device-tests/device-tests.component.scss b/modules/ui/src/app/components/device-tests/device-tests.component.scss index d0ea57461..cb3aac3b5 100644 --- a/modules/ui/src/app/components/device-tests/device-tests.component.scss +++ b/modules/ui/src/app/components/device-tests/device-tests.component.scss @@ -15,6 +15,7 @@ */ @use 'colors'; @use 'variables'; +@use 'mixins'; :host { overflow: hidden; @@ -27,8 +28,7 @@ } .disabled { - pointer-events: none; - opacity: 0.6; + @include mixins.disabled; } .device-tests-title { diff --git a/modules/ui/src/app/components/program-type-icon/program-type-icon.component.ts b/modules/ui/src/app/components/program-type-icon/program-type-icon.component.ts index 449bb4225..4066d98e0 100644 --- a/modules/ui/src/app/components/program-type-icon/program-type-icon.component.ts +++ b/modules/ui/src/app/components/program-type-icon/program-type-icon.component.ts @@ -28,8 +28,6 @@ import { MatIcon } from '@angular/material/icon'; } .icon { display: flex; - width: 16px; - height: 16px; line-height: 16px; } `, diff --git a/modules/ui/src/app/pages/devices/devices.component.html b/modules/ui/src/app/pages/devices/devices.component.html index f971834e3..f484daf87 100644 --- a/modules/ui/src/app/pages/devices/devices.component.html +++ b/modules/ui/src/app/pages/devices/devices.component.html @@ -67,6 +67,7 @@