Fixed #888

primefaces · Jun 8, 2017 · 4f8620a · 4f8620a
1 parent 217c7d3
commit 4f8620a
Show file tree

Hide file tree

Showing 20 changed files with 122 additions and 63 deletions.
diff --git a/src/app/components/common/menuitem.ts b/src/app/components/common/menuitem.ts
@@ -13,4 +13,5 @@ export interface MenuItem {
     visible?: boolean;
     target?: string;
     routerLinkActiveOptions?: any;
+    separator?: boolean;
 }
diff --git a/src/app/components/contextmenu/contextmenu.ts b/src/app/components/contextmenu/contextmenu.ts
@@ -11,7 +11,8 @@ import {RouterModule} from '@angular/router';
         <ul [ngClass]="{'ui-helper-reset':root, 'ui-widget-content ui-corner-all ui-helper-clearfix ui-menu-child ui-shadow':!root}" class="ui-menu-list"
             (click)="listClick($event)">
             <ng-template ngFor let-child [ngForOf]="(root ? item : item.items)">
-                <li #item [ngClass]="{'ui-menuitem ui-widget ui-corner-all':true,'ui-menu-parent':child.items,'ui-menuitem-active':item==activeItem}"
+                <li *ngIf="child.separator" class="ui-menu-separator ui-widget-content">
+                <li *ngIf="!child.separator" #item [ngClass]="{'ui-menuitem ui-widget ui-corner-all':true,'ui-menu-parent':child.items,'ui-menuitem-active':item==activeItem}"
                     (mouseenter)="onItemMouseEnter($event,item,child)" (mouseleave)="onItemMouseLeave($event,item)" [style.display]="child.visible === false ? 'none' : 'block'">
                     <a *ngIf="!child.routerLink" [href]="child.url||'#'" class="ui-menuitem-link ui-corner-all" [attr.target]="child.target"
                         [ngClass]="{'ui-state-disabled':child.disabled}" (click)="itemClick($event, child)">

diff --git a/src/app/components/megamenu/megamenu.ts b/src/app/components/megamenu/megamenu.ts
@@ -12,7 +12,8 @@ import {RouterModule} from '@angular/router';
             [ngClass]="{'ui-menu ui-menubar ui-megamenu ui-widget ui-widget-content ui-corner-all ui-helper-clearfix':true,'ui-megamenu-vertical': orientation == 'vertical'}">
             <ul class="ui-menu-list ui-helper-reset ui-menubar-root-list">
                 <ng-template ngFor let-category [ngForOf]="model">
-                    <li #item [ngClass]="{'ui-menuitem ui-widget ui-corner-all':true,'ui-menu-parent':category.items,'ui-menuitem-active':item==activeItem}"
+                    <li *ngIf="category.separator" class="ui-menu-separator ui-widget-content">
+                    <li *ngIf="!category.separator" #item [ngClass]="{'ui-menuitem ui-widget ui-corner-all':true,'ui-menu-parent':category.items,'ui-menuitem-active':item==activeItem}"
                         (mouseenter)="onItemMouseEnter($event, item, category)" (mouseleave)="onItemMouseLeave($event, item)">
                         <a class="ui-menuitem-link ui-corner-all ui-submenu-link" [ngClass]="{'ui-state-disabled':category.disabled}">
                             <span class="ui-menuitem-icon fa fa-fw" [ngClass]="category.icon"></span>
@@ -26,18 +27,21 @@ import {RouterModule} from '@angular/router';
                                         <ng-template ngFor let-submenu [ngForOf]="column">
                                             <ul class="ui-menu-list ui-helper-reset">
                                                 <li class="ui-widget-header ui-corner-all"><h3>{{submenu.label}}</h3></li>
