add verse picker

add settings side nav
add copy text

app/db/src/app/app.component.html

@@ -2,10 +2,10 @@
   <mat-sidenav-container class="sidenav-container">
     <mat-sidenav
       #drawer
-      class="sidenav"
       fixedInViewport
+      mode="over"
+      class="sidenav"
       [attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'"
-      [mode]="'over'"
       [opened]="false"
     >
       <mat-toolbar>Pages</mat-toolbar>
@@ -13,8 +13,24 @@
         <a
           *ngFor="let p of mainPages$ | async"
           mat-list-item
-          [routerLink]="['/dashboard']"
+          [routerLink]="['/']"
-          ><mat-icon color="accent">{{ p.icon }}</mat-icon> {{ p.title }}</a
+          ><mat-icon color="accenovert">{{ p.icon }}</mat-icon> {{ p.title }}</a
+        >
+      </mat-nav-list>
+    </mat-sidenav>
+    <mat-sidenav
+      #settings
+      fixedInViewport
+      mode="over"
+      class="sidenav"
+      [attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'"
+      position="end"
+      [opened]="false"
+    >
+      <mat-toolbar>Settings</mat-toolbar>
+      <mat-nav-list>
+        <a mat-list-item [routerLink]="['/']"
+          ><mat-icon color="accenovert">page</mat-icon> Test</a
         >
       </mat-nav-list>
     </mat-sidenav>

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

@@ -28,7 +28,8 @@ export class AppComponent implements AfterViewInit {
       shareReplay()
     );
 
-  @ViewChild(MatSidenav) public sidenav: MatSidenav;
+  @ViewChild('drawer') public sidenav: MatSidenav;
+  @ViewChild('settings') public settings: MatSidenav;
 
   constructor(
     private appService: AppService,
@@ -45,6 +46,6 @@ export class AppComponent implements AfterViewInit {
   }
 
   ngAfterViewInit(): void {
-    this.navService.setSidenav(this.sidenav);
+    this.navService.setSidenav(this.sidenav, this.settings);
   }
 }

app/db/src/app/app.module.ts

@@ -5,10 +5,11 @@ import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
+import { HttpClientModule } from '@angular/common/http';
 
 import { SearchPage } from './search/components/search-page/search.page';
 import { PassageComponent } from './search/components/passage/passage.component';
+import { VersePickerModalComponent } from './search/components/verse-picker/verse-picker-modal.component';
 
 import { MatCheckboxModule } from '@angular/material/checkbox';
 import { MatButtonModule } from '@angular/material/button';
@@ -45,9 +46,15 @@ import { MatBottomSheetModule } from '@angular/material/bottom-sheet';
 import { MatDividerModule } from '@angular/material/divider';
 import { MatNativeDateModule, MatRippleModule } from '@angular/material/core';
 import { MatTreeModule } from '@angular/material/tree';
+import { ClipboardModule } from '@angular/cdk/clipboard';
 
 @NgModule({
-  declarations: [AppComponent, SearchPage, PassageComponent],
+  declarations: [
+    AppComponent,
+    SearchPage,
+    PassageComponent,
+    VersePickerModalComponent,
+  ],
   imports: [
     BrowserModule.withServerTransition({ appId: 'ng-cli-universal' }),
     HttpClientModule,
@@ -93,6 +100,7 @@ import { MatTreeModule } from '@angular/material/tree';
     MatTooltipModule,
     MatTreeModule,
     MatFormFieldModule,
+    ClipboardModule,
   ],
   providers: [],
   bootstrap: [AppComponent],

app/db/src/app/search/components/passage/passage.component.html

@@ -13,7 +13,7 @@
   </button>
 </div>
 <div class="card-content" *ngIf="cardItem">
-  <div class="chapter-text" *ngFor="let ch of cardItem.data.cs">
+  <div class="chapter-text" *ngFor="let ch of cardItem.data.cs" #passage>
     <h2 class="paragraph-heading">Chapter {{ ch.ch }}</h2>
     <ng-container *ngFor="let para of ch.paras">
       <h3

app/db/src/app/search/components/passage/passage.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit, ElementRef } from '@angular/core';
+import { Component, OnInit, ElementRef, ViewChild } from '@angular/core';
 import { BibleReference } from '../../../common/bible-reference';
 import { AppService } from '../../../services/app.service';
 import { CardComponent } from '../../../common/card.component';
@@ -27,6 +27,8 @@ export class PassageComponent extends CardComponent implements OnInit {
     (state) => state.displaySettings.showVerseNumbers
   );
 
+  @ViewChild('passage') passageElement;
+
   constructor(
     protected elementRef: ElementRef,
     private appService: AppService
@@ -38,11 +40,22 @@ export class PassageComponent extends CardComponent implements OnInit {
     this.ref = new BibleReference(this.cardItem.qry);
   }
 
-  contextMenu() {
+  copy() {
-    // cardContextMenu(this.profileService, this._actionSheet, this._pagesSvc, this._alertCtrl, this.cardItem);
+    const html = this.passageElement.nativeElement.innerHTML;
+    const text = this.passageElement.nativeElement.innerText;
+    this.copyToClip(text, html);
   }
 
-  copy() {}
+  copyToClip(text: string, html: string) {
+    function listener(e: ClipboardEvent) {
+      e.clipboardData.setData('text/html', html);
+      e.clipboardData.setData('text/plain', text);
+      e.preventDefault();
+    }
+    document.addEventListener('copy', listener);
+    document.execCommand('copy');
+    document.removeEventListener('copy', listener);
+  }
 
   next() {
     const lastVerseForEnd = this.ref.Section.end.book.chapters[

app/db/src/app/search/components/search-page/search.page.html

@@ -22,6 +22,16 @@
       </mat-option>
     </mat-autocomplete>
   </div>
+  <button type="button" mat-icon-button (click)="launchPicker()">
+    <mat-icon md-48 aria-hidden="false" aria-label="Verse Picker"
+      >bookmarks</mat-icon
+    >
+  </button>
+  <button type="button" mat-icon-button (click)="navService.toggleSettings()">
+    <mat-icon md-48 aria-hidden="false" aria-label="Settings"
+      >settings</mat-icon
+    >
+  </button>
 </mat-toolbar>
 <div class="search-content">
   <ng-template [ngIf]="(cards$ | async).length > 0" [ngIfElse]="nocards">

app/db/src/app/search/components/search-page/search.page.scss

@@ -7,7 +7,8 @@ mat-card {
 .search-bar {
   width: 100%;
   position: relative;
-  margin-left: 12px;
+  margin-left: 0.8rem;
+  margin-right: 0.8rem;
 }
 
 .search-bar-input {
@@ -42,5 +43,6 @@ mat-card {
 }
 
 .search-content {
-  height: calc(100vh - 4rem);
+  height: calc(100vh - 5.5rem);
+  padding: 0 1rem 0 1rem;
 }

app/db/src/app/search/components/search-page/search.page.ts

@@ -7,6 +7,8 @@ import { AppService } from 'src/app/services/app.service';
 import { NavService } from 'src/app/services/nav.service';
 import { OpenData, CardItem } from 'src/app/models/app-state';
 import { BibleReference } from 'src/app/common/bible-reference';
+import { MatDialog } from '@angular/material/dialog';
+import { VersePickerModalComponent } from '../verse-picker/verse-picker-modal.component';
 
 @Component({
   selector: 'app-search-page',
@@ -22,7 +24,8 @@ export class SearchPage implements OnInit {
   constructor(
     private activatedRoute: ActivatedRoute,
     private appService: AppService,
-    public navService: NavService
+    public navService: NavService,
+    public dialog: MatDialog
   ) {}
 
   ngOnInit() {
@@ -42,6 +45,10 @@ export class SearchPage implements OnInit {
     // });
   }
 
+  launchPicker() {
+    this.dialog.open(VersePickerModalComponent);
+  }
+
   //#region Search
 
   getItemsNextToCard(data: OpenData) {}

app/db/src/app/search/components/verse-picker/verse-picker-modal.component.html

@@ -0,0 +1,57 @@
+<div mat-dialog-title>
+  <mat-toolbar>
+    <mat-icon>bookmarks</mat-icon>
+    <div class="title">Verse Picker</div>
+    <span class="close-button">
+      <button
+        mat-icon-button
+        mat-dialog-close
+        aria-label="Exit the verse picker"
+      >
+        <mat-icon>cancel</mat-icon>
+      </button>
+    </span>
+  </mat-toolbar>
+</div>
+<mat-dialog-content>
+  <div>
+    <span *ngIf="hasBook === false">
+      <h2>Old Testament</h2>
+      <div>
+        <span *ngFor="let bk of this.books"
+          ><a
+            class="button"
+            (click)="setBook(bk)"
+            *ngIf="bk.book_number !== 0 && bk.book_number < 40"
+            >{{ bk.short_name }}</a
+          ></span
+        >
+      </div>
+      <h2>New Testament</h2>
+      <div>
+        <span *ngFor="let bk of this.books"
+          ><a
+            class="button"
+            (click)="setBook(bk)"
+            *ngIf="bk.book_number !== 0 && bk.book_number > 39"
+            >{{ bk.short_name }}</a
+          ></span
+        >
+      </div>
+    </span>
+    <span *ngIf="hasBook === true">
+      <button class="backbutton" mat-button (click)="toBooks()">
+        <mat-icon>backspace</mat-icon>
+        Return to Books
+      </button>
+      <h2>{{ book.name }}</h2>
+      <div>
+        <span *ngFor="let bk of book.chapters; index as i"
+          ><a class="button" (click)="setChapter(i)" *ngIf="i !== 0">{{
+            i
+          }}</a></span
+        >
+      </div>
+    </span>
+  </div>
+</mat-dialog-content>

app/db/src/app/search/components/verse-picker/verse-picker-modal.component.scss

@@ -0,0 +1,45 @@
+.button {
+  color: #fff;
+  font-size: 1em;
+  padding: 0.5em;
+  background-color: #1c2e4c;
+  margin: 0.3em;
+  text-align: center;
+  width: 95px;
+  display: inline-block;
+}
+
+.backbutton {
+  width: 100%;
+  font-size: 1.5rem;
+  line-height: 1.5rem;
+  padding: 1rem;
+  margin: 1rem 0 1rem 0;
+
+  mat-icon {
+    line-height: 1.3rem;
+  }
+}
+
+.backbutton:hover:not(.disable-hover) {
+  background-color: var(--passage-color-primary);
+  color: #fff;
+}
+
+h2 {
+  clear: both;
+  margin-top: 1rem;
+}
+
+.close-button {
+  float: right;
+  mat-icon {
+    font-size: 2rem;
+  }
+}
+
+.title {
+  width: 100%;
+  padding-left: 1rem;
+  font-size: 1.5rem;
+}

app/db/src/app/search/components/verse-picker/verse-picker-modal.component.ts

@@ -0,0 +1,38 @@
+import { EventEmitter, Component, Output } from '@angular/core';
+import { BibleReference, Book } from '../../../common/bible-reference';
+import { AppService } from 'src/app/services/app.service';
+import { MatDialogRef } from '@angular/material/dialog';
+
+@Component({
+  selector: 'app-verse-picker',
+  templateUrl: 'verse-picker-modal.component.html',
+  styleUrls: ['./verse-picker-modal.component.scss'],
+})
+export class VersePickerModalComponent {
+  books: Array<Book>;
+  hasBook = false;
+  book: Book;
+
+  constructor(
+    public appService: AppService,
+    public dialogRef: MatDialogRef<VersePickerModalComponent>
+  ) {
+    this.hasBook = false;
+    this.books = BibleReference.Books;
+  }
+
+  toBooks() {
+    this.hasBook = false;
+    this.book = null;
+  }
+
+  setBook(book: Book) {
+    this.hasBook = true;
+    this.book = book;
+  }
+
+  setChapter(chapter: number) {
+    // close the control, trigger the passage event.
+    this.dialogRef.close();
+  }
+}

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

@@ -6,9 +6,11 @@ import { MatSidenav } from '@angular/material/sidenav';
 })
 export class NavService {
   private sidenav: MatSidenav;
+  private settings: MatSidenav;
 
-  public setSidenav(sidenav: MatSidenav) {
+  public setSidenav(sidenav: MatSidenav, settings: MatSidenav) {
     this.sidenav = sidenav;
+    this.settings = settings;
   }
 
   public open() {
@@ -22,4 +24,8 @@ export class NavService {
   public toggle(): void {
     this.sidenav.toggle();
   }
+
+  public toggleSettings(): void {
+    this.settings.toggle();
+  }
 }

app/db/src/styles/app.scss

@@ -100,12 +100,12 @@ a {
 mat-h2,
 .mat-title,
 .mat-typography h2 {
-  font-size: calc(var(--font-size) * 1.7) !important;
+  font-size: calc(var(--font-size) * 1.5) !important;
-  line-height: calc(var(--font-size) * 1.9) !important;
+  line-height: calc(var(--font-size) * 1.7) !important;
 }
 .mat-h3,
 .mat-subheading-2,
 .mat-typography h3 {
-  font-size: calc(var(--font-size) * 1.2) !important;
+  font-size: calc(var(--font-size) * 1.1) !important;
-  line-height: calc(var(--font-size) * 1.4) !important;
+  line-height: calc(var(--font-size) * 1.2) !important;
 }