diff --git a/src/src/app/components/strongs/card/strongs-card.component.ts b/src/src/app/components/strongs/card/strongs-card.component.ts
index db48a6ec..d97fc1fb 100644
--- a/src/src/app/components/strongs/card/strongs-card.component.ts
+++ b/src/src/app/components/strongs/card/strongs-card.component.ts
@@ -12,7 +12,7 @@ import { BibleReference } from 'src/app/common/bible-reference';
preserveWhitespaces: true,
changeDetection: ChangeDetectionStrategy.OnPush,
})
-export class StrongsCardComponent extends CardComponent implements OnInit {
+export class StrongsCardComponent extends CardComponent {
asModal = false;
@ViewChild('strongs') strongsElement: ElementRef;
@@ -25,9 +25,6 @@ export class StrongsCardComponent extends CardComponent implements OnInit {
})
);
}
- ngOnInit(): void {
- // console.log(this.cardItem);
- }
copy() {
const html = this.strongsElement.nativeElement.innerHTML;
diff --git a/src/src/app/components/strongs/modal/strongs-modal.component.html b/src/src/app/components/strongs/modal/strongs-modal.component.html
index 54b4b447..feeeceff 100644
--- a/src/src/app/components/strongs/modal/strongs-modal.component.html
+++ b/src/src/app/components/strongs/modal/strongs-modal.component.html
@@ -19,6 +19,6 @@
diff --git a/src/src/app/components/strongs/modal/strongs-modal.component.scss b/src/src/app/components/strongs/modal/strongs-modal.component.scss
index 33772233..af96e7f4 100644
--- a/src/src/app/components/strongs/modal/strongs-modal.component.scss
+++ b/src/src/app/components/strongs/modal/strongs-modal.component.scss
@@ -1,7 +1,8 @@
.close-button {
float: right;
+
mat-icon {
- font-size: 2rem;
+ transform: scale(1.5);
}
}
@@ -22,4 +23,3 @@ mat-toolbar {
padding: 0px 16px 0px 16px;
width: auto;
}
-
diff --git a/src/src/app/components/strongs/strongs.component.ts b/src/src/app/components/strongs/strongs.component.ts
index 788081a2..ab4c2f84 100644
--- a/src/src/app/components/strongs/strongs.component.ts
+++ b/src/src/app/components/strongs/strongs.component.ts
@@ -16,19 +16,19 @@ export class StrongsComponent {
isCard = false;
@Output()
- onOpenPassage = new EventEmitter
();
+ openPassage = new EventEmitter();
@Output()
- onOpenStrongs = new EventEmitter();
+ openStrongs = new EventEmitter();
constructor() {}
- openPassage(p: string) {
- this.onOpenPassage.emit(p);
+ triggerOpenPassage(p: string) {
+ this.openPassage.emit(p);
}
- openStrongs(q: string) {
- this.onOpenStrongs.emit(q);
+ triggerOpenStrongs(q: string) {
+ this.openStrongs.emit(q);
}
makePassage(p: string) {
diff --git a/src/src/app/components/verse-picker-modal/verse-picker-modal.component.scss b/src/src/app/components/verse-picker-modal/verse-picker-modal.component.scss
index b4af632e..d0ac23f1 100644
--- a/src/src/app/components/verse-picker-modal/verse-picker-modal.component.scss
+++ b/src/src/app/components/verse-picker-modal/verse-picker-modal.component.scss
@@ -55,8 +55,9 @@ h2 {
.close-button {
float: right;
+
mat-icon {
- font-size: 2rem;
+ transform: scale(1.5);
}
}
diff --git a/src/src/app/pages/notes-admin/notes-admin.page.ts b/src/src/app/pages/notes-admin/notes-admin.page.ts
index 29234d14..613ce9e8 100644
--- a/src/src/app/pages/notes-admin/notes-admin.page.ts
+++ b/src/src/app/pages/notes-admin/notes-admin.page.ts
@@ -11,7 +11,7 @@ import { MatDialog } from '@angular/material/dialog';
templateUrl: './notes-admin.page.html',
styleUrls: ['./notes-admin.page.scss'],
})
-export class NotesAdminPage extends SubscriberBase implements OnInit {
+export class NotesAdminPageComponent extends SubscriberBase implements OnInit {
notes$ = this.appService.select((state) =>
state.notes === null
? null
diff --git a/src/src/app/pages/saved-pages-admin/saved-pages-admin.page.ts b/src/src/app/pages/saved-pages-admin/saved-pages-admin.page.ts
index fa16c068..9278e61d 100644
--- a/src/src/app/pages/saved-pages-admin/saved-pages-admin.page.ts
+++ b/src/src/app/pages/saved-pages-admin/saved-pages-admin.page.ts
@@ -8,7 +8,7 @@ import { SubscriberBase } from '../../common/subscriber-base';
templateUrl: './saved-pages-admin.page.html',
styleUrls: ['./saved-pages-admin.page.scss'],
})
-export class SavedPagesAdminPage extends SubscriberBase implements OnInit {
+export class SavedPagesAdminPageComponent extends SubscriberBase implements OnInit {
savedPages$ = this.appService.select((state) => (state.savedPages === null ? null : state.savedPages.value));
constructor(public navService: NavService, private appService: AppService) {
diff --git a/src/src/app/pages/search/search.page.scss b/src/src/app/pages/search/search.page.scss
index e8ab112d..395a5940 100644
--- a/src/src/app/pages/search/search.page.scss
+++ b/src/src/app/pages/search/search.page.scss
@@ -8,7 +8,7 @@ mat-card {
width: 100%;
position: relative;
margin-left: 6px;
- margin-right: 6px;
+ margin-right: 60px;
}
.search-bar-input {
diff --git a/src/src/app/pages/search/search.page.ts b/src/src/app/pages/search/search.page.ts
index 90ac0c8b..5a5974c1 100644
--- a/src/src/app/pages/search/search.page.ts
+++ b/src/src/app/pages/search/search.page.ts
@@ -1,6 +1,6 @@
import { Component, OnInit, ViewChild, ChangeDetectionStrategy } from '@angular/core';
import { ActivatedRoute, Router, NavigationEnd } from '@angular/router';
-import { FormControl } from '@angular/forms';
+import { UntypedFormControl } from '@angular/forms';
import { MatDialog } from '@angular/material/dialog';
import { MatAutocompleteTrigger, MatAutocomplete } from '@angular/material/autocomplete';
import { AppService } from '../../services/app.service';
@@ -16,14 +16,14 @@ import { getFromCardCache } from 'src/app/common/card-cache-operations';
styleUrls: ['./search.page.scss'],
changeDetection: ChangeDetectionStrategy.OnPush,
})
-export class SearchPage extends SubscriberBase implements OnInit {
+export class SearchPageComponent extends SubscriberBase implements OnInit {
cards$ = this.appService.select((state) => state.currentCards.value.map((o) => getFromCardCache(o, state.cardCache)));
suggestions$ = this.appService.select((state) => state.autocomplete);
savedPagedLoaded = false;
clearSearchAfterQuery = true;
- searchControl = new FormControl();
+ searchControl = new UntypedFormControl();
@ViewChild(MatAutocomplete)
autoComplete: MatAutocomplete;
diff --git a/src/src/app/services/app.service.ts b/src/src/app/services/app.service.ts
index 66924993..20c70f25 100644
--- a/src/src/app/services/app.service.ts
+++ b/src/src/app/services/app.service.ts
@@ -4,7 +4,7 @@ import { User, Settings, DisplaySettings, PageSettings } from '../models/app-sta
import { Section, BibleReference, Overlap } from '../common/bible-reference';
import { createStateService } from '../common/state-service';
import { StorageMap } from '@ngx-pwa/local-storage';
-import { AngularFireDatabase } from '@angular/fire/database';
+import { AngularFireDatabase } from '@angular/fire/compat/database';
import { IStorable, Storable } from '../common/storable';
import { NoteItem } from '../models/note-state';
import {
@@ -999,7 +999,7 @@ export class AppService extends createStateService(reducer, initialState) {
// FindSharedSet takes an array of reference arrays, and figures out
// which references are shared by all arrays/sets, then returns a single
// array of references.
- // tslint:disable-next-line: prefer-for-of
+ // eslint-disable-next-line @typescript-eslint/prefer-for-of
for (let j = 0; j < referenceSet.length; j++) {
const refs = referenceSet[j];
results[j] = []; // initialize inner array
diff --git a/src/src/app/services/migration0to1.service.ts b/src/src/app/services/migration0to1.service.ts
index 26e417fd..de328fc9 100644
--- a/src/src/app/services/migration0to1.service.ts
+++ b/src/src/app/services/migration0to1.service.ts
@@ -1,6 +1,6 @@
import { Injectable } from '@angular/core';
-import { AngularFireDatabase, AngularFireObject } from '@angular/fire/database';
-import { DataSnapshot } from '@angular/fire/database/interfaces';
+import { AngularFireDatabase, AngularFireObject } from '@angular/fire/compat/database';
+import { DataSnapshot } from '@angular/fire/compat/database/interfaces';
import { UUID } from 'angular2-uuid';
import { AppService } from './app.service';
import { Overlap } from '../common/bible-reference';
@@ -9,7 +9,6 @@ import { SavedPage } from '../models/page-state';
import { CardType, DataReference } from '../models/card-state';
import { StorageService } from './storage.service';
import { Storable, StorableType } from '../common/storable';
-import { NoteItem } from '../models/note-state';
@Injectable({
providedIn: 'root',
diff --git a/src/src/app/services/nav.service.ts b/src/src/app/services/nav.service.ts
index a110ba07..7653b3f5 100644
--- a/src/src/app/services/nav.service.ts
+++ b/src/src/app/services/nav.service.ts
@@ -1,351 +1,16 @@
-import { ChangeDetectorRef, Injectable } from '@angular/core';
+import {Injectable } from '@angular/core';
import { MatSidenav } from '@angular/material/sidenav';
-import { BehaviorSubject } from 'rxjs';
-
-export class Swipe {
- public disableAnimation$ = new BehaviorSubject(false);
-
- private backdropEl: HTMLElement;
- private leftDrawerEl: HTMLElement;
- private rightDrawerEl: HTMLElement;
-
- private touchStartHandler = this.bodyTouchStart.bind(this);
- private touchMoveHandler = this.bodyTouchMove.bind(this);
- private touchEndHandler = this.bodyTouchEnd.bind(this);
- private transitionEndHandler = this.resetDrawer.bind(this);
-
- private isIosDevice =
- typeof window !== 'undefined' &&
- window.navigator &&
- window.navigator.platform &&
- (/iP(ad|hone|od)/.test(window.navigator.platform) ||
- (window.navigator.platform === 'MacIntel' && window.navigator.maxTouchPoints > 1));
-
- private readonly swipeInfo: SwipeInfo = {
- x1: 0,
- y1: 0,
- x2: 0,
- y2: 0,
- scrolling: null,
- manual: false,
- side: null,
- };
-
- constructor(private leftDrawer: MatSidenav, private rightDrawer: MatSidenav, private cd: ChangeDetectorRef) {}
-
- afterViewInit(leftDrawerId: string, rightDrawerId: string) {
- this.backdropEl = document.querySelector('.mat-drawer-backdrop');
- this.leftDrawerEl = document.getElementById(leftDrawerId);
- this.rightDrawerEl = document.getElementById(rightDrawerId);
- window.document.body.addEventListener('touchstart', this.touchStartHandler);
- window.document.body.addEventListener('touchmove', this.touchMoveHandler, { passive: !this.isIosDevice });
- window.document.body.addEventListener('touchend', this.touchEndHandler);
- }
-
- onDestroy() {
- window.document.body.removeEventListener('touchstart', this.touchStartHandler);
- window.document.body.removeEventListener('touchmove', this.touchMoveHandler);
- window.document.body.removeEventListener('touchend', this.touchEndHandler);
-
- this.leftDrawerEl.removeEventListener('transitionend', this.transitionEndHandler);
- this.rightDrawerEl.removeEventListener('transitionend', this.transitionEndHandler);
- }
-
- private bodyTouchStart(event: TouchEvent) {
- const t = event.touches[0];
- console.log(this.swipeInfo);
- this.swipeInfo.x1 = t.pageX;
- this.swipeInfo.y1 = t.pageY;
- this.swipeInfo.x2 = 0;
- this.swipeInfo.y2 = 0;
- this.swipeInfo.scrolling = null;
- this.swipeInfo.manual = false;
- this.swipeInfo.side = null;
- }
-
- /**
- * Handles touch move events to detect if the user is attempting to scroll or swipe.
- * If the user moves the touch more than 5 px vertically then we assume the user is scrolling.
- * If the user moves the touch more than 10 px horizontally then we assume the user is swiping and disable scrolling.
- * Touch end cleans up the scroll disabling.
- */
- private bodyTouchMove(event: TouchEvent) {
- if (this.isScrolling(event)) {
- // if we're scrolling then ignore these events
- return;
- }
-
- let offset = this.swipeInfo.x2 - this.swipeInfo.x1;
- const side = this.determineSide(offset);
-
- // if the user swipes one direction then the other without removing the touch,
- // we should ignore it... i think...
- if (
- this.swipeInfo.side !== null &&
- this.swipeInfo.side.direction !== null &&
- this.swipeInfo.side.direction !== side.direction
- ) {
- return;
- }
- this.swipeInfo.side = side;
-
- // the user is swiping
- // ignore swiping if the menu is not over
- if (side.drawer.mode !== 'over') {
- return;
- }
-
- // swipe left is -px, right is +px
- let translate = 0;
- if (side.drawer.opened) {
- // if nav is open then offset should be negative
- if (this.isOpening(offset)) {
- return;
- }
-
- translate = offset;
- } else {
- // if nav is closed then offset should be positive
- if (!this.isOpening(offset)) {
- return;
- }
- // make sure the offset is not greater than sidenav width
- // to prevent the sidenav from floating off the left side
-
- if (side.direction === 'left') {
- offset = offset > side.drawer._width ? side.drawer._width : offset;
- translate = -side.drawer._width + offset;
- } else {
- offset = Math.abs(offset) > side.drawer._width ? -side.drawer._width : offset;
- translate = side.drawer._width - Math.abs(offset);
- }
-
- side.el.style.boxShadow = null;
- }
-
- side.el.style.visibility = 'visible';
- // update translate3d of sidenav by offset so the drawer moves
- side.el.style.transform = `translate3d(${translate}px, 0, 0)`;
- // update the opacity of the background so it fades in/out while the drawer moves
- this.backdropEl.style.visibility = 'visible';
- this.backdropEl.style.backgroundColor = `rgba(0,0,0,${
- (0.6 * Math.abs((side.direction === 'left' ? offset : -offset) + (side.drawer.opened ? side.drawer._width : 0))) /
- side.drawer._width
- })`;
-
- // disable backdrop transition while we're dragging to prevent lag
- this.backdropEl.style.transitionDuration = '0ms';
- }
-
- private bodyTouchEnd(event: TouchEvent) {
- const t = event.changedTouches[0];
- this.swipeInfo.x2 = t.pageX;
- this.swipeInfo.y2 = t.pageY;
-
- const offset = this.swipeInfo.x2 - this.swipeInfo.x1;
-
- // decide if we need to hide or show the sidenav
- if (this.swipeInfo.scrolling === false) {
- // enable scrolling again
- window.document.body.classList.remove('lock-scroll');
-
- // restore backdrop transition
- this.backdropEl.style.transitionDuration = null;
-
- // if the menu is not over then ignore
- if (this.swipeInfo.side.drawer.mode !== 'over') {
- return;
- }
-
- // if you're swiping open and the drawer is already open.
- if (this.isOpening(offset) && this.swipeInfo.side.drawer.opened) {
- console.log('ignoring end event (already open)');
- return;
- }
-
- // if you're swiping closed and the drawer is not open
- if (!this.isOpening(offset) && !this.swipeInfo.side.drawer.opened) {
- console.log('resetting to closed (already closed)');
- this.swipeInfo.side.el.style.transform = null;
- this.swipeInfo.side.el.style.boxShadow = 'none';
- this.backdropEl.style.visibility = null;
- this.backdropEl.style.backgroundColor = null;
- return;
- }
-
- // if the change is less than the min, just ignore it.
- // this block puts everything back the way it was.
- console.log(`Offset: ${Math.abs(offset)}, Tolerance: ${this.swipeInfo.side.drawer._width * 0.08}`);
- if (Math.abs(offset) < this.swipeInfo.side.drawer._width * 0.08) {
- this.backdropEl.style.visibility = null;
- if (this.swipeInfo.side.drawer.opened) {
- // reset to open position
- console.log('resetting to open (no tolerance)');
- this.swipeInfo.side.el.style.transform = 'none';
- this.backdropEl.style.backgroundColor = 'rgba(0,0,0,0.6)';
- } else {
- // reset to closed position
- console.log('resetting to closed (no tolerance)');
- this.swipeInfo.side.el.style.transform = null;
- this.swipeInfo.side.el.style.boxShadow = 'none';
- this.backdropEl.style.backgroundColor = null;
- }
- return;
- }
-
- // manually close/open the drawer using css and then update the state of the sidenav
- // if we close/open the sidenav directly it restarts the animation at fully opened/closed causing jank
- // so we have to fake the animation and then update the sidenav so the state matches
- this.swipeInfo.manual = true;
- this.disableAnimation$.next(true);
- this.cd.markForCheck();
- // wait for the end of the transition so we can reset anything we hacked to make this work
- this.swipeInfo.side.el.addEventListener('transitionend', this.transitionEndHandler);
- // wait one frame for the handler to be established before setting the transition
- requestAnimationFrame(() => {
- this.swipeInfo.side.el.style.transition = '400ms cubic-bezier(0.25, 0.8, 0.25, 1)';
- this.cd.markForCheck();
- if (this.swipeInfo.side.drawer.opened) {
- console.log('manually transitioning (closed)');
- // update translate3d of sidenav so that it animates closed
- if (this.swipeInfo.side.direction === 'left') {
- this.swipeInfo.side.el.style.transform = 'translate3d(-100%, 0, 0)';
- } else {
- this.swipeInfo.side.el.style.transform = 'translate3d(100%, 0, 0)';
- }
- } else {
- console.log('manually transitioning (open)');
- // update the transform on the sidenav so that it animates open
- this.swipeInfo.side.el.style.transform = 'none';
- // reset background opacity
- this.backdropEl.style.backgroundColor = 'rgba(0,0,0,0.6)';
- }
- });
- }
- }
-
- private resetDrawer() {
- this.swipeInfo.side.el.removeEventListener('transitionend', this.transitionEndHandler);
- this.swipeInfo.side.el.style.transition = null;
- this.backdropEl.style.visibility = null;
- this.backdropEl.style.backgroundColor = null;
-
- if (this.swipeInfo.side.drawer.opened) {
- console.log('manually transitioning (final closed)');
- // make the backdrop hide as if the sidenav is closed
- this.backdropEl.classList.remove('mat-drawer-shown');
- this.swipeInfo.side.el.style.transform = 'none';
- this.swipeInfo.side.drawer.toggle(false);
- } else {
- console.log('manually transitioning (final open)');
- // make the backdrop show as if the sidenav is open
- this.backdropEl.classList.add('mat-drawer-shown');
- this.swipeInfo.side.drawer.toggle(true);
- }
-
- this.cd.markForCheck();
-
- requestAnimationFrame(() => {
- this.swipeInfo.manual = false;
- this.disableAnimation$.next(false);
- this.cd.markForCheck();
- });
- }
-
- private isOpening(offset: number) {
- if (this.swipeInfo.side.direction === 'right') {
- return offset < 0; // its on the right not the left, so its inverted.
- } else {
- return offset > 0;
- }
- }
-
- private isScrolling(event: TouchEvent) {
- if (this.swipeInfo.scrolling) {
- // if we're scrolling then ignore these events
- return true;
- }
-
- const t = event.touches[0];
- this.swipeInfo.x2 = t.pageX;
- this.swipeInfo.y2 = t.pageY;
-
- // check if we have decided if the user is scrolling or not
- if (this.swipeInfo.scrolling === null) {
- if (Math.abs(this.swipeInfo.y2 - this.swipeInfo.y1) > 5) {
- // if the user has moved more than 5 pixels y then they're scrolling
- this.swipeInfo.scrolling = true;
- return true;
- }
-
- // if the user has moved more than 5 pixels x then they're swiping
- this.swipeInfo.scrolling = false;
- // disable scrolling
- window.document.body.classList.add('lock-scroll');
- if (this.isIosDevice) {
- // css overflow:hidden doesn't work on the body for iOS so we have to use a
- // non-passive listener and preventdefault to prevent scrolling
- event.preventDefault();
- }
- }
-
- return false;
- }
-
- private determineSide(offset: number): Side {
- if (this.leftDrawer.opened) {
- return { drawer: this.leftDrawer, el: this.leftDrawerEl, direction: 'left' };
- }
-
- if (this.rightDrawer.opened) {
- return { drawer: this.rightDrawer, el: this.rightDrawerEl, direction: 'right' };
- }
- // both are closed, so you must be opening.
- // return the one from the side you start swiping on.
-
- if (offset < 0) {
- // negative indicates swiping left
- return { drawer: this.rightDrawer, el: this.rightDrawerEl, direction: 'right' }; // swiping left means starting right, so return the right drawer.
- }
-
- return { drawer: this.leftDrawer, el: this.leftDrawerEl, direction: 'left' };
- }
-}
-
-interface Side {
- drawer: MatSidenav;
- el: HTMLElement;
- direction: 'left' | 'right' | null;
-}
-
-export interface SwipeInfo {
- x1: number;
- y1: number;
- x2: number;
- y2: number;
- scrolling: boolean | null;
- manual: boolean;
- side: Side;
-}
@Injectable({
providedIn: 'root',
})
export class NavService {
- public swipe: Swipe;
-
private sidenav: MatSidenav;
private settings: MatSidenav;
- public afterViewInit(sidenav: MatSidenav, settings: MatSidenav, cd: ChangeDetectorRef) {
+ public afterViewInit(sidenav: MatSidenav, settings: MatSidenav) {
this.sidenav = sidenav;
this.settings = settings;
- this.swipe = new Swipe(sidenav, settings, cd);
- this.swipe.afterViewInit('drawer', 'settings');
- }
-
- public onDestroy() {
- this.swipe.onDestroy();
}
public openNav() {
diff --git a/src/src/app/services/storage.service.ts b/src/src/app/services/storage.service.ts
index f7fc83bf..a890bf89 100644
--- a/src/src/app/services/storage.service.ts
+++ b/src/src/app/services/storage.service.ts
@@ -1,7 +1,7 @@
import { Injectable } from '@angular/core';
import { StorageMap } from '@ngx-pwa/local-storage';
-import { AngularFireDatabase, AngularFireObject } from '@angular/fire/database';
-import { DataSnapshot } from '@angular/fire/database/interfaces';
+import { AngularFireDatabase, AngularFireObject } from '@angular/fire/compat/database';
+import { DataSnapshot } from '@angular/fire/compat/database/interfaces';
import { SubscriberBase } from '../common/subscriber-base';
import { IStorable, StorableType, UserVersion } from '../common/storable';
@@ -11,7 +11,6 @@ import { MigrationVersion0to1 } from './migration0to1.service';
import { User, Settings, AppState } from '../models/app-state';
import { NoteItem } from '../models/note-state';
import { SavedPage } from '../models/page-state';
-import { Observable } from 'rxjs';
import { isNullOrUndefined } from '../common/helpers';
import { DataReference } from '../models/card-state';
import { createSelector } from 'reselect';
@@ -209,7 +208,7 @@ export class StorageService extends SubscriberBase {
},
// error
() => {
- // tslint:disable-next-line: quotemark
+ // eslint-disable-next-line @typescript-eslint/quotes
this.appService.dispatchError(`Something went wrong and the Settings weren't saved. :(`);
}
);
@@ -236,7 +235,7 @@ export class StorageService extends SubscriberBase {
},
// error
() => {
- // tslint:disable-next-line: quotemark
+ // eslint-disable-next-line @typescript-eslint/quotes
this.appService.dispatchError(`Something went wrong and the Page wasn't saved. :(`);
}
);
@@ -263,7 +262,7 @@ export class StorageService extends SubscriberBase {
},
// error
() => {
- // tslint:disable-next-line: quotemark
+ // eslint-disable-next-line @typescript-eslint/quotes
this.appService.dispatchError(`Something went wrong and the Note wasn't saved. :(`);
}
);
@@ -295,7 +294,7 @@ export class StorageService extends SubscriberBase {
},
// error
() => {
- // tslint:disable-next-line: quotemark
+ // eslint-disable-next-line @typescript-eslint/quotes
this.appService.dispatchError(`Something went wrong and the current cards weren't saved. :(`);
}
);
diff --git a/src/src/environments/environment.ts b/src/src/environments/environment.ts
index 7b4f817a..30d7bccb 100644
--- a/src/src/environments/environment.ts
+++ b/src/src/environments/environment.ts
@@ -13,4 +13,4 @@ export const environment = {
* This import should be commented out in production mode because it will have a negative impact
* on performance if an error is thrown.
*/
-// import 'zone.js/dist/zone-error'; // Included with Angular CLI.
+// import 'zone.js/plugins/zone-error'; // Included with Angular CLI.
diff --git a/src/src/polyfills.ts b/src/src/polyfills.ts
index 03711e5d..dcd18eac 100644
--- a/src/src/polyfills.ts
+++ b/src/src/polyfills.ts
@@ -18,16 +18,6 @@
* BROWSER POLYFILLS
*/
-/** IE10 and IE11 requires the following for NgClass support on SVG elements */
-// import 'classlist.js'; // Run `npm install --save classlist.js`.
-
-/**
- * Web Animations `@angular/platform-browser/animations`
- * Only required if AnimationBuilder is used within the application and using IE/Edge or Safari.
- * Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0).
- */
-// import 'web-animations-js'; // Run `npm install --save web-animations-js`.
-
/**
* By default, zone.js will patch all possible macroTask and DomEvents
* user can disable parts of macroTask/DomEvents patch by setting following flags
@@ -55,7 +45,7 @@
/***************************************************************************************************
* Zone JS is required by default for Angular itself.
*/
-import 'zone.js/dist/zone'; // Included with Angular CLI.
+import 'zone.js'; // Included with Angular CLI.
/***************************************************************************************************
diff --git a/src/src/styles.scss b/src/src/styles.scss
index e57c5169..2c21e054 100644
--- a/src/src/styles.scss
+++ b/src/src/styles.scss
@@ -1,6 +1,7 @@
// Custom Theming for Angular Material
+@use '@angular/material' as mat;
// For more information: https://material.angular.io/guide/theming
-@import "~@angular/material/theming";
+@import "@angular/material/theming";
// Plus imports for other components in your app.
@import "./styles/app.scss";
@@ -9,20 +10,20 @@
// Include the common styles for Angular Material. We include this here so that you only
// have to load a single css file for Angular Material in your app.
// Be sure that you only ever include this mixin once!
-@include mat-core();
+@include mat.core();
// Define the palettes for your theme using the Material Design palettes available in palette.scss
// (imported above). For each palette, you can optionally specify a default, lighter, and darker
// hue. Available color palettes: https://material.io/design/color/
-$db-primary: mat-palette($mat-indigo);
-$db-accent: mat-palette($mat-pink, A200, A100, A400);
+$db-primary: mat.define-palette(mat.$indigo-palette);
+$db-accent: mat.define-palette(mat.$pink-palette, A200, A100, A400);
// The warn palette is optional (defaults to red).
-$db-warn: mat-palette($mat-red);
+$db-warn: mat.define-palette(mat.$red-palette);
// Create the theme object. A theme consists of configurations for individual
// theming systems such as "color" or "typography".
-$db-theme: mat-light-theme(
+$db-theme: mat.define-light-theme(
(
color: (
primary: $db-primary,
@@ -35,6 +36,6 @@ $db-theme: mat-light-theme(
// Include theme styles for core and each component used in your app.
// Alternatively, you can import and @include the theme mixins for each component
// that you are using.
-@include angular-material-theme($db-theme);
+@include mat.all-component-themes($db-theme);
/* You can add global styles to this file, and also import other style files */
diff --git a/src/src/styles/app.scss b/src/src/styles/app.scss
index 3036e6fb..5013a413 100644
--- a/src/src/styles/app.scss
+++ b/src/src/styles/app.scss
@@ -50,8 +50,8 @@ body {
border-top-right-radius: var(--card-border-radius);
padding-right: 3.2rem;
- > mat-icon {
- font-size: 1.8rem;
+ mat-icon {
+ transform: scale(1.5);
}
span {
@@ -73,24 +73,22 @@ body {
position: absolute !important;
right: 1.5rem;
top: 0.5rem;
- mat-icon {
- font-size: 2.3rem;
- line-height: 2rem !important;
- }
}
.card-actions {
clear: both;
width: 100%;
- height: 3.5rem;
+ height: 3rem;
color: var(--card-color);
background-color: var(--card-actions-background-color);
border-bottom-left-radius: var(--card-border-radius);
border-bottom-right-radius: var(--card-border-radius);
+ padding-top: 10px;
+
mat-icon {
- font-size: 1.7rem;
- line-height: 2.4rem !important;
- }
+ transform: scale(1.2);
+ }
+
}
.card-actions-right {
diff --git a/src/src/test.ts b/src/src/test.ts
index 50193eb0..20423564 100644
--- a/src/src/test.ts
+++ b/src/src/test.ts
@@ -1,6 +1,6 @@
// This file is required by karma.conf.js and loads recursively all the .spec and framework files
-import 'zone.js/dist/zone-testing';
+import 'zone.js/testing';
import { getTestBed } from '@angular/core/testing';
import {
BrowserDynamicTestingModule,
diff --git a/src/tsconfig.app.json b/src/tsconfig.app.json
index 232c3a5c..82d91dc4 100644
--- a/src/tsconfig.app.json
+++ b/src/tsconfig.app.json
@@ -1,6 +1,6 @@
/* To learn more about this file see: https://angular.io/config/tsconfig. */
{
- "extends": "./tsconfig.base.json",
+ "extends": "./tsconfig.json",
"compilerOptions": {
"outDir": "./out-tsc/app",
"types": []
diff --git a/src/tsconfig.base.json b/src/tsconfig.base.json
deleted file mode 100644
index f887c425..00000000
--- a/src/tsconfig.base.json
+++ /dev/null
@@ -1,18 +0,0 @@
-/* To learn more about this file see: https://angular.io/config/tsconfig. */
-{
- "compileOnSave": false,
- "compilerOptions": {
- "baseUrl": "./",
- "outDir": "./dist/out-tsc",
- "sourceMap": true,
- "declaration": false,
- "downlevelIteration": true,
- "emitDecoratorMetadata": true,
- "experimentalDecorators": true,
- "moduleResolution": "node",
- "importHelpers": true,
- "target": "es2015",
- "module": "ESNext",
- "lib": ["es2018", "dom"]
- }
-}
diff --git a/src/tsconfig.json b/src/tsconfig.json
index 2338536e..31b3a4e8 100644
--- a/src/tsconfig.json
+++ b/src/tsconfig.json
@@ -1,17 +1,18 @@
-/*
- This is a "Solution Style" tsconfig.json file, and is used by editors and TypeScript’s language server to improve development experience.
- It is not intended to be used to perform a compilation.
-
- To learn more about this file see: https://angular.io/config/solution-tsconfig.
-*/
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
{
- "files": [],
- "references": [
- {
- "path": "./tsconfig.app.json"
- },
- {
- "path": "./tsconfig.spec.json"
- }
-]
+ "compileOnSave": false,
+ "compilerOptions": {
+ "baseUrl": "./",
+ "outDir": "./dist/out-tsc",
+ "sourceMap": true,
+ "declaration": false,
+ "downlevelIteration": true,
+ "emitDecoratorMetadata": true,
+ "experimentalDecorators": true,
+ "moduleResolution": "node",
+ "importHelpers": true,
+ "target": "es2020",
+ "module": "ESNext",
+ "lib": ["es2018", "dom"]
+ }
}
diff --git a/src/tsconfig.spec.json b/src/tsconfig.spec.json
index 729a6d63..092345b0 100644
--- a/src/tsconfig.spec.json
+++ b/src/tsconfig.spec.json
@@ -1,6 +1,6 @@
/* To learn more about this file see: https://angular.io/config/tsconfig. */
{
- "extends": "./tsconfig.base.json",
+ "extends": "./tsconfig.json",
"compilerOptions": {
"outDir": "./out-tsc/spec",
"types": [
diff --git a/src/tslint.json b/src/tslint.json
deleted file mode 100644
index 5f2e6387..00000000
--- a/src/tslint.json
+++ /dev/null
@@ -1,103 +0,0 @@
-{
- "extends": "tslint:recommended",
- "rules": {
- "align": {
- "options": ["parameters", "statements"]
- },
- "array-type": false,
- "arrow-return-shorthand": true,
- "curly": true,
- "deprecation": {
- "severity": "warning"
- },
- "component-class-suffix": [true, "Page", "Component"],
- "contextual-lifecycle": true,
- "directive-class-suffix": true,
- "directive-selector": [true, "attribute", "app", "camelCase"],
- "component-selector": [true, "element", "app", "kebab-case"],
- "eofline": true,
- "import-blacklist": [true, "rxjs/Rx"],
- "import-spacing": true,
- "indent": {
- "options": ["spaces"]
- },
- "max-classes-per-file": false,
- "member-ordering": [
- true,
- {
- "order": [
- "static-field",
- "instance-field",
- "static-method",
- "instance-method"
- ]
- }
- ],
- "no-console": [true, "debug", "info", "time", "timeEnd", "trace"],
- "no-empty": false,
- "no-inferrable-types": [true, "ignore-params"],
- "no-non-null-assertion": true,
- "no-redundant-jsdoc": true,
- "no-switch-case-fall-through": true,
- "no-var-requires": false,
- "object-literal-key-quotes": [true, "as-needed"],
- "quotemark": [true, "single"],
- "semicolon": {
- "options": ["always"]
- },
- "space-before-function-paren": {
- "options": {
- "anonymous": "never",
- "asyncArrow": "always",
- "constructor": "never",
- "method": "never",
- "named": "never"
- }
- },
- "typedef-whitespace": {
- "options": [
- {
- "call-signature": "nospace",
- "index-signature": "nospace",
- "parameter": "nospace",
- "property-declaration": "nospace",
- "variable-declaration": "nospace"
- },
- {
- "call-signature": "onespace",
- "index-signature": "onespace",
- "parameter": "onespace",
- "property-declaration": "onespace",
- "variable-declaration": "onespace"
- }
- ]
- },
- "variable-name": {
- "options": ["ban-keywords", "check-format", "allow-pascal-case"]
- },
- "whitespace": {
- "options": [
- "check-branch",
- "check-decl",
- "check-operator",
- "check-separator",
- "check-type",
- "check-typecast"
- ]
- },
- "no-conflicting-lifecycle": true,
- "no-host-metadata-property": true,
- "no-input-rename": true,
- "no-inputs-metadata-property": true,
- "no-output-native": true,
- "no-output-on-prefix": false,
- "no-output-rename": true,
- "no-outputs-metadata-property": true,
- "template-banana-in-box": true,
- "template-no-negated-async": true,
- "use-lifecycle-interface": true,
- "use-pipe-transform-interface": true,
- "object-literal-sort-keys": false
- },
- "rulesDirectory": ["codelyzer"]
-}