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

Applied a slew of design changes requested buy design team.

pull/1/head
Chris Veilleux 2019-01-10 11:22:32 -06:00
parent 7efa496d6e
commit a9ae2a6974
13 changed files with 187 additions and 147 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

83
projects/account/src/app/profile/agreements/agreements.component.html
View File

@ -1,44 +1,47 @@
<mat-card class="form-card">
<mat-toolbar class="form-title">AGREEMENTS</mat-toolbar>
<mat-accordion>
<mat-expansion-panel>
<mat-expansion-panel-header>
<mat-panel-title>
Terms of Use
</mat-panel-title>
<mat-panel-description>
Accepted July 10, 2018
</mat-panel-description>
</mat-expansion-panel-header>
Terms of Use goes here.
</mat-expansion-panel>
<mat-toolbar class="form-card-title-bar">
<div class="form-card-title">Agreements</div>
</mat-toolbar>
<div id="agreement-panels">
<mat-accordion>
<mat-expansion-panel>
<mat-expansion-panel-header>
<mat-panel-title>
Terms of Use
</mat-panel-title>
<mat-panel-description>
Accepted July 10, 2018
</mat-panel-description>
</mat-expansion-panel-header>
Terms of Use goes here.
</mat-expansion-panel>
<mat-expansion-panel>
<mat-expansion-panel-header>
<mat-panel-title>
Privacy Policy
</mat-panel-title>
<mat-panel-description>
Accepted July 10, 2018
</mat-panel-description>
</mat-expansion-panel-header>
Privacy Policy goes here.
</mat-expansion-panel>
<mat-expansion-panel>
<mat-expansion-panel-header>
<mat-panel-title>
Privacy Policy
</mat-panel-title>
<mat-panel-description>
Accepted July 10, 2018
</mat-panel-description>
</mat-expansion-panel-header>
Privacy Policy goes here.
</mat-expansion-panel>
<mat-expansion-panel>
<mat-expansion-panel-header>
<mat-panel-title>
Open Data Set
</mat-panel-title>
<mat-panel-description>
Opted In July 10, 2018
</mat-panel-description>
</mat-expansion-panel-header>
Open Data Set agreement goes here.
<mat-action-row>
<button mat-button>OPT OUT</button>
</mat-action-row>
</mat-expansion-panel>
</mat-accordion>
<mat-expansion-panel>
<mat-expansion-panel-header>
<mat-panel-title>
Open Data Set
</mat-panel-title>
<mat-panel-description>
Opted In July 10, 2018
</mat-panel-description>
</mat-expansion-panel-header>
Open Data Set agreement goes here.
<mat-action-row>
<button mat-button>OPT OUT</button>
</mat-action-row>
</mat-expansion-panel>
</mat-accordion>
</div>
</mat-card>

3
projects/account/src/app/profile/agreements/agreements.component.scss
View File

@ -0,0 +1,3 @@
#agreement-panels {
margin: 8px;
}

8
projects/account/src/app/profile/delete/delete.component.html
View File

@ -1,8 +1,12 @@
<mat-card class="form-card">
<mat-toolbar class="form-title">DELETE ACCOUNT</mat-toolbar>
<mat-toolbar class="form-card-title-bar">
<div class="form-card-title">Delete Account</div>
</mat-toolbar>
<div fxLayout="column">
<span class="mat-h3">CAUTION</span>
<span class="mat-body">{{deleteWarning}}</span>
<div id="delete-warning">
<div *ngFor="let paragraph of deleteWarning" class="mat-body-2">{{paragraph}}</div>
</div>
<button mat-raised-button color="warn">DELETE ACCOUNT</button>
</div>
</mat-card>

11
projects/account/src/app/profile/delete/delete.component.scss
View File

@ -5,10 +5,15 @@ mat-card {
margin-left: auto;
margin-right: auto;
}
.mat-body {
margin-bottom: 20px;
text-align: center;
#delete-warning {
margin-bottom: 24px;
.mat-body-2 {
text-align: center;
}
}
.mat-h3 {
text-align: center;
font-weight: bold;

8
projects/account/src/app/profile/delete/delete.component.ts
View File

@ -6,13 +6,15 @@ import { Component, OnInit } from '@angular/core';
styleUrls: ['./delete.component.scss']
})
export class DeleteComponent implements OnInit {
public deleteWarning: string;
public deleteWarning: string[];
constructor() { }
ngOnInit() {
this.deleteWarning = 'Pressing the button below will delete your account and all data related to it from Mycroft servers. ' +
'It cannot be undone.';
this.deleteWarning = [
'Pressing the button below will delete your account and all data related to it from Mycroft servers.',
'It cannot be undone.'
];
}
}

