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 @@
@@ -83,13 +83,23 @@ v-if="type === 'flash' && flashLoaded" class="button-unstyled attachment-button" @click.prevent="stopFlash" + :title="$t('status.attachment_stop_flash')" > + @@ -97,13 +107,31 @@ v-if="nsfw && hideNsfwLocal" class="button-unstyled attachment-button" @click.prevent="toggleHidden" + :title="$t('status.hide_attachment')" > + + @@ -127,9 +155,11 @@ /> - @@ -145,7 +175,7 @@ class="play-icon" icon="play-circle" /> - +
diff --git a/src/components/gallery/gallery.js b/src/components/gallery/gallery.js index 15436d61b..094b3e570 100644 --- a/src/components/gallery/gallery.js +++ b/src/components/gallery/gallery.js @@ -12,6 +12,8 @@ const Gallery = { 'size', 'editable', 'removeAttachment', + 'shiftUpAttachment', + 'shiftDnAttachment', 'editAttachment', 'grid' ], diff --git a/src/components/gallery/gallery.vue b/src/components/gallery/gallery.vue index 18b94d584..f9cad8a9c 100644 --- a/src/components/gallery/gallery.vue +++ b/src/components/gallery/gallery.vue @@ -6,8 +6,8 @@ >