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>", "author": "Daniel J. Summers <daniel@bitbadger.solutions>",
"private": true, "private": true,
"scripts": { "scripts": {
"serve": "vue-cli-service serve", "serve": "vue-cli-service serve --port 8081",
"build": "vue-cli-service build --modern", "build": "vue-cli-service build --modern",
"lint": "vue-cli-service lint", "lint": "vue-cli-service lint",
"apistart": "cd ../MyPrayerJournal.Api && dotnet run", "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 p navigation here
navigation navigation
p navigation there p navigation there
md-app-drawer(:md-active.sync='menuVisible')
| test
md-app-content md-app-content
router-view router-view
vue-progress-bar vue-progress-bar

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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