uhk/agent
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

feat: Redesign About page. (#899)

Browse Source 
* Redesign About page.

* feat: migrate About page to ngrx.

* Fix import relative path; order contributors by the number of contributions.
This commit is contained in:
dgyimesi
2019-01-27 00:43:57 +01:00
committed by László Monda
parent 8947f2dedf
commit 2c041b64ff
17 changed files with 318 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
packages/uhk-web/src/app/components/agent/about/about.component.html
View File

@@ -1,10 +1,44 @@
<div class="row">
<h1 class="col-xs-12 pane-title">
<i class="uhk-icon uhk-icon-pure-agent-icon"></i>
<span>About</span>
<h1 class="col-xs-12 text-center">
<i class="uhk-icon wide uhk-icon-full-agent-icon"></i>
</h1>
<div class="col-xs-12">
<div class="agent-version">Agent version: <span class="text-bold">{{ version }}</span></div>
<div><a class="link-github" [href]="agentGithubUrl" externalUrl>Agent on GitHub</a></div>
</div>
<div>
<div class="col-xs-12 text-center">
<div class="form-group">
The configurator of the Ultimate Hacking Keyboard
</div>
<div class="form-group">
<div>
Agent version: <span class="text-bold">{{ version }}</span>
</div>
<a class="link-github" [href]="agentGithubUrl" (click)="openUrlInBrowser($event)">Agent on GitHub</a>
</div>
<ng-container *ngIf="(state$ | async) as state">
<div class="form-group">
Created by Ultimate Gadget Laboratories and its awesome contributors:
</div>
<div *ngIf="!state.isLoading && !state.error; else loading">
<div class="form-group row">
<div class="col-xs-8 col-xs-offset-2">
<contributor-badge *ngFor="let contributor of state.contributors" class="col-xs-2 text-left" [contributor]="contributor"></contributor-badge>
</div>
</div>
</div>
<ng-template #loading>
<div class="form-group">
Loading...
</div>
</ng-template>
<ng-template #loading>
<div *ngIf="!state.error" class="form-group">
Loading...
</div>
<div *ngIf="state.error" class="form-group">
We experienced a problem while fetching contributor list. <a [href]="agentContributorsUrl" (click)="openUrlInBrowser($event)">Check Contributors page on GitHub!</a>
</div>
</ng-template>
</ng-container>
<div class="form-group">May the UHK be with you!</div>
</div>
</div>

16
packages/uhk-web/src/app/components/agent/about/about.component.scss
View File

@@ -5,16 +5,12 @@
width: 100%;
}
.agent {
&-version {
margin-bottom: 1rem;
span {
font-weight: bold;
}
}
}
.link-github {
cursor: pointer;
}
contributor-badge {
display: block;
margin: 0.5em auto;
min-width: 12em;
}

29
packages/uhk-web/src/app/components/agent/about/about.component.ts
View File

@@ -1,8 +1,16 @@
import { Component } from '@angular/core';
import { Component, OnInit } from '@angular/core';
import { Store } from '@ngrx/store';
import { Observable } from 'rxjs/Observable';
import { Constants } from 'uhk-common';
import { getVersions } from '../../../util';
import { AppState, contributors } from '../../../store';
import { State } from '../../../store/reducers/contributors.reducer';
import { OpenUrlInNewWindowAction } from '../../../store/actions/app';
import { GetAgentContributorsAction } from '../../../store/actions/contributors.action';
@Component({
selector: 'about-page',
templateUrl: './about.component.html',
@@ -11,7 +19,24 @@ import { getVersions } from '../../../util';
'class': 'container-fluid'
}
})
export class AboutComponent {
export class AboutComponent implements OnInit {
version: string = getVersions().version;
agentGithubUrl = Constants.AGENT_GITHUB_URL;
agentContributorsUrl = Constants.AGENT_CONTRIBUTORS_GITHUB_PAGE_URL;
state$: Observable<State>;
constructor(private store: Store<AppState>) {
}
ngOnInit() {
this.state$ = this.store.select(contributors);
this.store.dispatch(new GetAgentContributorsAction());
}
openUrlInBrowser(event: Event): void {
event.preventDefault();
this.store.dispatch(new OpenUrlInNewWindowAction((event.target as Element).getAttribute('href')));
}
}

2
packages/uhk-web/src/app/components/agent/about/contributor-badge/contributor-badge.component.html Normal file
View File

@@ -0,0 +1,2 @@
<img #badge alt="{{ name }} on GitHub">
<a [href]="profileUrl" (click)="openUrlInBrowser($event)">{{ name }}</a>

8
packages/uhk-web/src/app/components/agent/about/contributor-badge/contributor-badge.component.scss Normal file
View File

@@ -0,0 +1,8 @@
:host {
img {
width: 36px;
height: 36px;
border-radius: 3px;
margin-right: 5px;
}
}

42
packages/uhk-web/src/app/components/agent/about/contributor-badge/contributor-badge.component.ts Normal file
View File

@@ -0,0 +1,42 @@
import { Component, Input, ViewChild, ElementRef, OnInit } from '@angular/core';
import { Store } from '@ngrx/store';
import { AppState } from '../../../../store/index';
import { OpenUrlInNewWindowAction } from '../../../../store/actions/app';
import { UHKContributor } from '../../../../models/uhk-contributor';
@Component({
selector: 'contributor-badge',
templateUrl: './contributor-badge.component.html',
styleUrls: ['./contributor-badge.component.scss']
})
export class ContributorBadgeComponent implements OnInit {
@Input() contributor: UHKContributor;
@ViewChild('badge') badge: ElementRef;
get name(): string {
return this.contributor.login;
}
get avatarUrl(): string {
return this.contributor.avatar_url;
}
get profileUrl(): string {
return this.contributor.html_url;
}
constructor(private store: Store<AppState>) {
}
ngOnInit(): void {
(this.badge.nativeElement as HTMLImageElement).src = URL.createObjectURL(this.contributor.avatar);
}
openUrlInBrowser(event: Event): void {
event.preventDefault();
this.store.dispatch(new OpenUrlInNewWindowAction((event.target as Element).getAttribute('href')));
}
}

1
packages/uhk-web/src/app/components/agent/index.ts
View File

@@ -1,3 +1,4 @@
export * from './agent.routes';
export * from './about/about.component';
export * from './about/contributor-badge/contributor-badge.component';
export * from './settings/settings.component';