Start9/start-os
2
0
Fork 0
mirror of https://github.com/Start9Labs/start-os.git synced 2026-03-26 02:11:53 +00:00
Code Issues Packages Projects Releases Wiki Activity

ui: clickable launch tabs

Browse Source
This commit is contained in:
Aaron Greenspan
2021-01-17 18:43:11 -07:00
committed by Aiden McClelland
parent aef63a60c2
commit 8e46719b49
5 changed files with 24 additions and 91 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -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-button-triangle">
<div class="launch-container" *ngIf="vars.ui && !isConsulate">
<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"/>

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

@@ -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-color: blue;
/* border-width: 40px 80px 40px 0; */
border-color: transparent #007bff transparent transparent;
border-width: 22px;
border-color: rgb(70 193 255 / 75%) rgb(70 193 255 / 75%) transparent transparent;
&:hover {
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 {
--background: transparent;
--box-shadow: none;
.disabled {
pointer-events: 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;
}

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

@@ -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')
}

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

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

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

@@ -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')