catto
/
snotes-deck
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 4 Wiki Activity

reorder elements

This commit is contained in:
catto 2024-04-13 17:32:40 +02:00
parent 0d853db108
commit b4f58c84d6
3 changed files with 95 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
index.html
View File

@ -19,30 +19,33 @@
</head> </head>
<body> <body>
<div class="top-bar">
<h1>Snotes Deck</h1>
<div id="button-row">
<button class="row" id="show-notes-button">Refresh Notes</button>
<button type="submit" id="save-button">Save</button>
</div>
</div>
<div class="container"> <div class="container">
<h1>Snotes Deck Test</h1> <div class="sidebar">
<div class="note-sidebar-container" id="note-sidebar-container">
<!--
<form class="row" id="create-form"> <span class="sidebar-note-id">1</span>
<input id="create-input" placeholder="Note..." /> <span class="sidebar-note-content">Lorem ipsum dolor sit amet...</span>
<span class="sidebar-note-tag">Tag</span>
-->
</div>
</div>
<div class="editor">
<input id="create-tag" placeholder="Tag..." /> <input id="create-tag" placeholder="Tag..." />
<button type="submit">Save</button> <textarea id="create-input" placeholder="Note..." ></textarea>
</form>
<p id="create-msg"></p> <p id="create-msg"></p>
<button class="row" id="show-notes-button">Refresh Notes</button>
<p style="white-space: pre-line" id="notes-list"></p> <p style="white-space: pre-line" id="notes-list"></p>
</div> </div>
<div class="sidebar">
<div class="note-sidebar-container" id="note-sidebar-container">
<!--
<span class="sidebar-note-id">1</span>
<span class="sidebar-note-content">Lorem ipsum dolor sit amet...</span>
<span class="sidebar-note-tag">Tag</span>
-->
</div>
</body> </body>
</html> </html>

22
src/main.ts
View File

