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

added agreements section and applied some basic formatting

pull/1/head
Chris Veilleux 2018-12-14 17:21:33 -06:00
parent 14c6c9b233
commit 19f6d1bec4
19 changed files with 175 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
projects/account/src/app/profile/agreements/agreements.component.html Normal file
View File

@ -0,0 +1,44 @@
<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-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-card>

0
projects/account/src/app/profile/agreements/agreements.component.scss Normal file
View File

15
projects/account/src/app/profile/agreements/agreements.component.ts Normal file
View File

@ -0,0 +1,15 @@
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'account-agreements',
templateUrl: './agreements.component.html',
styleUrls: ['./agreements.component.scss']
})
export class AgreementsComponent implements OnInit {
constructor() { }
ngOnInit() {
}
}

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

@ -1,8 +1,8 @@
<mat-card>
<mat-card class="form-card">
<mat-toolbar class="form-title">DELETE ACCOUNT</mat-toolbar>
<div fxLayout="column">
<span class="mat-h3">CAUTION</span>
<span class="mat-body">{{deleteWarning}}</span>
<button mat-raised-button>DELETE ACCOUNT</button>
<button mat-raised-button color="warn">DELETE ACCOUNT</button>
</div>
</mat-card>

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

@ -1,5 +1,14 @@
mat-card {
max-width: 400px;
button {
color: white;
margin-bottom: 10px;
margin-left: auto;
margin-right: auto;
}
.mat-body {
margin-bottom: 20px;
text-align: center;
}
.mat-h3 {
text-align: center;
font-weight: bold;

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

@ -1,8 +1,8 @@
<mat-card>
<mat-card class="form-card">
<mat-toolbar class="form-title">LOGIN</mat-toolbar>
<form id="login-form">
<div fxLayout="row wrap" fxLayoutAlign="center">
<div id="antisocial" fxFlex fxLayout="column" fxLayoutAlign="center none">
<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
@ -27,7 +27,8 @@
<mat-hint>Required when no external account is linked</mat-hint>
</mat-form-field>
</div>
<div fxFlex fxLayout="column" fxLayoutAlign="start center">
<!--<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>

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

@ -3,14 +3,14 @@
}
mat-card {
max-width: 400px;
mat-form-field {
width: 100%;
max-width: 400px;
}
mat-slide-toggle {
height: 50px;
max-width: 400px;
fa-icon {
font-size: 30px;

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

@ -1,8 +1,10 @@
<mat-card>
<mat-card class="form-card">
<mat-toolbar class="form-title">PERSONAL</mat-toolbar>
<form>
<div fxLayout="row wrap">
<div id="user-name" fxFlex fxLayout="column" fxLayoutAlign="center">
<!-- first and last name fields go on left when screen is large enough -->
<div id="user-name" fxFlex fxLayout="column">
<mat-form-field appearance="outline">
<mat-label>First Name</mat-label>
<input
@ -13,6 +15,7 @@
type="text"
>
</mat-form-field>
<mat-form-field appearance="outline">
<mat-label>Last Name</mat-label>
<input
@ -24,6 +27,40 @@
>
</mat-form-field>
</div>
<!-- location fields go on right when screen is large enough -->
<div id="user-location" fxFlex fxLayout="column">
<mat-form-field appearance=outline>
<mat-label>Country</mat-label>
<mat-select>
<mat-option value="option1">Option 1</mat-option>
<mat-option value="option2" disabled>Option 2 (disabled)</mat-option>
<mat-option value="option3">Option 3</mat-option>
</mat-select>
<mat-hint>Filter for postal code and time zone</mat-hint>
</mat-form-field>
<mat-form-field appearance=outline>
<mat-label>Postal Code</mat-label>
<mat-select placeholder="Select country">
<mat-option value="option1">Option 1</mat-option>
<mat-option value="option2" disabled>Option 2 (disabled)</mat-option>
<mat-option value="option3">Option 3</mat-option>
</mat-select>
<mat-hint>Default postal code for skills (e.g. weather)</mat-hint>
</mat-form-field>
<mat-form-field appearance=outline>
<mat-label>Time Zone</mat-label>
<mat-select>
<mat-option value="option1">Option 1</mat-option>
<mat-option value="option2" disabled>Option 2 (disabled)</mat-option>
<mat-option value="option3">Option 3</mat-option>
</mat-select>
<mat-hint>Default time zone for skills (e.g. alarm clock)</mat-hint>
</mat-form-field>
</div>
</div>
</form>
</mat-card>

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

@ -29,10 +29,9 @@
}
mat-card {
max-width: 400px;
mat-form-field {
width: 100%;
max-width: 400px;
}
fieldset {

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

@ -2,5 +2,6 @@
<account-login></account-login>
<account-subscription></account-subscription>
<account-personal></account-personal>
<account-agreements></account-agreements>
<account-delete></account-delete>
</div>

6
projects/account/src/app/profile/profile.module.ts
View File

@ -12,6 +12,7 @@ import {
MatExpansionModule,
MatFormFieldModule,
MatInputModule,
MatSelectModule,
MatSlideToggleModule,
MatToolbarModule
} from '@angular/material';
@ -21,6 +22,7 @@ import { LoginComponent } from './login/login.component';
import { PersonalComponent } from './personal/personal.component';
import { SubscriptionComponent } from './subscription/subscription.component';
import { DeleteComponent } from './delete/delete.component';
import { AgreementsComponent } from './agreements/agreements.component';
@NgModule({
declarations: [
@ -28,7 +30,8 @@ import { DeleteComponent } from './delete/delete.component';
LoginComponent,
PersonalComponent,
SubscriptionComponent,
DeleteComponent
DeleteComponent,
AgreementsComponent
],
entryComponents: [
LoginComponent
@ -45,6 +48,7 @@ import { DeleteComponent } from './delete/delete.component';
MatExpansionModule,
MatFormFieldModule,
MatInputModule,
MatSelectModule,
MatSlideToggleModule,
MatToolbarModule
]

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

@ -1,11 +1,13 @@
<mat-card>
<mat-card class="form-card">
<mat-toolbar class="form-title">SUPPORT MYCROFT</mat-toolbar>
<form id="subscription-form">
<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>
</ng-container>
<div id=subscription-types fxLayout="row wrap" fxLayoutAlign="space-evenly">
<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>
</ng-container>
</div>
</form>
</mat-card>

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

@ -3,13 +3,17 @@
}
mat-card {
max-width: 400px;
#subscription-types {
.subscription-card {
margin-bottom: 10px;
margin-top: 10px;
max-width: 300px;
min-width: 220px;
text-align: center;
.subscription-card {
text-align: center;
mat-card-title {
font-size: 16px;
mat-card-title {
font-size: 16px;
}
}
}
}

4
projects/globalnav/src/lib/globalnav.component.html
View File

@ -1,4 +1,4 @@
<div class="app">
<!--<div class="app-container">-->
<mat-toolbar fxLayout="row" fxLayoutAlign="space-between" color="primary">
<span fxLayout="row" fxLayoutAlign="start center" fxFlex>
<button mat-icon-button class="menu-button" (click)="snav.toggle()">
@ -65,4 +65,4 @@
<ng-content select="[appBody]"></ng-content>
</mat-sidenav-content>
</mat-sidenav-container>
</div>
<!--</div>-->

21
projects/globalnav/src/lib/globalnav.component.scss
View File

@ -1,12 +1,12 @@
.app-container {
display: flex;
flex-direction: column;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
//.app-container {
// display: flex;
// flex-direction: column;
// position: absolute;
// top: 0;
// bottom: 0;
// left: 0;
// right: 0;
//}
// Use inline css to display the logo at top of sidebar because Angular
// libraries do not support static assets yet.
@ -40,6 +40,7 @@ mat-toolbar {
}
mat-sidenav-container {
.mat-drawer-container{ overflow: visible; }
mat-sidenav {
border: none;
margin-top: 50px;
@ -53,7 +54,7 @@ mat-sidenav-container {
}
mat-sidenav-content {
margin-top: 50px;
background-color: #f1f3f4;
//background-color: #f1f3f4;
}
}

2
projects/market/src/app/skills/skill-summary/skill-card/skill-card.component.ts
View File

@ -73,7 +73,7 @@ export class SkillCardComponent implements OnInit {
this.installSnackbar.open(
notificationMessage,
'',
{panelClass: 'login-snackbar', duration: fiveSeconds}
{panelClass: 'profile-snackbar', duration: fiveSeconds}
);
}
}

4
projects/sso/src/app/app-routing.module.ts
View File

@ -6,9 +6,9 @@ import { LogoutComponent } from './logout/logout.component';
// import { PageNotFoundComponent } from './page-not-found/page-not-found.component';
const routes: Routes = [
{ path: 'login', component: LoginComponent },
{ path: 'profile', component: LoginComponent },
{ path: 'logout', component: LogoutComponent },
{ path: '', redirectTo: '/login', pathMatch: 'full' },
{ path: '', redirectTo: '/profile', pathMatch: 'full' },
// { path: '**', component: PageNotFoundComponent }
];

6
projects/sso/src/app/app.component.html
View File

@ -1,10 +1,10 @@
<!--
Don't display the login page if the URL contains the data returned from a
call to the Tartarus social login endpoint. When this happens, a view call
Don't display the profile page if the URL contains the data returned from a
call to the Tartarus social profile endpoint. When this happens, a view call
will be made to get the tokens and the user will be returned to the previous
window.
This condition is temporary it should be removed when the social login logic
This condition is temporary it should be removed when the social profile logic
is refactored and moved into Selene.
-->
<div *ngIf="!socialLoginDataFound">

14
src/theme.scss
View File

@ -176,7 +176,19 @@ $custom-theme: mycroft-light-theme(
.form-title {
background-color: mat-color($primary, 200);
color: mat-contrast($primary, 200)
border-radius: 6px;
color: mat-contrast($primary, 200);
margin-bottom: 20px;
max-width: 1000px;
min-width: 260px;
}
.form-card {
margin-bottom: 40px;
margin-left: auto;
margin-right: auto;
max-width: 1000px;
min-width: 260px;
}
}