Skip to content

Commit

Permalink
Bump version to 1.0.5, add sorting options to notes, and enhance styl…
Browse files Browse the repository at this point in the history 
…ing for improved UI
  • Loading branch information
@vorlie
vorlie committed Jan 4, 2025
1 parent be8bfcc commit 2779a64
Show file tree
Hide file tree
Showing 4 changed files with 160 additions and 28 deletions.
14 changes: 11 additions & 3 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,15 +13,23 @@ <h2 class="titlebar-h1" style="app-region: drag;">Iota's Notepad</h2>
<input type="text" class="search-bar" placeholder="Search notes..." oninput="searchNotes(this.value)" style="app-region: no-drag;">
<div class="titlebar-actions" style="app-region: no-drag;">
<button title="Exports a selected note from the modal list" class="button" onclick="openExportModal()">Export</button>
<input type="file" id="importNotesInput" style="display:none" onchange="importNotes(event)">
<button title="Imports a note" class="button" onclick="document.getElementById('importNotesInput').click()">Import</button>
<input type="file" accept=".txt" id="importNotesInput" style="display:none" onchange="importNotes(event)">
<button title="Imports a note" class="button" onclick="document.getElementById('importNotesInput').click()">Import</button>
</div>
</div>
<div class="main-content">
<div class="sidebar">
<div class="sidebar-header">
<h2 class="header-h2">Notes</h2>
<button class="button" onclick="addNote()">New</button>
<div class="sidebar-actions">
<select id="sort-options" class="sort-dropdown">
<option value="dateModified">Date Modified</option>
<option value="dateCreated">Date Created</option>
<option value="alphabetical">Alphabetical</option>
<option value="index">Index</option>
</select>
<button class="button" onclick="addNote()">New</button>
</div>
</div>
<ul class="note-list">
</ul>
Expand Down
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "iotas-notepad",
"version": "1.0.4",
"version": "1.0.5",
"main": "index.js",
"scripts": {
"electron": "electron .",
Expand Down
75 changes: 68 additions & 7 deletions src/globals.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,15 @@
--search-bar-border: 1px solid #6c7086;
--search-bar-bg-color: #45475a;
--search-bar-color: #cdd6f4;
--search-bar-placeholder-color: #a6adc8;

--sort-dropdown-padding: 2px;
--sort-dropdown-margin-right: 2px;
--sort-dropdown-border-radius: 5px;
--sort-dropdown-border: 1px solid #6c7086;
--sort-dropdown-bg-color: #45475a;
--sort-dropdown-color: #cdd6f4;
--sort-dropdown-font-size: 14px;

--main-content-display: flex;
--main-content-flex: 1;
Expand All @@ -34,21 +43,30 @@
--sidebar-bg-color: #1e1e2e;
--sidebar-border-right: 1px solid #45475a;
--sidebar-padding: 10px;
--sidebar-radius: 10px;
--sidebar-radius: 8px;
--sidebar-box-sizing: border-box;
--sidebar-overflow-y: auto;
--sidebar-height: 100%;
--sidebar-button-padding: 3px 6px 3px 6px;

--note-list-padding: 0;
--note-list-margin: 5px;
--note-list-item-margin-right: 3px;
--note-list-item-padding: 10px;
--note-list-item-border-bottom: 1px solid #45475a;
--note-list-item-border: 1px solid #45475a;
--note-list-item-border-selected: 1px solid #6c7086;
--note-list-item-cursor: pointer;
--note-list-item-position: relative;
--note-list-item-hover-bg-color: #45475a;
--note-list-item-selected-bg-color: #313244;
--note-list-item-background-color: #585b70;
--note-list-item-hover-bg-color: #585b70;
--note-list-item-selected-bg-color: #45475a;
--note-list-item-background-color: #313244;

--note-title-font-size: 1em;
--note-title-display: block;
--note-date-font-size: 0.8em;
--note-date-display: block;
--note-date-color: #a6adc8;
--note-date-margin-top: 5px;

--note-actions-display: none;
--note-actions-position: absolute;
Expand Down Expand Up @@ -100,15 +118,16 @@
--modal-close-font-weight: bold;
--modal-close-hover-color: #f38ba8;

--modal-export-item-bg-color: #45475a;
--modal-export-item-bg-color: #313244;
--modal-export-item-color: #cdd6f4;
--modal-export-item-padding: 10px;
--modal-export-item-border-bottom: 1px solid #6c7086;
--modal-export-item-hover-bg-color: #313244;
--modal-export-item-hover-bg-color: #585b70;
--modal-export-item-cursor: pointer;
--modal-export-item-border-radius: 8px;
--modal-export-item-margin-bottom: 5px;
--modal-export-item-margin-right: 3px;
--modal-export-item-border: 1px solid #45475a;
}

