Commit 71c4627a authored by Salem Mohammed Shamakh's avatar Salem Mohammed Shamakh
Browse files

Add remove button for social preview

parent c8d82dcf
Pipeline #546491547 passed with stage
in 1 minute and 3 seconds
......@@ -22,9 +22,26 @@
.social-preview .social-preview-button {
position: absolute;
display: flex;
padding: 0;
margin: 15px;
bottom: 0;
background-color: white;
align-items: center;
}
.social-preview .social-preview-button > * {
padding: 7px;
}
.social-preview .social-preview-button .social-preview-remove {
opacity: 0;
transition: opacity .8s;
}
.social-preview .social-preview-button .social-preview-remove.show {
opacity: 1;
transition: opacity .8s;
}
.btn-outline-success:hover {
......
<svg xmlns="http://www.w3.org/2000/svg" height="24" width="24" fill="#198754"><path d="M6.4 19 5 17.6 10.6 12 5 6.4 6.4 5 12 10.6 17.6 5 19 6.4 13.4 12 19 17.6 17.6 19 12 13.4Z"/></svg>
\ No newline at end of file
......@@ -93,6 +93,13 @@ async function init() {
//
this.socialPreview = URL.createObjectURL(file);
},
removeSocialPreview() {
// Remove file from file input
this.$refs.socialPreviewInput.value = "";
// Remove image from app
this.socialPreview = "";
}
};
......
......@@ -172,10 +172,18 @@
for="social-preview"
class="btn btn-outline-success social-preview-button"
>
Upload an image…
<span>Upload an image…</span>
<img
@click.prevent="removeSocialPreview"
src="/static/img/cancel.svg"
class="social-preview-remove"
:class="{ show : socialPreview}"
alt=""
>
</label>
<input
type="file"
ref="socialPreviewInput"
@change="changeSocialPreview"
id="social-preview"
name="social-preview"
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment