change to toast style

This commit is contained in:
Ryan Peters 2023-01-31 09:35:24 -05:00
parent b49d4b2612
commit 0675b567e4
2 changed files with 22 additions and 14 deletions

View File

@ -35,30 +35,38 @@ textarea {
border-width: 0;
}
textarea.dark {
.dark textarea {
background-color: #222;
color: #ddd;
}
.toast {
position: fixed;
bottom: -40px;
bottom: 0;
right: 20px;
font-size: 12px;
padding: 10px;
border-radius: 10px 10px 0 0;
color: #fff;
transition: bottom 0.2s;
transition: opacity 0.4s;
opacity: 0;
}
.toast.show {
bottom: 0;
opacity: 0.8;
}
.dark #saved-indicator {
color: lawngreen;
}
#saved-indicator {
background-color: green;
color: green;
}
.dark #update-indicator {
color: orange;
}
#update-indicator {
background-color: orangered;
color: orangered;
}

View File

@ -3,7 +3,7 @@
.withUrl("/noteHub")
.build();
let start = function () {
function start() {
connection.start().then(function () {
console.log('Started websocket listener');
@ -13,7 +13,7 @@ let start = function () {
});
}
let showToast = function (selector) {
function showToast(selector) {
const cssClass = 'show';
@ -24,7 +24,7 @@ let showToast = function (selector) {
});
}
let saveContent = function ($textarea) {
function saveContent($textarea) {
$textarea = $textarea || $('textarea');
var content = $textarea.val();
@ -42,7 +42,7 @@ start();
$(function () {
let $textarea = $('textarea');
const $textarea = $('textarea');
// update content upon sync save
connection.on('updateNote', function (content) {
@ -52,12 +52,12 @@ $(function () {
// set dark mode
if (window.location.hash == '#dark') {
$textarea.addClass('dark');
$('body').addClass('dark');
}
var timer = null;
let timer = null;
let ignoredKeyCodes = [17, 18, 20, 27, 37, 38, 39, 40, 91];
const ignoredKeyCodes = [17, 18, 20, 27, 37, 38, 39, 40, 91];
// save after a second delay after typing
$textarea.keyup(function (e) {