Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

refactor(navigation-drawer): remove nav tag since it is added from the component itself #3559

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open

refactor(navigation-drawer): remove nav tag since it is added from the component itself #3559

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
714ba82
refactor(navigation-drawer): remove nav tag since it is added from th…
desig9stein Nov 4, 2024
3462d5d
Merge branch 'master' into mpopov/update-navdrawer-samples
desig9stein Nov 4, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
70 changes: 34 additions & 36 deletions projects/app-lob/src/app/index/index.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,47 +2,45 @@
<igx-nav-drawer #navdrawer [enableGestures]="drawerState.enableGestures" [isOpen]="drawerState.open" [(pin)]="drawerState.pin"
[position]="drawerState.position" [width]="drawerState.width" (opened)="refresh()" (closed)="refresh()">
<ng-template igxDrawer>
<nav>
<div class="nav-header">
<img class="logo" src="assets/images/rsrcs/igniteui-angular_logo.svg" alt="Ignite UI for Angular Logo">
</div>
<div class="nav-header">
<img class="logo" src="assets/images/rsrcs/igniteui-angular_logo.svg" alt="Ignite UI for Angular Logo">
</div>

<!-- Home -->
<span igxDrawerItem igxRipple routerLink="{{homeRouteItem.path}}" routerLinkActive="igx-nav-drawer__item--active">
<button igxIconButton="flat" igxRipple [igxRippleCentered]="true">
<igx-icon family="material">home</igx-icon>
</button>
{{homeRouteItem.displayName}}
</span>
<!-- Home -->
<span igxDrawerItem igxRipple routerLink="{{homeRouteItem.path}}" routerLinkActive="igx-nav-drawer__item--active">
<button igxIconButton="flat" igxRipple [igxRippleCentered]="true">
<igx-icon family="material">home</igx-icon>
</button>
{{homeRouteItem.displayName}}
</span>

<!-- Search -->
<igx-input-group type="search" class="searchGroup">
<igx-prefix>
<igx-icon>search</igx-icon>
</igx-prefix>
<input #search igxInput placeholder="Search samples" [(ngModel)]="searchValue" (ngModelChange)="searchValueChanged()">
<igx-suffix *ngIf="search.value.length > 0" (click)="clearSearchValue()">
<igx-icon>clear</igx-icon>
</igx-suffix>
</igx-input-group>
<!-- Search -->
<igx-input-group type="search" class="searchGroup">
<igx-prefix>
<igx-icon>search</igx-icon>
</igx-prefix>
<input #search igxInput placeholder="Search samples" [(ngModel)]="searchValue" (ngModelChange)="searchValueChanged()">
<igx-suffix *ngIf="search.value.length > 0" (click)="clearSearchValue()">
<igx-icon>clear</igx-icon>
</igx-suffix>
</igx-input-group>

<span *ngFor="let navItem of currentNavItems">
<!-- Header -->
<span igxDrawerItem igxRipple routerLinkActive="igx-nav-drawer__item--active" (click)="toggleParent('header' + navItem.name)">
<button igxIconButton="flat" igxRipple [igxRippleCentered]="true" style="vertical-align: middle">
<igx-icon family="material">{{convertNodeStateToIcon('header' + navItem.name)}}</igx-icon>
</button>
<span style="vertical-align: middle">{{navItem.name}}</span>
</span>
<!-- Children -->
<span [id]="'header' + navItem.name" style="display:none">
<span [id]="'child' + routeItem.displayName" class="innerItem" *ngFor="let routeItem of navItem.children" igxDrawerItem igxRipple
routerLink="{{routeItem.path}}" routerLinkActive="igx-nav-drawer__item--active">
{{routeItem.displayName}}
</span>
<span *ngFor="let navItem of currentNavItems">
<!-- Header -->
<span igxDrawerItem igxRipple routerLinkActive="igx-nav-drawer__item--active" (click)="toggleParent('header' + navItem.name)">
<button igxIconButton="flat" igxRipple [igxRippleCentered]="true" style="vertical-align: middle">
<igx-icon family="material">{{convertNodeStateToIcon('header' + navItem.name)}}</igx-icon>
</button>
<span style="vertical-align: middle">{{navItem.name}}</span>
</span>
<!-- Children -->
<span [id]="'header' + navItem.name" style="display:none">
<span [id]="'child' + routeItem.displayName" class="innerItem" *ngFor="let routeItem of navItem.children" igxDrawerItem igxRipple
routerLink="{{routeItem.path}}" routerLinkActive="igx-nav-drawer__item--active">
{{routeItem.displayName}}
</span>
</span>
</nav>
</span>
</ng-template>
</igx-nav-drawer>

