From 6c4789e815f30c546e7538abd8c682004740a30b Mon Sep 17 00:00:00 2001
From: nhertz <nhertz@nrao.edu>
Date: Tue, 13 Apr 2021 16:40:42 -0600
Subject: [PATCH] Implemented skeleton capability definition using Bootstrap
with Reid's help
---
apps/web/src/_variables.scss | 31 +++++++++++++++++++
.../capability-request.component.html | 2 +-
.../capability-request.component.scss | 4 ++-
.../capability-definition.component.html | 15 ++++++---
.../capability-definition.component.scss | 2 ++
.../request-header.component.scss | 8 +++--
.../running-status-button.component.scss | 3 ++
apps/web/src/styles.scss | 1 +
8 files changed, 57 insertions(+), 9 deletions(-)
create mode 100644 apps/web/src/_variables.scss
diff --git a/apps/web/src/_variables.scss b/apps/web/src/_variables.scss
new file mode 100644
index 000000000..008b8a85e
--- /dev/null
+++ b/apps/web/src/_variables.scss
@@ -0,0 +1,31 @@
+$timestamp-text-color: #757575;
+$request-status-page-border-light: #d4d4d4;
+$request-status-page-border-dark: #bdbdbd;
+
+// Background for view capability request page
+$capability-request-bg-light: rgba(240, 240, 240, 1);
+$capability-request-bg-dark: rgba(220, 220, 220, 1);
+$capability-request-bg-gradient: linear-gradient(
+ 0deg,
+ $capability-request-bg-dark 0%,
+ $capability-request-bg-light 100%
+);
+
+// RUNNING status color
+$running-status-bg-light: #5fb2f4;
+$running-status-bg-dark: #2196f3;
+$running-status-bg-gradient: linear-gradient(
+ 0deg,
+ $running-status-bg-dark 0%,
+ $running-status-bg-light 100%
+);
+
+
+// QUEUED status color
+$running-status-bg-light: #5fb2f4;
+$running-status-bg-dark: #2196f3;
+$running-status-bg-gradient: linear-gradient(
+ 0deg,
+ $running-status-bg-dark 0%,
+ $running-status-bg-light 100%
+);
diff --git a/apps/web/src/app/workspaces/components/capability-request/capability-request.component.html b/apps/web/src/app/workspaces/components/capability-request/capability-request.component.html
index a91bf844c..da62ed743 100644
--- a/apps/web/src/app/workspaces/components/capability-request/capability-request.component.html
+++ b/apps/web/src/app/workspaces/components/capability-request/capability-request.component.html
@@ -4,7 +4,7 @@
<div id="definition-parameters-and-versions">
<div id="capability-definition-container">
<span id="capability-label">Capability</span>
- <app-capability-definition id="capability-definition"></app-capability-definition>
+ <app-capability-definition id="capability-definition" class="w-100"></app-capability-definition>
</div>
<h1 id="parameters">PARAMETERS!!!!!!!!!!!!</h1>
</div>
diff --git a/apps/web/src/app/workspaces/components/capability-request/capability-request.component.scss b/apps/web/src/app/workspaces/components/capability-request/capability-request.component.scss
index 796064d9c..cedb49f13 100644
--- a/apps/web/src/app/workspaces/components/capability-request/capability-request.component.scss
+++ b/apps/web/src/app/workspaces/components/capability-request/capability-request.component.scss
@@ -1,3 +1,5 @@
+@import "src/variables.scss";
+
div {
width: 100%;
padding: 0.5rem 3rem;
@@ -7,7 +9,7 @@ div {
#definition-parameters-and-versions {
display: grid;
grid-template-columns: repeat(2, 1fr);
- background: linear-gradient(0deg, rgba(220, 220, 220, 1) 0%, rgba(240, 240, 240, 1) 100%);
+ background: $capability-request-bg-gradient;
}
#capability-definition {
diff --git a/apps/web/src/app/workspaces/components/capability-request/components/capability-definition/capability-definition.component.html b/apps/web/src/app/workspaces/components/capability-request/components/capability-definition/capability-definition.component.html
index 213e68785..78022d120 100644
--- a/apps/web/src/app/workspaces/components/capability-request/components/capability-definition/capability-definition.component.html
+++ b/apps/web/src/app/workspaces/components/capability-request/components/capability-definition/capability-definition.component.html
@@ -2,9 +2,16 @@
<h5 id="capability-name">null</h5>
<div id="step-sequence">
- <ul>
- <li>Step 1</li>
- <li>Step 2</li>
- </ul>
+ <div class="container-fluid">
+ <div class="row bg-primary rounded rounded-lg mb-1 text-white py-2 align-items-center">
+ <div class="col">Step 1</div>
+ <div class="col-auto">
+ <span class="fas fa-play-circle fa-2x"></span>
+ </div>
+ </div>
+ <div class="row bg-secondary rounded rounded-lg mb-1 text-white py-2 align-items-center">
+ <div class="col">Step 2</div>
+ <div class="col-auto"><span class="fa fa-circle fa-2x"></span></div>
+ </div>
</div>
</div>
diff --git a/apps/web/src/app/workspaces/components/capability-request/components/capability-definition/capability-definition.component.scss b/apps/web/src/app/workspaces/components/capability-request/components/capability-definition/capability-definition.component.scss
index e865be441..17a4b5aa2 100644
--- a/apps/web/src/app/workspaces/components/capability-request/components/capability-definition/capability-definition.component.scss
+++ b/apps/web/src/app/workspaces/components/capability-request/components/capability-definition/capability-definition.component.scss
@@ -1,3 +1,5 @@
+@import "src/variables";
+
#definition-container {
background-color: #ffffff;
border-radius: 10px;
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 b8706a8d7..51ecd7186 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
@@ -1,3 +1,5 @@
+@import "src/variables";
+
div {
width: 100%;
padding: 0.5rem 3rem;
@@ -6,12 +8,12 @@ div {
}
.timestamp {
- color: #757575;
+ color: $timestamp-text-color;
}
#request-id-and-status {
grid-template-areas: "id status";
- border-bottom: 1px solid #d4d4d4;
+ border-bottom: 1px solid $request-status-page-border-light;
}
#request-id {
grid-area: id;
@@ -22,7 +24,7 @@ div {
}
#created-and-updated-timestamps {
grid-template-areas: "created updated";
- border-bottom: 1px solid #bdbdbd;
+ border-bottom: 1px solid $request-status-page-border-dark;
}
#created-time {
justify-self: left;
diff --git a/apps/web/src/app/workspaces/components/capability-request/components/status-buttons/running-status-button/running-status-button.component.scss b/apps/web/src/app/workspaces/components/capability-request/components/status-buttons/running-status-button/running-status-button.component.scss
index acae8573c..87fb7c3ec 100644
--- a/apps/web/src/app/workspaces/components/capability-request/components/status-buttons/running-status-button/running-status-button.component.scss
+++ b/apps/web/src/app/workspaces/components/capability-request/components/status-buttons/running-status-button/running-status-button.component.scss
@@ -1,6 +1,9 @@
+@import "src/variables";
+
.running-status {
// Request status is running
// Green with play icon
+ background: $running-status-bg-gradient;
}
#request-status-button {
grid-area: status;
diff --git a/apps/web/src/styles.scss b/apps/web/src/styles.scss
index 895855b09..b7d9acf62 100644
--- a/apps/web/src/styles.scss
+++ b/apps/web/src/styles.scss
@@ -1,4 +1,5 @@
@import "~bootstrap/scss/bootstrap.scss";
+//@import "src/variables.scss";
* {
font-family: "Lato", Helvetica, Arial, sans-serif;
--
GitLab