diff --git a/src/app/features/dashboard/my-models/my-models.component.html b/src/app/features/dashboard/my-models/my-models.component.html
index e1fddb873b5261bb0e91779f69e81da642fe8e45..9595ccec85ae1bea4b18788793fc3acdd87ff227 100644
--- a/src/app/features/dashboard/my-models/my-models.component.html
+++ b/src/app/features/dashboard/my-models/my-models.component.html
@@ -3,12 +3,11 @@
<div>
<gp-headline [headlineTitle]="'My Models'"></gp-headline>
</div>
-
- <div style="display: flex; flex-direction: row; gap: 6px">
- <a class="link-home" (click)="onHomeClick()">Home</a>
- <span class="link-marketplace">/</span>
- <a class="link-marketplace">My Models</a>
- </div>
+ <gp-breadcrumb-navigation
+ [firstNavigationLabel]="{ label: 'Home' }"
+ [secondNavigationLabel]="{ label: 'My models', disabled: true }"
+ (firstNavigationClicked)="onHomeClick()"
+ ></gp-breadcrumb-navigation>
</div>
</section>
<mat-sidenav-container>
@@ -22,8 +21,8 @@
></gp-filters>
</mat-sidenav>
<mat-sidenav-content>
- <div style="display: flex; flex-direction: column; padding: 20px">
- <div style="display: flex; flex-direction: row; align-self: end">
+ <div class="content-container">
+ <div class="sort-toggle-container">
<div class="gp-sort-by">
<gp-sort-by
[sortByOptions]="sortByOptions"
@@ -40,7 +39,7 @@
</div>
<!--Unpublished models section-->
@if (modelType === "both") {
- <div style="display: flex; flex-direction: column">
+ <div class="flex-column">
<gp-model-list
[solutions]="selectedUnpublishedSolutions"
[totalItems]="unpublishedTotalItems"
@@ -62,19 +61,13 @@
(backEvent)="onClickBack('both')"
></gp-model-list>
- <div style="display: flex; margin-left: auto">
+ <div class="see-all-container">
<button
- style="cursor: pointer"
- aria-label="Example icon button with a menu icon"
+ class="see-all-button"
+ aria-label="icon button with a menu icon"
(click)="onClickSeeAll('unpublished')"
>
- <div
- style="
- display: flex;
- justify-content: center;
- align-items: center;
- "
- >
+ <div class="see-all-text-container">
<span>See all</span> <mat-icon>arrow_forward_ios</mat-icon>
</div>
</button>
@@ -83,7 +76,7 @@
}
@if (modelType === "unpublished") {
- <div style="display: flex; flex-direction: column">
+ <div class="flex-column">
<gp-model-list
[solutions]="selectedUnpublishedSolutions"
[totalItems]="unpublishedTotalItems"
@@ -110,7 +103,7 @@
<!--published solutions -->
@if (modelType === "both") {
- <div style="display: flex; flex-direction: column">
+ <div class="flex-column">
<gp-model-list
[solutions]="selectedPublishedSolutions"
[totalItems]="publishedTotalItems"
@@ -132,19 +125,13 @@
(backEvent)="onClickBack('both')"
></gp-model-list>
- <div style="display: flex; margin-left: auto">
+ <div class="see-all-container">
<button
- style="cursor: pointer"
+ class="see-all-button"
aria-label="Example icon button with a menu icon"
(click)="onClickSeeAll('published')"
>
- <div
- style="
- display: flex;
- justify-content: center;
- align-items: center;
- "
- >
+ <div class="see-all-text-container">
<span>See all</span> <mat-icon>arrow_forward_ios</mat-icon>
</div>
</button>
@@ -152,7 +139,7 @@
</div>
}
@if (modelType === "published") {
- <div style="display: flex; flex-direction: column">
+ <div class="flex-column">
<gp-model-list
[solutions]="selectedPublishedSolutions"
[totalItems]="publishedTotalItems"
diff --git a/src/app/features/dashboard/my-models/my-models.component.scss b/src/app/features/dashboard/my-models/my-models.component.scss
index 6b486b0e9e2026ade874e7dd184f89b75a7e6d63..18194226e91bb7257009c094c07da28ec1a1e383 100644
--- a/src/app/features/dashboard/my-models/my-models.component.scss
+++ b/src/app/features/dashboard/my-models/my-models.component.scss
@@ -130,3 +130,35 @@ mat-sidenav-content {
font-size: 14px;
padding: 0 16px;
}
+
+.content-container {
+ display: flex;
+ flex-direction: column;
+ padding: 20px;
+}
+
+.sort-toggle-container {
+ display: flex;
+ flex-direction: row;
+ align-self: end;
+}
+
+.flex-column {
+ display: flex;
+ flex-direction: column;
+}
+
+.see-all-text-container {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
+
+.see-all-container {
+ display: flex;
+ margin-left: auto;
+}
+
+.see-all-button {
+ cursor: pointer;
+}
diff --git a/src/app/features/dashboard/my-models/my-models.component.ts b/src/app/features/dashboard/my-models/my-models.component.ts
index 88b80009aabc55c1d993f645fea01446dbc17755..d21bafe89241d3dc9bdf13420eb7f6d5508ce04b 100644
--- a/src/app/features/dashboard/my-models/my-models.component.ts
+++ b/src/app/features/dashboard/my-models/my-models.component.ts
@@ -30,6 +30,7 @@ import { environment } from 'src/environments/environment';
import { MatChipsModule } from '@angular/material/chips';
import { MatIconModule } from '@angular/material/icon';
import { ModelListComponent } from 'src/app/shared/components/model-list/model-list.component';
+import { BreadcrumbNavigationComponent } from 'src/app/shared/components/breadcrumb-navigation/breadcrumb-navigation.component';
export type ModelType = 'published' | 'unpublished' | 'both';
@@ -52,6 +53,7 @@ export type ModelType = 'published' | 'unpublished' | 'both';
MatChipsModule,
MatIconModule,
ModelListComponent,
+ BreadcrumbNavigationComponent,
],
templateUrl: './my-models.component.html',
styleUrl: './my-models.component.scss',
diff --git a/src/app/features/dashboard/navbar/navbar.component.html b/src/app/features/dashboard/navbar/navbar.component.html
index 68866d5f89602199e0d2d860fb4eac6d1e85211c..baaded5b3b70231b22a7de7031df1e7fa388ef2e 100644
--- a/src/app/features/dashboard/navbar/navbar.component.html
+++ b/src/app/features/dashboard/navbar/navbar.component.html
@@ -2,7 +2,7 @@
<button mat-icon-button (click)="collapsed.set(!collapsed())">
<mat-icon>menu</mat-icon>
</button>
- <button mat-button [matMenuTriggerFor]="menu" style="margin-left: auto">
+ <button mat-button [matMenuTriggerFor]="menu" class="firstName-button">
{{ firstName$ | async }}
</button>
<mat-menu #menu="matMenu">
diff --git a/src/app/features/dashboard/navbar/navbar.component.scss b/src/app/features/dashboard/navbar/navbar.component.scss
index 28a96f1668fe656a77dc058d2ed8ffd4244f0207..f93e50dfaf09af3168c166529f187213d75ab686 100644
--- a/src/app/features/dashboard/navbar/navbar.component.scss
+++ b/src/app/features/dashboard/navbar/navbar.component.scss
@@ -5,3 +5,7 @@
.mat-toolbar button {
color: white;
}
+
+.firstName-button {
+ margin-left: auto;
+}
diff --git a/src/app/features/dashboard/on-boarding-model/on-boarding-model.component.html b/src/app/features/dashboard/on-boarding-model/on-boarding-model.component.html
index a9e1403edeea9dc1dc7495a77070a4cb21674bc3..7abffdc4fe28a7e09a9f69cf59f7b64d1c4a9a22 100644
--- a/src/app/features/dashboard/on-boarding-model/on-boarding-model.component.html
+++ b/src/app/features/dashboard/on-boarding-model/on-boarding-model.component.html
@@ -1,4 +1,4 @@
-<div style="display: flex; flex-direction: column; margin: 40px">
+<div class="header-container">
<gp-headline [headlineTitle]="'On-Boarding Model'"></gp-headline>
<gp-breadcrumb-navigation
[firstNavigationLabel]="{ label: 'Home' }"
@@ -7,8 +7,8 @@
></gp-breadcrumb-navigation>
</div>
<mat-divider></mat-divider>
-<div style="display: flex; flex-direction: column; margin: 40px; width: 100%">
- <div style="display: flex; flex-direction: column; width: 100%">
+<div class="content">
+ <div class="flex-column full-width">
<!-- on boarding-->
<div>
<gp-headline
@@ -16,13 +16,13 @@
></gp-headline>
</div>
- <div style="display: flex; width: 100%">
- <div style="display: flex; flex-direction: column; width: 50%">
+ <div class="flex-row full-width">
+ <div class="on-boarding-form-container">
<!-- onboarding model form-->
<form [formGroup]="onboardingModelForm">
- <div style="display: flex; flex-direction: column; gap: 30px">
+ <div class="on-boarding-form-layout">
<!--model name-->
- <div style="display: flex; flex-direction: column">
+ <div class="flex-column">
<mat-label>Model name</mat-label>
<mat-form-field>
<input matInput formControlName="name" />
@@ -55,7 +55,7 @@
</mat-form-field>
</div>
<!--docker URI-->
- <div style="display: flex; flex-direction: column">
+ <div class="flex-column">
<mat-label>Docker URI </mat-label>
<mat-hint class="modal-note green"
><strong>Dockerhub image example:</strong>
@@ -79,10 +79,10 @@
</mat-form-field>
</div>
<!--protobuf file-->
- <div style="display: flex; flex-direction: column; width: 100%">
+ <div class="flex-column full-width">
<mat-label>Upload Protobuf File </mat-label>
- <div style="display: flex; width: 100%; gap: 10px">
- <mat-form-field style="height: 70px">
+ <div class="upload-file-container">
+ <mat-form-field>
<input matInput [value]="fileName" />
<mat-hint class="modal-note full-width no-padding">
Supported files type: .proto</mat-hint
@@ -100,7 +100,6 @@
</mat-form-field>
<button
- style="height: 48px"
color="primary"
mat-raised-button
(click)="onClickUploadProtoBufFile()"
@@ -113,7 +112,7 @@
}
</div>
<!--license profile-->
- <div style="display: flex; flex-direction: column">
+ <div class="flex-column">
<mat-checkbox
color="primary"
formControlName="addLicenseProfile"
@@ -124,21 +123,14 @@
@if (
onboardingModelForm.controls["addLicenseProfile"].value === true
) {
- <div style="display: flex; width: 100%">
+ <div class="flex-row full-width">
<gp-model-details-license-profile
[isExistingLicenseProfile]="false"
></gp-model-details-license-profile>
</div>
}
- <div
- style="
- display: flex;
- align-items: center;
- justify-content: space-between;
- gap: 10px;
- "
- >
+ <div class="buttons-container">
<button mat-raised-button (click)="resetData()">
Reset form
</button>
diff --git a/src/app/features/dashboard/on-boarding-model/on-boarding-model.component.scss b/src/app/features/dashboard/on-boarding-model/on-boarding-model.component.scss
index 36effac1c75b2568e40eb2fe13a01a6a7e4b496f..b5d947608257227415cd95acc9846d9cf2ee0990 100644
--- a/src/app/features/dashboard/on-boarding-model/on-boarding-model.component.scss
+++ b/src/app/features/dashboard/on-boarding-model/on-boarding-model.component.scss
@@ -52,16 +52,6 @@
background-position: center;
}
-/* .progress-status:after {
- content: "" !important;
- background: url("../../../../assets/images/loading_deactive.png") no-repeat
- left center;
- display: inline-block;
- width: 45px;
- height: 12px;
- transform: scale(0.8);
-}
- */
.process-status-not-yet-started {
background: url("../../../../assets/images/loading_deactive.png") no-repeat
left center;
@@ -119,3 +109,59 @@
.mdc-list-item.mdc-list-item--with-one-line {
height: 90px;
}
+
+.flex-column {
+ display: flex;
+ flex-direction: column;
+}
+
+.flex-row {
+ display: flex;
+ flex-direction: row;
+}
+
+.header-container {
+ display: flex;
+ flex-direction: column;
+ margin: 40px;
+}
+
+.content {
+ display: flex;
+ flex-direction: column;
+ margin: 40px;
+ width: 100%;
+}
+
+.on-boarding-form-layout {
+ display: flex;
+ flex-direction: column;
+ gap: 30px;
+}
+
+.buttons-container {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ gap: 10px;
+}
+
+.on-boarding-form-container {
+ display: flex;
+ flex-direction: column;
+ width: 50%;
+}
+
+.upload-file-container {
+ display: flex;
+ width: 100%;
+ gap: 10px;
+
+ mat-form-field {
+ height: 70px;
+ }
+
+ button {
+ height: 48px;
+ }
+}
diff --git a/src/app/features/landing-page/navbar/navbar.component.html b/src/app/features/landing-page/navbar/navbar.component.html
index 4915105bf16bf81ac9bd4d2fa766361c2cecff82..5bc467c03d12fdf1ccc1cfa78015a7847de1118c 100644
--- a/src/app/features/landing-page/navbar/navbar.component.html
+++ b/src/app/features/landing-page/navbar/navbar.component.html
@@ -1,32 +1,32 @@
<mat-toolbar class="mat-elevation-z3 custom-toolbar">
- <div style="margin-right: 24px; cursor: pointer">
+ <div class="graphene-logo-container">
<img src="../../../../assets/images/graphene_logo.svg" />
</div>
<div class="navbar-link-item">
<button
mat-button
- class="link-active"
- style="margin-left: auto"
+ class="link-active flexible-margin-left"
(click)="onHomeClick()"
>
HOME
</button>
<button
mat-button
- class="text-color-white"
- style="margin-left: auto"
+ class="text-color-white flexible-margin-left"
(click)="onMarketPlaceClick()"
>
MARKETPLACE
</button>
- <button mat-button class="text-color-white" style="margin-left: auto">
+ <button mat-button class="text-color-white flexible-margin-left">
ON-BOARDING MODEL
</button>
- <button mat-button class="text-color-white" style="margin-left: auto">
+ <button mat-button class="text-color-white flexible-margin-left">
DOCUMENTATION
</button>
</div>
- <div style="margin-left: auto"><gp-expanded-search></gp-expanded-search></div>
+ <div class="flexible-margin-left">
+ <gp-expanded-search></gp-expanded-search>
+ </div>
<button mat-button (click)="openDialog()" class="text-color-white">
SIGN IN
</button>
diff --git a/src/app/features/landing-page/navbar/navbar.component.scss b/src/app/features/landing-page/navbar/navbar.component.scss
index 26c8f76aabab28ce54d52842cb7231fef8d80d1f..c1f504f7a3a2339aa83a6291b718824b00fb058b 100644
--- a/src/app/features/landing-page/navbar/navbar.component.scss
+++ b/src/app/features/landing-page/navbar/navbar.component.scss
@@ -43,3 +43,12 @@ img {
color: #ffcc00 !important;
opacity: 1;
}
+
+.graphene-logo-container {
+ margin-right: 24px;
+ cursor: pointer;
+}
+
+.flexible-margin-left {
+ margin-left: auto;
+}
diff --git a/src/app/features/marketplace/marketplace.component.html b/src/app/features/marketplace/marketplace.component.html
index 54a429d6e5ac57e39268b6283f814a81ea5a34f9..17d9586953f1d095db861226719a34684f5dba9a 100644
--- a/src/app/features/marketplace/marketplace.component.html
+++ b/src/app/features/marketplace/marketplace.component.html
@@ -2,10 +2,7 @@
<div class="mdl-grid mdl-grid.mdl-grid--no-spacing">
<div>
<gp-headline [headlineTitle]="'Marketplace |'"></gp-headline>
- <div
- style="display: flex; flex-direction: row; align-items: center"
- *ngIf="loginUserId"
- >
+ <div class="favorite-buttons-container" *ngIf="loginUserId">
<button
class="favorite-button"
mat-raised-button
@@ -24,12 +21,11 @@
</button>
</div>
</div>
-
- <div style="display: flex; flex-direction: row; gap: 6px">
- <a class="link-home" (click)="onHomeClick()">Home</a>
- <span class="link-marketplace">/</span>
- <a class="link-marketplace">Marketplace</a>
- </div>
+ <gp-breadcrumb-navigation
+ [firstNavigationLabel]="{ label: 'Home' }"
+ [secondNavigationLabel]="{ label: 'Marketplace', disabled: true }"
+ (firstNavigationClicked)="onHomeClick()"
+ ></gp-breadcrumb-navigation>
</div>
</section>
<mat-sidenav-container>
@@ -43,13 +39,13 @@
></gp-filters>
</mat-sidenav>
<mat-sidenav-content>
- <div style="padding: 20px; display: flex; flex-direction: row">
- <div style="flex: 1" *ngIf="!isLoading">
+ <div class="filters-container">
+ <div class="total-items-container" *ngIf="!isLoading">
@if (totalItems > 0) {
- <div style="margin: 24px; font-size: 14px; font-weight: normal">
- <span style="color: #2e2f2f"
+ <div class="total-items-text-container">
+ <span class="showing-text"
>Showing -
- <span style="color: #8f8f8f">
+ <span class="total-items-text">
{{ calculateStartIndex() }} to {{ calculateEndIndex() }} of
{{ totalItems }} Models</span
></span
diff --git a/src/app/features/marketplace/marketplace.component.scss b/src/app/features/marketplace/marketplace.component.scss
index 6b486b0e9e2026ade874e7dd184f89b75a7e6d63..a7889e3a6fb9f3428971da9378cb36ccfcb12804 100644
--- a/src/app/features/marketplace/marketplace.component.scss
+++ b/src/app/features/marketplace/marketplace.component.scss
@@ -130,3 +130,33 @@ mat-sidenav-content {
font-size: 14px;
padding: 0 16px;
}
+
+.favorite-buttons-container {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+}
+
+.filters-container {
+ padding: 20px;
+ display: flex;
+ flex-direction: row;
+}
+
+.total-items-container {
+ flex: 1;
+}
+
+.total-items-text-container {
+ margin: 24px;
+ font-size: 14px;
+ font-weight: normal;
+}
+
+.showing-text {
+ color: #2e2f2f;
+}
+
+.total-items-text {
+ color: #8f8f8f;
+}
diff --git a/src/app/features/marketplace/marketplace.component.ts b/src/app/features/marketplace/marketplace.component.ts
index 8627b6c451f2ed3a2e7c2cdb5ea86159631117b2..2c09ec786c1ba9fe31ff341f19fbe9be2cc7a913 100644
--- a/src/app/features/marketplace/marketplace.component.ts
+++ b/src/app/features/marketplace/marketplace.component.ts
@@ -35,6 +35,7 @@ import { Observable, Subscription, map } from 'rxjs';
import { PrivateCatalogsService } from 'src/app/core/services/private-catalogs.service';
import { MatButtonModule } from '@angular/material/button';
import { HeadlineComponent } from 'src/app/shared/components/headline/headline.component';
+import { BreadcrumbNavigationComponent } from 'src/app/shared/components/breadcrumb-navigation/breadcrumb-navigation.component';
@Component({
selector: 'gp-marketplace',
@@ -52,6 +53,7 @@ import { HeadlineComponent } from 'src/app/shared/components/headline/headline.c
ListItemComponent,
MatButtonModule,
HeadlineComponent,
+ BreadcrumbNavigationComponent,
],
templateUrl: './marketplace.component.html',
styleUrl: './marketplace.component.scss',
diff --git a/src/app/features/model-details/model-details.component.html b/src/app/features/model-details/model-details.component.html
index 92898d7172751a53f159b69a73e77368d315fb67..c4b6886992db0ed9793c4080f853a2d372e3eb3c 100644
--- a/src/app/features/model-details/model-details.component.html
+++ b/src/app/features/model-details/model-details.component.html
@@ -1,8 +1,4 @@
-<section
- class="pageheadsection"
- style="overflow: auto !important"
- *ngIf="data$ | async as data"
->
+<section class="pageheadsection" *ngIf="data$ | async as data">
<div class="md-head-container1">
<div class="md-head-containerinner1">
<div matTooltip="{{ solution?.name?.toString()?.split('_')?.join('') }}">
@@ -59,13 +55,7 @@
>
<img
[src]="getImagePath(menuEntry.title)"
- style="
- max-width: 50;
- padding-right: 5px;
- margin-right: 5px;
- border-right: 1px solid gray;
- "
- height="40px"
+ class="deploy-image"
/>
{{ menuEntry.title }}
</mat-option>
@@ -86,7 +76,7 @@
</ng-template>
</div>
- <div class="md-head-container2" style="margin-top: 12px">
+ <div class="md-head-container2 breadcrumb-navigation-container">
<gp-breadcrumb-navigation
[solution]="data.solution"
[firstNavigationLabel]="{ label: 'Home' }"
@@ -114,9 +104,7 @@
<div>
<div>
<span class="text-medium font600"
- ><span
- class="md-created-label"
- style="text-overflow: unset; max-width: none"
+ ><span class="md-created-label"
>Created by
{{
data.authors && data.authors[0]
@@ -151,8 +139,7 @@
<div class="header-stats">
<div>
<a
- class="link-blue text-medium md-icons1"
- style="cursor: pointer"
+ class="link-blue text-medium md-icons1 scrollToComment-button"
(click)="scrollToComment('view')"
><span
class="statistics-icons icon-chat-blue md-icons1"
@@ -166,18 +153,17 @@
<div *ngIf="data.solution?.active === true">|</div>
<div *ngIf="data.solution?.active === true">
<a
- class="link-write-comments link-blue text-medium md-icons1"
- style="cursor: pointer"
+ class="link-write-comments link-blue text-medium md-icons1 scrollToComment-button"
(click)="scrollToComment('edit')"
>Write comments</a
>
</div>
<div>|</div>
- <div class="text-medium" style="margin-top: 3px">
+ <div class="text-medium view-download-container">
<gp-view-count [item]="data.solution" class="md-icons1"></gp-view-count>
</div>
<div>|</div>
- <div class="text-medium" style="margin-top: 3px">
+ <div class="text-medium view-download-container">
<gp-download-count
[item]="data.solution"
class="md-icons1"
@@ -237,7 +223,7 @@
"
>
</span>
- <span class="tab-box" style="font-size: 14.5px">
+ <span class="tab-box author-publisher-text">
<span>Author</span>
<span>/</span>
<span>Publisher details</span>
@@ -250,7 +236,7 @@
<h6 class="sectiontitle4">
Tags<span class="title-icons icon-tags" alt="Tags" title="Tags"></span>
</h6>
- <mat-chip-set aria-label="Tags selection" style="padding: 8px">
+ <mat-chip-set class="chip-set-tags" aria-label="Tags selection">
<mat-chip-option
*ngFor="let tag of data.solution.solutionTagList"
color="primary"
@@ -267,10 +253,7 @@
Other {{ data.solution?.modelTypeName }} Models
</h6>
<mat-divider></mat-divider>
- <a
- class="text-small pull-right"
- style="color: #0366d6; cursor: pointer"
- (click)="onClickShowAll()"
+ <a class="text-small pull-right show-all" (click)="onClickShowAll()"
>Show all</a
>
<div>
@@ -280,8 +263,7 @@
class="list-item list-container"
>
<ul
- class="model-list"
- style="display: flex; cursor: pointer"
+ class="model-list go-to-related-solutions-ul"
(click)="
goToRelatedSolutions(val.solutionId, val.latestRevisionId)
"
diff --git a/src/app/features/model-details/model-details.component.scss b/src/app/features/model-details/model-details.component.scss
index 90c0faa27fac1a71dda29cf45911a54d87ab0c6c..674f24f3ebc057a876fa811572f60d470fd6f2a8 100644
--- a/src/app/features/model-details/model-details.component.scss
+++ b/src/app/features/model-details/model-details.component.scss
@@ -2,7 +2,6 @@
@import url(../../../styles/icon_styles.scss);
.mat-drawer-content {
- /* overflow: hidden; */
background-color: white;
}
@@ -12,6 +11,7 @@
position: relative;
z-index: 1;
padding: 10px 15px 10px 20px;
+ overflow: auto !important;
}
.link-home {
@@ -694,3 +694,46 @@ ul {
::ng-deep div.mat-mdc-select-panel {
padding: 0px !important;
}
+
+.deploy-image {
+ max-width: 50;
+ padding-right: 5px;
+ margin-right: 5px;
+ border-right: 1px solid gray;
+ height: 40px;
+}
+
+.breadcrumb-navigation-container {
+ margin-top: 12px;
+}
+
+.md-created-label {
+ text-overflow: unset;
+ max-width: none;
+}
+
+.scrollToComment-button {
+ cursor: pointer;
+}
+
+.view-download-container {
+ margin-top: 3px;
+}
+
+.author-publisher-text {
+ font-size: 14.5px;
+}
+
+.chip-set-tags {
+ padding: 8px;
+}
+
+.go-to-related-solutions-ul {
+ display: flex;
+ cursor: pointer;
+}
+
+.show-all {
+ color: #0366d6;
+ cursor: pointer;
+}
diff --git a/src/app/shared/components/card-item/card-item.component.html b/src/app/shared/components/card-item/card-item.component.html
index 45966e8678e1c9c87d9abf14985afc21a254c15b..60c50ab725c4552691b88e731a7afe1a4c535080 100644
--- a/src/app/shared/components/card-item/card-item.component.html
+++ b/src/app/shared/components/card-item/card-item.component.html
@@ -15,30 +15,21 @@
</mat-card-header>
<mat-card-content>
<div>
- <div style="font-size: 14px">
+ <div class="item-name-text">
{{ item.name.toString().split("_").join(" ") }}
</div>
- <label
- *ngIf="isMarketPlacePage"
- class="item-text-container"
- style="
- font-size: 11px;
- font-weight: normal;
- color: #2e2f2f;
- height: 15px;
- "
- >
+ <label *ngIf="isMarketPlacePage" class="model-details-container">
<span *ngIf="!item.sourceId && item.authors">
{{ item.authors.length > 0 ? item.authors[0]?.name : item.ownerName }}
</span>
<span>{{ item.mPeer?.name }}</span> |
<span> {{ item.modified || item.created | date: "MM/dd/yyyy" }}</span>
|
- <span style="color: rgb(253, 134, 56)" *ngIf="item.active">New</span>
+ <span class="active-item" *ngIf="item.active">New</span>
</label>
</div>
<div
- style="display: flex; align-items: center; gap: 4px"
+ class="catalog-publisher-container"
*ngIf="isMarketPlacePage && isPublishedSolution"
>
<gp-catalog-name [item]="item"></gp-catalog-name>
diff --git a/src/app/shared/components/card-item/card-item.component.scss b/src/app/shared/components/card-item/card-item.component.scss
index e191fc1afaf2cbbfb3f43152e3a43d3306b00323..e9b9913ee9bbc75e10368e8d95fce368524758f0 100644
--- a/src/app/shared/components/card-item/card-item.component.scss
+++ b/src/app/shared/components/card-item/card-item.component.scss
@@ -36,11 +36,6 @@ mat-card-header {
cursor: pointer;
}
-.item-text-container {
- display: block;
- margin-bottom: 12px;
-}
-
/*CSS code for Manage tagList:*/
.a-mp-container1 {
display: flex;
@@ -67,3 +62,26 @@ mat-card-header {
.md-icons-tiles > span {
min-width: 45px;
}
+
+.item-name-text {
+ font-size: 14px;
+}
+
+.active-item {
+ color: rgb(253, 134, 56);
+}
+
+.model-details-container {
+ font-size: 11px;
+ font-weight: normal;
+ color: #2e2f2f;
+ height: 15px;
+ display: block;
+ margin-bottom: 12px;
+}
+
+.catalog-publisher-container {
+ display: flex;
+ align-items: center;
+ gap: 4px;
+}
diff --git a/src/app/shared/components/confirm-action/confirm-action.component.html b/src/app/shared/components/confirm-action/confirm-action.component.html
index 96024c5d285f7a80d5389091c278b6a683fc2d85..87f4528fcfa4160a6d426940176df9ec30fed880 100644
--- a/src/app/shared/components/confirm-action/confirm-action.component.html
+++ b/src/app/shared/components/confirm-action/confirm-action.component.html
@@ -1,5 +1,5 @@
<mat-toolbar class="dialog-header">
- <div style="display: flex; align-items: center; padding: 0; flex: 1 1 auto">
+ <div class="dialog-title">
<h2>{{ title }}</h2>
</div>
<button
@@ -20,8 +20,10 @@
</div></mat-dialog-content
>
<mat-toolbar class="form-footer">
- <button mat-dialog-close mat-raised-button style="margin-right: auto">
+ <button mat-dialog-close mat-raised-button class="cancel-button">
Cancel
</button>
- <button color="primary" mat-raised-button (click)="onClickSecondAction()">{{secondAction}}</button>
+ <button color="primary" mat-raised-button (click)="onClickSecondAction()">
+ {{ secondAction }}
+ </button>
</mat-toolbar>
diff --git a/src/app/shared/components/confirm-action/confirm-action.component.scss b/src/app/shared/components/confirm-action/confirm-action.component.scss
index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..9c5dcca4d2ec1e05615ee1c8e0f058d35ee242cd 100644
--- a/src/app/shared/components/confirm-action/confirm-action.component.scss
+++ b/src/app/shared/components/confirm-action/confirm-action.component.scss
@@ -0,0 +1,10 @@
+.dialog-title {
+ display: flex;
+ align-items: center;
+ padding: 0;
+ flex: 1 1 auto;
+}
+
+.cancel-button {
+ margin-right: auto;
+}
diff --git a/src/app/shared/components/create-edit-license-profile/create-edit-license-profile.component.html b/src/app/shared/components/create-edit-license-profile/create-edit-license-profile.component.html
index 6def10d6c4ba2c490afb6d508e68b18bfbcd8428..9b59a23a829e25b67fe0d331a42d969a756dd2fc 100644
--- a/src/app/shared/components/create-edit-license-profile/create-edit-license-profile.component.html
+++ b/src/app/shared/components/create-edit-license-profile/create-edit-license-profile.component.html
@@ -1,5 +1,5 @@
<mat-toolbar class="dialog-header">
- <div style="display: flex; align-items: center; padding: 0; flex: 1 1 auto">
+ <div class="dialog-title">
<h2 *ngIf="!isEditMode">Create New License Profile</h2>
<h2 *ngIf="isEditMode">Modify New License Profile</h2>
<span class="version">v0.0.13</span>
@@ -91,7 +91,7 @@
</div></form
></mat-dialog-content>
<mat-toolbar class="form-footer">
- <button mat-dialog-close mat-raised-button style="margin-right: auto">
+ <button class="cancel-button" mat-dialog-close mat-raised-button>
Cancel
</button>
<button
diff --git a/src/app/shared/components/create-edit-license-profile/create-edit-license-profile.component.scss b/src/app/shared/components/create-edit-license-profile/create-edit-license-profile.component.scss
index 94ee5e89878f1037261b186171cf5c3de6d322dc..04fd75d936f54dde6d5fa5bd3381e7a0d23215a9 100644
--- a/src/app/shared/components/create-edit-license-profile/create-edit-license-profile.component.scss
+++ b/src/app/shared/components/create-edit-license-profile/create-edit-license-profile.component.scss
@@ -54,3 +54,14 @@
text-transform: uppercase;
font-family: "Open Sans", sans-serif;
}
+
+.dialog-title {
+ display: flex;
+ align-items: center;
+ padding: 0;
+ flex: 1 1 auto;
+}
+
+.cancel-button {
+ margin-right: auto;
+}
diff --git a/src/app/shared/components/filters/filters.component.html b/src/app/shared/components/filters/filters.component.html
index 828c51546212bf763dc18a2272a214be42567699..c2ae59cdb1950b3af1cd9fe31bc6f24067355020 100644
--- a/src/app/shared/components/filters/filters.component.html
+++ b/src/app/shared/components/filters/filters.component.html
@@ -18,7 +18,7 @@
<mat-divider></mat-divider>
- <div style="margin: 14px">
+ <div class="mat-label-container">
<mat-label class="md-subhead"
>Filter by category
<span
@@ -39,14 +39,14 @@
<mat-divider></mat-divider>
<div>
- <div style="margin: 14px">
+ <div class="mat-label-container">
<mat-label class="md-subhead"
>Tags
<span class="title-icons icon-tags" alt="Tags" title="Tags"></span>
</mat-label>
</div>
- <mat-chip-set aria-label="Tags selection" style="padding: 8px">
+ <mat-chip-set aria-label="Tags selection" class="chip-set">
<mat-chip-option
*ngFor="let tag of visibleTags"
[selected]="tag.selected"
diff --git a/src/app/shared/components/filters/filters.component.scss b/src/app/shared/components/filters/filters.component.scss
index 53bc1f818b50f49e57a00e8c7a1a9c3cb9f3ae31..af13d60f4dc280edb55d43434d67e535355dc8c5 100644
--- a/src/app/shared/components/filters/filters.component.scss
+++ b/src/app/shared/components/filters/filters.component.scss
@@ -102,3 +102,11 @@
no-repeat 93% center !important;
width: calc(100%);
}
+
+.mat-label-container {
+ margin: 14px;
+}
+
+.chip-set {
+ padding: 8px;
+}
diff --git a/src/app/shared/components/home/home.component.html b/src/app/shared/components/home/home.component.html
index 00ac690862ea3ca1171defdb8e861b3c61fe3489..f5f614c7f75e739cb399e3750a551831542032f5 100644
--- a/src/app/shared/components/home/home.component.html
+++ b/src/app/shared/components/home/home.component.html
@@ -40,7 +40,7 @@
</div></mat-grid-tile
>
<mat-grid-tile colspan="4">
- <div style="width: 100%">
+ <div class="full-width">
<mat-grid-list cols="4" rowHeight="200px" gutterSize="16px">
<mat-grid-tile
*ngFor="
@@ -73,8 +73,7 @@
<h3>Discover Graphene Dev02</h3>
</div>
<img
- width="1280px"
- style="display: block; margin: auto"
+ class="graphene-image"
src="../../../../assets/images/graphene_grafik.png"
/>
</div>
diff --git a/src/app/shared/components/home/home.component.scss b/src/app/shared/components/home/home.component.scss
index bff01edb90275b840990595fd9f7001870a9e317..349775ea48c1a1b0d5db28f7f008a9226a24e6bf 100644
--- a/src/app/shared/components/home/home.component.scss
+++ b/src/app/shared/components/home/home.component.scss
@@ -164,27 +164,12 @@
border: none;
}
-/* @media (max-width: 1600px) {
- .slide-content {
- padding: 0 200px !important;
- }
-}
-
-@media (max-width: 1399px) {
- .slide-content {
- padding: 0 40px;
- }
-}
-
-@media (max-width: 1024px) {
- .slide-content {
- padding: 0 70px;
- }
+.full-width {
+ width: 100%;
}
-@media (max-width: 480px) {
- .slide-content {
- padding: 0 50px;
- }
+.graphene-image {
+ display: block;
+ margin: auto;
+ width: 1280px;
}
- */
diff --git a/src/app/shared/components/model-details-artifacts/model-details-artifacts.component.html b/src/app/shared/components/model-details-artifacts/model-details-artifacts.component.html
index f3ed4c418341b21c29366262d60a4a4b9879581d..7cf49d325db025e0baffa776502c932acf16581b 100644
--- a/src/app/shared/components/model-details-artifacts/model-details-artifacts.component.html
+++ b/src/app/shared/components/model-details-artifacts/model-details-artifacts.component.html
@@ -4,7 +4,7 @@
<h6 class="sectiontitle9">MODEL ARTIFACTS</h6>
</div>
</div>
- <div style="margin-left: 20px">
+ <div class="table-container">
<table mat-table [dataSource]="artifactDownload">
<!-- Name Column -->
<ng-container matColumnDef="name">
@@ -17,11 +17,7 @@
<!-- Version Column -->
<ng-container matColumnDef="version">
<th mat-header-cell *matHeaderCellDef>Version</th>
- <td
- mat-cell
- *matCellDef="let element"
- style="font-weight: 500 !important"
- >
+ <td mat-cell *matCellDef="let element" class="font-weight500">
{{ element.version }}
</td>
</ng-container>
@@ -29,11 +25,7 @@
<!-- Modified on Column -->
<ng-container matColumnDef="size">
<th mat-header-cell *matHeaderCellDef>Modified on</th>
- <td
- mat-cell
- *matCellDef="let element"
- style="font-weight: 500 !important"
- >
+ <td mat-cell *matCellDef="let element" class="font-weight500">
{{ element.created | date: "MM/dd/yyyy" }}
</td>
</ng-container>
@@ -41,11 +33,7 @@
<!-- Size Column -->
<ng-container matColumnDef="modified on">
<th mat-header-cell *matHeaderCellDef>Size</th>
- <td
- mat-cell
- *matCellDef="let element"
- style="font-weight: 500 !important"
- >
+ <td mat-cell *matCellDef="let element" class="font-weight500">
{{ element.size | formatBytes: 1 }}
</td>
</ng-container>
diff --git a/src/app/shared/components/model-details-artifacts/model-details-artifacts.component.scss b/src/app/shared/components/model-details-artifacts/model-details-artifacts.component.scss
index 5f1fd61478d69f100e3f75b632945e73d3b02f7b..d8f45b8cbee9e662c431f5565fd41986e64c6bce 100644
--- a/src/app/shared/components/model-details-artifacts/model-details-artifacts.component.scss
+++ b/src/app/shared/components/model-details-artifacts/model-details-artifacts.component.scss
@@ -54,3 +54,11 @@
cursor: not-allowed;
background: #efefef;
}
+
+.font-weight500 {
+ font-weight: 500;
+}
+
+.table-container {
+ margin-left: 20px;
+}
diff --git a/src/app/shared/components/model-details-author-publisher/model-details-author-publisher.component.html b/src/app/shared/components/model-details-author-publisher/model-details-author-publisher.component.html
index 61dde422df96e4eb1926c9e1e3151df4568b3b56..be29675454e94ae7daf92e01b52c70074a9ecb76 100644
--- a/src/app/shared/components/model-details-author-publisher/model-details-author-publisher.component.html
+++ b/src/app/shared/components/model-details-author-publisher/model-details-author-publisher.component.html
@@ -4,16 +4,12 @@
<h6 class="sectiontitle9">AUTHOR/PUBLISHER DETAILS</h6>
</div>
</div>
- <div style="margin-left: 20px">
+ <div class="table-container">
<table mat-table [dataSource]="dataSource">
<!-- Name Column -->
<ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef>Name</th>
- <td
- mat-cell
- *matCellDef="let element"
- style="font-weight: 500 !important"
- >
+ <td mat-cell *matCellDef="let element" class="font-weight500">
{{ element?.name }}
</td>
</ng-container>
@@ -21,11 +17,7 @@
<!-- Version Column -->
<ng-container matColumnDef="contact information">
<th mat-header-cell *matHeaderCellDef>Contact Information</th>
- <td
- mat-cell
- *matCellDef="let element"
- style="font-weight: 500 !important"
- >
+ <td class="font-weight500" mat-cell *matCellDef="let element">
{{ element?.contact }}
</td>
</ng-container>
diff --git a/src/app/shared/components/model-details-author-publisher/model-details-author-publisher.component.scss b/src/app/shared/components/model-details-author-publisher/model-details-author-publisher.component.scss
index 0dfc4d6f2d742e9db3c43b85f4fe05315ed5301a..a9fcfc35c681413eb4e6d6bc29f0b73d21d3293b 100644
--- a/src/app/shared/components/model-details-author-publisher/model-details-author-publisher.component.scss
+++ b/src/app/shared/components/model-details-author-publisher/model-details-author-publisher.component.scss
@@ -31,3 +31,11 @@
color: #671c9d;
background: #e8e5ec !important;
}
+
+.table-container {
+ margin-left: 20px;
+}
+
+.font-weight500 {
+ font-weight: 500 !important;
+}
diff --git a/src/app/shared/components/model-details-documents/model-details-documents.component.html b/src/app/shared/components/model-details-documents/model-details-documents.component.html
index 7aef1660f5095ce8a08b89d90d04d410174024b4..3e5a3ba14d7c9b044fbd93b92acafb51d0f2d2d3 100644
--- a/src/app/shared/components/model-details-documents/model-details-documents.component.html
+++ b/src/app/shared/components/model-details-documents/model-details-documents.component.html
@@ -4,7 +4,7 @@
<h6 class="sectiontitle9">SUPPORTING DOCUMENTS</h6>
</div>
</div>
- <div style="margin-left: 20px">
+ <div class="table-container">
<table mat-table [dataSource]="documents">
<!-- Name Column -->
<ng-container matColumnDef="name">
diff --git a/src/app/shared/components/model-details-documents/model-details-documents.component.scss b/src/app/shared/components/model-details-documents/model-details-documents.component.scss
index 0dfc4d6f2d742e9db3c43b85f4fe05315ed5301a..a680940b43107f7375a96931a548b5aaa8ef3e28 100644
--- a/src/app/shared/components/model-details-documents/model-details-documents.component.scss
+++ b/src/app/shared/components/model-details-documents/model-details-documents.component.scss
@@ -31,3 +31,7 @@
color: #671c9d;
background: #e8e5ec !important;
}
+
+.table-container {
+ margin-left: 20px;
+}
diff --git a/src/app/shared/components/model-details-license-profile/model-details-license-profile.component.html b/src/app/shared/components/model-details-license-profile/model-details-license-profile.component.html
index 6d28425bfcefab990c0d3aaa034c2d796a959f07..8e4292ecfebad62a0222497d63a83de6e6b9fa5f 100644
--- a/src/app/shared/components/model-details-license-profile/model-details-license-profile.component.html
+++ b/src/app/shared/components/model-details-license-profile/model-details-license-profile.component.html
@@ -1,12 +1,9 @@
<div class="model-details-tabwrapper">
- <div class="md-intro-container spacebetween" style="gap: 10px">
- <div style="height: 100%">
+ <div class="md-intro-container spacebetween">
+ <div class="full-height">
<h6 class="sectiontitle9">LICENSE PROFILE</h6>
</div>
- <div
- style="display: flex; align-items: center; gap: 10px"
- class="spacebetween"
- >
+ <div class="spacebetween buttons-layout">
<button
[disabled]="!(isUserIdAvailable$ | async)"
mat-stroked-button
@@ -32,12 +29,11 @@
</div>
</div>
</div>
-<div style="margin-left: 20px" *ngIf="!modelLicense">
+<div class="license-error" *ngIf="!modelLicense">
{{ modelLicenseError }}
</div>
-<!--<div *ngIf="(sharedDataService.licenseProfile$ | async) as modelLicense; else noLicenseTemplate">
--->
-<div style="margin-left: 20px" *ngIf="modelLicense; else noLicenseTemplate">
+
+<div class="license-content" *ngIf="modelLicense; else noLicenseTemplate">
<pre class="licensedisplay">
<span *ngIf="modelLicense?.keyword"><strong>keyword: </strong></span>{{ modelLicense?.keyword }}
<span *ngIf="modelLicense?.licenseName"><strong>licenseName: </strong></span>{{ modelLicense?.licenseName }}
diff --git a/src/app/shared/components/model-details-license-profile/model-details-license-profile.component.scss b/src/app/shared/components/model-details-license-profile/model-details-license-profile.component.scss
index 524257d3ecb92bbcc44590b3b628a4184353db5c..b3a61e321d9d6c3bc4fa086b3d4c287a7f7d9c32 100644
--- a/src/app/shared/components/model-details-license-profile/model-details-license-profile.component.scss
+++ b/src/app/shared/components/model-details-license-profile/model-details-license-profile.component.scss
@@ -4,6 +4,7 @@
justify-content: flex-start;
align-content: center;
border-bottom: 1px solid #e5e5e5;
+ gap: 10px;
}
.model-details-tabwrapper {
@@ -48,3 +49,21 @@ button[disabled] {
border-color: #d3d1d1;
cursor: not-allowed;
}
+
+.full-height {
+ height: 100%;
+}
+
+.buttons-layout {
+ display: flex;
+ align-items: center;
+ gap: 10px;
+}
+
+.license-error {
+ margin-left: 20px;
+}
+
+.license-content {
+ margin-left: 20px;
+}
diff --git a/src/app/shared/components/model-details-signature/model-details-signature.component.html b/src/app/shared/components/model-details-signature/model-details-signature.component.html
index 19f5030d7dfb4e2b7f7d967bc9904ecc01e31b16..783c315e630def67ee9468d7fad81b7cf390c79f 100644
--- a/src/app/shared/components/model-details-signature/model-details-signature.component.html
+++ b/src/app/shared/components/model-details-signature/model-details-signature.component.html
@@ -4,7 +4,7 @@
<h6 class="sectiontitle9">SIGNATURE</h6>
</div>
</div>
- <div style="margin-left: 20px">
+ <div class="model-signature-content">
<pre>
{{ modelSignature }}
</pre>
diff --git a/src/app/shared/components/model-details-signature/model-details-signature.component.scss b/src/app/shared/components/model-details-signature/model-details-signature.component.scss
index 2a394318c1e36a758de5adec939328c148fd89b7..3a9790939d0fb28ad813c67fa37083aaa6cd3834 100644
--- a/src/app/shared/components/model-details-signature/model-details-signature.component.scss
+++ b/src/app/shared/components/model-details-signature/model-details-signature.component.scss
@@ -26,3 +26,7 @@
line-height: 30px;
padding: 0;
}
+
+.model-signature-content {
+ margin-left: 20px;
+}
diff --git a/src/app/shared/components/model-list/model-list.component.html b/src/app/shared/components/model-list/model-list.component.html
index eef478631311207b321b3461685f65441b12d808..5eecc1eead069a406778778b729765f9634c9405 100644
--- a/src/app/shared/components/model-list/model-list.component.html
+++ b/src/app/shared/components/model-list/model-list.component.html
@@ -1,15 +1,13 @@
-<div style="display: flex; flex-direction: column">
- <div
- style="display: flex; flex-direction: row; gap: 10px; align-items: center"
- >
+<div class="flex-column">
+ <div class="header-container">
<div>
<gp-headline [headlineTitle]="headlineTitle"></gp-headline>
</div>
- <div style="flex: 1">
- <div style="margin: 24px; font-size: 14px; font-weight: normal">
- <span style="color: #2e2f2f"
+ <div class="total-items-container">
+ <div class="total-items-text">
+ <span class="showing-text"
>Showing -
- <span style="color: #8f8f8f">
+ <span class="total-items-number">
{{ calculateStartIndex }} to
{{ calculateEndIndex }}
of {{ totalItems }} Models</span
@@ -18,15 +16,14 @@
</div>
</div>
- <div *ngIf="showEntirePage" style="align-self: flex-end; margin-left: auto">
+ <div *ngIf="showEntirePage" class="entire-page-button-container">
<button
- style="cursor: pointer"
- aria-label="Example icon button with a menu icon"
+ aria-label="Icon button with a menu icon"
(click)="onClickSeeBackEvent()"
>
- <div style="display: flex; align-items: center">
+ <div class="back-icon">
<mat-icon>arrow_back_ios</mat-icon>
- <span style="font-size: 16px">Back</span>
+ <span>Back</span>
</div>
</button>
</div>
diff --git a/src/app/shared/components/model-list/model-list.component.scss b/src/app/shared/components/model-list/model-list.component.scss
index 8971caaa57e6010c406da75b241990d0413eb37e..7abcc2c8a31ff700c5160d476322b541ff1046d2 100644
--- a/src/app/shared/components/model-list/model-list.component.scss
+++ b/src/app/shared/components/model-list/model-list.component.scss
@@ -1,3 +1,49 @@
.material-icons {
font-size: 20px;
}
+
+.flex-column {
+ display: flex;
+ flex-direction: column;
+}
+
+.showing-text {
+ color: #2e2f2f;
+}
+
+.total-items-text {
+ margin: 24px;
+ font-size: 14px;
+ font-weight: normal;
+}
+
+.total-items-number {
+ color: #8f8f8f;
+}
+
+.total-items-container {
+ flex: 1;
+}
+
+.back-button-container {
+ align-self: flex-end;
+ margin-left: auto;
+ button: {
+ cursor: pointer;
+ }
+}
+
+.back-icon {
+ display: flex;
+ align-items: center;
+ span {
+ font-size: 16px;
+ }
+}
+
+.header-container {
+ display: flex;
+ flex-direction: row;
+ gap: 10px;
+ align-items: center;
+}
diff --git a/src/app/shared/components/model-management/model-management.component.html b/src/app/shared/components/model-management/model-management.component.html
index 5d8139d8a3e741bedba0bb317ca403a3193ba75f..749019a9e553d8828a17aeeca03a1b8bc471c00d 100644
--- a/src/app/shared/components/model-management/model-management.component.html
+++ b/src/app/shared/components/model-management/model-management.component.html
@@ -1,17 +1,6 @@
-<div
- style="display: flex; flex-direction: column"
- *ngIf="solution$ | async as data"
->
- <div style="display: flex; flex-direction: column; padding: 20px">
- <div
- style="
- display: flex;
- flex-direction: row;
- align-items: center;
- justify-items: center;
- gap: 8px;
- "
- >
+<div class="flex-column" *ngIf="solution$ | async as data">
+ <div class="header-container">
+ <div class="header-container-top">
<span class="md-headline5">Manage {{ data.name }}</span
>|
@@ -22,40 +11,28 @@
></gp-version-dropdown>
|
<div
- style="
- display: flex;
- flex-direction: row;
- align-items: center;
- justify-items: center;
- "
+ class="author-publisher-container"
*ngIf="sharedWith$ | async as sharedWithData"
>
<span>Author and Publisher - </span>
<img
- style="width: 27px; height: 27px"
+ class="user-profile-black-image"
src="../../../../assets/images/user-profile-black.png"
/>
- <div style="display: flex; flex-direction: row">
+ <div class="flex-row">
<button
mat-icon-button
[matMenuTriggerFor]="menu"
- aria-label="Example icon-button with a menu"
+ aria-label="icon-button with a menu"
>
<mat-icon>more_horiz</mat-icon>
</button>
<mat-menu #menu="matMenu" xPosition="after">
<mat-list role="list" *ngFor="let item of sharedWithData">
- <mat-list-item role="listitem" style="font-size: 14px">
- <div
- style="
- display: flex;
- align-items: center;
- justify-items: center;
- gap: 4px;
- "
- >
+ <mat-list-item role="listitem" class="font-size-text">
+ <div class="user-profile-black-image-container">
<img
- style="width: 27px; height: 27px; display: inline-block"
+ class="user-profile-black-image"
src="../../../../assets/images/user-profile-black.png"
/>
<span [title]="[item.firstName, item.lastName].join('')"
@@ -87,15 +64,10 @@
<div class="workflow-left-header workflow-header">MANAGEMENT OPTIONS</div>
<div
*ngIf="selectedRevision$ | async as selectedRevision"
- style="
- display: flex;
- flex-direction: column !important;
- justify-content: center !important;
- margin-left: 16px;
- "
+ class="static-tabs"
>
<div>
- <span class="tab-box" style="font-size: 14px">On - Boarding</span>
+ <span class="tab-box font-size-text">On - Boarding</span>
</div>
<div>
<span class="version-on-boarded"
@@ -106,36 +78,19 @@
>
</div>
</div>
- <nav mat-tab-nav-bar class="margin: 20px 0 20px 0;" [tabPanel]="tabPanel">
+ <nav mat-tab-nav-bar class="nav-share-with-tab" [tabPanel]="tabPanel">
<a
mat-tab-link
routerLink="shareWithTeam"
routerLinkActive="is-active"
- style="padding-top: 2px; padding-bottom: 8px"
+ class="share-with-tab-container"
>
<mat-icon fontIcon="share"></mat-icon>
- <div
- style="
- display: flex;
- flex-direction: column;
- align-items: flex-start;
- gap: 2px;
- margin-left: 14px;
- "
- >
- <span class="tab-box" style="font-size: 14px">
- Share with team</span
- >
+ <div class="share-with-tab">
+ <span class="tab-box font-size-text"> Share with team</span>
<span
*ngIf="sharedWith$ | async as sharedWithData"
- style="
- margin: 0;
- padding: 0;
- font-size: 12px;
- line-height: 16px;
- font-weight: 400;
- letter-spacing: 0;
- "
+ class="share-with-text"
>Shared with {{ sharedWithData.length }} co-workers</span
>
</div>
@@ -157,7 +112,7 @@
: 'authorsimg-inactive'
"
></span
- ><span class="tab-box" style="font-size: 14px"
+ ><span class="tab-box font-size-text"
>Manage Publisher/Authors</span
></a
>
@@ -175,17 +130,11 @@
: 'companyimg-inactive'
"
></span
- ><span class="tab-box" style="font-size: 14px"
- >Publish to Marketplace</span
- ></a
+ ><span class="tab-box font-size-text">Publish to Marketplace</span></a
>
<a mat-tab-link routerLink="deleteModel" routerLinkActive="is-active"
><mat-icon fontIcon="delete"></mat-icon
- ><span
- class="tab-box"
- style="font-size: 14px; margin-left: 15px !important"
- >Delete Model</span
- ></a
+ ><span class="tab-box delete-model-tab-text">Delete Model</span></a
>
</nav>
<mat-tab-nav-panel #tabPanel></mat-tab-nav-panel>
diff --git a/src/app/shared/components/model-management/model-management.component.scss b/src/app/shared/components/model-management/model-management.component.scss
index 688aaaf4b5648fe4f3e631c33c503d5074241a51..947e17163940d2f0a175660251f5d0da06ad7308 100644
--- a/src/app/shared/components/model-management/model-management.component.scss
+++ b/src/app/shared/components/model-management/model-management.component.scss
@@ -166,3 +166,88 @@ mat-sidenav-content {
font-weight: 600;
color: #671c9d;
}
+
+.flex-column {
+ display: flex;
+ flex-direction: column;
+}
+
+.flex-row {
+ display: flex;
+ flex-direction: row;
+}
+
+.header-container {
+ display: flex;
+ flex-direction: column;
+ padding: 20px;
+}
+
+.user-profile-black-image {
+ width: 27px;
+ height: 27px;
+}
+
+.user-profile-black-image-container {
+ display: flex;
+ align-items: center;
+ justify-items: center;
+ gap: 4px;
+}
+
+.font-size-text {
+ font-size: 14px;
+}
+
+.header-container-top {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ justify-items: center;
+ gap: 8px;
+}
+
+.author-publisher-container {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ justify-items: center;
+}
+
+.share-with-text {
+ margin: 0;
+ padding: 0;
+ font-size: 12px;
+ line-height: 16px;
+ font-weight: 400;
+ letter-spacing: 0;
+}
+
+.share-with-tab {
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ gap: 2px;
+ margin-left: 14px;
+}
+
+.static-tabs {
+ display: flex;
+ flex-direction: column !important;
+ justify-content: center !important;
+ margin-left: 16px;
+}
+
+.share-with-tab-container {
+ padding-top: 2px;
+ padding-bottom: 8px;
+}
+
+.nav-share-with-tab {
+ margin: 20px 0 20px 0;
+}
+
+.delete-model-tab-text {
+ font-size: 14px;
+ margin-left: 15px !important;
+}
diff --git a/src/app/shared/components/rate-model-details/rate-model-details.component.html b/src/app/shared/components/rate-model-details/rate-model-details.component.html
index df6fab94200d1db9dbdb3a22bb131495cda88e3b..6dcc7a5de02e1bd5a51642e8caffd5f9bbd6fc64 100644
--- a/src/app/shared/components/rate-model-details/rate-model-details.component.html
+++ b/src/app/shared/components/rate-model-details/rate-model-details.component.html
@@ -24,27 +24,24 @@
(click)="openRateDialog()"
[disabled]="!userId"
class="mdl-button mdl-js-button btn-secondary"
- style="cursor: pointer"
>
Rate This Model
</button>
</div>
</div>
<div class="rating-container-right">
- <div style="display: flex; flex-direction: column; width: 100%">
+ <div class="flex-column full-width">
<div
class="progress-wrapper"
*ngFor="let count of ratingCounts; let i = index"
>
- <span style="display: flex; flex-direction: column"
- >{{ 5 - i }} star</span
- >
+ <span class="flex-column">{{ 5 - i }} star</span>
<mat-progress-bar
mode="determinate"
[value]="perRatingCounts[i]"
- style="width: 25%; margin: 10px"
+ class="progress-bar"
></mat-progress-bar>
- <span style="font-weight: bold">{{ count }}</span>
+ <span class="progress-bar-count">{{ count }}</span>
</div>
</div>
</div>
@@ -68,10 +65,7 @@
<br />
<div class="discussion-add-comment" aria-hidden="false">
<!--comments section-->
- <div
- style="display: flex; flex-direction: column"
- *ngFor="let comment of comments"
- >
+ <div class="flex-column" *ngFor="let comment of comments">
<div class="discussion-container">
<div>
<img src="../../../../assets/images/user-profile-black.png" />
@@ -111,7 +105,7 @@
>{{ comment.text }}</textarea
>
<div
- style="display: flex; width: 100%"
+ class="flex-row full-width"
*ngIf="
isEditComment && comment.commentId === editedCommentId
"
@@ -123,17 +117,15 @@
Cancel
</button>
<button
- style="margin-left: auto"
(click)="onClickEditPostComment(comment)"
- class="mdl-button mdl-js-button btn-primary"
+ class="mdl-button mdl-js-button btn-primary flexible-margin-left"
>
save changes
</button>
</div>
<div>
<div
- style="display: flex"
- class="discussionformbox"
+ class="discussionformbox flex-row"
*ngIf="showReplyText"
>
<div class="mdl-textfield mdl-js-textfield">
@@ -145,17 +137,13 @@
</div>
<button
- style="margin-top: 4px"
*ngIf="!showReplyText"
- class="mdl-button mdl-js-button btn-secondary"
+ class="mdl-button mdl-js-button btn-secondary reply-button"
(click)="onClickShowReply()"
>
Reply
</button>
- <div
- style="display: flex; width: 100%"
- *ngIf="showReplyText"
- >
+ <div class="flex-row full-width" *ngIf="showReplyText">
<button
*ngIf="showReplyText"
(click)="OnClickCancelReply()"
@@ -164,9 +152,8 @@
Cancel
</button>
<button
- style="margin-left: auto"
(click)="OnClickPostReply(comment)"
- class="mdl-button mdl-js-button btn-primary"
+ class="mdl-button mdl-js-button btn-primary post-reply-button"
>
Post reply
</button>
@@ -176,7 +163,7 @@
</div>
<!--replies section-->
<div
- style="margin-left: 40px; display: flex; flex-direction: row"
+ class="comment-replies-container"
*ngFor="let reply of comment.replies"
>
<div class="discussion-container">
@@ -221,7 +208,7 @@
>{{ reply.text }}</textarea
>
<div
- style="display: flex; width: 100%"
+ class="flex-row full-width"
*ngIf="
isEditComment && reply.commentId === editedCommentId
"
@@ -233,9 +220,8 @@
Cancel
</button>
<button
- style="margin-left: auto"
(click)="onClickEditPostComment(comment)"
- class="mdl-button mdl-js-button btn-primary"
+ class="mdl-button mdl-js-button btn-primary flexible-margin-left"
>
save changes
</button>
diff --git a/src/app/shared/components/rate-model-details/rate-model-details.component.scss b/src/app/shared/components/rate-model-details/rate-model-details.component.scss
index 351dc2a9eb7bcb8d592c0705c18794a1882b84ad..960421c7cec4d5b01dd2352fa8b422e62bcfed4e 100644
--- a/src/app/shared/components/rate-model-details/rate-model-details.component.scss
+++ b/src/app/shared/components/rate-model-details/rate-model-details.component.scss
@@ -417,15 +417,12 @@
}
.mdl-textfield__input {
- /* border: none; */
- /* border-bottom: 1px solid rgba(0,0,0,.12); */
display: block;
font-size: 16px;
font-family: "Helvetica", "Arial", sans-serif;
margin: 0;
padding: 4px 0;
width: 100%;
- /* background: 0 0; */
text-align: left;
color: inherit;
}
@@ -433,3 +430,44 @@
button {
cursor: pointer;
}
+
+.flex-column {
+ display: flex;
+ flex-direction: column;
+}
+
+.flex-row {
+ display: flex;
+ flex-direction: row;
+}
+
+.full-width {
+ width: 100;
+}
+
+.progress-bar {
+ width: 25%;
+ margin: 10px;
+}
+
+.progress-bar-count {
+ font-weight: bold;
+}
+
+.reply-button {
+ margin-top: 4px;
+}
+
+.post-reply-button {
+ margin-left: auto;
+}
+
+.comment-replies-container {
+ margin-left: 40px;
+ display: flex;
+ flex-direction: row;
+}
+
+.flexible-margin-left {
+ margin-left: auto;
+}
diff --git a/src/app/shared/components/rate-model-dialog/rate-model-dialog.component.html b/src/app/shared/components/rate-model-dialog/rate-model-dialog.component.html
index c15f76045ebd4bc0b6b5fca76e83165147550fdd..ae51b3759c1df6d61720ba11bb55d036357acbd3 100644
--- a/src/app/shared/components/rate-model-dialog/rate-model-dialog.component.html
+++ b/src/app/shared/components/rate-model-dialog/rate-model-dialog.component.html
@@ -1,5 +1,5 @@
<mat-toolbar class="dialog-header">
- <div style="display: flex; align-items: center; padding: 0; flex: 1 1 auto">
+ <div class="dialog-title">
<h2>Rate this Model - recognaizeui</h2>
</div>
<button
@@ -47,7 +47,7 @@
></textarea></div
></mat-dialog-content>
<mat-toolbar class="form-footer">
- <button mat-dialog-close mat-raised-button style="margin-right: auto">
+ <button mat-dialog-close mat-raised-button class="cancel-button">
Cancel
</button>
<button
diff --git a/src/app/shared/components/rate-model-dialog/rate-model-dialog.component.scss b/src/app/shared/components/rate-model-dialog/rate-model-dialog.component.scss
index 4989061bb6a9687280955ccdd7db02f4c3125b66..24bc63a1411ed226d82b821b0f91052ff22be96b 100644
--- a/src/app/shared/components/rate-model-dialog/rate-model-dialog.component.scss
+++ b/src/app/shared/components/rate-model-dialog/rate-model-dialog.component.scss
@@ -129,3 +129,14 @@
height: 82px;
font-size: 14px;
}
+
+.dialog-title {
+ display: flex;
+ align-items: center;
+ padding: 0;
+ flex: 1 1 auto;
+}
+
+.cancel-button {
+ margin-right: auto;
+}
diff --git a/src/app/shared/components/rich-text-editor-dialog/rich-text-editor-dialog.component.html b/src/app/shared/components/rich-text-editor-dialog/rich-text-editor-dialog.component.html
index 35f20ebe4f0a757bc8a646703eb0a9990cbadbfd..1450d959b9c8775622a8aee7c5d253a241a1e97c 100644
--- a/src/app/shared/components/rich-text-editor-dialog/rich-text-editor-dialog.component.html
+++ b/src/app/shared/components/rich-text-editor-dialog/rich-text-editor-dialog.component.html
@@ -1,5 +1,5 @@
<mat-toolbar class="dialog-header">
- <div style="display: flex; align-items: center; padding: 0; flex: 1 1 auto">
+ <div class="dialog-title">
<h2>{{ title }}</h2>
</div>
<button
@@ -22,7 +22,7 @@
</form></div
></mat-dialog-content>
<mat-toolbar class="form-footer">
- <button mat-dialog-close mat-raised-button style="margin-right: auto">
+ <button mat-dialog-close mat-raised-button class="cancel-button">
Cancel
</button>
<button color="primary" mat-raised-button (click)="confirm()">Confirm</button>
diff --git a/src/app/shared/components/rich-text-editor-dialog/rich-text-editor-dialog.component.scss b/src/app/shared/components/rich-text-editor-dialog/rich-text-editor-dialog.component.scss
index 2b6f64051f7c62dbef7c6d7a548206673cf5fe87..98262e7b16e8b7b4af0c5069d47687ffaf313ce0 100644
--- a/src/app/shared/components/rich-text-editor-dialog/rich-text-editor-dialog.component.scss
+++ b/src/app/shared/components/rich-text-editor-dialog/rich-text-editor-dialog.component.scss
@@ -65,3 +65,14 @@
height: 82px;
font-size: 14px;
}
+
+.dialog-title {
+ display: flex;
+ align-items: center;
+ padding: 0;
+ flex: 1 1 auto;
+}
+
+.cancel-button {
+ margin-right: auto;
+}
diff --git a/src/app/shared/components/tags-list/tags-list.component.html b/src/app/shared/components/tags-list/tags-list.component.html
index 98302e4db2552243305b9bbec0d9284db798f12a..df30c309e3a14e9f6af5a7d045573028f0a0b528 100644
--- a/src/app/shared/components/tags-list/tags-list.component.html
+++ b/src/app/shared/components/tags-list/tags-list.component.html
@@ -1,5 +1,5 @@
<div
- style="position: relative"
+ class="tags-list-container"
*ngIf="item.solutionTagList && item.solutionTagList.length > 0"
>
<div class="manage-tagList">
diff --git a/src/app/shared/components/tags-list/tags-list.component.scss b/src/app/shared/components/tags-list/tags-list.component.scss
index 2386cee60f4b5818e817dce34847deb07bb9abc3..cc7eb7bb916f41f331dd7788b72315a5c25a4264 100644
--- a/src/app/shared/components/tags-list/tags-list.component.scss
+++ b/src/app/shared/components/tags-list/tags-list.component.scss
@@ -132,3 +132,7 @@ button[matMenuTriggerFor] {
right: -8px;
opacity: 0.7;
}
+
+.tags-list-container {
+ position: relative;
+}
diff --git a/src/app/shared/components/upload-license-profile/upload-license-profile.component.html b/src/app/shared/components/upload-license-profile/upload-license-profile.component.html
index 64d01491f4c6d6b5eb1ac9ad03b21bcc9b25be5f..694b5560192d2a47ae02291ca9f9be1f59fc52a7 100644
--- a/src/app/shared/components/upload-license-profile/upload-license-profile.component.html
+++ b/src/app/shared/components/upload-license-profile/upload-license-profile.component.html
@@ -15,12 +15,12 @@
<div class="upload-image-input">
<div class="drag-drop" gpDnd (fileDropped)="handleFileInput($event)">
<img src="../../../../assets/images/upload-doc-vector.png" alt="" />
- <div style="display: flex; flex-direction: column; align-items: center">
+ <div class="drag-drop-container">
<div class="destext">Drag & Drop your file here!</div>
<div class="destext">or</div>
<button
+ class="drop-button"
color="primary"
- style="border-radius: 21.5px; width: 183px"
(click)="fileDropRef.click()"
mat-raised-button
>
@@ -38,10 +38,9 @@
<div *ngIf="file" class="files-list">
<div class="single-file">
<img
+ class="file-image"
src="../../../../assets/images/ic-file.svg"
- width="55px"
alt="file"
- style="align-self: flex-start"
/>
<div class="info">
<h4 class="name">
@@ -57,13 +56,7 @@
[value]="progressBarValue"
></mat-progress-bar>
</div>
- <div
- style="
- display: flex;
- align-items: center;
- justify-content: center;
- "
- >
+ <div class="progress-bar-value-number-container">
<span> {{ progressBarValue | number: "1.0-0" }}% </span>
</div>
</div>
diff --git a/src/app/shared/components/upload-license-profile/upload-license-profile.component.scss b/src/app/shared/components/upload-license-profile/upload-license-profile.component.scss
index dfc0984ac9d1ed6daa23bdc8606f0543f529030f..2a96c4ee05d9ffbe45274651f51d81fc05c7d27d 100644
--- a/src/app/shared/components/upload-license-profile/upload-license-profile.component.scss
+++ b/src/app/shared/components/upload-license-profile/upload-license-profile.component.scss
@@ -176,3 +176,25 @@ input[type="file"] {
.upload-txtbox {
display: none;
}
+
+.drag-drop-container {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+}
+
+.drop-button {
+ border-radius: 21.5px;
+ width: 183px;
+}
+
+.file-image {
+ align-self: flex-start;
+ width: 55px;
+}
+
+.progress-bar-value-number-container {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
diff --git a/src/app/shared/components/version-dropdown/version-dropdown.component.html b/src/app/shared/components/version-dropdown/version-dropdown.component.html
index c86f1eced0b1aefe5ec980a6fbb8eb4399b1654a..16066cfdd165307b6f50cf97b0a133f67ea259e5 100644
--- a/src/app/shared/components/version-dropdown/version-dropdown.component.html
+++ b/src/app/shared/components/version-dropdown/version-dropdown.component.html
@@ -12,15 +12,13 @@
<mat-menu #menu2="matMenu">
<mat-list role="list" *ngFor="let revision of revisionsList">
<mat-list-item
+ class="list-item"
(click)="onChangeVersion(revision)"
- style="cursor: pointer"
[ngClass]="{
selected: revision.version === selectedDefaultRevision.version
}"
>
- <span style="font-size: 14px; line-height: 24px; font-weight: 400"
- >Version - {{ revision.version }}</span
- >
+ <span class="version-text">Version - {{ revision.version }}</span>
</mat-list-item>
</mat-list>
</mat-menu>
diff --git a/src/app/shared/components/version-dropdown/version-dropdown.component.scss b/src/app/shared/components/version-dropdown/version-dropdown.component.scss
index 92f55c5065d5f4537f311de93f3d1899268251be..6fb4d5ef86852667d0ac1316026b0eee3843031d 100644
--- a/src/app/shared/components/version-dropdown/version-dropdown.component.scss
+++ b/src/app/shared/components/version-dropdown/version-dropdown.component.scss
@@ -45,3 +45,13 @@
::ng-deep.mat-mdc-menu-panel {
width: 200px !important;
}
+
+.list-item {
+ cursor: pointer;
+}
+
+.version-text {
+ font-size: 14px;
+ line-height: 24px;
+ font-weight: 400;
+}