Expand Down
74 changes: 36 additions & 38 deletions src/app/index/index.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,52 +2,50 @@
<igx-nav-drawer #navdrawer [enableGestures]="drawerState.enableGestures" [isOpen]="drawerState.open" [(pin)]="drawerState.pin"
[position]="drawerState.position" [width]="drawerState.width" (opened)="refresh()" (closed)="refresh()">
<ng-template igxDrawer>
<nav>
<div class="nav-header">
<img class="logo" src="assets/images/rsrcs/igniteui-angular_logo.svg" alt="Ignite UI for Angular Logo">
</div>
<div class="nav-header">
<img class="logo" src="assets/images/rsrcs/igniteui-angular_logo.svg" alt="Ignite UI for Angular Logo">
</div>

<!-- Home -->
<span igxDrawerItem igxRipple [routerLink]="homeRouteItem.path" routerLinkActive="igx-nav-drawer__item--active">
<igx-icon family="material">home</igx-icon>
<span>{{homeRouteItem.displayName}}</span>
</span>
<!-- Home -->
<span igxDrawerItem igxRipple [routerLink]="homeRouteItem.path" routerLinkActive="igx-nav-drawer__item--active">
<igx-icon family="material">home</igx-icon>
<span>{{homeRouteItem.displayName}}</span>
</span>

<!-- Search -->
<igx-input-group type="search" class="searchGroup">
<igx-prefix>
<igx-icon>search</igx-icon>
</igx-prefix>
<input #search igxInput placeholder="Search samples" (focus)="createSearchSub(search)" [(ngModel)]="searchValue">
<igx-suffix *ngIf="search.value.length > 0" (click)="clearSearchValue()">
<igx-icon>clear</igx-icon>
</igx-suffix>
</igx-input-group>
<!-- Search -->
<igx-input-group type="search" class="searchGroup">
<igx-prefix>
<igx-icon>search</igx-icon>
</igx-prefix>
<input #search igxInput placeholder="Search samples" (focus)="createSearchSub(search)" [(ngModel)]="searchValue">
<igx-suffix *ngIf="search.value.length > 0" (click)="clearSearchValue()">
<igx-icon>clear</igx-icon>
</igx-suffix>
</igx-input-group>

<igx-tree #tree>
<igx-tree-node [data]="item.name" *ngFor="let item of currentNavItems">
{{ item.name }}
<igx-tree-node [data]="route.displayName" *ngFor="let route of item.children">
<a igxTreeNodeLink [routerLink]="route.path">{{ route.displayName }}</a>
</igx-tree-node>
<igx-tree #tree>
<igx-tree-node [data]="item.name" *ngFor="let item of currentNavItems">
{{ item.name }}
<igx-tree-node [data]="route.displayName" *ngFor="let route of item.children">
<a igxTreeNodeLink [routerLink]="route.path">{{ route.displayName }}</a>
</igx-tree-node>
</igx-tree>
</igx-tree-node>
</igx-tree>

<!-- <span *ngFor="let navItem of currentNavItems">
<!-- <span *ngFor="let navItem of currentNavItems">

