From 4289a1e27a5f8a882255c15f9f3c50895e50db98 Mon Sep 17 00:00:00 2001 From: Ben Visness Date: Sat, 6 Aug 2022 22:32:29 -0500 Subject: [PATCH] Improvements to snippet edit --- public/js/snippetedit.js | 18 ++++++-- public/style.css | 31 +++++++++---- src/rawdata/scss/_core.scss | 4 ++ src/rawdata/scss/_forms.scss | 11 ++++- src/rawdata/scss/themes/dark/_variables.scss | 2 +- src/templates/src/include/snippet_edit.html | 48 +++++++++++++------- 6 files changed, 79 insertions(+), 35 deletions(-) diff --git a/public/js/snippetedit.js b/public/js/snippetedit.js index 3e0fc0b1..896d44ba 100644 --- a/public/js/snippetedit.js +++ b/public/js/snippetedit.js @@ -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 = ""; }); diff --git a/public/style.css b/public/style.css index f91620bd..0c432fbb 100644 --- a/public/style.css +++ b/public/style.css @@ -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; } diff --git a/src/rawdata/scss/_core.scss b/src/rawdata/scss/_core.scss index f4495271..d486bde4 100644 --- a/src/rawdata/scss/_core.scss +++ b/src/rawdata/scss/_core.scss @@ -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; } diff --git a/src/rawdata/scss/_forms.scss b/src/rawdata/scss/_forms.scss index 555e670f..c699a2c0 100644 --- a/src/rawdata/scss/_forms.scss +++ b/src/rawdata/scss/_forms.scss @@ -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'); diff --git a/src/rawdata/scss/themes/dark/_variables.scss b/src/rawdata/scss/themes/dark/_variables.scss index 16044dea..f90fac10 100644 --- a/src/rawdata/scss/themes/dark/_variables.scss +++ b/src/rawdata/scss/themes/dark/_variables.scss @@ -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, diff --git a/src/templates/src/include/snippet_edit.html b/src/templates/src/include/snippet_edit.html index 78822b54..1292af15 100644 --- a/src/templates/src/include/snippet_edit.html +++ b/src/templates/src/include/snippet_edit.html @@ -1,5 +1,15 @@ + +