Andreas/ngx-admin
1
0
Fork 0
mirror of https://github.com/akveo/ngx-admin.git synced 2025-12-18 08:20:13 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

hoverItem

Browse source
This commit is contained in:
nixa 2016-04-28 16:44:32 +03:00
parent cfd93118df
commit 80c1e0a79c
2 changed files with 18 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

11
src/app/theme/sidebar/sidebar.component.ts
View file

@ -19,6 +19,10 @@ export class Sidebar {
menuHeight: number; menuHeight: number;
isMenuCollapsed: boolean; isMenuCollapsed: boolean;
showHoverElem: boolean;
hoverElemHeight: number;
hoverElemTop: number;
constructor(el: ElementRef, router: Router, private _sidebarService: SidebarService) { constructor(el: ElementRef, router: Router, private _sidebarService: SidebarService) {
this.elementRef = el; this.elementRef = el;
this.router = router; this.router = router;
@ -43,6 +47,13 @@ export class Sidebar {
this.isMenuCollapsed = true; this.isMenuCollapsed = true;
} }
hoverItem = function ($event) {
this.showHoverElem = true;
this.hoverElemHeight = $event.currentTarget.clientHeight;
// TODO: get rid of magic 66 constant
this.hoverElemTop = $event.currentTarget.getBoundingClientRect().top - 66;
}
toggleSubMenu ($event, item) { toggleSubMenu ($event, item) {
var submenu = $($event.currentTarget).next(); var submenu = $($event.currentTarget).next();

13
src/app/theme/sidebar/sidebar.html
View file

@ -7,7 +7,7 @@
<i class="{{ item.icon }}"></i><span>{{ item.title }}</span> <i class="{{ item.icon }}"></i><span>{{ item.title }}</span>
</a> </a>
<a *ngIf="item.subMenu" ng-mouseenter="hoverItem($event, item)" (click)="toggleSubMenu($event, item)" class="al-sidebar-list-link"> <a *ngIf="item.subMenu" (mouseenter)="hoverItem($event, item)" (click)="toggleSubMenu($event, item)" class="al-sidebar-list-link">
<i class="{{ item.icon }}"></i><span>{{ item.title }}</span> <i class="{{ item.icon }}"></i><span>{{ item.title }}</span>
<b class="fa" [ngClass]="{'fa-angle-up': item.expanded, 'fa-angle-down': !item.expanded}" *ngIf="item.subMenu"></b> <b class="fa" [ngClass]="{'fa-angle-up': item.expanded, 'fa-angle-down': !item.expanded}" *ngIf="item.subMenu"></b>
</a> </a>
@ -15,19 +15,19 @@
<ul *ngIf="item.subMenu" class="al-sidebar-sublist" <ul *ngIf="item.subMenu" class="al-sidebar-sublist"
[ngClass]="{expanded: item.expanded, 'slide-right': item.slideRight}"> [ngClass]="{expanded: item.expanded, 'slide-right': item.slideRight}">
<li *ngFor="#subitem of item.subMenu" [ngClass]="{'selected': subitem.selected, 'with-sub-menu': subitem.subMenu}"> <li *ngFor="#subitem of item.subMenu" [ngClass]="{'selected': subitem.selected, 'with-sub-menu': subitem.subMenu}">
<a ng-mouseenter="hoverItem($event, item)" *ngIf="subitem.subMenu" (click)="toggleSubMenu($event, subitem);" <a (mouseenter)="hoverItem($event, item)" *ngIf="subitem.subMenu" (click)="toggleSubMenu($event, subitem);"
class="al-sidebar-list-link subitem-submenu-link"><span>{{ subitem.title }}</span> class="al-sidebar-list-link subitem-submenu-link"><span>{{ subitem.title }}</span>
<b class="fa" *ngIf="subitem.subMenu" [ngClass]="{'fa-angle-up': subitem.expanded, 'fa-angle-down': !subitem.expanded}"></b> <b class="fa" *ngIf="subitem.subMenu" [ngClass]="{'fa-angle-up': subitem.expanded, 'fa-angle-down': !subitem.expanded}"></b>
</a> </a>
<ul *ngIf="subitem.subMenu" class="al-sidebar-sublist subitem-submenu-list" <ul *ngIf="subitem.subMenu" class="al-sidebar-sublist subitem-submenu-list"
[ngClass]="{expanded: subitem.expanded, 'slide-right': subitem.slideRight}"> [ngClass]="{expanded: subitem.expanded, 'slide-right': subitem.slideRight}">
<li *ngFor="#subSubitem of subitem.subMenu" ng-mouseenter="hoverItem($event, item)" [ngClass]="{selected: subitem.selected}"> <li *ngFor="#subSubitem of subitem.subMenu" (mouseenter)="hoverItem($event, item)" [ngClass]="{selected: subitem.selected}">
<a ng-mouseenter="hoverItem($event, item)" [routerLink]="[subSubitem.name]"> <a (mouseenter)="hoverItem($event, item)" [routerLink]="[subSubitem.name]">
{{ subSubitem.title }}</a> {{ subSubitem.title }}</a>
</li> </li>
</ul> </ul>
<a *ngIf="!subitem.subMenu" [routerLink]="[subitem.name]" <a *ngIf="!subitem.subMenu" [routerLink]="[subitem.name]"
ng-mouseenter="hoverItem($event, item)" target="{{subitem.blank ? '_blank' : '_self'}}"> (mouseenter)="hoverItem($event, item)" target="{{subitem.blank ? '_blank' : '_self'}}">
{{ subitem.title}} {{ subitem.title}}
</a> </a>
</li> </li>
@ -35,5 +35,6 @@
</li> </li>
</ul> </ul>
<div class="sidebar-hover-elem"></div> <div class="sidebar-hover-elem" [ngStyle]="{top: hoverElemTop + 'px', height: hoverElemHeight + 'px'}"
[ngClass]="{'show-hover-elem': showHoverElem }"></div>
</aside> </aside>