diff --git a/ui/src/app/components/badge-menu-button/badge-menu.component.scss b/ui/src/app/components/badge-menu-button/badge-menu.component.scss index 32955e4a6..93412ce23 100644 --- a/ui/src/app/components/badge-menu-button/badge-menu.component.scss +++ b/ui/src/app/components/badge-menu-button/badge-menu.component.scss @@ -3,7 +3,7 @@ position: absolute; top: -8px; left: 56%; - border-radius: 5px; + border-radius: 6px; z-index: 1; font-size: 80%; } diff --git a/ui/src/app/pages/apps-routes/app-list/app-list.page.html b/ui/src/app/pages/apps-routes/app-list/app-list.page.html index cc6ace3e9..8cc2e28b6 100644 --- a/ui/src/app/pages/apps-routes/app-list/app-list.page.html +++ b/ui/src/app/pages/apps-routes/app-list/app-list.page.html @@ -24,38 +24,44 @@ Marketplace - + - + +
+
- - icon - - - - + icon - - - - - - - - - - - -

{{ pkg.value.entry.state | titlecase }}...{{ pkg.value.installProgress.totalProgress }}%

- {{ pkg.value.entry.manifest.title }} + + {{ pkg.value.entry.manifest.title }} +
+ + + + {{ pkg.value.entry.state | titlecase }}...{{ pkg.value.installProgress.totalProgress }}% + + + + + +
diff --git a/ui/src/app/pages/apps-routes/app-list/app-list.page.scss b/ui/src/app/pages/apps-routes/app-list/app-list.page.scss index a33eca105..6a6c06393 100644 --- a/ui/src/app/pages/apps-routes/app-list/app-list.page.scss +++ b/ui/src/app/pages/apps-routes/app-list/app-list.page.scss @@ -2,20 +2,16 @@ margin: 4px; padding: 4px; background: linear-gradient(37deg, #333333, #131313); - border-radius: 10px; + border-radius: 6px; text-align: center; ion-card-header { padding: 0 10px; - status { - white-space: nowrap; - } - ion-card-title { - font-size: calc(10px + .4vw); - color: var(--ion-color-dark); - margin: 10px 0; + font-family: 'Montserrat'; + font-size: calc(10px + .5vw); + margin-bottom: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; @@ -24,41 +20,33 @@ } .main-img { - width: 50%; + width: 40%; margin: 12px; } -.bulb-on { +.bulb { position: absolute !important; - left: -7px !important; - top: -7px !important; - height: 25px !important; - width: 25px !important; - margin: 9px; -} - -.bulb-off { - position: absolute !important; - left: -1px !important; - top: -1px !important; - height: 13px !important; - width: 13px !important; - margin: 9px; + 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) } .launch-button-triangle { right: 0px; border-style: solid; - border-width: 22px; + border-width: 24px; 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: 7px; - top: 7px; + right: 8px; + top: 8px; color: white; } } @@ -79,22 +67,13 @@ right: 0px; } -.main-status { - font-size: calc(8px + .4vw); - font-weight: bold; - margin: 0; -} - -.status-grid { - --ion-grid-padding: 0; - ion-row { - min-height: 22px; - } - ion-col { - --ion-grid-column-padding: 0 - } +.status-toolbar { + --min-height: 42px; + border-radius: 6px; ion-icon { - font-size: calc(12px + .4vw); - padding-top: 4px; + font-size: calc(10px + .5vw); + position: absolute; + right: 10px; + top: calc(2vh); } } diff --git a/ui/src/app/pages/apps-routes/app-list/app-list.page.ts b/ui/src/app/pages/apps-routes/app-list/app-list.page.ts index c06eb2f98..90d848537 100644 --- a/ui/src/app/pages/apps-routes/app-list/app-list.page.ts +++ b/ui/src/app/pages/apps-routes/app-list/app-list.page.ts @@ -58,10 +58,6 @@ export class AppListPage { if (this.pkgs[id]) return this.pkgs[id] = { entry: pkgs[id], - bulb: { - class: 'bulb-off', - img: 'assets/img/off-bulb.png', - }, primaryRendering: PrimaryRendering[renderPkgStatus(pkgs[id]).primary], installProgress: !isEmptyObject(pkgs[id]['install-progress']) ? this.installPackageService.transform(pkgs[id]['install-progress']) : undefined, error: false, @@ -70,31 +66,10 @@ export class AppListPage { // subscribe to pkg this.pkgs[id].sub = this.patch.watch$('package-data', id).subscribe(pkg => { if (!pkg) return - let bulbClass = 'bulb-on' - let img = '' const statuses = renderPkgStatus(pkg) const primaryRendering = PrimaryRendering[statuses.primary] - switch (primaryRendering.color) { - case 'danger': - img = 'assets/img/danger-bulb.png' - break - case 'success': - img = 'assets/img/success-bulb.png' - break - case 'warning': - img = 'assets/img/warning-bulb.png' - break - default: - bulbClass = 'bulb-off', - img = 'assets/img/off-bulb.png' - break - } this.pkgs[id].entry = pkg this.pkgs[id].installProgress = !isEmptyObject(pkg['install-progress']) ? this.installPackageService.transform(pkg['install-progress']) : undefined - this.pkgs[id].bulb = { - class: bulbClass, - img, - } this.pkgs[id].primaryRendering = primaryRendering this.pkgs[id].error = [HealthStatus.NeedsConfig, HealthStatus.Failure].includes(statuses.health) || [DependencyStatus.Issue, DependencyStatus.Critical].includes(statuses.dependency) }) @@ -126,10 +101,6 @@ export class AppListPage { interface PkgInfo { entry: PackageDataEntry - bulb: { - class: string - img: string - } primaryRendering: StatusRendering installProgress: ProgressData error: boolean diff --git a/ui/src/app/pages/apps-routes/app-show/app-show.page.html b/ui/src/app/pages/apps-routes/app-show/app-show.page.html index 13e7daf85..977dce885 100644 --- a/ui/src/app/pages/apps-routes/app-show/app-show.page.html +++ b/ui/src/app/pages/apps-routes/app-show/app-show.page.html @@ -27,8 +27,8 @@ - - Open UI + Launch UI + Configure diff --git a/ui/src/app/pages/login/login.page.scss b/ui/src/app/pages/login/login.page.scss index eca54b7a1..58baa90a7 100644 --- a/ui/src/app/pages/login/login.page.scss +++ b/ui/src/app/pages/login/login.page.scss @@ -6,7 +6,7 @@ ion-card-title { } ion-item { - --border-radius: 4px; + --border-radius: 6px; --border-style: solid; --border-width: 1px; --border-color: var(--ion-color-light); diff --git a/ui/src/global.scss b/ui/src/global.scss index 70a01c772..4c3e6485d 100644 --- a/ui/src/global.scss +++ b/ui/src/global.scss @@ -234,10 +234,6 @@ ion-button { } } -.custom-modal { - border-radius: 8px; -} - ion-slides { .slider-wrapper { height: 100%; @@ -255,7 +251,7 @@ ion-item-divider { } ion-item { - border-radius: 4px; + border-radius: 6px; } ion-label { @@ -278,7 +274,7 @@ ion-loading { border-width: 1px; border-style: groove; border-color: dimgrey; - border-radius: 10px; + border-radius: 6px; box-shadow: 4px 4px 16px var(--ion-color-primary); --padding-start: 10px; }