Add visible delete button to stash items.

src/app/import-export-modal/import-export-modal.component.html

@@ -4,7 +4,7 @@
         <span class="h1">Import/Export Item</span>
         <span class="buttons" style="float: right;">
           <a [routerLink]="['..']">
-            <button class="nostyle weird-tooltip" data-tooltip="Close">
+            <button class="nostyle weird-tooltip icon-btn" data-tooltip="Close">
               <img src="assets/ic_close_black_24px.svg" alt="X" />
             </button>
           </a>

src/app/item-editor/item-editor.component.html

@@ -27,13 +27,14 @@
     <span class="imageselect">
       <label for="image">Image:</label>
       <input type="text" class="Image" id="image" [(ngModel)]="item.image" />
-      <button (click)="removeImage()" style="position: relative; top: 7px; display: inline-flex"
-        data-tooltip="Remove Image">
+      <button (click)="removeImage()"
+        style="position: relative; display: inline-flex"
+        data-tooltip="Remove Image"
+        class="icon-btn">
         <img src="assets/ic_close_black_24px.svg" alt="X" />
       </button>
     </span>
     <br/>
-    <br/>
     <span class="maxwidth">
         <label for="maxwidth">Maximum Width (in pixels):</label>
         <input type="number" id="maxwidth" [(ngModel)]="maxWidthInput" (change)="updateMaxWidth()"/>

src/app/item-editor/item-editor.component.scss

@@ -2,7 +2,6 @@
 
 .reset, .export, .save {
     margin: 0 0 0 10px;
-    position: relative;
 }
 
 ul {
@@ -14,17 +13,15 @@ li {
     display: initial;
 }
 
-button, .button {
-    width: 39px;
-    height: 30px;
-    padding: 0;
-
-    img {
-        height: 18px;
-    }
-}
-
 .header {
     border-bottom: 1px solid lighten($input, 20);
     padding: 6px 12px 6px 0;
 }
+
+span.imageselect, span.maxwidth {
+    display: flex;
+    align-items: center;
+    * {      
+        margin: 0 5px;
+    }
+}

src/app/page-stash/page-stash.component.html

@@ -4,7 +4,14 @@
         <poe-alert-toast [alert]="alert"></poe-alert-toast>
     </div>
     <div class="stash-items">
-        <poe-item-renderer [showBody]="false" *ngFor="let i of items; index as index" [item]="i" (click)="onClick(index)" (contextmenu)="onRightClick(index, $event)" (mouseenter)="onHover(index)" (mouseleave)="onHover(-1)" [maxWidth]="100" maxWidthUnit="%"></poe-item-renderer>
+        <div class="stash-item" *ngFor="let i of items; index as index" (contextmenu)="onRightClick(index, $event)" (mouseenter)="onHover(index)" (mouseleave)="onHover(-1)">
+            <poe-item-renderer [showBody]="false" [item]="i" (click)="onClick(index)" [maxWidth]="100" maxWidthUnit="%"></poe-item-renderer>
+            <div class="stash-item-controls float-right">
+                <button class="button delete orb-btn orb-scour" (click)="promptDeletion(index)">
+                    <img src="assets/ic_delete_forever_black_18px.svg" alt="Delete" />
+                </button>
+            </div>
+        </div>
     </div>
 </div>
 <div id="main-render-container">

src/app/page-stash/page-stash.component.scss

@@ -15,6 +15,33 @@
     justify-content: center;
 }
 
+.stash-items {
+    overflow-x: hidden;
+}
+
+.stash-item {
+    padding-bottom: 30px;
+    position: relative;
+    max-width: 100%;
+
+    &:hover {
+        padding-bottom: 0px;
+        .stash-item-controls {
+            display: flex;
+        }
+    }
+
+    poe-item-renderer {
+        max-width: 100%;
+    }
+
+    .stash-item-controls {
+        display: none;
+        justify-content: end;
+        width: 100%;
+    }
+}
+
 .sidebar {
     background-color: $black;
     grid-column: 1 / 2;

src/app/page-stash/page-stash.component.ts

@@ -39,6 +39,11 @@ export class PageStashComponent implements OnInit {
 
   public onRightClick(index: number, event: Event) {
     event.stopPropagation();
+    this.promptDeletion(index);
+    return false;
+  }
+
+  public promptDeletion(index: number) {
     this.alertService.Dispatch(new Alert({
       type: AlertType.ModalConfirm,
       status: AlertStatus.Warning,
@@ -47,7 +52,6 @@ export class PageStashComponent implements OnInit {
       lifetime: 1000,
       confirmCallback: () => this.stash.RemoveFromStash(index)
     }));
-    return false;
   }
 
 }

src/styles.scss

@@ -44,6 +44,8 @@ button, .button {
         top: 0;
     }
     &[data-tooltip] {
+        position: relative;
+
         &.weird-tooltip {
             &::after {
                 display: block;
@@ -80,26 +82,31 @@ button, .button {
         }
     }
 
-    &.orb-btn:hover {
-        background-size: auto 70%;
-        background-position: center;
-        background-repeat: no-repeat;
-
-        @each $name, $icon in $orbs {
-            &.orb-#{$name} {
-                background-image: url('./assets/#{$icon}');
+    &.orb-btn, &.icon-btn {
+        width: 39px;
+        height: 30px;
+        padding: 0;
+        &.orb-btn {
+            &:hover {
+                background-size: auto 70%;
+                background-position: center;
+                background-repeat: no-repeat;
+
+                @each $name, $icon in $orbs {
+                    &.orb-#{$name} {
+                        background-image: url('./assets/#{$icon}');
+                    }
+                }
+
+                img {
+                    opacity: 0;
+                }
             }
         }
-
-        img {
-            opacity: 0;
-        }
     }
-}
 
-span.imageselect {
-    * {      
-        margin: 0 5px;
+    img {
+        height: 18px;
     }
 }