Skip to content

Commit bfd52b8

Browse files
LipataLipata
authored
Merge pull request #7725 from IgniteUI/astaev/issue7377-master
feat(navbar): Adding custom title area #7377
2 parents a19d145 + da4b2e1 commit bfd52b8

File tree

12 files changed

+315
-36
lines changed

12 files changed

+315
-36
lines changed

‎CHANGELOG.md

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,8 @@ All notable changes for each version of this project will be documented in this
77
### General
88
- `igxCombo`
99
- **Behavioral Change** - Change default positioning strategy from `ConnectedPositioningStrategy` to `AutoPositionStrategy`. The [`Auto`](https://www.infragistics.com/products/ignite-ui-angular/angular/components/overlay_position.html#auto) strategy will initially try to show the element like the Connected strategy does. If the element goes out of the viewport Auto will flip the starting point and the direction, i.e. if the direction is 'bottom', it will switch it to 'top' and so on. If after flipping direction the content goes out of the view, auto strategy will revert to initial start point and direction and will push the content into the view. Note after pushing the content it may hide the combo's input.
10+
- `IgxNavbar`:
11+
- **Breaking Changes** - The `igx-action-icon` has been renamed to `igx-navbar-action`. It should get renamed in your components via `ng update`;
1012

1113
### New Features
1214
- `IgxGridState` directive
@@ -20,6 +22,8 @@ All notable changes for each version of this project will be documented in this
2022
- `IgxSnackbar`
2123
- `message` property has been deprecated. You can place the *message text* in the snackbar content or pass it as parameter to `show` method instead.
2224
- An optional string parameter `message` has been added to `show()` method.
25+
- `IgxNavbar`
26+
- Added new `igx-navbar-title, igxNavbarTitle` directive that can be used to provide custom content for navbar title. It would override the value of `title` input property.
2327

2428
## 10.0.0
2529

‎projects/igniteui-angular/migrations/migration-collection.json

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -75,6 +75,11 @@
7575
"version": "9.1.0",
7676
"description": "Updates Ignite UI for Angular from v9.0.x to v9.1.0",
7777
"factory": "./update-9_1_0"
78+
},
79+
"migration-16": {
80+
"version": "10.1.0",
81+
"description": "Updates Ignite UI for Angular from v10.0.x to v10.1.0",
82+
"factory": "./update-10_1_0"
7883
}
7984
}
8085
}

‎projects/igniteui-angular/migrations/update-10_1_0/changes/classes.json

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
{
2+
"$schema": "../../common/schema/class.schema.json",
3+
"changes": [
4+
{
5+
"name": "IgxActionIconDirective",
6+
"replaceWith": "IgxNavbarActionDirective"
7+
}
8+
]
9+
}

‎projects/igniteui-angular/migrations/update-10_1_0/changes/selectors.json

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
{
2+
"$schema": "../../common/schema/selector.schema.json",
3+
"changes": [
4+
{
5+
"type": "component",
6+
"selector": "igx-action-icon",
7+
"replaceWith": "igx-navbar-action"
8+
}
9+
]
10+
}

‎projects/igniteui-angular/migrations/update-10_1_0/index.spec.ts

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
import * as path from 'path';
2+
3+
// tslint:disable:no-implicit-dependencies
4+
import { virtualFs } from '@angular-devkit/core';
5+
import { EmptyTree } from '@angular-devkit/schematics';
6+
// tslint:disable-next-line:no-submodule-imports
7+
import { SchematicTestRunner, UnitTestTree } from '@angular-devkit/schematics/testing';
8+
9+
describe('Update 10.1.0', () => {
10+
let appTree: UnitTestTree;
11+
const schematicRunner = new SchematicTestRunner('ig-migrate', path.join(__dirname, '../migration-collection.json'));
12+
const configJson = {
13+
defaultProject: 'testProj',
14+
projects: {
15+
testProj: {
16+
sourceRoot: '/testSrc'
17+
}
18+
},
19+
schematics: {
20+
'@schematics/angular:component': {
21+
prefix: 'appPrefix'
22+
}
23+
}
24+
};
25+
26+
beforeEach(() => {
27+
appTree = new UnitTestTree(new EmptyTree());
28+
appTree.create('/angular.json', JSON.stringify(configJson));
29+
});
30+
31+
it('should upgrade the igx-action-icon to igx-navbar-action', async () => {
32+
appTree.create(
33+
'/testSrc/appPrefix/component/custom.component.html',
34+
`<igx-navbar title="Test title">
35+
<igx-action-icon>
36+
<igx-icon>arrow_back</igx-icon>
37+
</igx-action-icon>
38+
</igx-navbar>`);
39+
const tree = await schematicRunner.runSchematicAsync('migration-16', {}, appTree)
40+
.toPromise();
41+
42+
expect(tree.readContent('/testSrc/appPrefix/component/custom.component.html'))
43+
.toEqual(
44+
`<igx-navbar title="Test title">
45+
<igx-navbar-action>
46+
<igx-icon>arrow_back</igx-icon>
47+
</igx-navbar-action>
48+
</igx-navbar>`);
49+
});
50+
51+
it('should update IgxActionIconDirective to IgxNavbarActionDirective', async () => {
52+
appTree.create('/testSrc/appPrefix/component/custom.component.ts',
53+
`import { IgxActionIconDirective } from 'igniteui-angular';
54+
export class TestNavbar {
55+
@ViewChild(IgxActionIconDirective, { read: IgxActionIconDirective })
56+
private actionIcon: IgxActionIconDirective; }`);
57+
58+
const tree = await schematicRunner.runSchematicAsync('migration-16', {}, appTree).toPromise();
59+
60+
expect(tree.readContent('/testSrc/appPrefix/component/custom.component.ts'))
61+
.toEqual(
62+
`import { IgxNavbarActionDirective } from 'igniteui-angular';
63+
export class TestNavbar {
64+
@ViewChild(IgxNavbarActionDirective, { read: IgxNavbarActionDirective })
65+
private actionIcon: IgxNavbarActionDirective; }`);
66+
});
67+
68+
});

