Appearance updates

+ Improved scroll bar look
+ Implemented a preview mode
This commit is contained in:
Daniel Legt 2022-06-01 16:58:09 +03:00
parent aea10baffd
commit 6177dcecb8
3 changed files with 114 additions and 7 deletions

View File

@ -35,6 +35,29 @@ main#main-card {
right: .5rem; right: .5rem;
} }
.hidden {
display: none !important;
}
#pad-content-area {
position: relative;
display: flex;
flex-flow: column;
}
#pad-content-toggler {
position: absolute;
top: .5rem;
right: .5rem;
user-select: none;
}
#textarea-preview {
max-height: calc(20rem + 30vh);
overflow: auto;
}
textarea:focus, textarea:focus,
input[type="text"]:focus, input[type="text"]:focus,
@ -56,3 +79,27 @@ input[type="color"]:focus,
box-shadow: none; box-shadow: none;
outline: 0 none; outline: 0 none;
} }
/* ===== Scrollbar CSS ===== */
/* Firefox */
* {
scrollbar-width: thin;
scrollbar-color: #3b3b3b #ffffff00;
}
/* Chrome, Edge, and Safari */
*::-webkit-scrollbar {
width: 7px;
height: 7px;
}
*::-webkit-scrollbar-track {
background: #ffffff00;
}
*::-webkit-scrollbar-thumb {
background-color: #3b3b3b;
border-radius: 2px;
border: 1px solid #ffffff00;
}

View File

@ -16,6 +16,11 @@ function sendMyData(el) {
el.setAttribute(`readonly`, `1`); el.setAttribute(`readonly`, `1`);
const textareaPreview = document.getElementById(`textarea-preview`)
if ( !!textareaPreview ) {
textareaPreview.textContent = el.value;
}
formData.set("content", el.value); formData.set("content", el.value);
updateStatus(`Attempting to save...`, `text-warning`); updateStatus(`Attempting to save...`, `text-warning`);
@ -184,11 +189,39 @@ function generateQRCode() {
MicroModal.show(`qrmodal`) MicroModal.show(`qrmodal`)
} }
document.addEventListener(`DOMContentLoaded`, e => { function toggleTextareaPreview() {
setTextareaPreview( !document.getElementById(`pad-content-toggler`).classList.contains(`read-only`) )
}
{ // Textarea Focusing // t == true - Read Only
const textarea = document.getElementById(`pad-content`); // t == false - Edit mode
function setTextareaPreview( t = true ) {
const prev = document.getElementById(`textarea-preview`)
const textarea = document.getElementById(`pad-content`);
const toggler = document.getElementById(`pad-content-toggler`);
const togglerEdit = toggler.querySelector(`.edit-content-text`);
const togglerView = toggler.querySelector(`.view-content-text`);
if ( t ) {
// Toggle read only
prev.classList.remove(`hidden`)
toggler.classList.add(`read-only`);
togglerEdit.classList.remove(`hidden`);
togglerView.classList.add(`hidden`);
textarea.classList.add(`hidden`);
} else {
// Toggle edit mode
prev.classList.add(`hidden`)
toggler.classList.remove(`read-only`);
togglerEdit.classList.add(`hidden`);
togglerView.classList.remove(`hidden`);
textarea.classList.remove(`hidden`);
// Focus // Focus
textarea.focus(); textarea.focus();
// Scroll // Scroll
@ -197,6 +230,15 @@ document.addEventListener(`DOMContentLoaded`, e => {
textarea.setSelectionRange(textarea.value.length, textarea.value.length); textarea.setSelectionRange(textarea.value.length, textarea.value.length);
} }
}
document.addEventListener(`DOMContentLoaded`, e => {
{ // Textarea Handling
const textarea = document.getElementById(`pad-content`);
setTextareaPreview( !!textarea.value );
}
{ // Archives { // Archives
renderArchivesSelection() renderArchivesSelection()
} }

View File

@ -35,9 +35,27 @@
<h2 class="mb-4">{{.title}}</h2> <h2 class="mb-4">{{.title}}</h2>
<textarea maxlength="{{.maximumPadSize}}" name="pad-content" id="pad-content" onchange="sendMyData(this)" <div id="pad-content-area">
onkeydown="updateStatus(`Not Saved`, `text-warning`); toggleWritingWatch(this)" <div class="btn-sm btn" id="pad-content-toggler" onclick="toggleTextareaPreview()">
class="form-control">{{.post_content}}</textarea> <span class="edit-content-text" title="Edit Content">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-pencil" viewBox="0 0 16 16">
<path d="M12.146.146a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1 0 .708l-10 10a.5.5 0 0 1-.168.11l-5 2a.5.5 0 0 1-.65-.65l2-5a.5.5 0 0 1 .11-.168l10-10zM11.207 2.5 13.5 4.793 14.793 3.5 12.5 1.207 11.207 2.5zm1.586 3L10.5 3.207 4 9.707V10h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.293l6.5-6.5zm-9.761 5.175-.106.106-1.528 3.821 3.821-1.528.106-.106A.5.5 0 0 1 5 12.5V12h-.5a.5.5 0 0 1-.5-.5V11h-.5a.5.5 0 0 1-.468-.325z"/>
</svg>
</span>
<span class="view-content-text hidden" title="ReadOnly">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-eyeglasses" viewBox="0 0 16 16">
<path d="M4 6a2 2 0 1 1 0 4 2 2 0 0 1 0-4zm2.625.547a3 3 0 0 0-5.584.953H.5a.5.5 0 0 0 0 1h.541A3 3 0 0 0 7 8a1 1 0 0 1 2 0 3 3 0 0 0 5.959.5h.541a.5.5 0 0 0 0-1h-.541a3 3 0 0 0-5.584-.953A1.993 1.993 0 0 0 8 6c-.532 0-1.016.208-1.375.547zM14 8a2 2 0 1 1-4 0 2 2 0 0 1 4 0z"/>
</svg>
</span>
</div>
<pre id="textarea-preview" class="form-control hidden">{{.post_content}}</pre>
<textarea maxlength="{{.maximumPadSize}}" name="pad-content" id="pad-content" onchange="sendMyData(this)"
onkeydown="updateStatus(`Not Saved`, `text-warning`); toggleWritingWatch(this)"
class="form-control hidden">{{.post_content}}</textarea>
</div>
<div id="pad-status" class="my-4 row"> <div id="pad-status" class="my-4 row">
<div class="col-md-12 col-lg-4 col-xl-4" title="Status"> <div class="col-md-12 col-lg-4 col-xl-4" title="Status">