* fix bug in new note link

* clean up and style the create note modal
* add example of references to note

DynamicBibleIonic/src/components/note-create-modal/note-create-modal.html

@@ -1,24 +1,21 @@
-<ion-header>
-    <ion-toolbar>
-        <ion-title>
-            <ion-icon name="text" item-left></ion-icon> Create a Note
-        </ion-title>
-        <ion-buttons start>
-            <button ion-button (click)="dismiss()" large>
-                <ion-icon name="md-close"></ion-icon>
-            </button>
-        </ion-buttons>
-    </ion-toolbar>
-</ion-header>
-<ion-content padding *ngIf="item !== undefined">
-    <ion-item>
-        <ion-label>Title</ion-label>
-        <ion-input text [(ngModel)]="item.title"></ion-input>
-    </ion-item>
-    <ion-item>
-        <ion-label>Text</ion-label>
-        <br>
-        <ion-textarea [(ngModel)]="item.content"></ion-textarea>
-    </ion-item>
-    <button ion-button (click)="save()">Save</button>
-</ion-content>
+<ion-header>
+    <ion-toolbar>
+        <ion-title> <ion-icon name="text" item-left></ion-icon> Create a Note </ion-title>
+        <ion-buttons start>
+            <button ion-button (click)="dismiss()" large>
+                <ion-icon name="md-close"></ion-icon>
+            </button>
+        </ion-buttons>
+    </ion-toolbar>
+</ion-header>
+<ion-content padding *ngIf="item !== undefined">
+    <ion-item>
+        <ion-input placeholder="Title" text [(ngModel)]="item.title"></ion-input>
+    </ion-item>
+    <ion-item class="note-text">
+        <ion-textarea placeholder="Note Text" [(ngModel)]="item.content"></ion-textarea>
+    </ion-item>
+    <div style="float: right">
+        <button ion-button right (click)="save()">Save</button>
+    </div>
+</ion-content>

DynamicBibleIonic/src/components/note-create-modal/note-create-modal.scss

@@ -1,6 +1,13 @@
-note-create-modal {
-    font-family: var(--card-font);
-    textarea {
-        height: 100px;
-    }
-}
+note-create-modal {
+    font-family: var(--card-font);
+    textarea {
+        height: 100px;
+    }
+}
+
+.note-text {
+    min-height: 370px;
+    textarea {
+        min-height: 370px;
+    }
+}

DynamicBibleIonic/src/components/note/note.html

@@ -1,4 +1,4 @@
-<ion-item class="title note-title" (swipe)="close()">
+<ion-item class="title note-title" (swipe)="close($event)">
     <ion-icon name="clipboard" item-left></ion-icon>
     <span *ngIf="data !== undefined">{{ data.title }}</span>
     <!-- TODO(jwall): Put the crossreference somewhere if it exists. -->
@@ -8,9 +8,22 @@
 </ion-item>
 <ion-card-content>
     <markdown *ngIf="data !== undefined" [data]="data.content"></markdown>
+    <!--
+    <div class="references">
+        <h2>References</h2>
+        <dl>
+            <dd><a (click)="openPassage(p.r)">Psalm 123:4</a></dd>
+            <dd><a (click)="openPassage(p.r)">Psalm 123:4</a></dd>
+        </dl>
+    </div>
+     -->
 </ion-card-content>
 <div style="float: right">
-    <button ion-button icon-start clear (click)="edit()">
+    <button ion-button icon-center clear (click)="edit()">
         <ion-icon name="create"></ion-icon>
     </button>
+
+    <button ion-button icon-center clear (click)="contextMenu()">
+        <ion-icon name="more"></ion-icon>
+    </button>
 </div>

DynamicBibleIonic/src/components/note/note.scss

@@ -5,15 +5,33 @@ note {
     }
 
     font-family: var(--card-font);
