Improvements to snippet edit
This commit is contained in:
Ben Visness
parent
48490d83a9
commit
4289a1e27a
|
|
@ -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 = "";
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -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; }
|
||||
|
|
|
|||
|
|
@ -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; }
|
||||
|
|
|
|||
|
|
@ -139,8 +139,15 @@ input, select, textarea {
|
|||
}
|
||||
|
||||
#{$buttons} {
|
||||
@extend .ph3;
|
||||
@extend .pv2;
|
||||
&: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');
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -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,31 +20,35 @@
|
|||
<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">✖</a>
|
||||
<a data-tmpl="cancelLink" href="javascript:;" title="Cancel" class="ml2 flex-shrink-0">✖</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" />
|
||||
<input data-tmpl="saveButton" class="flex-grow-0 flex-shrink-0" type="submit" name="action" value="Save" />
|
||||
<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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue