From 47972070dfe1167d6957c302ad3f1563cf642b0a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Piotrek=20Brzezi=C5=84ski?= Date: Sat, 17 Jul 2021 23:54:29 +0200 Subject: [PATCH 01/22] Add section-header component --- angular.json | 2 +- src/app/app.component.html | 4 +-- src/app/app.component.scss | 7 ------ src/app/app.module.ts | 1 + .../section-header.component.html | 6 +++++ .../section-header.component.scss | 7 ++++++ .../section-header.component.spec.ts | 25 +++++++++++++++++++ .../section-header.component.ts | 15 +++++++++++ src/styles.scss | 6 +++-- src/variables.scss | 1 + 10 files changed, 61 insertions(+), 13 deletions(-) create mode 100644 src/app/shared/section-header/section-header.component.html create mode 100644 src/app/shared/section-header/section-header.component.scss create mode 100644 src/app/shared/section-header/section-header.component.spec.ts create mode 100644 src/app/shared/section-header/section-header.component.ts create mode 100644 src/variables.scss diff --git a/angular.json b/angular.json index c589208..279621f 100644 --- a/angular.json +++ b/angular.json @@ -24,7 +24,7 @@ "tsConfig": "tsconfig.app.json", "aot": true, "assets": ["src/favicon.ico", "src/assets"], - "styles": ["src/styles.scss"], + "styles": ["src/styles.scss", "src/variables.scss"], "scripts": [] }, "configurations": { diff --git a/src/app/app.component.html b/src/app/app.component.html index d9b6267..b18c9e1 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -1,6 +1,4 @@
-
- -
+
diff --git a/src/app/app.component.scss b/src/app/app.component.scss index 73a76b5..edf3e44 100644 --- a/src/app/app.component.scss +++ b/src/app/app.component.scss @@ -2,10 +2,3 @@ display: flex; flex-direction: column; } - -.content-wrapper { - flex: 1; - padding: 20px; - display: flex; - justify-content: center; -} diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 2394600..b17e63d 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -18,6 +18,7 @@ import { AuthConfigModule } from './auth/auth-config.module'; import { DeviceListComponent } from './pages/device-list/device-list.component'; import { DeviceCardComponent } from './pages/device-list/device-card/device-card.component'; import { DeviceDetailsComponent } from './pages/device-details/device-details.component'; +import { SectionHeaderComponent } from './shared/section-header/section-header.component'; @NgModule({ declarations: [ diff --git a/src/app/shared/section-header/section-header.component.html b/src/app/shared/section-header/section-header.component.html new file mode 100644 index 0000000..aeb1395 --- /dev/null +++ b/src/app/shared/section-header/section-header.component.html @@ -0,0 +1,6 @@ +
+
+ +
+
+ diff --git a/src/app/shared/section-header/section-header.component.scss b/src/app/shared/section-header/section-header.component.scss new file mode 100644 index 0000000..c097894 --- /dev/null +++ b/src/app/shared/section-header/section-header.component.scss @@ -0,0 +1,7 @@ +@import "~src/variables.scss"; + +.section-header { + width: 100%; + background-color: darken($thingoo-background, 3%); + padding: 70px 0; +} \ No newline at end of file diff --git a/src/app/shared/section-header/section-header.component.spec.ts b/src/app/shared/section-header/section-header.component.spec.ts new file mode 100644 index 0000000..816e0ff --- /dev/null +++ b/src/app/shared/section-header/section-header.component.spec.ts @@ -0,0 +1,25 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { SectionHeaderComponent } from './section-header.component'; + +describe('SectionHeaderComponent', () => { + let component: SectionHeaderComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ SectionHeaderComponent ] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(SectionHeaderComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/shared/section-header/section-header.component.ts b/src/app/shared/section-header/section-header.component.ts new file mode 100644 index 0000000..845f0e3 --- /dev/null +++ b/src/app/shared/section-header/section-header.component.ts @@ -0,0 +1,15 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-section-header', + templateUrl: './section-header.component.html', + styleUrls: ['./section-header.component.scss'] +}) +export class SectionHeaderComponent implements OnInit { + + constructor() { } + + ngOnInit(): void { + } + +} diff --git a/src/styles.scss b/src/styles.scss index 1392cce..ef6f9ff 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -45,9 +45,11 @@ body { font-family: Roboto, "Helvetica Neue", sans-serif; } -.wrapper { - max-width: 1060px; +.content-wrapper { + // TODO: mobile support here + width: 80%; margin: 0 auto; + max-width: 1060px; } .mat-app-background { diff --git a/src/variables.scss b/src/variables.scss new file mode 100644 index 0000000..2a2371a --- /dev/null +++ b/src/variables.scss @@ -0,0 +1 @@ +$thingoo-background: #303030; \ No newline at end of file From f26c43139f203eea8287cbab8bd7d06172584aaf Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Piotrek=20Brzezi=C5=84ski?= Date: Sat, 17 Jul 2021 23:56:42 +0200 Subject: [PATCH 02/22] Use section-header in device-details --- .../device-details.component.html | 80 +++++++++---------- 1 file changed, 39 insertions(+), 41 deletions(-) diff --git a/src/app/pages/device-details/device-details.component.html b/src/app/pages/device-details/device-details.component.html index 2ce940d..e458121 100644 --- a/src/app/pages/device-details/device-details.component.html +++ b/src/app/pages/device-details/device-details.component.html @@ -1,45 +1,43 @@ -
- -
-
-
-
-
-
-

{{ device.displayName }}

-

- {{ device.entities.length }} - ENTITIES -

-
+ +
+
+
+
-
-
- KEY - {{ device.key }} -
- -
- MAC - {{ device.macAddress }} -
+
+

{{ device.displayName }}

+

+ {{ device.entities.length }} + ENTITIES +

- - -

Entities:

-
- -
-

- {{ entity.displayName }} -

-

92 dB

-
13 minutes ago
- +
+
+ KEY + {{ device.key }} +
+ +
+ MAC + {{ device.macAddress }} +
- -
+
+ + +

Entities:

+
+ +
+

+ {{ entity.displayName }} +

+

92 dB

+
13 minutes ago
+ +
+ From 227d04a6a927ce963fa7f7697c379367458dcd07 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Piotrek=20Brzezi=C5=84ski?= Date: Sun, 18 Jul 2021 00:23:05 +0200 Subject: [PATCH 03/22] Add device-icon component --- src/app/app.module.ts | 1 + .../device-icon/device-icon.component.html | 7 +++++++ .../device-icon/device-icon.component.scss | 10 ++++++++++ .../device-icon/device-icon.component.ts | 19 +++++++++++++++++++ 4 files changed, 37 insertions(+) create mode 100644 src/app/shared/device-icon/device-icon.component.html create mode 100644 src/app/shared/device-icon/device-icon.component.scss create mode 100644 src/app/shared/device-icon/device-icon.component.ts diff --git a/src/app/app.module.ts b/src/app/app.module.ts index b17e63d..4377f36 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -19,6 +19,7 @@ import { DeviceListComponent } from './pages/device-list/device-list.component'; import { DeviceCardComponent } from './pages/device-list/device-card/device-card.component'; import { DeviceDetailsComponent } from './pages/device-details/device-details.component'; import { SectionHeaderComponent } from './shared/section-header/section-header.component'; +import { DeviceIconComponent } from './shared/device-icon/device-icon.component'; @NgModule({ declarations: [ diff --git a/src/app/shared/device-icon/device-icon.component.html b/src/app/shared/device-icon/device-icon.component.html new file mode 100644 index 0000000..b634f73 --- /dev/null +++ b/src/app/shared/device-icon/device-icon.component.html @@ -0,0 +1,7 @@ +
+
+ + {{ iconName }} + +
+
diff --git a/src/app/shared/device-icon/device-icon.component.scss b/src/app/shared/device-icon/device-icon.component.scss new file mode 100644 index 0000000..6dde61d --- /dev/null +++ b/src/app/shared/device-icon/device-icon.component.scss @@ -0,0 +1,10 @@ +.device-icon { + &__container { + display: flex; + justify-content: center; + align-items: center; + + border-radius: 50%; + background-color: transparentize($color: white, $amount: 0.8) + } +} \ No newline at end of file diff --git a/src/app/shared/device-icon/device-icon.component.ts b/src/app/shared/device-icon/device-icon.component.ts new file mode 100644 index 0000000..9e4c3a3 --- /dev/null +++ b/src/app/shared/device-icon/device-icon.component.ts @@ -0,0 +1,19 @@ +import { Component, Input, OnInit } from '@angular/core'; +import { MaterialIcon } from 'src/app/api/material-icon.model'; + +@Component({ + selector: 'app-device-icon', + templateUrl: './device-icon.component.html', + styleUrls: ['./device-icon.component.scss'] +}) +export class DeviceIconComponent implements OnInit { + @Input() size!: number; + // TOOD: use MaterialIcon here + @Input() iconName!: string; + + constructor() { } + + ngOnInit(): void { + } + +} From 3ca2a006dbe9d78a8528ddafad2b498335688d76 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Piotrek=20Brzezi=C5=84ski?= Date: Sun, 18 Jul 2021 12:44:31 +0200 Subject: [PATCH 04/22] Add value-row component --- src/app/app.module.ts | 1 + .../shared/value-row/value-row.component.html | 9 +++++++++ .../shared/value-row/value-row.component.scss | 16 ++++++++++++++++ .../shared/value-row/value-row.component.ts | 18 ++++++++++++++++++ src/variables.scss | 3 ++- 5 files changed, 46 insertions(+), 1 deletion(-) create mode 100644 src/app/shared/value-row/value-row.component.html create mode 100644 src/app/shared/value-row/value-row.component.scss create mode 100644 src/app/shared/value-row/value-row.component.ts diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 4377f36..da021e0 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -20,6 +20,7 @@ import { DeviceCardComponent } from './pages/device-list/device-card/device-card import { DeviceDetailsComponent } from './pages/device-details/device-details.component'; import { SectionHeaderComponent } from './shared/section-header/section-header.component'; import { DeviceIconComponent } from './shared/device-icon/device-icon.component'; +import { ValueRowComponent } from './shared/value-row/value-row.component'; @NgModule({ declarations: [ diff --git a/src/app/shared/value-row/value-row.component.html b/src/app/shared/value-row/value-row.component.html new file mode 100644 index 0000000..9021f63 --- /dev/null +++ b/src/app/shared/value-row/value-row.component.html @@ -0,0 +1,9 @@ +
+
+ {{ this.name.toUpperCase() }} +
+ + {{ this.value }} + +
+ diff --git a/src/app/shared/value-row/value-row.component.scss b/src/app/shared/value-row/value-row.component.scss new file mode 100644 index 0000000..ac55048 --- /dev/null +++ b/src/app/shared/value-row/value-row.component.scss @@ -0,0 +1,16 @@ +@import "~src/variables.scss"; + +.value-row { + display: flex; + flex-direction: row; + font-size: 18px; + font-weight: 500; + + &__name { + color: darken($color: $thingoo-text, $amount: 40%); + } + + &__value { + color: darken($color: $thingoo-text, $amount: 20%); + } +} \ No newline at end of file diff --git a/src/app/shared/value-row/value-row.component.ts b/src/app/shared/value-row/value-row.component.ts new file mode 100644 index 0000000..10bdd20 --- /dev/null +++ b/src/app/shared/value-row/value-row.component.ts @@ -0,0 +1,18 @@ +import { Component, Input, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-value-row', + templateUrl: './value-row.component.html', + styleUrls: ['./value-row.component.scss'] +}) +export class ValueRowComponent implements OnInit { + @Input() nameWidth!: number; + @Input() name!: string; + @Input() value!: string; + + constructor() { } + + ngOnInit(): void { + } + +} diff --git a/src/variables.scss b/src/variables.scss index 2a2371a..cb19998 100644 --- a/src/variables.scss +++ b/src/variables.scss @@ -1 +1,2 @@ -$thingoo-background: #303030; \ No newline at end of file +$thingoo-background: #343434; +$thingoo-text: #FFFFFF; \ No newline at end of file From e51b55626ce4ed403792bff56731a4480e33c3a9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Piotrek=20Brzezi=C5=84ski?= Date: Sun, 18 Jul 2021 13:50:29 +0200 Subject: [PATCH 05/22] Add entity-card component --- src/app/app.module.ts | 1 + .../entity-card/entity-card.component.html | 10 ++++++++ .../entity-card/entity-card.component.scss | 25 +++++++++++++++++++ .../entity-card/entity-card.component.ts | 17 +++++++++++++ 4 files changed, 53 insertions(+) create mode 100644 src/app/shared/entity-card/entity-card.component.html create mode 100644 src/app/shared/entity-card/entity-card.component.scss create mode 100644 src/app/shared/entity-card/entity-card.component.ts diff --git a/src/app/app.module.ts b/src/app/app.module.ts index da021e0..18a0bb4 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -21,6 +21,7 @@ import { DeviceDetailsComponent } from './pages/device-details/device-details.co import { SectionHeaderComponent } from './shared/section-header/section-header.component'; import { DeviceIconComponent } from './shared/device-icon/device-icon.component'; import { ValueRowComponent } from './shared/value-row/value-row.component'; +import { EntityCardComponent } from './shared/entity-card/entity-card.component'; @NgModule({ declarations: [ diff --git a/src/app/shared/entity-card/entity-card.component.html b/src/app/shared/entity-card/entity-card.component.html new file mode 100644 index 0000000..3483a20 --- /dev/null +++ b/src/app/shared/entity-card/entity-card.component.html @@ -0,0 +1,10 @@ + + + + {{ entity.displayName }} + 24 dB +
+ 42 minutes ago +
+ + \ No newline at end of file diff --git a/src/app/shared/entity-card/entity-card.component.scss b/src/app/shared/entity-card/entity-card.component.scss new file mode 100644 index 0000000..e39e22b --- /dev/null +++ b/src/app/shared/entity-card/entity-card.component.scss @@ -0,0 +1,25 @@ +@import "~src/variables.scss"; + +.entity-card { + padding: 20px 35px; + &__content { + display: flex; + flex-direction: column; + align-items: center; + } + + &__name { + margin-top: 12px !important; + margin-bottom: 30px; + font-size: 16px; + } + + &__value { + font-size: 24px; + } + + &__timestamp { + color: darken($color: $thingoo-text, $amount: 30%); + font-size: 13px; + } +} \ No newline at end of file diff --git a/src/app/shared/entity-card/entity-card.component.ts b/src/app/shared/entity-card/entity-card.component.ts new file mode 100644 index 0000000..69cb74f --- /dev/null +++ b/src/app/shared/entity-card/entity-card.component.ts @@ -0,0 +1,17 @@ +import { Component, Input, OnInit } from '@angular/core'; +import { Entity } from 'src/app/api/entity.model'; + +@Component({ + selector: 'app-entity-card', + templateUrl: './entity-card.component.html', + styleUrls: ['./entity-card.component.scss'] +}) +export class EntityCardComponent implements OnInit { + @Input() entity!: Entity; + + constructor() { } + + ngOnInit(): void { + } + +} From 38d0de237f0c5c5ec20e1618b72a48a60d1e4734 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Piotrek=20Brzezi=C5=84ski?= Date: Sun, 18 Jul 2021 13:50:50 +0200 Subject: [PATCH 06/22] Update device details page --- .../device-details.component.html | 55 +++---- .../device-details.component.scss | 134 +++++++----------- .../section-header.component.scss | 2 +- .../section-header.component.spec.ts | 25 ---- src/styles.scss | 2 + 5 files changed, 70 insertions(+), 148 deletions(-) delete mode 100644 src/app/shared/section-header/section-header.component.spec.ts diff --git a/src/app/pages/device-details/device-details.component.html b/src/app/pages/device-details/device-details.component.html index e458121..514ef7a 100644 --- a/src/app/pages/device-details/device-details.component.html +++ b/src/app/pages/device-details/device-details.component.html @@ -1,43 +1,26 @@ -
-
-
-
-
-
-

{{ device.displayName }}

-

+

+ +
+ + {{ device.displayName }} + +
{{ device.entities.length }} - ENTITIES -

-
-
-
-
- KEY - {{ device.key }} + ENTITIES +
- -
- MAC - {{ device.macAddress }} +
+
+ +
-
- -

Entities:

-
- -
-

- {{ entity.displayName }} -

-

92 dB

-
13 minutes ago
- + +
+

Entities:

+
+
- +
diff --git a/src/app/pages/device-details/device-details.component.scss b/src/app/pages/device-details/device-details.component.scss index 3a7cb6b..37d4a38 100644 --- a/src/app/pages/device-details/device-details.component.scss +++ b/src/app/pages/device-details/device-details.component.scss @@ -1,100 +1,62 @@ -.device-details-page-wrapper { - width: 100vw; - max-width: 1000px; +@import "~src/variables.scss"; - mat-card.device-details__section { - padding: calc(16px + 1.5vw) calc(16px + 1.5vw); - } -} - -.entity-list { - display: flex; - flex-direction: row; - align-items: center; - justify-content: flex-start; - flex-wrap: wrap; - gap: 20px; -} - -.gray-color { - color: lightgray; -} - -.device-entities { - margin-top: 12px; -} - -.device-basic-info { - display: flex; - flex-direction: row; - align-items: center; - flex-wrap: wrap; +$section-padding: 40px; - .header-flex-column { +.device-details { + &__header { display: flex; - flex-direction: column; - justify-content: space-between; - } - - p { - margin: 0px; - } - - &__first { - display: grid; - grid-template-columns: 65px calc(100% - 65px); - margin-right: 4vw; - - .text__wrapper { - margin-left: 5px; + flex-direction: row; + gap: 15px; + color: $thingoo-text; + + .section { + display: flex; + flex-direction: column; + justify-content: center; + gap: 10px; } - h2 { - margin-bottom: 0px; - font-size: 28px; + .basic-info { + .device-name { + font-size: 26px; + font-weight: 300; + } + + .device-entities { + font-size: 18px; + font-weight: 500; + color: darken($color: $thingoo-text, $amount: 20%); + + .entities-text { + margin-left: 3px; + color: darken($color: $thingoo-text, $amount: 40%); + } + } } - } - &__second { - span { - font-size: 18px; - font-weight: 500; - width: 45px; - display: inline-block; + .spacer { + width: 6vw; } - p { - font-size: 18px; + + .details-info { + // TODO:! + gap: 8px; } } -} -.entity-item { - display: flex; - justify-content: center; - flex-direction: column; - align-items: center; - width: 120px; + &__entities { + padding: $section-padding 0; - &::before { - content: " "; - background-color: rgba($color: #fff, $alpha: 0.07); - position: absolute; - width: 100%; - height: 100%; - border-radius: 4px; - } + .entities-header { + color: darken($color: $thingoo-text, $amount: 10%); + font-weight: 400; + margin-bottom: $section-padding; + } - h4 { - margin: 8px 0; - } - h3 { - margin-bottom: 8px; + .entities-list { + display: flex; + flex-wrap: wrap; + gap: 15px; + } } -} - -.icon { - width: 60px; - height: 60px; - border-radius: 50%; - background-color: lightgray; -} +} \ No newline at end of file diff --git a/src/app/shared/section-header/section-header.component.scss b/src/app/shared/section-header/section-header.component.scss index c097894..80a845b 100644 --- a/src/app/shared/section-header/section-header.component.scss +++ b/src/app/shared/section-header/section-header.component.scss @@ -2,6 +2,6 @@ .section-header { width: 100%; - background-color: darken($thingoo-background, 3%); + background-color: darken($thingoo-background, 5%); padding: 70px 0; } \ No newline at end of file diff --git a/src/app/shared/section-header/section-header.component.spec.ts b/src/app/shared/section-header/section-header.component.spec.ts deleted file mode 100644 index 816e0ff..0000000 --- a/src/app/shared/section-header/section-header.component.spec.ts +++ /dev/null @@ -1,25 +0,0 @@ -import { ComponentFixture, TestBed } from '@angular/core/testing'; - -import { SectionHeaderComponent } from './section-header.component'; - -describe('SectionHeaderComponent', () => { - let component: SectionHeaderComponent; - let fixture: ComponentFixture; - - beforeEach(async () => { - await TestBed.configureTestingModule({ - declarations: [ SectionHeaderComponent ] - }) - .compileComponents(); - }); - - beforeEach(() => { - fixture = TestBed.createComponent(SectionHeaderComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); - - it('should create', () => { - expect(component).toBeTruthy(); - }); -}); diff --git a/src/styles.scss b/src/styles.scss index ef6f9ff..ffa8ff6 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -35,6 +35,7 @@ $thingoo-frontend-theme: mat-dark-theme( @include angular-material-theme($thingoo-frontend-theme); /* You can add global styles to this file, and also import other style files */ +@import "~src/variables.scss"; html, body { @@ -54,4 +55,5 @@ body { .mat-app-background { min-height: 100%; + background-color: $thingoo-background; } From dc6a372446793e2d12a87c54368da32654cbff6a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Piotrek=20Brzezi=C5=84ski?= Date: Sun, 18 Jul 2021 14:12:19 +0200 Subject: [PATCH 07/22] Add icon and (optional) title to SectionHeader --- .../device-details.component.html | 31 +++++++++---------- .../section-header.component.html | 4 +++ .../section-header.component.scss | 7 +++++ .../section-header.component.ts | 4 ++- 4 files changed, 28 insertions(+), 18 deletions(-) diff --git a/src/app/pages/device-details/device-details.component.html b/src/app/pages/device-details/device-details.component.html index 514ef7a..4c71f5d 100644 --- a/src/app/pages/device-details/device-details.component.html +++ b/src/app/pages/device-details/device-details.component.html @@ -1,21 +1,18 @@ - -
- -
- - {{ device.displayName }} - -
- {{ device.entities.length }} - ENTITIES -
+ +
+ + {{ device.displayName }} + +
+ {{ device.entities.length }} + ENTITIES
-
-
- - -
-
+
+
+
+ + +
diff --git a/src/app/shared/section-header/section-header.component.html b/src/app/shared/section-header/section-header.component.html index aeb1395..afa1f22 100644 --- a/src/app/shared/section-header/section-header.component.html +++ b/src/app/shared/section-header/section-header.component.html @@ -1,5 +1,9 @@
+ +
+ {{ sectionTitle }} +
diff --git a/src/app/shared/section-header/section-header.component.scss b/src/app/shared/section-header/section-header.component.scss index 80a845b..f4ffb07 100644 --- a/src/app/shared/section-header/section-header.component.scss +++ b/src/app/shared/section-header/section-header.component.scss @@ -4,4 +4,11 @@ width: 100%; background-color: darken($thingoo-background, 5%); padding: 70px 0; + + &__content { + display: flex; + flex-direction: row; + gap: 15px; + color: $thingoo-text; + } } \ No newline at end of file diff --git a/src/app/shared/section-header/section-header.component.ts b/src/app/shared/section-header/section-header.component.ts index 845f0e3..e73d3b8 100644 --- a/src/app/shared/section-header/section-header.component.ts +++ b/src/app/shared/section-header/section-header.component.ts @@ -1,4 +1,4 @@ -import { Component, OnInit } from '@angular/core'; +import { Component, Input, OnInit } from '@angular/core'; @Component({ selector: 'app-section-header', @@ -6,6 +6,8 @@ import { Component, OnInit } from '@angular/core'; styleUrls: ['./section-header.component.scss'] }) export class SectionHeaderComponent implements OnInit { + @Input() iconName!: string; + @Input() sectionTitle: string = ''; constructor() { } From c457bc29308744c29be67ed4b3b504b3f83ddd37 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Piotrek=20Brzezi=C5=84ski?= Date: Sun, 18 Jul 2021 14:36:16 +0200 Subject: [PATCH 08/22] Add compact mode to SectionHeader --- .../section-header.component.html | 5 ++-- .../section-header.component.scss | 24 ++++++++++++++++++- .../section-header.component.ts | 16 +++++++++++++ 3 files changed, 42 insertions(+), 3 deletions(-) diff --git a/src/app/shared/section-header/section-header.component.html b/src/app/shared/section-header/section-header.component.html index afa1f22..44b7378 100644 --- a/src/app/shared/section-header/section-header.component.html +++ b/src/app/shared/section-header/section-header.component.html @@ -1,8 +1,9 @@ -
+
- {{ sectionTitle }} +
{{ sectionTitle }}
+
{{ sectionSubtitle }}
diff --git a/src/app/shared/section-header/section-header.component.scss b/src/app/shared/section-header/section-header.component.scss index f4ffb07..659f444 100644 --- a/src/app/shared/section-header/section-header.component.scss +++ b/src/app/shared/section-header/section-header.component.scss @@ -2,13 +2,35 @@ .section-header { width: 100%; + padding: 60px 0; background-color: darken($thingoo-background, 5%); - padding: 70px 0; + + &.compact { + padding: 35px 0; + } &__content { display: flex; flex-direction: row; + align-items: center; gap: 15px; + color: $thingoo-text; + + .section-title { + display: flex; + flex-direction: column; + gap: 10px; + + .title-text { + font-size: 26px; + font-weight: 300; + } + + .subtitle-text { + font-size: 18px; + color: darken($color: $thingoo-text, $amount: 40%); + } + } } } \ No newline at end of file diff --git a/src/app/shared/section-header/section-header.component.ts b/src/app/shared/section-header/section-header.component.ts index e73d3b8..d186cbf 100644 --- a/src/app/shared/section-header/section-header.component.ts +++ b/src/app/shared/section-header/section-header.component.ts @@ -8,10 +8,26 @@ import { Component, Input, OnInit } from '@angular/core'; export class SectionHeaderComponent implements OnInit { @Input() iconName!: string; @Input() sectionTitle: string = ''; + @Input() sectionSubtitle: string = ''; + + private _compactRequested: boolean = false; constructor() { } ngOnInit(): void { } + get isCompact() { + if (this._compactRequested) return true; + // Compact mode is on by default if there's no subtitle + if (this.sectionTitle && !this.sectionSubtitle) + return true; + + return false; + } + + @Input() + set isCompact(value: boolean) { + this._compactRequested = value; + } } From ae51e738b3e9d5b48b4fb325c65aa2b0eb7d9397 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Piotrek=20Brzezi=C5=84ski?= Date: Sun, 18 Jul 2021 14:36:37 +0200 Subject: [PATCH 09/22] Remove unneeded CSS from DeviceDetails --- .../pages/device-details/device-details.component.scss | 8 -------- 1 file changed, 8 deletions(-) diff --git a/src/app/pages/device-details/device-details.component.scss b/src/app/pages/device-details/device-details.component.scss index 37d4a38..fc83b62 100644 --- a/src/app/pages/device-details/device-details.component.scss +++ b/src/app/pages/device-details/device-details.component.scss @@ -1,14 +1,7 @@ @import "~src/variables.scss"; -$section-padding: 40px; - .device-details { &__header { - display: flex; - flex-direction: row; - gap: 15px; - color: $thingoo-text; - .section { display: flex; flex-direction: column; @@ -39,7 +32,6 @@ $section-padding: 40px; } .details-info { - // TODO:! gap: 8px; } } From cc1297951112f53d1dec2943ee4b780d0d0f9e37 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Piotrek=20Brzezi=C5=84ski?= Date: Sun, 18 Jul 2021 14:55:06 +0200 Subject: [PATCH 10/22] Update device list page --- src/app/app.module.ts | 6 ++- .../device-details.component.scss | 2 +- .../device-card/device-card.component.html | 9 ---- .../device-card/device-card.component.scss | 44 ------------------- .../device-list/device-list.component.html | 12 ++--- .../device-list/device-list.component.scss | 27 ++++++------ .../device-card/device-card.component.html | 10 +++++ .../device-card/device-card.component.scss | 20 +++++++++ .../device-card/device-card.component.ts | 10 +++-- .../device-icon/device-icon.component.html | 2 +- .../entity-card/entity-card.component.html | 3 ++ src/variables.scss | 5 ++- 12 files changed, 70 insertions(+), 80 deletions(-) delete mode 100644 src/app/pages/device-list/device-card/device-card.component.html delete mode 100644 src/app/pages/device-list/device-card/device-card.component.scss create mode 100644 src/app/shared/device-card/device-card.component.html create mode 100644 src/app/shared/device-card/device-card.component.scss rename src/app/{pages/device-list => shared}/device-card/device-card.component.ts (60%) diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 18a0bb4..9472fc9 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -16,7 +16,7 @@ import { DashboardComponent } from './pages/dashboard/dashboard.component'; import { UserProfileComponent } from './pages/user-profile/user-profile.component'; import { AuthConfigModule } from './auth/auth-config.module'; import { DeviceListComponent } from './pages/device-list/device-list.component'; -import { DeviceCardComponent } from './pages/device-list/device-card/device-card.component'; +import { DeviceCardComponent } from './shared/device-card/device-card.component'; import { DeviceDetailsComponent } from './pages/device-details/device-details.component'; import { SectionHeaderComponent } from './shared/section-header/section-header.component'; import { DeviceIconComponent } from './shared/device-icon/device-icon.component'; @@ -33,6 +33,10 @@ import { EntityCardComponent } from './shared/entity-card/entity-card.component' DeviceListComponent, DeviceCardComponent, DeviceDetailsComponent, + SectionHeaderComponent, + DeviceIconComponent, + ValueRowComponent, + EntityCardComponent, ], imports: [ MatToolbarModule, diff --git a/src/app/pages/device-details/device-details.component.scss b/src/app/pages/device-details/device-details.component.scss index fc83b62..fd25eab 100644 --- a/src/app/pages/device-details/device-details.component.scss +++ b/src/app/pages/device-details/device-details.component.scss @@ -48,7 +48,7 @@ .entities-list { display: flex; flex-wrap: wrap; - gap: 15px; + gap: $elements-grid-gap; } } } \ No newline at end of file diff --git a/src/app/pages/device-list/device-card/device-card.component.html b/src/app/pages/device-list/device-card/device-card.component.html deleted file mode 100644 index 2016590..0000000 --- a/src/app/pages/device-list/device-card/device-card.component.html +++ /dev/null @@ -1,9 +0,0 @@ - -
-
-

- {{ device.displayName }} -

-

Entities: {{ device.entities.length }}

-
- diff --git a/src/app/pages/device-list/device-card/device-card.component.scss b/src/app/pages/device-list/device-card/device-card.component.scss deleted file mode 100644 index b826276..0000000 --- a/src/app/pages/device-list/device-card/device-card.component.scss +++ /dev/null @@ -1,44 +0,0 @@ -.device-icon { - width: 60px; - height: 60px; - background-color: lightgray; - border-radius: 50%; - margin-bottom: 12px; -} - -.device-card { - width: 130px; - height: 160px; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - margin: 0; - user-select: none; - cursor: pointer; - border: 1px solid #303030; - - &:hover, - &:focus { - outline: none; - - &::before { - /* this should be transformed into some kind of a mixin at a later date */ - content: " "; - background-color: rgba($color: #fff, $alpha: 0.03); - position: absolute; - width: 100%; - height: 100%; - border-radius: 4px; - } - } - - &__h3 { - margin-bottom: 5px; - } - - &__p { - margin-top: 0; - font-size: 13px; - } -} diff --git a/src/app/pages/device-list/device-list.component.html b/src/app/pages/device-list/device-list.component.html index ab6d7f9..5129511 100644 --- a/src/app/pages/device-list/device-list.component.html +++ b/src/app/pages/device-list/device-list.component.html @@ -1,8 +1,10 @@ -
- -

You have no devices at this moment.

- -
+ + + +
+
+

You have no devices at this moment.

+ + + {{ device.displayName }} + entities: {{ device.entities.length }} + + + + + \ No newline at end of file diff --git a/src/app/shared/device-card/device-card.component.scss b/src/app/shared/device-card/device-card.component.scss new file mode 100644 index 0000000..5bbc481 --- /dev/null +++ b/src/app/shared/device-card/device-card.component.scss @@ -0,0 +1,20 @@ +@import "~src/variables.scss"; + +.device-card { + padding: 30px; + + &__content { + display: flex; + flex-direction: column; + align-items: center; + } + + &__title { + margin-top: 30px !important; + } + + &__subtitle { + color: darken($color: $thingoo-text, $amount: 30%); + font-size: 13px; + } +} \ No newline at end of file diff --git a/src/app/pages/device-list/device-card/device-card.component.ts b/src/app/shared/device-card/device-card.component.ts similarity index 60% rename from src/app/pages/device-list/device-card/device-card.component.ts rename to src/app/shared/device-card/device-card.component.ts index 9031611..f57b114 100644 --- a/src/app/pages/device-list/device-card/device-card.component.ts +++ b/src/app/shared/device-card/device-card.component.ts @@ -1,15 +1,17 @@ -import { Component, OnInit, Input } from '@angular/core'; +import { Component, Input, OnInit } from '@angular/core'; import { Device } from 'src/app/api/device.model'; @Component({ selector: 'app-device-card', templateUrl: './device-card.component.html', - styleUrls: ['./device-card.component.scss'], + styleUrls: ['./device-card.component.scss'] }) export class DeviceCardComponent implements OnInit { @Input() device!: Device; - constructor() {} + constructor() { } + + ngOnInit(): void { + } - ngOnInit(): void {} } diff --git a/src/app/shared/device-icon/device-icon.component.html b/src/app/shared/device-icon/device-icon.component.html index b634f73..66db4f6 100644 --- a/src/app/shared/device-icon/device-icon.component.html +++ b/src/app/shared/device-icon/device-icon.component.html @@ -1,6 +1,6 @@
- + {{ iconName }}
diff --git a/src/app/shared/entity-card/entity-card.component.html b/src/app/shared/entity-card/entity-card.component.html index 3483a20..1f7bb39 100644 --- a/src/app/shared/entity-card/entity-card.component.html +++ b/src/app/shared/entity-card/entity-card.component.html @@ -7,4 +7,7 @@ 42 minutes ago
+ + + \ No newline at end of file diff --git a/src/variables.scss b/src/variables.scss index cb19998..c942de9 100644 --- a/src/variables.scss +++ b/src/variables.scss @@ -1,2 +1,5 @@ $thingoo-background: #343434; -$thingoo-text: #FFFFFF; \ No newline at end of file +$thingoo-text: #FFFFFF; + +$section-padding: 40px; +$elements-grid-gap: 15px; \ No newline at end of file From e6b24aa5c3b306a58ffb2c6faa8d02a138cd361a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Piotrek=20Brzezi=C5=84ski?= Date: Sun, 18 Jul 2021 14:58:23 +0200 Subject: [PATCH 11/22] Move under-header content padding to a global class --- src/app/pages/device-details/device-details.component.html | 2 +- src/app/pages/device-details/device-details.component.scss | 2 -- src/app/pages/device-list/device-list.component.html | 2 +- src/app/pages/device-list/device-list.component.scss | 2 -- src/styles.scss | 4 ++++ 5 files changed, 6 insertions(+), 6 deletions(-) diff --git a/src/app/pages/device-details/device-details.component.html b/src/app/pages/device-details/device-details.component.html index 4c71f5d..410b4ee 100644 --- a/src/app/pages/device-details/device-details.component.html +++ b/src/app/pages/device-details/device-details.component.html @@ -15,7 +15,7 @@
-
+

Entities:

diff --git a/src/app/pages/device-details/device-details.component.scss b/src/app/pages/device-details/device-details.component.scss index fd25eab..b8498a9 100644 --- a/src/app/pages/device-details/device-details.component.scss +++ b/src/app/pages/device-details/device-details.component.scss @@ -37,8 +37,6 @@ } &__entities { - padding: $section-padding 0; - .entities-header { color: darken($color: $thingoo-text, $amount: 10%); font-weight: 400; diff --git a/src/app/pages/device-list/device-list.component.html b/src/app/pages/device-list/device-list.component.html index 5129511..41196ca 100644 --- a/src/app/pages/device-list/device-list.component.html +++ b/src/app/pages/device-list/device-list.component.html @@ -2,7 +2,7 @@ sectionSubtitle="See which devices are currently connected."> -
+

You have no devices at this moment.

Date: Sun, 18 Jul 2021 15:01:51 +0200 Subject: [PATCH 12/22] Add section header to dashboard --- src/app/pages/dashboard/dashboard.component.html | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/app/pages/dashboard/dashboard.component.html b/src/app/pages/dashboard/dashboard.component.html index 9c5fce9..e99b46a 100644 --- a/src/app/pages/dashboard/dashboard.component.html +++ b/src/app/pages/dashboard/dashboard.component.html @@ -1 +1,4 @@ -

dashboard works!

+ +
+

Nothing here yet!

+
From d79ce92c7c17c74d813530cc97aff51fc3cc37a4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Piotrek=20Brzezi=C5=84ski?= Date: Sun, 18 Jul 2021 15:04:08 +0200 Subject: [PATCH 13/22] Make compact header the default --- .../device-details.component.html | 2 +- .../section-header.component.html | 2 +- .../section-header.component.scss | 6 +++--- .../section-header/section-header.component.ts | 17 +---------------- 4 files changed, 6 insertions(+), 21 deletions(-) diff --git a/src/app/pages/device-details/device-details.component.html b/src/app/pages/device-details/device-details.component.html index 410b4ee..82bbf1c 100644 --- a/src/app/pages/device-details/device-details.component.html +++ b/src/app/pages/device-details/device-details.component.html @@ -1,4 +1,4 @@ - +
{{ device.displayName }} diff --git a/src/app/shared/section-header/section-header.component.html b/src/app/shared/section-header/section-header.component.html index 44b7378..96e17a1 100644 --- a/src/app/shared/section-header/section-header.component.html +++ b/src/app/shared/section-header/section-header.component.html @@ -1,4 +1,4 @@ -
+
diff --git a/src/app/shared/section-header/section-header.component.scss b/src/app/shared/section-header/section-header.component.scss index 659f444..ebb1326 100644 --- a/src/app/shared/section-header/section-header.component.scss +++ b/src/app/shared/section-header/section-header.component.scss @@ -2,11 +2,11 @@ .section-header { width: 100%; - padding: 60px 0; + padding: 35px 0; background-color: darken($thingoo-background, 5%); - &.compact { - padding: 35px 0; + &.expanded { + padding: 60px 0; } &__content { diff --git a/src/app/shared/section-header/section-header.component.ts b/src/app/shared/section-header/section-header.component.ts index d186cbf..331217b 100644 --- a/src/app/shared/section-header/section-header.component.ts +++ b/src/app/shared/section-header/section-header.component.ts @@ -9,25 +9,10 @@ export class SectionHeaderComponent implements OnInit { @Input() iconName!: string; @Input() sectionTitle: string = ''; @Input() sectionSubtitle: string = ''; - - private _compactRequested: boolean = false; + @Input() isExpanded: boolean = false; constructor() { } ngOnInit(): void { } - - get isCompact() { - if (this._compactRequested) return true; - // Compact mode is on by default if there's no subtitle - if (this.sectionTitle && !this.sectionSubtitle) - return true; - - return false; - } - - @Input() - set isCompact(value: boolean) { - this._compactRequested = value; - } } From 96e7fb3382ecb26d3e7f15eb7ed0862819a06608 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Piotrek=20Brzezi=C5=84ski?= Date: Sun, 18 Jul 2021 15:23:26 +0200 Subject: [PATCH 14/22] Update user profile page --- .../pages/user-profile/user-profile.component.html | 12 ++++++------ .../pages/user-profile/user-profile.component.scss | 6 ++++++ 2 files changed, 12 insertions(+), 6 deletions(-) diff --git a/src/app/pages/user-profile/user-profile.component.html b/src/app/pages/user-profile/user-profile.component.html index a21184a..1b23279 100644 --- a/src/app/pages/user-profile/user-profile.component.html +++ b/src/app/pages/user-profile/user-profile.component.html @@ -1,6 +1,6 @@ - - -

{{ authService.userProfile.preferred_username }}

-

E-mail: {{ authService.userProfile.email }}

- - + + + diff --git a/src/app/pages/user-profile/user-profile.component.scss b/src/app/pages/user-profile/user-profile.component.scss index e69de29..3bc4da6 100644 --- a/src/app/pages/user-profile/user-profile.component.scss +++ b/src/app/pages/user-profile/user-profile.component.scss @@ -0,0 +1,6 @@ +.user-profile { + margin-left: 8vw; + display: flex; + flex-direction: column; + gap: 5px; +} \ No newline at end of file From cb763521aece6df6f2cca66097104bb91d76b9f0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Piotrek=20Brzezi=C5=84ski?= Date: Sun, 18 Jul 2021 15:37:17 +0200 Subject: [PATCH 15/22] Add mat-card hover mixin --- .../device-card/device-card.component.html | 5 +--- .../device-card/device-card.component.scss | 4 ++++ .../entity-card/entity-card.component.html | 3 --- .../entity-card/entity-card.component.scss | 5 ++++ src/mixins.scss | 23 +++++++++++++++++++ 5 files changed, 33 insertions(+), 7 deletions(-) create mode 100644 src/mixins.scss diff --git a/src/app/shared/device-card/device-card.component.html b/src/app/shared/device-card/device-card.component.html index d03438c..ffdbda2 100644 --- a/src/app/shared/device-card/device-card.component.html +++ b/src/app/shared/device-card/device-card.component.html @@ -1,10 +1,7 @@ - + {{ device.displayName }} entities: {{ device.entities.length }} - - - \ No newline at end of file diff --git a/src/app/shared/device-card/device-card.component.scss b/src/app/shared/device-card/device-card.component.scss index 5bbc481..7b0a07e 100644 --- a/src/app/shared/device-card/device-card.component.scss +++ b/src/app/shared/device-card/device-card.component.scss @@ -1,8 +1,12 @@ +@import '~@angular/material/theming'; @import "~src/variables.scss"; +@import "~src/mixins.scss"; .device-card { padding: 30px; + @include mat-card-hover; + &__content { display: flex; flex-direction: column; diff --git a/src/app/shared/entity-card/entity-card.component.html b/src/app/shared/entity-card/entity-card.component.html index 1f7bb39..3483a20 100644 --- a/src/app/shared/entity-card/entity-card.component.html +++ b/src/app/shared/entity-card/entity-card.component.html @@ -7,7 +7,4 @@ 42 minutes ago
- - - \ No newline at end of file diff --git a/src/app/shared/entity-card/entity-card.component.scss b/src/app/shared/entity-card/entity-card.component.scss index e39e22b..42f4592 100644 --- a/src/app/shared/entity-card/entity-card.component.scss +++ b/src/app/shared/entity-card/entity-card.component.scss @@ -1,7 +1,12 @@ +@import '~@angular/material/theming'; @import "~src/variables.scss"; +@import "~src/mixins.scss"; .entity-card { padding: 20px 35px; + + @include mat-card-hover; + &__content { display: flex; flex-direction: column; diff --git a/src/mixins.scss b/src/mixins.scss new file mode 100644 index 0000000..3cf456c --- /dev/null +++ b/src/mixins.scss @@ -0,0 +1,23 @@ +@mixin mat-card-hover { + &::before { + /* this should be transformed into some kind of a mixin at a later date */ + content: " "; + background-color: transparent; + position: absolute; + width: 100%; + height: 100%; + border-radius: 4px; + top: 0; + left: 0; + transition: background-color 280ms cubic-bezier(0.4, 0, 0.2, 1); + } + + &:hover { + @include mat-elevation(5); + cursor: pointer; + + &::before { + background-color: rgba($color: #fff, $alpha: 0.02); + } + } +} \ No newline at end of file From f63a747c7874f8e8c0b5257423dffa51bd539938 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Piotrek=20Brzezi=C5=84ski?= Date: Sun, 18 Jul 2021 15:47:13 +0200 Subject: [PATCH 16/22] Fix final newlines --- src/app/pages/device-details/device-details.component.scss | 2 +- src/app/pages/user-profile/user-profile.component.scss | 2 +- src/app/shared/device-card/device-card.component.html | 2 +- src/app/shared/device-card/device-card.component.scss | 2 +- src/app/shared/device-icon/device-icon.component.scss | 2 +- src/app/shared/entity-card/entity-card.component.html | 2 +- src/app/shared/entity-card/entity-card.component.scss | 2 +- src/app/shared/section-header/section-header.component.scss | 2 +- src/app/shared/value-row/value-row.component.scss | 2 +- src/mixins.scss | 2 +- 10 files changed, 10 insertions(+), 10 deletions(-) diff --git a/src/app/pages/device-details/device-details.component.scss b/src/app/pages/device-details/device-details.component.scss index b8498a9..e369e56 100644 --- a/src/app/pages/device-details/device-details.component.scss +++ b/src/app/pages/device-details/device-details.component.scss @@ -49,4 +49,4 @@ gap: $elements-grid-gap; } } -} \ No newline at end of file +} diff --git a/src/app/pages/user-profile/user-profile.component.scss b/src/app/pages/user-profile/user-profile.component.scss index 3bc4da6..e194e67 100644 --- a/src/app/pages/user-profile/user-profile.component.scss +++ b/src/app/pages/user-profile/user-profile.component.scss @@ -3,4 +3,4 @@ display: flex; flex-direction: column; gap: 5px; -} \ No newline at end of file +} diff --git a/src/app/shared/device-card/device-card.component.html b/src/app/shared/device-card/device-card.component.html index ffdbda2..2bc087e 100644 --- a/src/app/shared/device-card/device-card.component.html +++ b/src/app/shared/device-card/device-card.component.html @@ -4,4 +4,4 @@ {{ device.displayName }} entities: {{ device.entities.length }} - \ No newline at end of file + diff --git a/src/app/shared/device-card/device-card.component.scss b/src/app/shared/device-card/device-card.component.scss index 7b0a07e..e771e1e 100644 --- a/src/app/shared/device-card/device-card.component.scss +++ b/src/app/shared/device-card/device-card.component.scss @@ -21,4 +21,4 @@ color: darken($color: $thingoo-text, $amount: 30%); font-size: 13px; } -} \ No newline at end of file +} diff --git a/src/app/shared/device-icon/device-icon.component.scss b/src/app/shared/device-icon/device-icon.component.scss index 6dde61d..0e6de7c 100644 --- a/src/app/shared/device-icon/device-icon.component.scss +++ b/src/app/shared/device-icon/device-icon.component.scss @@ -7,4 +7,4 @@ border-radius: 50%; background-color: transparentize($color: white, $amount: 0.8) } -} \ No newline at end of file +} diff --git a/src/app/shared/entity-card/entity-card.component.html b/src/app/shared/entity-card/entity-card.component.html index 3483a20..a172d77 100644 --- a/src/app/shared/entity-card/entity-card.component.html +++ b/src/app/shared/entity-card/entity-card.component.html @@ -7,4 +7,4 @@ 42 minutes ago
- \ No newline at end of file + diff --git a/src/app/shared/entity-card/entity-card.component.scss b/src/app/shared/entity-card/entity-card.component.scss index 42f4592..af3f5c6 100644 --- a/src/app/shared/entity-card/entity-card.component.scss +++ b/src/app/shared/entity-card/entity-card.component.scss @@ -27,4 +27,4 @@ color: darken($color: $thingoo-text, $amount: 30%); font-size: 13px; } -} \ No newline at end of file +} diff --git a/src/app/shared/section-header/section-header.component.scss b/src/app/shared/section-header/section-header.component.scss index ebb1326..7d751be 100644 --- a/src/app/shared/section-header/section-header.component.scss +++ b/src/app/shared/section-header/section-header.component.scss @@ -33,4 +33,4 @@ } } } -} \ No newline at end of file +} diff --git a/src/app/shared/value-row/value-row.component.scss b/src/app/shared/value-row/value-row.component.scss index ac55048..5fb5191 100644 --- a/src/app/shared/value-row/value-row.component.scss +++ b/src/app/shared/value-row/value-row.component.scss @@ -13,4 +13,4 @@ &__value { color: darken($color: $thingoo-text, $amount: 20%); } -} \ No newline at end of file +} diff --git a/src/mixins.scss b/src/mixins.scss index 3cf456c..d6a637a 100644 --- a/src/mixins.scss +++ b/src/mixins.scss @@ -20,4 +20,4 @@ background-color: rgba($color: #fff, $alpha: 0.02); } } -} \ No newline at end of file +} From 824f3af14a22ecdfc4132e45301b4aef1cb4e1db Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Piotrek=20Brzezi=C5=84ski?= Date: Sun, 18 Jul 2021 15:53:51 +0200 Subject: [PATCH 17/22] Fix unneeded type annotations --- src/app/shared/section-header/section-header.component.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/app/shared/section-header/section-header.component.ts b/src/app/shared/section-header/section-header.component.ts index 331217b..912dd02 100644 --- a/src/app/shared/section-header/section-header.component.ts +++ b/src/app/shared/section-header/section-header.component.ts @@ -7,9 +7,9 @@ import { Component, Input, OnInit } from '@angular/core'; }) export class SectionHeaderComponent implements OnInit { @Input() iconName!: string; - @Input() sectionTitle: string = ''; - @Input() sectionSubtitle: string = ''; - @Input() isExpanded: boolean = false; + @Input() sectionTitle = ''; + @Input() sectionSubtitle = ''; + @Input() isExpanded = false; constructor() { } From 6d046dd871755c3d29accafcaca1d55980334052 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Piotrek=20Brzezi=C5=84ski?= Date: Sun, 18 Jul 2021 15:54:56 +0200 Subject: [PATCH 18/22] Remove TODO --- src/app/shared/device-icon/device-icon.component.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/src/app/shared/device-icon/device-icon.component.ts b/src/app/shared/device-icon/device-icon.component.ts index 9e4c3a3..1627cc3 100644 --- a/src/app/shared/device-icon/device-icon.component.ts +++ b/src/app/shared/device-icon/device-icon.component.ts @@ -8,7 +8,6 @@ import { MaterialIcon } from 'src/app/api/material-icon.model'; }) export class DeviceIconComponent implements OnInit { @Input() size!: number; - // TOOD: use MaterialIcon here @Input() iconName!: string; constructor() { } From 57b5a8ec0b74d51eb5ace043a6b10a44c327099e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Piotrek=20Brzezi=C5=84ski?= Date: Sun, 18 Jul 2021 15:56:14 +0200 Subject: [PATCH 19/22] Remove unneeded import --- src/app/shared/device-icon/device-icon.component.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/src/app/shared/device-icon/device-icon.component.ts b/src/app/shared/device-icon/device-icon.component.ts index 1627cc3..30b8976 100644 --- a/src/app/shared/device-icon/device-icon.component.ts +++ b/src/app/shared/device-icon/device-icon.component.ts @@ -1,5 +1,4 @@ import { Component, Input, OnInit } from '@angular/core'; -import { MaterialIcon } from 'src/app/api/material-icon.model'; @Component({ selector: 'app-device-icon', From 8a386a8ed76a5887c8bcbb1af3ff03a346057311 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Piotrek=20Brzezi=C5=84ski?= Date: Sun, 18 Jul 2021 15:59:42 +0200 Subject: [PATCH 20/22] Add final newline --- src/variables.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/variables.scss b/src/variables.scss index c942de9..55e6ecd 100644 --- a/src/variables.scss +++ b/src/variables.scss @@ -2,4 +2,4 @@ $thingoo-background: #343434; $thingoo-text: #FFFFFF; $section-padding: 40px; -$elements-grid-gap: 15px; \ No newline at end of file +$elements-grid-gap: 15px; From 7fcafa779529346148f2f044d1bfc5051bf7e23d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Piotrek=20Brzezi=C5=84ski?= Date: Sun, 18 Jul 2021 16:47:38 +0200 Subject: [PATCH 21/22] Remove whitespace --- src/mixins.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/mixins.scss b/src/mixins.scss index d6a637a..9743a6f 100644 --- a/src/mixins.scss +++ b/src/mixins.scss @@ -15,7 +15,7 @@ &:hover { @include mat-elevation(5); cursor: pointer; - + &::before { background-color: rgba($color: #fff, $alpha: 0.02); } From 5910e1945af69761d119e6ef8d0cebc122aa510c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Piotrek=20Brzezi=C5=84ski?= Date: Sun, 18 Jul 2021 17:28:15 +0200 Subject: [PATCH 22/22] Format CSS/HTML with prettier --- .../pages/dashboard/dashboard.component.html | 7 ++- .../device-details.component.html | 45 +++++++++++------ .../device-list/device-list.component.html | 11 ++-- .../user-profile/user-profile.component.html | 12 ++++- .../user-profile/user-profile.component.scss | 8 +-- .../device-card/device-card.component.html | 18 +++++-- .../device-card/device-card.component.scss | 30 +++++------ .../device-card/device-card.component.ts | 8 ++- .../device-icon/device-icon.component.html | 13 +++-- .../device-icon/device-icon.component.scss | 14 +++--- .../device-icon/device-icon.component.ts | 8 ++- .../entity-card/entity-card.component.html | 20 +++++--- .../entity-card/entity-card.component.scss | 40 +++++++-------- .../entity-card/entity-card.component.ts | 8 ++- .../section-header.component.html | 17 ++++--- .../section-header.component.scss | 50 +++++++++---------- .../section-header.component.ts | 7 ++- .../shared/value-row/value-row.component.html | 13 +++-- .../shared/value-row/value-row.component.scss | 20 ++++---- .../shared/value-row/value-row.component.ts | 8 ++- src/mixins.scss | 2 +- src/variables.scss | 2 +- 22 files changed, 199 insertions(+), 162 deletions(-) diff --git a/src/app/pages/dashboard/dashboard.component.html b/src/app/pages/dashboard/dashboard.component.html index e99b46a..c936217 100644 --- a/src/app/pages/dashboard/dashboard.component.html +++ b/src/app/pages/dashboard/dashboard.component.html @@ -1,4 +1,7 @@ - +
-

Nothing here yet!

+

Nothing here yet!

diff --git a/src/app/pages/device-details/device-details.component.html b/src/app/pages/device-details/device-details.component.html index 82bbf1c..5786bc1 100644 --- a/src/app/pages/device-details/device-details.component.html +++ b/src/app/pages/device-details/device-details.component.html @@ -1,23 +1,38 @@ - -
- - {{ device.displayName }} - -
- {{ device.entities.length }} - ENTITIES -
-
-
-
- - + +
+ + {{ device.displayName }} + +
+ {{ device.entities.length }} + ENTITIES
+
+
+
+ + +

Entities:

- +
diff --git a/src/app/pages/device-list/device-list.component.html b/src/app/pages/device-list/device-list.component.html index 41196ca..4382ef4 100644 --- a/src/app/pages/device-list/device-list.component.html +++ b/src/app/pages/device-list/device-list.component.html @@ -1,10 +1,15 @@ - +
-

You have no devices at this moment.

+

+ You have no devices at this moment. +

diff --git a/src/app/pages/user-profile/user-profile.component.scss b/src/app/pages/user-profile/user-profile.component.scss index e194e67..e55a814 100644 --- a/src/app/pages/user-profile/user-profile.component.scss +++ b/src/app/pages/user-profile/user-profile.component.scss @@ -1,6 +1,6 @@ .user-profile { - margin-left: 8vw; - display: flex; - flex-direction: column; - gap: 5px; + margin-left: 8vw; + display: flex; + flex-direction: column; + gap: 5px; } diff --git a/src/app/shared/device-card/device-card.component.html b/src/app/shared/device-card/device-card.component.html index 2bc087e..5d92d9d 100644 --- a/src/app/shared/device-card/device-card.component.html +++ b/src/app/shared/device-card/device-card.component.html @@ -1,7 +1,15 @@ - - - {{ device.displayName }} - entities: {{ device.entities.length }} - + + + {{ + device.displayName + }} + entities: {{ device.entities.length }} + diff --git a/src/app/shared/device-card/device-card.component.scss b/src/app/shared/device-card/device-card.component.scss index e771e1e..6a5aca7 100644 --- a/src/app/shared/device-card/device-card.component.scss +++ b/src/app/shared/device-card/device-card.component.scss @@ -1,24 +1,24 @@ -@import '~@angular/material/theming'; +@import "~@angular/material/theming"; @import "~src/variables.scss"; @import "~src/mixins.scss"; .device-card { - padding: 30px; + padding: 30px; - @include mat-card-hover; + @include mat-card-hover; - &__content { - display: flex; - flex-direction: column; - align-items: center; - } + &__content { + display: flex; + flex-direction: column; + align-items: center; + } - &__title { - margin-top: 30px !important; - } + &__title { + margin-top: 30px !important; + } - &__subtitle { - color: darken($color: $thingoo-text, $amount: 30%); - font-size: 13px; - } + &__subtitle { + color: darken($color: $thingoo-text, $amount: 30%); + font-size: 13px; + } } diff --git a/src/app/shared/device-card/device-card.component.ts b/src/app/shared/device-card/device-card.component.ts index f57b114..f99e149 100644 --- a/src/app/shared/device-card/device-card.component.ts +++ b/src/app/shared/device-card/device-card.component.ts @@ -4,14 +4,12 @@ import { Device } from 'src/app/api/device.model'; @Component({ selector: 'app-device-card', templateUrl: './device-card.component.html', - styleUrls: ['./device-card.component.scss'] + styleUrls: ['./device-card.component.scss'], }) export class DeviceCardComponent implements OnInit { @Input() device!: Device; - constructor() { } - - ngOnInit(): void { - } + constructor() {} + ngOnInit(): void {} } diff --git a/src/app/shared/device-icon/device-icon.component.html b/src/app/shared/device-icon/device-icon.component.html index 66db4f6..22c5b2a 100644 --- a/src/app/shared/device-icon/device-icon.component.html +++ b/src/app/shared/device-icon/device-icon.component.html @@ -1,7 +1,10 @@
-
- - {{ iconName }} - -
+
+ + {{ iconName }} + +
diff --git a/src/app/shared/device-icon/device-icon.component.scss b/src/app/shared/device-icon/device-icon.component.scss index 0e6de7c..12bb1eb 100644 --- a/src/app/shared/device-icon/device-icon.component.scss +++ b/src/app/shared/device-icon/device-icon.component.scss @@ -1,10 +1,10 @@ .device-icon { - &__container { - display: flex; - justify-content: center; - align-items: center; + &__container { + display: flex; + justify-content: center; + align-items: center; - border-radius: 50%; - background-color: transparentize($color: white, $amount: 0.8) - } + border-radius: 50%; + background-color: transparentize($color: white, $amount: 0.8); + } } diff --git a/src/app/shared/device-icon/device-icon.component.ts b/src/app/shared/device-icon/device-icon.component.ts index 30b8976..fa5916e 100644 --- a/src/app/shared/device-icon/device-icon.component.ts +++ b/src/app/shared/device-icon/device-icon.component.ts @@ -3,15 +3,13 @@ import { Component, Input, OnInit } from '@angular/core'; @Component({ selector: 'app-device-icon', templateUrl: './device-icon.component.html', - styleUrls: ['./device-icon.component.scss'] + styleUrls: ['./device-icon.component.scss'], }) export class DeviceIconComponent implements OnInit { @Input() size!: number; @Input() iconName!: string; - constructor() { } - - ngOnInit(): void { - } + constructor() {} + ngOnInit(): void {} } diff --git a/src/app/shared/entity-card/entity-card.component.html b/src/app/shared/entity-card/entity-card.component.html index a172d77..b412025 100644 --- a/src/app/shared/entity-card/entity-card.component.html +++ b/src/app/shared/entity-card/entity-card.component.html @@ -1,10 +1,14 @@ - - - {{ entity.displayName }} - 24 dB -
- 42 minutes ago -
- + + + {{ + entity.displayName + }} + 24 dB +
42 minutes ago
+ diff --git a/src/app/shared/entity-card/entity-card.component.scss b/src/app/shared/entity-card/entity-card.component.scss index af3f5c6..b7308f6 100644 --- a/src/app/shared/entity-card/entity-card.component.scss +++ b/src/app/shared/entity-card/entity-card.component.scss @@ -1,30 +1,30 @@ -@import '~@angular/material/theming'; +@import "~@angular/material/theming"; @import "~src/variables.scss"; @import "~src/mixins.scss"; .entity-card { - padding: 20px 35px; + padding: 20px 35px; - @include mat-card-hover; + @include mat-card-hover; - &__content { - display: flex; - flex-direction: column; - align-items: center; - } + &__content { + display: flex; + flex-direction: column; + align-items: center; + } - &__name { - margin-top: 12px !important; - margin-bottom: 30px; - font-size: 16px; - } + &__name { + margin-top: 12px !important; + margin-bottom: 30px; + font-size: 16px; + } - &__value { - font-size: 24px; - } + &__value { + font-size: 24px; + } - &__timestamp { - color: darken($color: $thingoo-text, $amount: 30%); - font-size: 13px; - } + &__timestamp { + color: darken($color: $thingoo-text, $amount: 30%); + font-size: 13px; + } } diff --git a/src/app/shared/entity-card/entity-card.component.ts b/src/app/shared/entity-card/entity-card.component.ts index 69cb74f..0ac2500 100644 --- a/src/app/shared/entity-card/entity-card.component.ts +++ b/src/app/shared/entity-card/entity-card.component.ts @@ -4,14 +4,12 @@ import { Entity } from 'src/app/api/entity.model'; @Component({ selector: 'app-entity-card', templateUrl: './entity-card.component.html', - styleUrls: ['./entity-card.component.scss'] + styleUrls: ['./entity-card.component.scss'], }) export class EntityCardComponent implements OnInit { @Input() entity!: Entity; - constructor() { } - - ngOnInit(): void { - } + constructor() {} + ngOnInit(): void {} } diff --git a/src/app/shared/section-header/section-header.component.html b/src/app/shared/section-header/section-header.component.html index 96e17a1..707d37c 100644 --- a/src/app/shared/section-header/section-header.component.html +++ b/src/app/shared/section-header/section-header.component.html @@ -1,11 +1,12 @@
-
- -
-
{{ sectionTitle }}
-
{{ sectionSubtitle }}
-
- +
+ +
+
{{ sectionTitle }}
+
+ {{ sectionSubtitle }} +
+ +
- diff --git a/src/app/shared/section-header/section-header.component.scss b/src/app/shared/section-header/section-header.component.scss index 7d751be..a75b110 100644 --- a/src/app/shared/section-header/section-header.component.scss +++ b/src/app/shared/section-header/section-header.component.scss @@ -1,36 +1,36 @@ @import "~src/variables.scss"; .section-header { - width: 100%; - padding: 35px 0; - background-color: darken($thingoo-background, 5%); + width: 100%; + padding: 35px 0; + background-color: darken($thingoo-background, 5%); - &.expanded { - padding: 60px 0; - } + &.expanded { + padding: 60px 0; + } - &__content { - display: flex; - flex-direction: row; - align-items: center; - gap: 15px; + &__content { + display: flex; + flex-direction: row; + align-items: center; + gap: 15px; - color: $thingoo-text; + color: $thingoo-text; - .section-title { - display: flex; - flex-direction: column; - gap: 10px; + .section-title { + display: flex; + flex-direction: column; + gap: 10px; - .title-text { - font-size: 26px; - font-weight: 300; - } + .title-text { + font-size: 26px; + font-weight: 300; + } - .subtitle-text { - font-size: 18px; - color: darken($color: $thingoo-text, $amount: 40%); - } - } + .subtitle-text { + font-size: 18px; + color: darken($color: $thingoo-text, $amount: 40%); + } } + } } diff --git a/src/app/shared/section-header/section-header.component.ts b/src/app/shared/section-header/section-header.component.ts index 912dd02..0c59532 100644 --- a/src/app/shared/section-header/section-header.component.ts +++ b/src/app/shared/section-header/section-header.component.ts @@ -3,7 +3,7 @@ import { Component, Input, OnInit } from '@angular/core'; @Component({ selector: 'app-section-header', templateUrl: './section-header.component.html', - styleUrls: ['./section-header.component.scss'] + styleUrls: ['./section-header.component.scss'], }) export class SectionHeaderComponent implements OnInit { @Input() iconName!: string; @@ -11,8 +11,7 @@ export class SectionHeaderComponent implements OnInit { @Input() sectionSubtitle = ''; @Input() isExpanded = false; - constructor() { } + constructor() {} - ngOnInit(): void { - } + ngOnInit(): void {} } diff --git a/src/app/shared/value-row/value-row.component.html b/src/app/shared/value-row/value-row.component.html index 9021f63..f6175b6 100644 --- a/src/app/shared/value-row/value-row.component.html +++ b/src/app/shared/value-row/value-row.component.html @@ -1,9 +1,8 @@
-
- {{ this.name.toUpperCase() }} -
- - {{ this.value }} - +
+ {{ this.name.toUpperCase() }} +
+ + {{ this.value }} +
- diff --git a/src/app/shared/value-row/value-row.component.scss b/src/app/shared/value-row/value-row.component.scss index 5fb5191..8683da7 100644 --- a/src/app/shared/value-row/value-row.component.scss +++ b/src/app/shared/value-row/value-row.component.scss @@ -1,16 +1,16 @@ @import "~src/variables.scss"; .value-row { - display: flex; - flex-direction: row; - font-size: 18px; - font-weight: 500; + display: flex; + flex-direction: row; + font-size: 18px; + font-weight: 500; - &__name { - color: darken($color: $thingoo-text, $amount: 40%); - } + &__name { + color: darken($color: $thingoo-text, $amount: 40%); + } - &__value { - color: darken($color: $thingoo-text, $amount: 20%); - } + &__value { + color: darken($color: $thingoo-text, $amount: 20%); + } } diff --git a/src/app/shared/value-row/value-row.component.ts b/src/app/shared/value-row/value-row.component.ts index 10bdd20..8a77c53 100644 --- a/src/app/shared/value-row/value-row.component.ts +++ b/src/app/shared/value-row/value-row.component.ts @@ -3,16 +3,14 @@ import { Component, Input, OnInit } from '@angular/core'; @Component({ selector: 'app-value-row', templateUrl: './value-row.component.html', - styleUrls: ['./value-row.component.scss'] + styleUrls: ['./value-row.component.scss'], }) export class ValueRowComponent implements OnInit { @Input() nameWidth!: number; @Input() name!: string; @Input() value!: string; - constructor() { } - - ngOnInit(): void { - } + constructor() {} + ngOnInit(): void {} } diff --git a/src/mixins.scss b/src/mixins.scss index 9743a6f..6ae6f2c 100644 --- a/src/mixins.scss +++ b/src/mixins.scss @@ -17,7 +17,7 @@ cursor: pointer; &::before { - background-color: rgba($color: #fff, $alpha: 0.02); + background-color: rgba($color: #fff, $alpha: 0.02); } } } diff --git a/src/variables.scss b/src/variables.scss index 55e6ecd..092876f 100644 --- a/src/variables.scss +++ b/src/variables.scss @@ -1,5 +1,5 @@ $thingoo-background: #343434; -$thingoo-text: #FFFFFF; +$thingoo-text: #ffffff; $section-padding: 40px; $elements-grid-gap: 15px;