diff --git a/modules/ui/src/app/components/device-item/device-item.component.scss b/modules/ui/src/app/components/device-item/device-item.component.scss index 717ffa704..51186aa82 100644 --- a/modules/ui/src/app/components/device-item/device-item.component.scss +++ b/modules/ui/src/app/components/device-item/device-item.component.scss @@ -51,8 +51,8 @@ $border-radius: 12px; } &.non-interactive { + background: colors.$primary-container; &:hover { - background: colors.$surface-container; cursor: default; } } diff --git a/modules/ui/src/app/pages/testrun/components/testrun-initiate-form/testrun-initiate-form.component.html b/modules/ui/src/app/pages/testrun/components/testrun-initiate-form/testrun-initiate-form.component.html index 6caab0423..6347ec162 100644 --- a/modules/ui/src/app/pages/testrun/components/testrun-initiate-form/testrun-initiate-form.component.html +++ b/modules/ui/src/app/pages/testrun/components/testrun-initiate-form/testrun-initiate-form.component.html @@ -14,7 +14,7 @@ limitations under the License. -->
- Start New Testrun + Start new Testrun
- + {{ error$ | async }} + + + Top Tip: Your device must be powered off before starting Testrun + +
@@ -89,7 +95,7 @@ color="primary" mat-flat-button type="button"> - Start Testrun + Start new Testrun diff --git a/modules/ui/src/app/pages/testrun/components/testrun-initiate-form/testrun-initiate-form.component.scss b/modules/ui/src/app/pages/testrun/components/testrun-initiate-form/testrun-initiate-form.component.scss index b891efb2f..20c4a0048 100644 --- a/modules/ui/src/app/pages/testrun/components/testrun-initiate-form/testrun-initiate-form.component.scss +++ b/modules/ui/src/app/pages/testrun/components/testrun-initiate-form/testrun-initiate-form.component.scss @@ -15,12 +15,45 @@ */ @use 'colors'; @use 'variables'; +@use 'mixins'; :host { display: grid; grid-template-rows: 1fr; overflow: hidden; - width: 450px; + width: 490px; + background: colors.$surface-container; + + app-device-tests { + padding-left: 16px; + + ::ng-deep .device-form-test-modules { + min-height: 78px; + display: grid; + grid-template-columns: repeat(2, 1fr); + grid-template-rows: repeat(3, 1fr); + grid-auto-flow: column; + padding-top: 8px; + padding-left: 24px; + + p { + margin: 6px 0; + } + } + + ::ng-deep .device-tests-title { + margin: 16px 0 0; + font-size: 22px; + line-height: 28px; + } + } + + app-callout { + ::ng-deep .callout-container.info { + margin: 8px 0 0; + padding: 16px 16px 12px; + } + } } .progress-initiate-form { @@ -30,19 +63,17 @@ } .progress-initiate-form-title { - color: colors.$grey-800; - font-size: 22px; - line-height: 28px; - padding: 24px; - border-bottom: 1px solid colors.$light-grey; + @include mixins.headline-large; + padding: 24px 24px 20px; + text-align: center; } .progress-initiate-form-content { overflow: auto; min-height: 78px; - padding: 32px 0; + padding: 4px 24px 8px; display: grid; - gap: 24px; + gap: 8px; justify-content: center; justify-items: center; grid-template-columns: 1fr; @@ -56,8 +87,31 @@ .progress-initiate-form-actions { min-height: 30px; justify-content: space-between; - padding: 16px; - border-top: 1px solid colors.$lighter-grey; + padding: 24px 32px; + + button { + border-radius: variables.$corner-medium; + } + + .progress-initiate-form-actions-change-device { + margin-right: auto; + } +} + +.progress-initiate-form-actions-change-device[disabled] + ::ng-deep + .mat-mdc-button-persistent-ripple::before { + opacity: 1; + background: rgba(31, 31, 31, 0.1); + color: colors.$on-surface; +} + +.selected-device { + margin-bottom: 16px; +} + +.device-tests-error { + padding-left: 16px; } .hidden { diff --git a/modules/ui/src/app/pages/testrun/components/testrun-initiate-form/testrun-initiate-form.component.ts b/modules/ui/src/app/pages/testrun/components/testrun-initiate-form/testrun-initiate-form.component.ts index d7a2c5a55..725452f60 100644 --- a/modules/ui/src/app/pages/testrun/components/testrun-initiate-form/testrun-initiate-form.component.ts +++ b/modules/ui/src/app/pages/testrun/components/testrun-initiate-form/testrun-initiate-form.component.ts @@ -49,6 +49,7 @@ import { AppState } from '../../../../store/state'; import { selectDevices } from '../../../../store/selectors'; import { BehaviorSubject } from 'rxjs/internal/BehaviorSubject'; import { TestrunStatus } from '../../../../model/testrun-status'; +import { CalloutType } from '../../../../model/callout-type'; import { CommonModule } from '@angular/common'; import { MatToolbarModule } from '@angular/material/toolbar'; import { MatProgressBarModule } from '@angular/material/progress-bar'; @@ -60,6 +61,7 @@ import { DeviceItemComponent } from '../../../../components/device-item/device-i import { SpinnerComponent } from '../../../../components/spinner/spinner.component'; import { MatTooltipModule } from '@angular/material/tooltip'; import { MatButtonModule } from '@angular/material/button'; +import { CalloutComponent } from '../../../../components/callout/callout.component'; interface DialogData { device?: Device; @@ -83,6 +85,7 @@ interface DialogData { ReactiveFormsModule, DeviceTestsComponent, SpinnerComponent, + CalloutComponent, MatTooltipModule, ], }) @@ -107,6 +110,7 @@ export class TestrunInitiateFormComponent setFirmwareFocus = false; readonly DeviceStatus = DeviceStatus; readonly DeviceView = DeviceView; + public readonly CalloutType = CalloutType; error$: BehaviorSubject = new BehaviorSubject( null ); diff --git a/modules/ui/src/theming/mixins.scss b/modules/ui/src/theming/mixins.scss index 3b3c10c5d..667c07dd9 100644 --- a/modules/ui/src/theming/mixins.scss +++ b/modules/ui/src/theming/mixins.scss @@ -109,11 +109,21 @@ 0px 1px 3px 1px rgba(0, 0, 0, 0.15); } -@mixin headline-small { - font-size: 24px; - line-height: 32px; +@mixin headline { color: colors.$on-surface; font-family: variables.$font-primary; font-weight: 400; letter-spacing: 0; } + +@mixin headline-large { + font-size: 32px; + line-height: 40px; + @include headline; +} + +@mixin headline-small { + font-size: 24px; + line-height: 32px; + @include headline; +} diff --git a/modules/ui/src/theming/variables.scss b/modules/ui/src/theming/variables.scss index f772b27cf..4c5a69004 100644 --- a/modules/ui/src/theming/variables.scss +++ b/modules/ui/src/theming/variables.scss @@ -13,7 +13,7 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -$device-item-width: 352px; +$device-item-width: 100%; $profiles-drawer-width: 320px; $form-max-width: 732px; $icon-size: 24px;