warning icon changes

This commit is contained in:
Drew Ansbacher
2021-09-24 11:29:18 -06:00
committed by Aiden McClelland
parent 80def81fbb
commit d676a2121a
2 changed files with 22 additions and 8 deletions

View File

@@ -29,12 +29,15 @@
<ion-grid>
<ion-row>
<ion-col *ngFor="let pkg of pkgs | keyvalue : asIsOrder" sizeXs="6" sizeSm="4" sizeLg="3">
<ion-card class="installed-card" [routerLink]="['/services', pkg.value.entry.manifest.id]">
<ion-card class="installed-card warn-shadow" [routerLink]="['/services', pkg.value.entry.manifest.id]">
<div
*ngIf="!pkg.value.error"
class="bulb"
[style.background-color]="connectionFailure ? 'var(--ion-color-dark)' : 'var(--ion-color-' + pkg.value.primaryRendering.color + ')'"
>
</div>
</div>
<ion-icon *ngIf="pkg.value.error" class="warning-icon" name="warning-outline" color="warning"></ion-icon>
<div class="launch-container" *ngIf="pkg.value.entry.manifest.interfaces | hasUi">
<div class="launch-button-triangle" (click)="launchUi(pkg.value.entry, $event)" [class.launch-disabled]="!(pkg.value.entry.state | isLaunchable : pkg.value.entry.installed?.status.main.status : pkg.value.entry.manifest.interfaces)">
<ion-icon name="open-outline"></ion-icon>
@@ -59,7 +62,6 @@
>
</status>
</ion-title>
<ion-icon *ngIf="pkg.value.error" name="warning-outline" color="warning"></ion-icon>
</ion-toolbar>
</ion-card-content>
</ion-card>

View File

@@ -2,7 +2,7 @@
margin: 4px;
padding: 4px;
background: linear-gradient(37deg, #333333, #131313);
border-radius: 6px;
border-radius: 6px 0 6px 6px;
text-align: center;
ion-card-header {
@@ -25,13 +25,24 @@
}
.bulb {
position: absolute !important;
left: 10px !important;
top: 10px !important;
height: calc(10px + .5vw);
width: calc(10px + .5vw);
border-radius: 100%;
box-shadow: 0 0 4px 4px rgba(255, 255, 255, 0.3)
box-shadow: 0 0 4px 4px rgba(255, 255, 255, 0.3);
position: absolute !important;
left: 10px !important;
top: 10px !important;
}
.warning-icon {
position: absolute !important;
left: 8px !important;
top: 8px !important;
font-size: 19px;
border-radius: 100%;
padding: 1px;
background-color: rgba(255,213,52, 0.1);
box-shadow: 0 0 4px 4px rgba(255,213,52, 0.1);
}
.launch-button-triangle {
@@ -65,6 +76,7 @@
.launch-container {
position: absolute;
right: 0px;
top: 0px;
}
.status-toolbar {