diff options
author | Micah Lee <micah@micahflee.com> | 2020-08-19 20:22:15 -0400 |
---|---|---|
committer | Micah Lee <micah@micahflee.com> | 2020-08-19 20:22:15 -0400 |
commit | dc1588308090120dc228fb982c470b11e7912f05 (patch) | |
tree | 09898b0507636c37ae10bcf9d9e959918e42fe4e /share | |
parent | 9482461a00db0880c1e793182c1e4f8851939a5d (diff) | |
download | onionshare-dc1588308090120dc228fb982c470b11e7912f05.tar.gz onionshare-dc1588308090120dc228fb982c470b11e7912f05.zip |
Remove new message and change username buttons (user just presses enter instead) and update a bunch of css
Diffstat (limited to 'share')
-rw-r--r-- | share/static/css/style.css | 24 | ||||
-rw-r--r-- | share/static/js/chat.js | 14 | ||||
-rw-r--r-- | share/templates/chat.html | 6 |
3 files changed, 23 insertions, 21 deletions
diff --git a/share/static/css/style.css b/share/static/css/style.css index ee3d1760..043dd7d0 100644 --- a/share/static/css/style.css +++ b/share/static/css/style.css @@ -169,6 +169,7 @@ ul.breadcrumbs li a:link, ul.breadcrumbs li a:visited { .chat-container { display: flex; + font-family: monospace; } .chat-users { @@ -177,6 +178,7 @@ ul.breadcrumbs li a:link, ul.breadcrumbs li a:visited { border-radius: 2px; overflow: auto; background: #f2f2f2; + margin: 1rem 0 1rem 1rem; } .chat-users .editable-username { @@ -185,6 +187,11 @@ ul.breadcrumbs li a:link, ul.breadcrumbs li a:visited { flex-direction: column; } +.chat-users .editable-username input { + font-family: monospace; + font-size: 1em; +} + .chat-users #user-list li { margin-bottom: 1em; } @@ -193,8 +200,8 @@ ul.breadcrumbs li a:link, ul.breadcrumbs li a:visited { display: flex; flex-direction: column; flex: 1; - margin: 0 1rem; - height: calc(100vh - (45px + 2em)); + margin: 1rem 1rem 0 1rem; + height: calc(100vh - (65px + 2em)); } .chat-wrapper #chat { @@ -206,6 +213,12 @@ ul.breadcrumbs li a:link, ul.breadcrumbs li a:visited { padding: 0 1rem; } +.chat-wrapper .status { + font-style: italic; + font-size: 0.8em; + color: #666666; +} + .chat-wrapper .username { font-weight: bold; display: block; @@ -217,11 +230,16 @@ ul.breadcrumbs li a:link, ul.breadcrumbs li a:visited { } .chat-wrapper .chat-form { - display: flex; + display: block; + margin: 0.2rem 1rem 1rem 0; + padding: -0.5em; } .chat-wrapper input#new-message { height: 100%; + width: 100%; + font-family: monospace; + font-size: 1em; } @media (max-width: 992px) { diff --git a/share/static/js/chat.js b/share/static/js/chat.js index 95cd5d8a..3425d516 100644 --- a/share/static/js/chat.js +++ b/share/static/js/chat.js @@ -41,27 +41,16 @@ $(function () { emitMessage(socket); } }); - $('#send-button').on('click', function (e) { - emitMessage(socket); - }); // Keep buttons disabled unless changed or not empty $('#username').on('keyup', function (event) { if ($('#username').val() !== '' && $('#username').val() !== current_username) { - $('#update-username').removeAttr('disabled'); if (event.keyCode == 13) { current_username = updateUsername(socket); } - } else { - $('#update-username').attr('disabled', true); } }); - // Update username - $('#update-username').on('click', function () { - current_username = updateUsername(socket); - }); - // Show warning of losing data $(window).on('beforeunload', function (e) { e.preventDefault(); @@ -103,7 +92,6 @@ var updateUsername = function (socket) { }).done(function (response) { console.log(response); }); - $('#update-username').attr('disabled', true); return username; } @@ -138,7 +126,7 @@ var scrollBottomMaybe = function (scrollDiff) { var addStatusMessage = function (message) { $('#chat').append( - `<p><small><i>${sanitizeHTML(message)}</i></small></p>` + `<p class="status">${sanitizeHTML(message)}</p>` ); } diff --git a/share/templates/chat.html b/share/templates/chat.html index 102f1027..474550cd 100644 --- a/share/templates/chat.html +++ b/share/templates/chat.html @@ -24,19 +24,15 @@ <div class="chat-users"> <div class="editable-username"> <input id="username" value="{{ username }}" /> - <button id="update-username" disabled>Set Name</button> </div> <ul id="user-list"> </ul> </div> <div class="chat-wrapper"> - <p class="chat-header">Chat Messages</p> - <div id="chat"></div> <div class="chat-form"> - <p><input type="text" id="new-message" name="new-message" placeholder="Type your message" /></p> - <p><button type="button" id="send-button" class="button">Send Message</button></p> + <input type="text" id="new-message" name="new-message" placeholder="Type your message" /> </div> </div> |