angular-material-app documentation
  1. Components
  2. GithubButtonComponent

File

src/app/component/github-button/github-button.component.ts

Implements

OnInit

Metadata

selector stbui-github-button
styleUrls ./github-button.component.scss
templateUrl ./github-button.component.html

Index

Properties
Methods
Inputs
Accessors

Constructor

constructor(http: HttpClient)
Defined in src/app/component/github-button/github-button.component.ts:33
Parameters :
Name Type Optional
http HttpClient No

Inputs

repo
Type : string
Default value : 'angular-material-app'
Defined in src/app/component/github-button/github-button.component.ts:24
type
Defined in src/app/component/github-button/github-button.component.ts:12
user
Type : string
Default value : 'stbui'
Defined in src/app/component/github-button/github-button.component.ts:23

Methods

getGithubUrl
getGithubUrl()
Defined in src/app/component/github-button/github-button.component.ts:44
Returns : { base: string; watch: string; star: string; fork: string; issue: string; download: string; }
ngOnInit
ngOnInit()
Defined in src/app/component/github-button/github-button.component.ts:37
Returns : void

Properties

Private _type
Defined in src/app/component/github-button/github-button.component.ts:10
Readonly baseApi
Type : string
Default value : 'https://api.github.com/repos'
Defined in src/app/component/github-button/github-button.component.ts:26
Readonly baseUrl
Type : string
Default value : 'https://github.com'
Defined in src/app/component/github-button/github-button.component.ts:27
repository
Type : object
Default value : { subscribers_count: 0, stargazers_count: 0, forks_count: 0, open_issues_count: 0 }
Defined in src/app/component/github-button/github-button.component.ts:28

Accessors

type
gettype()
Defined in src/app/component/github-button/github-button.component.ts:15
settype(value)
Defined in src/app/component/github-button/github-button.component.ts:12
Parameters :
Name Optional
value No
Returns : void 
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 => {
      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`
    };
  }
}
Copy
<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>
Copy

./github-button.component.scss 

a {
  text-decoration: none;
  cursor: pointer;
  color: #909090;
}
.repo-btn {
  flex: 0 0 auto;
  display: inline-block;
  margin-right: 8px;
  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;
  }
}
Copy
Legend
Html element
Component
Html element with directive

result-matching ""

    No results matching ""