snapdrop

A Progressive Web App for local file sharing
git clone http://git.hanabi.in/repos/snapdrop.git
Log | Files | Refs | README | LICENSE

commit 54670876008c403842e9597766e1412c2026ac27
parent 68f11f99cf462893b1b730fd97fc693b4c568fd6
Author: montelale <alessioalessio2002@gmail.com>
Date:   Tue, 22 Dec 2020 21:08:39 +0100

Adds new HTML contenteditable div and relative CSS

Diffstat:
Mclient/index.html | 5+++--
Mclient/styles.css | 30++++++++++++++++++++++++++----
2 files changed, 29 insertions(+), 6 deletions(-)

diff --git a/client/index.html b/client/index.html @@ -79,7 +79,7 @@ <div class="font-body2" id="fileSize"></div> <div class="row"> <label for="autoDownload" class="grow">Ask to save each file before downloading</label> - <input type="checkbox" id="autoDownload" checked=""> + <input type="checkbox" id="autoDownload" checked=""> </div> <div class="row-reverse"> <a class="button" close id="download" title="Download File" autofocus>Save</a> @@ -94,7 +94,8 @@ <x-background class="full center"> <x-paper shadow="2"> <h3>Send a Message</h3> - <textarea id="textInput" placeholder="Send a message" autocomplete="off" autofocus></textarea> + <!-- <textarea id="textInput" placeholder="Send a message" autocomplete="off" autofocus></textarea> --> + <div id="textInput" class="textareaElement" role="textbox" placeholder="Send a message" autocomplete="off" autofocus contenteditable></div> <div class="row-reverse"> <button class="button" type="submit" close>Send</button> <a class="button" close>Cancel</a> diff --git a/client/styles.css b/client/styles.css @@ -496,6 +496,24 @@ textarea { background: #f1f3f4; } +.textareaElement { + box-sizing: border-box; + border: none; + outline: none; + padding: 16px 24px; + border-radius: 16px; + margin: 8px 0; + font-size: 14px; + font-family: inherit; + background: #f1f3f4; + display: block; + overflow: auto; + resize: none; + min-height: 40px; + line-height: 16px; + max-height: 300px; +} + /* Info Animation */ @@ -679,8 +697,8 @@ screen and (min-width: 1100px) { } } -/* - Color Themes +/* + Color Themes */ /* Default colors */ @@ -704,6 +722,11 @@ textarea { background-color: var(--input-bg-color); } +.textareaElement { + color: var(--text-color); + background-color: var(--input-bg-color); +} + /* Dark theme colors */ body.dark-theme { --text-color: #eee; @@ -727,4 +750,4 @@ body.dark-theme { --bg-color: #fafafa; --input-bg-color: #f1f3f4; } -} -\ No newline at end of file +}