[Fix] UI fix
[Reference] https://partnerissuetracker.corp.google.com/issues/302223878
BUG=b:302223878
TEST=manual;
Change-Id: I6114ec5981767d045c8359c69fa5890ef78d30a8
Reviewed-on: https://chromium-review.googlesource.com/c/chromiumos/platform/moblab/+/4907415
Reviewed-by: Varun Thammineni <varunth@google.com>
Reviewed-by: Michal Matyjek <mmatyjek@google.com>
Commit-Queue: Varun Thammineni <varunth@google.com>
Tested-by: Varun Thammineni <varunth@google.com>
diff --git a/src/moblab-ui/src/app/app-sidebar/app-sidebar.component.scss b/src/moblab-ui/src/app/app-sidebar/app-sidebar.component.scss
index 76c4edf..f940568 100644
--- a/src/moblab-ui/src/app/app-sidebar/app-sidebar.component.scss
+++ b/src/moblab-ui/src/app/app-sidebar/app-sidebar.component.scss
@@ -79,9 +79,9 @@
margin-top: 10px;
}
-.list-item-active {
- font-weight: bold;
- color: mat-color($accent, darker) !important;
+::ng-deep .list-item-active .mat-mdc-list-item-unscoped-content {
+ font-weight: bold;
+ color: mat-color($accent, darker) !important;
}
.list-item-disabled{
diff --git a/src/moblab-ui/src/app/configuration/configuration.component.html b/src/moblab-ui/src/app/configuration/configuration.component.html
index 11756d2..51a4673 100644
--- a/src/moblab-ui/src/app/configuration/configuration.component.html
+++ b/src/moblab-ui/src/app/configuration/configuration.component.html
@@ -6,7 +6,7 @@
</div>
</ng-container>
- <p class="title">Clould Configuration</p>
+ <p class="title">Cloud Configuration</p>
<form #formRef="ngForm" (ngSubmit)="onCloudConfigSubmit(formRef.value)">
<div class="row">
@@ -140,15 +140,15 @@
<div class="row">
<mat-checkbox
- id="command-checkbox"
- (change)="isRemoteCommandEnabledCheckboxChange()"
- [checked]="this.isRemoteCommandEnabled"
+ id="console-checkbox"
+ (change)="isRemoteConsoleEnabledCheckboxChange()"
+ [checked]="this.isRemoteConsoleEnabled"
[matTooltip]="
!this.isCloudEnabled ? cloudConfigDisabledMessage : ''
"
matTooltipPosition="below"
>
- Enable remote commands
+ Enable remote console
</mat-checkbox>
</div>
diff --git a/src/moblab-ui/src/app/view-jobs/view-jobs.component.html b/src/moblab-ui/src/app/view-jobs/view-jobs.component.html
index e84cc30..5597517 100644
--- a/src/moblab-ui/src/app/view-jobs/view-jobs.component.html
+++ b/src/moblab-ui/src/app/view-jobs/view-jobs.component.html
@@ -229,7 +229,7 @@
</mat-button-toggle-group>
</div>
<mat-divider></mat-divider>
- <div style="position: relative">
+ <div style="position: relative; min-height: 300px;">
<table
mat-table
[dataSource]="jobs"
diff --git a/src/moblab-ui/src/app/view-jobs/view-jobs.component.scss b/src/moblab-ui/src/app/view-jobs/view-jobs.component.scss
index a645f8e..1328f8c 100644
--- a/src/moblab-ui/src/app/view-jobs/view-jobs.component.scss
+++ b/src/moblab-ui/src/app/view-jobs/view-jobs.component.scss
@@ -114,19 +114,17 @@
top: 0;
width: 100%;
z-index: 100;
-}
+ min-height: 300px;
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+ align-items: center;
-.loading-spinner-wrapper {
- display: inline-flex;
- margin-bottom: 20px;
- margin-top: 10px;
- overflow: hidden;
- position: absolute;
- top: 50%;
-
- /* min-height: 300px; */
- width: 100%;
- z-index: 101;
+ .loading-spinner-wrapper {
+ display: inline-block;
+ width: fit-content;
+ height: fit-content;
+ }
}
.mat-spinner {
@@ -211,3 +209,5 @@
top: 0;
right: -0.5rem;
}
+
+
diff --git a/src/moblab-ui/src/app/widgets/confirmation-dialog/confirmation-dialog.html b/src/moblab-ui/src/app/widgets/confirmation-dialog/confirmation-dialog.html
index 8c3b6ca..7205434 100644
--- a/src/moblab-ui/src/app/widgets/confirmation-dialog/confirmation-dialog.html
+++ b/src/moblab-ui/src/app/widgets/confirmation-dialog/confirmation-dialog.html
@@ -2,7 +2,7 @@
<div mat-dialog-content class="mat-typography">
<p>{{message}}</p>
</div>
-<div mat-dialog-actions>
+<div mat-dialog-actions style="padding: 0 24px 16px 24px">
<button mat-raised-button color="primary" cdkFocusInitial [mat-dialog-close] (click)="onClick()">
Yes
</button>
@@ -10,4 +10,4 @@
<button mat-raised-button [mat-dialog-close]>
No
</button>
-</div>
\ No newline at end of file
+</div>
diff --git a/src/moblab-ui/src/app/widgets/update-button/update-button.component.ts b/src/moblab-ui/src/app/widgets/update-button/update-button.component.ts
index 44b46f9..ba05e58 100644
--- a/src/moblab-ui/src/app/widgets/update-button/update-button.component.ts
+++ b/src/moblab-ui/src/app/widgets/update-button/update-button.component.ts
@@ -28,6 +28,7 @@
this.moblabGrpcService.get_is_update_available(
(is_update_available: boolean) => {
this.isUpdateAvailable = is_update_available;
+ this.statusMessage = this.getUpdateStatusMessage();
},
(msg: string) => {
this.getUpdateStatusFailed = true;
