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
Hide whitespace changes
Inline Side-by-side
Showing
with 293 additions and 181 deletions
src/app/shared/components/filters/filters.component.html
+ 3
− 3
View file @ e800d2b7
......@@ -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"
......
src/app/shared/components/filters/filters.component.scss
+ 8
− 0
View file @ e800d2b7
......@@ -102,3 +102,11 @@
no-repeat 93% center !important;
width: calc(100%);
}
.mat-label-container {
margin: 14px;
}
.chip-set {
padding: 8px;
}
src/app/shared/components/home/home.component.html
+ 2
− 3
View file @ e800d2b7
......@@ -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>
......
src/app/shared/components/home/home.component.scss
+ 6
− 21
View file @ e800d2b7
......@@ -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;
}
*/
src/app/shared/components/model-details-artifacts/model-details-artifacts.component.html
+ 4
− 16
View file @ e800d2b7
......@@ -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>
......
src/app/shared/components/model-details-artifacts/model-details-artifacts.component.scss
+ 8
− 0
View file @ e800d2b7
......@@ -54,3 +54,11 @@
cursor: not-allowed;
background: #efefef;
}
.font-weight500 {
font-weight: 500;
}
.table-container {
margin-left: 20px;
}
src/app/shared/components/model-details-author-publisher/model-details-author-publisher.component.html
+ 3
− 11
View file @ e800d2b7
......@@ -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>
......
src/app/shared/components/model-details-author-publisher/model-details-author-publisher.component.scss
+ 8
− 0
View file @ e800d2b7
......@@ -31,3 +31,11 @@
color: #671c9d;
background: #e8e5ec !important;
}
.table-container {
margin-left: 20px;
}
.font-weight500 {
font-weight: 500 !important;
}
src/app/shared/components/model-details-documents/model-details-documents.component.html
+ 1
− 1
View file @ e800d2b7
......@@ -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">
......
src/app/shared/components/model-details-documents/model-details-documents.component.scss
+ 4
− 0
View file @ e800d2b7
......@@ -31,3 +31,7 @@
color: #671c9d;
background: #e8e5ec !important;
}
.table-container {
margin-left: 20px;
}
src/app/shared/components/model-details-license-profile/model-details-license-profile.component.html
+ 6
− 10
View file @ e800d2b7
<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 }}
......
src/app/shared/components/model-details-license-profile/model-details-license-profile.component.scss
+ 19
− 0
View file @ e800d2b7
......@@ -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;
}
src/app/shared/components/model-details-signature/model-details-signature.component.html
+ 1
− 1
View file @ e800d2b7
......@@ -4,7 +4,7 @@
<h6 class="sectiontitle9">SIGNATURE</h6>
</div>
</div>
<div style="margin-left: 20px">
<div class="model-signature-content">
<pre>
{{ modelSignature }}
</pre>
......
src/app/shared/components/model-details-signature/model-details-signature.component.scss
+ 4
− 0
View file @ e800d2b7
......@@ -26,3 +26,7 @@
line-height: 30px;
padding: 0;
}
.model-signature-content {
margin-left: 20px;
}
src/app/shared/components/model-list/model-list.component.html
+ 10
− 13
View file @ e800d2b7
<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>
......
src/app/shared/components/model-list/model-list.component.scss
+ 46
− 0
View file @ e800d2b7
.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;
}
src/app/shared/components/model-management/model-management.component.html
+ 20
− 71
View file @ e800d2b7
<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 - &nbsp; </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>
......
src/app/shared/components/model-management/model-management.component.scss
+ 85
− 0
View file @ e800d2b7
......@@ -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;
}
src/app/shared/components/rate-model-details/rate-model-details.component.html
+ 14
− 28
View file @ e800d2b7
......@@ -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>
......
src/app/shared/components/rate-model-details/rate-model-details.component.scss
+ 41
− 3
View file @ e800d2b7
......@@ -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;
}
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment

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