From 6b24f8fcbe75f3b7db3edca69e4421813e1a47a4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=87etin?= <69278826+cetincakiroglu@users.noreply.github.com> Date: Wed, 22 Dec 2021 16:06:49 +0300 Subject: [PATCH] remove unused classes --- src/app/app.menu.component.ts | 5 +- src/app/app.module.ts | 2 + src/app/demo/service/nodeservice.ts | 6 + src/app/demo/view/buttondemo.component.html | 2 +- src/app/demo/view/chartsdemo.component.html | 28 +- src/app/demo/view/dashboard.component.html | 9 +- .../demo/view/documentation.component.html | 39 ++- src/app/demo/view/filedemo.component.html | 2 +- src/app/demo/view/filedemo.component.ts | 4 - src/app/demo/view/floatlabeldemo.component.ts | 2 - src/app/demo/view/floatlabeldemo.scss | 9 - src/app/demo/view/inputdemo.component.html | 39 ++- src/app/demo/view/inputdemo.component.ts | 20 +- .../demo/view/invalidstatedemo.component.html | 2 +- src/app/demo/view/listdemo.component.html | 67 ++-- src/app/demo/view/listdemo.component.ts | 1 - src/app/demo/view/listdemo.scss | 146 --------- src/app/demo/view/mediademo.scss | 24 -- src/app/demo/view/menusdemo.component.html | 28 +- src/app/demo/view/menusdemo.component.ts | 34 +- src/app/demo/view/messagesdemo.component.html | 30 +- src/app/demo/view/messagesdemo.component.ts | 6 +- src/app/demo/view/miscdemo.component.html | 4 +- src/app/demo/view/overlaysdemo.component.html | 30 +- src/app/demo/view/overlaysdemo.component.ts | 1 - src/app/demo/view/overlaysdemo.scss | 14 - src/app/demo/view/panelsdemo.component.html | 71 ++-- src/app/demo/view/panelsdemo.component.ts | 21 -- src/assets/demo/data/treenodes.json | 54 +++ src/styles.scss | 307 ++++-------------- 30 files changed, 361 insertions(+), 646 deletions(-) delete mode 100644 src/app/demo/view/floatlabeldemo.scss delete mode 100644 src/app/demo/view/listdemo.scss delete mode 100644 src/app/demo/view/overlaysdemo.scss create mode 100644 src/assets/demo/data/treenodes.json diff --git a/src/app/app.menu.component.ts b/src/app/app.menu.component.ts index e607653..84f1128 100644 --- a/src/app/app.menu.component.ts +++ b/src/app/app.menu.component.ts @@ -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', diff --git a/src/app/app.module.ts b/src/app/app.module.ts index fd52f3d..0e93817 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -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, diff --git a/src/app/demo/service/nodeservice.ts b/src/app/demo/service/nodeservice.ts index bc756b4..3e39a5a 100755 --- a/src/app/demo/service/nodeservice.ts +++ b/src/app/demo/service/nodeservice.ts @@ -31,4 +31,10 @@ export class NodeService { .toPromise() .then(res => res.data as TreeNode[]); } + + getTreeNodes(){ + return this.http.get('assets/demo/data/treenodes.json') + .toPromise() + .then(res => res.data as TreeNode[]); + } } diff --git a/src/app/demo/view/buttondemo.component.html b/src/app/demo/view/buttondemo.component.html index d0d1dac..67e2a9d 100644 --- a/src/app/demo/view/buttondemo.component.html +++ b/src/app/demo/view/buttondemo.component.html @@ -1,4 +1,4 @@ -
+
Default
diff --git a/src/app/demo/view/chartsdemo.component.html b/src/app/demo/view/chartsdemo.component.html index 550262a..5bf986c 100755 --- a/src/app/demo/view/chartsdemo.component.html +++ b/src/app/demo/view/chartsdemo.component.html @@ -1,42 +1,34 @@
-
Linear Chart
+
Linear Chart
-
Pie Chart
-
- -
+
Pie Chart
+
-
Polar Area Chart
-
- -
+
Polar Area Chart
+
-
Bar Chart
+
Bar Chart
-
Doughnut Chart
-
- -
+
Doughnut Chart
+
-
Radar Chart
-
- -
+
Radar Chart
+
diff --git a/src/app/demo/view/dashboard.component.html b/src/app/demo/view/dashboard.component.html index d0885fc..439476e 100755 --- a/src/app/demo/view/dashboard.component.html +++ b/src/app/demo/view/dashboard.component.html @@ -1,4 +1,3 @@ -
@@ -75,11 +74,11 @@ - + {{product.name}} - {{product.name}} - {{product.price | currency:'USD'}} + {{product.name}} + {{product.price | currency:'USD'}} @@ -241,4 +240,4 @@
-
+ diff --git a/src/app/demo/view/documentation.component.html b/src/app/demo/view/documentation.component.html index c0f9cd9..b4deaee 100755 --- a/src/app/demo/view/documentation.component.html +++ b/src/app/demo/view/documentation.component.html @@ -1,6 +1,6 @@
-
+

