Skip to content

Commit

Permalink
Refactor #11175
Browse files Browse the repository at this point in the history
  • Loading branch information
@yigitfindikli
yigitfindikli committed Feb 15, 2022
1 parent 7f26ff2 commit c9b61ff
Show file tree
Hide file tree
Showing 44 changed files with 88 additions and 844 deletions.
4 changes: 2 additions & 2 deletions src/app/components/panel/panel.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ let idx: number = 0;
<span class="p-panel-title" *ngIf="header" [attr.id]="id + '_header'">{{header}}</span>
<ng-content select="p-header"></ng-content>
<ng-container *ngTemplateOutlet="headerTemplate"></ng-container>
<div role="tablist" class="p-panel-icons" [ngClass]="{'p-panel-icons-left': iconPos === 'left', 'p-panel-icons-right': iconPos ==='right', 'p-panel-icons-center': iconPos === 'center'}">
<div role="tablist" class="p-panel-icons" [ngClass]="{'p-panel-icons-start': iconPos === 'start', 'p-panel-icons-end': iconPos ==='end', 'p-panel-icons-center': iconPos === 'center'}">
<ng-template *ngTemplateOutlet="iconTemplate"></ng-template>
<button *ngIf="toggleable" type="button" [attr.aria-label]="'collapse button'" [attr.id]="id + '-label'" class="p-panel-header-icon p-panel-toggler p-link" pRipple
(click)="onIconClick($event)" (keydown.enter)="onIconClick($event)" [attr.aria-controls]="id + '-content'" role="tab" [attr.aria-expanded]="!collapsed">
Expand Down Expand Up @@ -73,7 +73,7 @@ export class Panel implements AfterContentInit,BlockableUI {

@Input() styleClass: string;

@Input() iconPos: string = "right";
@Input() iconPos: string = "end";

@Input() expandIcon: string = 'pi pi-plus';

Expand Down
4 changes: 2 additions & 2 deletions src/app/showcase/components/panel/paneldemo.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -167,7 +167,7 @@ <h5>Properties</h5>
<td>iconPos</td>
<td>string</td>
<td>right</td>
<td>Position of the icons, valid values are "left", "right" and "center".</td>
<td>Position of the icons, valid values are "start", "end" and "center".</td>
</tr>
</tbody>
</table>
Expand Down Expand Up @@ -287,7 +287,7 @@ <h5>Dependencies</h5>
&lt;/p-panel&gt;

&lt;h5&gt;Advanced&lt;/h5&gt;
&lt;p-panel header="Header" [toggleable]="true"&gt;
&lt;p-panel header="Header" [toggleable]="true"&gt;
&lt;ng-template pTemplate="icons"&gt;
&lt;button pButton class="p-panel-header-icon p-link" (click)="menu.toggle($event)"&gt;
&lt;span class="pi pi-cog"&gt;&lt;/span&gt;
Expand Down
22 changes: 2 additions & 20 deletions src/assets/components/themes/arya-blue/theme.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3798,11 +3798,11 @@ p-treeselect.ng-invalid.ng-dirty > .p-treeselect {
color: rgba(255, 255, 255, 0.87);
border-top: 0 none;
}
.p-panel .p-panel-icons-right {
.p-panel .p-panel-icons-end {
order: 2;
margin-left: auto;
}
.p-panel .p-panel-icons-left {
.p-panel .p-panel-icons-start {
order: 0;
margin-right: 0.5rem;
}
Expand Down Expand Up @@ -5060,24 +5060,6 @@ p-treeselect.ng-invalid.ng-dirty > .p-treeselect {
border-color: #64B5F6;
color: #64B5F6;
}
.p-tabmenu .p-tabmenu-left-icon {
margin-right: 0.5rem;
}
.p-tabmenu .p-tabmenu-right-icon {
margin-left: 0.5rem;
}
.p-tabmenu .p-tabmenu-nav-btn.p-link {
background: #1e1e1e;
color: #64B5F6;
width: 2.357rem;
box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
border-radius: 0;
}
.p-tabmenu .p-tabmenu-nav-btn.p-link:focus {
outline: 0 none;
outline-offset: 0;
box-shadow: inset 0 0 0 1px #93cbf9;
}

.p-tieredmenu {
padding: 0.25rem 0;
Expand Down
22 changes: 2 additions & 20 deletions src/assets/components/themes/arya-green/theme.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3798,11 +3798,11 @@ p-treeselect.ng-invalid.ng-dirty > .p-treeselect {
color: rgba(255, 255, 255, 0.87);
border-top: 0 none;
}
.p-panel .p-panel-icons-right {
.p-panel .p-panel-icons-end {
order: 2;
margin-left: auto;
}
.p-panel .p-panel-icons-left {
.p-panel .p-panel-icons-start {
order: 0;
margin-right: 0.5rem;
}
Expand Down Expand Up @@ -5060,24 +5060,6 @@ p-treeselect.ng-invalid.ng-dirty > .p-treeselect {
border-color: #81C784;
color: #81C784;
}
.p-tabmenu .p-tabmenu-left-icon {
margin-right: 0.5rem;
}
.p-tabmenu .p-tabmenu-right-icon {
margin-left: 0.5rem;
}
.p-tabmenu .p-tabmenu-nav-btn.p-link {
background: #1e1e1e;
color: #81C784;
width: 2.357rem;
box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
border-radius: 0;
}
.p-tabmenu .p-tabmenu-nav-btn.p-link:focus {
outline: 0 none;
outline-offset: 0;
box-shadow: inset 0 0 0 1px #a7d8a9;
}

.p-tieredmenu {
padding: 0.25rem 0;
Expand Down
22 changes: 2 additions & 20 deletions src/assets/components/themes/arya-orange/theme.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3798,11 +3798,11 @@ p-treeselect.ng-invalid.ng-dirty > .p-treeselect {
color: rgba(255, 255, 255, 0.87);
border-top: 0 none;
}
.p-panel .p-panel-icons-right {
.p-panel .p-panel-icons-end {
order: 2;
margin-left: auto;
}
.p-panel .p-panel-icons-left {
.p-panel .p-panel-icons-start {
order: 0;
margin-right: 0.5rem;
}
Expand Down Expand Up @@ -5060,24 +5060,6 @@ p-treeselect.ng-invalid.ng-dirty > .p-treeselect {
border-color: #FFD54F;
color: #FFD54F;
}
.p-tabmenu .p-tabmenu-left-icon {
margin-right: 0.5rem;
}
.p-tabmenu .p-tabmenu-right-icon {
margin-left: 0.5rem;
}
.p-tabmenu .p-tabmenu-nav-btn.p-link {
background: #1e1e1e;
color: #FFD54F;
width: 2.357rem;
box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
border-radius: 0;
}
.p-tabmenu .p-tabmenu-nav-btn.p-link:focus {
outline: 0 none;
outline-offset: 0;
box-shadow: inset 0 0 0 1px #ffe284;
}

.p-tieredmenu {
padding: 0.25rem 0;
Expand Down
22 changes: 2 additions & 20 deletions src/assets/components/themes/arya-purple/theme.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3798,11 +3798,11 @@ p-treeselect.ng-invalid.ng-dirty > .p-treeselect {
color: rgba(255, 255, 255, 0.87);
border-top: 0 none;
}
.p-panel .p-panel-icons-right {
.p-panel .p-panel-icons-end {
order: 2;
margin-left: auto;
}
.p-panel .p-panel-icons-left {
.p-panel .p-panel-icons-start {
order: 0;
margin-right: 0.5rem;
}
Expand Down Expand Up @@ -5060,24 +5060,6 @@ p-treeselect.ng-invalid.ng-dirty > .p-treeselect {
border-color: #BA68C8;
color: #BA68C8;
}
.p-tabmenu .p-tabmenu-left-icon {
margin-right: 0.5rem;
}
.p-tabmenu .p-tabmenu-right-icon {
margin-left: 0.5rem;
}
.p-tabmenu .p-tabmenu-nav-btn.p-link {
background: #1e1e1e;
color: #BA68C8;
width: 2.357rem;
box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
border-radius: 0;
}
.p-tabmenu .p-tabmenu-nav-btn.p-link:focus {
outline: 0 none;
outline-offset: 0;
box-shadow: inset 0 0 0 1px #cf95d9;
}

.p-tieredmenu {
padding: 0.25rem 0;
Expand Down
22 changes: 2 additions & 20 deletions src/assets/components/themes/bootstrap4-dark-blue/theme.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3810,11 +3810,11 @@ p-treeselect.ng-invalid.ng-dirty > .p-treeselect {
color: rgba(255, 255, 255, 0.87);
border-top: 0 none;
}
.p-panel .p-panel-icons-right {
.p-panel .p-panel-icons-end {
order: 2;
margin-left: auto;
}
.p-panel .p-panel-icons-left {
.p-panel .p-panel-icons-start {
order: 0;
margin-right: 0.5rem;
}
Expand Down Expand Up @@ -5072,24 +5072,6 @@ p-treeselect.ng-invalid.ng-dirty > .p-treeselect {
border-color: #3f4b5b #3f4b5b #2a323d #3f4b5b;
color: rgba(255, 255, 255, 0.6);
}
.p-tabmenu .p-tabmenu-left-icon {
margin-right: 0.5rem;
}
.p-tabmenu .p-tabmenu-right-icon {
margin-left: 0.5rem;
}
.p-tabmenu .p-tabmenu-nav-btn.p-link {
background: #2a323d;
color: rgba(255, 255, 255, 0.6);
width: 2.357rem;
box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
border-radius: 0;
}
.p-tabmenu .p-tabmenu-nav-btn.p-link:focus {
outline: 0 none;
outline-offset: 0;
box-shadow: inset 0 0 0 1px #e3f3fe;
}

.p-tieredmenu {
padding: 0.5rem 0;
Expand Down
22 changes: 2 additions & 20 deletions src/assets/components/themes/bootstrap4-dark-purple/theme.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3810,11 +3810,11 @@ p-treeselect.ng-invalid.ng-dirty > .p-treeselect {
color: rgba(255, 255, 255, 0.87);
border-top: 0 none;
}
.p-panel .p-panel-icons-right {
.p-panel .p-panel-icons-end {
order: 2;
margin-left: auto;
}
.p-panel .p-panel-icons-left {
.p-panel .p-panel-icons-start {
order: 0;
margin-right: 0.5rem;
}
Expand Down Expand Up @@ -5072,24 +5072,6 @@ p-treeselect.ng-invalid.ng-dirty > .p-treeselect {
border-color: #3f4b5b #3f4b5b #2a323d #3f4b5b;
color: rgba(255, 255, 255, 0.6);
}
.p-tabmenu .p-tabmenu-left-icon {
margin-right: 0.5rem;
}
.p-tabmenu .p-tabmenu-right-icon {
margin-left: 0.5rem;
}
.p-tabmenu .p-tabmenu-nav-btn.p-link {
background: #2a323d;
color: rgba(255, 255, 255, 0.6);
width: 2.357rem;
box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
border-radius: 0;
}
.p-tabmenu .p-tabmenu-nav-btn.p-link:focus {
outline: 0 none;
outline-offset: 0;
box-shadow: inset 0 0 0 1px #f0e6f5;
}

.p-tieredmenu {
padding: 0.5rem 0;
Expand Down
22 changes: 2 additions & 20 deletions src/assets/components/themes/bootstrap4-light-blue/theme.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3810,11 +3810,11 @@ p-treeselect.ng-invalid.ng-dirty > .p-treeselect {
color: #212529;
border-top: 0 none;
}
.p-panel .p-panel-icons-right {
.p-panel .p-panel-icons-end {
order: 2;
margin-left: auto;
}
.p-panel .p-panel-icons-left {
.p-panel .p-panel-icons-start {
order: 0;
margin-right: 0.5rem;
}
Expand Down Expand Up @@ -5072,24 +5072,6 @@ p-treeselect.ng-invalid.ng-dirty > .p-treeselect {
border-color: #dee2e6 #dee2e6 #ffffff #dee2e6;
color: #495057;
}
.p-tabmenu .p-tabmenu-left-icon {
margin-right: 0.5rem;
}
.p-tabmenu .p-tabmenu-right-icon {
margin-left: 0.5rem;
}
.p-tabmenu .p-tabmenu-nav-btn.p-link {
background: #ffffff;
color: #495057;
width: 2.357rem;
box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
border-radius: 0;
}
.p-tabmenu .p-tabmenu-nav-btn.p-link:focus {
outline: 0 none;
outline-offset: 0;
box-shadow: inset 0 0 0 0.2rem rgba(38, 143, 255, 0.5);
}

.p-tieredmenu {
padding: 0.5rem 0;
Expand Down
22 changes: 2 additions & 20 deletions src/assets/components/themes/bootstrap4-light-purple/theme.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3810,11 +3810,11 @@ p-treeselect.ng-invalid.ng-dirty > .p-treeselect {
color: #212529;
border-top: 0 none;
}
.p-panel .p-panel-icons-right {
.p-panel .p-panel-icons-end {
order: 2;
margin-left: auto;
}
.p-panel .p-panel-icons-left {
.p-panel .p-panel-icons-start {
order: 0;
margin-right: 0.5rem;
}
Expand Down Expand Up @@ -5072,24 +5072,6 @@ p-treeselect.ng-invalid.ng-dirty > .p-treeselect {
border-color: #dee2e6 #dee2e6 #ffffff #dee2e6;
color: #495057;
}
.p-tabmenu .p-tabmenu-left-icon {
margin-right: 0.5rem;
}
.p-tabmenu .p-tabmenu-right-icon {
margin-left: 0.5rem;
}
.p-tabmenu .p-tabmenu-nav-btn.p-link {
background: #ffffff;
color: #495057;
width: 2.357rem;
box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
border-radius: 0;
}
.p-tabmenu .p-tabmenu-nav-btn.p-link:focus {
outline: 0 none;
outline-offset: 0;
box-shadow: inset 0 0 0 0.2rem rgba(136, 60, 174, 0.5);
}

.p-tieredmenu {
padding: 0.5rem 0;
Expand Down
22 changes: 2 additions & 20 deletions src/assets/components/themes/fluent-light/theme.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3774,11 +3774,11 @@ p-treeselect.ng-invalid.ng-dirty > .p-treeselect {
color: #323130;
border-top: 0 none;
}
.p-panel .p-panel-icons-right {
.p-panel .p-panel-icons-end {
order: 2;
margin-left: auto;
}
.p-panel .p-panel-icons-left {
.p-panel .p-panel-icons-start {
order: 0;
margin-right: 0.5rem;
}
Expand Down Expand Up @@ -5012,24 +5012,6 @@ p-treeselect.ng-invalid.ng-dirty > .p-treeselect {
border-color: #0078d4;
color: #323130;
}
.p-tabmenu .p-tabmenu-left-icon {
margin-right: 0.5rem;
}
.p-tabmenu .p-tabmenu-right-icon {
margin-left: 0.5rem;
}
.p-tabmenu .p-tabmenu-nav-btn.p-link {
background: #ffffff;
color: #323130;
width: 2.357rem;
box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
border-radius: 0;
}
.p-tabmenu .p-tabmenu-nav-btn.p-link:focus {
outline: 0 none;
outline-offset: 0;
box-shadow: inset inset 0 0 0 1px #605e5c;
}

.p-tieredmenu {
padding: 0;
Expand Down
Loading

0 comments on commit c9b61ff

Please sign in to comment.