improve AP resources reply UI
This commit is contained in:
@@ -71,17 +71,23 @@ v-container#event.pa-0.pa-sm-2
|
|||||||
v-dialog(v-model='showResources'
|
v-dialog(v-model='showResources'
|
||||||
fullscreen
|
fullscreen
|
||||||
destroy-on-close
|
destroy-on-close
|
||||||
@keydown.native.right='$refs.carousel.next()'
|
scrollable
|
||||||
@keydown.native.left='$refs.carousel.prev()')
|
transition='dialog-bottom-transition')
|
||||||
v-carousel.pa-5(:interval='10000' ref='carousel' hide-delimiters height='100%' show-arrows-on-over)
|
v-card
|
||||||
|
v-btn.ma-2(icon dark @click='showResources = false')
|
||||||
|
v-icon mdi-close
|
||||||
|
v-carousel.pa-5(:interval='10000' ref='carousel' hide-delimiters v-model='currentAttachment'
|
||||||
|
height='100%' show-arrows-on-over)
|
||||||
v-carousel-item(v-for='attachment in selectedResource.data.attachment'
|
v-carousel-item(v-for='attachment in selectedResource.data.attachment'
|
||||||
v-if='isImg(attachment)'
|
v-if='isImg(attachment)'
|
||||||
:key='attachment.url')
|
:key='attachment.url')
|
||||||
v-img(:src='attachment.url' contain max-width='100%' max-height='100%')
|
v-img(:src='attachment.url' contain max-width='100%' max-height='100%')
|
||||||
|
v-card-actions.align-center.justify-center
|
||||||
|
span {{currentAttachmentLabel}}
|
||||||
|
|
||||||
v-card#resources.mb-1(v-if='settings.enable_resources' v-for='resource in event.resources'
|
v-card.grey.darken-4.mb-3#resources(v-if='settings.enable_resources' v-for='resource in event.resources'
|
||||||
:key='resource.id' :class='{disabled: resource.hidden}')
|
:key='resource.id' :class='{disabled: resource.hidden}' elevation='10' outlined)
|
||||||
v-card-subtitle
|
v-card-title
|
||||||
v-menu(v-if='$auth.user && $auth.user.is_admin' offset-y)
|
v-menu(v-if='$auth.user && $auth.user.is_admin' offset-y)
|
||||||
template(v-slot:activator="{ on }")
|
template(v-slot:activator="{ on }")
|
||||||
v-btn.mr-2(v-on='on' color='primary' small icon)
|
v-btn.mr-2(v-on='on' color='primary' small icon)
|
||||||
@@ -102,10 +108,10 @@ v-container#event.pa-0.pa-sm-2
|
|||||||
v-card-text
|
v-card-text
|
||||||
|
|
||||||
div.mt-1(v-html='resource_filter(resource.data.content)')
|
div.mt-1(v-html='resource_filter(resource.data.content)')
|
||||||
span(v-for='attachment in resource.data.attachment' :key='attachment.url' @click='showResource(resource)')
|
span(v-for='attachment in resource.data.attachment' :key='attachment.url')
|
||||||
audio(v-if='isAudio(attachment)' controls)
|
audio(v-if='isAudio(attachment)' controls)
|
||||||
source(:src='attachment.url')
|
source(:src='attachment.url')
|
||||||
v-img.cursorPointer(v-if='isImg(attachment)' :src='attachment.url'
|
v-img.cursorPointer(v-if='isImg(attachment)' :src='attachment.url' @click='showResource(resource)'
|
||||||
max-height="250px"
|
max-height="250px"
|
||||||
max-width="250px"
|
max-width="250px"
|
||||||
contain :alt='attachment.name')
|
contain :alt='attachment.name')
|
||||||
@@ -127,6 +133,7 @@ v-container#event.pa-0.pa-sm-2
|
|||||||
import { mapState } from 'vuex'
|
import { mapState } from 'vuex'
|
||||||
import EventAdmin from './eventAdmin'
|
import EventAdmin from './eventAdmin'
|
||||||
import EmbedEvent from './embedEvent'
|
import EmbedEvent from './embedEvent'
|
||||||
|
import get from 'lodash/get'
|
||||||
import moment from 'dayjs'
|
import moment from 'dayjs'
|
||||||
const htmlToText = require('html-to-text')
|
const htmlToText = require('html-to-text')
|
||||||
|
|
||||||
@@ -143,6 +150,7 @@ export default {
|
|||||||
},
|
},
|
||||||
data () {
|
data () {
|
||||||
return {
|
return {
|
||||||
|
currentAttachment: 0,
|
||||||
event: {},
|
event: {},
|
||||||
showEmbed: false,
|
showEmbed: false,
|
||||||
showResources: false,
|
showResources: false,
|
||||||
@@ -230,6 +238,9 @@ export default {
|
|||||||
plainDescription () {
|
plainDescription () {
|
||||||
return htmlToText.fromString(this.event.description.replace('\n', '').slice(0, 1000))
|
return htmlToText.fromString(this.event.description.replace('\n', '').slice(0, 1000))
|
||||||
},
|
},
|
||||||
|
currentAttachmentLabel () {
|
||||||
|
return get(this.selectedResource, `data.attachment[${this.currentAttachment}].name`, '')
|
||||||
|
},
|
||||||
imgPath () {
|
imgPath () {
|
||||||
return '/media/' + this.event.image_path
|
return '/media/' + this.event.image_path
|
||||||
},
|
},
|
||||||
|
|||||||
Reference in New Issue
Block a user