+
     markdown {
         padding: 2rem 3rem 0 3rem;
-
         display: block;
-
-        h1 {
+        h1,
+        h2,
+        h3,
+        h4,
+        h5,
+        h6 {
             font-family: 'Roboto Condensed';
         }
     }
+    .references {
+        padding-left: 3rem;
+        padding-bottom: 0;
+
+        h1,
+        h2,
+        h3,
+        h4,
+        h5,
+        h6 {
+            font-family: 'Roboto Condensed';
+            font-size: 2rem;
+        }
+    }
 }
 
 note .button {

DynamicBibleIonic/src/components/note/note.ts

@@ -1,10 +1,13 @@
 import { Component, EventEmitter, Output, Input, OnInit, ElementRef } from '@angular/core';
 import { UUID } from 'angular2-uuid';
-import { ModalController } from 'ionic-angular';
+import { ModalController, ActionSheetController, AlertController } from 'ionic-angular';
 
 import { OpenData, CardItem, SearchPage } from '../../pages/search/search';
 import { NoteItem, NotesService } from '../../services/notes-service';
 import { NoteCreateModal } from '../../components/note-create-modal/note-create-modal';
+import { PagesService } from '../../services/pages-service';
+import { ProfileService } from '../../services/profile-service';
+import { cardContextMenu } from '../../libs/Common';
 
 @Component({
     selector: 'note',
@@ -25,12 +28,25 @@ export class Note implements OnInit {
 
     data: NoteItem | null;
 
-    constructor(private elementRef: ElementRef, private noteService: NotesService, public modalCtrl: ModalController) {
-        this.data = { id: UUID.UUID(), title: 'A note!', xref: null, content: 'Testing 1 2 3' };
+    constructor(
+        private _elementRef: ElementRef,
+        private _noteService: NotesService,
+        public _modalCtrl: ModalController,
+        private _actionSheet: ActionSheetController,
+        private _pagesSvc: PagesService,
+        private _alertCtrl: AlertController,
+        public _profileService: ProfileService
+    ) {
+        this.data = {
+            id: UUID.UUID(),
+            title: 'This is your note title',
+            xref: null,
+            content: 'Replace this with your own content'
+        };
     }
 
     ngOnInit(): void {
-        this.noteService
+        this._noteService
             .getNoteAsPromise(this.cardItem.qry)
             .then(note => {
                 console.log('Got note from service: ', note);
@@ -39,13 +55,17 @@ export class Note implements OnInit {
             .catch(e => console.log(e));
     }
 
+    contextMenu() {
+        cardContextMenu(this._profileService, this._actionSheet, this._pagesSvc, this._alertCtrl, this.cardItem);
+    }
+
     close(ev) {
         let translate = 'translate3d(110%, 0, 0)';
         if (ev != null && ev.direction === 2) {
             translate = 'translate3d(-110%, 0, 0)';
         }
         let d = 250;
-        this.elementRef.nativeElement.parentElement.animate(
+        this._elementRef.nativeElement.parentElement.animate(
             {
                 transform: ['none', translate]
             },
@@ -62,11 +82,11 @@ export class Note implements OnInit {
     }
 
     edit() {
-        const modal = this.modalCtrl.create(NoteCreateModal, { data: this.data });
+        const modal = this._modalCtrl.create(NoteCreateModal, { data: this.data });
         modal.present();
     }
 
     delete() {
-        this.noteService.deleteNote(this.data).catch(err => console.log(err));
+        this._noteService.deleteNote(this.data).catch(err => console.log(err));
     }
 }

DynamicBibleIonic/src/components/passage/passage.scss

@@ -5,11 +5,20 @@ passage {
     }
 
     font-family: var(--card-font);
-
+    h2 {
+        // chapter heading
+        font-size: 2rem !important;
+        font-family: $chapterHeadingFontFamily !important;
+    }
+    h3 {
+        // paragraph heading
+        font-size: 1.6rem !important;
+        font-family: $paragraphHeadingFontFamily !important;
+    }
 }
 
 passage .button {
-    color: #3D5699;
+    color: #3d5699;
 }
 
 .passage-title {
@@ -22,6 +31,6 @@ passage .passage-text {
     margin: auto;
 }
 
-.passage-text+.passage-text {
+.passage-text + .passage-text {
     padding-top: 12px;
-}
+}

DynamicBibleIonic/src/components/settings/settings.ts

@@ -1,41 +1,24 @@
 import { Component } from '@angular/core';
 import { ProfileService } from '../../services/profile-service';
-import { NotesService } from '../../services/notes-service';
 import { SearchPage } from '../../pages/search/search';
 
 @Component({
-  selector: 'settings',
-  templateUrl: 'settings.html'
+    selector: 'settings',
+    templateUrl: 'settings.html'
 })
 export class Settings {
-  constructor(
-    public profileService: ProfileService,
-    public noteService: NotesService,
-    public searchPage: SearchPage,
-    ) {}
+    constructor(public profileService: ProfileService, public searchPage: SearchPage) {}
 
+    textSizeChanged() {
+        this.profileService.textSizeChanged();
+        this.profileService.localSave();
+    }
 
-  textSizeChanged()
-  {
-      this.profileService.textSizeChanged();
-      this.profileService.localSave();
-  }
-
-  fontFamilyChanged()
-  {
-      this.profileService.fontFamilyChanged();
-      this.profileService.localSave();
-  }
-  reset()
-  {
-      this.profileService.reset();
-  }
-
-  newNote() {
-    this.noteService.newNote().then(note => {
-      this.searchPage.updateUIwithItems("note:" + note.id, false)
-      this.profileService.localSave();
-    }).catch(e => console.log(e));
-  }
-
+    fontFamilyChanged() {
+        this.profileService.fontFamilyChanged();
+        this.profileService.localSave();
+    }
+    reset() {
+        this.profileService.reset();
+    }
 }

DynamicBibleIonic/src/pages/search/search.scss

@@ -27,7 +27,8 @@ ion-auto-complete ul {
 
 ion-auto-complete {
     width: 100%;
-    -webkit-box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
+    -webkit-box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2),
+        0 1px 5px 0 rgba(0, 0, 0, 0.12);
     box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
     margin-right: 0.1em;
 }
@@ -60,16 +61,6 @@ body {
 }
 
 .card {
-    h2 {
-        // chapter heading
-        font-size: 2rem;
-        font-family: $chapterHeadingFontFamily;
-    }
-    h3 {
-        // paragraph heading
-        font-size: 1.6rem;
-        font-family: $paragraphHeadingFontFamily;
-    }
     max-width: 800px;
     margin: 12px auto;
 

DynamicBibleIonic/src/pages/search/search.ts

@@ -137,6 +137,15 @@ export class SearchPage implements OnInit {
         this.menu.open('actions');
     }
 
+    newNote() {
+        this.noteService
+            .newNote()
+            .then(note => {
+                this.updateUIwithItems('note:' + note.id, false);
+                this.profileService.localSave();
+            })
+            .catch(e => console.log(e));
+    }
     addPage() {
         const alert = this.alertCtrl.create({
             title: 'Save Search as Page',