Skip to content

Commit

Permalink
Fixed #16925 | Showcase: Misaligned Country Flags in Components Showcase
Browse files Browse the repository at this point in the history
  • Loading branch information
@mehmetcetin01140
mehmetcetin01140 committed Dec 4, 2024
1 parent 550315f commit 00c8a53
Show file tree
Hide file tree
Showing 4 changed files with 48 additions and 49 deletions.
14 changes: 8 additions & 6 deletions apps/showcase/doc/select/filterdoc.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,13 +9,15 @@ import { Component, OnInit } from '@angular/core';
</app-docsectiontext>
<div class="card flex justify-center">
<p-select [options]="countries" [(ngModel)]="selectedCountry" optionLabel="name" [filter]="true" filterBy="name" [showClear]="true" placeholder="Select a Country" class="w-full md:w-56">
<ng-template pTemplate="selectedItem" let-selectedOption>
<ng-template #selectedItem let-selectedOption>
<div class="flex items-center gap-2">
<img src="https://primefaces.org/cdn/primeng/images/demo/flag/flag_placeholder.png" [class]="'flag flag-' + selectedCountry.code.toLowerCase()" style="width: 18px" />
<div>{{ selectedOption.name }}</div>
</div>
</ng-template>
<ng-template let-country pTemplate="item">
<ng-template let-country #item>
<div class="flex items-center gap-2">
<img src="https://primefaces.org/cdn/primeng/images/demo/flag/flag_placeholder.png" [class]="'flag flag-' + country.code.toLowerCase()" style="width: 18px" />
<div>{{ country.name }}</div>
</div>
</ng-template>
Expand Down Expand Up @@ -46,13 +48,13 @@ export class FilterDoc implements OnInit {

code: Code = {
basic: `<p-select [options]="countries" [(ngModel)]="selectedCountry" optionLabel="name" [filter]="true" filterBy="name" [showClear]="true" placeholder="Select a Country" class="w-full md:w-56">
<ng-template pTemplate="selectedItem" let-selectedOption>
<ng-template #selectedItem let-selectedOption>
<div class="flex items-center gap-2">
<img src="https://primefaces.org/cdn/primeng/images/demo/flag/flag_placeholder.png" [class]="'flag flag-' + selectedCountry.code.toLowerCase()" style="width: 18px" />
<div>{{ selectedOption.name }}</div>
</div>
</ng-template>
<ng-template let-country pTemplate="item">
<ng-template let-country #item>
<div class="flex items-center gap-2">
<img src="https://primefaces.org/cdn/primeng/images/demo/flag/flag_placeholder.png" [class]="'flag flag-' + country.code.toLowerCase()" style="width: 18px" />
<div>{{ country.name }}</div>
Expand All @@ -62,13 +64,13 @@ export class FilterDoc implements OnInit {

html: `<div class="card flex justify-center">
<p-select [options]="countries" [(ngModel)]="selectedCountry" optionLabel="name" [filter]="true" filterBy="name" [showClear]="true" placeholder="Select a Country" class="w-full md:w-56">
<ng-template pTemplate="selectedItem" let-selectedOption>
<ng-template #selectedItem let-selectedOption>
<div class="flex items-center gap-2">
<img src="https://primefaces.org/cdn/primeng/images/demo/flag/flag_placeholder.png" [class]="'flag flag-' + selectedCountry.code.toLowerCase()" style="width: 18px" />
<div>{{ selectedOption.name }}</div>
</div>
</ng-template>
<ng-template let-country pTemplate="item">
<ng-template let-country #item>
<div class="flex items-center gap-2">
<img src="https://primefaces.org/cdn/primeng/images/demo/flag/flag_placeholder.png" [class]="'flag flag-' + country.code.toLowerCase()" style="width: 18px" />
<div>{{ country.name }}</div>
Expand Down
58 changes: 26 additions & 32 deletions apps/showcase/doc/table/filterbasic.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -87,12 +87,16 @@ import { Table } from 'primeng/table';
{{ customer.name }}
</td>
<td>
<img src="https://primefaces.org/cdn/primeng/images/demo/flag/flag_placeholder.png" [class]="'flag flag-' + customer.country.code" style="width: 20px" />
<span class="ml-1 align-middle">{{ customer.country.name }}</span>
<div class="flex items-center gap-2">
<img src="https://primefaces.org/cdn/primeng/images/demo/flag/flag_placeholder.png" [class]="'flag flag-' + customer.country.code" style="width: 20px" />
<span>{{ customer.country.name }}</span>
</div>
</td>
<td>
<img [alt]="customer.representative.name" src="https://primefaces.org/cdn/primeng/images/demo/avatar/{{ customer.representative.image }}" width="32" style="vertical-align: middle" />
<span class="ml-1 align-middle">{{ customer.representative.name }}</span>
<div class="flex items-center gap-2">
<img [alt]="customer.representative.name" src="https://primefaces.org/cdn/primeng/images/demo/avatar/{{ customer.representative.image }}" width="32" style="vertical-align: middle" />
<span>{{ customer.representative.name }}</span>
</div>
</td>
<td>
<p-tag [value]="customer.status" [severity]="getSeverity(customer.status)" />
Expand Down Expand Up @@ -279,21 +283,16 @@ export class FilterBasicDoc {
{{ customer.name }}
</td>
<td>
<img
src="https://primefaces.org/cdn/primeng/images/demo/flag/flag_placeholder.png"
[class]="'flag flag-' + customer.country.code"
style="width: 20px"
/>
<span class="ml-1 align-middle">{{ customer.country.name }}</span>
<div class="flex items-center gap-2">
<img src="https://primefaces.org/cdn/primeng/images/demo/flag/flag_placeholder.png" [class]="'flag flag-' + customer.country.code" style="width: 20px" />
<span>{{ customer.country.name }}</span>
</div>
</td>
<td>
<img
[alt]="customer.representative.name"
src="https://primefaces.org/cdn/primeng/images/demo/avatar/{{ customer.representative.image }}"
width="32"
style="vertical-align: middle"
/>
<span class="ml-1 align-middle">{{ customer.representative.name }}</span>
<div class="flex items-center gap-2">
<img [alt]="customer.representative.name" src="https://primefaces.org/cdn/primeng/images/demo/avatar/{{ customer.representative.image }}" width="32" style="vertical-align: middle" />
<span>{{ customer.representative.name }}</span>
</div>
</td>
<td>
<p-tag [value]="customer.status" [severity]="getSeverity(customer.status)" />
Expand All @@ -303,7 +302,7 @@ export class FilterBasicDoc {
class="pi"
[ngClass]="{
'text-green-500 pi-check-circle': customer.verified,
'text-red-500 pi-times-circle': !customer.verified,
'text-red-500 pi-times-circle': !customer.verified
}"
></i>
</td>
Expand Down Expand Up @@ -422,21 +421,16 @@ export class FilterBasicDoc {
{{ customer.name }}
</td>
<td>
<img
src="https://primefaces.org/cdn/primeng/images/demo/flag/flag_placeholder.png"
[class]="'flag flag-' + customer.country.code"
style="width: 20px"
/>
<span class="ml-1 align-middle">{{ customer.country.name }}</span>
<div class="flex items-center gap-2">
<img src="https://primefaces.org/cdn/primeng/images/demo/flag/flag_placeholder.png" [class]="'flag flag-' + customer.country.code" style="width: 20px" />
<span>{{ customer.country.name }}</span>
</div>
</td>
<td>
<img
[alt]="customer.representative.name"
src="https://primefaces.org/cdn/primeng/images/demo/avatar/{{ customer.representative.image }}"
width="32"
style="vertical-align: middle"
/>
<span class="ml-1 align-middle">{{ customer.representative.name }}</span>
<div class="flex items-center gap-2">
<img [alt]="customer.representative.name" src="https://primefaces.org/cdn/primeng/images/demo/avatar/{{ customer.representative.image }}" width="32" style="vertical-align: middle" />
<span>{{ customer.representative.name }}</span>
</div>
</td>
<td>
<p-tag [value]="customer.status" [severity]="getSeverity(customer.status)" />
Expand All @@ -446,7 +440,7 @@ export class FilterBasicDoc {
class="pi"
[ngClass]="{
'text-green-500 pi-check-circle': customer.verified,
'text-red-500 pi-times-circle': !customer.verified,
'text-red-500 pi-times-circle': !customer.verified
}"
></i>
</td>
Expand Down
17 changes: 9 additions & 8 deletions apps/showcase/doc/tailwind/formdoc.ts
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import { Code } from '@/domain/code';
import { Component } from '@angular/core';

@Component({
Expand Down Expand Up @@ -25,14 +26,14 @@ import { Component } from '@angular/core';
</div>
<div class="flex-1">
<label for="country" class="block font-semibold mb-2">Country</label>
<p-select [options]="countries" [(ngModel)]="selectedCountry" optionLabel="name" [showClear]="true" placeholder="Select a Country">
<ng-template pTemplate="selectedItem">
<p-select [options]="countries" [(ngModel)]="selectedCountry" optionLabel="name" placeholder="Select a Country" class="w-full">
<ng-template #selectedItem>
<div class="flex items-center gap-2" *ngIf="selectedCountry">
<img src="https://primefaces.org/cdn/primeng/images/demo/flag/flag_placeholder.png" [class]="'flag flag-' + selectedCountry.code.toLowerCase()" style="width: 18px" />
<div>{{ selectedCountry.name }}</div>
</div>
</ng-template>
<ng-template let-country pTemplate="item">
<ng-template let-country #item>
<div class="flex items-center gap-2">
<img src="https://primefaces.org/cdn/primeng/images/demo/flag/flag_placeholder.png" [class]="'flag flag-' + country.code.toLowerCase()" style="width: 18px" />
<div>{{ country.name }}</div>
Expand Down Expand Up @@ -70,7 +71,7 @@ export class FormDoc {
];
}

code: {
code: Code = {
basic: `<div class="flex flex-col gap-6 w-full sm:w-auto">
<div class="flex flex-col sm:flex-row sm:items-center gap-6">
<div class="flex-auto">
Expand All @@ -93,10 +94,10 @@ export class FormDoc {
[options]="countries"
[(ngModel)]="selectedCountry"
optionLabel="name"
[showClear]="true"
placeholder="Select a Country"
class="w-full"
>
<ng-template pTemplate="selectedItem">
<ng-template #selectedItem>
<div class="flex items-center gap-2" *ngIf="selectedCountry">
<img
src="https://primefaces.org/cdn/primeng/images/demo/flag/flag_placeholder.png"
Expand All @@ -106,7 +107,7 @@ export class FormDoc {
<div>{{ selectedCountry.name }}</div>
</div>
</ng-template>
<ng-template let-country pTemplate="item">
<ng-template let-country #item>
<div class="flex items-center gap-2">
<img
src="https://primefaces.org/cdn/primeng/images/demo/flag/flag_placeholder.png"
Expand All @@ -123,6 +124,6 @@ export class FormDoc {
<label for="message" class="block font-semibold mb-2">Message</label>
<textarea pTextarea id="message" class="w-full" rows="4"></textarea>
</div>
</div>`;
</div>`
};
}
8 changes: 5 additions & 3 deletions apps/showcase/pages/landing/themesection.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -93,8 +93,10 @@ import { Tag } from 'primeng/tag';
{{ customer.name }}
</td>
<td style="width: 14%; min-width: 14rem">
<img src="https://primefaces.org/cdn/primeng/images/demo/flag/flag_placeholder.png" [class]="'flag flag-' + customer.country.code" width="30" height="20" alt="country flag" />
<span class="ml-2 image-text">{{ customer.country.name }}</span>
<div class="flex items-center gap-2">
<img src="https://primefaces.org/cdn/primeng/images/demo/flag/flag_placeholder.png" [class]="'flag flag-' + customer.country.code" width="30" height="20" alt="country flag" />
<span>{{ customer.country.name }}</span>
</div>
</td>
<td style="width: 14%; min-width: 14rem">
<div class="flex items-center gap-2">
Expand All @@ -106,7 +108,7 @@ import { Tag } from 'primeng/tag';
style="vertical-align: middle"
alt="representative"
/>
<span class="ml-2 image-text">{{ customer.representative.name }}</span>
<span>{{ customer.representative.name }}</span>
</div>
</td>
<td style="width: 14%; min-width: 8rem">
Expand Down

0 comments on commit 00c8a53

Please sign in to comment.