Add button for removing attachment from post form

This commit is contained in:
silverpill 2022-09-25 23:05:42 +00:00
parent 4469fb85e2
commit a2744288a5
2 changed files with 37 additions and 5 deletions

1
src/assets/feather/x.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="feather feather-x"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>

After

Width:  |  Height:  |  Size: 301 B

View file

@ -16,8 +16,17 @@
required
:placeholder="inReplyTo ? 'Your reply' : 'What\'s on your mind?'"
></textarea>
<div v-if="attachment" class="attachment">
<img :src="attachment.url">
<div v-if="attachment" class="attachments">
<div class="attachment">
<button
class="remove-attachment"
title="Remove attachment"
@click.prevent="removeAttachment()"
>
<img :src="require('@/assets/feather/x.svg')">
</button>
<img :src="attachment.url">
</div>
</div>
<div class="toolbar">
<button
@ -42,7 +51,7 @@
<button
type="button"
class="icon"
title="Post visibility"
title="Change visibility"
@click="toggleVisibilityMenu()"
>
<visibility-icon :visibility="visibility"></visibility-icon>
@ -179,6 +188,10 @@ async function onAttachmentUpload(event: Event) {
)
}
function removeAttachment() {
attachment = null
}
function toggleVisibilityMenu() {
visibilityMenuVisible = !visibilityMenuVisible
}
@ -269,10 +282,28 @@ textarea {
width: 100%;
}
.attachment {
.attachments {
padding: calc($block-inner-padding / 1.5) $block-inner-padding;
}
img {
.attachment {
position: relative;
.remove-attachment {
background-color: $btn-background-color;
display: flex;
position: absolute;
right: 0;
top: 0;
img {
filter: $btn-text-colorizer;
height: $icon-size;
width: $icon-size;
}
}
> img {
width: 100%;
}
}