Converted notes modal (#20)

src/app/src/App.vue

@@ -52,6 +52,9 @@ body {
   padding-top: 50px;
   margin: 0;
 }
+h1, h2, h3, h4, h5 {
+  font-weight: 500;
+}
 p {
   margin-bottom: 0;
 }
@@ -138,10 +141,51 @@ a:hover {
 }
 .mpj-text-right {
   text-align: right;
-  color: rgba(0, 0, 0, .60);
 }
 .mpj-muted-text {
-  color: rgba(0, 0, 0, .60);
+  color: rgba(0, 0, 0, .6);
+}
+.mpj-narrow {
+  max-width: 40rem;
+  margin: auto;
+}
+.mpj-modal {
+  position: fixed;
+  z-index: 8;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+  background-color: rgba(0, 0, 0, .4);
+}
+.mpj-modal-content {
+  background-color: whitesmoke;
+  border: solid 1px #050;
+  border-radius: .5rem;
+  animation-name: animatetop;
+  animation-duration: 0.4s;
+  padding: 1rem;
+  margin-top: 4rem;
+}
+@keyframes animatetop {
+  from {
+    top: -300px;
+    opacity: 0;
+  }
+  to {
+    top: 0;
+    opacity: 1;
+  }
+}
+.mpj-modal-content header {
+  margin: -1rem -1rem .5rem;
+  border-radius: .4rem;
+}
+.mpj-modal-content header h3 {
+  color: white;
+  margin: 0;
+  padding: 1rem;
 }
 .mpj-margin {
   margin-left: 1rem;

src/app/src/components/request/EditRequest.vue

@@ -1,7 +1,7 @@
 <template lang="pug">
 article.mpj-main-content(role='main')
   page-title(:title='title')
-  form.mpj-edit-request-form
+  .mpj-narrow
     label(for='request_text') Prayer Request
     br
     textarea#request_text(v-model='form.requestText'
@@ -28,14 +28,14 @@ article.mpj-main-content(role='main')
             v-model='form.status')
       label(for='status_answered')= ' Answered'
     br(v-else)
-  div.mpj-edit-request-form.mpj-text-right
+    .mpj-text-right
-    button(@click.stop='saveRequest()').primary
+      button(@click.stop='saveRequest()').primary
-      md-icon(icon='save')
+        md-icon(icon='save')
-      = ' Save'
+        = ' Save'
-    | &nbsp; &nbsp;
+      | &nbsp; &nbsp;
-    button(@click.stop='goBack()')
+      button(@click.stop='goBack()')
-      md-icon(icon='arrow_back')
+        md-icon(icon='arrow_back')
-      = ' Cancel'
+        = ' Cancel'
 </template>
 
 <script>
@@ -122,11 +122,7 @@ export default {
 }
 </script>
 
-<style>
+<style scoped>
-.mpj-edit-request-form {
-  max-width: 40rem;
-  margin: auto;
-}
 #request_text {
   width: 100%;
 }

src/app/src/components/request/NotesEdit.vue

@@ -1,36 +1,33 @@
 <template lang="pug">
-b-modal(v-model='notesVisible'
+.mpj-modal(v-show='notesVisible'
-        header-bg-variant='mpj'
+           @edit='openDialog()')
-        header-text-variant='light'
+  .mpj-modal-content.mpj-narrow
-        size='lg'
+    header.mpj-bg
-        title='Add Notes to Prayer Request'
+      h3 Add Notes to Prayer Request
-        @edit='openDialog()'
+    label(for='notes') Notes
-        @shows='focusNotes')
+    br
-  b-form
+    textarea#notes(v-model='form.notes'
-    b-form-group(label='Notes'
+                   :rows='10'
-                 label-for='notes')
+                   @blur='trimText()')
-      b-textarea#notes(ref='toFocus'
+    .mpj-text-right
-                       v-model='form.notes'
+      button(@click='saveNotes()').primary.
-                       :rows='10'
+        #[md-icon(icon='save')] Save
-                       @blur='trimText()')
+      | &nbsp; &nbsp;
-  div(v-if='hasPriorNotes')
+      button(@click='closeDialog()').
-    p.text-center: strong Prior Notes for This Request
+        #[md-icon(icon='undo')] Cancel
-    b-list-group(flush)
+    hr
-      b-list-group-item(v-for='note in priorNotes'
+    div(v-if='hasPriorNotes')
-                        :key='note.asOf')
+      p.mpj-text-center: strong Prior Notes for This Request
-        small.text-muted: date-from-now(:value='note.asOf')
+      .mpj-note-list
-        br
+        p(v-for='note in priorNotes'
-        div.mpj-request-text {{ note.notes }}
+          :key='note.asOf')
-  div(v-else-if='noPriorNotes').text-center.text-muted There are no prior notes for this request
+          small.mpj-muted-text: date-from-now(:value='note.asOf')
-  div(v-else).text-center
+          br
-    b-btn(variant='outline-secondary'
+          span.mpj-request-text {{ note.notes }}
-          @click='loadNotes()') Load Prior Notes
+    div(v-else-if='noPriorNotes').mpj-text-center.mpj-muted-text There are no prior notes for this request
-  div.w-100.text-right(slot='modal-footer')
+    div(v-else).mpj-text-center
-    b-btn(variant='primary'
+      button(@click='loadNotes()').
-          @click='saveNotes()') Save
+        #[md-icon(icon='cloud_download')] Load Prior Notes
-    | &nbsp; &nbsp;
-    b-btn(variant='outline-secondary'
-          @click='closeDialog()') Cancel
 </template>
 
 <script>
@@ -74,9 +71,6 @@ export default {
       this.priorNotesLoaded = false
       this.notesVisible = false
     },
-    focusNotes (e) {
-      this.$refs.toFocus.focus()
-    },
     async loadNotes () {
       this.$Progress.start()
       try {
@@ -92,9 +86,9 @@ export default {
       }
     },
     openDialog (request) {
+      console.log('Received openDialog event')
       this.form.requestId = request.requestId
       this.notesVisible = true
-      this.focusNotes(null)
     },
     async saveNotes () {
       this.$Progress.start()
@@ -114,3 +108,12 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+#notes {
+  width: 100%;
+}
+.mpj-note-list p {
+  border-top: dotted 1px lightgray;
+}
+</style>