configure card font

app/db/README.md

@@ -33,7 +33,7 @@ To get more help on the Angular CLI use `ng help` or go check out the [Angular C
 - Options to merge references \*\*
   - Merge if overlap
   - Merge if contains
-- Font Size / Font settings
+- Font Size
 - Page Admin \*\*
   - Delete Page
   - Show page and list of card titles
@@ -52,7 +52,6 @@ To get more help on the Angular CLI use `ng help` or go check out the [Angular C
 - Settings for theme
   - Custom Colors for Light/Dark modes
 - Dark / Light / NightLight Mode
-- Sync Card across Devices
 - Merge saved pages lists when unlogged in -> login
 - Incorporate Jacob's Geo Work
 - Android and IOS mobile apps with Ionic Capactor

app/db/src/app/app.component.ts

@@ -21,9 +21,7 @@ export class AppComponent extends SubscriberComponent implements AfterViewInit {
   fontSize$ = this.appService.select(
     (state) => state.displaySettings.fontSize + 'pt'
   );
-  fontFamily$ = this.appService.select(
-    (state) => state.displaySettings.fontFamily
-  );
+  cardFont$ = this.appService.select((state) => state.displaySettings.cardFont);
 
   isHandset$: Observable<boolean> = this.breakpointObserver
     .observe(Breakpoints.Handset)
@@ -46,12 +44,20 @@ export class AppComponent extends SubscriberComponent implements AfterViewInit {
     this.appService.initSavedPages();
     this.appService.initDisplaySettings();
 
-    this.fontSize$.subscribe((size) => {
-      document.documentElement.style.setProperty('--font-size', size);
-    });
-    this.fontFamily$.subscribe((family) => {
-      document.documentElement.style.setProperty('--font-family', family);
-    });
+    this.addSubscription(
+      this.fontSize$.subscribe((size) => {
+        if (size) {
+          document.documentElement.style.setProperty('--font-size', size);
+        }
+      })
+    );
+    this.addSubscription(
+      this.cardFont$.subscribe((family) => {
+        if (family) {
+          document.documentElement.style.setProperty('--font-family', family);
+        }
+      })
+    );
   }
 
   ngAfterViewInit(): void {

app/db/src/app/common/components/settings/settings.component.html

@@ -28,6 +28,13 @@
       >Insert Result Next to Card</mat-slide-toggle
     >
   </mat-list-item>
+  <mat-list-item>
+    <mat-slide-toggle
+      [checked]="this.displaySettings.syncCardsAcrossDevices"
+      (change)="toggleSyncCardsAcrossDevices($event)"
+      >Sync Cards Across Devices</mat-slide-toggle
+    >
+  </mat-list-item>
 </mat-nav-list>
 
 <mat-toolbar>Display Settings</mat-toolbar>
@@ -61,3 +68,18 @@
     >
   </mat-list-item>
 </mat-nav-list>
+
+<mat-toolbar>Style Settings</mat-toolbar>
+<mat-nav-list>
+  <mat-form-field appearance="fill" class="card-fonts">
+    <mat-label>Card Fonts</mat-label>
+    <mat-select
+      [(value)]="cardFont"
+      (selectionChange)="cardFontSelected($event)"
+    >
+      <mat-option *ngFor="let font of fonts" [value]="font">
+        {{ font }}
+      </mat-option>
+    </mat-select>
+  </mat-form-field>
+</mat-nav-list>

app/db/src/app/common/components/settings/settings.component.scss

@@ -0,0 +1,3 @@
+.card-fonts {
+  width: 100%;
+}

app/db/src/app/common/components/settings/settings.component.ts

@@ -3,6 +3,8 @@ import { AppService } from 'src/app/services/app.service';
 import { MatSlideToggleChange } from '@angular/material/slide-toggle';
 import { SubscriberComponent } from '../subscriber.component';
 import { DisplaySettings } from 'src/app/models/app-state';
+import { CardFonts } from 'src/app/constants';
+import { MatSelectChange } from '@angular/material/select';
 
 @Component({
   selector: 'app-settings',
@@ -11,16 +13,24 @@ import { DisplaySettings } from 'src/app/models/app-state';
 })
 export class SettingsComponent extends SubscriberComponent {
   displaySettings: DisplaySettings;
+  fonts: string[];
+  cardFont = '';
 
-  constructor(private appService: AppService) {
+  constructor(public appService: AppService) {
     super();
+    this.fonts = CardFonts;
     this.addSubscription(
       this.appService.state$.subscribe((state) => {
         this.displaySettings = state.displaySettings;
+        this.cardFont = state.displaySettings.cardFont;
       })
     );
   }
 
+  cardFontSelected(evt: MatSelectChange) {
+    this.appService.changeFont(evt.value);
+  }
+
   //#region Search Settings
 
   toggleStrongsAsModal(toggle: MatSlideToggleChange) {
@@ -50,6 +60,12 @@ export class SettingsComponent extends SubscriberComponent {
       clearSearchAfterQuery: toggle.checked,
     });
   }
+  toggleSyncCardsAcrossDevices(toggle: MatSlideToggleChange) {
+    this.appService.updateDisplaySettings({
+      ...this.displaySettings,
+      syncCardsAcrossDevices: toggle.checked,
+    });
+  }
   //#endregion
 
   //#region Passage Settings

app/db/src/app/constants.ts

@@ -13,3 +13,13 @@ export const CardIcons = {
   Passage: 'menu_book',
   Strongs: 'article',
 };
+
+export const CardFonts = [
+  'Merriweather',
+  'PT Sans',
+  'PT Serif',
+  'Open Sans',
+  'Roboto',
+  'Roboto Condensed',
+  'Inconsolata',
+];

app/db/src/app/models/app-state.ts

@@ -34,12 +34,14 @@ export interface DisplaySettings {
   readonly clearSearchAfterQuery: boolean;
 
   readonly fontSize: number;
-  readonly fontFamily: string;
+  readonly cardFont: string;
 
   readonly showVersesOnNewLine: boolean;
   readonly showVerseNumbers: boolean;
   readonly showParagraphs: boolean;
   readonly showParagraphHeadings: boolean;
+
+  readonly syncCardsAcrossDevices: boolean;
 }
 
 export type OpenData = {

app/db/src/app/services/app.service.ts

@@ -57,11 +57,12 @@ const initialState: AppState = {
     insertCardNextToItem: true,
     clearSearchAfterQuery: true,
     fontSize: 12,
-    fontFamily: 'PT Serif',
+    cardFont: 'PT Serif',
     showVersesOnNewLine: false,
     showVerseNumbers: false,
     showParagraphs: true,
     showParagraphHeadings: true,
+    syncCardsAcrossDevices: false,
   },
   cardIcons: {
     words: 'font_download',
@@ -109,7 +110,7 @@ type AppAction =
     }
   | {
       type: 'UPDATE_FONT_FAMILY';
-      family: string;
+      cardFont: string;
     }
   | {
       type: 'UPDATE_AUTOCOMPLETE';
@@ -241,7 +242,7 @@ function reducer(state: AppState, action: AppAction): AppState {
         ...state,
         displaySettings: {
           ...state.displaySettings,
-          fontFamily: action.family,
+          cardFont: action.cardFont,
         },
       };
     }
@@ -285,6 +286,13 @@ export class AppService extends createStateService(reducer, initialState) {
     console.log(msg);
   }
 
+  changeFont(cardFont: string) {
+    this.dispatch({
+      type: 'UPDATE_FONT_FAMILY',
+      cardFont,
+    });
+  }
+
   //#region Saved Pages
 
   async initSavedPages() {