Cleaner code for visual settings #18

* Added new constants for the fonts: `MAX_FONT_SIZE`, `DEFAULT_FONT_SIZE` and `BASE_FONT_SIZE` in fonts.ts
* Font sizes are now calculated with a simple formula based on user font size
* Deleted commented code in header.component.html

Author: dj-256

.idea/runConfigurations/everything.xml

@@ -1,4 +1,4 @@
-<app-header [ngStyle]="setFont()"></app-header>
-<div class="content" [ngStyle]="setFont()">
+<app-header [ngStyle]="setStyle()"></app-header>
+<div class="content" [ngStyle]="setStyle()">
     <router-outlet></router-outlet>
 </div>

frontend/src/app/app.component.html

@@ -1,6 +1,6 @@
 import { Component } from "@angular/core";
 import { UserService } from "../services/user.service";
-import fonts from "../fonts";
+import { BASE_FONT_SIZE, DEFAULT_FONT_SIZE } from "../fonts";
 
 @Component({
     selector: "app-root",
@@ -10,25 +10,26 @@ import fonts from "../fonts";
 export class AppComponent
 {
     title = "starter-quiz";
-    fontSizes = ['22px', '25px', '28px'];
     public fontSize: string;
     public font: string;
     constructor(private userService: UserService)
     {
     }
 
+    toPixels(n: number): string {
+        return n*3+BASE_FONT_SIZE+'px';
+    }
+
     ngOnInit(){
         this.userService.currentUser
             .subscribe(user =>
             {
-                this.fontSize = this.fontSizes[user?.fontSize ?? 1];
+                this.fontSize = this.toPixels(user?.fontSize ?? DEFAULT_FONT_SIZE);
                 this.font = user?.font ?? "Arial";
-
-                document.querySelector('html').style.fontSize = this.fontSize;
             });
     }
 
-    setFont() {
-        return {'font-family': this.font};
+    setStyle() {
+        return {'font-family': this.font, 'font-size': this.fontSize};
     }
 }

frontend/src/app/app.component.ts

@@ -1,6 +1,5 @@
 <div class="header d-flex justify-content-between " *ngIf="user != null">
 
-
     <div class="epsilon p-2">
         <button class="btn btn-xs btn-green" (click)="accueil()">
             <i class="bi-house"></i>
@@ -15,15 +14,6 @@
     </div>
 
     <div class="epsilon ml-auto p-2 d-flex align-items-center">
-<!--        Changer la taille de police-->
-<!--        <button class="btn btn-xs btn-green ml-3" (click)="changeFont(true)">-->
-<!--            <i class="bi-plus"></i>-->
-<!--            <span>Augmenter</span>-->
-<!--        </button>-->
-<!--        <button class="btn btn-xs btn-green" (click)="changeFont(false)">-->
-<!--            <i class="bi-dash"></i>-->
-<!--            <span>Diminuer</span>-->
-<!--        </button>-->
         <button class="btn btn-xs btn-green" (click)="toggleParams()">
             <i class="bi-file-earmark-font"></i>
             <span>Taille et Police</span>

frontend/src/app/header/header.component.html

@@ -3,7 +3,7 @@ import { UserService } from "../../services/user.service";
 import { User } from "../../models/user.model";
 import { Router } from "@angular/router";
 import { FormControl } from "@angular/forms";
-import fonts from "../../fonts";
+import {fonts} from "../../fonts";
 
 
 @Component({

frontend/src/app/header/header.component.ts

@@ -1 +1,4 @@
-export default ["Arial", "Noto Sans JP"];
+export let fonts = ["Arial", "Noto Sans JP"];
+export let MAX_FONT_SIZE = 6;
+export let DEFAULT_FONT_SIZE = 1;
+export let BASE_FONT_SIZE = 22;

frontend/src/fonts.ts

@@ -4,7 +4,7 @@ import { User } from "../models/user.model";
 import { HttpClient } from "@angular/common/http";
 import { map } from "rxjs/operators";
 import { Observable } from "rxjs/Rx";
-import fonts from "../fonts";
+import { DEFAULT_FONT_SIZE, fonts, MAX_FONT_SIZE } from "../fonts";
 
 @Injectable({
     providedIn: "root"
@@ -110,15 +110,15 @@ export class UserService
 
         if (p)
         {
-            if (this.user.fontSize >= 2)
+            if (this.user.fontSize >= MAX_FONT_SIZE)
             {
                 return;
             }
             this.user.fontSize++;
         }
         else
         {
-            if (this.user.fontSize <= 0)
+        if (this.user.fontSize <= DEFAULT_FONT_SIZE)
             {
                 return;
             }