diff --git a/src/components/attachment/attachment.js b/src/components/attachment/attachment.js index bd4240872..f9c8d9816 100644 --- a/src/components/attachment/attachment.js +++ b/src/components/attachment/attachment.js @@ -15,7 +15,8 @@ import { faStop, faSearchPlus, faTrashAlt, - faPencilAlt + faPencilAlt, + faAlignRight } from '@fortawesome/free-solid-svg-icons' library.add( @@ -28,7 +29,8 @@ library.add( faStop, faSearchPlus, faTrashAlt, - faPencilAlt + faPencilAlt, + faAlignRight ) const Attachment = { @@ -40,6 +42,8 @@ const Attachment = { 'size', 'setMedia', 'remove', + 'shiftUp', + 'shiftDn', 'edit' ], data () { @@ -52,7 +56,8 @@ const Attachment = { img: fileTypeService.fileType(this.attachment.mimetype) === 'image' && document.createElement('img'), modalOpen: false, showHidden: false, - flashLoaded: false + flashLoaded: false, + showDescription: false } }, components: { @@ -118,6 +123,9 @@ const Attachment = { } return modalTypes.includes(this.type) }, + videoTag () { + return this.useModal ? 'button' : 'span' + }, ...mapGetters(['mergedConfig']) }, watch: { @@ -148,12 +156,21 @@ const Attachment = { onRemove () { this.remove && this.remove(this.attachment) }, + onShiftUp () { + this.shiftUp && this.shiftUp(this.attachment) + }, + onShiftDn () { + this.shiftDn && this.shiftDn(this.attachment) + }, stopFlash () { this.$refs.flash.closePlayer() }, setFlashLoaded (event) { this.flashLoaded = event }, + toggleDescription () { + this.showDescription = !this.showDescription + }, toggleHidden (event) { if ( (this.mergedConfig.useOneClickNsfw && !this.showHidden) && diff --git a/src/components/attachment/attachment.scss b/src/components/attachment/attachment.scss index 33e058e79..065c38d2e 100644 --- a/src/components/attachment/attachment.scss +++ b/src/components/attachment/attachment.scss @@ -42,19 +42,10 @@ position: absolute; left: 0; right: 0; - top: 0; + bottom: 0; + padding-top: 0; background: var(--popover); box-shadow: var(--popupShadow); - opacity: 0; - transition: 0.35s all; - transition-timing-function: cubic-bezier(0, 1, 0.5, 1); - } - } - - &:hover { - .description-container.-static { - opacity: 1; - transform: translateY(-3em); } } diff --git a/src/components/attachment/attachment.vue b/src/components/attachment/attachment.vue index 98d9c3ec5..4abf63dd7 100644 --- a/src/components/attachment/attachment.vue +++ b/src/components/attachment/attachment.vue @@ -30,7 +30,7 @@