feat: optimize in-line editable command action for horizontal space (#…

…2111)
UltimateHackingKeyboard · Oct 21, 2023 · a4a4002 · a4a4002
1 parent 57b4b3f
commit a4a4002
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 27 deletions.
diff --git a/packages/uhk-web/src/app/components/macro/item/macro-item.component.html b/packages/uhk-web/src/app/components/macro/item/macro-item.component.html
@@ -16,19 +16,18 @@
     </ng-container>
 
     <div *ngIf="isCommand && !editing" class="macro-command-item">
-        <div>
-            <div>
-                <fa-icon *ngIf="movable"
-                         [icon]="faGripLinesVertical"
-                         class="action--movable"
-                         aria-hidden="true"></fa-icon>
-                <span class="pr-1">Command:</span>
-            </div>
-            <button class="btn btn-primary btn-sm btn-change-macro-action"
-                    *ngIf="editable"
-                    (click)="editAction()"
-            >Change action
-            </button>
+        <div class="macro-command-item-header">
+            <fa-icon *ngIf="movable"
+                     [icon]="faGripLinesVertical"
+                     class="action--movable"
+                     aria-hidden="true"></fa-icon>
+            <fa-icon [icon]="faCode"
+                     aria-hidden="true"></fa-icon>
+
+            <span class="pr-1 mr-auto">Command:</span>
+
+            <icon *ngIf="editable" name="pencil" (click)="editAction()"></icon>
+            <icon *ngIf="deletable" name="trash" (click)="deleteAction()"></icon>
         </div>
         <div class="macro-command-editor-container">
             <macro-command-editor [ngModel]="macroAction.command"
@@ -40,9 +39,9 @@
                                   (gotFocus)="macroEditorGotFocus()"
             ></macro-command-editor>
         </div>
-        <icon *ngIf="deletable" name="trash" (click)="deleteAction()" class="align-items-top"></icon>
     </div>
 </div>
+
 <div class="list-group-item macro-action-editor__container"
      *ngIf="(editable && editing) || newItem"
      [@toggler]

diff --git a/packages/uhk-web/src/app/components/macro/item/macro-item.component.scss b/packages/uhk-web/src/app/components/macro/item/macro-item.component.scss
@@ -59,25 +59,19 @@
             }
         }
 
-        .btn-change-macro-action {
-            margin-top: 0.2em;
-            padding: 2px;
-            width: 90px;
-            visibility: hidden;
-        }
-
         .macro-command-item {
-            &:focus-within {
-                .btn-change-macro-action {
-                    visibility: visible;
-                }
+            display: flex;
+            flex-direction: column;
+
+            .macro-command-item-header {
+                display: flex;
+                gap: 0.25em;
             }
         }
 
         .macro-command-editor-container {
             height: 100%;
             width: 100%;
-            padding-left: 0.5em;
         }
     }
 

diff --git a/packages/uhk-web/src/app/components/macro/item/macro-item.component.ts b/packages/uhk-web/src/app/components/macro/item/macro-item.component.ts
@@ -9,7 +9,7 @@ import {
     SimpleChanges
 } from '@angular/core';
 import { animate, style, transition, trigger } from '@angular/animations';
-import { faGripLinesVertical } from '@fortawesome/free-solid-svg-icons';
+import { faCode, faGripLinesVertical } from '@fortawesome/free-solid-svg-icons';
 import {
     CommandMacroAction,
     DelayMacroAction,
@@ -83,6 +83,7 @@ export class MacroItemComponent implements OnInit, OnChanges {
     titleIcon: string;
     iconName: string;
     newItem: boolean = false;
+    faCode = faCode;
     faGripLinesVertical = faGripLinesVertical;
     isCommand = false;