@fuentis/phoenix-ui 0.0.9-alpha.149 → 0.0.9-alpha.150
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -305,14 +305,58 @@ class UserComponent {
|
|
|
305
305
|
@if(user.bindImageUrl){
|
|
306
306
|
<div
|
|
307
307
|
[style.background-image]="user.bindImageUrl"
|
|
308
|
-
class="
|
|
308
|
+
class="cover-image"
|
|
309
309
|
></div>
|
|
310
310
|
}@else {
|
|
311
311
|
<p-avatar [label]="user.imageUrl" shape="circle" />
|
|
312
312
|
}
|
|
313
313
|
</a>
|
|
314
314
|
<p-popover #op>
|
|
315
|
-
|
|
315
|
+
@if(user){
|
|
316
|
+
<div class="surface-0">
|
|
317
|
+
<div class="flex align-items-center ml-3">
|
|
318
|
+
@if(user?.bindImageUrl){
|
|
319
|
+
<div
|
|
320
|
+
[style.background-image]="user.bindImageUrl"
|
|
321
|
+
class="profile-image"
|
|
322
|
+
></div>
|
|
323
|
+
}@else {
|
|
324
|
+
<p-avatar [label]="user.imageUrl" shape="circle" />
|
|
325
|
+
}
|
|
326
|
+
<div class="p-3">
|
|
327
|
+
<div class="text-xl text-primary mb-2 cursor-pointer">
|
|
328
|
+
{{ user?.firstname }} {{ user?.lastname }}
|
|
329
|
+
</div>
|
|
330
|
+
<div>{{ user?.username }}</div>
|
|
331
|
+
<div>{{ user?.email }}</div>
|
|
332
|
+
</div>
|
|
333
|
+
<div
|
|
334
|
+
class="flex border-top-1 border-300 mt-2 pt-2 mx-3 surface-ground mb-2"
|
|
335
|
+
></div>
|
|
336
|
+
<div class="flex flex-row justify-content-between mt-2 pt-1">
|
|
337
|
+
<a
|
|
338
|
+
class="flex flex-row align-items-center cursor-pointer ml-2"
|
|
339
|
+
(click)="editSettings.emit()"
|
|
340
|
+
pRipple
|
|
341
|
+
>
|
|
342
|
+
<i class="pi pi-user-edit p-2" style="font-size: 1.5rem"></i>
|
|
343
|
+
<span>{{ 'ACTION.EDIT_SETTINGS' | translate }}</span>
|
|
344
|
+
</a>
|
|
345
|
+
|
|
346
|
+
<a
|
|
347
|
+
style="color: red"
|
|
348
|
+
class="flex flex-row align-items-center cursor-pointer mr-3"
|
|
349
|
+
(click)="logout.emit()"
|
|
350
|
+
pRipple
|
|
351
|
+
>
|
|
352
|
+
<i class="pi pi-power-off p-2"></i>
|
|
353
|
+
<span>{{ 'ACTION.LOGOUT' | translate }}</span>
|
|
354
|
+
</a>
|
|
355
|
+
</div>
|
|
356
|
+
</div>
|
|
357
|
+
</div>
|
|
358
|
+
}
|
|
359
|
+
<!-- <div class="flex gap-2 w-20rem">
|
|
316
360
|
@if(user.bindImageUrl){
|
|
317
361
|
<div
|
|
318
362
|
[style.background-image]="user.bindImageUrl"
|
|
@@ -323,32 +367,9 @@ class UserComponent {
|
|
|
323
367
|
<div class="text-sm mt-auto">{{ user.username }}</div>
|
|
324
368
|
<div class="text-sm">{{ user.email }}</div>
|
|
325
369
|
</div>
|
|
326
|
-
</div>
|
|
327
|
-
|
|
328
|
-
<div
|
|
329
|
-
class="border-top-1 border-300 flex flex-row justify-content-between mt-2 pt-2 mx-2"
|
|
330
|
-
>
|
|
331
|
-
<a
|
|
332
|
-
class="flex flex-row align-items-center cursor-pointer"
|
|
333
|
-
(click)="editSettings.emit()"
|
|
334
|
-
pRipple
|
|
335
|
-
>
|
|
336
|
-
<i class="pi pi-user-edit p-2" style="font-size: 1.5rem"></i>
|
|
337
|
-
<span>{{ 'ACTION.EDIT_SETTINGS' | translate }}</span>
|
|
338
|
-
</a>
|
|
339
|
-
|
|
340
|
-
<a
|
|
341
|
-
style="color: red"
|
|
342
|
-
class="flex flex-row align-items-center cursor-pointer"
|
|
343
|
-
(click)="logout.emit()"
|
|
344
|
-
pRipple
|
|
345
|
-
>
|
|
346
|
-
<i class="pi pi-power-off p-2"></i>
|
|
347
|
-
<span>{{ 'ACTION.LOGOUT' | translate }}</span>
|
|
348
|
-
</a>
|
|
349
|
-
</div>
|
|
370
|
+
</div> -->
|
|
350
371
|
</p-popover>
|
|
351
|
-
`, isInline: true, styles: [".profile-image{width:50px;height:50px;border-radius:50%;background-size:cover;background-position:center;background-repeat:no-repeat;cursor:pointer}\n"], dependencies: [{ kind: "component", type: Avatar, selector: "p-avatar", inputs: ["label", "icon", "image", "size", "shape", "style", "styleClass", "ariaLabel", "ariaLabelledBy"], outputs: ["onImageError"] }, { kind: "component", type: Popover, selector: "p-popover", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3$2.TranslatePipe, name: "translate" }] });
|
|
372
|
+
`, isInline: true, styles: [".profile-image{width:50px;height:50px;border-radius:50%;background-size:cover;background-position:center;background-repeat:no-repeat;cursor:pointer}.cover-image{width:35px;height:35px;border-radius:50%;background-size:cover;background-position:center;background-repeat:no-repeat;cursor:pointer}\n"], dependencies: [{ kind: "component", type: Avatar, selector: "p-avatar", inputs: ["label", "icon", "image", "size", "shape", "style", "styleClass", "ariaLabel", "ariaLabelledBy"], outputs: ["onImageError"] }, { kind: "component", type: Popover, selector: "p-popover", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3$2.TranslatePipe, name: "translate" }] });
|
|
352
373
|
}
|
|
353
374
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: UserComponent, decorators: [{
|
|
354
375
|
type: Component,
|
|
@@ -361,14 +382,58 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImpo
|
|
|
361
382
|
@if(user.bindImageUrl){
|
|
362
383
|
<div
|
|
363
384
|
[style.background-image]="user.bindImageUrl"
|
|
364
|
-
class="
|
|
385
|
+
class="cover-image"
|
|
365
386
|
></div>
|
|
366
387
|
}@else {
|
|
367
388
|
<p-avatar [label]="user.imageUrl" shape="circle" />
|
|
368
389
|
}
|
|
369
390
|
</a>
|
|
370
391
|
<p-popover #op>
|
|
371
|
-
|
|
392
|
+
@if(user){
|
|
393
|
+
<div class="surface-0">
|
|
394
|
+
<div class="flex align-items-center ml-3">
|
|
395
|
+
@if(user?.bindImageUrl){
|
|
396
|
+
<div
|
|
397
|
+
[style.background-image]="user.bindImageUrl"
|
|
398
|
+
class="profile-image"
|
|
399
|
+
></div>
|
|
400
|
+
}@else {
|
|
401
|
+
<p-avatar [label]="user.imageUrl" shape="circle" />
|
|
402
|
+
}
|
|
403
|
+
<div class="p-3">
|
|
404
|
+
<div class="text-xl text-primary mb-2 cursor-pointer">
|
|
405
|
+
{{ user?.firstname }} {{ user?.lastname }}
|
|
406
|
+
</div>
|
|
407
|
+
<div>{{ user?.username }}</div>
|
|
408
|
+
<div>{{ user?.email }}</div>
|
|
409
|
+
</div>
|
|
410
|
+
<div
|
|
411
|
+
class="flex border-top-1 border-300 mt-2 pt-2 mx-3 surface-ground mb-2"
|
|
412
|
+
></div>
|
|
413
|
+
<div class="flex flex-row justify-content-between mt-2 pt-1">
|
|
414
|
+
<a
|
|
415
|
+
class="flex flex-row align-items-center cursor-pointer ml-2"
|
|
416
|
+
(click)="editSettings.emit()"
|
|
417
|
+
pRipple
|
|
418
|
+
>
|
|
419
|
+
<i class="pi pi-user-edit p-2" style="font-size: 1.5rem"></i>
|
|
420
|
+
<span>{{ 'ACTION.EDIT_SETTINGS' | translate }}</span>
|
|
421
|
+
</a>
|
|
422
|
+
|
|
423
|
+
<a
|
|
424
|
+
style="color: red"
|
|
425
|
+
class="flex flex-row align-items-center cursor-pointer mr-3"
|
|
426
|
+
(click)="logout.emit()"
|
|
427
|
+
pRipple
|
|
428
|
+
>
|
|
429
|
+
<i class="pi pi-power-off p-2"></i>
|
|
430
|
+
<span>{{ 'ACTION.LOGOUT' | translate }}</span>
|
|
431
|
+
</a>
|
|
432
|
+
</div>
|
|
433
|
+
</div>
|
|
434
|
+
</div>
|
|
435
|
+
}
|
|
436
|
+
<!-- <div class="flex gap-2 w-20rem">
|
|
372
437
|
@if(user.bindImageUrl){
|
|
373
438
|
<div
|
|
374
439
|
[style.background-image]="user.bindImageUrl"
|
|
@@ -379,32 +444,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImpo
|
|
|
379
444
|
<div class="text-sm mt-auto">{{ user.username }}</div>
|
|
380
445
|
<div class="text-sm">{{ user.email }}</div>
|
|
381
446
|
</div>
|
|
382
|
-
</div>
|
|
383
|
-
|
|
384
|
-
<div
|
|
385
|
-
class="border-top-1 border-300 flex flex-row justify-content-between mt-2 pt-2 mx-2"
|
|
386
|
-
>
|
|
387
|
-
<a
|
|
388
|
-
class="flex flex-row align-items-center cursor-pointer"
|
|
389
|
-
(click)="editSettings.emit()"
|
|
390
|
-
pRipple
|
|
391
|
-
>
|
|
392
|
-
<i class="pi pi-user-edit p-2" style="font-size: 1.5rem"></i>
|
|
393
|
-
<span>{{ 'ACTION.EDIT_SETTINGS' | translate }}</span>
|
|
394
|
-
</a>
|
|
395
|
-
|
|
396
|
-
<a
|
|
397
|
-
style="color: red"
|
|
398
|
-
class="flex flex-row align-items-center cursor-pointer"
|
|
399
|
-
(click)="logout.emit()"
|
|
400
|
-
pRipple
|
|
401
|
-
>
|
|
402
|
-
<i class="pi pi-power-off p-2"></i>
|
|
403
|
-
<span>{{ 'ACTION.LOGOUT' | translate }}</span>
|
|
404
|
-
</a>
|
|
405
|
-
</div>
|
|
447
|
+
</div> -->
|
|
406
448
|
</p-popover>
|
|
407
|
-
`, styles: [".profile-image{width:50px;height:50px;border-radius:50%;background-size:cover;background-position:center;background-repeat:no-repeat;cursor:pointer}\n"] }]
|
|
449
|
+
`, styles: [".profile-image{width:50px;height:50px;border-radius:50%;background-size:cover;background-position:center;background-repeat:no-repeat;cursor:pointer}.cover-image{width:35px;height:35px;border-radius:50%;background-size:cover;background-position:center;background-repeat:no-repeat;cursor:pointer}\n"] }]
|
|
408
450
|
}], propDecorators: { user: [{
|
|
409
451
|
type: Input
|
|
410
452
|
}], logout: [{
|