‎projects/igniteui-angular/migrations/update-10_1_0/index.ts

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import {
2+
Rule,
3+
SchematicContext,
4+
Tree
5+
} from '@angular-devkit/schematics';
6+
import { UpdateChanges, InputPropertyType, BoundPropertyObject } from '../common/UpdateChanges';
7+
8+
const version = '10.1.0';
9+
10+
export default function (): Rule {
11+
return (host: Tree, context: SchematicContext) => {
12+
context.logger.info(`Applying migration for Ignite UI for Angular to version ${version}`);
13+
14+
const update = new UpdateChanges(__dirname, host, context);
15+
update.applyChanges();
16+
};
17+
}

‎projects/igniteui-angular/src/lib/core/styles/components/navbar/_navbar-component.scss

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -16,12 +16,10 @@
1616
}
1717

1818
@include e(left) {
19-
@extend %igx-navbar-bundle !optional;
20-
@extend %igx-navbar-icon-display !optional;
19+
@extend %igx-navbar-left !optional;
2120
}
2221

2322
@include e(right) {
24-
@extend %igx-navbar-bundle !optional;
25-
@extend %igx-navbar-icon-display !optional;
23+
@extend %igx-navbar-right !optional;
2624
}
2725
}

‎projects/igniteui-angular/src/lib/core/styles/components/navbar/_navbar-theme.scss

Lines changed: 32 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -90,9 +90,9 @@
9090
@mixin igx-navbar($theme) {
9191
@include igx-root-css-vars($theme);
9292

93-
$navbar-padding: 0 em(16px);
94-
$navbar-title-fz: em(18px, 16px);
95-
$navbar-title-lh: em(18px, 16px);
93+
$navbar-padding: 0 rem(16px);
94+
$navbar-title-fz: rem(18px, 16px);
95+
$navbar-title-lh: rem(18px, 16px);
9696
$navbar-title-margin: 0;
9797
$left: if-ltr(left, right);
9898

@@ -111,17 +111,23 @@
111111
z-index: 4;
112112
}
113113

114+
%igx-navbar-part {
115+
display: flex;
116+
align-items: center;
117+
}
118+
114119
%igx-navbar-title {
115120
margin: $navbar-title-margin;
121+
flex-grow: 1;
122+
user-select: text;
116123
}
117124

118125
%igx-navbar-bundle {
119-
display: flex;
120-
align-items: center;
126+
@extend %igx-navbar-part;
121127
user-select: none;
122128

123129
> * + * {
124-
margin-#{$left}: 16px;
130+
margin-#{$left}: rem(16px);
125131
}
126132
}
127133

@@ -137,9 +143,26 @@
137143
}
138144
}
139145

140-
igx-action-icon {
141-
display: flex;
142-
align-items: center;
146+
%igx-navbar-left {
147+
@extend %igx-navbar-bundle;
148+
@extend %igx-navbar-icon-display;
149+
flex-grow: 1;
150+
}
151+
152+
%igx-navbar-right {
153+
@extend %igx-navbar-bundle;
154+
@extend %igx-navbar-icon-display;
155+
}
156+
157+
igx-navbar-action,
158+
[igxNavbarAction] {
159+
@extend %igx-navbar-part;
160+
}
161+
162+
igx-navbar-title,
163+
[igxNavbarTitle] {
164+
@extend %igx-navbar-part;
165+
@extend %igx-navbar-title;
143166
}
144167
}
145168

‎projects/igniteui-angular/src/lib/navbar/navbar.component.html

Lines changed: 14 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,19 @@
11
<nav class="igx-navbar" role="navigation" [attr.aria-labelledby]="titleId">
22
<div class="igx-navbar__left">
3-
<igx-icon (click)="_triggerAction()" fontSet="material" *ngIf="isActionButtonVisible">{{actionButtonIcon}}</igx-icon>
4-
<ng-content select="igx-action-icon"></ng-content>
5-
<h1 class="igx-navbar__title" [attr.id]="titleId">{{ title }}</h1>
3+
<igx-icon
4+
(click)="_triggerAction()"
5+
fontSet="material"
6+
*ngIf="isActionButtonVisible">
7+
{{actionButtonIcon}}
8+
</igx-icon>
9+
<ng-content select="igx-navbar-action, [igxNavbarAction]"></ng-content>
10+
<h1
11+
*ngIf="!isTitleContentVisible"
12+
class="igx-navbar__title"
13+
[attr.id]="titleId">
14+
{{ title }}
15+
</h1>
16+
<ng-content select="igx-navbar-title, [igxNavbarTitle]"></ng-content>
617
</div>
718
<div class="igx-navbar__right">
819
<ng-content></ng-content>

0 commit comments

Comments
 (0)