user settings

src/app/pages/settings/settings.page.html

@@ -1,9 +1,8 @@
-<form [formGroup]="form" (ngSubmit)="save()" #formDirective="ngForm" *ngIf="user">
+<div class="container">
+  <form [formGroup]="form" (ngSubmit)="save()" #formDirective="ngForm" *ngIf="user">
     <mat-card>
       <mat-card-content>
-      <mat-form-field>
+        <mat-card-title><a routerLink="/u/{{user.username}}">{{user.username}}</a></mat-card-title>
-        <input matInput formControlName="username" type="text">
-      </mat-form-field>
         <mat-form-field>
           <input matInput placeholder="{{'settings.email' | i18n}}" formControlName="email" type="email">
           <mat-error *ngIf="hasError('email')">
@@ -11,11 +10,28 @@
           </mat-error>
         </mat-form-field>
         <mat-form-field>
-        <textarea [mat-autosize] [matAutosizeMinRows]="3" matInput placeholder="{{'settings.about' | i18n}}" formControlName="about"></textarea>
+          <textarea [mat-autosize] [matAutosizeMinRows]="3" matInput placeholder="{{'settings.about' | i18n}}"
+            formControlName="about"></textarea>
           <mat-error>
             {{'settings.about.error' | i18n}}
           </mat-error>
         </mat-form-field>
+        <mat-divider></mat-divider>
+        <p>{{'settings.pagesettings' | i18n}}</p>
+        <mat-form-field>
+          <button *ngIf="user.settings.gravity || form.get('gravity').value != user.metadata.defaultGravity" matPrefix
+            mat-icon-button (click)="resetGravity()">
+            <mat-icon>cancel</mat-icon>
+          </button>
+          <input type="number" min="0" max="2" step="0.1" matInput placeholder="{{'settings.gravity' | i18n}}"
+            formControlName="gravity">
+            <mat-hint *ngIf="form.get('gravity').value != 0">
+              {{'settings.gravity.hint' | i18n}}
+            </mat-hint>
+            <mat-hint *ngIf="form.get('gravity').value == 0">
+              {{'settings.gravity.zero' | i18n}}
+            </mat-hint>
+        </mat-form-field>
       </mat-card-content>
       <mat-card-actions>
         <button *ngIf="!working" mat-raised-button color="primary" [disabled]="form.invalid">
@@ -24,5 +40,5 @@
         <a *ngIf="success" mat-button color="primary">{{'settings.success' | i18n}}</a>
       </mat-card-actions>
     </mat-card>
-
+  </form>
-</form>
+</div>

src/app/pages/settings/settings.page.scss

@@ -1,3 +1,20 @@
-mat-form-field {
+mat-form-field, mat-slider {
   display: block;
 }
+
+form {
+  margin-left: 15px;
+  margin-bottom: 15px;
+
+  @media screen and (min-width: 576px) {
+    max-width: 100%;
+  }
+
+  @media screen and (min-width: 768px) {
+    max-width: 80%;
+  }
+
+  @media screen and (min-width: 992px) {
+    max-width: 50%;
+  }
+}

src/app/pages/settings/settings.page.ts

@@ -26,15 +26,20 @@ export class PageSettings implements OnInit {
       username: [ { disabled: true }, Validators.nullValidator ],
       email: [ '', Validators.nullValidator ],
       about: [ '', Validators.nullValidator ],
+      gravity: [ '', Validators.nullValidator ],
     });
 
     this.form.get('username').disable();
 
     this.userService.get().subscribe(user => {
       this.user = user;
+      if (!this.user.settings) {
+        this.user.settings = {};
+      }
       this.form.get('username').setValue(this.user.username);
       this.form.get('email').setValue(this.user.email);
       this.form.get('about').setValue(this.user.about);
+      this.form.get('gravity').setValue(this.user.settings.gravity || this.user.metadata.defaultGravity);
     })
   }
 
@@ -42,6 +47,11 @@ export class PageSettings implements OnInit {
     return this.form.controls[ controlName ].errors != null;
   }
 
