From f0feadb6adaa22e6f0da7211f99cac7d1281679a Mon Sep 17 00:00:00 2001 From: stbui Date: Tue, 1 May 2018 19:34:32 +0800 Subject: [PATCH] feat: add new componet github-button --- .../github-button.component.html | 87 +++++++++++++++++++ .../github-button.component.scss | 60 +++++++++++++ .../github-button.component.spec.ts | 25 ++++++ .../github-button/github-button.component.ts | 57 ++++++++++++ .../component/github-button/github-button.md | 22 +++++ .../github-button/github-button.module.ts | 10 +++ src/app/component/github-button/index.ts | 6 ++ src/app/component/github-button/public-api.ts | 7 ++ src/app/component/index.ts | 4 +- 9 files changed, 277 insertions(+), 1 deletion(-) create mode 100644 src/app/component/github-button/github-button.component.html create mode 100644 src/app/component/github-button/github-button.component.scss create mode 100644 src/app/component/github-button/github-button.component.spec.ts create mode 100644 src/app/component/github-button/github-button.component.ts create mode 100644 src/app/component/github-button/github-button.md create mode 100644 src/app/component/github-button/github-button.module.ts create mode 100644 src/app/component/github-button/index.ts create mode 100644 src/app/component/github-button/public-api.ts diff --git a/src/app/component/github-button/github-button.component.html b/src/app/component/github-button/github-button.component.html new file mode 100644 index 0000000..b978ab8 --- /dev/null +++ b/src/app/component/github-button/github-button.component.html @@ -0,0 +1,87 @@ + + + +
+ + GitHub +
+ + + + + +
+ + Watch +
+
+ {{repository?.subscribers_count}} +
+ + + + + + +
+ + Star +
+
+ {{repository?.stargazers_count}} +
+ + + + + + + +
+ + Fork +
+
+ {{repository?.forks_count}} +
+ + + + + + +
+ + Issue +
+
+ {{repository?.open_issues_count}} +
+ + + + + +
+ + Download +
+ + + + diff --git a/src/app/component/github-button/github-button.component.scss b/src/app/component/github-button/github-button.component.scss new file mode 100644 index 0000000..b599d49 --- /dev/null +++ b/src/app/component/github-button/github-button.component.scss @@ -0,0 +1,60 @@ +a { + text-decoration: none; + cursor: pointer; + color: #909090; +} +.repo-btn { + flex: 0 0 auto; + display: inline-block; + margin-bottom: 12px; + padding: 0; + font-size: 12px; + font-weight: 600; + line-height: 1; + white-space: nowrap; + color: #23292e; + background-color: #fff; + border: 1px solid #ccced0; + border-radius: 3px; + overflow: hidden; + + &:hover .title-box { + background-color: #e6ebf1; + } + + .box .icon { + fill: currentColor; + } +} +.box { + display: flex; + align-items: center; + height: 27px; + padding: 0 9.6px; +} + +.title-box { + float: left; + background-color: #eff4f7; + border-radius: 3px 0 0 3px; +} +.title { + margin-left: 6px; +} + +.count-box { + border-left: 1px solid #ccced0; +} + +.link-btn { + color: #fff; + background-color: #007fff; + border-color: #007fff; + .title-box { + background-color: transparent; + } + + &:hover .title-box { + background-color: #006fef; + } +} diff --git a/src/app/component/github-button/github-button.component.spec.ts b/src/app/component/github-button/github-button.component.spec.ts new file mode 100644 index 0000000..7929fac --- /dev/null +++ b/src/app/component/github-button/github-button.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { GithubButtonComponent } from './github-button.component'; + +describe('GithubButtonComponent', () => { + let component: GithubButtonComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ GithubButtonComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(GithubButtonComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/component/github-button/github-button.component.ts b/src/app/component/github-button/github-button.component.ts new file mode 100644 index 0000000..514de69 --- /dev/null +++ b/src/app/component/github-button/github-button.component.ts @@ -0,0 +1,57 @@ +import { Component, OnInit, Input } from '@angular/core'; +import { HttpClient } from '@angular/common/http'; + +@Component({ + selector: 'stbui-github-button', + templateUrl: './github-button.component.html', + styleUrls: ['./github-button.component.scss'] +}) +export class GithubButtonComponent implements OnInit { + private _type; + @Input() + set type(value) { + this._type = value.split('|'); + } + get type() { + if (!this._type) { + this._type = 'link|watch|star|issue|fork|download'; + this._type = this._type.split('|'); + } + return this._type; + } + + @Input() user: string = 'stbui'; + @Input() repo: string = 'angular-material-app'; + + readonly baseApi: string = 'https://api.github.com/repos'; + readonly baseUrl: string = 'https://github.com'; + repository: object = { + subscribers_count: 0, + stargazers_count: 0, + forks_count: 0, + open_issues_count: 0 + }; + + constructor(private http: HttpClient) {} + + ngOnInit() { + const url = `${this.baseApi}/${this.user}/${this.repo}`; + this.http.get(url).subscribe(res => { + console.log(res); + this.repository = res; + }); + } + + getGithubUrl() { + const url = `${this.baseUrl}/${this.user}/${this.repo}`; + + return { + base: url, + watch: `${url}/watchers`, + star: `${url}/stargazers`, + fork: `${url}/network`, + issue: `${url}/issues`, + download: `${url}/archive/master.zip` + }; + } +} diff --git a/src/app/component/github-button/github-button.md b/src/app/component/github-button/github-button.md new file mode 100644 index 0000000..ff74682 --- /dev/null +++ b/src/app/component/github-button/github-button.md @@ -0,0 +1,22 @@ +### Basic +``` + +``` + +``` + +``` +* user: 用户 +* repo: 仓库 +* type: 显示类型 + +### Type +``` + + + + + + + +``` \ No newline at end of file diff --git a/src/app/component/github-button/github-button.module.ts b/src/app/component/github-button/github-button.module.ts new file mode 100644 index 0000000..24947af --- /dev/null +++ b/src/app/component/github-button/github-button.module.ts @@ -0,0 +1,10 @@ +import { NgModule } from '@angular/core'; +import { CommonModule } from '@angular/common'; +import { GithubButtonComponent } from './github-button.component'; + +@NgModule({ + imports: [CommonModule], + declarations: [GithubButtonComponent], + exports: [GithubButtonComponent] +}) +export class GithubButtonModule {} diff --git a/src/app/component/github-button/index.ts b/src/app/component/github-button/index.ts new file mode 100644 index 0000000..8fa89fc --- /dev/null +++ b/src/app/component/github-button/index.ts @@ -0,0 +1,6 @@ +/** + * @license + * Copyright Stbui All Rights Reserved. + */ + +export * from './public-api'; diff --git a/src/app/component/github-button/public-api.ts b/src/app/component/github-button/public-api.ts new file mode 100644 index 0000000..96adfb6 --- /dev/null +++ b/src/app/component/github-button/public-api.ts @@ -0,0 +1,7 @@ +/** + * @license + * Copyright Stbui All Rights Reserved. + */ + +export * from './github-button.module'; +export * from './github-button.component'; \ No newline at end of file diff --git a/src/app/component/index.ts b/src/app/component/index.ts index 6aaa043..3c5bdbb 100644 --- a/src/app/component/index.ts +++ b/src/app/component/index.ts @@ -9,4 +9,6 @@ export * from './search'; export * from './count-down'; export * from './mobile-input'; export * from './popover'; -export * from './table'; \ No newline at end of file +export * from './table'; +export * from './tag-select'; +export * from './github-button'; \ No newline at end of file