fix(grid): #WIK-16750 the remove icon should be red on hover (#177)

worktile · Dec 6, 2024 · 9a4113a · 9a4113a
1 parent 7948705
commit 9a4113a
Show file tree

Hide file tree

Showing 7 changed files with 35 additions and 5 deletions.
diff --git a/packages/grid/src/components/field-menu/field-menu.component.html b/packages/grid/src/components/field-menu/field-menu.component.html
@@ -3,11 +3,14 @@
         @if (menu.type === 'divider') {
             <thy-divider [thyStyle]="'solid'"></thy-divider>
         } @else {
+            @let disabled = !!(menu.disabled && menu.disabled(aiTable, field));
+            @let isRemoveField = menu.type === 'removeField';
             <a
                 thyDropdownMenuItem
                 href="javascript:;"
+                [ngClass]="{ 'remove-field': isRemoveField && !disabled }"
                 (click)="execute(menu)"
-                [thyDisabled]="!!(menu.disabled && menu.disabled(aiTable, field))"
+                [thyDisabled]="disabled"
             >
                 <thy-icon [thyIconName]="menu.icon!"></thy-icon>
                 <span>{{ menu.name! }}</span>

diff --git a/packages/grid/src/components/field-menu/field-menu.component.ts b/packages/grid/src/components/field-menu/field-menu.component.ts
@@ -10,19 +10,24 @@ import {
 import { ThyIcon } from 'ngx-tethys/icon';
 import { AITable } from '../../core';
 import { AITableFieldMenuItem } from '../../types/field';
+import { NgClass } from '@angular/common';
 
 @Component({
     selector: 'field-menu',
     templateUrl: './field-menu.component.html',
     standalone: true,
     changeDetection: ChangeDetectionStrategy.OnPush,
+    host: {
+        class: 'field-menu'
+    },
     imports: [
         ThyIcon,
         ThyDivider,
         ThyDropdownMenuComponent,
         ThyDropdownMenuItemDirective,
         ThyDropdownMenuItemNameDirective,
-        ThyDropdownMenuItemIconDirective
+        ThyDropdownMenuItemIconDirective,
+        NgClass
     ]
 })
 export class FieldMenu extends ThyDropdownAbstractMenu {

diff --git a/packages/grid/src/components/field-menu/field-menu.scss b/packages/grid/src/components/field-menu/field-menu.scss
@@ -0,0 +1,12 @@
+@use 'ngx-tethys/styles/variables.scss';
+
+.field-menu {
+    .remove-field {
+        &:hover {
+            .thy-icon {
+                color: variables.$danger;
+            }
+            color: variables.$danger !important;
+        }
+    }
+}
diff --git a/packages/grid/src/styles/styles.scss b/packages/grid/src/styles/styles.scss
@@ -3,6 +3,8 @@
 @use 'ngx-tethys/styles/variables.scss';
 @use '../components/cell-editors/cell-editor.scss';
 @use '../components/cell-views/select/option.scss';
+@use '../components/field-menu/field-menu.scss';
+
 .ai-table-dom-grid {
     display: table;
     width: 100%;

diff --git a/src/app/component/table.component.html b/src/app/component/table.component.html
@@ -52,7 +52,7 @@
     <a thyDropdownMenuItem href="javascript:;" (click)="addView('copy')">
         <span>复制</span>
     </a>
-    <a thyDropdownMenuItem href="javascript:;" (click)="removeView()">
+    <a thyDropdownMenuItem class="remove-icon" href="javascript:;" (click)="removeView()">
         <span>删除</span>
     </a>
 </thy-dropdown-menu>

diff --git a/src/app/component/table.scss b/src/app/component/table.scss
@@ -0,0 +1,7 @@
+@use 'ngx-tethys/styles/variables.scss';
+
+.remove-icon {
+    &:hover {
+        color: variables.$danger !important;
+    }
+}
diff --git a/src/styles.scss b/src/styles.scss
@@ -1,4 +1,5 @@
 /* You can add global styles to this file, and also import other style files */
 
-@import '../packages/grid/src/styles/styles.scss';
-@import './app/app.component.scss';
+@forward '../packages/grid/src/styles/styles.scss';
+@forward './app/app.component.scss';
+@forward './app/component/table.scss';