feat: Redesign About page. (#899)

* Redesign About page.

* feat: migrate About page to ngrx.

* Fix import relative path; order contributors by the number of contributions.

packages/uhk-common/src/util/constants.ts

@@ -1,4 +1,6 @@
 export namespace Constants {
     export const AGENT_GITHUB_URL = 'https://github.com/UltimateHackingKeyboard/agent';
+    export const AGENT_CONTRIBUTORS_GITHUB_PAGE_URL = 'https://github.com/UltimateHackingKeyboard/agent/graphs/contributors';
+    export const AGENT_CONTRIBUTORS_GITHUB_API_URL = 'https://api.github.com/repos/UltimateHackingKeyboard/agent/contributors';
     export const FIRMWARE_GITHUB_ISSUE_URL = 'https://github.com/UltimateHackingKeyboard/agent/issues/new';
 }

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

@@ -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>

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

@@ -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;
+}

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

@@ -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')));
+    }
 }

packages/uhk-web/src/app/components/agent/about/contributor-badge/contributor-badge.component.html

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

packages/uhk-web/src/app/components/agent/about/contributor-badge/contributor-badge.component.scss

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

packages/uhk-web/src/app/components/agent/about/contributor-badge/contributor-badge.component.ts

@@ -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')));
+    }
+}

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

@@ -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';

packages/uhk-web/src/app/models/uhk-contributor.ts

@@ -0,0 +1,7 @@
+export interface UHKContributor {
+    login: string;
+    avatar_url: string;
+    html_url: string;
+    contributions: number;
+    avatar: Blob;
+}

packages/uhk-web/src/app/shared.module.ts

@@ -2,6 +2,7 @@ import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { FormsModule } from '@angular/forms';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { HttpClientModule } from '@angular/common/http';
 import { NotifierModule } from 'angular-notifier';
 import { ConfirmationPopoverModule } from 'angular-confirmation-popover';
 
@@ -46,7 +47,7 @@ import {
 } from './components/popover/tab';
 import { CaptureKeystrokeButtonComponent } from './components/popover/widgets/capture-keystroke';
 import { IconComponent } from './components/popover/widgets/icon';
