ClearML/clearml-web
1
0
Fork 0
mirror of https://github.com/clearml/clearml-web synced 2025-05-08 14:04:38 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

added icons updated styles

Browse Source
This commit is contained in:
Shubham Takode 2024-02-14 20:03:02 +05:30
parent 539741d89d
commit 5ee75e415c
9 changed files with 162 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/app/webapp-common/assets/icons/pipeline/pipeline-add-new-step.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M9.31805 0C6.93581 0 4.99805 1.93824 4.99805 4.32C4.99805 6.53956 6.68091 8.37232 8.83805 8.61188V21.6H15.078V23.04H18.918V19.2H15.078V19.68V20.64H9.79805V16.32H15.078V17.76H18.918V13.92H15.078V14.4V15.36H9.79805V11.04H15.078V12.48H18.918V8.64H15.078V9.12V10.08H9.79805V8.61188C11.9552 8.37232 13.638 6.53956 13.638 4.32C13.638 1.93824 11.7003 0 9.31805 0ZM8.83805 2.4H9.79805V3.84H11.238V4.8H9.79805V6.24H8.83805V4.8H7.39805V3.84H8.83805V2.4ZM17.9992 11.5714L16.998 9.6L16.7134 10.7143L17.958 11.52L17.142 10.2857L16.038 11.04L16.7134 11.1429L17.9992 11.5714ZM16.038 14.88H17.958V16.8H16.038V14.88ZM16.038 20.16H17.958V22.08H16.038V20.16Z" fill="#A4ADCD"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 770 B

3
src/app/webapp-common/assets/icons/pipeline/pipeline-compile.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M20.25 3.75H3.75C3.35218 3.75 2.97064 3.90804 2.68934 4.18934C2.40804 4.47064 2.25 4.85218 2.25 5.25V18.75C2.25 19.1478 2.40804 19.5294 2.68934 19.8107C2.97064 20.092 3.35218 20.25 3.75 20.25H20.25C20.6478 20.25 21.0294 20.092 21.3107 19.8107C21.592 19.5294 21.75 19.1478 21.75 18.75V5.25C21.75 4.85218 21.592 4.47064 21.3107 4.18934C21.0294 3.90804 20.6478 3.75 20.25 3.75ZM8.7 13.65C8.85913 13.7693 8.96433 13.947 8.99246 14.1439C9.02059 14.3408 8.96935 14.5409 8.85 14.7C8.73065 14.8591 8.55298 14.9643 8.35607 14.9925C8.15915 15.0206 7.95913 14.9693 7.8 14.85L4.8 12.6C4.70685 12.5301 4.63125 12.4396 4.57918 12.3354C4.52711 12.2313 4.5 12.1164 4.5 12C4.5 11.8836 4.52711 11.7687 4.57918 11.6646C4.63125 11.5604 4.70685 11.4699 4.8 11.4L7.8 9.15C7.95913 9.03065 8.15915 8.97941 8.35607 9.00754C8.55298 9.03567 8.73065 9.14087 8.85 9.3C8.96935 9.45913 9.02059 9.65915 8.99246 9.85607C8.96433 10.053 8.85913 10.2307 8.7 10.35L6.49969 12L8.7 13.65ZM14.2209 6.95625L11.2209 17.4562C11.1954 17.5526 11.1508 17.6429 11.09 17.7219C11.0291 17.8009 10.953 17.8669 10.8663 17.9161C10.7796 17.9654 10.684 17.9968 10.585 18.0086C10.486 18.0205 10.3856 18.0124 10.2897 17.985C10.1939 17.9576 10.1044 17.9113 10.0267 17.8489C9.94888 17.7865 9.88433 17.7092 9.83678 17.6216C9.78923 17.5339 9.75964 17.4377 9.74973 17.3385C9.73982 17.2393 9.74979 17.1391 9.77906 17.0438L12.7791 6.54375C12.8367 6.356 12.9657 6.19836 13.1384 6.1047C13.311 6.01105 13.5135 5.98884 13.7023 6.04286C13.8911 6.09688 14.0512 6.22282 14.1482 6.39361C14.2452 6.5644 14.2713 6.76641 14.2209 6.95625ZM19.2 12.6L16.2 14.85C16.0409 14.9693 15.8408 15.0206 15.6439 14.9925C15.447 14.9643 15.2693 14.8591 15.15 14.7C15.0307 14.5409 14.9794 14.3408 15.0075 14.1439C15.0357 13.947 15.1409 13.7693 15.3 13.65L17.5003 12L15.3 10.35C15.2212 10.2909 15.1548 10.2169 15.1046 10.1321C15.0545 10.0474 15.0215 9.95357 15.0075 9.85607C14.9936 9.75856 14.999 9.65927 15.0235 9.56386C15.0479 9.46845 15.0909 9.37879 15.15 9.3C15.2091 9.22121 15.2831 9.15482 15.3679 9.10464C15.4526 9.05446 15.5464 9.02147 15.6439 9.00754C15.7414 8.99361 15.8407 8.99902 15.9361 9.02346C16.0315 9.04791 16.1212 9.09091 16.2 9.15L19.2 11.4C19.2931 11.4699 19.3687 11.5604 19.4208 11.6646C19.4729 11.7687 19.5 11.8836 19.5 12C19.5 12.1164 19.4729 12.2313 19.4208 12.3354C19.3687 12.4396 19.2931 12.5301 19.2 12.6Z" fill="#A4ADCD"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.4 KiB