78
projects/account/src/app/profile/login/login.component.html
View File

@ -1,42 +1,44 @@
<mat-card class="form-card">
<mat-toolbar class="form-title">LOGIN</mat-toolbar>
<form id="login-form">
<div fxLayout="row wrap" fxLayoutAlign="space-evenly">
<div id="antisocial" fxFlex fxLayout="column">
<mat-form-field appearance="outline">
<mat-label>Email Address</mat-label>
<input
id="emailAddress"
matInput
name="emailAddress"
placeholder="Enter Email Address"
required
type="email"
>
<mat-hint>Uniquely identifies your account</mat-hint>
</mat-form-field>
<mat-form-field appearance="outline">
<mat-label>Password</mat-label>
<input
id="password"
matInput
name="password"
placeholder="Enter a Secure Password"
type="password"
>
<mat-hint>Required when no external account is linked</mat-hint>
</mat-form-field>
</div>
<!--<div fxFlex="10" fxHide.xs></div>-->
<div fxFlex fxLayout="column">
<mat-slide-toggle *ngFor="let platform of socialPlatforms" [labelPosition]="'before'">
<span fxLayout="row" fxLayoutAlign="start center">
<fa-icon *ngIf="platform.icon" [icon]="platform.icon"></fa-icon>
<img *ngIf="platform.image" [src]="platform.image"/>
<mat-label>{{platform.label}}</mat-label>
</span>
</mat-slide-toggle>
<mat-toolbar class="form-card-title-bar">
<div class="form-card-title">Login</div>
</mat-toolbar>
<div fxLayout="row wrap" fxLayoutAlign="space-around">
<div id="antisocial-login" fxFlex fxLayout="column" fxLayoutAlign="start stretch">
<mat-form-field appearance="outline">
<mat-label>Email Address</mat-label>
<input
id="emailAddress"
matInput
name="emailAddress"
placeholder="Enter Email Address"
required
type="email"
>
<mat-hint>Uniquely identifies your account</mat-hint>
</mat-form-field>
<mat-form-field appearance="outline">
<mat-label>Password</mat-label>
<input
id="password"
matInput
name="password"
placeholder="Enter a Secure Password"
type="password"
>
<mat-hint>Required when no external account is linked</mat-hint>
</mat-form-field>
</div>
<div id="social-login" fxFlex fxLayout="column">
<div class="mat-subheading-2">Social Login</div>
<div class="mat-body">Connect to a platform for faster login.</div>
<div id="social-platform" *ngFor="let platform of socialPlatforms" fxLayout="row" fxLayoutAlign="start center">
<div fxLayout="row" fxLayoutAlign="start center">
<img *ngIf="platform.image" [src]="platform.image"/>
<fa-icon *ngIf="platform.icon" [icon]="platform.icon"></fa-icon>
<mat-label>{{platform.label}}</mat-label>
</div>
<button mat-flat-button class="action-button">ADD</button>
</div>
</div>
</form>
</div>
</mat-card>

28
projects/account/src/app/profile/login/login.component.scss
View File

