kevin/hypothetical
1
0
Fork 0
mirror of https://github.com/prurigro/hypothetical.git synced 2024-11-21 15:42:31 -05:00
Code Issues Projects Releases Packages Wiki Activity

Add buttons to image and file uploads on edit-item pages that clear the currently selected upload content

Browse source
This commit is contained in:
Kevin MacMartin 2024-04-10 18:39:48 -04:00
parent 5e8bc06c51
commit 6b2126e5a0
3 changed files with 40 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
resources/js/dashboard.js
View file

@ -324,6 +324,7 @@ function editItemInit() {
$datePickers = $(".date-picker"), $datePickers = $(".date-picker"),
$mkdEditors = $(".mkd-editor"), $mkdEditors = $(".mkd-editor"),
$lists = $(".list"), $lists = $(".list"),
$clearUploadButtons = $(".clear-upload"),
$token = $("#token"), $token = $("#token"),
model = $editItem.data("model"), model = $editItem.data("model"),
operation = $editItem.data("id") === "new" ? "create" : "update"; operation = $editItem.data("id") === "new" ? "create" : "update";
@ -524,6 +525,14 @@ function editItemInit() {
$submit.removeClass("no-input"); $submit.removeClass("no-input");
}; };
// initialize upload clearing buttons
$clearUploadButtons.on("click", function(e) {
const $this = $(this),
$upload = $this.parent().find("input").first();
$upload.val("");
});
// initialize image deletion // initialize image deletion
$(".edit-button.delete.image").on("click", function(e) { $(".edit-button.delete.image").on("click", function(e) {
const $this = $(this), const $this = $(this),

29
resources/sass/dashboard.scss
View file

@ -1175,6 +1175,35 @@ form {
max-width: 100%; max-width: 100%;
font-size: pxrem(14); font-size: pxrem(14);
} }
.clear-upload {
position: relative;
transform: rotate(45deg);
width: pxrem(20);
height: pxrem(20);
padding: 0px;
border: 0;
background-color: transparent;
&:before, &:after {
content: "";
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
background-color: $c-dashboard-error;
}
&:before {
width: 2px;
height: 50%;
}
&:after {
width: 50%;
height: 2px;
}
}
} }
textarea { textarea {

4
resources/views/dashboard/pages/edit-item.blade.php
View file

@ -163,7 +163,7 @@
@endphp @endphp
<div class="upload-wrapper"> <div class="upload-wrapper">
<input class="image-upload" type="file" data-column="{{ $column['name'] }}" data-model="{{ $model }}" data-id="{{ $id }}" /> <input class="image-upload" type="file" data-column="{{ $column['name'] }}" data-model="{{ $model }}" data-id="{{ $id }}" /> <button type="button" class="clear-upload" title="Clear Upload"></button>
</div> </div>
@if(file_exists(base_path() . '/public' . $current_image)) @if(file_exists(base_path() . '/public' . $current_image))
@ -183,7 +183,7 @@
@endphp @endphp
<div class="upload-wrapper"> <div class="upload-wrapper">
<input class="file-upload" type="file" data-column="{{ $column['name'] }}" data-model="{{ $model }}" data-id="{{ $id }}" /> <input class="file-upload" type="file" data-column="{{ $column['name'] }}" data-model="{{ $model }}" data-id="{{ $id }}" /> <button type="button" class="clear-upload" title="Clear Upload"></button>
</div> </div>
@if(file_exists(base_path() . '/public' . $current_file)) @if(file_exists(base_path() . '/public' . $current_file))