f.spilla/nx-primeng-sakai-v17
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

remove unused classes

Browse Source
This commit is contained in:
Çetin 2021-12-22 16:06:49 +03:00
parent e78b5afea5
commit 6b24f8fcbe
30 changed files with 361 additions and 646 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/app/app.menu.component.ts
View File

@ -58,9 +58,8 @@ export class AppMenuComponent implements OnInit {
{
label:'UI Blocks',
items:[
{label: 'Free Blocks', icon: 'pi pi-fw pi-eye', routerLink: ['/blocks'],
badge:'NEW'},
{label: 'All Blocks', icon: 'pi pi-fw pi-globe', url: ['https://www.primefaces.org/primeblocks-ng/#/']},
{label: 'Free Blocks', icon: 'pi pi-fw pi-eye', routerLink: ['/blocks'], badge: 'NEW'},
{label: 'All Blocks', icon: 'pi pi-fw pi-globe', url: ['https://www.primefaces.org/primeblocks-ng']},
]
},
{label:'Icons',

2
src/app/app.module.ts
View File

@ -84,6 +84,7 @@ import {ToggleButtonModule} from 'primeng/togglebutton';
import {ToolbarModule} from 'primeng/toolbar';
import {TooltipModule} from 'primeng/tooltip';
import {TreeModule} from 'primeng/tree';
import {TreeSelect, TreeSelectModule} from 'primeng/treeselect';
import {TreeTableModule} from 'primeng/treetable';
import {VirtualScrollerModule} from 'primeng/virtualscroller';
import {BlockViewer} from './app.blockviewer.component'
@ -223,6 +224,7 @@ FullCalendarModule.registerPlugins([
ToolbarModule,
TooltipModule,
TreeModule,
TreeSelectModule,
TreeTableModule,
VirtualScrollerModule,
AppCodeModule,

6
src/app/demo/service/nodeservice.ts
View File

@ -31,4 +31,10 @@ export class NodeService {
.toPromise()
.then(res => res.data as TreeNode[]);
}
getTreeNodes(){
return this.http.get<any>('assets/demo/data/treenodes.json')
.toPromise()
.then(res => res.data as TreeNode[]);
}
}

2
src/app/demo/view/buttondemo.component.html
View File

@ -1,4 +1,4 @@
<div class="grid button-demo">
<div class="grid">
<div class="col-12 md:col-6">
<div class="card">
<h5>Default</h5>

28
src/app/demo/view/chartsdemo.component.html
View File

@ -1,42 +1,34 @@
<div class="grid p-fluid">
<div class="col-12 lg:col-6">
<div class="card">
<h5 class="centerText">Linear Chart</h5>
<h5>Linear Chart</h5>
<p-chart type="line" [data]="lineData" [options]="lineOptions" [style]="{'width': '50%'}"></p-chart>
</div>
<div class="card flex flex-column align-items-center">
<h5 class="centerText">Pie Chart</h5>
<div class="d-flex justify-content-center">
<p-chart type="pie" [data]="pieData" [options]="pieOptions" [style]="{'width': '50%'}"></p-chart>
</div>
<h5>Pie Chart</h5>
<p-chart type="pie" [data]="pieData" [options]="pieOptions" [style]="{'width': '50%'}"></p-chart>
</div>
<div class="card flex flex-column align-items-center">
<h5 class="centerText">Polar Area Chart</h5>
<div class="d-flex justify-content-center">
<p-chart type="polarArea" [data]="polarData" [options]="polarOptions" [style]="{'width': '50%'}"></p-chart>
</div>
<h5>Polar Area Chart</h5>
<p-chart type="polarArea" [data]="polarData" [options]="polarOptions" [style]="{'width': '50%'}"></p-chart>
</div>
</div>
<div class="col-12 lg:col-6">
<div class="card">
<h5 class="centerText">Bar Chart</h5>
<h5>Bar Chart</h5>
<p-chart type="bar" [data]="barData" [options]="barOptions"></p-chart>
</div>
<div class="card flex flex-column align-items-center">
<h5 class="centerText">Doughnut Chart</h5>
<div class="d-flex justify-content-center">
<p-chart type="doughnut" [data]="pieData" [options]="pieOptions" [style]="{'width': '50%'}"></p-chart>
</div>
<h5>Doughnut Chart</h5>
<p-chart type="doughnut" [data]="pieData" [options]="pieOptions" [style]="{'width': '50%'}"></p-chart>
</div>
<div class="card flex flex-column align-items-center">
<h5 class="centerText">Radar Chart</h5>
<div class="d-flex justify-content-center">
<p-chart type="radar" [data]="radarData" [options]="radarOptions" [style]="{'width': '50%'}"></p-chart>
</div>
<h5>Radar Chart</h5>
<p-chart type="radar" [data]="radarData" [options]="radarOptions" [style]="{'width': '50%'}"></p-chart>
</div>
</div>
</div>

9
src/app/demo/view/dashboard.component.html
View File

@ -1,4 +1,3 @@
<div class="layout-main">
<div class="grid">
<div class="col-12 lg:col-6 xl:col-3">
<div class="card mb-0">
@ -75,11 +74,11 @@
</ng-template>
<ng-template pTemplate="body" let-product>
<tr>
<td>
<td style="min-width: 5rem;">
<img src="../../../assets/demo/images/product/{{product.image}}" class="shadow-4" alt="{{product.name}}" width="50">
</td>
<td>{{product.name}}</td>
<td>{{product.price | currency:'USD'}}</td>
<td style="min-width: 7rem;">{{product.name}}</td>
<td style="min-width: 8rem;">{{product.price | currency:'USD'}}</td>
<td>
<button pButton pRipple type="button" icon="pi pi-search" class="p-button p-component p-button-text p-button-icon-only"></button>
</td>
@ -241,4 +240,4 @@
</div>
</div>
</div>

39
src/app/demo/view/documentation.component.html
View File

@ -1,6 +1,6 @@
<div class="grid">
<div class="col-12">
<div class="card docs no-margin">
<div class="card docs">
<h4>Current Version</h4>
<p>Angular 13 and PrimeNG 13</p>
@ -14,8 +14,7 @@
<p>Sakai has no direct dependency other than PrimeNG. More information about dependencies is available at <a href="https://www.primefaces.org/why-primeng-templates/">Why PrimeNG Templates</a> article.</p>
<app-code ngPreserveWhitespaces ngNonBindable lang="markup">
npm install -g @angular/cli
</app-code>
npm install -g @angular/cli</app-code>
<p>Once CLI is ready in your system, extract the contents of the Sakai zip file distribution, cd to the directory,
install the libraries from npm and then execute "ng serve" to run the application in your local environment.</p>
@ -23,8 +22,7 @@ npm install -g @angular/cli
<app-code ngPreserveWhitespaces ngNonBindable lang="markup">
cd sakai-ng
npm install
ng serve
</app-code>
ng serve</app-code>
<p>The application should run at http://localhost:4200/, you may now start with the development of your application.</p>
@ -41,8 +39,7 @@ Run 'ng test' to execute the unit tests via [Karma](https://karma-runner.github.
Run 'ng e2e' to execute the end-to-end tests via [Protractor](http://www.protractortest.org/).
Run 'ng help' for more options.
</app-code>
Run 'ng help' for more options.</app-code>
<h5>Structure</h5>
<p>Sakai consists of 2 main parts; the application layout, layout resources. <i>app.component.html</i> inside app folder is the html template for the base layout,
@ -80,9 +77,8 @@ Run 'ng help' for more options.
&lt;app-config&gt;&lt;/app-config&gt;
&lt;div class=&quot;layout-mask p-component-overlay&quot;&gt;&lt;/div&gt;
&lt;/div&gt;
</app-code>
&lt;div *ngIf=&quot;menuActiveMobile&quot; class=&quot;layout-mask p-component-overlay&quot;&gt;&lt;/div&gt;
&lt;/div&gt;</app-code>
<h5>Menu</h5>
<p>Menu is a separate component defined in app.menu.component.ts file based on PrimeNG MenuModel API. In order to define the menuitems,
@ -127,6 +123,19 @@ export class AppMenuComponent implements OnInit, AfterViewInit &#123;
&#123;label: 'Misc', icon: 'pi pi-fw pi-circle', routerLink: ['/uikit/misc']&#125;
]
&#125;,
&#123;
label: 'UI Blocks',
items: [
&#123;label: 'Free Blocks', icon: 'pi pi-fw pi-eye', routerLink: ['/blocks'], badge: 'NEW'&#125;,
&#123;label: 'Timeline', icon: 'pi pi-fw pi-calendar', url: ['https://www.primefaces.org/primeblocks-ng']&#125;
]
&#125;,
&#123;
label: 'Icons',
items: [
&#123;label: 'PrimeIcons', icon: 'pi pi-fw pi-prime', routerLink: ['/icons']&#125;,
]
&#125;,
&#123;
label: 'Pages', icon: 'pi pi-fw pi-briefcase', routerLink: ['/pages'],
items: [
@ -179,14 +188,14 @@ export class AppMenuComponent implements OnInit, AfterViewInit &#123;
]
&#125;,
&#123;
label: 'Start', icon: 'pi pi-fw pi-download',
label: 'Get Started',
items: [
&#123;
label: 'Buy Now', icon: 'pi pi-fw pi-shopping-cart', url: ['https://www.primefaces.org/store']
&#125;,
&#123;
label: 'Documentation', icon: 'pi pi-fw pi-info-circle', routerLink: ['/documentation']
&#125;
&#123;
label: 'View Source', icon: 'pi pi-fw pi-search', url: ['https://github.com/primefaces/sakai-angular']
&#125;
]
&#125;
];
@ -213,7 +222,7 @@ npm install primeicons@latest --save
<app-code ngPreserveWhitespaces ngNonBindable lang="markup">
"styles": [
"styles.scss" //your styles and overrides
"styles.scss" //your styles and overrides
],
</app-code>

2
src/app/demo/view/filedemo.component.html
View File

@ -12,7 +12,7 @@
</p-fileUpload>
<h5>Basic</h5>
<p-fileUpload mode="basic" name="demo[]" url="./upload.php" accept="image/*" maxFileSize="1000000" (onUpload)="onBasicUpload($event)" chooseLabel="Browse"></p-fileUpload>
<p-fileUpload mode="basic" name="demo[]" url="./upload.php" accept="image/*" maxFileSize="1000000" (onUpload)="onUpload($event)" chooseLabel="Browse"></p-fileUpload>
</div>
</div>
</div>

4
src/app/demo/view/filedemo.component.ts
View File

@ -18,8 +18,4 @@ export class FileDemoComponent {
this.messageService.add({severity: 'info', summary: 'Success', detail: 'File Uploaded'});
}
onBasicUpload(event) {
this.messageService.add({severity: 'info', summary: 'Success', detail: 'File Uploaded with Basic Mode'});
}
}

2
src/app/demo/view/floatlabeldemo.component.ts
View File

@ -3,7 +3,6 @@ import {CountryService} from '../service/countryservice';
@Component({
templateUrl: './floatlabeldemo.component.html',
styleUrls: ['./floatlabeldemo.scss']
})
export class FloatLabelDemoComponent implements OnInit {
@ -58,7 +57,6 @@ export class FloatLabelDemoComponent implements OnInit {
// return filtered results, for demo we filter at client side
const filtered: any[] = [];
const query = event.query;
// tslint:disable-next-line:prefer-for-of
for (let i = 0; i < this.countries.length; i++) {
const country = this.countries[i];
if (country.name.toLowerCase().indexOf(query.toLowerCase()) == 0) {

9
src/app/demo/view/floatlabeldemo.scss
View File

@ -1,9 +0,0 @@
:host ::ng-deep .floatlabel-demo {
.p-field {
margin-top: 2rem;
}
.p-multiselect-panel .p-multiselect-header {
padding-bottom: 0;
}
}

39
src/app/demo/view/inputdemo.component.html
View File

@ -2,7 +2,7 @@
<div class="col-12 md:col-6">
<div class="card">
<h5>InputText</h5>
<div class="grid p-formgrid">
<div class="grid formgrid">
<div class="col-12 mb-2 lg:col-4 lg:mb-0">
<input pInputText type="text" placeholder="Default" />
</div>
@ -15,7 +15,7 @@
</div>
<h5>Icons</h5>
<div class="grid p-formgrid">
<div class="grid formgrid">
<div class="col-12 mb-2 lg:col-4 lg:mb-0">
<span class="p-input-icon-left">
<i class="pi pi-user"></i>
@ -89,7 +89,7 @@
<h5>RadioButton</h5>
<div class="grid">
<div class="col-12 md:col-4">
<div class="field-radiobutton">
<div class="field-radiobutton mb-0">
<p-radioButton name="city" value="Chicago" [(ngModel)]="valRadio" id="city1"></p-radioButton>
<label for="city1">Chicago</label>
</div>
@ -112,23 +112,23 @@
<h5>Checkbox</h5>
<div class="grid">
<div class="col-12 md:col-4">
<div class="field-checkbox">
<p-checkbox name="group1" value="New York" [(ngModel)]="valCheck" id="ny"></p-checkbox>
<label for="ny">New York</label>
<div class="field-checkbox mb-0">
<p-checkbox name="group1" value="Chicago" [(ngModel)]="valCheck" id="ch"></p-checkbox>
<label for="ch">Chicago</label>
</div>
</div>
<div class="col-12 md:col-4">
<div class="field-checkbox">
<p-checkbox name="group1" value="San Francisco" [(ngModel)]="valCheck" id="sf"></p-checkbox>
<label for="sf">San Francisco</label>
</div>
</div>
<div class="col-12 md:col-4">
<div class="field-checkbox">
<div class="field-checkbox mb-0">
<p-checkbox name="group1" value="Los Angeles" [(ngModel)]="valCheck" id="la"></p-checkbox>
<label for="la">Los Angeles</label>
</div>
</div>
<div class="col-12 md:col-4">
<div class="field-checkbox mb-0">
<p-checkbox name="group1" value="New York" [(ngModel)]="valCheck" id="ny"></p-checkbox>
<label for="ny">New York</label>
</div>
</div>
</div>
<h5>Input Switch</h5>
@ -142,10 +142,10 @@
<h5>Dropdown</h5>
<p-dropdown [options]="cities" [(ngModel)]="selectedDrop" placeholder="Select a City" [showClear]="true"></p-dropdown>
<h5>Multiselect</h5>
<h5>MultiSelect</h5>
<p-multiSelect [options]="countries" [(ngModel)]="selectedMulti" defaultLabel="Select a Country" optionLabel="name" class="multiselect-custom">
<ng-template let-value pTemplate="selectedItems">
<div class="country-item country-item-value" *ngFor="let option of selectedMulti">
<div class="country-item country-item-value inline-flex align-items-center py-1 px-2 bg-primary text-primary border-round mr-2" *ngFor="let option of selectedMulti">
<img src="assets/demo/flags/flag_placeholder.png" [class]="'flag flag-' + option.code.toLowerCase()" />
<div>{{option.name}}</div>
</div>
@ -154,17 +154,20 @@
</div>
</ng-template>
<ng-template let-country pTemplate="item">
<div class="country-item">
<img src="assets/demo/flags/flag_placeholder.png" [class]="'flag flag-' + country.code.toLowerCase()" />
<div class="flex align-items-center country-item">
<img src="assets/demo/flags/flag_placeholder.png" [class]="'mr-2 flag flag-' + country.code.toLowerCase()" style="width:18px; height:12px;"/>
<div>{{country.name}}</div>
</div>
</ng-template>
</p-multiSelect>
<h5>TreeSelect</h5>
<p-treeSelect [(ngModel)]="selectedNode" [options]="treeSelectNodes" placeholder="Select Item"></p-treeSelect>
</div>
<div class="card">
<h5>ToggleButton</h5>
<p-toggleButton [(ngModel)]="valToggle" onLabel="Yes" offLabel="No"></p-toggleButton>
<p-toggleButton [(ngModel)]="valToggle" onLabel="Yes" offLabel="No" [style]="{width:'10em'}"></p-toggleButton>
<h5>SelectButton</h5>
<p-selectButton [options]="paymentOptions" [(ngModel)]="valSelect1" optionLabel="name"></p-selectButton>

20
src/app/demo/view/inputdemo.component.ts
View File

@ -1,5 +1,6 @@
import {Component, OnInit} from '@angular/core';
import {CountryService} from '../service/countryservice';
import {NodeService} from '../service/nodeservice';
import {SelectItem} from 'primeng/api';
@Component({
@ -12,9 +13,9 @@ import {SelectItem} from 'primeng/api';
min-width: 20rem;
}
:host ::ng-deep .multiselect-custom .p-multiselect-label {
padding-top: .25rem;
padding-bottom: .25rem;
:host ::ng-deep .multiselect-custom .p-multiselect-label, {
padding-top: 0.75rem;
padding-bottom: 0.75rem;
}
@ -45,9 +46,6 @@ import {SelectItem} from 'primeng/api';
padding: 0.25rem;
}
:host ::ng-deep .p-colorpicker {
width: 2.5em
}
`]
})
export class InputDemoComponent implements OnInit{
@ -57,7 +55,7 @@ export class InputDemoComponent implements OnInit{
selectedCountryAdvanced: any[];
valSlider = 0;
valSlider = 50;
valColor = '#424242';
@ -75,6 +73,10 @@ export class InputDemoComponent implements OnInit{
selectedMulti: string[] = [];
treeSelectNodes: any[];
selectedNode: SelectItem;
valToggle = false;
paymentOptions: any[];
@ -87,7 +89,7 @@ export class InputDemoComponent implements OnInit{
selectedDate:any;
constructor(private countryService: CountryService) {}
constructor(private countryService: CountryService, private nodeService: NodeService) {}
ngOnInit() {
this.countryService.getCountries().then(countries => {
@ -107,6 +109,8 @@ export class InputDemoComponent implements OnInit{
{name: 'Option 2', value: 2},
{name: 'Option 3', value: 3}
];
this.nodeService.getTreeNodes().then(data => this.treeSelectNodes = data);
}
filterCountry(event) {

2
src/app/demo/view/invalidstatedemo.component.html
View File

@ -1,4 +1,4 @@
<div class="card floatlabel-demo">
<div class="card">
<h5>Invalid State</h5>
<div class="grid p-fluid">
<div class="col-12 md:col-6">

67
src/app/demo/view/listdemo.component.html
View File

@ -1,52 +1,59 @@
<div class="grid list-demo">
<div class="grid">
<div class="col-12">
<div class="card">
<h5>DataView</h5>
<p-dataView #dv [value]="products" [paginator]="true" [rows]="9" filterBy="name"
[sortField]="sortField" [sortOrder]="sortOrder" layout="grid">
<p-dataView #dv [value]="products" [paginator]="true" [rows]="9" filterBy="name" [sortField]="sortField" [sortOrder]="sortOrder" layout="grid">
<ng-template pTemplate="header">
<div class="grid grid-nogutter justify-content-between">
<p-dropdown [options]="sortOptions" [(ngModel)]="sortKey" placeholder="Sort By Price" (onChange)="onSortChange($event)" styleClass="mb-2 mb-md-0"></p-dropdown>
<span class="p-input-icon-left mb-2 mb-md-0"></span>
<p-dataViewLayoutOptions></p-dataViewLayoutOptions>
<div class="grid grid-nogutter">
<div class="col-6 text-left">
<p-dropdown [options]="sortOptions" [(ngModel)]="sortKey" placeholder="Sort By Price" (onChange)="onSortChange($event)"></p-dropdown>
</div>
<div class="col-6 text-right">
<p-dataViewLayoutOptions></p-dataViewLayoutOptions>
</div>
</div>
</ng-template>
<ng-template let-product pTemplate="listItem">
<div class="col-12">
<div class="product-list-item">
<img [src]="'assets/demo/images/product/' + product.image" [alt]="product.name"/>
<div class="product-list-detail">
<div class="product-name">{{product.name}}</div>
<div class="product-description">{{product.description}}</div>
<div class="flex flex-column md:flex-row align-items-center p-3 w-full">
<img [src]="'assets/demo/images/product/' + product.image" [alt]="product.name" class="my-4 md:my-0 w-9 md:w-10rem shadow-2 mr-5"/>
<div class="flex-1 text-center md:text-left">
<div class="font-bold text-2xl">{{product.name}}</div>
<div class="mb-3">{{product.description}}</div>
<p-rating [ngModel]="product.rating" [readonly]="true" [cancel]="false"></p-rating>
<i class="pi pi-tag product-category-icon"></i><span class="product-category">{{product.category}}</span>
<div class="flex align-items-center mt-2">
<i class="pi pi-tag mr-2"></i>
<span class="font-semibold">{{product.category}}</span>
</div>
</div>
<div class="product-list-action">
<span class="product-price">${{product.price}}</span>
<p-button icon="pi pi-shopping-cart" label="Add to Cart" [disabled]="product.inventoryStatus === 'OUTOFSTOCK'"></p-button>
<div class="flex flex-row md:flex-column justify-content-between w-full md:w-auto align-items-center md:align-items-end mt-5 md:mt-0">
<span class="text-2xl font-semibold mb-2 align-self-center md:align-self-end">${{product.price}}</span>
<p-button icon="pi pi-shopping-cart" label="Add to Cart" [disabled]="product.inventoryStatus === 'OUTOFSTOCK'" class="mb-2"></p-button>
<span [class]="'product-badge status-' + product.inventoryStatus.toLowerCase()">{{product.inventoryStatus}}</span>
</div>
</div>
</div>
</ng-template>
<ng-template let-product pTemplate="gridItem">
<div class="col-12 md:col-4">
<div class="product-grid-item card">
<div class="product-grid-item-top">
<div>
<i class="pi pi-tag product-category-icon"></i>
<span class="product-category">{{product.category}}</span>
<div class="card m-3 border-1 surface-border">
<div class="flex align-items-center justify-content-between">
<div class="flex align-items-center">
<i class="pi pi-tag mr-2"></i>
<span class="font-semibold">{{product.category}}</span>
</div>
<span [class]="'product-badge status-' + product.inventoryStatus.toLowerCase()">{{product.inventoryStatus}}</span>
<span [class]="'sm:ml-2 product-badge status-' + product.inventoryStatus.toLowerCase()">{{product.inventoryStatus}}</span>
</div>
<div class="product-grid-item-content">
<img [src]="'assets/demo/images/product/' + product.image" [alt]="product.name"/>
<div class="product-name">{{product.name}}</div>
<div class="product-description">{{product.description}}</div>
<div class="text-center">
<img [src]="'assets/demo/images/product/' + product.image" [alt]="product.name" class="w-9 shadow-2 my-3 mx-0"/>
<div class="text-2xl font-bold">{{product.name}}</div>
<div class="mb-3">{{product.description}}</div>
<p-rating [ngModel]="product.rating" [readonly]="true" [cancel]="false"></p-rating>
</div>
<div class="product-grid-item-bottom">
<span class="product-price">${{product.price}}</span>
<div class="flex align-items-center justify-content-between">
<span class="text-2xl font-semibold">${{product.price}}</span>
<p-button icon="pi pi-shopping-cart" [disabled]="product.inventoryStatus === 'OUTOFSTOCK'"></p-button>
</div>
</div>
@ -60,7 +67,7 @@
<div class="card">
<h5>PickList</h5>
<p-pickList [source]="sourceCities" [target]="targetCities" sourceHeader="From" targetHeader="To" dragdrop="true"
[responsive]="true" [sourceStyle]="{'height':'300px'}" [targetStyle]="{'height':'300px'}">
[responsive]="true">
<ng-template let-city pTemplate="item">
<div>{{city.name}}</div>
</ng-template>
@ -71,7 +78,7 @@
<div class="col-12 lg:col-4">
<div class="card">
<h5>OrderList</h5>
<p-orderList [value]="orderCities" [listStyle]="{'height':'auto'}" header="Cities" dragdrop="true">
<p-orderList [value]="orderCities" header="Cities" dragdrop="true">
<ng-template let-city pTemplate="item">
<div>{{city.name}}</div>
</ng-template>

1
src/app/demo/view/listdemo.component.ts
View File

@ -5,7 +5,6 @@ import {ProductService} from '../service/productservice';
@Component({
templateUrl: './listdemo.component.html',
styleUrls: ['./listdemo.scss']
})
export class ListDemoComponent implements OnInit {

146
src/app/demo/view/listdemo.scss
View File

@ -1,146 +0,0 @@
:host ::ng-deep {
.p-dropdown {
width: 14rem;
font-weight: normal;
}
.product-name {
font-size: 1.5rem;
font-weight: 700;
}
.product-description {
margin: 0 0 1rem 0;
}
.product-category-icon {
vertical-align: middle;
margin-right: .5rem;
}
.product-category {
font-weight: 600;
vertical-align: middle;
}
.product-list-item {
display: flex;
align-items: center;
padding: 1rem;
width: 100%;
img {
width: 150px;
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
margin-right: 2rem;
}
.product-list-detail {
flex: 1 1 0;
}
.p-rating {
margin: 0 0 .5rem 0;
}
.product-price {
font-size: 1.5rem;
font-weight: 600;
margin-bottom: .5rem;
align-self: flex-end;
}
.product-list-action {
display: flex;
flex-direction: column;
}
.p-button {
margin-bottom: .5rem;
}
}
.product-grid-item {
margin: .5em;
border: 1px solid var(--surface-d);
.product-grid-item-top,
.product-grid-item-bottom {
display: flex;
align-items: center;
justify-content: space-between;
}
img {
width: 75%;
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
margin: 2rem 0;
}
.product-grid-item-content {
text-align: center;
}
.product-price {
font-size: 1.5rem;
font-weight: 600;
}
}
}
.product-badge {
border-radius: 2px;
padding: .25em .5rem;
text-transform: uppercase;
font-weight: 700;
font-size: 12px;
letter-spacing: .3px;
&.status-instock {
background: #C8E6C9;
color: #256029;
}
&.status-outofstock {
background: #FFCDD2;
color: #C63737;
}
&.status-lowstock {
background: #FEEDAF;
color: #8A5340;
}
}
@media screen and (max-width: 576px) {
:host ::ng-deep .product-list-item {
flex-direction: column;
align-items: center;
img {
width: 75%;
margin: 2rem 0;
}
.product-list-detail {
text-align: center;
}
.product-price {
align-self: center;
}
.product-list-action {
display: flex;
flex-direction: column;
}
.product-list-action {
margin-top: 2rem;
flex-direction: row;
justify-content: space-between;
align-items: center;
width: 100%;
}
}
}

24
src/app/demo/view/mediademo.scss
View File

@ -12,27 +12,3 @@
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23)
}
}
.product-badge {
border-radius: 2px;
padding: .25em .5rem;
text-transform: uppercase;
font-weight: 700;
font-size: 12px;
letter-spacing: .3px;
&.status-instock {
background: #C8E6C9;
color: #256029;
}
&.status-outofstock {
background: #FFCDD2;
color: #C63737;
}
&.status-lowstock {
background: #FEEDAF;
color: #8A5340;
}
}

28
src/app/demo/view/menusdemo.component.html
View File

@ -1,6 +1,6 @@
<div class="grid p-fluid">
<div class="col-12">
<div class="card">
<div class="card card-w-title">
<h5>MenuBar</h5>
<p-menubar [model]="tieredItems">
<ng-template pTemplate="end">
@ -14,50 +14,50 @@
</div>
<div class="col-12">
<div class="card">
<div class="card card-w-title">
<h5>Breadcrumb</h5>
<p-breadcrumb [model]="breadcrumbItems" [home]="{icon: 'pi pi-home'}"></p-breadcrumb>
</div>
</div>
<!-- TODO: ROUTERVIEW PROBLEM ? -->
<div class="col-12 md:col-6">
<div class="card">
<div class="card card-w-title">
<h5>Steps</h5>
<p-steps [model]="stepsItems" [activeIndex]="1"></p-steps>
</div>
</div>
<div class="col-12 md:col-6">
<div class="card">
<div class="card card-w-title">
<h5>TabMenu</h5>
<p-tabMenu [model]="tabMenuItems" [activeItem]="tabMenuItems[0]"></p-tabMenu>
</div>
</div>
<div class="col-12 md:col-4">
<div class="card">
<div class="card card-w-title">
<h5>TieredMenu</h5>
<p-tieredMenu [model]="tieredItems"></p-tieredMenu>
</div>
</div>
<div class="col-12 md:col-4">
<div class="card">
<div class="card card-w-title">
<h5>Plain Menu</h5>
<p-menu [model]="items" [style]="{'width':'100%'}"></p-menu>
<p-menu [model]="plainMenuItems"></p-menu>
</div>
</div>
<div class="col-12 md:col-4">
<div class="card">
<div class="card card-w-title">
<h5>Overlay Menu</h5>
<p-menu #menu [popup]="true" [model]="items" style="width:175px"></p-menu>
<button type="button" pButton icon="pi pi-chevron-down" label="Options" (click)="menu.toggle($event)"></button>
<p-menu #menu [popup]="true" [model]="menuItems"></p-menu>
<button type="button" pButton icon="pi pi-chevron-down" label="Options" (click)="menu.toggle($event)" style="width:auto"></button>
</div>
<div class="card">
<div class="card card-w-title">
<h5>ContextMenu</h5>
Right click to display.
<p-contextMenu [global]="true" [model]="menuItems"></p-contextMenu>
@ -65,7 +65,7 @@
</div>
<div class="col-12 md:col-6">
<div class="card">
<div class="card card-w-title">
<h5>MegaMenu - Horizontal</h5>
<p-megaMenu [model]="megaMenuItems"></p-megaMenu>
@ -75,7 +75,7 @@
</div>
<div class="col-12 md:col-6">
<div class="card">
<div class="card card-w-title">
<h5>PanelMenu</h5>
<p-panelMenu [model]="panelMenuItems"></p-panelMenu>
</div>

34
src/app/demo/view/menusdemo.component.ts
View File

@ -25,6 +25,8 @@ export class MenusDemoComponent implements OnInit {
menuItems: MenuItem[];
plainMenuItems: MenuItem[];
ngOnInit() {
this.tieredItems = [
@ -172,7 +174,7 @@ export class MenusDemoComponent implements OnInit {
separator: true
},
{
label: 'Quit', icon: 'pi pi-fw pi-sign-out'
label: 'Home', icon: 'pi pi-fw pi-home'
},
];
@ -242,6 +244,36 @@ export class MenusDemoComponent implements OnInit {
}
];
this.plainMenuItems = [
{
label: 'Customers',
items: [
{
label: 'New',
icon: 'pi pi-fw pi-plus'
},
{
label: 'Edit',
icon: 'pi pi-fw pi-user-edit'
}
]
},
{
label: 'Orders',
items: [
{
label: 'View',
icon: 'pi pi-fw pi-list'
},
{
label: 'Search',
icon: 'pi pi-fw pi-search'
}
]
}
];
this.breadcrumbItems = [];
this.breadcrumbItems.push({ label: 'Electronics' });
this.breadcrumbItems.push({ label: 'Computer' });

30
src/app/demo/view/messagesdemo.component.html
View File

@ -3,20 +3,20 @@
<div class="card">
<h5>Toast</h5>
<p-toast key="tst" [baseZIndex]="99999"></p-toast>
<button type="button" pButton (click)="showSuccessViaToast()" label="Success" class="p-button-success mr-2 mb-2"></button>
<button type="button" pButton (click)="showInfoViaToast()" label="Info" class="p-button-info mr-2 mb-2"></button>
<button type="button" pButton (click)="showWarnViaToast()" label="Warn" class="p-button-warning mr-2 mb-2"></button>
<button type="button" pButton (click)="showErrorViaToast()" label="Error" class="p-button-danger mb-2"></button>
<button type="button" pButton (click)="showSuccessViaToast()" label="Success" class="p-button-success mr-2"></button>
<button type="button" pButton (click)="showInfoViaToast()" label="Info" class="p-button-info mr-2"></button>
<button type="button" pButton (click)="showWarnViaToast()" label="Warn" class="p-button-warning mr-2"></button>
<button type="button" pButton (click)="showErrorViaToast()" label="Error" class="p-button-danger"></button>
</div>
</div>
<div class="col-12 lg:col-6">
<div class="card z-3">
<h5>Messages</h5>
<button type="button" pButton (click)="showSuccessViaMessages()" label="Success" class="p-button-success mr-2 mb-2"></button>
<button type="button" pButton (click)="showInfoViaMessages()" label="Info" class="p-button-info mr-2 mb-2"></button>
<button type="button" pButton (click)="showWarnViaMessages()" label="Warn" class="p-button-warning mr-2 mb-2"></button>
<button type="button" pButton (click)="showErrorViaMessages()" label="Error" class="p-button-danger mb-2"></button>
<button type="button" pButton (click)="showSuccessViaMessages()" label="Success" class="p-button-success mr-2"></button>
<button type="button" pButton (click)="showInfoViaMessages()" label="Info" class="p-button-info mr-2"></button>
<button type="button" pButton (click)="showWarnViaMessages()" label="Warn" class="p-button-warning mr-2"></button>
<button type="button" pButton (click)="showErrorViaMessages()" label="Error" class="p-button-danger"></button>
<p-messages [value]="msgs"></p-messages>
</div>
@ -25,15 +25,15 @@
<div class="col-12 lg:col-8">
<div class="card">
<h5>Inline</h5>
<div class="mt-4 grid align-items-center">
<div class="field grid">
<label for="username" class="col-fixed w-9rem">Username</label>
<div class="col">
<input type="text" #username pInputText placeholder="Username" class="ng-dirty ng-invalid mr-2">
<input id="username" type="text" #username pInputText placeholder="Username" class="ng-dirty ng-invalid mr-2">
<p-message severity="error" text="Field is required"></p-message>
</div>
</div>
<div class="mt-4 grid align-items-center">
<div class="field grid">
<label for="email" class="col-fixed w-9rem">Email</label>
<div class="col">
<input type="text" #email pInputText placeholder="Email" label="email" class="ng-dirty ng-invalid mr-2">
@ -46,10 +46,10 @@
<div class="col-12 lg:col-4">
<div class="card">
<h5>Help Text</h5>
<div class="p-field p-fluid">
<label for="username">Username</label>
<input id="username" type="username" aria-describedby="username-help" class="ng-dirty ng-invalid my-3" pInputText />
<small id="username-help" class="p-error">Username is not available.</small>
<div class="field p-fluid">
<label for="username2">Username</label>
<input id="username2" type="username" aria-describedby="username-help" class="ng-dirty ng-invalid" pInputText />
<small id="username-help" class="p-error">Enter your username to reset your password.</small>
</div>
</div>
</div>

6
src/app/demo/view/messagesdemo.component.ts
View File

@ -4,16 +4,12 @@ import {Message, MessageService} from 'primeng/api';
@Component({
templateUrl: './messagesdemo.component.html',
styles: [`
:host ::ng-deep .p-button {
min-width: 8em;
}
:host ::ng-deep .p-message {
margin-left: .25em;
}
:host ::ng-deep .p-toast{
margin-top: 5em;
margin-top: 5.70em;
z-index:99999;
}
`],

4
src/app/demo/view/miscdemo.component.html
View File

@ -16,7 +16,7 @@
<div class="card">
<h4>Badge</h4>
<h5>Numbers</h5>
<div class="badges">
<div>
<p-badge [value]="2" styleClass="mr-2"></p-badge>
<p-badge [value]="8" severity="success" styleClass="mr-2"></p-badge>
<p-badge [value]="4" severity="info" styleClass="mr-2"></p-badge>
@ -35,7 +35,7 @@
<p-button label="Messages" icon="pi pi-users" styleClass="p-button-warning" badge="8" badgeClass="p-badge-danger"></p-button>
<h5>Sizes</h5>
<div class="badges">
<div>
<p-badge [value]="2" styleClass="mr-2"></p-badge>
<p-badge [value]="4" size="large" severity="warning" styleClass="mr-2"></p-badge>
<p-badge [value]="6" size="xlarge" severity="success" styleClass="mr-2"></p-badge>

30
src/app/demo/view/overlaysdemo.component.html
View File

@ -3,38 +3,38 @@
<div class="col-12 lg:col-6">
<div class="card p-fluid">
<h5>Dialog</h5>
<p-dialog header="Dialog" [(visible)]="display" modal="modal" showEffect="fade" [style]="{width: '400px'}">
<div style="line-height: 1.5">
<p-dialog header="Dialog" [(visible)]="display" modal="modal" showEffect="fade" [style]="{width: '30vw'}" [breakpoints]="{'960px': '75vw'}">
<p class="line-height-3 m-0">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit
in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</p>
<p-footer>
<button type="button" pButton icon="pi pi-check" (click)="display=false" label="Dismiss" class="p-button-secondary"></button>
<button pButton icon="pi pi-check" (click)="display=false" label="Dismiss" class="p-button-secondary"></button>
</p-footer>
</p-dialog>
<div class="grid">
<div class="col-12">
<button type="text" (click)="display=true" pButton icon="pi pi-external-link" label="Show"></button>
<button (click)="display=true" pButton icon="pi pi-external-link" label="Show"></button>
</div>
</div>
</div>
<div class="card p-fluid">
<h5>Overlay Panel</h5>
<div class="grid">
<div class="grid formgrid">
<div class="col-6">
<button type="button" pButton label="Image" (click)="op1.toggle($event)" class="p-button-success"></button>
<p-overlayPanel #op1 [showCloseIcon]="true" [style]="{width:'350px'}">
<p-overlayPanel #op1 [showCloseIcon]="true" [style]="{width: '375px'}">
<img src="assets/demo/images/nature/nature1.jpg" alt="Nature 1" style="width:100%"/>
</p-overlayPanel>
</div>
<div class="col-6">
<button type="button" pButton label="DataTable" (click)="op2.toggle($event)" class="p-button-success"></button>
<p-overlayPanel #op2 [showCloseIcon]="true" [style]="{width: '400px'}">
<p-overlayPanel #op2 [showCloseIcon]="true" [style]="{width: '375px'}">
<ng-template pTemplate>
<p-table [value]="products" selectionMode="single" [(selection)]="selectedProduct" [paginator]="true" [rows]="5" (onRowSelect)="op2.hide()">
<p-table [value]="products" selectionMode="single" [(selection)]="selectedProduct" [paginator]="true" [rows]="5" (onRowSelect)="op2.hide()" responsiveLayout="scroll">
<ng-template pTemplate="header">
<tr>
<th pSortableColumn="name">Name<p-sortIcon field="name"></p-sortIcon></th>
@ -45,7 +45,7 @@
<ng-template pTemplate="body" let-rowData let-product>
<tr [pSelectableRow]="rowData">
<td>{{product.name}}</td>
<td><img src="assets/demo/images/product/{{product.image}}" [alt]="product.image" class="product-image" /></td>
<td><img src="assets/demo/images/product/{{product.image}}" [alt]="product.image" width="100" class="shadow-2"/></td>
<td>{{formatCurrency(product.price)}}</td>
</tr>
</ng-template>
@ -61,7 +61,7 @@
<div class="card p-fluid">
<h5>Confirmation</h5>
<p-confirmDialog header="Confirmation" key="confirm1" icon="pi pi-exclamation-triangle" message="Are you sure you want to proceed?"
[style]="{width: '300px'}" acceptButtonStyleClass="p-button-text" rejectButtonStyleClass="p-button-text"></p-confirmDialog>
[style]="{width: '350px'}" acceptButtonStyleClass="p-button-text" rejectButtonStyleClass="p-button-text"></p-confirmDialog>
<div class="grid">
<div class="col-12">
<button type="text" (click)="confirm1()" pButton icon="pi pi-trash" label="Delete" class="p-button-danger"></button>
@ -91,10 +91,10 @@
<h3 style="font-weight:normal">Full Screen Sidebar</h3>
</p-sidebar>
<button pButton type="button" (click)="visibleSidebar1 = true" icon="pi pi-arrow-right" class="p-button-warning"></button>
<button pButton type="button" (click)="visibleSidebar2 = true" icon="pi pi-arrow-left" class="p-button-warning"></button>
<button pButton type="button" (click)="visibleSidebar3 = true" icon="pi pi-arrow-down" class="p-button-warning"></button>
<button pButton type="button" (click)="visibleSidebar4 = true" icon="pi pi-arrow-up" class="p-button-warning"></button>
<button pButton type="button" (click)="visibleSidebar1 = true" icon="pi pi-arrow-right" class="p-button-warning mr-2"></button>
<button pButton type="button" (click)="visibleSidebar2 = true" icon="pi pi-arrow-left" class="p-button-warning mr-2"></button>
<button pButton type="button" (click)="visibleSidebar3 = true" icon="pi pi-arrow-down" class="p-button-warning mr-2"></button>
<button pButton type="button" (click)="visibleSidebar4 = true" icon="pi pi-arrow-up" class="p-button-warning mr-2"></button>
<button pButton type="button" (click)="visibleSidebar5 = true" icon="pi pi-external-link" class="p-button-warning"></button>
</div>
</div>

1
src/app/demo/view/overlaysdemo.component.ts
View File

@ -6,7 +6,6 @@ import {ProductService} from '../service/productservice';
@Component({
templateUrl: './overlaysdemo.component.html',
styleUrls: ['./overlaysdemo.scss'],
providers: [ConfirmationService, MessageService]
})
export class OverlaysDemoComponent implements OnInit {

14
src/app/demo/view/overlaysdemo.scss
View File

@ -1,14 +0,0 @@
.product-image {
width: 50px;
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23)
}
:host ::ng-deep button {
margin-right: .25em;
}
@media (max-width: 1024px){
:host ::ng-deep .p-dialog{
margin: 0 20px;
}
}

71
src/app/demo/view/panelsdemo.component.html
View File

@ -1,18 +1,17 @@
<div class="grid">
<div class="col-12">
<div class="card panel-demo">
<div class="card">
<h5>Toolbar</h5>
<p-toolbar>
<div class="p-toolbar-group-left flex flex-wrap">
<button pButton type="button" label="New" icon="pi pi-plus"></button>
<button pButton type="button" label="Update" class="p-button-secondary"
icon="pi pi-refresh"></button>
<button pButton type="button" label="New" icon="pi pi-plus" class="mr-2 sm:mb-2"></button>
<button pButton type="button" label="Open" icon="pi pi-folder-open" class="p-button-secondary mr-2"></button>
<i class="pi pi-bars p-toolbar-separator"></i>
<button pButton type="button" class="p-button-success" icon="pi pi-check"></button>
<button pButton type="button" class="p-button-help" icon="pi pi-print"></button>
<button pButton type="button" class="p-button-danger" icon="pi pi-trash"></button>
<button pButton type="button" icon="pi pi-check" class="p-button-success mr-2"></button>
<button pButton type="button" icon="pi pi-trash" class="p-button-warning mr-2"></button>
<button pButton type="button" icon="pi pi-print" class="p-button-danger sm:mb-2"></button>
</div>
<div class="p-toolbar-group-right">
@ -26,7 +25,7 @@
<div class="card">
<h5>AccordionPanel</h5>
<p-accordion>
<p-accordionTab header="Header I" [selected]="true">
<p-accordionTab header="Header I" [selected]="true" class="line-height-3 m-0">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
@ -36,7 +35,7 @@
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id
est laborum.
</p-accordionTab>
<p-accordionTab header="Header II">
<p-accordionTab header="Header II" class="line-height-3 m-0">
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium,
totam rem aperiam, eaque
ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo
@ -45,7 +44,7 @@
voluptatem sequi nesciunt.
Consectetur, adipisci velit, sed quia non numquam eius modi.
</p-accordionTab>
<p-accordionTab header="Header III">
<p-accordionTab header="Header III" class="line-height-3 m-0">
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum
deleniti atque corrupti quos dolores
et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui
@ -60,7 +59,7 @@
<div class="card">
<h5>TabView</h5>
<p-tabView orientation="left">
<p-tabPanel header="Header I">
<p-tabPanel header="Header I" class="line-height-3 m-0">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
@ -70,7 +69,7 @@
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id
est laborum.
</p-tabPanel>
<p-tabPanel header="Header II">
<p-tabPanel header="Header II" class="line-height-3 m-0">
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium,
totam rem aperiam, eaque
ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo
@ -79,7 +78,7 @@
voluptatem sequi nesciunt.
Consectetur, adipisci velit, sed quia non numquam eius modi.
</p-tabPanel>
<p-tabPanel header="Header III">
<p-tabPanel header="Header III" class="line-height-3 m-0">
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum
deleniti atque corrupti quos dolores
et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui
@ -95,7 +94,7 @@
<div class="col-12 md:col-6">
<div class="card">
<h5>Panel</h5>
<p-panel header="Header" [toggleable]="true">
<p-panel header="Header" [toggleable]="true" class="line-height-3 m-0">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
@ -108,7 +107,7 @@
<div class="card">
<h5>Fieldset</h5>
<p-fieldset legend="Legend" toggleable="true">
<p-fieldset legend="Legend" toggleable="true" class="line-height-3 m-0">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
@ -120,10 +119,10 @@
</div>
<div class="card">
<div class="flex align-items-center justify-content-between mb-0 p-3 pb-0">
<div class="flex align-items-center justify-content-between mb-0">
<h5>Card</h5>
<p-menu #menu [popup]="true" [model]="cardMenu"></p-menu>
<button pButton type="button" icon="pi pi-plus" class="p-button-rounded p-button-plain p-button-text"
<button pButton type="button" icon="pi pi-plus" class="p-button-text"
(click)="menu.toggle($event)"></button>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
@ -142,24 +141,24 @@
<div class="grid">
<div class="col-5 flex align-items-center justify-content-center">
<div class="p-fluid">
<div class="p-field mb-3">
<div class="field">
<label for="username">Username</label>
<input pInputText id="username" type="text"/>
</div>
<div class="p-field mb-3">
<div class="field">
<label for="password">Password</label>
<input pInputText id="password" type="password"/>
</div>
<p-button label="Login" styleClass="m-0"></p-button>
<p-button label="Login" class="mt-2"></p-button>
</div>
</div>
<div class="col-1">
<div class="col-2">
<p-divider layout="vertical">
<b>OR</b>
</p-divider>
</div>
<div class="col-5 align-items-center justify-content-center">
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium,
<p class="line-height-3 m-0">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium,
totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi
architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit
aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione
@ -169,7 +168,7 @@
<span class="p-tag">Badge</span>
</p-divider>
<p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum
<p class="line-height-3 m-0">At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum
deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati
cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est
laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio.
@ -179,7 +178,7 @@
<p-button label="Button" icon="pi pi-search" styleClass="p-button-outlined"></p-button>
</p-divider>
<p>Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et
<p class="line-height-3 m-0">Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et
voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur
a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis
doloribus asperiores repellat.
@ -193,21 +192,21 @@
<div class="col-12">
<div class="card">
<h5>Splitter</h5>
<p-splitter [style]="{'height': '300px'}" [panelSizes]="[20,80]" [minSizes]="[10,0]" styleClass="mb-5">
<ng-template pTemplate="panel">
<div class="col flex align-items-center justify-content-center p-2" style="overflow: auto">
<p-splitter [style]="{'height': '300px'}" [minSizes]="[10,0]" styleClass="mb-5" [panelStyle]="{'overflow': 'scroll'}">
<ng-template pTemplate>
<p class="col m-3">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit
in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim
id est laborum.
</div>
</p>
</ng-template>
<ng-template pTemplate="panel">
<p-splitter layout="vertical" [panelSizes]="[30,70]" [minSizes]="[10,10]" panelStyleClass="splitter-overflow">
<ng-template pTemplate="panel">
<div class="d-flex align-items-center justify-content-center p-2">
<ng-template pTemplate>
<p-splitter layout="vertical" [panelSizes]="[30,70]" [minSizes]="[10,10]" [style]="{'overflow':'scroll'}">
<ng-template pTemplate>
<p class="col m-3">
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
doloremque
laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi
@ -217,17 +216,17 @@
aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione
voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius
modi.
</div>
</p>
</ng-template>
<ng-template pTemplate="panel">
<div class="d-flex align-items-center justify-content-center p-2">
<ng-template pTemplate>
<p class="col m-3">
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis
praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias
excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui
officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem
rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est
eligendi optio cumque nihil impedit quo minus.
</div>
</p>
</ng-template>
</p-splitter>
</ng-template>

21
src/app/demo/view/panelsdemo.component.ts
View File

@ -3,27 +3,6 @@ import {MenuItem} from 'primeng/api';
@Component({
templateUrl: './panelsdemo.component.html',
styles: [`
:host ::ng-deep button {
margin-right: .25em;
margin-left: .25em;
}
:host ::ng-deep .p-splitbutton button {
margin-right: 0;
margin-left: 0;
}
:host ::ng-deep .p-splitter-panel-nested {
overflow: auto;
}
@media screen and (max-width: 960px) {
.card.toolbar-demo {
overflow: auto;
}
}
`]
})
export class PanelsDemoComponent implements OnInit {

54
src/assets/demo/data/treenodes.json Normal file
View File

@ -0,0 +1,54 @@
{
"root": [
{
"key": "0",
"label": "Documents",
"data": "Documents Folder",
"icon": "pi pi-fw pi-inbox",
"children": [{
"key": "0-0",
"label": "Work",
"data": "Work Folder",
"icon": "pi pi-fw pi-cog",
"children": [{ "key": "0-0-0", "label": "Expenses.doc", "icon": "pi pi-fw pi-file", "data": "Expenses Document" }, { "key": "0-0-1", "label": "Resume.doc", "icon": "pi pi-fw pi-file", "data": "Resume Document" }]
},
{
"key": "0-1",
"label": "Home",
"data": "Home Folder",
"icon": "pi pi-fw pi-home",
"children": [{ "key": "0-1-0", "label": "Invoices.txt", "icon": "pi pi-fw pi-file", "data": "Invoices for this month" }]
}]
},
{
"key": "1",
"label": "Events",
"data": "Events Folder",
"icon": "pi pi-fw pi-calendar",
"children": [
{ "key": "1-0", "label": "Meeting", "icon": "pi pi-fw pi-calendar-plus", "data": "Meeting" },
{ "key": "1-1", "label": "Product Launch", "icon": "pi pi-fw pi-calendar-plus", "data": "Product Launch" },
{ "key": "1-2", "label": "Report Review", "icon": "pi pi-fw pi-calendar-plus", "data": "Report Review" }]
},
{
"key": "2",
"label": "Movies",
"data": "Movies Folder",
"icon": "pi pi-fw pi-star",
"children": [{
"key": "2-0",
"icon": "pi pi-fw pi-star",
"label": "Al Pacino",
"data": "Pacino Movies",
"children": [{ "key": "2-0-0", "label": "Scarface", "icon": "pi pi-fw pi-video", "data": "Scarface Movie" }, { "key": "2-0-1", "label": "Serpico", "icon": "pi pi-fw pi-video", "data": "Serpico Movie" }]
},
{
"key": "2-1",
"label": "Robert De Niro",
"icon": "pi pi-fw pi-star",
"data": "De Niro Movies",
"children": [{ "key": "2-1-0", "label": "Goodfellas", "icon": "pi pi-fw pi-video", "data": "Goodfellas Movie" }, { "key": "2-1-1", "label": "Untouchables", "icon": "pi pi-fw pi-video", "data": "Untouchables Movie" }]
}]
}
]
}

307
src/styles.scss
View File

@ -8,146 +8,96 @@
@import "../node_modules/@fullcalendar/timegrid/main.min.css";
@import "assets/demo/flags/flags.css";
.list-demo {
.product-name {
font-size: 1.5rem;
font-weight: 700;
.product-badge {
border-radius: var(--border-radius);
padding: .25em .5rem;
text-transform: uppercase;
font-weight: 700;
font-size: 12px;
letter-spacing: .3px;
&.status-instock {
background: #C8E6C9;
color: #256029;
}
.product-description {
margin: 0 0 1rem 0;
&.status-outofstock {
background: #FFCDD2;
color: #C63737;
}
.product-category-icon {
vertical-align: middle;
margin-right: .5rem;
&.status-lowstock {
background: #FEEDAF;
color: #8A5340;
}
}
.customer-badge {
border-radius: var(--border-radius);
padding: .25em .5rem;
text-transform: uppercase;
font-weight: 700;
font-size: 12px;
letter-spacing: .3px;
&.status-qualified {
background: #C8E6C9;
color: #256029;
}
.product-category {
font-weight: 600;
vertical-align: middle;
&.status-unqualified {
background: #FFCDD2;
color: #C63737;
}
.product-list-item {
display: flex;
align-items: center;
padding: 1rem;
width: 100%;
img {
width: 150px;
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
margin-right: 2rem;
}
.product-list-detail {
flex: 1 1 0;
}
.p-rating {
margin: 0 0 .5rem 0;
}
.product-price {
font-size: 1.5rem;
font-weight: 600;
margin-bottom: .5rem;
align-self: flex-end;
}
.product-list-action {
display: flex;
flex-direction: column;
}
.p-button {
margin-bottom: .5rem;
}
&.status-negotiation {
background: #FEEDAF;
color: #8A5340;
}
.product-badge {
border-radius: 2px;
padding: .25em .5rem;
text-transform: uppercase;
font-weight: 700;
font-size: 12px;
letter-spacing: .3px;
&.status-instock {
background: #C8E6C9;
color: #256029;
}
&.status-outofstock {
background: #FFCDD2;
color: #C63737;
}
&.status-lowstock {
background: #FEEDAF;
color: #8A5340;
}
&.status-new {
background: #B3E5FC;
color: #23547B;
}
.product-grid-item {
margin: .5em;
border: 1px solid #dee2e6;
.product-grid-item-top,
.product-grid-item-bottom {
display: flex;
align-items: center;
justify-content: space-between;
}
img {
width: 75%;
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
margin: 2rem 0;
}
.product-grid-item-content {
text-align: center;
}
.product-price {
font-size: 1.5rem;
font-weight: 600;
}
&.status-renewal {
background: #ECCFFF;
color: #694382;
}
@media screen and (max-width: 576px) {
.product-list-item {
flex-direction: column;
align-items: center;
&.status-proposal {
background: #FFD8B2;
color: #805B36;
}
}
img {
width: 75%;
margin: 2rem 0;
}
.order-badge {
border-radius: var(--border-radius);
padding: .25em .5rem;
text-transform: uppercase;
font-weight: 700;
font-size: 12px;
letter-spacing: .3px;
.product-list-detail {
text-align: center;
}
&.order-delivered {
background: #C8E6C9;
color: #256029;
}
.product-price {
align-self: center;
}
&.order-cancelled {
background: #FFCDD2;
color: #C63737;
}
.product-list-action {
display: flex;
flex-direction: column;
}
&.order-pending {
background: #FEEDAF;
color: #8A5340;
}
.product-list-action {
margin-top: 2rem;
flex-direction: row;
justify-content: space-between;
align-items: center;
width: 100%;
}
}
&.order-returned {
background: #ECCFFF;
color: #694382;
}
}
@ -196,45 +146,6 @@
display: none;
}
.customer-badge {
border-radius: 2px;
padding: .25em .5rem;
text-transform: uppercase;
font-weight: 700;
font-size: 12px;
letter-spacing: .3px;
&.status-qualified {
background: #C8E6C9;
color: #256029;
}
&.status-unqualified {
background: #FFCDD2;
color: #C63737;
}
&.status-negotiation {
background: #FEEDAF;
color: #8A5340;
}
&.status-new {
background: #B3E5FC;
color: #23547B;
}
&.status-renewal {
background: #ECCFFF;
color: #694382;
}
&.status-proposal {
background: #FFD8B2;
color: #805B36;
}
}
.p-progressbar-value.ui-widget-header {
background: #607d8b;
}
@ -254,58 +165,6 @@
padding: 1rem;
}
.product-badge {
border-radius: 2px;
padding: .25em .5rem;
text-transform: uppercase;
font-weight: 700;
font-size: 12px;
letter-spacing: .3px;
&.status-instock {
background: #C8E6C9;
color: #256029;
}
&.status-outofstock {
background: #FFCDD2;
color: #C63737;
}
&.status-lowstock {
background: #FEEDAF;
color: #8A5340;
}
}
.order-badge {
border-radius: 2px;
padding: .25em .5rem;
text-transform: uppercase;
font-weight: 700;
font-size: 12px;
letter-spacing: .3px;
&.order-delivered {
background: #C8E6C9;
color: #256029;
}
&.order-cancelled {
background: #FFCDD2;
color: #C63737;
}
&.order-pending {
background: #FEEDAF;
color: #8A5340;
}
&.order-returned {
background: #ECCFFF;
color: #694382;
}
}
@media screen and (max-width: 960px) {
.p-datatable {
@ -358,30 +217,6 @@
flex-wrap: wrap;
}
.product-badge {
border-radius: 2px;
padding: .25em .5rem;
text-transform: uppercase;
font-weight: 700;
font-size: 12px;
letter-spacing: .3px;
&.status-instock {
background: #C8E6C9;
color: #256029;
}
&.status-outofstock {
background: #FFCDD2;
color: #C63737;
}
&.status-lowstock {
background: #FEEDAF;
color: #8A5340;
}
}
/* Responsive */
.datatable-responsive .p-datatable-tbody > tr > td .p-column-title {
display: none;