@ -1,16 +1,22 @@
.mat-h3 {
margin-bottom: 10px;
}
mat-card {
#antisocial-login {
margin: 16px;
mat-form-field {
max-width: 400px;
max-width: 350px;
}
mat-slide-toggle {
height: 50px;
max-width: 400px;
}
#social-login {
margin: 16px;
.mat-subheading-2 {
font-weight: bold;
margin: 0;
}
#social-platform {
margin: 8px;
fa-icon {
font-size: 30px;
@ -25,8 +31,10 @@ mat-card {
mat-label {
color: rgba(0, 0, 0, 0.6);
width: 150px;
width: 100px;
}
}
}

6
projects/account/src/app/profile/login/login.component.ts
View File

@ -20,15 +20,15 @@ export class LoginComponent implements OnInit {
ngOnInit() {
const githubLabel: ToggleLabel = {
label: 'GitHub Login',
label: 'GitHub',
icon: faGithub
};
const googleLabel: ToggleLabel = {
label: 'Google Login',
label: 'Google',
image: '../../assets/google-logo.png'
};
const facebookLabel: ToggleLabel = {
label: 'Facebook Login',
label: 'Facebook',
image: '../../assets/facebook_logo.png'
};

4
projects/account/src/app/profile/personal/personal.component.html
View File

@ -1,5 +1,7 @@
<mat-card class="form-card">
<mat-toolbar class="form-title">PERSONAL</mat-toolbar>
<mat-toolbar class="form-card-title-bar">
<div class="form-card-title">PERSONAL</div>
</mat-toolbar>
<form>
<div fxLayout="row wrap">

2
projects/account/src/app/profile/profile.component.html
View File

@ -1,7 +1,7 @@
<div>
<account-login></account-login>
<account-subscription></account-subscription>
<account-personal></account-personal>
<!--<account-personal></account-personal>-->
<account-agreements></account-agreements>
<account-delete></account-delete>
</div>

22
projects/account/src/app/profile/subscription/subscription.component.html
View File

@ -1,13 +1,17 @@
<mat-card class="form-card">
<mat-toolbar class="form-title">SUPPORT MYCROFT</mat-toolbar>
<form id="subscription-form">
<div id=subscription-types fxLayout="row wrap" fxLayoutAlign="space-evenly">
<mat-toolbar class="form-card-title-bar">
<div class="form-card-title">Support Mycroft</div>
</mat-toolbar>
<div fxLayout="column" fxLayoutAlign="center center">
<mat-button-toggle-group [vertical]="alignVertical">
<ng-container *ngFor="let subscription of subscriptionTypes">
<mat-card class="subscription-card">
<mat-card-title class="mat-h2">{{subscription.name}}</mat-card-title>
<mat-card-subtitle>{{subscription.price}}</mat-card-subtitle>
</mat-card>
<mat-button-toggle style="padding: 8px">
<div class="mat-h3">{{subscription.name}}</div>
<div class="mat-body">{{subscription.price}}</div>
</mat-button-toggle>
</ng-container>
</div>
</form>
</mat-button-toggle-group>
<div id="subscription-date" class="mat-body">Member Since {{subscriptionDate}}</div>
</div>
</mat-card>

21
projects/account/src/app/profile/subscription/subscription.component.scss
View File

@ -2,18 +2,15 @@
margin-bottom: 10px;
}
mat-card {
#subscription-types {
.subscription-card {
margin-bottom: 10px;
margin-top: 10px;
max-width: 300px;
min-width: 220px;
text-align: center;
mat-button-toggle-group {
border: none;
padding: 16px;
mat-card-title {
font-size: 16px;
}
}
mat-button-toggle {
margin: 8px;
}
}
#subscription-date {
margin-bottom: 16px;
}

60
projects/account/src/app/profile/subscription/subscription.component.ts
View File

@ -1,41 +1,51 @@
import { Component, OnInit } from '@angular/core';
import { Component, OnDestroy } from '@angular/core';
import { MediaChange, ObservableMedia } from '@angular/flex-layout';
import { Subscription } from 'rxjs';
export interface Subscription {
export interface SubscriptionType {
name: string;
price: string;
period: string;
}
const nonSupporter: SubscriptionType = {
name: 'NON-SUPPORTER',
price: '$0',
period: null
};
const monthlySupporter: SubscriptionType = {
name: 'MONTHLY SUPPORTER',
price: '$1.99',
period: 'month'
};
const yearlySupporter: SubscriptionType = {
name: 'YEARLY SUPPORTER',
price: '$19.99',
period: 'year'
};
@Component({
selector: 'account-subscription',
templateUrl: './subscription.component.html',
styleUrls: ['./subscription.component.scss']
})
export class SubscriptionComponent implements OnInit {
public subscriptionTypes: Subscription[];
constructor() { }
ngOnInit() {
// TODO: replace with view call to get values off of table.
const nonSupporter: Subscription = {
name: 'NON-SUPPORTER',
price: '$0',
period: null
};
const monthlySupporter: Subscription = {
name: 'MONTHLY SUPPORTER',
price: '$1.99',
period: 'month'
};
const yearlySupporter: Subscription = {
name: 'YEARLY SUPPORTER',
price: '$19.99',
period: 'year'
};
export class SubscriptionComponent implements OnDestroy {
public subscriptionTypes: SubscriptionType[];
public subscriptionDate = 'July 10, 2017';
public alignVertical: boolean;
private mediaWatcher: Subscription;
constructor(public media: ObservableMedia) {
this.mediaWatcher = media.subscribe(
(change: MediaChange) => {
this.alignVertical = ['xs', 'sm'].includes(change.mqAlias);
}
);
this.subscriptionTypes = [yearlySupporter, monthlySupporter, nonSupporter];
}
ngOnDestroy(): void {
this.mediaWatcher.unsubscribe();
}
}