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; padding-top: 50px;
margin: 0; margin: 0;
} }
h1, h2, h3, h4, h5 {
font-weight: 500;
}
p { p {
margin-bottom: 0; margin-bottom: 0;
} }
@ -138,10 +141,51 @@ a:hover {
} }
.mpj-text-right { .mpj-text-right {
text-align: right; text-align: right;
color: rgba(0, 0, 0, .60);
} }
.mpj-muted-text { .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 { .mpj-margin {
margin-left: 1rem; margin-left: 1rem;

View File

@ -1,7 +1,7 @@
<template lang="pug"> <template lang="pug">
article.mpj-main-content(role='main') article.mpj-main-content(role='main')
page-title(:title='title') page-title(:title='title')
form.mpj-edit-request-form .mpj-narrow
label(for='request_text') Prayer Request label(for='request_text') Prayer Request
br br
textarea#request_text(v-model='form.requestText' textarea#request_text(v-model='form.requestText'
@ -28,14 +28,14 @@ article.mpj-main-content(role='main')
v-model='form.status') v-model='form.status')
label(for='status_answered')= ' Answered' label(for='status_answered')= ' Answered'
br(v-else) 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> </template>
<script> <script>
@ -122,11 +122,7 @@ export default {
} }
</script> </script>
<style> <style scoped>
.mpj-edit-request-form {
max-width: 40rem;
margin: auto;
}
#request_text { #request_text {
width: 100%; width: 100%;
} }

View File

@ -1,36 +1,33 @@
<template lang="pug"> <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> </template>
<script> <script>
@ -74,9 +71,6 @@ export default {
this.priorNotesLoaded = false this.priorNotesLoaded = false
this.notesVisible = false this.notesVisible = false
}, },
focusNotes (e) {
this.$refs.toFocus.focus()
},
async loadNotes () { async loadNotes () {
this.$Progress.start() this.$Progress.start()
try { try {
@ -92,9 +86,9 @@ export default {
} }
}, },
openDialog (request) { openDialog (request) {
console.log('Received openDialog event')
this.form.requestId = request.requestId this.form.requestId = request.requestId
this.notesVisible = true this.notesVisible = true
this.focusNotes(null)
}, },
async saveNotes () { async saveNotes () {
this.$Progress.start() this.$Progress.start()
@ -114,3 +108,12 @@ export default {
} }
} }
</script> </script>
<style scoped>
#notes {
width: 100%;
}
.mpj-note-list p {
border-top: dotted 1px lightgray;
}
</style>