fix: fix ui composition

nvsukhanov · Aug 21, 2023 · 97baaf6 · 97baaf6
1 parent a9a8982
commit 97baaf6
Show file tree

Hide file tree

Showing 5 changed files with 48 additions and 26 deletions.
diff --git a/src/app/control-schemes/control-scheme-list-page/control-scheme-list-page.component.html b/src/app/control-schemes/control-scheme-list-page/control-scheme-list-page.component.html
@@ -1,16 +1,23 @@
 <ng-container *ngrxLet="controlSchemes$; let controlSchemes">
-    <mat-card *ngIf="controlSchemes?.length; else noControlSchemes">
-        <mat-card-content>
-            <mat-nav-list>
-                <a *ngFor="let scheme of controlSchemes; trackBy: trackSchemeById"
-                   mat-list-item
-                   [routerLink]="scheme | controlSchemeViewUrl"
-                >
-                    {{ scheme.name }}
-                </a>
-            </mat-nav-list>
-        </mat-card-content>
-    </mat-card>
+    <ng-container *ngIf="controlSchemes?.length; else noControlSchemes">
+        <ul>
+            <li *ngFor="let scheme of controlSchemes; trackBy: trackSchemeById"
+                class="card-list-item"
+            >
+                <mat-card>
+                    <mat-card-header class="control-scheme-name-container">
+                        <mat-card-title>
+                            <a mat-button
+                               [routerLink]="scheme | controlSchemeViewUrl"
+                            >
+                                {{ scheme.name }}
+                            </a>
+                        </mat-card-title>
+                    </mat-card-header>
+                </mat-card>
+            </li>
+        </ul>
+    </ng-container>
 
     <ng-template #noControlSchemes>
         <app-hint [hintL10nKey]="'controlScheme.noControlSchemes'"></app-hint>

diff --git a/src/app/control-schemes/control-scheme-list-page/control-scheme-list-page.component.scss b/src/app/control-schemes/control-scheme-list-page/control-scheme-list-page.component.scss
@@ -3,3 +3,11 @@
     height: 100%;
     flex-direction: column;
 }
+
+.control-scheme-name-container {
+    height: 48px;
+    padding: 0 24px;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+}
diff --git a/src/app/controllers/controllers-list/controllers-list.component.html b/src/app/controllers/controllers-list/controllers-list.component.html
@@ -1,6 +1,5 @@
 <ng-container *ngrxLet="controllersWithSettings$ as controllersWithSettings">
     <ng-container *ngIf="controllersWithSettings.length; else noConnectedControllers">
-        <app-hint [hintL10nKey]="'controller.detectControllerTip'"></app-hint>
         <ul>
             <li *ngFor="let controllerWithSettings of controllersWithSettings; trackBy: controllerTrackById"
                 class="card-list-item"

diff --git a/src/app/hubs/hubs-list/hubs-list.component.html b/src/app/hubs/hubs-list/hubs-list.component.html
@@ -3,17 +3,21 @@
         <li *ngFor="let hub of hubsList; trackBy: hubTrackByFn"
             class="card-list-item"
         >
-            <mat-card class="hub-card">
-                <app-hub-inline-view [hubId]="hub.hubId"
-                                     [name]="hub.name"
-                                     [batteryLevel]="hub.batteryLevel"
-                                     [rssiLevel]="hub.rssi"
-                                     [isButtonPressed]="hub.isButtonPressed"
-                                     [hasCommunication]="hub.hasCommunication"
-                                     [isConnected]="hub.isConnected"
-                                     (disconnect)="disconnectHub(hub.hubId)"
-                                     (forget)="forgetHub(hub.hubId)"
-                ></app-hub-inline-view>
+            <mat-card>
+                <mat-card-header class="hub-name-container">
+                    <mat-card-title>
+                        <app-hub-inline-view [hubId]="hub.hubId"
+                                             [name]="hub.name"
+                                             [batteryLevel]="hub.batteryLevel"
+                                             [rssiLevel]="hub.rssi"
+                                             [isButtonPressed]="hub.isButtonPressed"
+                                             [hasCommunication]="hub.hasCommunication"
+                                             [isConnected]="hub.isConnected"
+                                             (disconnect)="disconnectHub(hub.hubId)"
+                                             (forget)="forgetHub(hub.hubId)"
+                        ></app-hub-inline-view>
+                    </mat-card-title>
+                </mat-card-header>
             </mat-card>
         </li>
     </ul>

diff --git a/src/app/hubs/hubs-list/hubs-list.component.scss b/src/app/hubs/hubs-list/hubs-list.component.scss
@@ -4,6 +4,10 @@
     height: 100%;
 }
 
-.hub-card {
-    padding: 10px 10px 10px 20px;
+.hub-name-container {
+    height: 48px;
+    padding: 0 24px;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
 }