Converted notes modal (#20)

This commit is contained in:
Daniel J. Summers 2018-08-18 09:13:38 -05:00
parent e351fe5b56
commit a6144f67ec
3 changed files with 95 additions and 52 deletions

View File

@ -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;

View File

@ -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,7 +28,7 @@ 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
md-icon(icon='save')
= ' Save'
@ -122,11 +122,7 @@ export default {
}
</script>
<style>
.mpj-edit-request-form {
max-width: 40rem;
margin: auto;
}
<style scoped>
#request_text {
width: 100%;
}

View File

@ -1,36 +1,33 @@
<template lang="pug">
b-modal(v-model='notesVisible'
header-bg-variant='mpj'
header-text-variant='light'
size='lg'
title='Add Notes to Prayer Request'
@edit='openDialog()'
@shows='focusNotes')
b-form
b-form-group(label='Notes'
label-for='notes')
b-textarea#notes(ref='toFocus'
v-model='form.notes'
.mpj-modal(v-show='notesVisible'
@edit='openDialog()')
.mpj-modal-content.mpj-narrow
header.mpj-bg
h3 Add Notes to Prayer Request
label(for='notes') Notes
br
textarea#notes(v-model='form.notes'
:rows='10'
@blur='trimText()')
div(v-if='hasPriorNotes')
p.text-center: strong Prior Notes for This Request
b-list-group(flush)
b-list-group-item(v-for='note in priorNotes'
:key='note.asOf')
small.text-muted: date-from-now(:value='note.asOf')
br
div.mpj-request-text {{ note.notes }}
div(v-else-if='noPriorNotes').text-center.text-muted There are no prior notes for this request
div(v-else).text-center
b-btn(variant='outline-secondary'
@click='loadNotes()') Load Prior Notes
div.w-100.text-right(slot='modal-footer')
b-btn(variant='primary'
@click='saveNotes()') Save
.mpj-text-right
button(@click='saveNotes()').primary.
#[md-icon(icon='save')] Save
| &nbsp; &nbsp;
b-btn(variant='outline-secondary'
@click='closeDialog()') Cancel
button(@click='closeDialog()').
#[md-icon(icon='undo')] Cancel
hr
div(v-if='hasPriorNotes')
p.mpj-text-center: strong Prior Notes for This Request
.mpj-note-list
p(v-for='note in priorNotes'
:key='note.asOf')
small.mpj-muted-text: date-from-now(:value='note.asOf')
br
span.mpj-request-text {{ note.notes }}
div(v-else-if='noPriorNotes').mpj-text-center.mpj-muted-text There are no prior notes for this request
div(v-else).mpj-text-center
button(@click='loadNotes()').
#[md-icon(icon='cloud_download')] Load Prior Notes
</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>