+  resetGravity(): void {
+    this.user.settings.gravity = null;
+    this.form.get('gravity').setValue(this.user.metadata.defaultGravity);
+  }
+
   save(): void {
     if (this.working) {
       return;
@@ -53,8 +63,21 @@ export class PageSettings implements OnInit {
     this.user.about = this.form.get('about').value;
     this.user.email = this.form.get('email').value;
 
+    if (!this.user.settings) {
+      this.user.settings = {};
+    }
+
+    if (this.form.get('gravity').value != this.user.metadata.defaultGravity && !this.user.settings.gravity) {
+      this.user.settings.gravity = this.form.get('gravity').value;
+    } else if (this.user.settings.gravity) {
+      this.user.settings.gravity = this.form.get('gravity').value;
+    }
+
     this.userService.update(this.user).subscribe((data) => {
       this.user = data;
+      if (!this.user.settings) {
+        this.user.settings = {};
+      }
       this.working = false;
       this.success = true;
     }, (error) => {

src/app/pages/submission/submission.page.html

@@ -1,4 +1,5 @@
-<form [formGroup]="form" (ngSubmit)="create()" #formDirective="ngForm">
+<div class="container">
+  <form [formGroup]="form" (ngSubmit)="create()" #formDirective="ngForm">
     <mat-card>
       <mat-card-content>
         <p>{{'submission.info' | i18n}}</p>
@@ -8,27 +9,30 @@
             <mat-select-trigger>
               <mat-icon>{{'entryType.' + entryType + '.icon' | i18n}}</mat-icon> {{'entryType.' + entryType | i18n}}
             </mat-select-trigger>
-          <mat-option *ngFor="let entryType of entryTypes" [value]="entryType" >
+            <mat-option *ngFor="let entryType of entryTypes" [value]="entryType">
               <mat-icon>{{'entryType.' + entryType + '.icon' | i18n}}</mat-icon> {{'entryType.' + entryType | i18n}}
             </mat-option>
           </mat-select>
         </mat-form-field>
 
         <mat-form-field>
-        <input matInput placeholder="{{'submission.url' | i18n}}" formControlName="url" type="url" [required]="entryType == 'LINK'" matAutofocus>
+          <input matInput placeholder="{{'submission.url' | i18n}}" formControlName="url" type="url"
+            [required]="entryType == 'LINK'" matAutofocus>
           <mat-error *ngIf="hasError('url')">
             {{'submission.url.error' | i18n}}
           </mat-error>
         </mat-form-field>
 
         <mat-form-field>
-        <input matInput placeholder="{{'submission.title' | i18n}}" formControlName="title" type="text" required (focus)="onTitleFocus($event)">
+          <input matInput placeholder="{{'submission.title' | i18n}}" formControlName="title" type="text" required
+            (focus)="onTitleFocus($event)">
           <mat-error>
             {{'submission.title.error' | i18n}}
           </mat-error>
         </mat-form-field>
         <mat-form-field>
-        <textarea [mat-autosize] [matAutosizeMinRows]="3" matInput placeholder="{{'submission.text' | i18n}}" formControlName="text"></textarea>
+          <textarea [mat-autosize] [matAutosizeMinRows]="3" matInput placeholder="{{'submission.text' | i18n}}"
+            formControlName="text"></textarea>
           <mat-error>
             {{'submission.text.error' | i18n}}
           </mat-error>
@@ -40,5 +44,5 @@
         </button>
       </mat-card-actions>
     </mat-card>
-
+  </form>
-</form>
+</div>

src/app/pages/submission/submission.page.scss

@@ -1,3 +1,20 @@
 mat-form-field {
   display: block;
 }
+
+form {
+  margin-left: 15px;
+  margin-bottom: 15px;
+
+  @media screen and (min-width: 576px) {
+    max-width: 100%;
+  }
+
+  @media screen and (min-width: 768px) {
+    max-width: 80%;
+  }
+
+  @media screen and (min-width: 992px) {
+    max-width: 50%;
+  }
+}

src/app/pages/user/user.page.html

@@ -2,6 +2,10 @@
   <page-notfound *ngIf="notfound"></page-notfound>
   <ng-container *ngIf="user">
     <table>
+      <tr *ngIf="user.metadata && user.metadata.self">
+        <th></th>
+        <td><a routerLink="/settings">{{'settings' | i18n}}</a></td>
+      </tr>
       <tr>
         <th>{{'user.username' | i18n}}</th>
         <td>{{user.username}}</td>

src/styles.scss

@@ -102,11 +102,6 @@ ui-main {
   bottom: 0;
 }
 
-mat-card {
-  max-width: 400px;
-  margin: 2em auto;
-}
-
 mat-form-field {
   display: block;
 }