Add button for removing attachment from post form
This commit is contained in:
parent
4469fb85e2
commit
a2744288a5
2 changed files with 37 additions and 5 deletions
1
src/assets/feather/x.svg
Normal file
1
src/assets/feather/x.svg
Normal 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 |
|
@ -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%;
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue