From 5ee75e415ce881e655e9e1ee4c377f8740aadf47 Mon Sep 17 00:00:00 2001 From: Shubham Takode Date: Wed, 14 Feb 2024 20:03:02 +0530 Subject: [PATCH] added icons updated styles --- .../icons/pipeline/pipeline-add-new-step.svg | 3 + .../icons/pipeline/pipeline-compile.svg | 3 + .../assets/icons/pipeline/pipeline-save.svg | 3 + src/app/webapp-common/assets/icons/play.svg | 3 + .../edit-pipeline-header.component.html | 38 ++++----- .../edit-pipeline-header.component.scss | 84 +++++++++++++++++-- .../edit-pipeline.component.html | 17 ++-- .../edit-pipeline.component.scss | 56 ++++++++----- .../shared/ui-components/styles/icons.scss | 17 ++++ 9 files changed, 162 insertions(+), 62 deletions(-) create mode 100644 src/app/webapp-common/assets/icons/pipeline/pipeline-add-new-step.svg create mode 100644 src/app/webapp-common/assets/icons/pipeline/pipeline-compile.svg create mode 100644 src/app/webapp-common/assets/icons/pipeline/pipeline-save.svg create mode 100644 src/app/webapp-common/assets/icons/play.svg diff --git a/src/app/webapp-common/assets/icons/pipeline/pipeline-add-new-step.svg b/src/app/webapp-common/assets/icons/pipeline/pipeline-add-new-step.svg new file mode 100644 index 00000000..a1b82663 --- /dev/null +++ b/src/app/webapp-common/assets/icons/pipeline/pipeline-add-new-step.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/app/webapp-common/assets/icons/pipeline/pipeline-compile.svg b/src/app/webapp-common/assets/icons/pipeline/pipeline-compile.svg new file mode 100644 index 00000000..a73d8d12 --- /dev/null +++ b/src/app/webapp-common/assets/icons/pipeline/pipeline-compile.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/app/webapp-common/assets/icons/pipeline/pipeline-save.svg b/src/app/webapp-common/assets/icons/pipeline/pipeline-save.svg new file mode 100644 index 00000000..3706034d --- /dev/null +++ b/src/app/webapp-common/assets/icons/pipeline/pipeline-save.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/app/webapp-common/assets/icons/play.svg b/src/app/webapp-common/assets/icons/play.svg new file mode 100644 index 00000000..09e61cae --- /dev/null +++ b/src/app/webapp-common/assets/icons/play.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/app/webapp-common/pipelines/edit-pipeline-header/edit-pipeline-header.component.html b/src/app/webapp-common/pipelines/edit-pipeline-header/edit-pipeline-header.component.html index 193a19ca..9f221034 100644 --- a/src/app/webapp-common/pipelines/edit-pipeline-header/edit-pipeline-header.component.html +++ b/src/app/webapp-common/pipelines/edit-pipeline-header/edit-pipeline-header.component.html @@ -1,33 +1,19 @@ - - -
- + + - - - - - - - + --> + + + + + + + +
\ No newline at end of file diff --git a/src/app/webapp-common/pipelines/edit-pipeline-header/edit-pipeline-header.component.scss b/src/app/webapp-common/pipelines/edit-pipeline-header/edit-pipeline-header.component.scss index bbc6a604..ae6dc8b6 100644 --- a/src/app/webapp-common/pipelines/edit-pipeline-header/edit-pipeline-header.component.scss +++ b/src/app/webapp-common/pipelines/edit-pipeline-header/edit-pipeline-header.component.scss @@ -1,13 +1,81 @@ @import '../../../../webapp-common/shared/ui-components/styles/variables'; @import '../../../../webapp-common/layout/layout.scss'; -.header-container{ - display: flex; - flex-grow: 1; - justify-content: end; - background-color: #333746; +// .header-container{ +// display: flex; +// flex-grow: 1; +// justify-content: end; +// background-color: #333746; +// height: $project-header-height; +// gap: 24px; +// padding-right: 28px; +// transition: background-color 0.5s; +// } + + + + +:host { + display: block; + width: 100%; + + .header-container { + padding-left: 24px; height: $project-header-height; - gap: 24px; - padding-right: 28px; transition: background-color 0.5s; -} \ No newline at end of file + background-color: #1A1E2C; + .hide-item { + visibility: hidden; + } + + &.archive-mode { + transition: background-color 0.5s; + background-color: #333746; + + ::ng-deep button { + border-color: #636e97; + box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16); + } + } + } + + .right-buttons { + margin-right: 28px; + + sm-experiment-menu { + padding: 6px 0; + } + } + + sm-experiment-custom-cols-menu { + margin-right: 25px; + } + + sm-clear-filters-button { + margin-right: 24px; + } + + .download-btn { + margin-right: 24px; + color: $blue-300; + } + + .al-ico-tune { + margin-right: 24px; + color: $blue-300; + cursor: pointer; + + + &.active, + &:hover { + color: $blue-200; + + } + } + + .compare-view-select { + margin-right: 24px; + } + +} + diff --git a/src/app/webapp-common/pipelines/edit-pipeline/edit-pipeline.component.html b/src/app/webapp-common/pipelines/edit-pipeline/edit-pipeline.component.html index 7c56b6a6..34779dc1 100644 --- a/src/app/webapp-common/pipelines/edit-pipeline/edit-pipeline.component.html +++ b/src/app/webapp-common/pipelines/edit-pipeline/edit-pipeline.component.html @@ -1,10 +1,11 @@ -
- - -
-
 DETAILS
-
- PLEASE ADD ATLEAST ONE STEP TO GET STARTED
+ + +
+ +
+ +
+ PLEASE ADD ATLEAST ONE STEP TO GET STARTED
\ No newline at end of file diff --git a/src/app/webapp-common/pipelines/edit-pipeline/edit-pipeline.component.scss b/src/app/webapp-common/pipelines/edit-pipeline/edit-pipeline.component.scss index 1e63d029..ff23d723 100644 --- a/src/app/webapp-common/pipelines/edit-pipeline/edit-pipeline.component.scss +++ b/src/app/webapp-common/pipelines/edit-pipeline/edit-pipeline.component.scss @@ -1,33 +1,43 @@ -.sm-edit-pipeline-main{ +.edit-pipeline-main { display: flexbox; } -.sm-edit-pipeline-body{ + +.edit-pipeline-body { // display: flex; - flex-grow: 1; - padding: 30px; - justify-content: flex-start; - height: 100%; - .details{ - display: flex; - width: 144px; - height: 45px; - background-color: #2c3246; - align-items: center; - justify-content: center; - border-radius: 5px; - .icon{ - margin-right: 20px; - } - } - .addStep{ + // flex-grow: 1; + // padding: 30px; + // justify-content: flex-start; + // height: 100%; + + width: 100%; + height: calc(100% - 66px); + transition: height 0.3s; + background-color: #0D0E15; + + // .details { + // display: flex; + // width: 144px; + // height: 45px; + + // align-items: center; + // justify-content: center; + // border-radius: 5px; + + // .icon { + // margin-right: 20px; + // } + // } + + .pipeline-empty { display: flex; flex-direction: column; align-items: center; height: 100svh; justify-content: center; - .icon{ - width:107px ; - height:107px ; + + .icon { + // width: 107px; + // height: 107px; } } -} +} \ No newline at end of file diff --git a/src/app/webapp-common/shared/ui-components/styles/icons.scss b/src/app/webapp-common/shared/ui-components/styles/icons.scss index 5542d696..5652ea16 100755 --- a/src/app/webapp-common/shared/ui-components/styles/icons.scss +++ b/src/app/webapp-common/shared/ui-components/styles/icons.scss @@ -599,3 +599,20 @@ .i-fingers-white { @include icon('#{$assets-icons-path}/fingers-white.svg'); } + +.i-pipeline-save { + @include icon('#{$assets-icons-path}/pipeline/pipeline-save.svg'); +} + + +.i-pipeline-compile { + @include icon('#{$assets-icons-path}/pipeline/pipeline-compile.svg'); +} + +.i-pipeline-add-new-step { + @include icon('#{$assets-icons-path}/pipeline/pipeline-add-new-step.svg'); +} + +.i-play { + @include icon('#{$assets-icons-path}/play.svg'); +} \ No newline at end of file