Current Version

Angular 13 and PrimeNG 13

@@ -14,8 +14,7 @@

Sakai has no direct dependency other than PrimeNG. More information about dependencies is available at Why PrimeNG Templates article.

-npm install -g @angular/cli - +npm install -g @angular/cli

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.

@@ -23,8 +22,7 @@ npm install -g @angular/cli cd sakai-ng npm install -ng serve - +ng serve

The application should run at http://localhost:4200/, you may now start with the development of your application.

@@ -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. - +Run 'ng help' for more options.
Structure

Sakai consists of 2 main parts; the application layout, layout resources. app.component.html inside app folder is the html template for the base layout, @@ -80,9 +77,8 @@ Run 'ng help' for more options. <app-config></app-config> - <div class="layout-mask p-component-overlay"></div> -</div> - + <div *ngIf="menuActiveMobile" class="layout-mask p-component-overlay"></div> +</div>

Menu

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 { {label: 'Misc', icon: 'pi pi-fw pi-circle', routerLink: ['/uikit/misc']} ] }, + { + label: 'UI Blocks', + items: [ + {label: 'Free Blocks', icon: 'pi pi-fw pi-eye', routerLink: ['/blocks'], badge: 'NEW'}, + {label: 'Timeline', icon: 'pi pi-fw pi-calendar', url: ['https://www.primefaces.org/primeblocks-ng']} + ] + }, + { + label: 'Icons', + items: [ + {label: 'PrimeIcons', icon: 'pi pi-fw pi-prime', routerLink: ['/icons']}, + ] + }, { label: 'Pages', icon: 'pi pi-fw pi-briefcase', routerLink: ['/pages'], items: [ @@ -179,14 +188,14 @@ export class AppMenuComponent implements OnInit, AfterViewInit { ] }, { - label: 'Start', icon: 'pi pi-fw pi-download', + label: 'Get Started', items: [ - { - label: 'Buy Now', icon: 'pi pi-fw pi-shopping-cart', url: ['https://www.primefaces.org/store'] - }, { label: 'Documentation', icon: 'pi pi-fw pi-info-circle', routerLink: ['/documentation'] } + { + label: 'View Source', icon: 'pi pi-fw pi-search', url: ['https://github.com/primefaces/sakai-angular'] + } ] } ]; @@ -213,7 +222,7 @@ npm install primeicons@latest --save "styles": [ - "styles.scss" //your styles and overrides + "styles.scss" //your styles and overrides ], diff --git a/src/app/demo/view/filedemo.component.html b/src/app/demo/view/filedemo.component.html index cf67b30..5037d14 100755 --- a/src/app/demo/view/filedemo.component.html +++ b/src/app/demo/view/filedemo.component.html @@ -12,7 +12,7 @@

Basic
- +
diff --git a/src/app/demo/view/filedemo.component.ts b/src/app/demo/view/filedemo.component.ts index e4e0e85..b2aada5 100755 --- a/src/app/demo/view/filedemo.component.ts +++ b/src/app/demo/view/filedemo.component.ts @@ -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'}); - } } diff --git a/src/app/demo/view/floatlabeldemo.component.ts b/src/app/demo/view/floatlabeldemo.component.ts index 3c9c9af..9d6130f 100644 --- a/src/app/demo/view/floatlabeldemo.component.ts +++ b/src/app/demo/view/floatlabeldemo.component.ts @@ -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) { diff --git a/src/app/demo/view/floatlabeldemo.scss b/src/app/demo/view/floatlabeldemo.scss deleted file mode 100644 index e62743d..0000000 --- a/src/app/demo/view/floatlabeldemo.scss +++ /dev/null @@ -1,9 +0,0 @@ -:host ::ng-deep .floatlabel-demo { - .p-field { - margin-top: 2rem; - } - - .p-multiselect-panel .p-multiselect-header { - padding-bottom: 0; - } -} diff --git a/src/app/demo/view/inputdemo.component.html b/src/app/demo/view/inputdemo.component.html index dac3f61..9ca8677 100644 --- a/src/app/demo/view/inputdemo.component.html +++ b/src/app/demo/view/inputdemo.component.html @@ -2,7 +2,7 @@
InputText
-
+
@@ -15,7 +15,7 @@
Icons
-
+
@@ -89,7 +89,7 @@
RadioButton
-
+
@@ -112,23 +112,23 @@
Checkbox
-
- - +
+ +
-
- - -
-
-
-
+
+
+
+ + +
+
Input Switch
@@ -142,10 +142,10 @@
Dropdown
-
Multiselect
+
MultiSelect
-
+
{{option.name}}
@@ -154,17 +154,20 @@
-
- +
+
{{country.name}}
+ +
TreeSelect
+
ToggleButton
- +
SelectButton
diff --git a/src/app/demo/view/inputdemo.component.ts b/src/app/demo/view/inputdemo.component.ts index 0c7340d..c646e5b 100644 --- a/src/app/demo/view/inputdemo.component.ts +++ b/src/app/demo/view/inputdemo.component.ts @@ -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) { diff --git a/src/app/demo/view/invalidstatedemo.component.html b/src/app/demo/view/invalidstatedemo.component.html index 53f153d..bbd4093 100644 --- a/src/app/demo/view/invalidstatedemo.component.html +++ b/src/app/demo/view/invalidstatedemo.component.html @@ -1,4 +1,4 @@ -
+
Invalid State
diff --git a/src/app/demo/view/listdemo.component.html b/src/app/demo/view/listdemo.component.html index 15aaaa5..b120cf9 100644 --- a/src/app/demo/view/listdemo.component.html +++ b/src/app/demo/view/listdemo.component.html @@ -1,52 +1,59 @@ -
+
DataView
- + -
- - - +
+
+ +
+
+ +
+
-
- -
-
{{product.name}}
-
{{product.description}}
+
+ +
+
{{product.name}}
+
{{product.description}}
- {{product.category}} +
+ + {{product.category}} +
-
- ${{product.price}} - +
+ ${{product.price}} + {{product.inventoryStatus}}
+
-
-
-
- - {{product.category}} +
+
+
+ + {{product.category}}
- {{product.inventoryStatus}} + {{product.inventoryStatus}}
-
- -
{{product.name}}
-
{{product.description}}
+
+ +
{{product.name}}
+
{{product.description}}
-
- ${{product.price}} +
+ ${{product.price}}
@@ -60,7 +67,7 @@
PickList
+ [responsive]="true">
{{city.name}}
 @@ -71,7 +78,7 @@
OrderList
- +
{{city.name}}
 diff --git a/src/app/demo/view/listdemo.component.ts b/src/app/demo/view/listdemo.component.ts index b6845f7..8506908 100644 --- a/src/app/demo/view/listdemo.component.ts +++ b/src/app/demo/view/listdemo.component.ts @@ -5,7 +5,6 @@ import {ProductService} from '../service/productservice'; @Component({ templateUrl: './listdemo.component.html', - styleUrls: ['./listdemo.scss'] }) export class ListDemoComponent implements OnInit { diff --git a/src/app/demo/view/listdemo.scss b/src/app/demo/view/listdemo.scss deleted file mode 100644 index b7627b1..0000000 --- a/src/app/demo/view/listdemo.scss +++ /dev/null @@ -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%; - } - } -} diff --git a/src/app/demo/view/mediademo.scss b/src/app/demo/view/mediademo.scss index 236c794..a9f050e 100644 --- a/src/app/demo/view/mediademo.scss +++ b/src/app/demo/view/mediademo.scss @@ -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; - } -} diff --git a/src/app/demo/view/menusdemo.component.html b/src/app/demo/view/menusdemo.component.html index 8b72a22..5b82ba7 100755 --- a/src/app/demo/view/menusdemo.component.html +++ b/src/app/demo/view/menusdemo.component.html @@ -1,6 +1,6 @@
