shortcut icon moving on hover fix

chinonso098 · Oct 27, 2024 · 241e4bf · 241e4bf
1 parent 832bb3f
commit 241e4bf
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 10 deletions.
diff --git a/src/app/system-apps/filemanager/filemanager.component.css b/src/app/system-apps/filemanager/filemanager.component.css
@@ -68,12 +68,13 @@ img{
     /* display: none; */
     height: 24px; 
     width: 24px;
-    top: 32%;
-    left: 24%;
+    top: 31.5%;
+    left: 23.5%;
 }
 
-button{
+.filemngr_btn{
     background-color: transparent;
+    border: 2px solid transparent;
     width: 90px;
     height: 70px; 
 }

diff --git a/src/app/system-apps/filemanager/filemanager.component.html b/src/app/system-apps/filemanager/filemanager.component.html
@@ -1,11 +1,13 @@
  <ol (dragover)="onDragOver($event)"  (drop)="onDrop($event)" (click)="hideIconContextMenu(name)"  (click)="handleIconHighLightState()"  #myBounds> 
     <li *ngFor="let file of files; let i = index">
-        <button (dblclick)="runProcess(file)" (mouseenter)="onMouseEnter(i)" (mouseleave)="onMouseLeave(i)"
-        [ngDraggable]="isDraggable" [bounds]="myBounds" [inBounds]="true" [gridSize]="gridSize" zIndex="1" [preventDefaultEvent]="true"
-        (stopped)="onDragEnd($event)" (started)="onDragStart($event, i)"
-        (contextmenu)="onShowIconContextMenu($event, file, i)" (click)="onBtnClick($event, i)"
+        <button class="filemngr_btn" (dblclick)="runProcess(file)" (mouseenter)="onMouseEnter(i)" 
+         (mouseleave)="onMouseLeave(i)" [ngDraggable]="isDraggable" 
+         [bounds]="myBounds" [inBounds]="true" 
+         [gridSize]="gridSize" zIndex="1"   [preventDefaultEvent]="true"
+         (stopped)="onDragEnd($event)" (started)="onDragStart($event, i)"
+         (contextmenu)="onShowIconContextMenu($event, file, i)" (click)="onBtnClick($event, i)"
         id="iconBtn{{i}}"  [style]="btnStyle">
-            <figure   id="filemngr_fig{{i}}">
+            <figure  id="filemngr_fig{{i}}">
                 <img [src]="file.getIconPath | safeResourceUrl" [alt]="file.getFileName"  [style]="iconSizeStyle"/>
                 <ng-container *ngIf="file.getIsShortCut">
                     <img class="shortcut-img" [src]="'osdrive/Cheetah/System/Imageres/shortcut.png'"  id="shortCut{{i}}"/>

diff --git a/src/app/system-apps/filemanager/filemanager.component.ts b/src/app/system-apps/filemanager/filemanager.component.ts
@@ -437,15 +437,15 @@ export class FileManagerComponent implements BaseComponent, OnInit, AfterViewIni
     const btnElement = document.getElementById(`iconBtn${id}`) as HTMLElement;
     if(btnElement){
       btnElement.style.backgroundColor = 'transparent';
-      btnElement.style.border = 'none'
+      btnElement.style.borderColor = 'transparent'
     }
   }
 
   setBtnStyle(id:number, isMouseHover:boolean):void{
     const btnElement = document.getElementById(`iconBtn${id}`) as HTMLElement;
     if(btnElement){
       btnElement.style.backgroundColor = 'hsl(206deg 77% 70%/20%)';
-      btnElement.style.border = '2px solid hsla(0,0%,50%,25%)'
+      btnElement.style.borderColor = 'hsla(0,0%,50%,25%)';
 
       if(this.selectedElementId == id){
         (isMouseHover)? btnElement.style.backgroundColor ='#607c9c' :