Merge pull request #1 from Stanoja/feat/change-font-size-remarks

-Added multiple font size options

Code/skyrim_ui/src/app/components/root/root.component.ts

@@ -12,6 +12,8 @@ import { ChatComponent } from '../chat/chat.component';
 import { GroupComponent } from '../group/group.component';
 import { animation as controlsAnimation } from './controls.animation';
 import { animation as notificationsAnimation } from './notifications.animation';
+import {map} from 'rxjs/operators';
+import {fontSizeToPixels} from '../settings/settings.component';
 
 
 export enum RootView {
@@ -86,10 +88,10 @@ export class RootComponent implements OnInit {
 
   public onFontSizeSubscription() {
     this.settings.fontSizeChange
-    .pipe(takeUntil(this.destroy$))
+    .pipe(takeUntil(this.destroy$), map(size => fontSizeToPixels[size]))
     .subscribe( size => {
-      document.documentElement.setAttribute('style', `font-size: ${size}px;`);
-    }) 
+      document.documentElement.setAttribute('style', `font-size: ${size};`);
+    })
   }
 
   public setView(view: RootView | undefined) {

Code/skyrim_ui/src/app/components/settings/settings.component.html

@@ -118,9 +118,9 @@ <h2>{{ 'COMPONENT.SETTINGS.FONT' | transloco }}</h2>
         <label for="fontSize">{{ 'COMPONENT.SETTINGS.FONT_SIZE' | transloco }}</label>
         <span class="fontsize-controls">
           <button id="decrement" (click)="onFontSizeDown()"></button>
-            <span id="fontSize">{{fontSize}}</span>
+            <span id="fontSize">{{('COMPONENT.SETTINGS.FONT_SIZES.' + fontSize.toUpperCase()) | transloco}}</span>
           <button id="increment"(click)="onFontSizeUp()"></button>
-        </span> 
+        </span>
       </div>
     </div>
   </div>

Code/skyrim_ui/src/app/components/settings/settings.component.ts

@@ -4,6 +4,21 @@ import { SettingService } from 'src/app/services/setting.service';
 import { Sound, SoundService } from '../../services/sound.service';
 import { RootView } from '../root/root.component';
 
+export enum FontSize {
+  XS = 'xs',
+  S = 's',
+  M = 'm',
+  L = 'l',
+  XL = 'xl'
+}
+
+export const fontSizeToPixels = {
+  [FontSize.XS]: '10px',
+  [FontSize.S]: '12px',
+  [FontSize.M]: '16px',
+  [FontSize.L]: '18px',
+  [FontSize.XL]: '20px',
+}
 
 export enum PartyAnchor {
   TOP_LEFT,
@@ -31,10 +46,11 @@ export class SettingsComponent implements OnInit {
   public partyAnchor: PartyAnchor;
   public partyAnchorOffsetX: number;
   public partyAnchorOffsetY: number;
-  public fontSize: number;
+  public fontSize: FontSize;
+  private _fontSize: number;
 
-  public maxFontSize = 20;
-  public minFontSize = 10;
+  public maxFontSize = Object.values(FontSize).length - 1;
+  public minFontSize = 0;
 
   @Output() public done = new EventEmitter<void>();
   @Output() public setView = new EventEmitter<RootView>();
@@ -58,6 +74,7 @@ export class SettingsComponent implements OnInit {
     this.partyAnchorOffsetX = this.settings.getPartyAnchorOffsetX();
     this.partyAnchorOffsetY = this.settings.getPartyAnchorOffsetY();
     this.fontSize = this.settings.getFontSize();
+    this._fontSize = Object.values(FontSize).indexOf(this.fontSize);
   }
 
   onMutedChange(checked: boolean) {
@@ -123,20 +140,22 @@ export class SettingsComponent implements OnInit {
 
   onFontSizeChange(size: number) {
     if (size >= this.minFontSize && size <= this.maxFontSize) {
-      this.settings.setFontSize(size);
-      this.fontSize = size;
+      const fontSize = Object.values(FontSize)[size];
+      this.settings.setFontSize(fontSize);
+      this.fontSize = fontSize;
+      this._fontSize = size;
       this.settingsUpdated.next();
     }
   }
 
   onFontSizeUp() {
-    this.onFontSizeChange(this.fontSize + 1)
+    this.onFontSizeChange(this._fontSize + 1)
   }
 
   onFontSizeDown() {
-    this.onFontSizeChange(this.fontSize - 1)
+    this.onFontSizeChange(this._fontSize - 1)
   }
-  
+
   public autoHideTimeSelected(number: number): boolean {
     return this.settings.getAutoHideTime() === number;
   }

Code/skyrim_ui/src/app/services/setting.service.ts

@@ -1,6 +1,6 @@
 import { Injectable } from '@angular/core';
 import { BehaviorSubject } from 'rxjs';
-import { PartyAnchor } from '../components/settings/settings.component';
+import {FontSize, fontSizeToPixels, PartyAnchor} from '../components/settings/settings.component';
 import { StoreService } from './store.service';
 
 
@@ -92,13 +92,13 @@ export class SettingService {
     return JSON.parse(this.storeService.get('party_anchor_offset_y', 3));
   }
 
-  public setFontSize(size: number) {
-    this.fontSizeChange.next(size)
+  public setFontSize(size: FontSize) {
+    this.fontSizeChange.next(size);
     this.storeService.set('font_size', size);
   }
 
-  public getFontSize(): number {
-    return JSON.parse(this.storeService.get('font_size', 16));
+  public getFontSize(): FontSize {
+    return this.storeService.get('font_size', FontSize.M);
   }
 
 }

Code/skyrim_ui/src/assets/i18n/en.json

@@ -123,6 +123,13 @@
       "SHOW_DEBUG_INFO": "Show Debug Information",
       "FONT": "Font",
       "FONT_SIZE": "Font size",
+      "FONT_SIZES": {
+        "XS": "Extra small",
+        "S": "Small",
+        "M": "Medium",
+        "L": "Large",
+        "XL": "Extra Large"
+      },
       "BACK": "Back"
     }
   },