Skip to content

Commit 50a0cf2

Browse files
codehippie1codehippie1
committed
Event feed is restructured to look like console logs
1 parent 16c8d04 commit 50a0cf2

File tree

3 files changed

+152
-108
lines changed

3 files changed

+152
-108
lines changed

‎SampleApp/src/app/features/features.component.html‎

Lines changed: 23 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1194,26 +1194,9 @@ <h3>Using Convenience Configuration Objects</h3>
11941194
<!-- Event Feed Panel (Collapsible) -->
11951195
<mat-card class="feed-panel">
11961196
<mat-card-header>
1197-
<mat-card-title>Event Feed</mat-card-title>
1198-
<span class="spacer"></span>
1199-
<button
1200-
mat-stroked-button
1201-
color="primary"
1202-
(click)="feedPaused = !feedPaused"
1203-
>
1204-
{{ feedPaused ? "Resume" : "Pause" }}
1205-
</button>
1206-
<button
1207-
mat-stroked-button
1208-
(click)="eventFeed = []"
1209-
style="margin-left: 0.5rem"
1210-
>
1211-
Clear
1212-
</button>
1213-
</mat-card-header>
1214-
<mat-card-content>
1215-
<div class="feed-controls">
1216-
<mat-chip-listbox aria-label="Feed Filters">
1197+
<mat-card-title>
1198+
Event Feed
1199+
<mat-chip-listbox aria-label="Feed Filters" class="inline-chips">
12171200
<mat-chip-option
12181201
[selected]="feedFilter.size === 0"
12191202
(click)="feedFilter.clear()"
@@ -1265,16 +1248,33 @@ <h3>Using Convenience Configuration Objects</h3>
12651248
>Errors</mat-chip-option
12661249
>
12671250
</mat-chip-listbox>
1268-
</div>
1251+
</mat-card-title>
1252+
<span class="spacer"></span>
1253+
<button
1254+
mat-stroked-button
1255+
color="primary"
1256+
(click)="feedPaused = !feedPaused"
1257+
>
1258+
{{ feedPaused ? "Resume" : "Pause" }}
1259+
</button>
1260+
<button
1261+
mat-stroked-button
1262+
(click)="eventFeed = []"
1263+
style="margin-left: 0.5rem"
1264+
>
1265+
Clear
1266+
</button>
1267+
</mat-card-header>
1268+
<mat-card-content>
12691269
<div class="feed-list">
12701270
<div
12711271
class="feed-item"
12721272
*ngFor="let e of filteredEventFeed"
12731273
[attr.data-type]="e.type"
12741274
>
12751275
<span class="feed-time">{{ e.time }}</span>
1276-
<span class="feed-type">{{ e.type }}</span>
1277-
<span class="feed-data" *ngIf="e.data as d">{{ d | json }}</span>
1276+
<span class="feed-type" [ngClass]="getEventTypeClass(e.type)">{{ e.type }}</span>
1277+
<span class="feed-data" *ngIf="e.data">{{ formatJsonCompact(e.data) }}</span>
12781278
</div>
12791279
</div>
12801280
</mat-card-content>

‎SampleApp/src/app/features/features.component.scss‎

Lines changed: 93 additions & 85 deletions
Original file line numberDiff line numberDiff line change
@@ -70,7 +70,7 @@
7070

7171
.feed-panel {
7272
grid-column: 1 / -1;
73-
max-height: 400px;
73+
max-height: 250px;
7474
display: flex;
7575
flex-direction: column;
7676
background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
@@ -90,6 +90,38 @@
9090
font-weight: 600;
9191
font-size: 1.1rem;
9292
margin: 0;
93+
display: flex;
94+
align-items: center;
95+
gap: 1rem;
96+
97+
.inline-chips {
98+
display: inline-flex;
99+
flex-wrap: wrap;
100+
gap: 0.5rem;
101+
margin-left: 0.5rem;
102+
103+
::ng-deep mat-chip-option {
104+
background: rgba(255, 255, 255, 0.2);
105+
color: white;
106+
border: 1px solid rgba(255, 255, 255, 0.3);
107+
border-radius: 16px;
108+
font-size: 0.75rem;
109+
font-weight: 500;
110+
padding: 0.15rem 0.6rem;
111+
transition: all 0.2s ease;
112+
min-height: 24px;
113+
114+
&:hover {
115+
background: rgba(255, 255, 255, 0.3);
116+
}
117+
118+
&.mat-mdc-chip-selected {
119+
background: #ffc107;
120+
color: #000;
121+
border-color: #ffc107;
122+
}
123+
}
124+
}
93125
}
94126

95127
.spacer {
@@ -169,125 +201,101 @@
169201

170202
.feed-list {
171203
flex: 1 1 auto;
172-
min-height: 200px;
173-
max-height: 300px;
204+
min-height: 150px;
205+
max-height: 180px;
174206
overflow-y: auto;
175207
overflow-x: hidden;
176208
display: flex;
177209
flex-direction: column;
178-
gap: 0.5rem;
179-
font-family:
180-
"SF Mono", "Monaco", "Inconsolata", "Roboto Mono", "Source Code Pro",
181-
monospace;
210+
gap: 0;
211+
font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
182212
font-size: 13px;
183-
line-height: 1.4;
184-
background: #f8f9fa;
185-
border: 1px solid #dee2e6;
186-
border-radius: 8px;
187-
padding: 1rem;
188-
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05);
213+
line-height: 1.5;
214+
background: #1e1e1e;
215+
color: #d4d4d4;
216+
border: 1px solid #3e3e3e;
217+
border-radius: 4px;
218+
padding: 0.5rem;
189219

190220
/* Custom scrollbar */
191221
&::-webkit-scrollbar {
192-
width: 8px;
222+
width: 10px;
193223
}
194224

195225
&::-webkit-scrollbar-track {
196-
background: #e9ecef;
197-
border-radius: 4px;
226+
background: #252526;
198227
}
199228

200229
&::-webkit-scrollbar-thumb {
201-
background: #adb5bd;
202-
border-radius: 4px;
203-
230+
background: #424242;
231+
204232
&:hover {
205-
background: #6c757d;
233+
background: #4e4e4e;
206234
}
207235
}
208236
}
209237