body {
Expand Down Expand Up @@ -155,6 +174,10 @@ body {
margin-right: 20px;
}

.search-bar::placeholder {
color: var(--search-bar-placeholder-color);
}

.main-content {
display: var(--main-content-display);
flex: var(--main-content-flex);
Expand All @@ -180,6 +203,28 @@ body {
margin-bottom: 10px;
}

.sort-dropdown {
padding: var(--sort-dropdown-padding);
margin-right: var(--sort-dropdown-margin-right);
border-radius: var(--sort-dropdown-border-radius);
border: var(--sort-dropdown-border);
background-color: var(--sort-dropdown-bg-color);
color: var(--sort-dropdown-color);
font-family: var(--body-font-family);
font-size: var(--sort-dropdown-font-size);
outline: none;
transition: var(--hover-transition);
}

.sort-dropdown:hover {
background-color: var(--button-bg-color-hover);
}

.sort-dropdown option {
background-color: var(--sort-dropdown-bg-color);
color: var(--sort-dropdown-color);
}

.header-h2 {
margin: 0;
}
Expand All @@ -200,6 +245,7 @@ body {
position: var(--note-list-item-position);
margin-bottom: var(--note-list-margin);
transition: var(--hover-transition);
border: var(--note-list-item-border);
margin-right: var(--note-list-item-margin-right);
}

Expand All @@ -209,6 +255,7 @@ body {

.note-list li.selected {
background-color: var(--note-list-item-selected-bg-color);
border: var(--note-list-item-border-selected);
}

.note-actions {
Expand All @@ -223,6 +270,18 @@ body {
display: block;
}

.note-title {
display: var(--note-title-display);
font-size: var(--note-title-font-size);
}

.note-date, .note-modified {
display: var(--note-date-display);
font-size: var(--note-date-font-size);
color: var(--note-date-color);
margin-top: var(--note-date-margin-top);
}

.sidebar-header .button {
margin-right: var(--note-actions-button-margin-right);
background-color: var(--button-bg-color);
Expand All @@ -231,6 +290,7 @@ body {
border-radius: var(--button-border-radius);
border: 1px solid var(--button-border-color);
transition: var(--hover-transition);
padding: var(--sidebar-button-padding);
}

.titlebar-actions .button{
Expand Down Expand Up @@ -388,6 +448,7 @@ body {
border-radius: var(--modal-export-item-border-radius);
transition: var(--hover-transition);
margin-bottom: var(--modal-export-item-margin-bottom);
border: var(--modal-export-item-border);
}

.export-note-item:hover{
Expand Down
97 changes: 80 additions & 17 deletions src/script.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,13 +5,41 @@ document.addEventListener("DOMContentLoaded", () => {
loadNotes();
});

document.getElementById('sort-options').addEventListener('change', loadNotes);

function sortNotes(notes, option) {
switch (option) {
case 'index':
break;
case 'dateCreated':
notes.sort((a, b) => new Date(b.dateCreated) - new Date(a.dateCreated));
break;
case 'dateModified':
notes.sort((a, b) => new Date(b.dateModified) - new Date(a.dateModified));
break;
case 'alphabetical':
notes.sort((a, b) => a.title.localeCompare(b.title));
break;
}
}

function loadNotes() {
const notes = JSON.parse(localStorage.getItem("notes")) || [];
const noteList = document.querySelector(".note-list");
noteList.innerHTML = ""; // Clear current list

// Update existing notes to include dateCreated and dateModified if missing
notes.forEach(note => {
if (!note.dateCreated) note.dateCreated = new Date().toISOString();
if (!note.dateModified) note.dateModified = new Date().toISOString();
});
localStorage.setItem("notes", JSON.stringify(notes));

const sortOption = document.getElementById('sort-options').value;
sortNotes(notes, sortOption);

notes.forEach((note, index) => {
const noteItem = createNoteElement(note, index);
const noteItem = createNoteElement(note, index, sortOption);
noteList.appendChild(noteItem);
});

Expand All @@ -30,12 +58,17 @@ function loadNotes() {

function addNote() {
const notes = JSON.parse(localStorage.getItem("notes")) || [];
const newNote = `Note ${notes.length + 1}`; // Temporary note name
notes.push({ title: newNote, content: "" });
const newNote = {
title: `Note ${notes.length + 1}`, // Temporary note name
content: "",
dateCreated: new Date().toISOString(),
dateModified: new Date().toISOString()
};
notes.push(newNote);
localStorage.setItem("notes", JSON.stringify(notes));

const noteList = document.querySelector(".note-list");
noteList.appendChild(createNoteElement({ title: newNote }, notes.length - 1));
noteList.appendChild(createNoteElement(newNote, notes.length - 1));
}

function deleteNote(index) {
Expand All @@ -60,19 +93,21 @@ function selectNote(element, index) {
// Track content changes
textarea.oninput = () => {
notes[index].content = textarea.value;
notes[index].dateModified = new Date().toISOString(); // Update modification date
status.textContent = "Save status: Unsaved changes...";
clearTimeout(saveTimeout);

saveTimeout = setTimeout(() => {
localStorage.setItem("notes", JSON.stringify(notes));
status.textContent = "Save status: All changes saved";
}, 10000); // Save after 10 second of inactivity
}, 10000); // Save after 10 seconds of inactivity
};

// Save content with Ctrl+S (or Cmd+S)
document.addEventListener("keydown", (e) => {
if ((e.ctrlKey || e.metaKey) && e.key === "s") {
e.preventDefault();
notes[index].dateModified = new Date().toISOString(); // Update modification date
localStorage.setItem("notes", JSON.stringify(notes));
status.textContent = "Save status: All changes saved";
}
Expand Down Expand Up @@ -143,15 +178,19 @@ function importNotes(event) {
const notes = getNotesFromLocalStorage();

Array.from(files).forEach(file => {
const reader = new FileReader();
reader.onload = function(e) {
const content = e.target.result;
const title = file.name.replace('.txt', '');
notes.push({ title, content });
saveNotesToLocalStorage(notes);
loadNotes();
};
reader.readAsText(file);
if (file.type === "text/plain") {
const reader = new FileReader();
reader.onload = function(e) {
const content = e.target.result;
const title = file.name.replace('.txt', '');
notes.push({ title, content });
saveNotesToLocalStorage(notes);
loadNotes();
};
reader.readAsText(file);
} else {
alert("Only .txt files are allowed.");
}
});
}

Expand All @@ -163,11 +202,33 @@ function saveNotesToLocalStorage(notes) {
localStorage.setItem('notes', JSON.stringify(notes));
}

function createNoteElement(note, index) {
function createNoteElement(note, index, sortOption) {
const li = document.createElement("li");
li.textContent = note.title;
li.className = "note-item";
li.onclick = () => selectNote(li, index);

const title = document.createElement("span");
title.className = "note-title";
title.textContent = note.title;

const date = document.createElement("span");
date.className = "note-date";

switch (sortOption) {
case 'index':
date.textContent = `Index: ${index + 1}`;
break;
case 'dateCreated':
date.textContent = `Created: ${new Date(note.dateCreated).toLocaleString()}`;
break;
case 'dateModified':
date.textContent = `Modified: ${new Date(note.dateModified).toLocaleString()}`;
break;
case 'alphabetical':
date.textContent = `Modified: ${new Date(note.dateModified).toLocaleString()}`;
break;
}

const actions = document.createElement("div");
actions.className = "note-actions";

Expand All @@ -177,7 +238,7 @@ function createNoteElement(note, index) {
saveButton.title = "Save note";
saveButton.onclick = (e) => {
e.stopPropagation();
saveNote(index);
saveNote();
};

const editButton = document.createElement("button");
Expand All @@ -201,6 +262,8 @@ function createNoteElement(note, index) {
actions.appendChild(saveButton);
actions.appendChild(editButton);
actions.appendChild(deleteButton);
li.appendChild(title);
li.appendChild(date);
li.appendChild(actions);

return li;
Expand Down

0 comments on commit 2779a64

Please sign in to comment.