Improvements to snippet edit

This commit is contained in:
Ben Visness 2022-08-06 22:32:29 -05:00
parent 48490d83a9
commit 4289a1e27a
6 changed files with 79 additions and 35 deletions

View File

@ -204,15 +204,15 @@ function makeSnippetEdit(ownerName, ownerAvatar, ownerUrl, date, text, attachmen
if (el) {
snippetEdit.uploadBox.style.display = "none";
snippetEdit.previewBox.style.display = "block";
snippetEdit.uploadResetLink.style.display = "none";
snippetEdit.uploadResetBox.style.display = "none";
snippetEdit.previewContent = emptyElement(snippetEdit.previewContent);
snippetEdit.previewContent.appendChild(el);
snippetEdit.resetLink.style.display = (!originalAttachment || el == originalAttachment) ? "none" : "inline-block";
} else {
snippetEdit.uploadBox.style.display = "flex";
snippetEdit.uploadBox.style.display = "block";
snippetEdit.previewBox.style.display = "none";
if (originalAttachment) {
snippetEdit.uploadResetLink.style.display = "block";
snippetEdit.uploadResetBox.style.display = "block";
}
}
}
@ -222,7 +222,7 @@ function makeSnippetEdit(ownerName, ownerAvatar, ownerUrl, date, text, attachmen
if (snippetEdit.file.files.length > 0 && snippetEdit.file.files[0].size > maxFilesize) {
// NOTE(asaf): Writing this out in bytes to make the limit exactly clear to the user.
let readableSize = new Intl.NumberFormat([], { useGrouping: "always" }).format(maxFilesize);
snippetEdit.errors.textContent = "File is too big! Max filesize is " + readableSize + " bytes";
snippetEdit.errors.textContent = "File is too big! Max filesize is " + readableSize + " bytes.";
sizeGood = false;
} else {
snippetEdit.errors.textContent = "";
@ -279,7 +279,10 @@ function makeSnippetEdit(ownerName, ownerAvatar, ownerUrl, date, text, attachmen
snippetEdit.root.addEventListener("dragenter", function(ev) {
enterCounter++;
if (ev.dataTransfer && ev.dataTransfer.files && ev.dataTransfer.files.length > 0) {
let droppable = Array.from(ev.dataTransfer.items).some(
item => item.kind.toLowerCase() === "file"
);
if (droppable) {
snippetEdit.root.classList.add("drop");
}
});
@ -348,6 +351,11 @@ function makeSnippetEdit(ownerName, ownerAvatar, ownerUrl, date, text, attachmen
});
snippetEdit.deleteButton.addEventListener("click", function(ev) {
if (!window.confirm("Are you sure you want to delete this snippet?")) {
ev.preventDefault();
return;
}
snippetEdit.file.value = "";
});

View File

@ -4703,15 +4703,19 @@ code, .code {
.optionbar .options button,
.optionbar .options .button,
.optionbar .options input[type=button],
.optionbar .options input[type=submit], .post-content th, .post-content td {
.optionbar .options input[type=submit], .post-content th, .post-content td,
button.button-small,
.button.button-small,
input.button-small[type=button],
input.button-small[type=submit] {
padding-top: 0.25rem;
padding-bottom: 0.25rem; }
.pv2, .tab-bar .tab-button,
button,
.button,
input[type=button],
input[type=submit], .notice {
button:not(.button-small),
.button:not(.button-small),
input[type=button]:not(.button-small),
input[type=submit]:not(.button-small), .notice {
padding-top: 0.5rem;
padding-bottom: 0.5rem; }
@ -4747,15 +4751,19 @@ input[type=submit], .notice {
.optionbar .options button,
.optionbar .options .button,
.optionbar .options input[type=button],
.optionbar .options input[type=submit], .pagination .button, .post-content th, .post-content td {
.optionbar .options input[type=submit], .pagination .button, .post-content th, .post-content td,
button.button-small,
.button.button-small,
input.button-small[type=button],
input.button-small[type=submit] {
padding-left: 0.5rem;
padding-right: 0.5rem; }
.ph3, .tab-bar .tab-button,
button,
.button,
input[type=button],
input[type=submit], .notice {
button:not(.button-small),
.button:not(.button-small),
input[type=button]:not(.button-small),
input[type=submit]:not(.button-small), .notice {
padding-left: 1rem;
padding-right: 1rem; }
@ -7521,6 +7529,9 @@ article code {
.g5 {
gap: 4rem; }
.hide-if-empty:empty {
display: none !important; }
@media screen and (min-width: 30em) {
.bi-avoid-ns {
break-inside: avoid; }

View File

@ -364,6 +364,10 @@ article code {
.g4 { gap: $spacing-large; }
.g5 { gap: $spacing-extra-large; }
.hide-if-empty:empty {
display: none !important;
}
@media #{$breakpoint-not-small} {
.bi-avoid-ns { break-inside: avoid; }
.cc-auto-ns { column-count: auto; }

View File

@ -139,8 +139,15 @@ input, select, textarea {
}
#{$buttons} {
&:not(.button-small) {
@extend .ph3;
@extend .pv2;
}
&.button-small {
@extend .ph2;
@extend .pv1;
}
@include usevar('color', 'form-button-color');
@include usevar('background-color', 'form-button-background');

View File

@ -3,7 +3,7 @@ $fg-font-color: #eee;
$vars: (
fg-font-color: $fg-font-color,
// Default theme colors in case the assets.css is busted
// Default theme colors in case the project.css is busted
theme-color: #666,
theme-color-dim: #444,
theme-color-dimmer: #383838,

View File

@ -1,5 +1,15 @@
<style>
.upload-box {
border-style: dashed;
}
.snippet-edit-root.drop .upload-box {
border-color: var(--theme-color);
}
</style>
<template id="snippet-edit">
<form data-tmpl="root" class="timeline-item pa3 mb2 br3" method="POST" action="{{ .SnippetEdit.SubmitUrl }}" enctype="multipart/form-data">
<form data-tmpl="root" class="snippet-edit-root timeline-item pa3 mb2 br3" method="POST" action="{{ .SnippetEdit.SubmitUrl }}" enctype="multipart/form-data">
{{ csrftoken .Session }}
<input data-tmpl="redirect" type="hidden" name="redirect" />
<input data-tmpl="snippetId" type="hidden" name="snippet_id" />
@ -10,32 +20,36 @@
<a data-tmpl="username" class="flex-shrink-0"></a>
<div class="spacer flex-grow-1"></div>
<span data-tmpl="date" class="flex-shrink-0">Date</span>
<a data-tmpl="cancelLink" href="javascript:;" class="ml2 flex-shrink-0">&#10006;</a>
<a data-tmpl="cancelLink" href="javascript:;" title="Cancel" class="ml2 flex-shrink-0">&#10006;</a>
</div>
<textarea data-tmpl="text" placeholder="Description and/or links" class="w-100 h4 mt3" name="text"></textarea>
<div class="mv3">
<div data-tmpl="uploadBox" class="placeholder flex flex-column items-center">
<img src="" class="db w4 h4"/>
<a data-tmpl="uploadResetLink" class="mt3 dn" href="javascript:;">Restore</a>
<a data-tmpl="uploadLink" class="mt3" href="javascript:;">Upload image, video, or other file</a>
<div data-tmpl="uploadBox">
<a data-tmpl="uploadLink" class="upload-box flex flex-column items-center pa4 b--dimmest br3 mw6" href="javascript:;">
Upload image, video, or other file
</a>
<div data-tmpl="uploadResetBox" class="mt2 dn">
<a data-tmpl="uploadResetLink" class="button button-small" href="javascript:;">Restore</a>
</div>
</div>
<div data-tmpl="previewBox" class="preview dn">
<div class="actions">
<a data-tmpl="removeLink" href="javascript:;">Remove</a>
<a data-tmpl="resetLink" href="javascript:;">Restore</a>
<a data-tmpl="replaceLink" href="javascript:;">Replace</a>
</div>
<div data-tmpl="previewContent">
</div>
<div class="actions mt2">
<a data-tmpl="removeLink" class="button button-small" href="javascript:;">Remove</a>
<a data-tmpl="resetLink" class="button button-small" href="javascript:;">Restore</a>
<a data-tmpl="replaceLink" class="button button-small" href="javascript:;">Replace</a>
</div>
<div data-tmpl="errors" class="mt2 hide-if-empty"></div>
</div>
</div>
<div data-tmpl="projectList" class="flex flex-wrap g2"></div>
<div class="flex items-center">
<div data-tmpl="errors"></div>
<div class="flex-grow-1"></div>
<input data-tmpl="deleteButton" class="flex-grow-0 flex-shrink-0 mr3" type="submit" name="action" value="Delete" />
<div class="flex">
<div data-tmpl="projectList" class="flex-grow-1 flex flex-wrap g2"></div>
<div class="flex-shrink-0 flex">
<input data-tmpl="deleteButton" class="flex-grow-0 flex-shrink-0 mr2" type="submit" name="action" value="Delete" />
<input data-tmpl="saveButton" class="flex-grow-0 flex-shrink-0" type="submit" name="action" value="Save" />
</div>
</div>
</form>
</template>
<template id="snippet-edit-project">