diff --git a/apps/web/src/app/workspaces/components/capability-request/components/request-header/request-header.component.html b/apps/web/src/app/workspaces/components/capability-request/components/request-header/request-header.component.html index 80f8e478cea2714116234120391707c0458fa8d7..d6858405dca486aecad8c385921a0012851535b3 100644 --- a/apps/web/src/app/workspaces/components/capability-request/components/request-header/request-header.component.html +++ b/apps/web/src/app/workspaces/components/capability-request/components/request-header/request-header.component.html @@ -1,11 +1,9 @@ <div id="request-id-and-status"> - <h2 id="request-id" class="left-aligned">Request #7</h2> - <button id="request-status-button" type="button" class="btn btn-success right-aligned"> - Running<span class="fas fa-play"></span> - </button> + <h2 id="request-id">Request #7</h2> + <app-running-status-button id="request-status"></app-running-status-button> </div> <div id="created-and-updated-timestamps"> - <h4 id="created-time" class="left-aligned timestamp">Created 2 hours ago</h4> - <h4 id="last-updated-time" class="right-aligned timestamp">Updated 2 seconds ago</h4> + <h5 id="created-time" class="timestamp">Created 2 hours ago</h5> + <h5 id="last-updated-time" class="timestamp">Updated 2 seconds ago</h5> </div> diff --git a/apps/web/src/app/workspaces/components/capability-request/components/request-header/request-header.component.scss b/apps/web/src/app/workspaces/components/capability-request/components/request-header/request-header.component.scss index 8813f9c0b6996216bb855ad0e7b1c6634f828311..adafcc23a10b61bafc28903b4983c4d4c6fe1136 100644 --- a/apps/web/src/app/workspaces/components/capability-request/components/request-header/request-header.component.scss +++ b/apps/web/src/app/workspaces/components/capability-request/components/request-header/request-header.component.scss @@ -5,12 +5,6 @@ div { grid-template-columns: repeat(2, 1fr); } -.left-aligned { - justify-self: left; -} -.right-aligned { - justify-self: right; -} .timestamp { color: #757575; } @@ -19,19 +13,20 @@ div { grid-template-areas: "id status"; border-bottom: 1px solid #e0e0e0; } - #request-id { grid-area: id; + justify-self: left; } - -#request-status-button { - grid-area: status; +#request-status { + justify-self: right; } - #created-and-updated-timestamps { grid-template-areas: "created updated"; border-bottom: 1px solid #bdbdbd; } - #created-time { + justify-self: left; +} +#last-updated-time { + justify-self: right; } diff --git a/apps/web/src/app/workspaces/workspaces.component.ts b/apps/web/src/app/workspaces/workspaces.component.ts index 13d66cfa490092f77f91ab78acf2d9ef99fffc8a..f9158c0a6d415ea1585b79a44a2ced815db06f93 100644 --- a/apps/web/src/app/workspaces/workspaces.component.ts +++ b/apps/web/src/app/workspaces/workspaces.component.ts @@ -1,5 +1,4 @@ import { Component, OnInit } from "@angular/core"; -import { FormsModule } from "@angular/forms"; import { CapabilityLauncherService } from "./services/capability-launcher.service"; import { CapabilityRequest } from "./model/capability-request"; import { CapabilityExecution } from "./model/capability-execution"; diff --git a/apps/web/src/app/workspaces/workspaces.module.ts b/apps/web/src/app/workspaces/workspaces.module.ts index d1743d81d22e2c9fbe87212cda826bb186047bb4..1e9d79da6e0b46efaeeb16e6b95b7fbeab937776 100644 --- a/apps/web/src/app/workspaces/workspaces.module.ts +++ b/apps/web/src/app/workspaces/workspaces.module.ts @@ -5,9 +5,15 @@ import { WorkspacesComponent } from "./workspaces.component"; import { FormsModule, ReactiveFormsModule } from "@angular/forms"; import { CapabilityRequestComponent } from "./components/capability-request/capability-request.component"; import { RequestHeaderComponent } from "./components/capability-request/components/request-header/request-header.component"; +import { RunningStatusButtonComponent } from "./components/capability-request/components/status-buttons/running-status-button/running-status-button.component"; @NgModule({ - declarations: [WorkspacesComponent, CapabilityRequestComponent, RequestHeaderComponent], + declarations: [ + WorkspacesComponent, + CapabilityRequestComponent, + RequestHeaderComponent, + RunningStatusButtonComponent, + ], imports: [CommonModule, WorkspacesRoutingModule, ReactiveFormsModule, FormsModule], }) export class WorkspacesModule {}