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..9472fc9 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -16,8 +16,12 @@ 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'; +import { ValueRowComponent } from './shared/value-row/value-row.component'; +import { EntityCardComponent } from './shared/entity-card/entity-card.component'; @NgModule({ declarations: [ @@ -29,6 +33,10 @@ import { DeviceDetailsComponent } from './pages/device-details/device-details.co DeviceListComponent, DeviceCardComponent, DeviceDetailsComponent, + SectionHeaderComponent, + DeviceIconComponent, + ValueRowComponent, + EntityCardComponent, ], imports: [ MatToolbarModule, diff --git a/src/app/pages/dashboard/dashboard.component.html b/src/app/pages/dashboard/dashboard.component.html index 9c5fce9..c936217 100644 --- a/src/app/pages/dashboard/dashboard.component.html +++ b/src/app/pages/dashboard/dashboard.component.html @@ -1 +1,7 @@ -

dashboard works!

+ +
+

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 2ce940d..5786bc1 100644 --- a/src/app/pages/device-details/device-details.component.html +++ b/src/app/pages/device-details/device-details.component.html @@ -1,45 +1,38 @@ -
- -
-
-
-
-
-
-

{{ device.displayName }}

-

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

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

Entities:

-
- -
-

- {{ entity.displayName }} -

-

92 dB

-
13 minutes ago
-
+ +
+ + {{ device.displayName }} + +
+ {{ device.entities.length }} + ENTITIES
- +
+
+
+ + +
+
+ +
+

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..e369e56 100644 --- a/src/app/pages/device-details/device-details.component.scss +++ b/src/app/pages/device-details/device-details.component.scss @@ -1,100 +1,52 @@ -.device-details-page-wrapper { - width: 100vw; - max-width: 1000px; - - 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; - - .header-flex-column { - 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; +@import "~src/variables.scss"; + +.device-details { + &__header { + .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 { + gap: 8px; } } -} - -.entity-item { - display: flex; - justify-content: center; - flex-direction: column; - align-items: center; - width: 120px; - &::before { - content: " "; - background-color: rgba($color: #fff, $alpha: 0.07); - position: absolute; - width: 100%; - height: 100%; - border-radius: 4px; - } + &__entities { + .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: $elements-grid-gap; + } } } - -.icon { - width: 60px; - height: 60px; - border-radius: 50%; - background-color: lightgray; -} 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..4382ef4 100644 --- a/src/app/pages/device-list/device-list.component.html +++ b/src/app/pages/device-list/device-list.component.html @@ -1,8 +1,15 @@ -
- -

You have no devices at this moment.

-
-
+ + + +
+
+

+ You have no devices at this moment. +

- -

{{ 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..e55a814 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; +} diff --git a/src/app/shared/device-card/device-card.component.html b/src/app/shared/device-card/device-card.component.html new file mode 100644 index 0000000..5d92d9d --- /dev/null +++ b/src/app/shared/device-card/device-card.component.html @@ -0,0 +1,15 @@ + + + + {{ + 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 new file mode 100644 index 0000000..6a5aca7 --- /dev/null +++ b/src/app/shared/device-card/device-card.component.scss @@ -0,0 +1,24 @@ +@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; + align-items: center; + } + + &__title { + margin-top: 30px !important; + } + + &__subtitle { + color: darken($color: $thingoo-text, $amount: 30%); + font-size: 13px; + } +} 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 84% 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..f99e149 100644 --- a/src/app/pages/device-list/device-card/device-card.component.ts +++ b/src/app/shared/device-card/device-card.component.ts @@ -1,4 +1,4 @@ -import { Component, OnInit, Input } from '@angular/core'; +import { Component, Input, OnInit } from '@angular/core'; import { Device } from 'src/app/api/device.model'; @Component({ 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..22c5b2a --- /dev/null +++ b/src/app/shared/device-icon/device-icon.component.html @@ -0,0 +1,10 @@ +
+
+ + {{ 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..12bb1eb --- /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); + } +} 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..fa5916e --- /dev/null +++ b/src/app/shared/device-icon/device-icon.component.ts @@ -0,0 +1,15 @@ +import { Component, Input, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-device-icon', + templateUrl: './device-icon.component.html', + styleUrls: ['./device-icon.component.scss'], +}) +export class DeviceIconComponent implements OnInit { + @Input() size!: number; + @Input() iconName!: string; + + 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 new file mode 100644 index 0000000..b412025 --- /dev/null +++ b/src/app/shared/entity-card/entity-card.component.html @@ -0,0 +1,14 @@ + + + + {{ + 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 new file mode 100644 index 0000000..b7308f6 --- /dev/null +++ b/src/app/shared/entity-card/entity-card.component.scss @@ -0,0 +1,30 @@ +@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; + 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; + } +} 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..0ac2500 --- /dev/null +++ b/src/app/shared/entity-card/entity-card.component.ts @@ -0,0 +1,15 @@ +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 {} +} 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..707d37c --- /dev/null +++ b/src/app/shared/section-header/section-header.component.html @@ -0,0 +1,12 @@ +
+
+ +
+
{{ sectionTitle }}
+
+ {{ sectionSubtitle }} +
+
+ +
+
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..a75b110 --- /dev/null +++ b/src/app/shared/section-header/section-header.component.scss @@ -0,0 +1,36 @@ +@import "~src/variables.scss"; + +.section-header { + width: 100%; + padding: 35px 0; + background-color: darken($thingoo-background, 5%); + + &.expanded { + padding: 60px 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%); + } + } + } +} 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..0c59532 --- /dev/null +++ b/src/app/shared/section-header/section-header.component.ts @@ -0,0 +1,17 @@ +import { Component, Input, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-section-header', + templateUrl: './section-header.component.html', + styleUrls: ['./section-header.component.scss'], +}) +export class SectionHeaderComponent implements OnInit { + @Input() iconName!: string; + @Input() sectionTitle = ''; + @Input() sectionSubtitle = ''; + @Input() isExpanded = false; + + constructor() {} + + ngOnInit(): void {} +} 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..f6175b6 --- /dev/null +++ b/src/app/shared/value-row/value-row.component.html @@ -0,0 +1,8 @@ +
+
+ {{ 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..8683da7 --- /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%); + } +} 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..8a77c53 --- /dev/null +++ b/src/app/shared/value-row/value-row.component.ts @@ -0,0 +1,16 @@ +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/mixins.scss b/src/mixins.scss new file mode 100644 index 0000000..6ae6f2c --- /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); + } + } +} diff --git a/src/styles.scss b/src/styles.scss index 1392cce..7748ca9 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 { @@ -45,11 +46,18 @@ 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; +} + +.padded-content { + padding: $section-padding 0; } .mat-app-background { min-height: 100%; + background-color: $thingoo-background; } diff --git a/src/variables.scss b/src/variables.scss new file mode 100644 index 0000000..092876f --- /dev/null +++ b/src/variables.scss @@ -0,0 +1,5 @@ +$thingoo-background: #343434; +$thingoo-text: #ffffff; + +$section-padding: 40px; +$elements-grid-gap: 15px;