Skip to content

Commit 73ea886

Browse files
SambhuPegatumms2021389
SambhuPega
and
tumms2021389
authored
Updated the files for the padding change and styles (#608)
* Updated the files for the padding change and styles * added changes to run OOTB Listview --------- Co-authored-by: tumms2021389 <[email protected]>
1 parent b5624ea commit 73ea886

File tree

5 files changed

+53
-56
lines changed

5 files changed

+53
-56
lines changed

‎src/app/_samples/mediaco/components/carousel/carousel.component.scss‎

Lines changed: 1 addition & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,3 @@
1-
:host {
2-
display: block;
3-
width: 100%;
4-
min-width: 0;
5-
max-width: 100vw;
6-
overflow: hidden;
7-
contain: content;
8-
}
9-
101
.carousel-host-container {
112
width: 100%;
123
position: relative;
@@ -34,13 +25,13 @@
3425
align-items: center;
3526
width: 100%;
3627
max-width: 100%;
37-
height: 400px;
3828
padding: 0;
3929
overflow-x: auto;
4030
overflow-y: hidden;
4131
scroll-behavior: auto;
4232
box-sizing: border-box;
4333
box-sizing: border-box;
34+
border-radius: 12px;
4435

4536
&::-webkit-scrollbar {
4637
display: none;

‎src/app/_samples/mediaco/components/carousel/carousel.component.ts‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,6 @@ import { MatButtonModule } from '@angular/material/button';
1616
import { MatCardModule } from '@angular/material/card';
1717
import { MatDialog } from '@angular/material/dialog';
1818
import { MatIconModule } from '@angular/material/icon';
19-
// import { GalleryGridComponent } from '../gallery-grid/gallery-grid.component';
2019

2120
@Component({
2221
selector: 'app-carousel',

‎src/app/_samples/mediaco/components/list-view/list-view.component.html‎

Lines changed: 35 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -1,49 +1,46 @@
1-
<div class="header-container">
2-
<div class="section-header">
3-
<div class="title-group">
4-
<h3>{{ title }}</h3>
5-
<div class="active-line"></div>
1+
<app-list-view *ngIf="isFromCaseView; else mediacoListView" [pConn$]="pConn$" [bInForm$]="bInForm$"></app-list-view>
2+
<ng-template #mediacoListView>
3+
<div class="header-container">
4+
<div class="section-header">
5+
<div class="title-group">
6+
<h3>{{ title }}</h3>
7+
<div class="active-line"></div>
8+
</div>
69
</div>
710
</div>
8-
</div>
9-
<div *ngIf="template === 'Table'">
10-
<div class="info-container">
11-
<div class="info-item" *ngFor="let item of sourceList; index as i">
12-
<div class="icon-wrapper" [ngClass]="'bg-' + i">
13-
<img *ngIf="item.icon" [src]="item.icon" class="icon-img" [ngClass]="'color-' + i" />
14-
<span *ngIf="!item.icon" class="icon-num" [ngClass]="'color-' + i">{{ item.number }}</span>
15-
</div>
11+
<div *ngIf="template === 'Table'">
12+
<div class="info-container">
13+
<div class="info-item" *ngFor="let item of sourceList; index as i">
14+
<div class="icon-wrapper" [ngClass]="'bg-' + i">
15+
<img *ngIf="item.icon" [src]="item.icon" class="icon-img" [ngClass]="'color-' + i" />
16+
<span *ngIf="!item.icon" class="icon-num" [ngClass]="'color-' + i">{{ item.number }}</span>
17+
</div>
1618

17-
<div class="content">
18-
<div class="title-row">
19-
<span class="title">{{ item.title }}</span>
20-
<span class="dot" *ngIf="item.title_subtext"></span>
21-
<span *ngIf="item.title_subtext" class="sub-text">{{ item.title_subtext }}</span>
19+
<div class="content">
20+
<div class="title-row">
21+
<span class="title">{{ item.title }}</span>
22+
<span class="dot" *ngIf="item.title_subtext"></span>
23+
<span *ngIf="item.title_subtext" class="sub-text">{{ item.title_subtext }}</span>
24+
</div>
25+
<div class="description">
26+
<span>{{ item.description }}</span>
27+
<span class="dot" *ngIf="item.description_subtext"></span>
28+
<span *ngIf="item.description_subtext" class="sub-text">{{ item.description_subtext }}</span>
29+
</div>
2230
</div>
23-
<div class="description">
24-
<span>{{ item.description }}</span>
25-
<span class="dot" *ngIf="item.description_subtext"></span>
26-
<span *ngIf="item.description_subtext" class="sub-text">{{ item.description_subtext }}</span>
31+
<div class="extra-content" *ngIf="item.rating" style="margin-left: auto">
32+
<img [src]="utils.getImageSrc('star-solid', utils.getSDKStaticContentUrl())" class="star" />&nbsp;
33+
{{ item.rating }}
2734
</div>
2835
</div>
29-
<div class="extra-content" *ngIf="item.rating" style="margin-left: auto">
30-
<img [src]="utils.getImageSrc('star-solid', utils.getSDKStaticContentUrl())" class="star" />&nbsp;
31-
{{ item.rating }}
32-
</div>
3336
</div>
3437
</div>
35-
36-
<div class="text-right">
37-
<button mat-button color="primary" *ngIf="referenceDataPage !== 'D_TrendingItemsList' && template === 'Table'" (click)="openShowAll()">
38-
Show All
39-
</button>
40-
</div>
41-
</div>
42-
<div *ngIf="template === 'Gallery'">
43-
<div class="carousel-constraint-wrapper">
44-
<app-carousel *ngIf="sourceList" [data]="sourceList"></app-carousel>
38+
<div *ngIf="template === 'Gallery'">
39+
<div class="carousel-constraint-wrapper">
40+
<app-carousel *ngIf="sourceList" [data]="sourceList"></app-carousel>
41+
</div>
4542
</div>
4643
<div class="carousel-footer">
47-
<button mat-button color="primary" (click)="openShowAll()">Show All</button>
44+
<a mat-button color="primary" *ngIf="referenceDataPage !== 'D_TrendingItemsList'" (click)="openShowAll()">Show All</a>
4845
</div>
49-
</div>
46+
</ng-template>

‎src/app/_samples/mediaco/components/list-view/list-view.component.scss‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -203,6 +203,14 @@ $primary-purple: #9c27b0;
203203
display: flex;
204204
width: 100%;
205205
justify-content: flex-end;
206-
padding: 0 16px 10px 16px;
206+
padding: 10px 0 10px 16px; /* Right padding removed */
207207
box-sizing: border-box;
208+
text-decoration: none;
209+
color: rgb(103, 80, 164); /* Color updated */
210+
}
211+
212+
/* This applies when you hover your mouse over the link */
213+
.carousel-footer:hover {
214+
cursor: pointer;
215+
text-decoration: underline;
208216
}

‎src/app/_samples/mediaco/components/list-view/list-view.component.ts‎

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,9 @@
11
import { Component, OnInit, Input } from '@angular/core';
22
import { CommonModule } from '@angular/common';
3-
// import { Utils } from '@pega/angular-sdk-components/src/public-api';
4-
import { Utils } from '@pega/angular-sdk-components';
3+
import { Utils, ListViewComponent as OOTBListViewComponent } from '@pega/angular-sdk-components';
54
import { CarouselComponent } from '../carousel/carousel.component';
65
import { GalleryGridComponent } from '../gallery-grid/gallery-grid.component';
76
import { MatDialog } from '@angular/material/dialog';
8-
import { MatButton } from '@angular/material/button';
97

108
interface ListViewProps {
119
inheritedProps: any;
@@ -30,16 +28,16 @@ interface ListViewProps {
3028
}
3129

3230
@Component({
33-
selector: 'app-list-view',
34-
imports: [CommonModule, CarouselComponent, MatButton],
31+
selector: 'mediaco-list-view',
32+
imports: [CommonModule, CarouselComponent, OOTBListViewComponent],
3533
templateUrl: './list-view.component.html',
3634
styleUrl: './list-view.component.scss',
3735
providers: [Utils]
3836
})
3937
export class ListViewComponent implements OnInit {
4038
@Input() pConn$: typeof PConnect;
4139
@Input() bInForm$ = true;
42-
@Input() payload;
40+
4341
configProps$: ListViewProps;
4442
template: string;
4543
sourceList: any[];
@@ -114,6 +112,10 @@ export class ListViewComponent implements OnInit {
114112
}
115113
}
116114

115+
get isFromCaseView() {
116+
return !['D_AccountHistoryList', 'D_TrendingItemsList', 'D_CarouselitemList'].includes(this.referenceDataPage);
117+
}
118+
117119
getIcon(activityType: string): string {
118120
switch (activityType) {
119121
case 'Plan Upgrade':

0 commit comments

Comments
 (0)