-                                                <li *ngFor="let item of submenu.items" class="ui-menuitem ui-widget ui-corner-all">
-                                                    <a *ngIf="!item.routerLink" [href]="item.url||'#'" class="ui-menuitem-link ui-corner-all" [attr.target]="item.target"
-                                                        [ngClass]="{'ui-state-disabled':item.disabled}" (click)="itemClick($event, item)">
-                                                        <span class="ui-menuitem-icon fa fa-fw" *ngIf="item.icon" [ngClass]="item.icon"></span>
-                                                        <span class="ui-menuitem-text">{{item.label}}</span>
-                                                    </a>
-                                                    <a *ngIf="item.routerLink" [routerLink]="item.routerLink" [routerLinkActive]="'ui-state-active'" [routerLinkActiveOptions]="item.routerLinkActiveOptions||{exact:false}" class="ui-menuitem-link ui-corner-all" [attr.target]="item.target"
-                                                        [ngClass]="{'ui-state-disabled':item.disabled}" (click)="itemClick($event, item)">
-                                                        <span class="ui-menuitem-icon fa fa-fw" *ngIf="item.icon" [ngClass]="item.icon"></span>
-                                                        <span class="ui-menuitem-text">{{item.label}}</span>
-                                                    </a>
-                                                </li>
+                                                <ng-template ngFor let-item [ngForOf]="submenu.items">
+                                                    <li *ngIf="item.separator" class="ui-menu-separator ui-widget-content">
+                                                    <li *ngIf="!item.separator" class="ui-menuitem ui-widget ui-corner-all">
+                                                        <a *ngIf="!item.routerLink" [href]="item.url||'#'" class="ui-menuitem-link ui-corner-all" [attr.target]="item.target"
+                                                            [ngClass]="{'ui-state-disabled':item.disabled}" (click)="itemClick($event, item)">
+                                                            <span class="ui-menuitem-icon fa fa-fw" *ngIf="item.icon" [ngClass]="item.icon"></span>
+                                                            <span class="ui-menuitem-text">{{item.label}}</span>
+                                                        </a>
+                                                        <a *ngIf="item.routerLink" [routerLink]="item.routerLink" [routerLinkActive]="'ui-state-active'" [routerLinkActiveOptions]="item.routerLinkActiveOptions||{exact:false}" class="ui-menuitem-link ui-corner-all" [attr.target]="item.target"
+                                                            [ngClass]="{'ui-state-disabled':item.disabled}" (click)="itemClick($event, item)">
+                                                            <span class="ui-menuitem-icon fa fa-fw" *ngIf="item.icon" [ngClass]="item.icon"></span>
+                                                            <span class="ui-menuitem-text">{{item.label}}</span>
+                                                        </a>
+                                                    </li>
+                                                </ng-template>
                                             </ul>
                                         </ng-template>
                                     </div>

diff --git a/src/app/components/menu/menu.css b/src/app/components/menu/menu.css
@@ -4,6 +4,10 @@
     position:relative;
 }
 
+.ui-menu-separator {
+    border-width: 1px 0 0 0;
+}
+
 .ui-menu.ui-menu-dynamic {
     position: absolute;
     display: none;
@@ -115,6 +119,17 @@
     width: auto;
 }
 
+.ui-menubar:not(.ui-megamenu-vertical) .ui-menubar-root-list > .ui-menu-separator {
+    display: inline-block;
+    border-width: 0 0 0 1px;
+    width: 1px;
+    text-indent: -9999999px;
+}
+
+.ui-menubar:not(.ui-megamenu-vertical) .ui-menubar-root-list > .ui-menu-separator:before {
+    content: 'ui-menu-separator';
+}
+
 .ui-menubar .ui-menu-child .ui-menuitem {
     width: 100%;
 }
@@ -269,6 +284,11 @@
     padding: 0;
 }
 
