MycroftAI
/
selene-ui
mirror of https://github.com/MycroftAI/selene-ui.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Some UI tweaks and allow for input value of the account's current setting.

pull/1/head
Chris Veilleux 2019-02-20 20:49:54 -06:00
parent 020ba25b9f
commit 34b7d575ec
3 changed files with 37 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
projects/shared/src/lib/membership-options/membership-options.component.html
View File

@ -1,6 +1,17 @@
<mat-button-toggle-group class="options-button-group" [vertical]="alignVertical"> <mat-button-toggle-group
<mat-button-toggle *ngFor="let membership of membershipTypes" (click)="onMembershipSelect(membership)"> class="options-button-group"
<div class="mat-h3">{{membership.name}}</div> [vertical]="alignVertical"
<div class="mat-body" *ngIf="membership.name != 'MAYBE LATER'">{{membership.price}} USD</div> value="{{accountMembership}}"
>
<mat-button-toggle
*ngFor="let membership of membershipTypes"
(click)="onMembershipSelect(membership)"
value="{{membership.type}}"
>
<h3 class="mat-h3">{{membership.type}}</h3>
<p class="mat-body" *ngIf="membership.type != 'Maybe Later'">{{membership.price}} USD</p>
</mat-button-toggle>
<mat-button-toggle>
<h3 id="non-supporter" class="mat-h3">Maybe Later</h3>
</mat-button-toggle> </mat-button-toggle>
</mat-button-toggle-group> </mat-button-toggle-group>

23
projects/shared/src/lib/membership-options/membership-options.component.scss
View File

@ -7,19 +7,22 @@
border: none; border: none;
border-radius: 4px; border-radius: 4px;
margin: 8px; margin: 8px;
padding: 8px padding: 8px;
width: 200px;
.mat-h3 {
font-weight: bold;
margin-top: 8px;
margin-bottom: 8px;
}
#non-supporter {
margin-top: 24px;
}
} }
.mat-button-toggle-checked { .mat-button-toggle-checked {
background-color: #22a7f0; background-color: #22a7f0;
color: white;
.mat-button-toggle-label-content {
color: white;
}
} }
} }
.mat-h3 {
font-weight: bold;
margin-bottom: 10px;
}

16
projects/shared/src/lib/membership-options/membership-options.component.ts
View File

@ -1,25 +1,25 @@
import { Component, EventEmitter, OnDestroy, Output } from '@angular/core'; import { Component, EventEmitter, Input, OnDestroy, Output } from '@angular/core';
import { MediaChange, MediaObserver } from '@angular/flex-layout'; import { MediaChange, MediaObserver } from '@angular/flex-layout';
import { Subscription } from 'rxjs'; import { Subscription } from 'rxjs';
export interface MembershipType { export interface MembershipType {
name: string; type: string;
price: string; price: string;
period: string; period: string;
} }
const nonSupporter: MembershipType = { const nonSupporter: MembershipType = {
name: 'MAYBE LATER', type: 'Maybe Later',
price: '$0', price: '$0',
period: null period: null
}; };
const monthlySupporter: MembershipType = { const monthlySupporter: MembershipType = {
name: 'MONTHLY SUPPORTER', type: 'Monthly Supporter',
price: '$1.99', price: '$1.99',
period: 'month' period: 'month'
}; };
const yearlySupporter: MembershipType = { const yearlySupporter: MembershipType = {
name: 'YEARLY SUPPORTER', type: 'Yearly Supporter',
price: '$19.99', price: '$19.99',
period: 'year' period: 'year'
}; };
@ -30,6 +30,7 @@ const yearlySupporter: MembershipType = {
styleUrls: ['./membership-options.component.scss'] styleUrls: ['./membership-options.component.scss']
}) })
export class MembershipOptionsComponent implements OnDestroy { export class MembershipOptionsComponent implements OnDestroy {
@Input() accountMembership: string;
public alignVertical: boolean; public alignVertical: boolean;
public membershipTypes: MembershipType[]; public membershipTypes: MembershipType[];
public mediaWatcher: Subscription; public mediaWatcher: Subscription;
@ -41,12 +42,13 @@ export class MembershipOptionsComponent implements OnDestroy {
this.alignVertical = ['xs', 'sm'].includes(change.mqAlias); this.alignVertical = ['xs', 'sm'].includes(change.mqAlias);
} }
); );
this.membershipTypes = [yearlySupporter, monthlySupporter, nonSupporter]; this.membershipTypes = [yearlySupporter, monthlySupporter];
} }
onMembershipSelect(membership: MembershipType) { onMembershipSelect(membership: MembershipType) {
this.selectedMembership.emit(membership.name); this.selectedMembership.emit(membership.type);
} }
ngOnDestroy(): void { ngOnDestroy(): void {
this.mediaWatcher.unsubscribe(); this.mediaWatcher.unsubscribe();
} }