-import { AboutComponent, SettingsComponent } from './components/agent';
+import { AboutComponent, SettingsComponent, ContributorBadgeComponent } from './components/agent';
 import { SideMenuComponent } from './components/side-menu';
 import { SvgKeyboardComponent } from './components/svg/keyboard';
 import {
@@ -164,6 +165,7 @@ import { UdevRulesComponent } from './components/udev-rules/udev-rules.component
         MacroNotFoundComponent,
         AddOnComponent,
         AboutComponent,
+        ContributorBadgeComponent,
         SettingsComponent,
         KeyboardSliderComponent,
         CancelableDirective,
@@ -204,7 +206,8 @@ import { UdevRulesComponent } from './components/udev-rules/udev-rules.component
         ConfirmationPopoverModule.forRoot({
             confirmButtonType: 'danger' // set defaults here
         }),
-        ClipboardModule
+        ClipboardModule,
+        HttpClientModule
     ],
     providers: [
         SvgModuleProviderService,

packages/uhk-web/src/app/store/actions/contributors.action.ts

@@ -0,0 +1,44 @@
+import { Action } from '@ngrx/store';
+
+import { type } from 'uhk-common';
+
+import { UHKContributor } from '../../models/uhk-contributor';
+
+const PREFIX = '[contributors] ';
+
+// tslint:disable-next-line:variable-name
+export const ActionTypes = {
+    GET_AGENT_CONTRIBUTORS: type(PREFIX + 'Get'),
+    FETCH_AGENT_CONTRIBUTORS: type(PREFIX + 'Fetch'),
+    AGENT_CONTRIBUTORS_AVAILABLE: type(PREFIX + 'Available'),
+    AGENT_CONTRIBUTORS_NOT_AVAILABLE: type(PREFIX + 'Not available')
+};
+
+export class GetAgentContributorsAction implements Action {
+    type = ActionTypes.GET_AGENT_CONTRIBUTORS;
+}
+export class FetchAgentContributorsAction implements Action {
+    type = ActionTypes.FETCH_AGENT_CONTRIBUTORS;
+}
+
+export class AgentContributorsAvailableAction implements Action {
+    type = ActionTypes.AGENT_CONTRIBUTORS_AVAILABLE;
+
+    constructor(public payload: UHKContributor[]) {
+    }
+}
+
+export class AgentContributorsNotAvailableAction implements Action {
+    type = ActionTypes.AGENT_CONTRIBUTORS_NOT_AVAILABLE;
+
+    constructor(public payload: Error) {
+        console.error(payload);
+    }
+}
+
+export type Actions
+    = FetchAgentContributorsAction
+    | AgentContributorsAvailableAction
+    | AgentContributorsNotAvailableAction
+    | FetchAgentContributorsAction
+    | GetAgentContributorsAction;

packages/uhk-web/src/app/store/effects/contributors.effect.ts

@@ -0,0 +1,67 @@
+import { HttpClient } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+import { Actions, Effect } from '@ngrx/effects';
+import { Action, Store } from '@ngrx/store';
+
+import { Observable } from 'rxjs/Observable';
+import { from } from 'rxjs/observable/from';
+import { of } from 'rxjs/observable/of';
+import { map, switchMap, catchError, reduce, mergeMap, withLatestFrom } from 'rxjs/operators';
+
+import { Constants } from 'uhk-common';
+
+import { AppState, contributors } from '../index';
+import { UHKContributor } from '../../models/uhk-contributor';
+import {
+    AgentContributorsAvailableAction,
+    AgentContributorsNotAvailableAction,
+    GetAgentContributorsAction,
+    ActionTypes,
+    FetchAgentContributorsAction
+} from '../actions/contributors.action';
+
+@Injectable()
+export class ContributorsEffect {
+    @Effect() getContributors$: Observable<Action> = this.actions$
+        .ofType<GetAgentContributorsAction>(ActionTypes.GET_AGENT_CONTRIBUTORS)
+        .pipe(
+            withLatestFrom(this.store.select(contributors)),
+            map(([action, state]) => {
+                if (state.contributors.length === 0) {
+                    return new FetchAgentContributorsAction();
+                }
+                return new AgentContributorsAvailableAction(state.contributors);
+            })
+        );
+
+    @Effect() fetchContributors$: Observable<Action> = this.actions$
+        .ofType<FetchAgentContributorsAction>(ActionTypes.FETCH_AGENT_CONTRIBUTORS)
+        .pipe(
+            mergeMap(() => this.http.get<UHKContributor[]>(Constants.AGENT_CONTRIBUTORS_GITHUB_API_URL)),
+            switchMap((response: UHKContributor[]) => {
+                return from(response).pipe(
+                    mergeMap(
+                        (contributor: UHKContributor) => {
+                            return this.http.get(contributor.avatar_url, { responseType: 'blob' });
+                        },
+                        (contributor, blob) => {
+                            contributor.avatar = blob;
+
+                            return contributor;
+                        }
+                    ),
+                    reduce((acc: UHKContributor[], curr) => [...acc, curr], [])
+                );
+            }),
+            map(
+                (contributorsWithAvatars: UHKContributor[]) => {
+                    contributorsWithAvatars = contributorsWithAvatars.sort((a, b) => b.contributions - a.contributions);
+
+                    return new AgentContributorsAvailableAction(contributorsWithAvatars);
+                }
+            ),
+            catchError(error => of(new AgentContributorsNotAvailableAction(error)))
+        );
+
+    constructor(private store: Store<AppState>, private actions$: Actions, private http: HttpClient) {}
+}

packages/uhk-web/src/app/store/effects/index.ts

@@ -5,6 +5,7 @@ import { KeymapEffects } from './keymap';
 import { UserConfigEffects } from './user-config';
 import { ApplicationEffects } from './app';
 import { AppUpdateEffect } from './app-update';
+import { ContributorsEffect } from './contributors.effect';
 
 export * from './keymap';
 export * from './macro';
@@ -19,5 +20,6 @@ export const effects = [
     KeymapEffects,
     MacroEffects,
     AutoUpdateSettingsEffects,
-    DeviceEffects
+    DeviceEffects,
+    ContributorsEffect
 ];

packages/uhk-web/src/app/store/index.ts

@@ -7,6 +7,7 @@ import { HardwareModules, Keymap, UserConfiguration } from 'uhk-common';
 import * as fromUserConfig from './reducers/user-configuration';
 import * as fromPreset from './reducers/preset';
 import * as fromAppUpdate from './reducers/app-update.reducer';
+import * as fromContributors from './reducers/contributors.reducer';
 import * as autoUpdateSettings from './reducers/auto-update-settings';
 import * as fromApp from './reducers/app.reducer';
 import * as fromDevice from './reducers/device';
@@ -26,6 +27,7 @@ export interface AppState {
     router: RouterReducerState<RouterStateUrl>;
     appUpdate: fromAppUpdate.State;
     device: fromDevice.State;
+    contributors: fromContributors.State;
 }
 
 export const reducers: ActionReducerMap<AppState> = {
@@ -35,7 +37,8 @@ export const reducers: ActionReducerMap<AppState> = {
     app: fromApp.reducer,
     router: routerReducer,
     appUpdate: fromAppUpdate.reducer,
-    device: fromDevice.reducer
+    device: fromDevice.reducer,
+    contributors: fromContributors.reducer
 };
 
 export const metaReducers: MetaReducer<AppState>[] = environment.production
@@ -56,6 +59,7 @@ export const getAgentVersionInfo = createSelector(appState, fromApp.getAgentVers
 export const getOperatingSystem = createSelector(appState, fromSelectors.getOperatingSystem);
 export const keypressCapturing = createSelector(appState, fromApp.keypressCapturing);
 export const runningOnNotSupportedWindows = createSelector(appState, fromApp.runningOnNotSupportedWindows);
+export const contributors = (state: AppState) => state.contributors;
 export const firmwareUpgradeAllowed = createSelector(runningOnNotSupportedWindows, notSupportedOs => !notSupportedOs);
 
 export const appUpdateState = (state: AppState) => state.appUpdate;

packages/uhk-web/src/app/store/reducers/app.reducer.ts

@@ -16,7 +16,6 @@ import { ActionTypes as UserConfigActionTypes } from '../actions/user-config';
 import { ActionTypes as DeviceActionTypes } from '../actions/device';
 import { KeyboardLayout } from '../../keyboard/keyboard-layout.enum';
 import { getVersions } from '../../util';
-import { PrivilagePageSate } from '../../models/privilage-page-sate';
 
 export interface State {
     started: boolean;

packages/uhk-web/src/app/store/reducers/contributors.reducer.ts

@@ -0,0 +1,51 @@
+import { Actions, ActionTypes } from '../actions/contributors.action';
+import { AgentContributorsAvailableAction, AgentContributorsNotAvailableAction } from '../actions/contributors.action';
+import { UHKContributor } from '../../models/uhk-contributor';
+
+export interface State {
+    isLoading: boolean;
+    contributors: UHKContributor[];
+    error?: any;
+}
+
+export const initialState: State = {
+    isLoading: false,
+    contributors: [],
+    error: null
+};
+
+export function reducer(state = initialState, action: Actions) {
+    switch (action.type) {
+        case ActionTypes.GET_AGENT_CONTRIBUTORS: {
+            return {
+                ...state
+             };
+        }
+
+        case ActionTypes.FETCH_AGENT_CONTRIBUTORS: {
+            return {
+                ...state,
+                isLoading: true
+             };
+        }
+
+        case ActionTypes.AGENT_CONTRIBUTORS_AVAILABLE: {
+            return {
+                ...state,
+                contributors: (<AgentContributorsAvailableAction>action).payload,
+                isLoading: false
+             };
+        }
+
+        case ActionTypes.AGENT_CONTRIBUTORS_NOT_AVAILABLE: {
+            return {
+                ...state,
+                error: (<AgentContributorsNotAvailableAction>action).payload,
+                isLoading: false
+             };
+        }
+
+        default:
+            return state;
+    }
+}

packages/uhk-web/src/styles.scss

@@ -20,12 +20,20 @@ html, body {
     background: url('assets/images/agent-icon.png') no-repeat;
 }
 
+.uhk-icon-full-agent-icon {
+    background: url('assets/images/agent-logo-with-text.svg') no-repeat;
+}
+
 .uhk-icon {
     display: inline-block;
     width: 1em;
     height: 1em;
     background-size: auto 100%;
     vertical-align: text-bottom;
+
+    &.wide {
+        width: 4.15em;
+    }
 }
 
 .rotate-right {