Redesign UI, allow hiding checked items
This commit is contained in:
parent
0b6c571c6a
commit
d68cdfd8a2
|
|
@ -3,7 +3,7 @@ body {
|
|||
color: #000000;
|
||||
background-color: #ffffff;
|
||||
padding: 10px 10px;
|
||||
line-height:1.25;
|
||||
line-height: 1.25;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4 {
|
||||
|
|
@ -24,6 +24,7 @@ button, input[type="submit"] {
|
|||
background-color: white;
|
||||
border: 1px solid black;
|
||||
padding: 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
textarea {
|
||||
|
|
@ -41,7 +42,8 @@ input[type="text"], textarea {
|
|||
ul {
|
||||
margin-top: 0;
|
||||
margin-bottom: 10px;
|
||||
margin-left: 0; padding-left: 19px;
|
||||
margin-left: 0;
|
||||
padding-left: 19px;
|
||||
}
|
||||
|
||||
ul, li {
|
||||
|
|
|
|||
|
|
@ -8,6 +8,7 @@ var NoteMode = "view";
|
|||
var NoteTitle = "";
|
||||
var NoteBody = "";
|
||||
var NoteCheckbox = 0;
|
||||
var NoteHideChecked = true;
|
||||
|
||||
var markdownRenderer = new marked.Renderer();
|
||||
markdownRenderer.checkbox = function (chkd) {
|
||||
|
|
@ -210,6 +211,11 @@ function failedToCheckItem(item) {
|
|||
alert('Failed to ' + (checked ? 'check' : 'uncheck') + ' ' + $('#chk_' + item).closest('li').text().trim());
|
||||
}
|
||||
|
||||
function toggleHideCheckboxes() {
|
||||
NoteHideChecked = !NoteHideChecked;
|
||||
render();
|
||||
}
|
||||
|
||||
function render() {
|
||||
NoteTitle = "";
|
||||
NoteBody = "";
|
||||
|
|
@ -230,59 +236,79 @@ function render() {
|
|||
|
||||
NoteBody += '<ul style="margin-left: 7px;">';
|
||||
for (var nid in Notebooks[nbid].Notes) {
|
||||
NoteBody += '<li onclick="viewNote(\'' + nbid + '\', \'' + nid + '\')"><h2 style="font-weight: bold;"><a href="#" class="internal">' + Notebooks[nbid].Notes[nid].Label + '</a></h2></li>';
|
||||
NoteBody += '<li onclick="viewNote(\'' + nbid + '\', \'' + nid + '\')"><h2><a href="#" class="internal">' + Notebooks[nbid].Notes[nid].Label + '</a></h2></li>';
|
||||
}
|
||||
NoteBody += '<li onclick="editNote(\'' + Notebooks[nbid].ID + '\', \'\')" style="list-style: none;"><h2><a href="#" class="internal">+ New</a></h2></li>';
|
||||
NoteBody += '</ul>';
|
||||
}
|
||||
} else {
|
||||
note = Notebooks[ViewNotebook].Notes[ViewNote];
|
||||
NoteBody += "";
|
||||
|
||||
var BackNotebook = '';
|
||||
var BackNote = '';
|
||||
var BackLabel = 'Notebooks';
|
||||
if (NoteMode === "edit" && ViewNote !== '') {
|
||||
BackNotebook = ViewNotebook;
|
||||
BackNote = ViewNote;
|
||||
BackLabel = 'Cancel';
|
||||
}
|
||||
NoteBody += '<div style="margin-bottom: 7px;"><button onclick="viewNote(\'' + BackNotebook + '\', \'' + BackNote + '\')">' + BackLabel + '</button> <div style="float: right;">';
|
||||
|
||||
if (NoteMode === "view") {
|
||||
NoteBody += '<div style="width: 100%;margin-bottom: 7px;"><button onclick="viewNote(\'\', \'\')" style="width: 48%;"><-- Back</button><div style="display: inline-block;width: 4%;overflow: hidden;"> </div><button onclick="editNote(\'' + ViewNotebook + '\', \'' + ViewNote + '\')" style="width: 48%;">Edit</button></div>';
|
||||
if (note) {
|
||||
toggleHideChecked = 'Show';
|
||||
if (!NoteHideChecked) {
|
||||
toggleHideChecked = 'Hide';
|
||||
}
|
||||
NoteBody += '<button onclick="toggleHideCheckboxes()">' + toggleHideChecked + ' ☑</button> ';
|
||||
}
|
||||
NoteBody += '<button onclick="editNote(\'' + ViewNotebook + '\', \'' + ViewNote + '\')">Edit</button>';
|
||||
} else {
|
||||
var BackViewNotebook = ViewNote !== '' ? ViewNotebook : '';
|
||||
var BackViewNote = ViewNote !== '' ? ViewNote : '';
|
||||
NoteBody += '<div style="width: 100%;margin-bottom: 7px;"><button onclick="viewNote(\'' + BackViewNotebook + '\', \'' + BackViewNote + '\')" style="width: 48%;"><-- Back</button><div style="display: inline-block;width: 4%;overflow: hidden;"> </div><button onclick="saveNote(\'' + ViewNotebook + '\', \'' + ViewNote + '\')" style="width: 48%;">Save</button></div>';
|
||||
|
||||
if (ViewNote === '') {
|
||||
NoteBody += '<div style="width: 100%;margin-top: 14px;margin-bottom: 14px;"><input type="text" id="editNoteTitle" placeholder="Title" style="border: 1px dashed #333333;font-size: 1.25em;padding: 7px;width: 100%;box-sizing: border-box;"></div>';
|
||||
if (note) {
|
||||
NoteBody += '<button onclick="return confirm(\'Are you sure you want to delete ' + note.Label + '?\')?deleteNote(\'' + ViewNotebook + '\', \'' + ViewNote + '\'):false;">Delete note</button> ';
|
||||
}
|
||||
NoteBody += '<button onclick="saveNote(\'' + ViewNotebook + '\', \'' + ViewNote + '\')">Save</button>';
|
||||
}
|
||||
NoteBody += '</div></div>';
|
||||
|
||||
if (note) {
|
||||
NoteTitle = note.Label;
|
||||
NoteBody += '<div style="margin-bottom: 7px;">';
|
||||
if (NoteMode === "view") {
|
||||
NoteBody += '<h2>' + note.Label + '</h2>';
|
||||
} else {
|
||||
NoteBody += '<input type="text" id="editNoteTitle" placeholder="Title" style="border: 1px dashed #333333;font-size: 1.25em;padding: 7px;width: 100%;box-sizing: border-box;">';
|
||||
}
|
||||
NoteBody += '</div>';
|
||||
|
||||
if (NoteMode === "view" && note) {
|
||||
modified = new Date(Notebooks[ViewNotebook].ModifiedAt * 1000);
|
||||
|
||||
NoteBody += '<div style="width: 100%;margin-bottom: 7px;"> <small>' + modified.getFullYear() + '/' + (modified.getMonth() + 1) + '/' + modified.getDate() + ' ' + ('0' + modified.getHours()).slice(-2) + ':' + ('0' + modified.getMinutes()).slice(-2) + ' · ' + Notebooks[ViewNotebook].ModifiedBy + '</small></div>';
|
||||
|
||||
if (NoteMode === "view") {
|
||||
NoteBody += marked(note.Body, {renderer: markdownRenderer});
|
||||
}
|
||||
} else if (NoteMode === "edit" && ViewNote === '') {
|
||||
NoteTitle = "New Note";
|
||||
NoteBody += '<div style="margin-bottom: 7px;"><small> ' + modified.getFullYear() + '/' + (modified.getMonth() + 1) + '/' + modified.getDate() + ' ' + ('0' + modified.getHours()).slice(-2) + ':' + ('0' + modified.getMinutes()).slice(-2) + ' · ' + Notebooks[ViewNotebook].ModifiedBy + '</small></div>';
|
||||
}
|
||||
|
||||
|
||||
if (NoteMode === "edit") {
|
||||
if (note && NoteMode === "view") {
|
||||
NoteBody += marked(note.Body, {renderer: markdownRenderer});
|
||||
} else if (NoteMode === "edit") {
|
||||
NoteBody += '<textarea id="editNoteBody" placeholder="Text"></textarea>';
|
||||
|
||||
if (ViewNote !== "") {
|
||||
NoteBody += '<br><br> <a href="#" class="internal" onclick="return confirm(\'Are you sure you want to delete ' + note.Label + '?\')?deleteNote(\'' + ViewNotebook + '\', \'' + ViewNote + '\'):false;">Delete note</a>';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (NoteTitle == "") {
|
||||
$("#note-title").hide();
|
||||
} else {
|
||||
$("#note-title").html(NoteTitle).show();
|
||||
}
|
||||
$("#note-body").html(NoteBody);
|
||||
if (NoteMode === "view") {
|
||||
if (ViewNote !== "" && NoteHideChecked) {
|
||||
$('#note-body').html($('#note-body').html() + '<hr><ul id="hiddenItems"></ul>');
|
||||
$('#note-body').find('input[type=checkbox]:checked').each(function () {
|
||||
var closestLi = $(this).closest('li');
|
||||
if (!closestLi) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (NoteMode === "edit") {
|
||||
if (closestLi.find('ul').find('input[type=checkbox]:not(:checked)').length > 0) {
|
||||
return;
|
||||
}
|
||||
|
||||
closestLi.appendTo("#hiddenItems");
|
||||
});
|
||||
}
|
||||
} else {
|
||||
if (note) {
|
||||
$('#editNoteBody').val(note.Body);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -14,29 +14,25 @@
|
|||
<link rel="manifest" href="/manifest.json">
|
||||
</head>
|
||||
<body>
|
||||
<h2 id="note-title" style="display: none;"></h2><div id="status" style="display: none;"><small>Synchronizing...</small></div>
|
||||
<div id="note-body">Loading...</div>
|
||||
<script type="text/javascript">
|
||||
const e = 'Sorry, service worker (a feature found in most browsers, try Firefox) is not supported by your device.';
|
||||
const e = 'Sorry, service worker (a feature found in most browsers, try Firefox) is not supported by your device.';
|
||||
|
||||
$(function() {
|
||||
if ('serviceWorker' in navigator) {
|
||||
console.log('Service worker is supported by this device. Registering...');
|
||||
$(function () {
|
||||
if ('serviceWorker' in navigator) {
|
||||
console.log('Service worker is supported by this device. Registering...');
|
||||
|
||||
navigator.serviceWorker.register('/assets/stick-sw.js').then(function () {
|
||||
document.getElementById("note-title").innerHTML = "Notes";
|
||||
navigator.serviceWorker.register('/assets/stick-sw.js').then(function () {
|
||||
console.log('Service worker registered');
|
||||
RunStick(window.location.hash.substr(1));
|
||||
});
|
||||
} else {
|
||||
document.getElementById("note-body").innerHTML = e;
|
||||
|
||||
console.log('Service worker registered');
|
||||
RunStick(window.location.hash.substr(1));
|
||||
});
|
||||
} else {
|
||||
document.getElementById("note-title").innerHTML = "Error";
|
||||
document.getElementById("note-body").innerHTML = e;
|
||||
|
||||
alert(e);
|
||||
console.log(e);
|
||||
}
|
||||
});
|
||||
alert(e);
|
||||
console.log(e);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
Loading…
Reference in New Issue