From d30f3736cbe9b908d22ca9d5f8ed628efbf037cf Mon Sep 17 00:00:00 2001 From: Jason Wall Date: Fri, 7 Aug 2020 08:19:06 -0400 Subject: [PATCH] rename css variables finish refactoring how settings are saved to local storage --- app/db/src/app/app.component.ts | 28 +++- .../words/words-card.component.scss | 2 +- app/db/src/app/services/app.service.ts | 124 ++++++++---------- app/db/src/styles/app.scss | 29 ++-- 4 files changed, 98 insertions(+), 85 deletions(-) diff --git a/app/db/src/app/app.component.ts b/app/db/src/app/app.component.ts index cf9884bf..1bf619cc 100644 --- a/app/db/src/app/app.component.ts +++ b/app/db/src/app/app.component.ts @@ -22,6 +22,7 @@ export class AppComponent extends SubscriberComponent implements AfterViewInit { (state) => state.displaySettings.fontSize + 'pt' ); cardFont$ = this.appService.select((state) => state.displaySettings.cardFont); + displaySettings$ = this.appService.select((state) => state.displaySettings); isHandset$: Observable = this.breakpointObserver .observe(Breakpoints.Handset) @@ -44,20 +45,43 @@ export class AppComponent extends SubscriberComponent implements AfterViewInit { this.appService.initSavedPages(); this.appService.initDisplaySettings(); + //#region handle local storage + + this.addSubscription( + this.displaySettings$.subscribe((settings) => { + this.appService.saveSettingsApi(settings); + }) + ); + + this.addSubscription( + this.savedPages$.subscribe((savedPages) => { + this.appService.savePagesApi(savedPages); + }) + ); + + //#endregion + + //#region handle font settings + this.addSubscription( this.fontSize$.subscribe((size) => { if (size) { - document.documentElement.style.setProperty('--font-size', size); + document.documentElement.style.setProperty('--card-font-size', size); } }) ); this.addSubscription( this.cardFont$.subscribe((family) => { if (family) { - document.documentElement.style.setProperty('--font-family', family); + document.documentElement.style.setProperty( + '--card-font-family', + family + ); } }) ); + + //#endregion } ngAfterViewInit(): void { diff --git a/app/db/src/app/search/components/words/words-card.component.scss b/app/db/src/app/search/components/words/words-card.component.scss index 38305573..7f4eba8b 100644 --- a/app/db/src/app/search/components/words/words-card.component.scss +++ b/app/db/src/app/search/components/words/words-card.component.scss @@ -14,7 +14,7 @@ overflow-y: auto; max-height: 25rem; font-family: var(--card-font); - font-size: var(--font-size); + font-size: var(--card-font-size); padding: 0.5rem; } .passage-button-wrapper { diff --git a/app/db/src/app/services/app.service.ts b/app/db/src/app/services/app.service.ts index 8dfaa6ac..f7391f0e 100644 --- a/app/db/src/app/services/app.service.ts +++ b/app/db/src/app/services/app.service.ts @@ -27,6 +27,7 @@ import { PageTitles, PageIcons } from '../constants'; import { createStateService } from '../common/state-service'; import { UUID } from 'angular2-uuid'; import { StorageMap } from '@ngx-pwa/local-storage'; +import { SearchPage } from '../search/components/search-page/search.page'; const initialState: AppState = { cards: [ @@ -77,6 +78,13 @@ type AppAction = type: 'GET_SAVED_PAGE'; pageId: string; } + | { + type: 'SAVE_PAGE'; + title: string; + } + | { + type: 'UPDATE_CURRENT_PAGE'; + } | { type: 'UPDATE_SAVED_PAGES'; savedPages: SavedPage[]; @@ -147,6 +155,38 @@ function reducer(state: AppState, action: AppAction): AppState { savedPages: action.savedPages, }; } + case 'UPDATE_CURRENT_PAGE': { + const savedPages = [ + ...state.savedPages.filter((o) => o.id === state.currentPage.id), + { + id: state.currentPage.id, + title: state.currentPage.title, + queries: [...state.cards], + }, + ]; + + return { + ...state, + savedPagesLoaded: true, + savedPages, + }; + } + case 'SAVE_PAGE': { + const savedPages = [ + ...state.savedPages, + { + // create a new saved page object + title: action.title, + id: UUID.UUID().toString(), + queries: [...state.cards], + }, + ]; + return { + ...state, + savedPagesLoaded: true, + savedPages, + }; + } case 'GET_SAVED_PAGE': { const page = state.savedPages.find( (o) => o.id.toString() === action.pageId @@ -325,25 +365,16 @@ export class AppService extends createStateService(reducer, initialState) { } savePage(title: string) { - const state = this.getState(); - - const savedPages = [ - ...state.savedPages, - { - // create a new saved page object - title, - id: UUID.UUID().toString(), - queries: [...state.cards], - }, - ]; + this.dispatch({ + type: 'SAVE_PAGE', + title, + }); + } + savePagesApi(savedPages: readonly SavedPage[]) { this.localStorageService.set('savedPages', savedPages).subscribe( - // success () => { - this.dispatch({ - type: 'UPDATE_SAVED_PAGES', - savedPages, - }); + // nop }, // error () => { @@ -359,36 +390,9 @@ export class AppService extends createStateService(reducer, initialState) { } updatePage() { - const state = this.getState(); - - const savedPages = [ - ...state.savedPages.filter((o) => o.id === state.currentPage.id), - { - id: state.currentPage.id, - title: state.currentPage.title, - queries: [...state.cards], - }, - ]; - - this.localStorageService.set('savedPages', savedPages).subscribe( - // success - () => { - this.dispatch({ - type: 'UPDATE_SAVED_PAGES', - savedPages, - }); - }, - // error - () => { - this.dispatch({ - type: 'UPDATE_ERROR', - error: { - // tslint:disable-next-line: quotemark - msg: "Something went wrong and the page wasn't saved. :(", - }, - }); - } - ); + this.dispatch({ + type: 'UPDATE_CURRENT_PAGE', + }); } addCardToSavedPage(pageId: string, card: CardItem) { @@ -404,25 +408,10 @@ export class AppService extends createStateService(reducer, initialState) { //#region Display Settings updateDisplaySettings(settings: DisplaySettings) { - this.saveSettingsApi(settings).subscribe( - // success - () => { - this.dispatch({ - type: 'UPDATE_DISPLAY_SETTINGS', - settings, - }); - }, - // error - () => { - this.dispatch({ - type: 'UPDATE_ERROR', - error: { - // tslint:disable-next-line: quotemark - msg: "Something went wrong and the settings weren't saved. :(", - }, - }); - } - ); + this.dispatch({ + type: 'UPDATE_DISPLAY_SETTINGS', + settings, + }); } async initDisplaySettings() { @@ -440,7 +429,7 @@ export class AppService extends createStateService(reducer, initialState) { } } - private saveSettingsApi(settings: DisplaySettings) { + saveSettingsApi(settings: DisplaySettings) { return this.localStorageService.set('displaySettings', settings); } @@ -495,6 +484,7 @@ export class AppService extends createStateService(reducer, initialState) { } ); } + async editNote(newCard: CardItem, oldCard: CardItem) { this.saveNoteApi(newCard.data as NoteItem).subscribe( // success @@ -776,7 +766,7 @@ export class AppService extends createStateService(reducer, initialState) { // get the verses requested. const tvs = chapters[j].vss.length; - if (end === '*' || end > tvs) { + if (end === 0 || end > tvs) { end = tvs; } diff --git a/app/db/src/styles/app.scss b/app/db/src/styles/app.scss index 9a2c0a88..4830e786 100644 --- a/app/db/src/styles/app.scss +++ b/app/db/src/styles/app.scss @@ -1,9 +1,8 @@ html { - --font-family: Roboto, Helvetica, Arial, sans-serif; - --font-size: 12pt; --primary-color: #333; - --card-font: Roboto, Helvetica, Arial, sans-serif; + --card-font-size: 12pt; + --card-font-family: Roboto, Helvetica, Arial, sans-serif; --card-heading-font-family: "Roboto Condensed"; --card-border-radius: 0.2em; --card-title: #fff; @@ -28,7 +27,7 @@ body { height: 100%; margin: 0; font-family: "Roboto Condensed"; - font-size: var(--font-size); + font-size: 12pt; } .card-title { @@ -53,9 +52,9 @@ body { .card-content { padding: 1rem; color: var(--card-color); - font-size: var(--font-size); - font-family: var(--font-family); - line-height: calc(var(--font-size) + 0.5rem); + font-size: var(--card-font-size); + font-family: var(--card-font-family); + line-height: calc(var(--card-font-size) + 0.5rem); } .card-close-button { @@ -111,30 +110,30 @@ a { .mat-headline, .mat-typography h1 { font-family: var(--card-heading-font-family) !important; - font-size: calc(var(--font-size) * 2) !important; - line-height: calc(var(--font-size) * 2.5) !important; + font-size: calc(var(--card-font-size) * 2) !important; + line-height: calc(var(--card-font-size) * 2.5) !important; } .mat-h2, .mat-title, .mat-typography h2 { font-family: var(--card-heading-font-family) !important; - font-size: calc(var(--font-size) * 1.5) !important; - line-height: calc(var(--font-size) * 1.7) !important; + font-size: calc(var(--card-font-size) * 1.5) !important; + line-height: calc(var(--card-font-size) * 1.7) !important; } .mat-h3, .mat-subheading-2, .mat-typography h3 { font-family: var(--card-heading-font-family) !important; - font-size: calc(var(--font-size) * 1.1) !important; - line-height: calc(var(--font-size) * 1.2) !important; + font-size: calc(var(--card-font-size) * 1.1) !important; + line-height: calc(var(--card-font-size) * 1.2) !important; } .mat-h4, .mat-subheading-1, .mat-typography h4 { font-family: var(--card-heading-font-family) !important; - font-size: var(--font-size) !important; - line-height: calc(var(--font-size) * 1.1) !important; + font-size: var(--card-font-size) !important; + line-height: calc(var(--card-font-size) * 1.1) !important; }