ui: clickable launch tabs

ui/src/app/pages/apps-routes/app-installed-list/app-installed-list.page.html

@@ -23,32 +23,14 @@
       <ion-row>
         <ion-col *ngFor="let app of apps" sizeXs="4" sizeSm="3" sizeMd="2" sizeLg="2">
           <ng-container *ngIf="{ tor: app.subject.torAddress | async, status: app.subject.status | async, ui: app.subject.ui | async, iconURL: app.subject.iconURL | async | iconParse, title: app.subject.title | async } as vars"  >
-          
-          
 
           <ion-card class="installed-card" [class.installed-card-on]="vars.status === 'RUNNING'" style="position:relative" [routerLink]="['/services', 'installed', app.id]">
-            <div class="launch-container" *ngIf="vars.ui && !isConsulate" [disabled]="vars.status !== AppStatus.RUNNING || !isTor" (click)="launchUiTab(vars.tor)">
+            <div class="launch-container" *ngIf="vars.ui && !isConsulate">
-              <div class="launch-button-triangle">
+              <div class="launch-button-triangle"  (click)="launchUiTab(vars.tor, $event)" [class.disabled]="vars.status !== AppStatus.RUNNING || !isTor">
-
+                <ion-icon class="launch-button-triangle-icon" name="rocket-outline"></ion-icon>
               </div>
-              <!-- <ion-button>
-
-              </ion-button> -->
             </div>
 
-            <!-- <ion-button
-            *ngIf="vars.ui && !isConsulate"
-            [disabled]="vars.status !== AppStatus.RUNNING || !isTor"
-            [class.launch-button-off]="vars.status !== AppStatus.RUNNING || !isTor"
-            class="launch-button-triangle"
-            (click)="launchUiTab(vars.tor)"
-          >
-            <ion-icon style="position: absolute;
-            top: 6px;
-            right: -1px;
-            width: 13px;" name="rocket-outline"></ion-icon>
-          </ion-button> -->
-
             <img style="position: absolute" class="main-img" [src]="vars.iconURL" [alt]="app.subject.title | async" />
             <img class="main-img" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=">
             <img class="bulb-on"  *ngIf="vars.status | displayBulb: 'green'" src="assets/img/running-bulb.png"/>

ui/src/app/pages/apps-routes/app-installed-list/app-installed-list.page.scss

@@ -52,68 +52,32 @@
   margin: 9px;
 }
 
-.launch-button-opaque {
-  position: absolute;
-  z-index: 1;
-  --border-radius: 100px;
-  width: 42px;
-  height: 42px;
-  right: -5px;
-  top: -5px;
-  --background: #2b2a2b //linear-gradient(120deg, rgb(35, 178, 251, 0.7), transparent);
-  box-shadow: 0 0 4px 2px rgb(91 200 255);
-  border-radius: 100px;
-}
-
-.launch-button-transparent {
-  // position: absolute;
-  // z-index: 1;
-  // --border-radius: 100px;
-  // width: 42px;
-  // height: 42px;
-  // right: -5px;
-  // top: -5px;
-  // --background: linear-gradient(200deg, rgb(35, 178, 251, 1), rgb(35, 178, 251, 0.25));
-  position: absolute;
-    /* z-index: 1; */
-    --border-radius: 0px;
-    width: 45px;
-    /* height: 42px; */
-    height: 100%;
-    right: -5px;
-    --box-shadow: none;
-    /* top: -5px; */
-    border-style: outset;
-    border-width: 0px 0px 0px 0px;
-    border-color: #2a2a2a;
-    margin: 0px;
-    --background: linear-gradient(200deg, rgb(35, 178, 251, 1), rgb(35, 178, 251, 0.25));
-}
-
 .launch-button-triangle {
-  // position: absolute;
-  // --border-radius: 0px;
   width: 0px;
   height: 0px;
   right: 0px;
-  // --box-shadow: none;
-  /* top: -5px; */
-  // border-style: outset;
-  // border-width: 0px 0px 0px 0px;
-  // border-color: #2a2a2a;
   margin: 0px;
-  // --background: linear-gradient(200deg, rgb(35, 178, 251, 1), rgb(35, 178, 251, 0.25));
+
   border-style: solid;
-    border-width: 0 72px 73px 0;
+  border-width: 22px;
-    border-color: blue;
+  border-color: rgb(70 193 255 / 75%) rgb(70 193 255 / 75%) transparent transparent;
-    /* border-width: 40px 80px 40px 0; */
+  &:hover {
-    border-color: transparent #007bff transparent transparent;
+    border-color: rgb(70 193 255) rgb(70 193 255) transparent transparent;
+  }
+  ion-icon {
+    position: absolute;
+    right: 6px;
+    top: 6px;
+    color: white;
+  }
 }
 
-.launch-button-off {
+.disabled {
-  --background: transparent;
+  pointer-events: none;
-  --box-shadow: none;
   border-color: transparent;
+  &:hover {
+    border-color: transparent;
+  }
   ion-icon {
     color: var(--ion-color-medium);
   }
@@ -121,21 +85,7 @@
 
 .launch-container {
   position: absolute;
-  // --border-radius: 0px;
-  width: 55%;
-  height: 55%;
   right: 0px;
   top: 0px;
-  // --box-shadow: none;
-  /* top: -5px; */
-  // border-style: outset;
-  // border-width: 0px 0px 0px 0px;
-  // border-color: #2a2a2a;
   margin: 0px;
-  // --background: linear-gradient(200deg, rgb(35, 178, 251, 1), rgb(35, 178, 251, 0.25));
-  // border-style: solid;
-    // border-width: 0 72px 73px 0;
-    // border-color: blue;
-    /* border-width: 40px 80px 40px 0; */
-    // border-color: transparent #007bff transparent transparent;
 }

ui/src/app/pages/apps-routes/app-installed-list/app-installed-list.page.ts

@@ -99,7 +99,9 @@ export class AppInstalledListPage extends Cleanup {
 
   }
 
-  async launchUiTab (address: string) {
+  async launchUiTab (address: string, event: Event) {
+    event.preventDefault()
+    event.stopPropagation()
     address = address.startsWith('http') ? address : `http://${address}`
     return window.open(address, '_blank')
   }

ui/src/app/pages/apps-routes/app-installed-show/app-installed-show.page.scss

@@ -15,7 +15,6 @@
 }
 
 .top-plate {
-  // margin-top: 20px;
   background: var(--ion-item-background);
   margin: 20px 10px;
   border-radius: 10px;

ui/src/app/pages/apps-routes/app-installed-show/app-installed-show.page.ts

@@ -102,7 +102,7 @@ export class AppInstalledShowPage extends Cleanup {
     }
   }
 
-  async launchUiTab () {
+  async launchUiTab (e) {
     let uiAddress = this.app.torAddress.getValue()
     uiAddress = uiAddress.startsWith('http') ? uiAddress : `http://${uiAddress}`
     return window.open(uiAddress, '_blank')