Cosmetics

albaintor · Sep 24, 2024 · dea5a94 · dea5a94
1 parent 875c5f5
commit dea5a94
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 20 deletions.
diff --git a/src/app/activity-viewer/activity-viewer.component.html b/src/app/activity-viewer/activity-viewer.component.html
@@ -102,31 +102,39 @@ <h3>Buttons mapping for {{getRemoteModel()?.name}}</h3>
     </div>
   </div>
   <div class="flex align-items-start justify-content-center" style="width: 400px">
-    <div class="flex-grow-1 flex-column">
-    <h3>{{mouseOverButtonName!}}</h3>
+    <div class="flex-grow-1 flex-column column-gap-3">
+      <div class="flex align-items-start justify-content-center">
+        <h3>{{mouseOverButtonName!}}</h3>
+      </div>
     <ng-container *ngIf="mouseoverButton && mouseoverButton.short_press">
-      <br><b>Short press</b> :
-      <p-chip [label]="getEntityName(mouseoverButton.short_press.entity_id)"
-              [style]="getStyle(getEntityName(mouseoverButton.short_press.entity_id))"></p-chip>&nbsp;
-      <p-chip [label]="mouseoverButton.short_press.cmd_id" styleClass="chip-command"
-              [style]="getStyle(mouseoverButton.short_press.cmd_id)"></p-chip>
+      <div class="flex align-items-start gap-1">
+        <p-tag severity="success" value="Short press"/>
+        <p-chip [label]="getEntityName(mouseoverButton.short_press.entity_id)"
+                [style]="getStyle(getEntityName(mouseoverButton.short_press.entity_id))"></p-chip>&nbsp;
+        <p-chip [label]="mouseoverButton.short_press.cmd_id" styleClass="chip-command"
+                [style]="getStyle(mouseoverButton.short_press.cmd_id)"></p-chip>
       <ng-container *ngIf="mouseoverButton.short_press.params">{{getParams(mouseoverButton.short_press)}}</ng-container>
+      </div>
     </ng-container>
     <ng-container *ngIf="mouseoverButton && mouseoverButton.long_press">
-      <br><b>Long press</b> :
-      <p-chip [label]="getEntityName(mouseoverButton.long_press.entity_id)"
-              [style]="getStyle(getEntityName(mouseoverButton.long_press.entity_id))"></p-chip>&nbsp;
-      <p-chip [label]="mouseoverButton.long_press.cmd_id" styleClass="chip-command"
-              [style]="getStyle(mouseoverButton.long_press.cmd_id)"></p-chip>
-      <ng-container *ngIf="mouseoverButton.long_press.params">{{getParams(mouseoverButton.long_press)}}</ng-container>
+      <div class="flex align-items-start gap-1">
+        <p-tag severity="warning" value="Long press"/>
+        <p-chip [label]="getEntityName(mouseoverButton.long_press.entity_id)"
+                [style]="getStyle(getEntityName(mouseoverButton.long_press.entity_id))"></p-chip>&nbsp;
+        <p-chip [label]="mouseoverButton.long_press.cmd_id" styleClass="chip-command"
+                [style]="getStyle(mouseoverButton.long_press.cmd_id)"></p-chip>
+        <ng-container *ngIf="mouseoverButton.long_press.params">{{getParams(mouseoverButton.long_press)}}</ng-container>
+      </div>
     </ng-container>
     <ng-container *ngIf="mouseoverButton && mouseoverButton.double_press">
-      <br><b>Double press</b> :
-      <p-chip [label]="getEntityName(mouseoverButton.double_press.entity_id)"
-              [style]="getStyle(getEntityName(mouseoverButton.double_press.entity_id))"></p-chip>&nbsp;
-      <p-chip [label]="mouseoverButton.double_press.cmd_id" styleClass="chip-command"
-              [style]="getStyle(mouseoverButton.double_press.cmd_id)"></p-chip>
-      <ng-container *ngIf="mouseoverButton.double_press.params">{{getParams(mouseoverButton.double_press)}}</ng-container>
+      <div class="flex align-items-start gap-1">
+        <p-tag severity="danger" value="Double press"/>
+        <p-chip [label]="getEntityName(mouseoverButton.double_press.entity_id)"
+                [style]="getStyle(getEntityName(mouseoverButton.double_press.entity_id))"></p-chip>&nbsp;
+        <p-chip [label]="mouseoverButton.double_press.cmd_id" styleClass="chip-command"
+                [style]="getStyle(mouseoverButton.double_press.cmd_id)"></p-chip>
+        <ng-container *ngIf="mouseoverButton.double_press.params">{{getParams(mouseoverButton.double_press)}}</ng-container>
+      </div>
     </ng-container>
     </div>
   </div>

diff --git a/src/app/activity-viewer/activity-viewer.component.ts b/src/app/activity-viewer/activity-viewer.component.ts
@@ -42,6 +42,7 @@ import {DividerModule} from "primeng/divider";
 import {ToolbarModule} from "primeng/toolbar";
 import {DockModule} from "primeng/dock";
 import {ActivityPageListComponent} from "./activity-page-list/activity-page-list.component";
+import {TagModule} from "primeng/tag";
 
 enum DataFormat {
   None,
@@ -80,7 +81,8 @@ export class AsPipe implements PipeTransform {
     DividerModule,
     ToolbarModule,
     DockModule,
-    ActivityPageListComponent
+    ActivityPageListComponent,
+    TagModule
   ],
   templateUrl: './activity-viewer.component.html',
   styleUrl: './activity-viewer.component.css',