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

View File

@ -19,30 +19,33 @@
</head>
<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">
<h1>Snotes Deck Test</h1>
<form class="row" id="create-form">
<input id="create-input" placeholder="Note..." />
<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>
</div>
<div class="editor">
<input id="create-tag" placeholder="Tag..." />
<button type="submit">Save</button>
</form>
<textarea id="create-input" placeholder="Note..." ></textarea>
<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>
</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>
</html>

View File

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

View File

@ -4,7 +4,7 @@
line-height: 24px;
font-weight: 400;
background-color: #0f0f0f;
background-color: #252525;
color: #f6f6f6;
font-synthesis: none;
@ -12,26 +12,36 @@
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-text-size-adjust: 100%;
}
#button-row {
display: flex;
flex-direction: row;
justify-content: space-evenly;
margin: 0;
}
.container {
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;
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 {
@ -61,8 +71,8 @@ button {
font-size: 1em;
font-weight: 500;
font-family: inherit;
color: #0f0f0f;
background-color: #ffffff;
color: #ffffff;
background-color: #770079;
transition: border-color 0.25s;
box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
}
@ -80,6 +90,33 @@ button:active {
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,
button {
outline: none;
@ -94,27 +131,6 @@ button {
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 {
@ -129,6 +145,11 @@ button {
margin-bottom: 10px;
}
.sidebar-note:hover {
cursor: pointer;
background-color: #770079;
}
.sidebar-note-id {
margin-right: 10px;
font-weight: bold;