<span igxDrawerItem igxRipple routerLinkActive="igx-nav-drawer__item--active navdrawer-ellipsis" (click)="toggleParent('header' + navItem.name)">
<igx-icon family="material">{{convertNodeStateToIcon('header' + navItem.name)}}</igx-icon>
<span class="navdrawer-ellipsis" style="vertical-align: middle">{{navItem.name}}</span>
</span>
<span igxDrawerItem igxRipple routerLinkActive="igx-nav-drawer__item--active navdrawer-ellipsis" (click)="toggleParent('header' + navItem.name)">
<igx-icon family="material">{{convertNodeStateToIcon('header' + navItem.name)}}</igx-icon>
<span class="navdrawer-ellipsis" style="vertical-align: middle">{{navItem.name}}</span>
</span>

<span [id]="'header' + navItem.name" style="display:none">
<span [id]="'child' + routeItem.displayName" class="innerItem navdrawer-ellipsis" *ngFor="let routeItem of navItem.children" igxDrawerItem igxRipple
[routerLink]="routeItem.path" routerLinkActive="igx-nav-drawer__item--active">
{{routeItem.displayName}}
</span>
<span [id]="'header' + navItem.name" style="display:none">
<span [id]="'child' + routeItem.displayName" class="innerItem navdrawer-ellipsis" *ngFor="let routeItem of navItem.children" igxDrawerItem igxRipple
[routerLink]="routeItem.path" routerLinkActive="igx-nav-drawer__item--active">
{{routeItem.displayName}}
</span>
</span> -->
</nav>
</span>
</span> -->
</ng-template>
</igx-nav-drawer>

Expand Down
5 changes: 1 addition & 4 deletions src/app/menus/navdrawer/nav-drawer-pin/nav-drawer-pin.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,11 @@
<div class="content-wrap" igxLayout>
<igx-nav-drawer id="navigation" #drawer [isOpen]="true" [pin]="true" [pinThreshold]="0">
<ng-template igxDrawer>
<nav>
<span igxDrawerItem [isHeader]="true">Components</span>

<span *ngFor="let item of navItems" igxDrawerItem [active]="item.text === selected" igxRipple (click)="navigate(item)">
<igx-icon family="material">{{ item.name }}</igx-icon>
<span>{{ item.text }}</span>
</span>
</nav>
</ng-template>
</igx-nav-drawer>

Expand All @@ -20,4 +17,4 @@

<h5>{{selected}} content.</h5>
</main>
</div>
</div>
5 changes: 1 addition & 4 deletions src/app/menus/navdrawer/nav-drawer-routing/nav-drawer-routing.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,7 @@
<div class="content-wrap">
<igx-nav-drawer id="navigation" #drawer [isOpen]="true">
<ng-template igxDrawer>
<nav>
<span igxDrawerItem [isHeader]="true">Components</span>

<span
igxDrawerItem
igxRipple
Expand All @@ -14,7 +12,6 @@
>
{{item.name}}
</span>
</nav>
</ng-template>
</igx-nav-drawer>

Expand All @@ -23,4 +20,4 @@
<igx-icon family="material">menu</igx-icon>
</span>
</main>
</div>
</div>
2 changes: 0 additions & 2 deletions src/app/menus/navdrawer/nav-drawer-simple/nav-drawer-simple.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,12 @@
<div class="content-wrap">
<igx-nav-drawer id="navigation" #drawer [isOpen]="true" [pinThreshold]="5000">
<ng-template igxDrawer>
<nav>
<span igxDrawerItem [isHeader]="true">Components</span>

<span *ngFor="let item of navItems" igxDrawerItem [active]="item.text === selected" igxRipple (click)="navigate(item)">
<igx-icon family="material">{{ item.name }}</igx-icon>
<span>{{ item.text }}</span>
</span>
</nav>
</ng-template>
</igx-nav-drawer>

Expand Down
Loading