@ -5,7 +5,7 @@ import { Note } from "./model";
let notesMsgEl: HTMLElement | null; let notesMsgEl: HTMLElement | null;
//let createMsgEl: HTMLElement | null; //let createMsgEl: HTMLElement | null;
let createNoteContentEl: HTMLInputElement | null; let createNoteContentEl: HTMLTextAreaElement | null;
let createNoteTagEl: HTMLInputElement | null; let createNoteTagEl: HTMLInputElement | null;
let noteSidebarContainerEl: HTMLDivElement | null; let noteSidebarContainerEl: HTMLDivElement | null;
@ -25,9 +25,9 @@ async function createNote() {
// read // read
async function showNotes() { async function showNotes() {
if (notesMsgEl) { if (notesMsgEl) {
const notesJson: string = await invoke("get_notes_list"); //const notesJson: string = await invoke("get_notes_list");
const formattedJson = JSON.stringify(JSON.parse(notesJson), null, 2); // Indentation of 2 spaces //const formattedJson = JSON.stringify(JSON.parse(notesJson), null, 2); // Indentation of 2 spaces
notesMsgEl.textContent = formattedJson; //notesMsgEl.textContent = formattedJson;
const array: Array<any> = await retrieveNotes(); const array: Array<any> = await retrieveNotes();
@ -82,7 +82,7 @@ window.addEventListener("DOMContentLoaded", () => {
// createMsgEl = document.querySelector("#create-msg"); // createMsgEl = document.querySelector("#create-msg");
notesMsgEl = document.querySelector("#notes-list"); notesMsgEl = document.querySelector("#notes-list");
showNotes(); showNotes();
document.querySelector("#create-form")?.addEventListener("submit", (e) => { document.querySelector("#save-button")?.addEventListener("click", (e) => {
e.preventDefault(); e.preventDefault();
createNote(); createNote();
showNotes(); showNotes();
@ -99,10 +99,14 @@ function fillNoteSidebar(noteArray: Note[]) {
noteSidebarContainerEl = document.querySelector("#note-sidebar-container"); noteSidebarContainerEl = document.querySelector("#note-sidebar-container");
if (noteSidebarContainerEl) { if (noteSidebarContainerEl) {
// clear previously existing elements
noteSidebarContainerEl.innerHTML = "";
noteArray.forEach((note) => { noteArray.forEach((note) => {
// Create HTML elements for each note // Create HTML elements for each note
const noteEl: HTMLDivElement = document.createElement('div'); const noteEl: HTMLDivElement = document.createElement('div');
noteEl.classList.add('sidebar-note'); noteEl.classList.add('sidebar-note');
noteEl.addEventListener("click", () => handleSidebarNoteClick(note.id), false);
const idSpan: HTMLSpanElement = document.createElement('span'); const idSpan: HTMLSpanElement = document.createElement('span');
idSpan.classList.add('sidebar-note-id'); idSpan.classList.add('sidebar-note-id');
@ -110,7 +114,9 @@ function fillNoteSidebar(noteArray: Note[]) {
const contentSpan: HTMLSpanElement = document.createElement('span'); const contentSpan: HTMLSpanElement = document.createElement('span');
contentSpan.classList.add('sidebar-note-content'); contentSpan.classList.add('sidebar-note-content');
contentSpan.textContent = note.content.substring(0, 20);
// Show ... when text is too long
contentSpan.textContent = note.content.length > 20 ? note.content.substring(0, 20) + "..." : note.content as string;
contentSpan.title = note.content as string; contentSpan.title = note.content as string;
const tagSpan: HTMLSpanElement = document.createElement('span'); const tagSpan: HTMLSpanElement = document.createElement('span');
@ -129,3 +135,7 @@ function fillNoteSidebar(noteArray: Note[]) {
} }
function handleSidebarNoteClick(id: Number): any {
console.log("huh " + id);
}

97
src/styles.css
View File

@ -4,7 +4,7 @@
line-height: 24px; line-height: 24px;
font-weight: 400; font-weight: 400;
background-color: #0f0f0f; background-color: #252525;
color: #f6f6f6; color: #f6f6f6;
font-synthesis: none; font-synthesis: none;
@ -12,26 +12,36 @@
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
-webkit-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;
}
#button-row {
display: flex;
flex-direction: row;
justify-content: space-evenly;
margin: 0;
} }
.container { .container {
margin: 0; margin: 0;
padding-top: 10vh; padding-top: 2vh;
display: flex;
flex-direction: row;
justify-content: space-between;
text-align: center;
height: 80vh;
}
.editor {
background-color: #24c8db;
margin-left: 1em;
width: 100%;
height: 100%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center;
text-align: center;
}
.logo {
height: 6em;
padding: 1.5em;
will-change: filter;
transition: 0.75s;
}
.logo.tauri:hover {
filter: drop-shadow(0 0 2em #24c8db);
} }
.row { .row {
@ -61,8 +71,8 @@ button {
font-size: 1em; font-size: 1em;
font-weight: 500; font-weight: 500;
font-family: inherit; font-family: inherit;
color: #0f0f0f; color: #ffffff;
background-color: #ffffff; background-color: #770079;
transition: border-color 0.25s; transition: border-color 0.25s;
box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2); box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
} }
@ -80,6 +90,33 @@ button:active {
background-color: #e8e8e8; background-color: #e8e8e8;
} }
#create-tag{
margin: 0.5em;
}
#create-input{
margin: 0.5em;
height: 100%;
font-size: 16px;
line-height: 1.5;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
resize: none;
}
#create-input:focus {
border-color: #cf66e9;
box-shadow: 0 0 5px rgba(102, 175, 233, 0.6);
outline: none; /* Remove default focus outline */
}
input, input,
button { button {
outline: none; outline: none;
@ -94,27 +131,6 @@ button {
margin-right: 5px; margin-right: 5px;
} }
@media (prefers-color-scheme: dark) {
:root {
color: #f6f6f6;
background-color: #2f2f2f;
}
a:hover {
color: #24c8db;
}
input,
button {
color: #ffffff;
background-color: #0f0f0f98;
}
button:active {
background-color: #0f0f0f69;
}
}
.sidebar { .sidebar {
@ -129,6 +145,11 @@ button {
margin-bottom: 10px; margin-bottom: 10px;
} }
.sidebar-note:hover {
cursor: pointer;
background-color: #770079;
}
.sidebar-note-id { .sidebar-note-id {
margin-right: 10px; margin-right: 10px;
font-weight: bold; font-weight: bold;