Skip to content
Snippets Groups Projects
Commit e800d2b7 authored by Kawtar Laariche's avatar Kawtar Laariche
Browse files

#19: :recycle: refactor code

parent f60f0ef3
No related branches found
No related tags found
1 merge request!12Features/user auth manage my models
Showing
with 298 additions and 141 deletions
......@@ -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"
......
......@@ -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;
}
......@@ -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',
......
......@@ -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">
......
......@@ -5,3 +5,7 @@
.mat-toolbar button {
color: white;
}
.firstName-button {
margin-left: auto;
}
<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>
......
......@@ -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;
}
}
<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>
......
......@@ -43,3 +43,12 @@ img {
color: #ffcc00 !important;
opacity: 1;
}
.graphene-logo-container {
margin-right: 24px;
cursor: pointer;
}
.flexible-margin-left {
margin-left: auto;
}
......@@ -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
......
......@@ -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;
}
......@@ -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',
......
<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)
"
......
......@@ -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;
}
......@@ -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>
......
......@@ -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;
}
<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>
.dialog-title {
display: flex;
align-items: center;
padding: 0;
flex: 1 1 auto;
}
.cancel-button {
margin-right: auto;
}
<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
......
......@@ -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;
}
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment