From 159e9af5ce78e5f955ddc9d052e61bf13bf48e0a Mon Sep 17 00:00:00 2001 From: kurilova Date: Fri, 20 Dec 2024 10:05:32 +0000 Subject: [PATCH 1/2] Change empty state for Devices page --- .../empty-message.component.html | 11 ++++-- .../empty-message.component.scss | 30 ++++++++++++++- .../empty-message/empty-message.component.ts | 4 +- .../empty-page/empty-page.component.html | 7 ++++ .../empty-page/empty-page.component.spec.ts | 22 +++++++++++ .../empty-page/empty-page.component.ts | 13 +++++++ .../list-layout/list-layout.component.html | 7 ++++ .../list-layout/list-layout.component.scss | 20 ++++++++++ .../list-layout/list-layout.component.spec.ts | 22 +++++++++++ .../list-layout/list-layout.component.ts | 15 ++++++++ .../app/pages/devices/devices.component.html | 17 ++++++--- .../app/pages/devices/devices.component.scss | 7 ++++ .../pages/devices/devices.component.spec.ts | 4 +- .../app/pages/devices/devices.component.ts | 4 ++ modules/ui/src/assets/icons/empty-devices.svg | 37 +++++++++++++++++++ 15 files changed, 206 insertions(+), 14 deletions(-) create mode 100644 modules/ui/src/app/components/empty-page/empty-page.component.html create mode 100644 modules/ui/src/app/components/empty-page/empty-page.component.spec.ts create mode 100644 modules/ui/src/app/components/empty-page/empty-page.component.ts create mode 100644 modules/ui/src/app/components/list-layout/list-layout.component.html create mode 100644 modules/ui/src/app/components/list-layout/list-layout.component.scss create mode 100644 modules/ui/src/app/components/list-layout/list-layout.component.spec.ts create mode 100644 modules/ui/src/app/components/list-layout/list-layout.component.ts create mode 100644 modules/ui/src/assets/icons/empty-devices.svg diff --git a/modules/ui/src/app/components/empty-message/empty-message.component.html b/modules/ui/src/app/components/empty-message/empty-message.component.html index 022048d97..2e1549117 100644 --- a/modules/ui/src/app/components/empty-message/empty-message.component.html +++ b/modules/ui/src/app/components/empty-message/empty-message.component.html @@ -1,7 +1,12 @@ -
+
empty message image
- {{ header() }} - {{ message() }} + + {{ header() }} + {{ message() }} + +
diff --git a/modules/ui/src/app/components/empty-message/empty-message.component.scss b/modules/ui/src/app/components/empty-message/empty-message.component.scss index d42b8dadd..b623400c1 100644 --- a/modules/ui/src/app/components/empty-message/empty-message.component.scss +++ b/modules/ui/src/app/components/empty-message/empty-message.component.scss @@ -1,11 +1,36 @@ @use 'variables'; @use 'colors'; -.empty-message { +.empty-message.vertical { display: flex; flex-direction: column; align-items: center; - gap: 16px; + gap: 12px; + text-align: center; + .empty-message-main { + padding-top: 12px; + } +} + +.empty-message.horizontal { + display: grid; + grid-template-columns: auto 1fr; + align-items: end; + gap: 32px; + max-width: 764px; + .empty-message-img { + grid-row: 1 / 3; + width: 288px; + height: 199px; + justify-self: end; + } + .empty-message-text { + align-self: start; + padding-top: 12px; + } + .empty-message-main { + padding-top: 8px; + } } .empty-message-header { @@ -22,6 +47,7 @@ line-height: 24px; letter-spacing: 0.1px; color: colors.$on-surface-variant; + display: block; } .empty-message-img { diff --git a/modules/ui/src/app/components/empty-message/empty-message.component.ts b/modules/ui/src/app/components/empty-message/empty-message.component.ts index ba200eb14..2d1aee23f 100644 --- a/modules/ui/src/app/components/empty-message/empty-message.component.ts +++ b/modules/ui/src/app/components/empty-message/empty-message.component.ts @@ -1,8 +1,9 @@ import { Component, input } from '@angular/core'; +import { CommonModule } from '@angular/common'; @Component({ selector: 'app-empty-message', - imports: [], + imports: [CommonModule], templateUrl: './empty-message.component.html', styleUrl: './empty-message.component.scss', }) @@ -10,4 +11,5 @@ export class EmptyMessageComponent { image = input(); header = input(); message = input(); + isHorizontal = input(false); } diff --git a/modules/ui/src/app/components/empty-page/empty-page.component.html b/modules/ui/src/app/components/empty-page/empty-page.component.html new file mode 100644 index 000000000..cf665a760 --- /dev/null +++ b/modules/ui/src/app/components/empty-page/empty-page.component.html @@ -0,0 +1,7 @@ + + + diff --git a/modules/ui/src/app/components/empty-page/empty-page.component.spec.ts b/modules/ui/src/app/components/empty-page/empty-page.component.spec.ts new file mode 100644 index 000000000..1ed3da404 --- /dev/null +++ b/modules/ui/src/app/components/empty-page/empty-page.component.spec.ts @@ -0,0 +1,22 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { EmptyPageComponent } from './empty-page.component'; + +describe('EmptyPageComponent', () => { + let component: EmptyPageComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + imports: [EmptyPageComponent], + }).compileComponents(); + + fixture = TestBed.createComponent(EmptyPageComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/modules/ui/src/app/components/empty-page/empty-page.component.ts b/modules/ui/src/app/components/empty-page/empty-page.component.ts new file mode 100644 index 000000000..df5c2390c --- /dev/null +++ b/modules/ui/src/app/components/empty-page/empty-page.component.ts @@ -0,0 +1,13 @@ +import { Component, input } from '@angular/core'; +import { EmptyMessageComponent } from '../empty-message/empty-message.component'; + +@Component({ + selector: 'app-empty-page', + imports: [EmptyMessageComponent], + templateUrl: './empty-page.component.html', +}) +export class EmptyPageComponent { + image = input(); + header = input(); + message = input(); +} diff --git a/modules/ui/src/app/components/list-layout/list-layout.component.html b/modules/ui/src/app/components/list-layout/list-layout.component.html new file mode 100644 index 000000000..b1053e2a6 --- /dev/null +++ b/modules/ui/src/app/components/list-layout/list-layout.component.html @@ -0,0 +1,7 @@ + + +

{{ title() }}

+
+ +
+ diff --git a/modules/ui/src/app/components/list-layout/list-layout.component.scss b/modules/ui/src/app/components/list-layout/list-layout.component.scss new file mode 100644 index 000000000..5d0c3a7ad --- /dev/null +++ b/modules/ui/src/app/components/list-layout/list-layout.component.scss @@ -0,0 +1,20 @@ +@use 'mixins'; +@use 'colors'; +@use 'variables'; + +.content-empty { + @include mixins.content-empty; +} + +.title { + color: colors.$on-surface; + font-family: variables.$font-primary; + font-size: 32px; + font-style: normal; + font-weight: 400; + line-height: 40px; + &-empty { + padding: 24px 0 8px 32px; + margin: 0; + } +} diff --git a/modules/ui/src/app/components/list-layout/list-layout.component.spec.ts b/modules/ui/src/app/components/list-layout/list-layout.component.spec.ts new file mode 100644 index 000000000..0b137db0a --- /dev/null +++ b/modules/ui/src/app/components/list-layout/list-layout.component.spec.ts @@ -0,0 +1,22 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { ListLayoutComponent } from './list-layout.component'; + +describe('ListLayoutComponent', () => { + let component: ListLayoutComponent; + let fixture: ComponentFixture>; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + imports: [ListLayoutComponent], + }).compileComponents(); + + fixture = TestBed.createComponent(ListLayoutComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/modules/ui/src/app/components/list-layout/list-layout.component.ts b/modules/ui/src/app/components/list-layout/list-layout.component.ts new file mode 100644 index 000000000..fe1b4255c --- /dev/null +++ b/modules/ui/src/app/components/list-layout/list-layout.component.ts @@ -0,0 +1,15 @@ +import { Component, input, TemplateRef } from '@angular/core'; +import { CommonModule } from '@angular/common'; + +@Component({ + selector: 'app-list-layout', + imports: [CommonModule], + templateUrl: './list-layout.component.html', + styleUrl: './list-layout.component.scss', +}) +export class ListLayoutComponent { + title = input(''); + // eslint-disable-next-line @typescript-eslint/no-explicit-any + emptyContent = input>(); + entities = input([]); +} diff --git a/modules/ui/src/app/pages/devices/devices.component.html b/modules/ui/src/app/pages/devices/devices.component.html index f6567b49e..18db165cc 100644 --- a/modules/ui/src/app/pages/devices/devices.component.html +++ b/modules/ui/src/app/pages/devices/devices.component.html @@ -14,7 +14,7 @@ limitations under the License. --> - +

Devices

@@ -36,21 +36,28 @@

Devices
+ + + + -
+ -
+ diff --git a/modules/ui/src/app/pages/devices/devices.component.scss b/modules/ui/src/app/pages/devices/devices.component.scss index 4b14c01b8..4e49b90f8 100644 --- a/modules/ui/src/app/pages/devices/devices.component.scss +++ b/modules/ui/src/app/pages/devices/devices.component.scss @@ -42,3 +42,10 @@ gap: 16px; overflow-y: auto; } + +.device-add-button { + font-family: variables.$font-text; + margin-bottom: 12px; + width: fit-content; + height: 56px; +} diff --git a/modules/ui/src/app/pages/devices/devices.component.spec.ts b/modules/ui/src/app/pages/devices/devices.component.spec.ts index 5c8a1602f..2de0b9bb4 100644 --- a/modules/ui/src/app/pages/devices/devices.component.spec.ts +++ b/modules/ui/src/app/pages/devices/devices.component.spec.ts @@ -103,9 +103,7 @@ describe('DevicesComponent', () => { }); it('should show only add device button if no device added', () => { - const button = compiled.querySelector( - '.device-repository-content-empty button' - ); + const button = compiled.querySelector('app-empty-page button'); expect(button).toBeTruthy(); }); diff --git a/modules/ui/src/app/pages/devices/devices.component.ts b/modules/ui/src/app/pages/devices/devices.component.ts index 5b8d74463..685a8ba12 100644 --- a/modules/ui/src/app/pages/devices/devices.component.ts +++ b/modules/ui/src/app/pages/devices/devices.component.ts @@ -52,6 +52,8 @@ import { ReactiveFormsModule } from '@angular/forms'; import { MatCheckboxModule } from '@angular/material/checkbox'; import { MatInputModule } from '@angular/material/input'; import { DeviceItemComponent } from '../../components/device-item/device-item.component'; +import { EmptyPageComponent } from '../../components/empty-page/empty-page.component'; +import { ListLayoutComponent } from '../../components/list-layout/list-layout.component'; export enum FormAction { Delete = 'Delete', @@ -80,6 +82,8 @@ export interface FormResponse { MatCheckboxModule, MatInputModule, DeviceItemComponent, + EmptyPageComponent, + ListLayoutComponent, ], providers: [DevicesStore], }) diff --git a/modules/ui/src/assets/icons/empty-devices.svg b/modules/ui/src/assets/icons/empty-devices.svg new file mode 100644 index 000000000..50a6e1e73 --- /dev/null +++ b/modules/ui/src/assets/icons/empty-devices.svg @@ -0,0 +1,37 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + From 883ff33c5f3376a359f00b1d2a61782a1f6a50fc Mon Sep 17 00:00:00 2001 From: kurilova Date: Fri, 20 Dec 2024 11:55:14 +0000 Subject: [PATCH 2/2] Adds Copyright --- .../empty-message/empty-message.component.html | 15 +++++++++++++++ .../empty-message/empty-message.component.scss | 15 +++++++++++++++ .../empty-message/empty-message.component.spec.ts | 15 +++++++++++++++ .../empty-message/empty-message.component.ts | 15 +++++++++++++++ .../empty-page/empty-page.component.html | 15 +++++++++++++++ .../empty-page/empty-page.component.spec.ts | 15 +++++++++++++++ .../components/empty-page/empty-page.component.ts | 15 +++++++++++++++ .../list-layout/list-layout.component.html | 15 +++++++++++++++ .../list-layout/list-layout.component.scss | 15 +++++++++++++++ .../list-layout/list-layout.component.spec.ts | 15 +++++++++++++++ .../list-layout/list-layout.component.ts | 15 +++++++++++++++ 11 files changed, 165 insertions(+) diff --git a/modules/ui/src/app/components/empty-message/empty-message.component.html b/modules/ui/src/app/components/empty-message/empty-message.component.html index 2e1549117..7a6c479d1 100644 --- a/modules/ui/src/app/components/empty-message/empty-message.component.html +++ b/modules/ui/src/app/components/empty-message/empty-message.component.html @@ -1,3 +1,18 @@ +
diff --git a/modules/ui/src/app/components/empty-message/empty-message.component.scss b/modules/ui/src/app/components/empty-message/empty-message.component.scss index b623400c1..fe2959929 100644 --- a/modules/ui/src/app/components/empty-message/empty-message.component.scss +++ b/modules/ui/src/app/components/empty-message/empty-message.component.scss @@ -1,3 +1,18 @@ +/** + * Copyright 2023 Google LLC + * + * 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 + * + * https://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. + */ @use 'variables'; @use 'colors'; diff --git a/modules/ui/src/app/components/empty-message/empty-message.component.spec.ts b/modules/ui/src/app/components/empty-message/empty-message.component.spec.ts index de43363d4..7fecdbff0 100644 --- a/modules/ui/src/app/components/empty-message/empty-message.component.spec.ts +++ b/modules/ui/src/app/components/empty-message/empty-message.component.spec.ts @@ -1,3 +1,18 @@ +/** + * Copyright 2023 Google LLC + * + * 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 + * + * https://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 { ComponentFixture, TestBed } from '@angular/core/testing'; import { EmptyMessageComponent } from './empty-message.component'; diff --git a/modules/ui/src/app/components/empty-message/empty-message.component.ts b/modules/ui/src/app/components/empty-message/empty-message.component.ts index 2d1aee23f..43a6689a8 100644 --- a/modules/ui/src/app/components/empty-message/empty-message.component.ts +++ b/modules/ui/src/app/components/empty-message/empty-message.component.ts @@ -1,3 +1,18 @@ +/** + * Copyright 2023 Google LLC + * + * 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 + * + * https://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 { Component, input } from '@angular/core'; import { CommonModule } from '@angular/common'; diff --git a/modules/ui/src/app/components/empty-page/empty-page.component.html b/modules/ui/src/app/components/empty-page/empty-page.component.html index cf665a760..4d67a06cf 100644 --- a/modules/ui/src/app/components/empty-page/empty-page.component.html +++ b/modules/ui/src/app/components/empty-page/empty-page.component.html @@ -1,3 +1,18 @@ +

{{ title() }}

diff --git a/modules/ui/src/app/components/list-layout/list-layout.component.scss b/modules/ui/src/app/components/list-layout/list-layout.component.scss index 5d0c3a7ad..956a7b1c4 100644 --- a/modules/ui/src/app/components/list-layout/list-layout.component.scss +++ b/modules/ui/src/app/components/list-layout/list-layout.component.scss @@ -1,3 +1,18 @@ +/** + * Copyright 2023 Google LLC + * + * 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 + * + * https://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. + */ @use 'mixins'; @use 'colors'; @use 'variables'; diff --git a/modules/ui/src/app/components/list-layout/list-layout.component.spec.ts b/modules/ui/src/app/components/list-layout/list-layout.component.spec.ts index 0b137db0a..14ab06cd5 100644 --- a/modules/ui/src/app/components/list-layout/list-layout.component.spec.ts +++ b/modules/ui/src/app/components/list-layout/list-layout.component.spec.ts @@ -1,3 +1,18 @@ +/** + * Copyright 2023 Google LLC + * + * 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 + * + * https://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 { ComponentFixture, TestBed } from '@angular/core/testing'; import { ListLayoutComponent } from './list-layout.component'; diff --git a/modules/ui/src/app/components/list-layout/list-layout.component.ts b/modules/ui/src/app/components/list-layout/list-layout.component.ts index fe1b4255c..3c97549b4 100644 --- a/modules/ui/src/app/components/list-layout/list-layout.component.ts +++ b/modules/ui/src/app/components/list-layout/list-layout.component.ts @@ -1,3 +1,18 @@ +/** + * Copyright 2023 Google LLC + * + * 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 + * + * https://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 { Component, input, TemplateRef } from '@angular/core'; import { CommonModule } from '@angular/common';