#19: refactor code

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"

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

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>

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;
 }
- */

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>

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

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>

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

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">

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

src/app/shared/components/model-details-license-profile/model-details-license-profile.component.html

 <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

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

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

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

-<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

 .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

-<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

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

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

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