3
src/app/webapp-common/assets/icons/pipeline/pipeline-save.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M6 2C5.46957 2 4.96086 2.21071 4.58579 2.58579C4.21071 2.96086 4 3.46957 4 4V20C4 20.5304 4.21071 21.0391 4.58579 21.4142C4.96086 21.7893 5.46957 22 6 22H18C18.5304 22 19.0391 21.7893 19.4142 21.4142C19.7893 21.0391 20 20.5304 20 20V6.414C19.9999 5.88361 19.7891 5.37499 19.414 5L17 2.586C16.625 2.2109 16.1164 2.00011 15.586 2H6ZM16.238 10.793C16.3335 10.7008 16.4097 10.5904 16.4621 10.4684C16.5145 10.3464 16.5421 10.2152 16.5433 10.0824C16.5444 9.94962 16.5191 9.81794 16.4688 9.69505C16.4185 9.57215 16.3443 9.4605 16.2504 9.3666C16.1565 9.27271 16.0449 9.19846 15.922 9.14818C15.7991 9.0979 15.6674 9.0726 15.5346 9.07375C15.4018 9.0749 15.2706 9.10249 15.1486 9.1549C15.0266 9.20731 14.9162 9.28349 14.824 9.379L10.582 13.622L9.167 12.207C8.9784 12.0248 8.7258 11.924 8.4636 11.9263C8.2014 11.9286 7.95059 12.0338 7.76518 12.2192C7.57977 12.4046 7.4746 12.6554 7.47233 12.9176C7.47005 13.1798 7.57084 13.4324 7.753 13.621L9.803 15.672C9.90515 15.7742 10.0264 15.8553 10.1599 15.9106C10.2934 15.9659 10.4365 15.9944 10.581 15.9944C10.7255 15.9944 10.8686 15.9659 11.0021 15.9106C11.1356 15.8553 11.2568 15.7742 11.359 15.672L16.238 10.793Z" fill="#A4ADCD"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

3
src/app/webapp-common/assets/icons/play.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M22.5 12C22.5006 12.2546 22.4353 12.5051 22.3105 12.727C22.1856 12.949 22.0055 13.1348 21.7875 13.2665L8.28 21.5297C8.05227 21.6691 7.79144 21.7452 7.52445 21.7502C7.25746 21.7551 6.99399 21.6887 6.76125 21.5578C6.53073 21.4289 6.3387 21.2409 6.2049 21.0132C6.07111 20.7855 6.00039 20.5263 6 20.2622V3.73779C6.00039 3.47368 6.07111 3.21445 6.2049 2.98673C6.3387 2.75902 6.53073 2.57106 6.76125 2.44217C6.99399 2.31124 7.25746 2.24482 7.52445 2.24977C7.79144 2.25471 8.05227 2.33084 8.28 2.47029L21.7875 10.7334C22.0055 10.8651 22.1856 11.051 22.3105 11.2729C22.4353 11.4949 22.5006 11.7453 22.5 12Z" fill="#A4ADCD"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 729 B

38
src/app/webapp-common/pipelines/edit-pipeline-header/edit-pipeline-header.component.html
View File