210238
.feed-item {
211-
display: grid;
212-
grid-template-columns: 80px 160px 1fr;
213-
gap: 1rem;
214-
align-items: center;
215-
padding: 0.5rem 0.75rem;
216-
background: rgba(0, 0, 0, 0.02);
217-
border-radius: 6px;
218-
border-left: 3px solid transparent;
219-
transition: all 0.2s ease;
220-
min-height: 40px;
239+
display: flex;
240+
gap: 0.75rem;
241+
align-items: flex-start;
242+
padding: 0.25rem 0;
221243

222244
&:hover {
223-
background: rgba(0, 0, 0, 0.05);
224-
border-left-color: #007bff;
225-
transform: translateX(2px);
226-
}
227-
228-
/* Event type specific colors */
229-
&[data-type*="documentLoad"] {
230-
border-left-color: #28a745;
231-
}
232-
233-
&[data-type*="pageRendered"] {
234-
border-left-color: #17a2b8;
235-
}
236-
237-
&[data-type*="find"] {
238-
border-left-color: #ffc107;
239-
}
240-
241-
&[data-type*="outlineLoaded"] {
242-
border-left-color: #6f42c1;
243-
}
244-
245-
&[data-type*="documentError"] {
246-
border-left-color: #dc3545;
247-
background: rgba(220, 53, 69, 0.1);
245+
background: rgba(255, 255, 255, 0.03);
248246
}
249247
}
250248

251249
.feed-time {
252-
color: #6c757d;
253-
font-weight: 500;
254-
font-size: 12px;
255-
opacity: 0.8;
250+
color: #858585;
251+
font-weight: 400;
252+
font-size: 13px;
256253
white-space: nowrap;
254+
flex-shrink: 0;
257255
}
258256

259257
.feed-type {
260258
font-weight: 600;
261-
font-size: 12px;
262-
text-transform: uppercase;
263-
letter-spacing: 0.5px;
264-
padding: 0.25rem 0.5rem;
265-
border-radius: 4px;
266-
background: rgba(0, 0, 0, 0.1);
267-
color: #495057;
259+
font-size: 13px;
268260
white-space: nowrap;
269-
text-align: center;
270-
align-self: center;
271-
justify-self: center;
261+
flex-shrink: 0;
262+
width: 200px;
263+
display: inline-block;
264+
}
265+
266+
// Event category colors
267+
.event-document {
268+
color: #4ec9b0;
269+
}
270+
271+
.event-render {
272+
color: #569cd6;
273+
}
274+
275+
.event-find {
276+
color: #dcdcaa;
277+
}
278+
279+
.event-outline {
280+
color: #c586c0;
281+
}
282+
283+
.event-error {
284+
color: #f48771;
285+
}
286+
287+
.event-default {
288+
color: #858585;
272289
}
273290

274291
.feed-data {
275-
color: #495057;
276-
font-size: 12px;
277-
word-break: break-all;
278-
white-space: nowrap;
279-
overflow: hidden;
280-
text-overflow: ellipsis;
281-
background: rgba(0, 0, 0, 0.05);
282-
padding: 0.5rem;
283-
border-radius: 4px;
284-
border: 1px solid rgba(0, 0, 0, 0.1);
285-
font-family:
286-
"SF Mono", "Monaco", "Inconsolata", "Roboto Mono", "Source Code Pro",
287-
monospace;
288-
max-width: 100%;
289-
display: block;
290-
align-self: center;
292+
color: #ce9178;
293+
font-size: 13px;
294+
flex: 1;
295+
font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
296+
word-break: break-word;
297+
white-space: pre-wrap;
298+
overflow-wrap: break-word;
291299
}
292300
}
293301
}

‎SampleApp/src/app/features/features.component.ts‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -159,6 +159,42 @@ export class FeaturesComponent implements OnInit {
159159
if (this.eventFeed.length > 200) this.eventFeed.pop();
160160
}
161161

162+
// Format JSON as single line for console-like display
163+
public formatJsonCompact(data: any): string {
164+
if (data === null || data === undefined) return '';
165+
try {
166+
return JSON.stringify(data);
167+
} catch (e) {
168+
return String(data);
169+
}
170+
}
171+
172+
// Get CSS class for event type based on category
173+
public getEventTypeClass(type: string): string {
174+
// Document events
175+
if (type.includes('document') || type.includes('metadata')) {
176+
return 'event-document';
177+
}
178+
// Render events
179+
if (type.includes('render') || type.includes('Rendered')) {
180+
return 'event-render';
181+
}
182+
// Find events
183+
if (type.includes('find') || type.includes('Find')) {
184+
return 'event-find';
185+
}
186+
// Outline events
187+
if (type.includes('outline') || type.includes('bookmark')) {
188+
return 'event-outline';
189+
}
190+
// Error events
191+
if (type.includes('error') || type.includes('Error')) {
192+
return 'event-error';
193+
}
194+
// Default
195+
return 'event-default';
196+
}
197+
162198
// Event tracking for demonstration
163199
public eventCounts = {
164200
documentLoad: 0,

0 commit comments

Comments
 (0)