diff options
author | Julien Veyssier <eneiluj@posteo.net> | 2022-08-26 12:43:25 +0300 |
---|---|---|
committer | Julien Veyssier <eneiluj@posteo.net> | 2022-09-06 15:44:54 +0300 |
commit | bf9728b6f4e7854e72f2f35eb3de4377d77bba57 (patch) | |
tree | 755ab56c08f4759a05cc75de7d29330857fba589 /src/nodes | |
parent | 4ccc31e6bf3fe76e660274c21ad3eb10aa6ee5be (diff) |
use button for attachment deletion, left align media attachments
Signed-off-by: Julien Veyssier <eneiluj@posteo.net>
Diffstat (limited to 'src/nodes')
-rw-r--r-- | src/nodes/ImageView.vue | 36 |
1 files changed, 28 insertions, 8 deletions
diff --git a/src/nodes/ImageView.vue b/src/nodes/ImageView.vue index 65d0a1790..6176d6024 100644 --- a/src/nodes/ImageView.vue +++ b/src/nodes/ImageView.vue @@ -48,6 +48,16 @@ {{ attachmentMetadata.size }} </span> </div> + <div v-if="editor.isEditable && showIcons" + class="buttons"> + <NcButton :aria-label="t('text', 'Delete this attachment')" + :title="t('text', 'Delete this attachment')" + @click="deleteNode"> + <template #icon> + <DeleteIcon /> + </template> + </NcButton> + </div> </div> <div v-else> <img v-show="loaded" @@ -68,11 +78,15 @@ class="image__caption__input" :value="alt" @keyup.enter="updateAlt"> - <div v-if="editor.isEditable && showIcons" - class="image__caption__delete" - title="Delete this image" - @click="deleteNode"> - <DeleteIcon /> + <div v-if="editor.isEditable && showIcons && !isMediaAttachment" + class="image__caption__delete"> + <NcButton :aria-label="t('text', 'Delete this image')" + :title="t('text', 'Delete this image')" + @click="deleteNode"> + <template #icon> + <DeleteIcon /> + </template> + </NcButton> </div> </div> </transition> @@ -106,6 +120,7 @@ import { generateUrl } from '@nextcloud/router' import { NodeViewWrapper } from '@tiptap/vue-2' import ClickOutside from 'vue-click-outside' import { Image as ImageIcon, Delete as DeleteIcon } from '../components/icons.js' +import NcButton from '@nextcloud/vue/dist/Components/NcButton.js' import store from './../mixins/store.js' import { useAttachmentResolver } from './../components/Editor.provider.js' @@ -143,6 +158,7 @@ export default { components: { ImageIcon, DeleteIcon, + NcButton, NodeViewWrapper, }, directives: { @@ -317,6 +333,7 @@ export default { max-width: 80%; border: none; text-align: center; + color: var(--color-text-maxcontrast); background-color: transparent; } } @@ -345,10 +362,10 @@ export default { .media { display: flex; align-items: center; - justify-content: center; + justify-content: left; img { - width: 40px; - height: 40px; + width: 44px; + height: 44px; } .metadata { margin-left: 8px; @@ -363,6 +380,9 @@ export default { } } } + .buttons { + margin-left: 12px; + } } .image__error-message { |