Skip to content

Commit a72cd03

Browse files
4manasamanasatumms2021389
authored
Added QuickLinks component for new mediaco WSS portal (#602)
* Added QuickLinks component for new mediaco WSS portal * updated as per comments * feat: add configProps input to BannerComponent and update QuickCreate component for image path handling * refactor: remove unused FooterComponent import from AppShellComponent --------- Co-authored-by: manasa <[email protected]> Co-authored-by: Siva Rama Krishna <[email protected]>
1 parent a1e259a commit a72cd03

17 files changed

+475
-8
lines changed

‎src/app/_samples/mediaco/components/app-shell/app-shell.component.ts‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@ import { Component, OnInit, Input, NgZone, forwardRef, OnDestroy } from '@angula
22
import { CommonModule } from '@angular/common';
33
import { MatSnackBarModule, MatSnackBar } from '@angular/material/snack-bar';
44
import { Subscription } from 'rxjs';
5-
import { FooterComponent } from '../footer/footer.component';
65
import { AngularPConnectData, AngularPConnectService, Utils } from '@pega/angular-sdk-components';
76
import { ErrorMessagesService } from '@pega/angular-sdk-components';
87
import { ComponentMapperComponent } from '@pega/angular-sdk-components';
@@ -32,7 +31,7 @@ interface AppShellProps {
3231
selector: 'app-app-shell',
3332
templateUrl: './app-shell.component.html',
3433
styleUrls: ['./app-shell.component.scss'],
35-
imports: [CommonModule, MatSnackBarModule, FooterComponent, forwardRef(() => ComponentMapperComponent)]
34+
imports: [CommonModule, MatSnackBarModule, forwardRef(() => ComponentMapperComponent)]
3635
})
3736
export class AppShellComponent implements OnInit, OnDestroy {
3837
@Input() pConn$: typeof PConnect;

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ export class BannerComponent {
1414
@Input() formGroup$: FormGroup;
1515

1616
@Input() arChildren$: any[];
17+
@Input() configProps$: any;
1718
@Input() title: string;
1819
@Input() message: any;
1920
@Input() backgroundImage: string;

‎src/app/_samples/mediaco/components/quick-create/config-ext.json‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
{
2+
"name": "QuickCreate",
3+
"label": "Quick create",
4+
"description": "Quick create widget",
5+
"type": "Widget",
6+
"subtype": "PAGE",
7+
"properties": [],
8+
"defaultConfig": {}
9+
}

‎src/app/_samples/mediaco/components/quick-create/quick-create.component.html‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
<div class="main-container">
2+
<div class="content-wrapper">
3+
<div class="section-header">
4+
<div class="title-group">
5+
<h3>Get started</h3>
6+
<div class="active-line"></div>
7+
</div>
8+
</div>
9+
<div class="masonry-wrapper">
10+
<!-- Left Column -->
11+
<div class="masonry-column">
12+
<ng-container *ngFor="let card of cases$; let i = index">
13+
<ng-container *ngIf="i % 2 === 0">
14+
<ng-container *ngTemplateOutlet="cardTemplate; context: { $implicit: card }"></ng-container>
15+
</ng-container>
16+
</ng-container>
17+
</div>
18+
19+
<!-- Right Column -->
20+
<div class="masonry-column">
21+
<ng-container *ngFor="let card of cases$; let i = index">
22+
<ng-container *ngIf="i % 2 === 1">
23+
<ng-container *ngTemplateOutlet="cardTemplate; context: { $implicit: card }"></ng-container>
24+
</ng-container>
25+
</ng-container>
26+
</div>
27+
</div>
28+
</div>
29+
</div>
30+
31+
<ng-template #cardTemplate let-card>
32+
<div class="card">
33+
<div class="card-header" [ngClass]="card.bgClass">
34+
<div class="watermark">
35+
<img class="material-icons" *ngIf="card.icon" [src]="getImagePath(card.icon)" />
36+
</div>
37+
<div class="icon-box" [ngStyle]="{ 'background-image': card.gradient }">
38+
<img *ngIf="card.icon" class="quick-link-icon" [src]="getImagePath(card.icon)" />
39+
</div>
40+
</div>
41+
42+
<div class="card-body">
43+
<h4 class="title">{{ card.title }}</h4>
44+
<p style="font-size: 14px">{{ card.description }}</p>
45+
<button class="action-btn" (click)="card.onClick()">
46+
Get Started
47+
<span class="material-icons arrow-icon">arrow_forward</span>
48+
</button>
49+
</div>
50+
</div>
51+
</ng-template>

‎src/app/_samples/mediaco/components/quick-create/quick-create.component.scss‎

Lines changed: 196 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,196 @@
1+
$gap-size: 16px;
2+
$radius: 16px;
3+
$primary-purple: #9c27b0;
4+
$text-dark: #2c2c2c;
5+
// --- Layout Styles ---
6+
.main-container {
7+
padding: 40px;
8+
background-color: #ffffff;
9+
min-height: 100vh;
10+
}
11+
12+
.content-wrapper {
13+
width: 100%;
14+
max-width: 1000px;
15+
display: flex;
16+
flex-direction: column;
17+
}
18+
19+
.section-header {
20+
display: flex;
21+
margin-bottom: 32px;
22+
padding: 0 4px;
23+
24+
.title-group {
25+
h3 {
26+
font-size: 22px;
27+
font-weight: 400;
28+
color: $text-dark;
29+
margin: 0 0 4px 0;
30+
}
31+
32+
.active-line {
33+
height: 4px;
34+
background-color: $primary-purple;
35+
width: 100%;
36+
border-radius: 2px;
37+
}
38+
}
39+
}
40+
41+
.title {
42+
margin: 0 0 16px 0;
43+
color: #1d1b20;
44+
}
45+
46+
.masonry-wrapper {
47+
display: flex;
48+
flex-direction: column;
49+
gap: $gap-size;
50+
width: 100%;
51+
max-width: 1100px;
52+
53+
@media (min-width: 768px) {
54+
flex-direction: row;
55+
align-items: flex-start;
56+
}
57+
}
58+
59+
.masonry-column {
60+
display: flex;
61+
flex-direction: column;
62+
gap: $gap-size;
63+
flex: 1;
64+
width: 100%;
65+
}
66+
67+
// --- Card Styles ---
68+
.card {
69+
background: #fff;
70+
border-radius: $radius;
71+
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
72+
border: 1px solid rgba(0, 0, 0, 0.05);
73+
overflow: hidden;
74+
display: flex;
75+
flex-direction: column;
76+
transition:
77+
transform 0.2s ease,
78+
box-shadow 0.2s ease;
79+
80+
&:hover {
81+
transform: translateY(-4px);
82+
box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12);
83+
}
84+
}
85+
86+
.card-header {
87+
height: 140px;
88+
display: flex;
89+
justify-content: center;
90+
align-items: center;
91+
position: relative;
92+
overflow: hidden;
93+
border-radius: 0px 0px 16px 16px;
94+
95+
.watermark {
96+
position: absolute;
97+
opacity: 0.1;
98+
transform: rotate(-15deg) scale(4);
99+
pointer-events: none;
100+
transform: rotate(45deg) scale(8);
101+
102+
.material-icons {
103+
color: #fff;
104+
height: 48px;
105+
filter: brightness(0) saturate(100%) invert(100%);
106+
width: 48px;
107+
}
108+
}
109+
110+
.icon-box {
111+
width: 80px;
112+
height: 80px;
113+
background: rgba(255, 255, 255, 0.25);
114+
backdrop-filter: blur(4px);
115+
border-radius: 16px;
116+
display: flex;
117+
align-items: center;
118+
justify-content: center;
119+
z-index: 1;
120+
box-shadow: 0 8px 32px rgba(255, 255, 255, 0.4);
121+
border: 1px solid rgba(255, 255, 255, 0.3);
122+
transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
123+
124+
.material-icons {
125+
color: #fff;
126+
font-size: 36px;
127+
}
128+
}
129+
}
130+
131+
.card-body {
132+
padding: 16px;
133+
display: flex;
134+
flex-direction: column;
135+
align-items: flex-start;
136+
137+
h4 {
138+
margin: 0 0 10px;
139+
font-size: 16px;
140+
font-weight: 500;
141+
line-height: 24px;
142+
color: #1a1a1a;
143+
}
144+
145+
p {
146+
margin: 0 0 16px;
147+
color: #555;
148+
}
149+
150+
.action-btn {
151+
display: inline-flex;
152+
align-items: center;
153+
gap: 5px;
154+
padding: 10px 24px;
155+
border-radius: 30px;
156+
background: transparent;
157+
color: #a83fa1;
158+
font-weight: 600;
159+
font-size: 0.9rem;
160+
cursor: pointer;
161+
transition: all 0.2s;
162+
border: 1.5px solid #a83fa1;
163+
164+
.arrow-icon {
165+
font-size: 18px;
166+
}
167+
}
168+
}
169+
170+
.icon-box:hover {
171+
transform: scale(1.2) rotateZ(10deg);
172+
}
173+
174+
.bg-purple {
175+
background: linear-gradient(135deg, rgb(184, 167, 212) 0%, rgb(212, 199, 232) 100%);
176+
}
177+
.bg-pink {
178+
background: linear-gradient(135deg, rgb(232, 168, 212) 0%, rgb(240, 199, 229) 100%);
179+
}
180+
.bg-cyan {
181+
background: linear-gradient(135deg, rgb(168, 212, 230) 0%, rgb(199, 229, 240) 100%);
182+
}
183+
.bg-orange {
184+
background: linear-gradient(135deg, rgb(240, 196, 179) 0%, rgb(245, 217, 204) 100%);
185+
}
186+
.bg-magenta {
187+
background: linear-gradient(135deg, rgb(212, 168, 207) 0%, rgb(232, 199, 229) 100%);
188+
}
189+
.bg-light-purple {
190+
background: linear-gradient(135deg, rgb(208, 188, 255) 0%, rgb(229, 217, 247) 100%);
191+
}
192+
193+
.quick-link-icon {
194+
height: 45px;
195+
filter: brightness(0) saturate(100%) invert(100%);
196+
}

‎src/app/_samples/mediaco/components/quick-create/quick-create.component.spec.ts‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import { ComponentFixture, TestBed } from '@angular/core/testing';
2+
3+
import { QuickCreateComponent } from './quick-create.component';
4+
5+
describe('QuickCreateComponent', () => {
6+
let component: QuickCreateComponent;
7+
let fixture: ComponentFixture<QuickCreateComponent>;
8+
9+
beforeEach(async () => {
10+
await TestBed.configureTestingModule({
11+
declarations: [QuickCreateComponent]
12+
}).compileComponents();
13+
14+
fixture = TestBed.createComponent(QuickCreateComponent);
15+
component = fixture.componentInstance;
16+
fixture.detectChanges();
17+
});
18+
19+
it('should create', () => {
20+
expect(component).toBeTruthy();
21+
});
22+
});

0 commit comments

Comments
 (0)