-
+
MenuBar
@@ -14,50 +14,50 @@
-
+
Breadcrumb
- +
-
+
Steps
-
+
TabMenu
-
+
TieredMenu
-
+
Plain Menu
- +
-
+
Overlay Menu
- - + +
-
+
ContextMenu
Right click to display. @@ -65,7 +65,7 @@
-
+
MegaMenu - Horizontal
@@ -75,7 +75,7 @@
-
+
PanelMenu
diff --git a/src/app/demo/view/menusdemo.component.ts b/src/app/demo/view/menusdemo.component.ts index 1585766..0c6f98b 100755 --- a/src/app/demo/view/menusdemo.component.ts +++ b/src/app/demo/view/menusdemo.component.ts @@ -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' }); diff --git a/src/app/demo/view/messagesdemo.component.html b/src/app/demo/view/messagesdemo.component.html index 7f723b5..412e309 100755 --- a/src/app/demo/view/messagesdemo.component.html +++ b/src/app/demo/view/messagesdemo.component.html @@ -3,20 +3,20 @@
Toast
- - - - + + + +
Messages
- - - - + + + +
@@ -25,15 +25,15 @@
Inline
-
+
- +
-
+
@@ -46,10 +46,10 @@
Help Text
-
- - - Username is not available. +
+ + + Enter your username to reset your password.
diff --git a/src/app/demo/view/messagesdemo.component.ts b/src/app/demo/view/messagesdemo.component.ts index c567396..3a59904 100755 --- a/src/app/demo/view/messagesdemo.component.ts +++ b/src/app/demo/view/messagesdemo.component.ts @@ -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; } `], diff --git a/src/app/demo/view/miscdemo.component.html b/src/app/demo/view/miscdemo.component.html index 846b3d0..917bb9e 100755 --- a/src/app/demo/view/miscdemo.component.html +++ b/src/app/demo/view/miscdemo.component.html @@ -16,7 +16,7 @@

Badge

Numbers
-
+
@@ -35,7 +35,7 @@
Sizes
-
+
diff --git a/src/app/demo/view/overlaysdemo.component.html b/src/app/demo/view/overlaysdemo.component.html index b40e56e..c8af58a 100755 --- a/src/app/demo/view/overlaysdemo.component.html +++ b/src/app/demo/view/overlaysdemo.component.html @@ -3,38 +3,38 @@
Dialog
- -
+ +

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. -

+

- +
- +
Overlay Panel
-
+
- + Nature 1
- + - + Name @@ -45,7 +45,7 @@ {{product.name}} - + {{formatCurrency(product.price)}} @@ -61,7 +61,7 @@
Confirmation
+ [style]="{width: '350px'}" acceptButtonStyleClass="p-button-text" rejectButtonStyleClass="p-button-text">
@@ -91,10 +91,10 @@

Full Screen Sidebar

- - - - + + + +
diff --git a/src/app/demo/view/overlaysdemo.component.ts b/src/app/demo/view/overlaysdemo.component.ts index e903e68..6f95b42 100755 --- a/src/app/demo/view/overlaysdemo.component.ts +++ b/src/app/demo/view/overlaysdemo.component.ts @@ -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 { diff --git a/src/app/demo/view/overlaysdemo.scss b/src/app/demo/view/overlaysdemo.scss deleted file mode 100644 index b8ec660..0000000 --- a/src/app/demo/view/overlaysdemo.scss +++ /dev/null @@ -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; - } -} \ No newline at end of file diff --git a/src/app/demo/view/panelsdemo.component.html b/src/app/demo/view/panelsdemo.component.html index 940a37d..9b8e7a9 100755 --- a/src/app/demo/view/panelsdemo.component.html +++ b/src/app/demo/view/panelsdemo.component.html @@ -1,18 +1,17 @@
-
+
Toolbar
- - + + - - - + + +
@@ -26,7 +25,7 @@
AccordionPanel
- + 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. - + 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. - + 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 @@
TabView
- + 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. - + 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. - + 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 @@
Panel
- + 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 @@
Fieldset
- + 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 @@
-
+
Card
-

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et @@ -142,24 +141,24 @@

-
+
-
+
- +
-
+
OR
-

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, +

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 @@ Badge -

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum +

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 @@ -

Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et +

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 @@

Splitter
- - -
+ + +

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. -

+

- - - -
+ + + +

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. -

+

- -
+ +

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. -

+

diff --git a/src/app/demo/view/panelsdemo.component.ts b/src/app/demo/view/panelsdemo.component.ts index 0037c26..6e3b2eb 100755 --- a/src/app/demo/view/panelsdemo.component.ts +++ b/src/app/demo/view/panelsdemo.component.ts @@ -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 { diff --git a/src/assets/demo/data/treenodes.json b/src/assets/demo/data/treenodes.json new file mode 100644 index 0000000..1648fef --- /dev/null +++ b/src/assets/demo/data/treenodes.json @@ -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" }] + }] + } + ] +} diff --git a/src/styles.scss b/src/styles.scss index 7d0b661..43090fe 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -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;