A little more progress with Vue Material

This commit is contained in:
Daniel J. Summers 2019-08-20 16:59:30 -05:00
parent a652351995
commit e70f88e188
11 changed files with 34 additions and 54 deletions

View File

@ -5,7 +5,7 @@
"author": "Daniel J. Summers <daniel@bitbadger.solutions>",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"serve": "vue-cli-service serve --port 8081",
"build": "vue-cli-service build --modern",
"lint": "vue-cli-service lint",
"apistart": "cd ../MyPrayerJournal.Api && dotnet run",

View File

@ -3,6 +3,8 @@ md-app(md-waterfall md-mode='fixed-last' role='application')
p navigation here
navigation
p navigation there
md-app-drawer(:md-active.sync='menuVisible')
| test
md-app-content
router-view
vue-progress-bar

View File

@ -6,7 +6,7 @@ article.mpj-main-content-wide(role='main')
.mpj-text-center
router-link(:to="{ name: 'EditRequest', params: { id: 'new' } }"
role='button').
#[md-icon(icon='add_box')] Add a New Request
#[md-icon add_box] Add a New Request
br
.mpj-journal(v-if='journal.length > 0')
request-card(v-for='request in journal'

View File

@ -1,15 +0,0 @@
<template lang="pug">
i.material-icons(v-html='icon')
</template>
<script>
export default {
name: 'md-icon',
props: {
icon: {
type: String,
required: true
}
}
}
</script>

View File

@ -1,5 +1,5 @@
<template lang="pug">
md-app-toolbar.md-large.md-dense.md-primary
md-toolbar.md-large.md-dense.md-primary
.md-toolbar-row
.md-toolbar-section-start
| howdy

View File

@ -62,10 +62,10 @@ article.mpj-main-content(role='main')
.mpj-text-right
button(:disabled='!isValidRecurrence'
@click.stop='saveRequest()').primary.
#[md-icon(icon='save')] Save
#[md-icon save] Save
| &nbsp; &nbsp;
button(@click.stop='goBack()').
#[md-icon(icon='arrow_back')] Cancel
#[md-icon arrow_back] Cancel
</template>
<script>

View File

@ -11,10 +11,10 @@
@blur='trimText()').mpj-full-width
.mpj-text-right
button(@click='saveNotes()').primary.
#[md-icon(icon='save')] Save
#[md-icon save] Save
| &nbsp; &nbsp;
button(@click='closeDialog()').
#[md-icon(icon='undo')] Cancel
#[md-icon undo] Cancel
hr
div(v-if='hasPriorNotes')
p.mpj-text-center: strong Prior Notes for This Request
@ -27,7 +27,7 @@
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
#[md-icon cloud_download] Load Prior Notes
</template>
<script>

View File

@ -1,10 +1,10 @@
<template lang="pug">
.mpj-request-card(v-if='shouldDisplay')
header.mpj-card-header(role='toolbar').
#[button(@click='markPrayed()' title='Pray').primary: md-icon(icon='done')]
#[button(@click.stop='showEdit()' title='Edit'): md-icon(icon='edit')]
#[button(@click.stop='showNotes()' title='Add Notes'): md-icon(icon='comment')]
#[button(@click.stop='snooze()' title='Snooze Request'): md-icon(icon='schedule')]
#[button(@click='markPrayed()' title='Pray').primary: md-icon done]
#[button(@click.stop='showEdit()' title='Edit'): md-icon edit]
#[button(@click.stop='showNotes()' title='Add Notes'): md-icon comment]
#[button(@click.stop='snooze()' title='Snooze Request'): md-icon schedule]
div
p.card-text.mpj-request-text
| {{ request.text }}

View File

@ -5,20 +5,20 @@ p.mpj-request-text
br
button(@click='viewFull'
title='View Full Request').
#[md-icon(icon='description')] View Full Request
#[md-icon description] View Full Request
| &nbsp; &nbsp;
template(v-if='!isAnswered')
button(@click='editRequest'
title='Edit Request').
#[md-icon(icon='edit')] Edit Request
#[md-icon edit] Edit Request
| &nbsp; &nbsp;
template(v-if='isSnoozed')
button(@click='cancelSnooze()').
#[md-icon(icon='restore')] Cancel Snooze
#[md-icon restore] Cancel Snooze
| &nbsp; &nbsp;
template(v-if='isPending')
button(@click='showNow()').
#[md-icon(icon='restore')] Show Now
#[md-icon restore] Show Now
br(v-if='isSnoozed || isPending || isAnswered')
small(v-if='isSnoozed').mpj-muted-text: em.
&nbsp; Snooze expires #[date-from-now(:value='request.snoozedUntil')]

View File

@ -13,10 +13,10 @@
.mpj-text-right
button.primary(:disabled='!isValid'
@click='snoozeRequest()').
#[md-icon(icon='snooze')] Snooze
#[md-icon snooze] Snooze
| &nbsp; &nbsp;
button(@click='closeDialog()').
#[md-icon(icon='undo')] Cancel
#[md-icon undo] Cancel
</template>
<script>

View File

@ -1,21 +1,21 @@
// Vue packages and components
import Vue from 'vue'
// eslint-disable-next-line
// import { MdApp, MdContent, MdProgress, MdSnackbar, MdTabs, MdToolbar } from 'vue-material/dist/components'
import { VueMaterial } from 'vue-material/dist/components'
import VueMaterial from 'vue-material'
import VueProgressBar from 'vue-progressbar'
import VueToast from 'vue-toast'
import 'vue-material/dist/vue-material.min.css'
import 'vue-material/dist/theme/default.css'
import 'vue-toast/dist/vue-toast.min.css'
// myPrayerJournal components
import App from './App'
import router from './router'
import store from './store'
import DateFromNow from './components/common/DateFromNow'
import MaterialDesignIcon from './components/common/MaterialDesignIcon'
import PageTitle from './components/common/PageTitle'
// Styles
import 'vue-material/dist/vue-material.min.css'
import 'vue-material/dist/theme/default.css'
import 'vue-toast/dist/vue-toast.min.css'
Vue.config.productionTip = false
Vue.use(VueProgressBar, {
@ -29,15 +29,8 @@ Vue.use(VueProgressBar, {
}
})
// Vue.use(MdApp)
// Vue.use(MdContent)
// Vue.use(MdProgress)
// Vue.use(MdSnackbar)
// Vue.use(MdTabs)
// Vue.use(MdToolbar)
Vue.use(VueMaterial)
Vue.component('date-from-now', DateFromNow)
Vue.component('md-icon', MaterialDesignIcon)
Vue.component('page-title', PageTitle)
Vue.component('toast', VueToast)