@ -1,33 +1,19 @@
<!-- <div class="d-flex justify-content-between header-container align-items-center"
[ngClass]="{'archive-mode': isArchived}"> -->
<!-- <div class="d-flex-center"> -->
<div class="d-flex justify-content-end align-items-center header-container">
<sm-clear-filters-button
<div class="d-flex justify-content-end align-items-center header-container">
<!-- <sm-clear-filters-button
*ngIf="!minimizedView"
[tableFilters]="tableFilters"
(clearTableFilters)="clearTableFilters.emit(tableFilters)"
></sm-clear-filters-button>
<sm-menu *ngIf="tableMode !== 'compare'"
></sm-clear-filters-button> -->
<!-- <sm-menu *ngIf="tableMode !== 'compare'"
class="download-btn" buttonClass="al-icon al-ico-download pointer lm" panelClasses="light-theme"
[showCart]="false" smTooltip="Download table as CSV" [disabled]="noData" data-id="downloadCSV">
<sm-menu-item (itemClicked)="downloadTableAsCSV.emit()" itemLabel="Download on screen items"></sm-menu-item>
<sm-menu-item (itemClicked)="downloadFullTableAsCSV.emit()"
[itemLabel]="'Download first '+ (maxDownloadItems$ | async) +' items'"></sm-menu-item>
</sm-menu>
</sm-menu> -->
<!-- <mat-form-field *ngIf="tableMode === 'compare'" appearance="outline" class="dark-outline compare-view-select no-bottom">
<mat-select [(ngModel)]="compareView" name="compareView" panelClass="dark-outline" (ngModelChange)="compareViewChanged.emit($event)">
<mat-option value="scalars">Scalars</mat-option>
<mat-option value="plots">Plots</mat-option>
</mat-select>
</mat-form-field> -->
<!-- <i class="al-icon al-ico-tune sm-md"
*ngIf="tableMode === 'compare' && compareView === 'scalars'"
[class.active]="showCompareScalarSettings"
(click)="toggleShowCompareSettings.emit()"></i> -->
<sm-experiment-custom-cols-menu
<!-- <sm-experiment-custom-cols-menu
*ngIf="!minimizedView || tableMode === 'compare'"
[metricVariants]="metricVariants"
[hyperParams]="hyperParams"
@ -46,6 +32,12 @@
[allowAutoRefresh]="true"
(setAutoRefresh)="setAutoRefresh.emit($event)"
>
</sm-refresh-button>
<!-- </div> -->
<!-- </div> -->
</sm-refresh-button> -->
<sm-menu class="download-btn" buttonClass="icon i-pipeline-save lm" [showCart]="false" smTooltip="Download table as CSV" ></sm-menu>
<sm-menu class="download-btn" buttonClass="icon i-pipeline-compile lm" [showCart]="false" smTooltip="Download table as CSV" ></sm-menu>
<sm-menu class="download-btn" buttonClass="icon i-pipeline-add-new-step lm" [showCart]="false" smTooltip="Download table as CSV" ></sm-menu>
<sm-menu class="download-btn" buttonClass="al-icon al-ico-settings pointer lm" [showCart]="false" smTooltip="Download table as CSV" ></sm-menu>
<sm-menu class="download-btn" buttonClass="icon i-play lm" [showCart]="false" smTooltip="Download table as CSV" ></sm-menu>
</div>

82
src/app/webapp-common/pipelines/edit-pipeline-header/edit-pipeline-header.component.scss
View File

@ -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;
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;
}
}

17
src/app/webapp-common/pipelines/edit-pipeline/edit-pipeline.component.html
View File

@ -1,10 +1,11 @@
<div class="sm-edit-pipeline-main projects">
<sm-edit-pipeline-header
>
</sm-edit-pipeline-header>
<div class="sm-edit-pipeline-body">
<div class="details"><i class="icon no-output-icon i-no-code-dark"></i>&nbsp;DETAILS</div>
<div class="addStep"><i class="icon i-fingers-white"></i>
PLEASE ADD ATLEAST ONE STEP TO GET STARTED</div>
<sm-edit-pipeline-header
>
</sm-edit-pipeline-header>
<div class="edit-pipeline-body">
<!-- <div class="details"><i class="icon no-output-icon i-no-code-dark"></i>&nbsp;DETAILS</div> -->
<div class="pipeline-empty">
<i class="icon i-fingers-white mx-auto xxl"></i>
<br/>
PLEASE ADD ATLEAST ONE STEP TO GET STARTED
</div>
</div>

54
src/app/webapp-common/pipelines/edit-pipeline/edit-pipeline.component.scss
View File

@ -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;
}
}
}

17
src/app/webapp-common/shared/ui-components/styles/icons.scss
View File

@ -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');
}