replace sliding items with close buttons

ui/src/app/app.component.html

@@ -132,8 +132,6 @@
       <ion-item></ion-item>
       <ion-item-divider></ion-item-divider>
       <ion-item-group></ion-item-group>
-      <ion-item-options></ion-item-options>
-      <ion-item-sliding></ion-item-sliding>
       <ion-label></ion-label>
       <ion-list></ion-list>
       <ion-loading></ion-loading>

ui/src/app/app.module.ts

@@ -1,4 +1,4 @@
-import { NgModule, CUSTOM_ELEMENTS_SCHEMA, Type } from '@angular/core'
+import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'
 import { BrowserModule } from '@angular/platform-browser'
 import { RouteReuseStrategy } from '@angular/router'
 import { IonicModule, IonicRouteStrategy } from '@ionic/angular'

ui/src/app/modals/app-config-list/app-config-list.page.html

@@ -46,21 +46,18 @@
       </ion-item-divider>
 
       <div *ngFor="let v of value; index as i;">
-        <ion-item-sliding>
-          <ion-item button detail="false" (click)="presentModalValueEdit(i)">
-            <ion-icon size="small" slot="start" *ngIf="!annotations.members[i] || (annotations.members[i] | annotationStatus: 'NoChange')" style="margin-right: 15px; color: rgba(0,0,0,0); background: radial-gradient(#2a4e8970, #2a4e8970 35%, transparent 35%, transparent);" name="ellipse"></ion-icon>
-            <ion-icon size="small" slot="start" *ngIf="!annotations.members[i] || (annotations.members[i] | annotationStatus: 'Added')" style="margin-right: 15px; color: rgba(0,0,0,0); background: radial-gradient(#2a4e8970, #2a4e8970 35%, transparent 35%, transparent);" name="ellipse"></ion-icon>
-            <ion-icon size="small" slot="start" *ngIf="annotations.members[i] && (annotations.members[i] | annotationStatus: 'Edited')" style="margin-right: 15px" color="primary" name="ellipse"></ion-icon>
-            <ion-icon size="small" slot="start" *ngIf="annotations.members[i] && (annotations.members[i] | annotationStatus: 'Invalid')" style="margin-right: 15px" color="danger" name="warning-outline"></ion-icon>
+        <ion-item button detail="false" (click)="presentModalValueEdit(i)">
+          <ion-icon size="small" slot="start" *ngIf="!annotations.members[i] || (annotations.members[i] | annotationStatus: 'NoChange')" style="margin-right: 15px; color: rgba(0,0,0,0); background: radial-gradient(#2a4e8970, #2a4e8970 35%, transparent 35%, transparent);" name="ellipse"></ion-icon>
+          <ion-icon size="small" slot="start" *ngIf="!annotations.members[i] || (annotations.members[i] | annotationStatus: 'Added')" style="margin-right: 15px; color: rgba(0,0,0,0); background: radial-gradient(#2a4e8970, #2a4e8970 35%, transparent 35%, transparent);" name="ellipse"></ion-icon>
+          <ion-icon size="small" slot="start" *ngIf="annotations.members[i] && (annotations.members[i] | annotationStatus: 'Edited')" style="margin-right: 15px" color="primary" name="ellipse"></ion-icon>
+          <ion-icon size="small" slot="start" *ngIf="annotations.members[i] && (annotations.members[i] | annotationStatus: 'Invalid')" style="margin-right: 15px" color="danger" name="warning-outline"></ion-icon>
 
-            <ion-label>{{ valueString[i] }}</ion-label>
-          </ion-item>
-          <ion-item-options side="end">
-            <ion-item-option color="danger" (click)="presentAlertDeleteEntry(i)">
-              <ion-icon slot="icon-only" name="trash-outline"></ion-icon>
-            </ion-item-option>
-          </ion-item-options>
-        </ion-item-sliding>
+          <ion-label>{{ valueString[i] }}</ion-label>
+
+          <ion-button slot="end" fill="clear" (click)="presentAlertDelete(i, $event)">
+            <ion-icon slot="icon-only" name="close-outline" color="medium"></ion-icon>
+          </ion-button>
+        </ion-item>
       </div>
     </ion-item-group>
   </div>

ui/src/app/modals/app-config-list/app-config-list.page.ts

@@ -104,7 +104,9 @@ export class AppConfigListPage extends ModalPresentable {
     return this.presentModal(nextCursor, () => this.updateCaches())
   }
 
