sprechtl/PomeloNote
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Added colors

Browse source 
Click on X now has an alert if you really want to delete the note
Date is displayed under the note title
clicking on note working and displaying content
This commit is contained in:
dhain 2022-09-25 22:37:08 +02:00
parent 395a9dc2e8
commit 79891ff9e7
4 changed files with 120 additions and 33 deletions
Download patch file Download diff file Expand all files Collapse all files

13
frontend/svelte/package-lock.json generated
View file

@ -7,6 +7,9 @@
"": { "": {
"name": "svelte", "name": "svelte",
"version": "0.0.1", "version": "0.0.1",
"dependencies": {
"bootstrap-icons": "^1.9.1"
},
"devDependencies": { "devDependencies": {
"@sveltejs/adapter-auto": "next", "@sveltejs/adapter-auto": "next",
"@sveltejs/kit": "next", "@sveltejs/kit": "next",
@ -436,6 +439,11 @@
"file-uri-to-path": "1.0.0" "file-uri-to-path": "1.0.0"
} }
}, },
"node_modules/bootstrap-icons": {
"version": "1.9.1",
"resolved": "https://registry.npmjs.org/bootstrap-icons/-/bootstrap-icons-1.9.1.tgz",
"integrity": "sha512-d4ZkO30MIkAhQ2nNRJqKXJVEQorALGbLWTuRxyCTJF96lRIV6imcgMehWGJUiJMJhglN0o2tqLIeDnMdiQEE9g=="
},
"node_modules/brace-expansion": { "node_modules/brace-expansion": {
"version": "1.1.11", "version": "1.1.11",
"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz", "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
@ -2677,6 +2685,11 @@
"file-uri-to-path": "1.0.0" "file-uri-to-path": "1.0.0"
} }
}, },
"bootstrap-icons": {
"version": "1.9.1",
"resolved": "https://registry.npmjs.org/bootstrap-icons/-/bootstrap-icons-1.9.1.tgz",
"integrity": "sha512-d4ZkO30MIkAhQ2nNRJqKXJVEQorALGbLWTuRxyCTJF96lRIV6imcgMehWGJUiJMJhglN0o2tqLIeDnMdiQEE9g=="
},
"brace-expansion": { "brace-expansion": {
"version": "1.1.11", "version": "1.1.11",
"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz", "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",

130
frontend/svelte/src/routes/+page.svelte
View file

@ -17,8 +17,11 @@
notes = notes.filter(i => i === i); notes = notes.filter(i => i === i);
} }
function sortNotesByDate(){ /**
notes.sort(function(x, y) { * Sorts the "notes" Array by the lastOpened Property of a Note
*/
function sortNotesByDate() {
notes.sort(function (x, y) {
if (x.lastOpened > y.lastOpened) { if (x.lastOpened > y.lastOpened) {
return 1; return 1;
} }
@ -64,6 +67,17 @@
notes.push(note); notes.push(note);
} }
/**
* Gives the user a prompt if they are sure to delete this note and deletes it if they confirm
* @param note The note to be removed
*/
function removeNotePrompt(note) {
const reallyDelete = confirm("Do you really want to delete this Note?");
if (reallyDelete) {
removeNote(note);
}
}
/** /**
* Removes the note from the "notes" Array * Removes the note from the "notes" Array
* @param note The note to be removed * @param note The note to be removed
@ -71,57 +85,97 @@
function removeNote(note) { function removeNote(note) {
notes = notes.filter(i => i !== note); notes = notes.filter(i => i !== note);
} }
/**
* Handle when the mouse hovers over a Note List Element
* @param noteId The ID of the note that is hovered over
*/
function handleMouseOverLi(noteId: number) {
document.getElementById("noteButton" + noteId).style.display = "block";
}
/**
* Handle when the mouse exits hovering over a Note List Element
* @param noteId The ID of the note that is hovered over
*/
function handleMouseOutLi(noteId: number) {
document.getElementById("noteButton" + noteId).style.display = "none";
}
/**
* Handles a click on a note list element
* @param note The note the user clicked on
*/
function onNoteLiClick(note) {
window.localStorage.setItem("clickedNoteId", note.id);
window.location = "/editor";
}
</script> </script>
<html lang="en">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<title>PomeloNote | Home</title> <title>PomeloNote | Home</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.3.0/font/bootstrap-icons.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css" rel="stylesheet" <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous"> integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
</head> </head>
<html lang="en"> <body>
<!-- Add Note Button --> <div class="row">
<!-- &#10133; is a Thiccc Plus UTF-8 Character --> <!-- Add Note Button -->
<div class="offset-8 col-1"> <div class="offset-md-7 col-md-1">
<button on:click={() => addNotePrompt()}>&#10133;</button> <button class="btn btn-primary" on:click={() => addNotePrompt()}>Add Note</button>
</div> </div>
<div class="offset-4 col-4"> <div class="offset-md-4 col-md-4">
<!-- Notes listing --> <!-- Notes listing -->
<ul> <ul>
{#each notes as note} {#each notes as note}
<li> <li on:mouseover={() => handleMouseOverLi(note.id)}
<span> on:mouseout={() => handleMouseOutLi(note.id)}>
<a href="/editor" on:click={() => window.localStorage.setItem("clickedNoteId", note.id)}> <div class="row">
{note.title} <div class="col-md-10" on:click={() => onNoteLiClick(note)}>
</a> <span>
</span> {note.title} <br/>
<!-- &#128465; is a Trashcan UTF-8 Character --> {note.lastOpened}
<button on:click={() => removeNote(note)}>&#128465;</button> </span>
</li> </div>
{/each} <div class="col-md-1">
</ul> <button style="display: none" id={"noteButton" + note.id}
on:click={() => removeNotePrompt(note)}>
<i class="bi bi-x"></i>
</button>
</div>
</div>
</li>
{/each}
</ul>
</div>
</div> </div>
</body>
</html> </html>
<style> <style>
html, html,
:root { :root {
--main-txt-color: black; --main-txt-color: black;
--cross-txt-color: red;
--color-primary: #fff494;
--color-primary-600: #fff17a;
--color-primary-700: #ffec47;
--color-primary-800: #ffe714;
--color-primary-900: #e0c900;
} }
body { body {
height: 100%; height: 100%;
}
body {
display: flex;
align-items: center;
padding-top: 40px; padding-top: 40px;
padding-bottom: 40px; padding-bottom: 40px;
background-color: #f5f5f5; background-color: #ffffff;
} }
a { a {
@ -133,6 +187,8 @@
list-style: none; list-style: none;
padding: 6px 10px; padding: 6px 10px;
border-bottom: 1px solid #ddd; border-bottom: 1px solid #ddd;
border-bottom-color: var(--color-primary-900);
background-color: var(--color-primary-600);
} }
li button { li button {
@ -156,4 +212,20 @@
ul { ul {
padding-left: 0; padding-left: 0;
} }
.bi-x {
color: var(--cross-txt-color);
}
.btn-primary {
background-color: var(--color-primary-800);
border: var(--color-primary-800);
color: var(--main-txt-color);
}
.btn-primary:hover {
background-color: var(--color-primary-900);
border: var(--color-primary-900);
color: var(--main-txt-color);
}
</style> </style>

1
frontend/svelte/src/routes/editor/+layout.js
View file

@ -1 +0,0 @@
// export const ssr = false;

9
frontend/svelte/src/routes/editor/+page.svelte
View file

@ -3,19 +3,22 @@
let notes: Note[] = JSON.parse(window.localStorage.getItem("notes")); let notes: Note[] = JSON.parse(window.localStorage.getItem("notes"));
const clickedNoteId = window.localStorage.getItem("clickedNoteId"); const clickedNoteId = window.localStorage.getItem("clickedNoteId");
const currNote = notes.find((note)=>{
return note.id === parseInt(clickedNoteId);
});
</script> </script>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<title>{"Pomelonote | Edit " + notes[clickedNoteId].title}</title> <title>{"Pomelonote | Edit " + currNote.title}</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css" rel="stylesheet" <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous"> integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
</head> </head>
<html lang="en"> <html lang="en">
<div class="offset-3 col-6"> <div class="offset-3 col-6">
samc samg ccocooc {notes[clickedNoteId].content} {currNote.content}
</div> </div>
</html> </html>