-
Notifications
You must be signed in to change notification settings - Fork 175
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: add new componet github-button
- Loading branch information
Showing
9 changed files
with
277 additions
and
1 deletion.
There are no files selected for viewing
87 changes: 87 additions & 0 deletions
87
src/app/component/github-button/github-button.component.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,87 @@ | ||
| <ng-container *ngFor="let typ of type"> | ||
| <ng-container *ngIf="typ ==='link'"> | ||
| <a class="repo-btn link-btn" target="_blank" [href]="getGithubUrl().base"> | ||
| <div class="box title-box"> | ||
| <svg aria-hidden="true" version="1.1" width="12" height="15" viewBox="2 0 12 15" class="icon icon-link"> | ||
| <g fill-rule="evenodd"> | ||
| <path d="M8.863 6.247a2.622 2.622 0 0 0-.267-.23.53.53 0 1 0-.643.834c.05.041.1.082.145.128l.044.044c.55.548.385 1.493-.164 2.042l-2.343 2.342a1.41 1.41 0 0 1-1.99 0l-.045-.044a1.408 1.408 0 0 1 0-1.99l1.035-1.035a.574.574 0 0 0-.68-.927l-.001-.001-.011.01a.578.578 0 0 0-.11.102L2.758 8.53a2.608 2.608 0 0 0 0 3.677l.043.044a2.608 2.608 0 0 0 3.677 0L8.82 9.907C9.83 8.896 9.916 7.3 8.906 6.29l-.043-.043z"></path> | ||
| <path d="M12.24 2.811l-.044-.043a2.607 2.607 0 0 0-3.677 0L6.177 5.11C5.165 6.12 5.11 7.582 6.12 8.594l.043.042c.046.046.093.09.142.13.035.04.077.074.123.1v.001a.5.5 0 0 0 .7-.651c-.066-.149-.19-.239-.275-.325L6.81 7.85c-.55-.549-.34-1.347.208-1.896l2.344-2.342c.548-.55 1.44-.55 1.99 0l.043.043c.55.55.55 1.443 0 1.991l-1.031 1.033a.57.57 0 0 0 .638.944l.002.004.016-.015a.575.575 0 0 0 .13-.12l1.087-1.003a2.606 2.606 0 0 0 .001-3.677z"></path> | ||
| </g> | ||
| </svg> | ||
| <span class="title">GitHub</span> | ||
| </div> | ||
| </a> | ||
| </ng-container> | ||
|
|
||
| <ng-container *ngIf="typ === 'watch'"> | ||
| <a class="repo-btn watch-btn" target="_blank" [href]="getGithubUrl().watch"> | ||
| <div class="box title-box"> | ||
| <svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16" class="icon watch-icon"> | ||
| <path fill-rule="evenodd" d="M8.06 2C3 2 0 8 0 8s3 6 8.06 6C13 14 16 8 16 8s-3-6-7.94-6zM8 12c-2.2 0-4-1.78-4-4 0-2.2 1.8-4 4-4 2.22 0 4 1.8 4 4 0 2.22-1.78 4-4 4zm2-4c0 1.11-.89 2-2 2-1.11 0-2-.89-2-2 0-1.11.89-2 2-2 1.11 0 2 .89 2 2z"></path> | ||
| </svg> | ||
| <span class="title">Watch</span> | ||
| </div> | ||
| <div class="box count-box"> | ||
| <span class="count">{{repository?.subscribers_count}}</span> | ||
| </div> | ||
| </a> | ||
|
|
||
| </ng-container> | ||
|
|
||
| <ng-container *ngIf="typ === 'star'"> | ||
| <a class="repo-btn star-btn" [href]="getGithubUrl().star" target="_blank"> | ||
| <div class="box title-box"> | ||
| <svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 14 16" width="14" class="icon star-icon"> | ||
| <path fill-rule="evenodd" d="M14 6l-4.9-.64L7 1 4.9 5.36 0 6l3.6 3.26L2.67 14 7 11.67 11.33 14l-.93-4.74z"></path> | ||
| </svg> | ||
| <span class="title">Star</span> | ||
| </div> | ||
| <div class="box count-box"> | ||
| <span class="count">{{repository?.stargazers_count}}</span> | ||
| </div> | ||
| </a> | ||
|
|
||
| </ng-container> | ||
|
|
||
|
|
||
| <ng-container *ngIf="typ === 'fork'"> | ||
| <a class="repo-btn fork-btn" [href]="getGithubUrl().fork" target="_blank"> | ||
| <div class="box title-box"> | ||
| <svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 10 16" width="10" class="icon fork-icon"> | ||
| <path fill-rule="evenodd" d="M8 1a1.993 1.993 0 0 0-1 3.72V6L5 8 3 6V4.72A1.993 1.993 0 0 0 2 1a1.993 1.993 0 0 0-1 3.72V6.5l3 3v1.78A1.993 1.993 0 0 0 5 15a1.993 1.993 0 0 0 1-3.72V9.5l3-3V4.72A1.993 1.993 0 0 0 8 1zM2 4.2C1.34 4.2.8 3.65.8 3c0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2zm3 10c-.66 0-1.2-.55-1.2-1.2 0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2zm3-10c-.66 0-1.2-.55-1.2-1.2 0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2z"></path> | ||
| </svg> | ||
| <span class="title">Fork</span> | ||
| </div> | ||
| <div class="box count-box"> | ||
| <span class="count">{{repository?.forks_count}}</span> | ||
| </div> | ||
| </a> | ||
| </ng-container> | ||
|
|
||
|
|
||
| <ng-container *ngIf="typ === 'issue'"> | ||
| <a class="repo-btn issues-btn" [href]="getGithubUrl().issue" target="_blank"> | ||
| <div class="box title-box"> | ||
| <svg version="1.1" height="16" viewBox="0 0 14 16" class="icon issues-icon" aria-hidden="true"> | ||
| <path fill-rule="evenodd" d="M7 2.3c3.14 0 5.7 2.56 5.7 5.7s-2.56 5.7-5.7 5.7A5.71 5.71 0 0 1 1.3 8c0-3.14 2.56-5.7 5.7-5.7zM7 1C3.14 1 0 4.14 0 8s3.14 7 7 7 7-3.14 7-7-3.14-7-7-7zm1 3H6v5h2V4zm0 6H6v2h2v-2z"></path> | ||
| </svg> | ||
| <span class="title">Issue</span> | ||
| </div> | ||
| <div class="box count-box"> | ||
| <span class="count">{{repository?.open_issues_count}}</span> | ||
| </div> | ||
| </a> | ||
| </ng-container> | ||
|
|
||
| <ng-container *ngIf="typ === 'download'"> | ||
| <a class="repo-btn download-btn" [href]="getGithubUrl().download" target="_blank"> | ||
| <div class="box title-box"> | ||
| <svg version="1.1" height="16" viewBox="0 0 16 16" class="icon download-icon" aria-hidden="true"> | ||
| <path fill-rule="evenodd" d="M9 12h2l-3 3-3-3h2V7h2v5zm3-8c0-.44-.91-3-4.5-3C5.08 1 3 2.92 3 5 1.02 5 0 6.52 0 8c0 1.53 1 3 3 3h3V9.7H3C1.38 9.7 1.3 8.28 1.3 8c0-.17.05-1.7 1.7-1.7h1.3V5c0-1.39 1.56-2.7 3.2-2.7 2.55 0 3.13 1.55 3.2 1.8v1.2H12c.81 0 2.7.22 2.7 2.2 0 2.09-2.25 2.2-2.7 2.2h-2V11h2c2.08 0 4-1.16 4-3.5C16 5.06 14.08 4 12 4z"></path> | ||
| </svg> | ||
| <span class="title">Download</span> | ||
| </div> | ||
| </a> | ||
| </ng-container> | ||
|
|
||
| </ng-container> |
60 changes: 60 additions & 0 deletions
60
src/app/component/github-button/github-button.component.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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; | ||
| } | ||
| } |
25 changes: 25 additions & 0 deletions
25
src/app/component/github-button/github-button.component.spec.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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<GithubButtonComponent>; | ||
|
|
||
| beforeEach(async(() => { | ||
| TestBed.configureTestingModule({ | ||
| declarations: [ GithubButtonComponent ] | ||
| }) | ||
| .compileComponents(); | ||
| })); | ||
|
|
||
| beforeEach(() => { | ||
| fixture = TestBed.createComponent(GithubButtonComponent); | ||
| component = fixture.componentInstance; | ||
| fixture.detectChanges(); | ||
| }); | ||
|
|
||
| it('should create', () => { | ||
| expect(component).toBeTruthy(); | ||
| }); | ||
| }); |
57 changes: 57 additions & 0 deletions
57
src/app/component/github-button/github-button.component.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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` | ||
| }; | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,22 @@ | ||
| ### Basic | ||
| ``` | ||
| <stbui-github-button></stbui-github-button> | ||
| ``` | ||
|
|
||
| ``` | ||
| <stbui-github-button user="stbui" repo="angular-materila-app" type="start"></stbui-github-button> | ||
| ``` | ||
| * user: 用户 | ||
| * repo: 仓库 | ||
| * type: 显示类型 | ||
|
|
||
| ### Type | ||
| ``` | ||
| <stbui-github-button type="link|watch|star|issue|fork|download"></stbui-github-button> | ||
| <stbui-github-button type="link"></stbui-github-button> | ||
| <stbui-github-button type="watch"></stbui-github-button> | ||
| <stbui-github-button type="start"></stbui-github-button> | ||
| <stbui-github-button type="issue"></stbui-github-button> | ||
| <stbui-github-button type="fork"></stbui-github-button> | ||
| <stbui-github-button type="download"></stbui-github-button> | ||
| ``` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 {} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,6 @@ | ||
| /** | ||
| * @license | ||
| * Copyright Stbui All Rights Reserved. | ||
| */ | ||
|
|
||
| export * from './public-api'; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,7 @@ | ||
| /** | ||
| * @license | ||
| * Copyright Stbui All Rights Reserved. | ||
| */ | ||
|
|
||
| export * from './github-button.module'; | ||
| export * from './github-button.component'; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters