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

replaced iframe pointing to wordpress to native angular for a better user experience

pull/3/head
Chris Veilleux 2019-04-02 22:50:37 -05:00
parent 50706d2855
commit f00e8f9ac8
4 changed files with 129 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

79
projects/account/src/app/modules/dashboard/dashboard.component.html
View File

@ -1,12 +1,67 @@
<iframe
*ngIf="account.membership"
src="https://mycroft.ai/tartarus-splash-member/"
frameBorder="0"
>
</iframe>
<iframe
*ngIf="!account.membership"
src="https://mycroft.ai/tartarus-splash-non-member/"
frameBorder="0"
>
</iframe>
<div id="dashboard" fxLayout="row" fxLayoutAlign="center" fxLayout.xs="column" fxLayoutGap="16px">
<mat-card *ngIf="account.membership" fxFlex="40">
<mat-card-header>
<fa-icon [icon]="awardIcon"></fa-icon>
</mat-card-header>
<mat-card-title>Mycroft likes you</mat-card-title>
<mat-card-content>
<p class="mat-body">
Your support makes a big difference. Thanks to you and other Mycroft supporters,
we can continue building upon the Mycroft experience. It is also motivating
knowing there is a community of people who believe in the same things we do.
</p>
<p class="mat-body">
We keep brainstorming and working on benefits to offer you as a supporter.
For now, you can change your Mycroft’s voice to a higher quality one.
</p>
</mat-card-content>
<mat-card-actions>
<a mat-button [href]="voicesUrl">CHECK OUT PREMIUM VOICES</a>
</mat-card-actions>
</mat-card>
<mat-card *ngIf="!account.membership" fxFlex="40">
<mat-card-header>
<fa-icon [icon]="downloadIcon"></fa-icon>
</mat-card-header>
<mat-card-title>Become a Member</mat-card-title>
<mat-card-content>
<p class="mat-body">
For less than one cup of coffee a month, you can help support our server costs,
hosting, and ongoing development. All of which all improve Mycroft's performance
and user experience.
</p>
<p class="mat-body">
Your membership also gets you exclusive access to premium voices,
along with new features that are being prepared for the second half of 2019.
</p>
</mat-card-content>
<mat-card-actions>
<a mat-button [href]="accountUrl">MONTHLY MEMBERSHIP $1.99</a>
<a mat-button [href]="accountUrl">YEARLY MEMBERSHIP $19.99</a>
</mat-card-actions>
</mat-card>
<mat-card fxFlex="40">
<mat-card-header>
<fa-icon [icon]="downloadIcon"></fa-icon>
</mat-card-header>
<mat-card-title>Install New Skills</mat-card-title>
<mat-card-content>
<p class="mat-body">
Your device comes with a set of pre-installed skills like Timers and Wikipedia.
To change the settings of your skills, for instance the sound of your alarm,
go to Skill Settings.
</p>
<p class="mat-body">
Our open source community extends the functionality of Mycroft. Their efforts have
produced skills like Fairytalez or ISS Tracker. To install new skills,
visit the Marketplace.
</p>
</mat-card-content>
<mat-card-actions>
<a mat-button [href]="marketplaceUrl">SKILL MARKETPLACE</a>
<a mat-button [href]="settingsUrl">SKILL SETTINGS</a>
</mat-card-actions>
</mat-card>
</div>

43
projects/account/src/app/modules/dashboard/dashboard.component.scss
View File

@ -1,5 +1,48 @@
@import "~@angular/material/theming";
@import "mycroft-colors";
@import "components/buttons";
iframe {
min-width: 350px;
width: 100%;
height: 100vh;
}
#dashboard {
max-width: 1200px;
margin-left: auto;
margin-right: auto;
}
mat-card {
min-height: 540px;
margin: 16px;
max-width: 540px;
min-width: 300px;
fa-icon {
font-size: 60px;
color: mat-color($mycroft-primary)
}
mat-card-title {
font-size: 40px;
font-weight: bolder;
padding: 16px;
}
mat-card-content {
padding: 16px;
.mat-body {
font-size: 16px;
}
}
mat-card-actions {
padding: 16px;
a {
@include action-button-primary;
margin: 8px;
}
}
}

11
projects/account/src/app/modules/dashboard/dashboard.component.ts
View File

@ -1,7 +1,10 @@
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { Account } from '../../shared/models/account.model';
import { faAward, faDownload } from '@fortawesome/free-solid-svg-icons';
import { Account } from '@account/models/account.model';
import { environment } from '@account/environments/environment';
@Component({
selector: 'account-dashboard',
@ -10,6 +13,12 @@ import { Account } from '../../shared/models/account.model';
})
export class DashboardComponent implements OnInit {
public account: Account;
public awardIcon = faAward;
public downloadIcon = faDownload;
public marketplaceUrl = environment.mycroftUrls.marketplace;
public settingsUrl = environment.mycroftUrls.account + '/skills';
public voicesUrl = environment.mycroftUrls.mimic;
public accountUrl = environment.mycroftUrls.account + '/profile';
constructor(private route: ActivatedRoute) {
}

10
projects/account/src/app/modules/dashboard/dashboard.module.ts
View File

@ -1,5 +1,9 @@
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FlexLayoutModule } from '@angular/flex-layout';
import { MatButtonModule, MatCardModule } from '@angular/material';
import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
import { DashboardComponent } from './dashboard.component';
@ -11,7 +15,11 @@ import { DashboardComponent } from './dashboard.component';
DashboardComponent,
],
imports: [
CommonModule
CommonModule,
FlexLayoutModule,
FontAwesomeModule,
MatButtonModule,
MatCardModule
]
})
export class DashboardModule { }