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

#24: :lipstick: fix alignment

parent ce6c0def
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
Showing
with 774 additions and 677 deletions
src/app/features/dashboard/dashboard.component.scss
+ 29
− 1
View file @ 52f12349
......@@ -10,7 +10,6 @@ mat-toolbar {
}
mat-sidenav-container {
height: calc(100% - 64px);
overflow: hidden !important;
}
......@@ -24,3 +23,32 @@ mat-sidenav {
overflow: hidden !important;
padding-top: 0 !important;
}
::ng-deep.mat-drawer-container {
position: relative;
z-index: -1;
box-sizing: border-box;
-webkit-overflow-scrolling: touch;
display: block;
overflow: hidden;
height: 100% !important;
}
.all-wrap {
min-height: 100vh;
}
.content {
flex: 1; // child will set to an equal size inside the container
}
main {
display: flex;
flex-direction: column;
// Select all direct descendants only of the <main> element
// that are not <router-outlet> elements:
> *:not(router-outlet) {
flex: 1; // child will set to an equal size inside the container
display: block;
}
}
src/app/features/dashboard/my-models/my-models.component.html
+ 161
− 157
View file @ 52f12349
<section class="pageheadsection mob-pageheadsection1">
<div class="mdl-grid mdl-grid.mdl-grid--no-spacing">
<div>
<gp-headline [headlineTitle]="'My Models'"></gp-headline>
</div>
<gp-breadcrumb-navigation
[firstNavigationLabel]="{ label: 'Home' }"
[secondNavigationLabel]="{ label: 'My models', disabled: true }"
(firstNavigationClicked)="onHomeClick()"
></gp-breadcrumb-navigation>
</div>
</section>
<mat-sidenav-container>
<mat-sidenav mode="side" opened>
<gp-filters
[tags]="tags"
[categories]="categories"
(selectedTagsChange)="handleSelectedTagsChange($event)"
(selectedCategoriesChange)="handleSelectedCategoriesChange($event)"
(searchValueChanged)="onSearchValueChanged($event)"
></gp-filters>
</mat-sidenav>
<mat-sidenav-content>
<div class="content-container">
<div class="sort-toggle-container">
<div class="gp-sort-by">
<gp-sort-by
[sortByOptions]="sortByOptions"
[selectedSortBy]="sortByFilter"
(sortBySelected)="updateFieldToDirectionMap($event)"
></gp-sort-by>
</div>
<div class="gp-card-list-view">
<gp-solutions-toggle-view
[viewTile]="viewTile"
(viewTileChange)="onViewTileChange($event)"
></gp-solutions-toggle-view>
</div>
<div class="flex-column">
<section class="pageheadsection mob-pageheadsection1">
<div class="mdl-grid mdl-grid.mdl-grid--no-spacing">
<div>
<gp-headline [headlineTitle]="'My Models'"></gp-headline>
</div>
<!--Unpublished models section-->
@if (modelType === "both") {
<div class="flex-column">
<gp-model-list
[solutions]="selectedUnpublishedSolutions"
[totalItems]="unpublishedTotalItems"
[isLoading]="isUnpublishedSolutionsLoading"
[headlineTitle]="'MY UNPUBLISHED MODELS'"
[showEntirePage]="false"
[viewTile]="viewTile"
[pageSize]="pageSize"
[pageIndex]="pageIndex"
[pageSizeOptions]="pageSizeOptions"
[modelType]="'unpublished'"
[favoriteSolutionsMap]="favoriteSolutionsMap"
[calculateStartIndex]="calculateStartIndex(pageIndex, pageSize)"
[calculateEndIndex]="
calculateEndIndex(unpublishedTotalItems, pageIndex, pageSize)
"
(pageChange)="onPageChange($event)"
(updateFavorite)="updateFavorite($event)"
(backEvent)="onClickBack('both')"
></gp-model-list>
<gp-breadcrumb-navigation
[firstNavigationLabel]="{ label: 'Home' }"
[secondNavigationLabel]="{ label: 'My models', disabled: true }"
(firstNavigationClicked)="onHomeClick()"
></gp-breadcrumb-navigation>
</div>
</section>
<mat-sidenav-container>
<mat-sidenav mode="side" opened>
<gp-filters
[tags]="tags"
[categories]="categories"
(selectedTagsChange)="handleSelectedTagsChange($event)"
(selectedCategoriesChange)="handleSelectedCategoriesChange($event)"
(searchValueChanged)="onSearchValueChanged($event)"
></gp-filters>
</mat-sidenav>
<mat-sidenav-content class="page-wrap">
<main class="content-router-outlet">
<div class="content-container">
<div class="sort-toggle-container">
<div class="gp-sort-by">
<gp-sort-by
[sortByOptions]="sortByOptions"
[selectedSortBy]="sortByFilter"
(sortBySelected)="updateFieldToDirectionMap($event)"
></gp-sort-by>
</div>
<div class="gp-card-list-view">
<gp-solutions-toggle-view
[viewTile]="viewTile"
(viewTileChange)="onViewTileChange($event)"
></gp-solutions-toggle-view>
</div>
</div>
<!--Unpublished models section-->
@if (modelType === "both") {
<div class="flex-column">
<gp-model-list
[solutions]="selectedUnpublishedSolutions"
[totalItems]="unpublishedTotalItems"
[isLoading]="isUnpublishedSolutionsLoading"
[headlineTitle]="'MY UNPUBLISHED MODELS'"
[showEntirePage]="false"
[viewTile]="viewTile"
[pageSize]="pageSize"
[pageIndex]="pageIndex"
[pageSizeOptions]="pageSizeOptions"
[modelType]="'unpublished'"
[favoriteSolutionsMap]="favoriteSolutionsMap"
[calculateStartIndex]="calculateStartIndex(pageIndex, pageSize)"
[calculateEndIndex]="
calculateEndIndex(unpublishedTotalItems, pageIndex, pageSize)
"
(pageChange)="onPageChange($event)"
(updateFavorite)="updateFavorite($event)"
(backEvent)="onClickBack('both')"
></gp-model-list>
<div class="see-all-container">
<button
class="see-all-button"
aria-label="icon button with a menu icon"
(click)="onClickSeeAll('unpublished')"
>
<div class="see-all-text-container">
<span>See all</span> <mat-icon>arrow_forward_ios</mat-icon>
<div class="see-all-container">
<button
class="see-all-button"
aria-label="icon button with a menu icon"
(click)="onClickSeeAll('unpublished')"
>
<div class="see-all-text-container">
<span>See all</span> <mat-icon>arrow_forward_ios</mat-icon>
</div>
</button>
</div>
</button>
</div>
</div>
}
</div>
}
@if (modelType === "unpublished") {
<div class="flex-column">
<gp-model-list
[solutions]="selectedUnpublishedSolutions"
[totalItems]="unpublishedTotalItems"
[isLoading]="isUnpublishedSolutionsLoading"
[headlineTitle]="'MY UNPUBLISHED MODELS'"
[showEntirePage]="true"
[viewTile]="viewTile"
[pageSize]="pageSize"
[pageIndex]="pageIndex"
[pageSizeOptions]="pageSizeOptions"
[modelType]="'unpublished'"
[favoriteSolutionsMap]="favoriteSolutionsMap"
[calculateStartIndex]="calculateStartIndex(pageIndex, pageSize)"
[calculateEndIndex]="
calculateEndIndex(unpublishedTotalItems, pageIndex, pageSize)
"
(pageChange)="onPageChange($event)"
(updateFavorite)="updateFavorite($event)"
(backEvent)="onClickBack('both')"
></gp-model-list>
</div>
}
@if (modelType === "unpublished") {
<div class="flex-column">
<gp-model-list
[solutions]="selectedUnpublishedSolutions"
[totalItems]="unpublishedTotalItems"
[isLoading]="isUnpublishedSolutionsLoading"
[headlineTitle]="'MY UNPUBLISHED MODELS'"
[showEntirePage]="true"
[viewTile]="viewTile"
[pageSize]="pageSize"
[pageIndex]="pageIndex"
[pageSizeOptions]="pageSizeOptions"
[modelType]="'unpublished'"
[favoriteSolutionsMap]="favoriteSolutionsMap"
[calculateStartIndex]="calculateStartIndex(pageIndex, pageSize)"
[calculateEndIndex]="
calculateEndIndex(unpublishedTotalItems, pageIndex, pageSize)
"
(pageChange)="onPageChange($event)"
(updateFavorite)="updateFavorite($event)"
(backEvent)="onClickBack('both')"
></gp-model-list>
</div>
}
<!--published solutions -->
<!--published solutions -->
@if (modelType === "both") {
<div class="flex-column">
<gp-model-list
[solutions]="selectedPublishedSolutions"
[totalItems]="publishedTotalItems"
[isLoading]="isPublishedSolutionsLoading"
[headlineTitle]="'MY PUBLISHED MODELS'"
[showEntirePage]="false"
[viewTile]="viewTile"
[pageSize]="pageSize"
[pageIndex]="pageIndex"
[pageSizeOptions]="pageSizeOptions"
[modelType]="'published'"
[favoriteSolutionsMap]="favoriteSolutionsMap"
[calculateStartIndex]="calculateStartIndex(pageIndex, pageSize)"
[calculateEndIndex]="
calculateEndIndex(publishedTotalItems, pageIndex, pageSize)
"
(pageChange)="onPageChange($event)"
(updateFavorite)="updateFavorite($event)"
(backEvent)="onClickBack('both')"
></gp-model-list>
@if (modelType === "both") {
<div class="flex-column">
<gp-model-list
[solutions]="selectedPublishedSolutions"
[totalItems]="publishedTotalItems"
[isLoading]="isPublishedSolutionsLoading"
[headlineTitle]="'MY PUBLISHED MODELS'"
[showEntirePage]="false"
[viewTile]="viewTile"
[pageSize]="pageSize"
[pageIndex]="pageIndex"
[pageSizeOptions]="pageSizeOptions"
[modelType]="'published'"
[favoriteSolutionsMap]="favoriteSolutionsMap"
[calculateStartIndex]="calculateStartIndex(pageIndex, pageSize)"
[calculateEndIndex]="
calculateEndIndex(publishedTotalItems, pageIndex, pageSize)
"
(pageChange)="onPageChange($event)"
(updateFavorite)="updateFavorite($event)"
(backEvent)="onClickBack('both')"
></gp-model-list>
<div class="see-all-container">
<button
class="see-all-button"
aria-label="Example icon button with a menu icon"
(click)="onClickSeeAll('published')"
>
<div class="see-all-text-container">
<span>See all</span> <mat-icon>arrow_forward_ios</mat-icon>
<div class="see-all-container">
<button
class="see-all-button"
aria-label="Example icon button with a menu icon"
(click)="onClickSeeAll('published')"
>
<div class="see-all-text-container">
<span>See all</span> <mat-icon>arrow_forward_ios</mat-icon>
</div>
</button>
</div>
</button>
</div>
</div>
}
@if (modelType === "published") {
<div class="flex-column">
<gp-model-list
[solutions]="selectedPublishedSolutions"
[totalItems]="publishedTotalItems"
[isLoading]="isPublishedSolutionsLoading"
[headlineTitle]="'MY PUBLISHED MODELS'"
[showEntirePage]="true"
[viewTile]="viewTile"
[pageSize]="pageSize"
[pageIndex]="pageIndex"
[pageSizeOptions]="pageSizeOptions"
[modelType]="'published'"
[favoriteSolutionsMap]="favoriteSolutionsMap"
[calculateStartIndex]="calculateStartIndex(pageIndex, pageSize)"
[calculateEndIndex]="
calculateEndIndex(publishedTotalItems, pageIndex, pageSize)
"
(pageChange)="onPageChange($event)"
(updateFavorite)="updateFavorite($event)"
(backEvent)="onClickBack('both')"
></gp-model-list>
</div>
}
@if (modelType === "published") {
<div class="flex-column">
<gp-model-list
[solutions]="selectedPublishedSolutions"
[totalItems]="publishedTotalItems"
[isLoading]="isPublishedSolutionsLoading"
[headlineTitle]="'MY PUBLISHED MODELS'"
[showEntirePage]="true"
[viewTile]="viewTile"
[pageSize]="pageSize"
[pageIndex]="pageIndex"
[pageSizeOptions]="pageSizeOptions"
[modelType]="'published'"
[favoriteSolutionsMap]="favoriteSolutionsMap"
[calculateStartIndex]="calculateStartIndex(pageIndex, pageSize)"
[calculateEndIndex]="
calculateEndIndex(publishedTotalItems, pageIndex, pageSize)
"
(pageChange)="onPageChange($event)"
(updateFavorite)="updateFavorite($event)"
(backEvent)="onClickBack('both')"
></gp-model-list>
</div>
}
</div>
}
</div> </mat-sidenav-content
></mat-sidenav-container>
</main> </mat-sidenav-content
></mat-sidenav-container>
</div>
src/app/features/dashboard/my-models/my-models.component.scss
+ 19
− 17
View file @ 52f12349
......@@ -2,9 +2,23 @@
padding: 24px;
}
.page-wrap {
display: flex !important;
flex-direction: column !important;
min-height: 100vh !important;
}
.content-router-outlet {
flex: 1;
}
// content height
::ng-deep.mat-drawer-content {
height: 89.1% !important;
}
mat-sidenav-container {
height: calc(100% - 64px);
overflow: auto;
overflow: hidden;
}
.cards-container {
......@@ -25,7 +39,7 @@ mat-sidenav {
width: 300px;
background: #f1f1f1;
height: 100%;
overflow-y: auto;
overflow: hidden;
}
.mat-grid-tile {
......@@ -34,23 +48,11 @@ mat-sidenav {
:host ::ng-deep .mat-drawer-inner-container {
overflow: hidden !important;
padding: 20px 0 20px 0;
}
mat-sidenav-content {
height: 77vh;
overflow: auto;
.loading-data {
height: 75vh;
width: 100%;
overflow: hidden !important;
display: flex;
align-items: center;
justify-content: center;
p {
margin: 0;
}
}
overflow: hidden !important;
}
.pageheadsection {
......
src/app/features/marketplace/marketplace.component.html
+ 123
− 118
View file @ 52f12349
<section class="pageheadsection mob-pageheadsection1">
<div class="mdl-grid mdl-grid.mdl-grid--no-spacing">
<div>
<gp-headline [headlineTitle]="'Marketplace |'"></gp-headline>
<div class="favorite-buttons-container" *ngIf="loginUserId">
<button
class="favorite-button"
mat-raised-button
[color]="!isOnMyFavoriteSelected ? 'primary' : ''"
(click)="onAllCatalogsClick()"
>
All catalogs
</button>
<button
class="favorite-button"
mat-raised-button
[color]="isOnMyFavoriteSelected ? 'primary' : ''"
(click)="onMyFavoriteCatalogsClick()"
>
My favorite catalogs
</button>
<div class="flex-column">
<section class="pageheadsection mob-pageheadsection1">
<div class="mdl-grid mdl-grid.mdl-grid--no-spacing">
<div>
<gp-headline [headlineTitle]="'Marketplace |'"></gp-headline>
<div class="favorite-buttons-container" *ngIf="loginUserId">
<button
class="favorite-button"
mat-raised-button
[color]="!isOnMyFavoriteSelected ? 'primary' : ''"
(click)="onAllCatalogsClick()"
>
All catalogs
</button>
<button
class="favorite-button"
mat-raised-button
[color]="isOnMyFavoriteSelected ? 'primary' : ''"
(click)="onMyFavoriteCatalogsClick()"
>
My favorite catalogs
</button>
</div>
</div>
<gp-breadcrumb-navigation
[firstNavigationLabel]="{ label: 'Home' }"
[secondNavigationLabel]="{ label: 'Marketplace', disabled: true }"
(firstNavigationClicked)="onHomeClick()"
></gp-breadcrumb-navigation>
</div>
<gp-breadcrumb-navigation
[firstNavigationLabel]="{ label: 'Home' }"
[secondNavigationLabel]="{ label: 'Marketplace', disabled: true }"
(firstNavigationClicked)="onHomeClick()"
></gp-breadcrumb-navigation>
</div>
</section>
<mat-sidenav-container>
<mat-sidenav mode="side" opened>
<gp-filters
[tags]="tags"
[categories]="categories"
(selectedTagsChange)="handleSelectedTagsChange($event)"
(selectedCategoriesChange)="handleSelectedCategoriesChange($event)"
(searchValueChanged)="onSearchValueChanged($event)"
></gp-filters>
</mat-sidenav>
<mat-sidenav-content>
<div class="filters-container">
<div class="total-items-container" *ngIf="!isLoading">
@if (totalItems > 0) {
<div class="total-items-text-container">
<span class="showing-text"
>Showing -
<span class="total-items-text">
{{ calculateStartIndex() }} to {{ calculateEndIndex() }} of
{{ totalItems }} Models</span
></span
>
</section>
<mat-sidenav-container>
<mat-sidenav mode="side" opened>
<gp-filters
[tags]="tags"
[categories]="categories"
(selectedTagsChange)="handleSelectedTagsChange($event)"
(selectedCategoriesChange)="handleSelectedCategoriesChange($event)"
(searchValueChanged)="onSearchValueChanged($event)"
></gp-filters>
</mat-sidenav>
<mat-sidenav-content class="page-wrap">
<main class="content-router-outlet">
<div class="filters-container">
<div class="total-items-container" *ngIf="!isLoading">
@if (totalItems > 0) {
<div class="total-items-text-container">
<span class="showing-text"
>Showing -
<span class="total-items-text">
{{ calculateStartIndex() }} to {{ calculateEndIndex() }} of
{{ totalItems }} Models</span
></span
>
</div>
}
</div>
}
</div>
<div class="gp-sort-by" *ngIf="!isLoading">
<gp-sort-by
[sortByOptions]="sortByOptions"
[selectedSortBy]="sortByFilter"
(sortBySelected)="updateFieldToDirectionMap($event)"
></gp-sort-by>
</div>
<div class="gp-card-list-view" *ngIf="!isLoading">
<gp-solutions-toggle-view
[viewTile]="viewTile"
(viewTileChange)="onViewTileChange($event)"
></gp-solutions-toggle-view>
</div>
</div>
<ng-container *ngIf="publicSolutions && !isLoading; else loadingState">
<ng-container *ngIf="publicSolutions.length > 0; else noCatalogs">
<div *ngIf="!viewTile; else gridView">
<!-- Horizontal list view content -->
<div class="grid-list">
<gp-list-item
[item]="item"
[items]="publicSolutions"
[isMarketPlacePage]="true"
[isPublishedSolution]="true"
*ngFor="let item of publicSolutions"
></gp-list-item>
<div class="gp-sort-by" *ngIf="!isLoading">
<gp-sort-by
[sortByOptions]="sortByOptions"
[selectedSortBy]="sortByFilter"
(sortBySelected)="updateFieldToDirectionMap($event)"
></gp-sort-by>
</div>
<div class="gp-card-list-view" *ngIf="!isLoading">
<gp-solutions-toggle-view
[viewTile]="viewTile"
(viewTileChange)="onViewTileChange($event)"
></gp-solutions-toggle-view>
</div>
</div>
<ng-template #gridView>
<div class="grid-list">
<mat-grid-list cols="5" rowHeight="3:4" gutterSize="20px">
<mat-grid-tile *ngFor="let item of publicSolutions">
<div class="cards-container">
<gp-card-item
[isPublishedSolution]="true"
[item]="item"
[items]="publicSolutions"
[isMarketPlacePage]="true"
[isFavoriteSolution]="favoriteSolutionsMap[item.solutionId]"
(favoriteClicked)="updateFavorite(item.solutionId)"
></gp-card-item>
</div>
</mat-grid-tile>
</mat-grid-list>
<ng-container *ngIf="publicSolutions && !isLoading; else loadingState">
<ng-container *ngIf="publicSolutions.length > 0; else noCatalogs">
<div *ngIf="!viewTile; else gridView">
<!-- Horizontal list view content -->
<div class="grid-list">
<gp-list-item
[item]="item"
[items]="publicSolutions"
[isMarketPlacePage]="true"
[isPublishedSolution]="true"
*ngFor="let item of publicSolutions"
></gp-list-item>
</div>
</div>
<ng-template #gridView>
<div class="grid-list">
<mat-grid-list cols="5" rowHeight="3:4" gutterSize="20px">
<mat-grid-tile *ngFor="let item of publicSolutions">
<div class="cards-container">
<gp-card-item
[isPublishedSolution]="true"
[item]="item"
[items]="publicSolutions"
[isMarketPlacePage]="true"
[isFavoriteSolution]="
favoriteSolutionsMap[item.solutionId]
"
(favoriteClicked)="updateFavorite(item.solutionId)"
></gp-card-item>
</div>
</mat-grid-tile>
</mat-grid-list>
</div>
</ng-template>
</ng-container>
<ng-template #noCatalogs>
<div class="loading-data">
<p>No result found...</p>
</div>
</ng-template>
</ng-container>
<ng-template #loadingState>
<div class="loading-data">
<p>Loading data ...</p>
</div>
</ng-template>
</ng-container>
<ng-template #noCatalogs>
<div class="loading-data">
<p>No result found...</p>
</div>
</ng-template>
</ng-container>
<ng-template #loadingState>
<div class="loading-data">
<p>Loading data ...</p>
</div>
</ng-template>
@if (totalItems > 0) {
<mat-paginator
[length]="totalItems"
[pageSize]="pageSize"
[pageSizeOptions]="pageSizeOptions"
(page)="onPageChange($event)"
aria-label="Select page"
aria-label="Select page"
>
</mat-paginator>
}</mat-sidenav-content
></mat-sidenav-container>
@if (totalItems > 0) {
<mat-paginator
[length]="totalItems"
[pageSize]="pageSize"
[pageSizeOptions]="pageSizeOptions"
(page)="onPageChange($event)"
aria-label="Select page"
aria-label="Select page"
>
</mat-paginator>
}</main></mat-sidenav-content
></mat-sidenav-container>
</div>
src/app/features/marketplace/marketplace.component.scss
+ 24
− 17
View file @ 52f12349
......@@ -2,9 +2,23 @@
padding: 24px;
}
.page-wrap {
display: flex !important;
flex-direction: column !important;
min-height: 100vh !important;
}
.content-router-outlet {
flex: 1;
}
// content height
::ng-deep.mat-drawer-content {
height: 89.1% !important;
}
mat-sidenav-container {
height: calc(100% - 64px);
overflow: auto;
overflow: hidden;
}
.cards-container {
......@@ -25,7 +39,8 @@ mat-sidenav {
width: 300px;
background: #f1f1f1;
height: 100%;
overflow-y: auto;
//overflow-y: auto;
overflow: hidden;
}
.mat-grid-tile {
......@@ -34,23 +49,11 @@ mat-sidenav {
:host ::ng-deep .mat-drawer-inner-container {
overflow: hidden !important;
padding: 20px 0 20px 0;
}
mat-sidenav-content {
height: 77vh;
overflow: auto;
.loading-data {
height: 75vh;
width: 100%;
overflow: hidden !important;
display: flex;
align-items: center;
justify-content: center;
p {
margin: 0;
}
}
overflow: hidden;
}
.pageheadsection {
......@@ -160,3 +163,7 @@ mat-sidenav-content {
.total-items-text {
color: #8f8f8f;
}
.full-height {
height: 100%;
}
src/app/features/model-details/model-details.component.html
+ 376
− 360
View file @ 52f12349
<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('') }}">
<span class="md-headline4"
><img [src]="imageToShow" tabindex="0" class="solutions-img" />{{
data.solution?.name?.toString()?.split("_")?.join(" ")
}}
</span>
</div>
<div class="md-head-container3">
<div class="md-head-containerinner-seperator"></div>
<div class="version-container cataloglist-container">
<button
class="mdl-button"
#menuTrigger="matMenuTrigger"
[matMenuTriggerFor]="menu"
(click)="menuTrigger.openMenu()"
>
<span class="text-ellipsis"
>Catalog - {{ selectedDefaultCatalog?.name }}</span
>
<i class="material-icons">keyboard_arrow_down</i>
</button>
<mat-menu #menu="matMenu">
<ul>
<li *ngFor="let catalog of data.catalogs" class="selected">
<span
[ngClass]="{
'md-cat-txtellipsis': catalog.name.length > 15
}"
>{{ catalog.name }}</span
>
<span class="custom-tooltip-text">{{ catalog.name }}</span>
</li>
</ul>
</mat-menu>
<div class="flex-column">
<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('') }}"
>
<span class="md-headline4"
><img [src]="imageToShow" tabindex="0" class="solutions-img" />{{
data.solution?.name?.toString()?.split("_")?.join(" ")
}}
</span>
</div>
</div>
<gp-version-dropdown
[selectedDefaultRevision]="selectedDefaultRevision"
[revisionsList]="revisionsList"
(revisionChange)="onChangeVersion($event)"
></gp-version-dropdown>
</div>
<ng-container *ngIf="isLoggedIn$ | async; else notLoggedIn">
<div class="md-head-container2">
<div class="select-control dcl-list">
<mat-form-field appearance="fill">
<mat-select placeholder="Deploy for Execution">
<mat-option
*ngFor="let menuEntry of deployMenu"
[value]="menuEntry.title"
(click)="triggerDeployment(menuEntry)"
<div class="md-head-container3">
<div class="md-head-containerinner-seperator"></div>
<div class="version-container cataloglist-container">
<button
class="mdl-button"
#menuTrigger="matMenuTrigger"
[matMenuTriggerFor]="menu"
(click)="menuTrigger.openMenu()"
>
<span class="text-ellipsis"
>Catalog - {{ selectedDefaultCatalog?.name }}</span
>
<img
[src]="getImagePath(menuEntry.title)"
class="deploy-image"
/>
{{ menuEntry.title }}
</mat-option>
</mat-select>
</mat-form-field>
<i class="material-icons">keyboard_arrow_down</i>
</button>
<mat-menu #menu="matMenu">
<ul>
<li *ngFor="let catalog of data.catalogs" class="selected">
<span
[ngClass]="{
'md-cat-txtellipsis': catalog.name.length > 15
}"
>{{ catalog.name }}</span
>
<span class="custom-tooltip-text">{{ catalog.name }}</span>
</li>
</ul>
</mat-menu>
</div>
</div>
<gp-version-dropdown
[selectedDefaultRevision]="selectedDefaultRevision"
[revisionsList]="revisionsList"
(revisionChange)="onChangeVersion($event)"
></gp-version-dropdown>
</div>
</ng-container>
<ng-template #notLoggedIn>
<div class="md-head-container2">
<button class="mdl-button btn-primary" (click)="openSignInDialog()">
Sign in to download
</button>
<button class="mdl-button btn-secondary" (click)="openSignInDialog()">
Sign in to deploy to cloud
</button>
</div>
</ng-template>
</div>
<ng-container *ngIf="isLoggedIn$ | async; else notLoggedIn">
<div class="md-head-container2">
<div class="select-control dcl-list">
<mat-form-field appearance="fill">
<mat-select placeholder="Deploy for Execution">
<mat-option
*ngFor="let menuEntry of deployMenu"
[value]="menuEntry.title"
(click)="triggerDeployment(menuEntry)"
>
<img
[src]="getImagePath(menuEntry.title)"
class="deploy-image"
/>
{{ menuEntry.title }}
</mat-option>
</mat-select>
</mat-form-field>
</div>
</div>
</ng-container>
<ng-template #notLoggedIn>
<div class="md-head-container2">
<button class="mdl-button btn-primary" (click)="openSignInDialog()">
Sign in to download
</button>
<button class="mdl-button btn-secondary" (click)="openSignInDialog()">
Sign in to deploy to cloud
</button>
</div>
</ng-template>
</div>
<div class="md-head-container2 breadcrumb-navigation-container">
<gp-breadcrumb-navigation
[solution]="data.solution"
[firstNavigationLabel]="{ label: 'Home' }"
[secondNavigationLabel]="{ label: 'MarketPlace' }"
(firstNavigationClicked)="onHomeClick()"
(secondNavigationClicked)="onMarketPlaceClick()"
></gp-breadcrumb-navigation>
<span class="md-lbl1"
>Version {{ selectedDefaultRevision?.version }} |
{{
data.solution?.downloadCount === null ? 0 : data.solution?.downloadCount
}}
Downloaded</span
>
</div>
</section>
<div class="md-container-head1 md-header3" *ngIf="data$ | async as data">
<div class="head-stat-left">
<div class="mdchild1">
<img
class="userimg"
src="../../../assets/images/user-profile-black.png"
/>
<div class="md-head-container2 breadcrumb-navigation-container">
<gp-breadcrumb-navigation
[solution]="data.solution"
[firstNavigationLabel]="{ label: 'Home' }"
[secondNavigationLabel]="{ label: 'MarketPlace' }"
(firstNavigationClicked)="onHomeClick()"
(secondNavigationClicked)="onMarketPlaceClick()"
></gp-breadcrumb-navigation>
<span class="md-lbl1"
>Version {{ selectedDefaultRevision?.version }} |
{{
data.solution?.downloadCount === null
? 0
: data.solution?.downloadCount
}}
Downloaded</span
>
</div>
<div>
</section>
<div class="md-container-head1 md-header3" *ngIf="data$ | async as data">
<div class="head-stat-left">
<div class="mdchild1">
<img
class="userimg"
src="../../../assets/images/user-profile-black.png"
/>
</div>
<div>
<span class="text-medium font600"
><span class="md-created-label"
>Created by
{{
data.authors && data.authors[0]
? data.authors[0]?.name
: data.solution?.ownerName
}}</span
></span
>
|
<span class="text-xsmall"
>Created on {{ data.solution?.created | date: "MM/dd/yyyy" }} </span
><span ng-if="!audit"
>|
<button
class="mdl-button mdl-js-button btn-md-edit"
[disabled]="!editModel"
alt="Manage My Model"
title="Manage My Model"
(click)="OnlClickManageMyModel()"
<div>
<span class="text-medium font600"
><span class="md-created-label"
>Created by
{{
data.authors && data.authors[0]
? data.authors[0]?.name
: data.solution?.ownerName
}}</span
></span
>
Manage My Model
</button>
</span>
|
<span class="text-xsmall"
>Created on {{ data.solution?.created | date: "MM/dd/yyyy" }} </span
><span ng-if="!audit"
>|
<button
class="mdl-button mdl-js-button btn-md-edit"
[disabled]="!editModel"
alt="Manage My Model"
title="Manage My Model"
(click)="OnlClickManageMyModel()"
>
Manage My Model
</button>
</span>
</div>
<span
class="text-xsmall publish-text"
*ngIf="data.catalogs && data.catalogs.length > 0"
>Published on {{ data.solution?.modified | date: "MM/dd/yyyy" }}</span
>
</div>
<span
class="text-xsmall publish-text"
*ngIf="data.catalogs && data.catalogs.length > 0"
>Published on {{ data.solution?.modified | date: "MM/dd/yyyy" }}</span
>
</div>
</div>
<div class="header-stats">
<div>
<a
class="link-blue text-medium md-icons1 scrollToComment-button"
(click)="scrollToComment('view')"
><span
class="statistics-icons icon-chat-blue md-icons1"
alt="Comment"
title="Comment"
></span>
{{ data.comments.response_body.content.length }}
<span class="header-stat-lg">Comments</span></a
>
</div>
<div *ngIf="data.solution?.active === true">|</div>
<div *ngIf="data.solution?.active === true">
<a
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 view-download-container">
<gp-view-count [item]="data.solution" class="md-icons1"></gp-view-count>
</div>
<div>|</div>
<div class="text-medium view-download-container">
<gp-download-count
[item]="data.solution"
class="md-icons1"
></gp-download-count>
<div class="header-stats">
<div>
<a
class="link-blue text-medium md-icons1 scrollToComment-button"
(click)="scrollToComment('view')"
><span
class="statistics-icons icon-chat-blue md-icons1"
alt="Comment"
title="Comment"
></span>
{{ data.comments.response_body.content.length }}
<span class="header-stat-lg">Comments</span></a
>
</div>
<div *ngIf="data.solution?.active === true">|</div>
<div *ngIf="data.solution?.active === true">
<a
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 view-download-container">
<gp-view-count [item]="data.solution" class="md-icons1"></gp-view-count>
</div>
<div>|</div>
<div class="text-medium view-download-container">
<gp-download-count
[item]="data.solution"
class="md-icons1"
></gp-download-count>
</div>
</div>
</div>
</div>
<mat-sidenav-container *ngIf="data$ | async as data">
<mat-sidenav mode="side" opened>
<nav mat-tab-nav-bar class="margin: 20px 0 20px 0;" [tabPanel]="tabPanel">
<a mat-tab-link routerLink="modelDescription" routerLinkActive="is-active"
><mat-icon fontIcon="description"></mat-icon
><span class="tab-box">Description</span></a
>
<a mat-tab-link routerLink="licenseProfile" routerLinkActive="is-active">
<span
class="tab_license"
[ngClass]="
isActive(
'/marketSolutions/model-details/' +
solutionId +
'/' +
revisionId +
'/licenseProfile'
)
? 'tab-license-profile-is-active'
: 'tab-license-profile-not-active'
"
></span
><span class="tab-box"> License profile</span></a
>
<a mat-tab-link routerLink="modelSignature" routerLinkActive="is-active"
><mat-icon fontIcon="sync_alt"></mat-icon
><span class="tab-box">Signature</span></a
>
<a mat-tab-link routerLink="modelDocuments" routerLinkActive="is-active"
><mat-icon fontIcon="content_copy"></mat-icon
><span class="tab-box">Documents</span></a
>
<a mat-tab-link routerLink="modelArtifacts" routerLinkActive="is-active"
><mat-icon fontIcon="history"></mat-icon
><span class="tab-box">Model artifacts</span></a
>
<a mat-tab-link routerLink="modelAuthor" routerLinkActive="is-active">
<span
class="tab-icon"
[ngClass]="
isActive(
'/marketSolutions/model-details/' +
solutionId +
'/' +
revisionId +
'/modelAuthor'
)
? 'tab-author_details-is-active'
: 'tab-author_details-not-active'
"
<mat-sidenav-container *ngIf="data$ | async as data">
<mat-sidenav mode="side" opened #sidenav>
<nav mat-tab-nav-bar class="margin: 20px 0 20px 0;" [tabPanel]="tabPanel">
<a
mat-tab-link
routerLink="modelDescription"
routerLinkActive="is-active"
><mat-icon fontIcon="description"></mat-icon
><span class="tab-box">Description</span></a
>
</span>
<span class="tab-box author-publisher-text">
<span>Author</span>
<span>/</span>
<span>Publisher details</span>
</span>
</a>
</nav>
<mat-tab-nav-panel #tabPanel></mat-tab-nav-panel>
<mat-divider></mat-divider>
<div>
<h6 class="sectiontitle4">
Tags<span class="title-icons icon-tags" alt="Tags" title="Tags"></span>
</h6>
<mat-chip-set class="chip-set-tags" aria-label="Tags selection">
<mat-chip-option
*ngFor="let tag of data.solution.solutionTagList"
color="primary"
class="chips-width"
[matTooltip]="tag.tag"
<a
mat-tab-link
routerLink="licenseProfile"
routerLinkActive="is-active"
>
{{ tag.tag }}
</mat-chip-option>
</mat-chip-set>
</div>
<mat-divider></mat-divider>
<div>
<h6 class="sectiontitle5">
Other {{ data.solution?.modelTypeName }} Models
</h6>
<span
class="tab_license"
[ngClass]="
isActive(
'/marketSolutions/model-details/' +
solutionId +
'/' +
revisionId +
'/licenseProfile'
)
? 'tab-license-profile-is-active'
: 'tab-license-profile-not-active'
"
></span
><span class="tab-box"> License profile</span></a
>
<a mat-tab-link routerLink="modelSignature" routerLinkActive="is-active"
><mat-icon fontIcon="sync_alt"></mat-icon
><span class="tab-box">Signature</span></a
>
<a mat-tab-link routerLink="modelDocuments" routerLinkActive="is-active"
><mat-icon fontIcon="content_copy"></mat-icon
><span class="tab-box">Documents</span></a
>
<a mat-tab-link routerLink="modelArtifacts" routerLinkActive="is-active"
><mat-icon fontIcon="history"></mat-icon
><span class="tab-box">Model artifacts</span></a
>
<a mat-tab-link routerLink="modelAuthor" routerLinkActive="is-active">
<span
class="tab-icon"
[ngClass]="
isActive(
'/marketSolutions/model-details/' +
solutionId +
'/' +
revisionId +
'/modelAuthor'
)
? 'tab-author_details-is-active'
: 'tab-author_details-not-active'
"
>
</span>
<span class="tab-box author-publisher-text">
<span>Author</span>
<span>/</span>
<span>Publisher details</span>
</span>
</a>
</nav>
<mat-tab-nav-panel #tabPanel></mat-tab-nav-panel>
<mat-divider></mat-divider>
<a class="text-small pull-right show-all" (click)="onClickShowAll()"
>Show all</a
>
<div>
<div class="md-list-container1">
<div
*ngFor="let val of data.relatedSolutions | slice: 0 : 5"
class="list-item list-container"
<h6 class="sectiontitle4">
Tags<span
class="title-icons icon-tags"
alt="Tags"
title="Tags"
></span>
</h6>
<mat-chip-set class="chip-set-tags" aria-label="Tags selection">
<mat-chip-option
*ngFor="let tag of data.solution.solutionTagList"
color="primary"
class="chips-width"
[matTooltip]="tag.tag"
>
<ul
class="model-list go-to-related-solutions-ul"
(click)="
goToRelatedSolutions(val.solutionId, val.latestRevisionId)
"
{{ tag.tag }}
</mat-chip-option>
</mat-chip-set>
</div>
<mat-divider></mat-divider>
<div>
<h6 class="sectiontitle5">
Other {{ data.solution?.modelTypeName }} Models
</h6>
<mat-divider></mat-divider>
<a class="text-small pull-right show-all" (click)="onClickShowAll()"
>Show all</a
>
<div>
<div class="md-list-container1">
<div
*ngFor="let val of data.relatedSolutions | slice: 0 : 5"
class="list-item list-container"
>
<li>
<img
src="../../../assets/images/solution2.jpg"
alt=""
(click)="
goToRelatedSolutions(val.solutionId, val.latestRevisionId)
"
title="solution"
/>
</li>
<li>
<label
class="rel-title"
(click)="
goToRelatedSolutions(val.solutionId, val.latestRevisionId)
"
>{{ val.name.toString().split("_").join(" ") }}</label
>
<span class="rating">
<span>
<i
class="material-icons fa fa-star"
[ngClass]="{
'fa-star1':
val.solutionRatingAvg == null ||
val.solutionRatingAvg < 1
}"
></i>
</span>
<span>
<i
class="material-icons fa fa-star"
[ngClass]="{ 'fa-star1': val.solutionRatingAvg < 2 }"
></i>
</span>
<span>
<i
class="material-icons fa fa-star"
[ngClass]="{ 'fa-star1': val.solutionRatingAvg < 3 }"
></i>
</span>
<span>
<i
class="material-icons fa fa-star"
[ngClass]="{ 'fa-star1': val.solutionRatingAvg < 4 }"
></i>
</span>
<span>
<i
class="material-icons fa fa-star"
[ngClass]="{ 'fa-star1': val.solutionRatingAvg < 5 }"
></i>
</span>
</span>
<label class="iconcontainer">
<span class="iconspan1">
<span
class="statistics-icons icon-chat"
alt="Comment"
title="Comment"
></span>
0
</span>
<span class="iconspan1">
<span
class="statistics-icons icon-view"
alt="View"
title="View"
></span>
{{ val.viewCount }}
</span>
<span class="iconspan1">
<span
class="statistics-icons icon-download"
alt="Download"
title="Download"
></span>
{{ val.downloadCount }}
<ul
class="model-list go-to-related-solutions-ul"
(click)="
goToRelatedSolutions(val.solutionId, val.latestRevisionId)
"
>
<li>
<img
src="../../../assets/images/solution2.jpg"
alt=""
(click)="
goToRelatedSolutions(val.solutionId, val.latestRevisionId)
"
title="solution"
/>
</li>
<li>
<label
class="rel-title"
(click)="
goToRelatedSolutions(val.solutionId, val.latestRevisionId)
"
>{{ val.name.toString().split("_").join(" ") }}</label
>
<span class="rating">
<span>
<i
class="material-icons fa fa-star"
[ngClass]="{
'fa-star1':
val.solutionRatingAvg == null ||
val.solutionRatingAvg < 1
}"
></i>
</span>
<span>
<i
class="material-icons fa fa-star"
[ngClass]="{ 'fa-star1': val.solutionRatingAvg < 2 }"
></i>
</span>
<span>
<i
class="material-icons fa fa-star"
[ngClass]="{ 'fa-star1': val.solutionRatingAvg < 3 }"
></i>
</span>
<span>
<i
class="material-icons fa fa-star"
[ngClass]="{ 'fa-star1': val.solutionRatingAvg < 4 }"
></i>
</span>
<span>
<i
class="material-icons fa fa-star"
[ngClass]="{ 'fa-star1': val.solutionRatingAvg < 5 }"
></i>
</span>
</span>
</label>
</li>
</ul>
<label class="iconcontainer">
<span class="iconspan1">
<span
class="statistics-icons icon-chat"
alt="Comment"
title="Comment"
></span>
0
</span>
<span class="iconspan1">
<span
class="statistics-icons icon-view"
alt="View"
title="View"
></span>
{{ val.viewCount }}
</span>
<span class="iconspan1">
<span
class="statistics-icons icon-download"
alt="Download"
title="Download"
></span>
{{ val.downloadCount }}
</span>
</label>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</mat-sidenav>
<mat-sidenav-content>
<router-outlet></router-outlet>
<gp-rate-model-details
[solution]="data.solution"
[allUserRatings]="allRatings"
[averageRatings]="averageRatings"
[totalRatingsCount]="allRatings.length"
[solutionId]="data.solutionId"
[solutionRating]="(rating$ | async)!"
(updateRating)="updateRating()"
[totalCommentCount]="data.comments.response_body.content.length"
[ratingCounts]="ratingCounts"
[perRatingCounts]="perRatingCounts"
[userId]="(userId$ | async)!"
[revisionId]="revisionId"
[comments]="comments"
[firstName]="firstName"
[lastName]="lastName"
(createComment)="createComment($event)"
(deleteComment)="deleteComment($event)"
(editComment)="editComment($event)"
(replyToComment)="createOrReplyToComment($event)"
></gp-rate-model-details> </mat-sidenav-content
></mat-sidenav-container>
<gp-footer></gp-footer>
</mat-sidenav>
<mat-sidenav-content class="page-wrap">
<main class="content-router-outlet"><router-outlet></router-outlet></main>
<gp-rate-model-details
[solution]="data.solution"
[allUserRatings]="allRatings"
[averageRatings]="averageRatings"
[totalRatingsCount]="allRatings.length"
[solutionId]="data.solutionId"
[solutionRating]="(rating$ | async)!"
(updateRating)="updateRating()"
[totalCommentCount]="data.comments.response_body.content.length"
[ratingCounts]="ratingCounts"
[perRatingCounts]="perRatingCounts"
[userId]="(userId$ | async)!"
[revisionId]="revisionId"
[comments]="comments"
[firstName]="firstName"
[lastName]="lastName"
(createComment)="createComment($event)"
(deleteComment)="deleteComment($event)"
(editComment)="editComment($event)"
(replyToComment)="createOrReplyToComment($event)"
></gp-rate-model-details> </mat-sidenav-content
></mat-sidenav-container>
</div>
src/app/features/model-details/model-details.component.scss
+ 20
− 1
View file @ 52f12349
......@@ -5,6 +5,21 @@
background-color: white;
}
.page-wrap {
display: flex !important;
flex-direction: column !important;
min-height: 100vh !important;
}
.content-router-outlet {
flex: 1;
}
// content height
::ng-deep.mat-drawer-content {
height: 89.2% !important;
}
.pageheadsection {
background: #fff;
box-shadow: 0px 1px 1px 1px rgba(0, 0, 0, 0.1);
......@@ -430,7 +445,6 @@ ul {
}
mat-sidenav-container {
height: calc(100% - 64px);
overflow: hidden !important;
}
......@@ -438,6 +452,11 @@ mat-sidenav {
background: #f1f1f1;
width: 250px !important;
overflow: hidden !important;
height: 100% !important;
}
mat-sidenav-content {
overflow: hidden;
}
::ng-deep .mat-drawer-inner-container {
......
src/app/shared/components/model-management/model-management.component.html
+ 6
− 3
View file @ 52f12349
......@@ -60,7 +60,7 @@
</div>
<mat-sidenav-container>
<mat-sidenav mode="side" opened>
<mat-sidenav mode="side" opened #sidenav>
<div class="workflow-left-header workflow-header">MANAGEMENT OPTIONS</div>
<div
*ngIf="selectedRevision$ | async as selectedRevision"
......@@ -139,6 +139,9 @@
</nav>
<mat-tab-nav-panel #tabPanel></mat-tab-nav-panel>
</mat-sidenav>
<mat-sidenav-content> <router-outlet></router-outlet></mat-sidenav-content
></mat-sidenav-container>
<mat-sidenav-content class="page-wrap"
><main class="content-router-outlet">
<router-outlet></router-outlet></main
></mat-sidenav-content>
</mat-sidenav-container>
</div>
src/app/shared/components/model-management/model-management.component.scss
+ 14
− 2
View file @ 52f12349
......@@ -2,8 +2,20 @@
padding: 24px;
}
.page-wrap {
display: flex !important;
flex-direction: column !important;
min-height: 100vh !important;
}
.content-router-outlet {
flex: 1;
}
::ng-deep.mat-drawer-content {
height: 83.5% !important;
}
mat-sidenav-container {
height: calc(100% - 64px);
overflow: hidden !important;
}
......@@ -11,10 +23,10 @@ mat-sidenav {
background: #f1f1f1;
width: 250px !important;
overflow: hidden !important;
height: 100% !important;
}
mat-sidenav-content {
height: 87vh;
overflow: hidden;
}
::ng-deep .mat-drawer-inner-container {
......
src/environments/environment.ts
+ 1
− 1
View file @ 52f12349
......@@ -2,7 +2,7 @@ export const environment = {
// local with session
production: false,
skipAuth: false,
apiBackendURL: 'https://dev02.ki-lab.nrw',
apiBackendURL: 'https://aiexp-dev.ai4europe.eu',
isDebugMode: true,
logging: {
level: {
......
src/styles.scss
+ 1
− 0
View file @ 52f12349
......@@ -12,6 +12,7 @@
html,
body {
overflow: hidden;
width: 100%;
height: 100%;
margin: 0;
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment

Copyright © Eclipse Foundation, Inc. All Rights Reserved.     Privacy Policy | Terms of Use | Copyright Agent