v-card.editor-modal-media.animated.fadeInLeft(flat, tile)
v-container.pa-3(grid-list-lg, fluid)
v-layout(row, wrap)
v-flex(xs9)
v-card.radius-7.animated.fadeInLeft.wait-p1s(light)
v-card-text
.d-flex
v-toolbar.radius-7(color='teal lighten-5', dense, flat, height='44')
.body-2.teal--text Images
v-btn.ml-3.my-0.radius-7(outline, large, color='teal', disabled)
v-icon(left) keyboard_arrow_up
span Parent Folder
v-btn.my-0.mr-0.radius-7(outline, large, color='teal')
v-icon(left) add
span New Folder
v-list.mt-3(dense, two-line)
template(v-for='(asset, idx) of assets')
v-list-tile(@click='')
v-list-tile-avatar
v-avatar.radius-7(color='teal')
v-icon(dark) image
v-list-tile-content
v-list-tile-title {{asset.filename}}
v-list-tile-sub-title 1024x768
v-list-tile-action
.caption {{asset.updatedAt | moment('from')}}
v-divider.mx-3(vertical)
v-list-tile-action(style='flex-basis: 80px;')
.caption {{asset.fileSize | prettyBytes}}
v-divider.mx-3(vertical)
v-list-tile-action(style='flex-basis: 60px;')
v-chip.teal--text(label, small, color='teal lighten-5') {{asset.ext.toUpperCase().substring(1)}}
v-list-tile-action
v-menu(offset-x)
v-btn(icon, slot='activator')
v-icon(color='grey darken-2') more_horiz
v-list.py-0
v-list-tile
v-list-tile-avatar
v-icon(color='teal') short_text
v-list-tile-content Properties
v-divider
v-list-tile
v-list-tile-avatar
v-icon(color='indigo') crop_rotate
v-list-tile-content Edit
v-divider
v-list-tile
v-list-tile-avatar
v-icon(color='blue') keyboard
v-list-tile-content Rename / Move
v-divider
v-list-tile
v-list-tile-avatar
v-icon(color='red') delete
v-list-tile-content Delete
v-divider(v-if='idx < assets.length - 1')
.d-flex.mt-3
v-toolbar.radius-7(flat, color='grey lighten-4', dense, height='44')
.body-2 / #[em root]
v-spacer
.body-1.grey--text.text--darken-1 10 files
v-btn.ml-3.mr-0.my-0.radius-7(color='teal', large, @click='insert', disabled)
v-icon(left) save_alt
span Insert
v-flex(xs3)
v-card.radius-7.animated.fadeInRight.wait-p3s(light)
v-card-text
.d-flex
v-toolbar.radius-7(color='teal lighten-5', dense, flat, height='44')
v-icon.mr-3(color='teal') cloud_upload
.body-2.teal--text Upload Images
v-btn.my-0.ml-3.mr-0.radius-7(outline, large, color='teal', @click='browse')
v-icon(left) touch_app
span Browse
file-pond.mt-3(
name='mediaUpload'
ref='pond'
label-idle='Browse or Drop files here...'
allow-multiple='true'
:accepted-file-types='[`image/jpeg`, `image/png`, `image/gif`, `image/svg`]'
:files='files'
max-files='10'
server='/u'
:instant-upload='false'
:allow-revert='false'
@processfile='onFileProcessed'
)
v-divider
v-card-actions.pa-3
.caption.grey--text.text-darken-2 Max 10 files, 5 MB each
v-spacer
v-btn(color='teal', dark, @click='upload') Upload
v-card.mt-3.radius-7.animated.fadeInRight.wait-p4s(light)
v-card-text.pb-0
v-toolbar.radius-7(color='teal lighten-5', dense, flat)
v-icon.mr-3(color='teal') cloud_download
.body-2.teal--text Fetch Remote Image
v-text-field.mt-3(
v-model='remoteImageUrl'
outline
single-line
background-color='grey lighten-2'
placeholder='https://example.com/image.jpg'
)
v-divider
v-card-actions.pa-3
.caption.grey--text.text-darken-2 Max 5 MB
v-spacer
v-btn(color='teal', dark) Fetch
v-card.mt-3.radius-7.animated.fadeInRight.wait-p4s(light)
v-card-text.pb-0
v-toolbar.radius-7(color='teal lighten-5', dense, flat)
v-icon.mr-3(color='teal') format_align_left
.body-2.teal--text Alignment
v-select.mt-3(
v-model='imageAlignment'
:items='imageAlignments'
outline
single-line
background-color='grey lighten-2'
placeholder='None'
)