fixed draggable area of card (only on top height 20 px) #1023

frangoteam · Dec 22, 2023 · acd9568 · acd9568
1 parent 419ae03
commit acd9568
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 5 deletions.
diff --git a/client/src/app/fuxa-view/fuxa-view.component.css b/client/src/app/fuxa-view/fuxa-view.component.css
@@ -23,6 +23,14 @@
     cursor: move !important;
 }
 
+.card-move-area {
+    position: absolute;
+    top: 0px;
+    left: 0px;
+    right: 0px;
+    height: 22px;
+}
+
 .card-close i {
     float: right;
 }

diff --git a/client/src/app/fuxa-view/fuxa-view.component.html b/client/src/app/fuxa-view/fuxa-view.component.html
@@ -1,10 +1,21 @@
 <div #dataContainer class="view-container" id="content">
 </div>
-<div *ngFor="let card of cards; let i = index" [style.height]="getCardHeight(card.height) + 'px'" [style.left]="card.x + 'px'" [style.top]="card.y +'px'"
-    [style.width]="card.width +'px'" class="fab-card" style="cursor: auto  !important;" ngDraggable>
-    <a (click)="onCloseCard(card);" class="card-close" *ngIf="!card.disableDefaultClose">
-        <i class="material-icons" style="font-size: 22px; cursor: pointer;">close</i>
-    </a>
+<div *ngFor="let card of cards; let i = index"
+     [style.height]="getCardHeight(card.height) + 'px'" 
+     [style.left]="card.x + 'px'" 
+     [style.top]="card.y +'px'"
+     [style.width]="card.width +'px'" 
+     class="fab-card" 
+     style="cursor: auto !important;" 
+     [handle]="DemoHandle"
+     ngDraggable>
+    <div #DemoHandle
+         class="card-move-area">
+         <a (click)="onCloseCard(card);" class="card-close" *ngIf="!card.disableDefaultClose">
+            <i class="material-icons" style="font-size: 22px; cursor: pointer;">close</i>
+        </a>
+    </div>
+
     <app-fuxa-view (onclose)="onCloseCard(card)" [child]='true' [gaugesManager]="gaugesManager" [hmi]="hmi" [parentcards]="cards" [variablesMapping]="card.variablesMapping"
         [view]="card.view"></app-fuxa-view>
 </div>