Skip to content

Commit 183ebde

Browse files
author
Leo Vo
committed
Refactor CSS.
1 parent 2e6b761 commit 183ebde

19 files changed

+162
-112
lines changed

‎CHANGELOG.md

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -46,4 +46,10 @@ export class TreeviewConfig {
4646
}
4747
```
4848
### Demo:
49-
* Example for dropdown-treeview-select component.
49+
* Example for ngx-dropdown-treeview-select component.
50+
51+
# [1.0.8](https://www.npmjs.com/package/ngx-treeview) (2017-07-20)
52+
### Enhancement:
53+
* Refactor CSS.
54+
### Demo:
55+
* Update examples.

‎e2e/tsconfig.e2e.json

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,12 @@
22
"extends": "../tsconfig.json",
33
"compilerOptions": {
44
"outDir": "../out-tsc/e2e",
5+
"baseUrl": "./",
56
"module": "commonjs",
67
"target": "es5",
7-
"types":[
8+
"types": [
89
"jasmine",
10+
"jasminewd2",
911
"node"
1012
]
1113
}

‎package.json

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "ngx-treeview",
3-
"version": "1.0.7",
3+
"version": "1.0.8",
44
"license": "MIT",
55
"description": "An Angular treeview component with checkbox",
66
"scripts": {
@@ -62,9 +62,10 @@
6262
"@angular/platform-browser": "^4.2.6",
6363
"@angular/platform-browser-dynamic": "^4.2.6",
6464
"@angular/router": "^4.2.6",
65-
"@types/jasmine": "2.5.38",
65+
"@types/jasmine": "^2.5.53",
66+
"@types/jasminewd2": "^2.0.2",
6667
"@types/lodash": "^4.14.68",
67-
"@types/node": "^7.0.33",
68+
"@types/node": "^8.0.14",
6869
"bootstrap": "^4.0.0-alpha.6",
6970
"codecov": "^2.1.0",
7071
"codelyzer": "^3.1.2",
@@ -92,4 +93,4 @@
9293
"typescript": "^2.4.1",
9394
"zone.js": "^0.8.1"
9495
}
95-
}
96+
}

‎src/demo/app.component.html

Lines changed: 0 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -16,18 +16,13 @@ <h2>Angular ngx-treeview component demo</h2>
1616
</div>
1717
</div>
1818
<hr>
19-
<h4>Example 1: Primary features</h4>
2019
<ngx-book></ngx-book>
2120
<br />
22-
<h4>Example 2: Performance with 1000 items</h4>
2321
<ngx-room></ngx-room>
2422
<br />
25-
<h4>Example 3: Using pipe & i18n</h4>
2623
<ngx-city></ngx-city>
2724
<br />
28-
<h4>Example 4: dropdown-treeview-select Component</h4>
2925
<ngx-dropdown-treeview-select-demo></ngx-dropdown-treeview-select-demo>
3026
<br />
31-
<h4>Example 5: Tree-view without drop-down & custom TreeviewConfig & custom TreeviewEventParser & custom template</h4>
3227
<ngx-product></ngx-product>
3328
</div>

‎src/demo/book/book.component.html

Lines changed: 42 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,52 @@
1+
<h4>Example 1: Primary features</h4>
12
<div class="row">
23
<div class="col-12">
34
<div class="alert alert-success" role="alert">
45
Selected books: {{values}}
56
</div>
67
</div>
78
<div class="col-12">
8-
<div class="form-check">
9-
<label class="form-check-label">
10-
<input class="form-check-input" type="checkbox" [(ngModel)]="enableButton">
11-
Check/uncheck to enable/disable dropdown button
12-
</label>
13-
</div>
14-
<div class="form-group row">
15-
<label for="book-category" class="col-3 col-form-label">Book category</label>
16-
<div class="col-9">
17-
<div class="d-inline-block">
18-
<ngx-dropdown-treeview [config]="config" [items]="items" (selectedChange)="values = $event"
19-
[disabled]="!enableButton" [ngxDisabledOnSelector]="'button.dropdown-toggle'">
9+
<div class="row">
10+
<div class="col-lg-4 col-sm-12">
11+
<div class="form-group">
12+
<p><strong>Configuration</strong></p>
13+
<div class="form-check">
14+
<label class="form-check-label">
15+
<input type="checkbox" class="form-check-input" [(ngModel)]="config.hasAllCheckBox">
16+
hasAllCheckBox
17+
</label>
18+
</div>
19+
<div class="form-check">
20+
<label class="form-check-label">
21+
<input type="checkbox" class="form-check-input" [(ngModel)]="config.hasFilter">
22+
hasFilter
23+
</label>
24+
</div>
25+
<div class="form-check">
26+
<label class="form-check-label">
27+
<input type="checkbox" class="form-check-input" [(ngModel)]="config.hasCollapseExpand">
28+
hasCollapseExpand
29+
</label>
30+
</div>
31+
<div class="form-inline">
32+
<div class="form-group">
33+
<label for="maxHeight">maxHeight</label>
34+
<input type="text" class="form-control mx-sm-3" id="maxHeight" placeholder="maxHeight" [(ngModel)]="config.maxHeight">
35+
</div>
36+
</div>
37+
</div>
38+
</div>
39+
<div class="col-lg-4 col-sm-12">
40+
<div class="form-group">
41+
<p><strong>ngx-treeview</strong></p>
42+
<ngx-treeview [config]="config" [items]="items" (selectedChange)="values = $event">
43+
</ngx-treeview>
44+
</div>
45+
</div>
46+
<div class="col-lg-4 col-sm-12">
47+
<div class="form-group">
48+
<p><strong>ngx-dropdown-treeview</strong></p>
49+
<ngx-dropdown-treeview [config]="config" [items]="items" (selectedChange)="values = $event">
2050
</ngx-dropdown-treeview>
2151
</div>
2252
</div>

‎src/demo/book/book.component.ts

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,14 +10,13 @@ import { BookService } from './book.service';
1010
]
1111
})
1212
export class BookComponent implements OnInit {
13-
enableButton = true;
1413
items: TreeviewItem[];
1514
values: number[];
1615
config = TreeviewConfig.create({
1716
hasAllCheckBox: true,
1817
hasFilter: true,
1918
hasCollapseExpand: true,
20-
maxHeight: 500
19+
maxHeight: 400
2120
});
2221

2322
constructor(

‎src/demo/city/city.component.html

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,25 @@
1+
<h4>Example 3: Using ngxTreeview pipe, custom TreeviewI18n & how to enable/disable dropdown button</h4>
12
<div class="row">
23
<div class="col-12">
34
<div class="alert alert-success" role="alert">
45
Selected cities: {{values | json}}
56
</div>
67
</div>
78
<div class="col-12">
9+
<div class="form-check">
10+
<label class="form-check-label">
11+
<input class="form-check-input" type="checkbox" [(ngModel)]="dropdownEnabled">
12+
Check/uncheck to enable/disable dropdown button
13+
</label>
14+
</div>
815
<div class="form-group row">
916
<label for="city-category" class="col-3 col-form-label">City category</label>
1017
<div class="col-9">
11-
<ngx-dropdown-treeview [items]="cities | ngxTreeview:'name'" (selectedChange)="values = $event">
12-
</ngx-dropdown-treeview>
18+
<div class="d-inline-block">
19+
<ngx-dropdown-treeview [items]="cities | ngxTreeview:'name'" (selectedChange)="values = $event" [disabled]="!dropdownEnabled"
20+
[ngxDisabledOnSelector]="'button.dropdown-toggle'">
21+
</ngx-dropdown-treeview>
22+
</div>
1323
</div>
1424
</div>
1525
</div>

‎src/demo/city/city.component.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ import { CityTreeviewI18n } from './city-treeview-i18n';
1212
]
1313
})
1414
export class CityComponent implements OnInit {
15+
dropdownEnabled = true;
1516
cities: City[];
1617
values: City[];
1718

‎src/demo/dropdown-treeview-select/dropdown-treeview-select-demo.component.html

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,16 @@
1+
<h4>Example 4: Using custom template => building a ngx-dropdown-treeview-select component</h4>
12
<div class="row">
2-
<div class="col-6">
3+
<div class="col-12">
4+
<div class="alert alert-success" role="alert">
5+
Selected book: {{ selectedItem | json }}
6+
</div>
7+
</div>
8+
<div class="col-12">
39
<div class="form-group">
410
<div class="d-inline-block">
511
<ngx-dropdown-treeview-select [config]="config" [items]="items" (selectedChange)="selectedItem = $event">
612
</ngx-dropdown-treeview-select>
713
</div>
814
</div>
915
</div>
10-
<div class="col-6">
11-
<div class="alert alert-success" role="alert">
12-
Selected book: {{ selectedItem | json }}
13-
</div>
14-
</div>
1516
</div>

‎src/demo/dropdown-treeview-select/dropdown-treeview-select.component.html

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
</ng-template>
88
<ng-template #headerTemplate let-config="config" let-item="item" let-onCollapseExpand="onCollapseExpand" let-onCheckedChange="onCheckedChange"
99
let-onFilterTextChange="onFilterTextChange">
10-
<div *ngIf="config.hasFilter" class="row">
10+
<div *ngIf="config.hasFilter" class="row row-filter">
1111
<div class="col-12">
1212
<input class="form-control" type="text" [placeholder]="i18n.filterPlaceholder()" [(ngModel)]="filterText" (ngModelChange)="onFilterTextChange($event)"
1313
/>
@@ -16,15 +16,15 @@
1616
<div *ngIf="config.hasAllCheckBox || config.hasCollapseExpand" class="row">
1717
<div class="col-12" [class.row-margin]="config.hasFilter && (config.hasAllCheckBox || config.hasCollapseExpand)">
1818
<label *ngIf="config.hasAllCheckBox" (click)="select(item)">
19-
{{ i18n.allCheckboxText() }}
19+
<strong>{{ i18n.allCheckboxText() }}</strong>
2020
</label>
21-
<label *ngIf="config.hasCollapseExpand" class="pull-right label-collapse-expand" (click)="onCollapseExpand()">
21+
<label *ngIf="config.hasCollapseExpand" class="pull-right" (click)="onCollapseExpand()">
2222
<i [title]="i18n.tooltipCollapseExpand(item.collapsed)" aria-hidden="true"
2323
class="fa" [class.fa-expand]="item.collapsed" [class.fa-compress]="!item.collapsed"></i>
2424
</label>
2525
</div>
2626
</div>
27-
<div class="divider"></div>
27+
<div *ngIf="config.hasDivider" class="dropdown-divider"></div>
2828
</ng-template>
2929
<ngx-dropdown-treeview [config]="config" [headerTemplate]="headerTemplate" [items]="items" [itemTemplate]="itemTemplate">
3030
</ngx-dropdown-treeview>

‎src/demo/product/product.component.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@
1212
</label>
1313
</div>
1414
</ng-template>
15+
<h4>Example 5: Using custom TreeviewConfig & custom TreeviewEventParser & custom template</h4>
1516
<div class="row">
1617
<div class="col-6">
1718
<div class="form-group">

‎src/demo/product/product.component.ts

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ export class ProductTreeviewConfig extends TreeviewConfig {
1111
hasAllCheckBox = true;
1212
hasFilter = true;
1313
hasCollapseExpand = false;
14-
maxHeight = 500;
14+
maxHeight = 400;
1515
}
1616

1717
@Component({
@@ -56,9 +56,13 @@ export class ProductComponent implements OnInit {
5656
removeItem(item: TreeviewItem) {
5757
let isRemoved = false;
5858
for (let i = 0; i < this.items.length; i++) {
59-
isRemoved = TreeviewHelper.removeItem(this.items[0], item);
60-
if (isRemoved) {
61-
break;
59+
if (this.items[i] === item) {
60+
_.remove(this.items, item);
61+
} else {
62+
isRemoved = TreeviewHelper.removeItem(this.items[i], item);
63+
if (isRemoved) {
64+
break;
65+
}
6266
}
6367
}
6468

‎src/demo/room/room.component.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
<h4>Example 2: Performance with 1000 items</h4>
12
<div class="row">
23
<div class="col-12">
34
<div class="alert alert-success" role="alert">

‎src/lib/treeview.component.html

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -9,29 +9,29 @@
99
</label>
1010
</div>
1111
</ng-template>
12-
<ng-template #defaultHeaderTemplate let-config="config" let-item="item" let-onCollapseExpand="onCollapseExpand"
13-
let-onCheckedChange="onCheckedChange" let-onFilterTextChange="onFilterTextChange">
14-
<div *ngIf="config.hasFilter" class="row">
12+
<ng-template #defaultHeaderTemplate let-config="config" let-item="item" let-onCollapseExpand="onCollapseExpand" let-onCheckedChange="onCheckedChange"
13+
let-onFilterTextChange="onFilterTextChange">
14+
<div *ngIf="config.hasFilter" class="row row-filter">
1515
<div class="col-12">
1616
<input class="form-control" type="text" [placeholder]="i18n.filterPlaceholder()" [(ngModel)]="filterText" (ngModelChange)="onFilterTextChange($event)"
1717
/>
1818
</div>
1919
</div>
2020
<div *ngIf="hasFilterItems">
2121
<div *ngIf="config.hasAllCheckBox || config.hasCollapseExpand" class="row">
22-
<div class="col-12" [class.row-margin]="config.hasFilter && (config.hasAllCheckBox || config.hasCollapseExpand)">
23-
<label *ngIf="config.hasAllCheckBox" class="form-check-label label-item-all">
22+
<div class="col-12">
23+
<label *ngIf="config.hasAllCheckBox" class="form-check-label">
2424
<input type="checkbox" class="form-check-input"
2525
[(ngModel)]="item.checked" (ngModelChange)="onCheckedChange($event)" />
2626
{{i18n.allCheckboxText()}}
2727
</label>
28-
<label *ngIf="config.hasCollapseExpand" class="pull-right label-collapse-expand" (click)="onCollapseExpand()">
28+
<label *ngIf="config.hasCollapseExpand" class="pull-right form-check-label" (click)="onCollapseExpand()">
2929
<i [title]="i18n.tooltipCollapseExpand(item.collapsed)" aria-hidden="true"
3030
class="fa" [class.fa-expand]="item.collapsed" [class.fa-compress]="!item.collapsed"></i>
3131
</label>
3232
</div>
3333
</div>
34-
<div *ngIf="config.hasDivider" class="divider"></div>
34+
<div *ngIf="config.hasDivider" class="dropdown-divider"></div>
3535
</div>
3636
</ng-template>
3737
<div class="treeview-header">

‎src/lib/treeview.component.scss

Lines changed: 9 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,14 @@
1-
:host /deep/ .fa {
2-
margin-right: .2rem;
3-
width: .5rem;
4-
cursor: pointer;
5-
}
6-
7-
:host /deep/ .treeview-header {
8-
.row {
9-
.row-margin {
10-
margin-top: .3rem;
11-
.label-collapse-expand {
12-
margin-bottom: 0;
13-
padding: 0 .3rem;
14-
cursor: pointer;
15-
}
1+
:host /deep/ {
2+
.treeview-header {
3+
.row-filter {
4+
margin-bottom: .5rem;
165
}
176
}
18-
.divider {
19-
height: 1px;
20-
margin: 0.5rem 0;
21-
overflow: hidden;
22-
background: #000;
7+
.treeview-container {
8+
.fa {
9+
margin-right: .3rem;
10+
cursor: pointer;
11+
}
2312
}
2413
}
2514

0 commit comments

Comments
 (0)