diff --git a/src/components/attachment/attachment.js b/src/components/attachment/attachment.js index b2ba1655..fea7c6f8 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 = { @@ -52,7 +54,8 @@ const Attachment = { img: fileTypeService.fileType(this.attachment.mimetype) === 'image' && document.createElement('img'), modalOpen: false, showHidden: false, - flashLoaded: false + flashLoaded: false, + showDescription: false } }, components: { @@ -157,6 +160,9 @@ const Attachment = { 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 33e058e7..065c38d2 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 8a1c31c7..82a72a8d 100644 --- a/src/components/attachment/attachment.vue +++ b/src/components/attachment/attachment.vue @@ -86,6 +86,14 @@ > <FAIcon icon="stop" /> </button> + <button + v-if="attachment.description && size !== 'small' && !edit" + class="button-unstyled attachment-button" + @click.prevent="toggleDescription" + :title="$t('status.show_attachment_description')" + > + <FAIcon icon="align-right" /> + </button> <button v-if="!useModal" class="button-unstyled attachment-button"