Fixes #1881 - Delete function icon on Functions list page is missing (#…

…1883)
Azure · Oct 16, 2017 · 5bf6611 · 5bf6611
1 parent 0d8000a
commit 5bf6611
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 6 deletions.
diff --git a/AzureFunctions.AngularClient/src/app/functions-list/functions-list.component.html b/AzureFunctions.AngularClient/src/app/functions-list/functions-list.component.html
@@ -40,13 +40,14 @@ <h2>{{ 'functions' | translate }}</h2><i *ngIf="isLoading" class="fa fa-refresh
                     (change)="enableChange(item, $event)"></slide-toggle>
                 </div>
             </td>
-            <td class="command-icon">
+            <td class="icon-cell">
                 <div [fnWriteAccess]="functionApp">
-                    <a role="button"
-                    [attr.aria-label]="'functionManage_delete' | translate:{name: item.functionName}"
-                    style="background-image: url('image/delete.svg')"
-                    (click)="clickDelete(item)">
-                    </a>
+                    <span role="button"
+                        class="icon-small"
+                        load-image="image/delete.svg"
+                        [attr.aria-label]="'functionManage_delete' | translate:{name: item.functionName}"
+                        (click)="clickDelete(item)">
+                    </span>
                 </div>
             </td>
         </tr>

diff --git a/AzureFunctions.AngularClient/src/app/functions-list/functions-list.component.scss b/AzureFunctions.AngularClient/src/app/functions-list/functions-list.component.scss
@@ -20,4 +20,25 @@ h2{
 .search-box-container {
     width: 250px;
     margin-bottom: 15px;
+}
+
+td.icon-cell{
+    &:hover{
+        background-color: $item-selected-color;
+    }
+}
+
+.icon-small{
+    height: 18px;
+    width: 18px;
+    vertical-align: middle;
+    margin-left: 7px;
+}
+
+:host-context(#app-root[theme=dark]){
+    td.icon-cell{
+        &:hover{
+            background-color: $item-selected-color-dark;
+        }
+    }
 }