-  async presentAlertDeleteEntry (key: number) {
+  async presentAlertDelete (key: number, e: Event) {
+    e.stopPropagation()
+    
     const alert = await this.alertCtrl.create({
       backdropDismiss: false,
       header: 'Caution',

ui/src/app/pages/notifications/notifications.page.html

@@ -33,28 +33,24 @@
   </ion-item-group>
 
   <ion-item-group style="margin-bottom: 16px;">
-    <ion-item-sliding *ngFor="let not of notifications; let i = index">
-      <ion-item-options side="end">
-        <ion-item-option color="danger" (click)="remove(not.id, i)">
-          <ion-icon slot="icon-only" name="trash-outline"></ion-icon>
-        </ion-item-option>
-      </ion-item-options>
-      <ion-item>
-        <ion-label class="ion-text-wrap">
-          <h2>
-            <ion-text [color]="getColor(not)"><b>{{ not.title }}</b></ion-text>
-          </h2>
-          <h2 class="notification-message">{{ not.message }}</h2>
-          <p>{{ not.createdAt | date: 'short' }}</p>
-          <p>
-            <a style="text-decoration: none;"
-              [routerLink]="['/services', 'installed', not.appId]">{{ not.appId }}</a>
-            <span> - </span>
-            Code: {{ not.code }}
-          </p>
-        </ion-label>
-      </ion-item>
-    </ion-item-sliding>
+    <ion-item *ngFor="let not of notifications; let i = index">
+      <ion-label class="ion-text-wrap">
+        <h2>
+          <ion-text [color]="getColor(not)"><b>{{ not.title }}</b></ion-text>
+        </h2>
+        <h2 class="notification-message">{{ not.message }}</h2>
+        <p>{{ not.createdAt | date: 'short' }}</p>
+        <p>
+          <a style="text-decoration: none;"
+            [routerLink]="['/services', 'installed', not.appId]">{{ not.appId }}</a>
+          <span> - </span>
+          Code: {{ not.code }}
+        </p>
+      </ion-label>
+      <ion-button slot="end" fill="clear" (click)="remove(not.id, i)">
+        <ion-icon slot="icon-only" name="close-outline" color="medium"></ion-icon>
+      </ion-button>
+    </ion-item>
   </ion-item-group>
 
   <ion-infinite-scroll [disabled]="!needInfinite" (ionInfinite)="doInfinite($event)">

ui/src/app/pages/server-routes/developer-routes/dev-ssh-keys/dev-ssh-keys.page.html

@@ -29,17 +29,14 @@
     </ion-item>
 
     <ion-item-divider>Saved Keys</ion-item-divider>
-    <ion-item-sliding *ngFor="let fingerprint of server.ssh | async">
-      <ion-item-options side="end">
-        <ion-item-option color="danger" (click)="delete(fingerprint)">
-          <ion-icon slot="icon-only" name="trash-outline"></ion-icon>
-        </ion-item-option>
-      </ion-item-options>
-      <ion-item>
-        <ion-label class="ion-text-wrap">{{ fingerprint.alg }} {{ fingerprint.hash }} {{ fingerprint.hostname }}
-        </ion-label>
-      </ion-item>
-    </ion-item-sliding>
+    <ion-item *ngFor="let fingerprint of server.ssh | async">
+      <ion-label class="ion-text-wrap">
+        {{ fingerprint.alg }} {{ fingerprint.hash }} {{ fingerprint.hostname }}
+      </ion-label>
+      <ion-button slot="end" fill="clear" (click)="presentAlertDelete(fingerprint)">
+        <ion-icon slot="icon-only" name="close-outline" color="medium"></ion-icon>
+      </ion-button>
+    </ion-item>
   </ion-item-group>
 
   <ion-fab vertical="bottom" horizontal="end" slot="fixed">

ui/src/app/pages/server-routes/developer-routes/dev-ssh-keys/dev-ssh-keys.page.ts

@@ -6,6 +6,7 @@ import { PropertySubject } from 'src/app/util/property-subject.util'
 import { ServerConfigService } from 'src/app/services/server-config.service'
 import { LoaderService } from 'src/app/services/loader.service'
 import { ModelPreload } from 'src/app/models/model-preload'
+import { AlertController } from '@ionic/angular'
 
 @Component({
   selector: 'dev-ssh-keys',
@@ -21,6 +22,7 @@ export class DevSSHKeysPage {
     private readonly loader: LoaderService,
     private readonly preload: ModelPreload,
     private readonly serverConfigService: ServerConfigService,
+    private readonly alertCtrl: AlertController,
   ) { }
 
   ngOnInit () {
@@ -41,6 +43,28 @@ export class DevSSHKeysPage {
     await this.serverConfigService.presentModalValueEdit('ssh', true)
   }
 
+  async presentAlertDelete (fingerprint: SSHFingerprint) {    
+    const alert = await this.alertCtrl.create({
+      backdropDismiss: false,
+      header: 'Caution',
+      message: `Are you sure you want to delete this SSH key?`,
+      buttons: [
+        {
+          text: 'Cancel',
+          role: 'cancel',
+        },
+        {
+          text: 'Delete',
+          cssClass: 'alert-danger',
+          handler: () => {
+            this.delete(fingerprint)
+          },
+        },
+      ],
+    })
+    await alert.present()
+  }
+
   async delete (fingerprint: SSHFingerprint) {
     this.loader.of({
       message: 'Deleting...',