+.ui-panelmenu .ui-menu-separator {
+    width: 95%;
+    margin: 0 auto;
+}
+
 .ui-panelmenu .ui-menuitem-link {
     display: block;
     outline: none;

diff --git a/src/app/components/menu/menu.ts b/src/app/components/menu/menu.ts
@@ -1,43 +1,48 @@
-import {NgModule,Component,ElementRef,AfterViewInit,OnDestroy,Input,Output,Renderer2,HostListener,EventEmitter,ViewChild} from '@angular/core';
+import {NgModule,Component,ElementRef,AfterViewInit,OnDestroy,Input,Output,Renderer2,HostListener,EventEmitter,ViewChild,Inject,forwardRef} from '@angular/core';
 import {CommonModule} from '@angular/common';
 import {DomHandler} from '../dom/domhandler';
 import {MenuItem} from '../common/menuitem';
 import {RouterModule} from '@angular/router';
 
+@Component({
+    selector: '[pMenuItemContent]',
+    template: `
+        <a *ngIf="!item.routerLink" [href]="item.url||'#'" class="ui-menuitem-link ui-corner-all" [attr.target]="item.target"
+            [ngClass]="{'ui-state-disabled':item.disabled}" (click)="menu.itemClick($event, item)">
+            <span class="ui-menuitem-icon fa fa-fw" *ngIf="item.icon" [ngClass]="item.icon"></span>
+            <span class="ui-menuitem-text">{{item.label}}</span>
+        </a>
+        <a *ngIf="item.routerLink" [routerLink]="item.routerLink" [routerLinkActive]="'ui-state-active'" [routerLinkActiveOptions]="item.routerLinkActiveOptions||{exact:false}" class="ui-menuitem-link ui-corner-all" [attr.target]="item.target"
+            [ngClass]="{'ui-state-disabled':item.disabled}" (click)="menu.itemClick($event, item)">
+            <span class="ui-menuitem-icon fa fa-fw" *ngIf="item.icon" [ngClass]="item.icon"></span>
+            <span class="ui-menuitem-text">{{item.label}}</span>
+        </a>
+    `
+})
+export class MenuItemContent {
+
+    @Input("pMenuItemContent") item: MenuItem;
+
+    constructor(@Inject(forwardRef(() => Menu)) public menu: Menu) {}
+}
+
 @Component({
     selector: 'p-menu',
     template: `
         <div #container [ngClass]="{'ui-menu ui-widget ui-widget-content ui-corner-all ui-helper-clearfix':true,'ui-menu-dynamic ui-shadow':popup}" 
             [class]="styleClass" [ngStyle]="style" (click)="preventDocumentDefault=true">
             <ul class="ui-menu-list ui-helper-reset">
                 <ng-template ngFor let-submenu [ngForOf]="model" *ngIf="hasSubMenu()">
-                    <li class="ui-widget-header ui-corner-all"><h3>{{submenu.label}}</h3></li>
-                    <li *ngFor="let item of submenu.items" class="ui-menuitem ui-widget ui-corner-all">
-                        <a *ngIf="!item.routerLink" [href]="item.url||'#'" class="ui-menuitem-link ui-corner-all" [attr.target]="item.target"
-                            [ngClass]="{'ui-state-disabled':item.disabled}" (click)="itemClick($event, item)">
-                            <span class="ui-menuitem-icon fa fa-fw" *ngIf="item.icon" [ngClass]="item.icon"></span>
-                            <span class="ui-menuitem-text">{{item.label}}</span>
-                        </a>
-                        <a *ngIf="item.routerLink" [routerLink]="item.routerLink" [routerLinkActive]="'ui-state-active'" [routerLinkActiveOptions]="item.routerLinkActiveOptions||{exact:false}" class="ui-menuitem-link ui-corner-all" [attr.target]="item.target"
-                            [ngClass]="{'ui-state-disabled':item.disabled}" (click)="itemClick($event, item)">
-                            <span class="ui-menuitem-icon fa fa-fw" *ngIf="item.icon" [ngClass]="item.icon"></span>
-                            <span class="ui-menuitem-text">{{item.label}}</span>
-                        </a>
-                    </li>
+                    <li class="ui-menu-separator ui-widget-content" *ngIf="submenu.separator">
+                    <li class="ui-widget-header ui-corner-all" *ngIf="!submenu.separator"><h3>{{submenu.label}}</h3></li>
+                    <ng-template ngFor let-item [ngForOf]="submenu.items">
+                        <li class="ui-menu-separator ui-widget-content" *ngIf="item.separator">
+                        <li class="ui-menuitem ui-widget ui-corner-all" *ngIf="!item.separator" [pMenuItemContent]="item"></li>
+                    </ng-template>
                 </ng-template>
                 <ng-template ngFor let-item [ngForOf]="model" *ngIf="!hasSubMenu()">
-                    <li class="ui-menuitem ui-widget ui-corner-all">
-                        <a *ngIf="!item.routerLink" [href]="item.url||'#'" class="ui-menuitem-link ui-corner-all" [attr.target]="item.target"
-                            [ngClass]="{'ui-state-disabled':item.disabled}" (click)="itemClick($event, item)">
-                            <span class="ui-menuitem-icon fa fa-fw" *ngIf="item.icon" [ngClass]="item.icon"></span>
-                            <span class="ui-menuitem-text">{{item.label}}</span>
-                        </a>
-                        <a *ngIf="item.routerLink" [routerLink]="item.routerLink" [routerLinkActive]="'ui-state-active'" [routerLinkActiveOptions]="item.routerLinkActiveOptions||{exact:false}" class="ui-menuitem-link ui-corner-all" [attr.target]="item.target"
-                            [ngClass]="{'ui-state-disabled':item.disabled}" (click)="itemClick($event, item)">
-                            <span class="ui-menuitem-icon fa fa-fw" *ngIf="item.icon" [ngClass]="item.icon"></span>
-                            <span class="ui-menuitem-text">{{item.label}}</span>
-                        </a>
-                    </li>
+                    <li class="ui-menu-separator ui-widget-content" *ngIf="item.separator">
+                    <li class="ui-menuitem ui-widget ui-corner-all" *ngIf="!item.separator" [pMenuItemContent]="item"></li>
                 </ng-template>
             </ul>
         </div>
@@ -189,6 +194,6 @@ export class Menu implements AfterViewInit,OnDestroy {
 @NgModule({
     imports: [CommonModule,RouterModule],
     exports: [Menu,RouterModule],
-    declarations: [Menu]
+    declarations: [Menu,MenuItemContent]
 })
 export class MenuModule { }
diff --git a/src/app/components/menubar/menubar.ts b/src/app/components/menubar/menubar.ts
@@ -11,7 +11,8 @@ import {RouterModule} from '@angular/router';
         <ul [ngClass]="{'ui-menubar-root-list ui-helper-clearfix':root, 'ui-widget-content ui-corner-all ui-helper-clearfix ui-menu-child ui-shadow':!root}" class="ui-menu-list"
             (click)="listClick($event)">
             <ng-template ngFor let-child [ngForOf]="(root ? item : item.items)">
-                <li #listItem [ngClass]="{'ui-menuitem ui-widget ui-corner-all':true,'ui-menu-parent':child.items,'ui-menuitem-active':listItem==activeItem}"
+                <li *ngIf="child.separator" class="ui-menu-separator ui-widget-content">
+                <li *ngIf="!child.separator" #listItem [ngClass]="{'ui-menuitem ui-widget ui-corner-all':true,'ui-menu-parent':child.items,'ui-menuitem-active':listItem==activeItem}"
                     (mouseenter)="onItemMouseEnter($event,listItem,child)" (mouseleave)="onItemMouseLeave($event)">
                     <a *ngIf="!child.routerLink" [href]="child.url||'#'" class="ui-menuitem-link ui-corner-all" [attr.target]="child.target"
                         [ngClass]="{'ui-state-disabled':child.disabled}" (click)="itemClick($event, child)">

diff --git a/src/app/components/panelmenu/panelmenu.ts b/src/app/components/panelmenu/panelmenu.ts
@@ -36,23 +36,26 @@ export class BasePanelMenuItem {
     selector: 'p-panelMenuSub',
     template: `
         <ul class="ui-menu-list ui-helper-reset" [style.display]="expanded ? 'block' : 'none'">
-            <li *ngFor="let child of item.items" class="ui-menuitem ui-corner-all" [ngClass]="{'ui-menu-parent':child.items}">
-                <a *ngIf="!child.routerLink" [href]="child.url||'#'" class="ui-menuitem-link ui-corner-all" 
-                    [ngClass]="{'ui-menuitem-link-hasicon':child.icon&&child.items,'ui-state-disabled':child.disabled}" 
-                    (click)="handleClick($event,child)" [attr.target]="child.target">
-                    <span class="ui-panelmenu-icon fa fa-fw" [ngClass]="{'fa-caret-right':!child.expanded,'fa-caret-down':child.expanded}" *ngIf="child.items"></span
-                    ><span class="ui-menuitem-icon fa fa-fw" [ngClass]="child.icon" *ngIf="child.icon"></span
-                    ><span class="ui-menuitem-text">{{child.label}}</span>
-                </a>
-                <a *ngIf="child.routerLink" [routerLink]="child.routerLink" [routerLinkActive]="'ui-state-active'" [routerLinkActiveOptions]="child.routerLinkActiveOptions||{exact:false}" class="ui-menuitem-link ui-corner-all" 
-                    [ngClass]="{'ui-menuitem-link-hasicon':child.icon&&child.items,'ui-state-disabled':child.disabled}" 
-                    (click)="handleClick($event,child)" [attr.target]="child.target">
-                    <span class="ui-panelmenu-icon fa fa-fw" [ngClass]="{'fa-caret-right':!child.expanded,'fa-caret-down':child.expanded}" *ngIf="child.items"></span
-                    ><span class="ui-menuitem-icon fa fa-fw" [ngClass]="child.icon" *ngIf="child.icon"></span
-                    ><span class="ui-menuitem-text">{{child.label}}</span>
-                </a>
-                <p-panelMenuSub [item]="child" [expanded]="child.expanded" *ngIf="child.items"></p-panelMenuSub>
-            </li>
+            <ng-template ngFor let-child [ngForOf]="item.items">
+                <li *ngIf="child.separator" class="ui-menu-separator ui-widget-content">
+                <li *ngIf="!child.separator" class="ui-menuitem ui-corner-all" [ngClass]="{'ui-menu-parent':child.items}">
+                    <a *ngIf="!child.routerLink" [href]="child.url||'#'" class="ui-menuitem-link ui-corner-all" 
+                        [ngClass]="{'ui-menuitem-link-hasicon':child.icon&&child.items,'ui-state-disabled':child.disabled}" 
+                        (click)="handleClick($event,child)" [attr.target]="child.target">
+                        <span class="ui-panelmenu-icon fa fa-fw" [ngClass]="{'fa-caret-right':!child.expanded,'fa-caret-down':child.expanded}" *ngIf="child.items"></span
+                        ><span class="ui-menuitem-icon fa fa-fw" [ngClass]="child.icon" *ngIf="child.icon"></span
+                        ><span class="ui-menuitem-text">{{child.label}}</span>
+                    </a>
+                    <a *ngIf="child.routerLink" [routerLink]="child.routerLink" [routerLinkActive]="'ui-state-active'" [routerLinkActiveOptions]="child.routerLinkActiveOptions||{exact:false}" class="ui-menuitem-link ui-corner-all" 
+                        [ngClass]="{'ui-menuitem-link-hasicon':child.icon&&child.items,'ui-state-disabled':child.disabled}" 
+                        (click)="handleClick($event,child)" [attr.target]="child.target">
+                        <span class="ui-panelmenu-icon fa fa-fw" [ngClass]="{'fa-caret-right':!child.expanded,'fa-caret-down':child.expanded}" *ngIf="child.items"></span
+                        ><span class="ui-menuitem-icon fa fa-fw" [ngClass]="child.icon" *ngIf="child.icon"></span
+                        ><span class="ui-menuitem-text">{{child.label}}</span>
+                    </a>
+                    <p-panelMenuSub [item]="child" [expanded]="child.expanded" *ngIf="child.items"></p-panelMenuSub>
+                </li>
+            </ng-template>
         </ul>
     `
 })

diff --git a/src/app/components/slidemenu/slidemenu.ts b/src/app/components/slidemenu/slidemenu.ts
@@ -12,7 +12,8 @@ import {RouterModule} from '@angular/router';
             [style.width.px]="menuWidth" [style.left.px]="root ? slideMenu.left : slideMenu.menuWidth" 
             [style.transitionProperty]="root ? 'left' : 'none'" [style.transitionDuration]="effectDuration + 'ms'" [style.transitionTimingFunction]="easing">
             <ng-template ngFor let-child [ngForOf]="(root ? item : item.items)">
-                <li #listitem [ngClass]="{'ui-menuitem ui-widget ui-corner-all':true,'ui-menu-parent':child.items,'ui-slidemenuitem-active':listitem==activeItem}">
+                <li *ngIf="child.separator" class="ui-menu-separator ui-widget-content">
+                <li *ngIf="!child.separator" #listitem [ngClass]="{'ui-menuitem ui-widget ui-corner-all':true,'ui-menu-parent':child.items,'ui-slidemenuitem-active':listitem==activeItem}">
                     <a *ngIf="!item.routerLink" [href]="child.url||'#'" class="ui-menuitem-link ui-corner-all" [attr.target]="child.target"
                         [ngClass]="{'ui-menuitem-link-parent':child.items,'ui-state-disabled':child.disabled}" 
                         (click)="itemClick($event, child, listitem)">
@@ -117,7 +118,7 @@ export class SlideMenu implements AfterViewInit,OnDestroy {
 
     @Input() viewportHeight: number = 175;
 
-    @Input() effectDuration: any = 500;
+    @Input() effectDuration: any = 250;
 
     @Input() easing: string = 'ease-out';