Skip to content

Commit c0b9a21

Browse files
lokesh-coderlokesh-coder
committed
feat: added dynamic change log page
1 parent d00b8e6 commit c0b9a21

16 files changed

+2382
-272
lines changed

‎.angular-cli.json

Lines changed: 26 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -3,39 +3,38 @@
33
"project": {
44
"name": "ngx-choosy"
55
},
6-
"apps": [
7-
{
8-
"root": "src",
9-
"outDir": "dist",
10-
"assets": [
11-
"assets",
12-
"favicon.ico"
13-
],
14-
"index": "index.html",
15-
"main": "main.ts",
16-
"polyfills": "polyfills.ts",
17-
"test": "test.ts",
18-
"tsconfig": "tsconfig.app.json",
19-
"testTsconfig": "tsconfig.spec.json",
20-
"prefix": "app",
21-
"styles": [
22-
"styles.scss"
23-
],
24-
"scripts": [],
25-
"environmentSource": "environments/environment.ts",
26-
"environments": {
27-
"dev": "environments/environment.ts",
28-
"prod": "environments/environment.prod.ts"
29-
}
6+
"apps": [{
7+
"root": "src",
8+
"outDir": "dist",
9+
"assets": [
10+
"assets",
11+
"favicon.ico"
12+
],
13+
"index": "index.html",
14+
"main": "main.ts",
15+
"polyfills": "polyfills.ts",
16+
"test": "test.ts",
17+
"tsconfig": "tsconfig.app.json",
18+
"testTsconfig": "tsconfig.spec.json",
19+
"prefix": "app",
20+
"styles": [
21+
"styles.scss"
22+
],
23+
"scripts": [
24+
"../node_modules/marked/lib/marked.js"
25+
],
26+
"environmentSource": "environments/environment.ts",
27+
"environments": {
28+
"dev": "environments/environment.ts",
29+
"prod": "environments/environment.prod.ts"
3030
}
31-
],
31+
}],
3232
"e2e": {
3333
"protractor": {
3434
"config": "./protractor.conf.js"
3535
}
3636
},
37-
"lint": [
38-
{
37+
"lint": [{
3938
"project": "src/tsconfig.app.json"
4039
},
4140
{

‎package.json

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -27,9 +27,12 @@
2727
"bootstrap-sass": "^3.3.7",
2828
"classlist.js": "^1.1.20150312",
2929
"core-js": "^2.4.1",
30+
"feather-icons": "^3.0.0",
31+
"i": "^0.3.5",
32+
"ng2-markdown-to-html": "^1.3.0",
33+
"npm": "^5.3.0",
3034
"rxjs": "^5.1.0",
31-
"zone.js": "^0.8.4",
32-
"feather-icons": "^3.0.0"
35+
"zone.js": "^0.8.4"
3336
},
3437
"devDependencies": {
3538
"@angular/cli": "1.2.4",
@@ -49,10 +52,10 @@
4952
"karma-jasmine-html-reporter": "^0.2.2",
5053
"ng-validators": "^0.2.1",
5154
"protractor": "~5.1.2",
55+
"semantic-release": "^6.3.6",
5256
"ts-node": "~3.3.0",
5357
"tslint": "~5.5.0",
54-
"typescript": "~2.4.1",
55-
"semantic-release": "^6.3.6"
58+
"typescript": "~2.4.1"
5659
},
5760
"repository": {
5861
"type": "git",

‎src/app/app.component.html

Lines changed: 3 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -32,81 +32,21 @@ <h1>ngx-choosy</h1>
3232
</div>
3333
</div>
3434

35+
3536
<div class="wrapper">
3637
<div class="container">
3738
<div class="row">
3839
<div class="col-md-3">
3940

4041
<ul class="list-group">
41-
<li class="list-group-item" *ngFor="let item of menu" [ngClass]="{'current':item.name=='Demo'}">
42+
<li class="list-group-item" *ngFor="let item of menu" [ngClass]="{'current':item.name=='Demo'}" [routerLink]="item.url">
4243
<span>{{item.name}}</span> <i data-feather="chevron-right"></i></li>
4344
</ul>
4445

4546
</div>
4647
<div class="col-md-9">
47-
<div id="content">
48-
<h1>Basic demo</h1>
49-
<p>
50-
<strong>ngx-choosy</strong> turns any input element in to a dropdown select box. Thus, it does not apply any
51-
styles to your input. It also gives a freedom to style your input fields to your needs.
52-
</p>
53-
<br/>
54-
<div class="example">
55-
<h2><i data-feather="play"></i> Single select dropdown</h2>
56-
<div class="row">
57-
<div class="col-md-6">
58-
<div class="form-group">
59-
<label class="sr-only" for="exampleInputAmount">Amount (in dollars)</label>
60-
<input type="text" placeholder="choose" class="form-control" choosySingleSelect [options]="universities" />
61-
</div>
62-
</div>
63-
</div>
64-
</div>
65-
<div class="example">
66-
<h2><i data-feather="play"></i>With animation and without search/footer</h2>
67-
<div class="row">
68-
<div class="col-md-6">
69-
<div class="form-group">
70-
<label class="sr-only" for="exampleInputAmount">Amount (in dollars)</label>
71-
<input type="text" placeholder="choose" class="form-control" choosySingleSelect [options]="universities" [config]="{search:{enable:false},footer:{enable:false},dropdown:{animation:true}}"
72-
/>
73-
</div>
74-
</div>
75-
</div>
76-
</div>
77-
78-
<div class="example">
79-
<h2><i data-feather="play"></i> Custom template</h2>
80-
<div class="row">
81-
<div class="col-md-6">
82-
<div class="form-group">
83-
<label class="sr-only" for="exampleInputAmount">Colors</label>
84-
<div class="input-group">
85-
<input type="text" placeholder="choose" class="form-control" choosySingleSelect [options]="users" [config]="{displayValue:'email',search:{keys:['value.email','value.name.first','value.name.last']}}"
86-
[template]="add" (isOpen)="foobar=$event" (choosy)="addressEvent($event)" />
87-
<div class="input-group-addon" (click)="openAddressDd($event)">
88-
<i class="fa" [ngClass]="{'fa-angle-up':foobar,'fa-angle-down':!foobar}"></i>
89-
</div>
90-
</div>
91-
</div>
92-
</div>
93-
</div>
94-
</div>
95-
</div>
48+
<router-outlet></router-outlet>
9649
</div>
9750
</div>
9851
</div>
9952
</div>
100-
101-
102-
<ng-template let-item #add>
103-
<div class="card">
104-
<div class="pic">
105-
<img src="{{item.picture.thumbnail}}">
106-
</div>
107-
<div class="detail">
108-
<div><strong>{{item.name.first}} {{item.name.last}}</strong></div>
109-
<div>{{item.email}}</div>
110-
</div>
111-
</div>
112-
</ng-template>

‎src/app/app.component.scss

Lines changed: 0 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,3 @@
11
#box {
22
text-align: center;
33
}
4-
5-
.card {
6-
display: flex;
7-
align-items: center;
8-
.pic {
9-
margin-right: 12px;
10-
img {
11-
border-radius: 100%;
12-
transition: all 0.5s ease;
13-
transform: scale(0.95);
14-
}
15-
}
16-
.detail {
17-
div:last-child {
18-
opacity: 0.5;
19-
}
20-
}
21-
&:hover {
22-
.pic img {
23-
transform: scale(1);
24-
}
25-
}
26-
}

‎src/app/app.component.ts

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import {
66
products,
77
universities,
88
users
9-
} from './data';
9+
} from './data';
1010

1111

1212
@Component({
@@ -36,14 +36,14 @@ export class AppComponent {
3636
this.universities = universities;
3737
this.users = users;
3838
this.menu = [
39-
{ name: 'Demo' },
40-
{ name: 'Installation' },
41-
{ name: 'Single select' },
42-
{ name: 'Multi select' },
43-
{ name: 'Button dropdown' },
44-
{ name: 'Autocomplete' },
45-
{ name: 'Configuration' },
46-
{ name: 'Changelog' }
39+
{ name: 'Demo', url: '/' },
40+
{ name: 'Installation', url: '/' },
41+
{ name: 'Single select', url: '/' },
42+
{ name: 'Multi select', url: '/' },
43+
{ name: 'Button dropdown', url: '/' },
44+
{ name: 'Autocomplete', url: '/' },
45+
{ name: 'Configuration', url: '/' },
46+
{ name: 'Changelog', url: '/changelog' }
4747
];
4848

4949
this.buttonMenu = [

‎src/app/app.module.ts

Lines changed: 17 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,30 @@
11
import { NgModule } from '@angular/core';
22
import { BrowserModule } from '@angular/platform-browser';
3+
import { RouterModule, Routes } from '@angular/router';
4+
import { HttpModule } from '@angular/http';
35
import { NgxChoosyModule } from '@nglibrary/ngx-choosy';
6+
import { MarkdownToHtmlModule } from 'ng2-markdown-to-html';
47
import { AppComponent } from './app.component';
8+
import { ChangelogComponent } from './pages/changelog/changelog.component';
9+
import { ExamplesComponent } from './pages/examples/examples.component';
10+
11+
const routes: Routes = [
12+
{ path: '', component: ExamplesComponent },
13+
{ path: 'changelog', component: ChangelogComponent },
14+
{ path: '**', component: AppComponent },
15+
];
516

617
@NgModule({
718
declarations: [
8-
AppComponent
19+
AppComponent,
20+
ChangelogComponent,
21+
ExamplesComponent
922
],
1023
imports: [
1124
BrowserModule,
25+
HttpModule,
26+
RouterModule.forRoot(routes),
27+
MarkdownToHtmlModule.forRoot(),
1228
NgxChoosyModule
1329
],
1430
providers: [],

‎src/app/pages/changelog/changelog.component.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
<markdown-to-html [src]="'https://raw.githubusercontent.com/nglibrary/ngx-choosy/master/CHANGELOG.md'"></markdown-to-html>

‎src/app/pages/changelog/changelog.component.scss

Whitespace-only changes.

‎src/app/pages/changelog/changelog.component.spec.ts

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
2+
3+
import { ChangelogComponent } from './changelog.component';
4+
5+
describe('ChangelogComponent', () => {
6+
let component: ChangelogComponent;
7+
let fixture: ComponentFixture<ChangelogComponent>;
8+
9+
beforeEach(async(() => {
10+
TestBed.configureTestingModule({
11+
declarations: [ ChangelogComponent ]
12+
})
13+
.compileComponents();
14+
}));
15+
16+
beforeEach(() => {
17+
fixture = TestBed.createComponent(ChangelogComponent);
18+
component = fixture.componentInstance;
19+
fixture.detectChanges();
20+
});
21+
22+
it('should be created', () => {
23+
expect(component).toBeTruthy();
24+
});
25+
});

‎src/app/pages/changelog/changelog.component.ts

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import { Component, OnInit } from '@angular/core';
2+
import { Http } from '@angular/http';
3+
4+
@Component({
5+
selector: 'app-changelog',
6+
templateUrl: './changelog.component.html',
7+
styleUrls: ['./changelog.component.scss']
8+
})
9+
export class ChangelogComponent implements OnInit {
10+
11+
changelogUrl = `https://raw.githubusercontent.com/nglibrary/ngx-choosy/master/CHANGELOG.md`;
12+
// changelogUrl = `https://api.github.com/repos/nglibrary/ngx-choosy/contents/CHANGELOG.md`;
13+
mdContent;
14+
constructor(private http: Http) { }
15+
16+
ngOnInit() {
17+
this.http.get(this.changelogUrl).subscribe(res => {
18+
this.mdContent = res.text();
19+
});
20+
}
21+
22+
}

‎src/app/pages/examples/examples.component.html

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
<div id="content">
2+
<h1>Basic demo</h1>
3+
<p>
4+
<strong>ngx-choosy</strong> turns any input element in to a dropdown select box. Thus, it does not apply any styles to
5+
your input. It also gives a freedom to style your input fields to your needs.
6+
</p>
7+
<br/>
8+
<div class="example">
9+
<h2><i data-feather="play"></i> Single select dropdown</h2>
10+
<div class="row">
11+
<div class="col-md-6">
12+
<div class="form-group">
13+
<label class="sr-only" for="exampleInputAmount">Amount (in dollars)</label>
14+
<input type="text" placeholder="choose" class="form-control" choosySingleSelect [options]="universities" />
15+
</div>
16+
</div>
17+
</div>
18+
</div>
19+
<div class="example">
20+
<h2><i data-feather="play"></i>With animation and without search/footer</h2>
21+
<div class="row">
22+
<div class="col-md-6">
23+
<div class="form-group">
24+
<label class="sr-only" for="exampleInputAmount">Amount (in dollars)</label>
25+
<input type="text" placeholder="choose" class="form-control" choosySingleSelect [options]="universities" [config]="{search:{enable:false},footer:{enable:false},dropdown:{animation:true}}"
26+
/>
27+
</div>
28+
</div>
29+
</div>
30+
</div>
31+
32+
<div class="example">
33+
<h2><i data-feather="play"></i> Custom template</h2>
34+
<div class="row">
35+
<div class="col-md-6">
36+
<div class="form-group">
37+
<label class="sr-only" for="exampleInputAmount">Colors</label>
38+
<div class="input-group">
39+
<input type="text" placeholder="choose" class="form-control" choosySingleSelect [options]="users" [config]="{displayValue:'email',search:{keys:['value.email','value.name.first','value.name.last']}}"
40+
[template]="add" (isOpen)="foobar=$event" (choosy)="addressEvent($event)" />
41+
<div class="input-group-addon" (click)="openAddressDd($event)">
42+
<i class="fa" [ngClass]="{'fa-angle-up':foobar,'fa-angle-down':!foobar}"></i>
43+
</div>
44+
</div>
45+
</div>
46+
</div>
47+
</div>
48+
</div>
49+
</div>
50+
51+
52+
<ng-template let-item #add>
53+
<div class="card">
54+
<div class="pic">
55+
<img src="{{item.picture.thumbnail}}">
56+
</div>
57+
<div class="detail">
58+
<div><strong>{{item.name.first}} {{item.name.last}}</strong></div>
59+
<div>{{item.email}}</div>
60+
</div>
61+
</div>
62+
</ng-template>

0 commit comments

Comments
 (0)