admin/packliste
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: Notizen Design-Feinschliff & Editor Tooltips
All checks were successful
Docker Build & Push / build-and-push (push) Successful in 8s
Details

Browse Source
This commit is contained in:
AI Bot
2026-06-19 20:01:21 +00:00
parent e29efeeea2
commit 4ebc18600b
4 changed files with 107 additions and 107 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
README.md
View File

@@ -233,4 +233,4 @@ Das Projekt basiert auf bewährten Web-Standards:
* **Features:**
* **Notizen:** Neue Funktion "Notizen" hinzugefügt inkl. Rich-Text-Editor.
* **Haushaltsfreigabe:** Notizen können mit dem Haushalt geteilt werden.
* **Design-Update:** Die Notizen-Übersichtsseite nutzt nun eine Split-View (Liste links, Inhalt rechts).
* **Design-Update:** Die Notizen-Übersichtsseite wurde an das Design der ToDo-Listen angepasst (Split-View, List-Groups, weiße Notizhintergründe). Der Texteditor bietet nun deutsche Tooltips. Beim Speichern einer Notiz wird nun besser zurück in die Übersicht navigiert.

15
src/add_note.php
View File

@@ -27,7 +27,7 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST') {
$stmt->bind_param("iissi", $current_user_id, $current_user_household_id, $title, $content, $is_shared);
if ($stmt->execute()) {
$new_id = $stmt->insert_id;
header("Location: edit_note.php?id=$new_id&success=1");
header("Location: notes.php?id=$new_id");
exit;
} else {
$error = "Fehler beim Speichern der Notiz.";
@@ -113,6 +113,19 @@ require_once 'header.php';
}
});
// Tooltips hinzufügen
const tooltips = {
'bold': 'Fett', 'italic': 'Kursiv', 'underline': 'Unterstrichen', 'strike': 'Durchgestrichen',
'header': 'Überschrift', 'size': 'Schriftgröße', 'color': 'Textfarbe', 'background': 'Hintergrundfarbe',
'list': 'Liste', 'align': 'Ausrichtung', 'link': 'Link einfügen', 'clean': 'Formatierung entfernen'
};
for (let key in tooltips) {
document.querySelectorAll('.ql-' + key).forEach(el => el.setAttribute('title', tooltips[key]));
}
// Spezielle Listen (ordered/bullet)
document.querySelectorAll('.ql-list[value="ordered"]').forEach(el => el.setAttribute('title', 'Nummerierte Liste'));
document.querySelectorAll('.ql-list[value="bullet"]').forEach(el => el.setAttribute('title', 'Aufzählungsliste'));
var form = document.getElementById('noteForm');
form.onsubmit = function() {
var content = document.getElementById('hiddenContent');

21
src/edit_note.php
View File

@@ -108,9 +108,11 @@ require_once 'header.php';
<?php endif; ?>
<?php if ($success): ?>
<div class="alert alert-success alert-dismissible fade show">
<i class="fas fa-check-circle me-2"></i><?php echo htmlspecialchars($success); ?>
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
<div class="alert alert-success d-flex justify-content-between align-items-center">
<div>
<i class="fas fa-check-circle me-2"></i><?php echo htmlspecialchars($success); ?>
</div>
<a href="notes.php?id=<?php echo $note['id']; ?>" class="btn btn-sm btn-success">Zurück zur Übersicht</a>
</div>
<?php endif; ?>
@@ -200,6 +202,19 @@ require_once 'header.php';
}
});
// Tooltips hinzufügen
const tooltips = {
'bold': 'Fett', 'italic': 'Kursiv', 'underline': 'Unterstrichen', 'strike': 'Durchgestrichen',
'header': 'Überschrift', 'size': 'Schriftgröße', 'color': 'Textfarbe', 'background': 'Hintergrundfarbe',
'list': 'Liste', 'align': 'Ausrichtung', 'link': 'Link einfügen', 'clean': 'Formatierung entfernen'
};
for (let key in tooltips) {
document.querySelectorAll('.ql-' + key).forEach(el => el.setAttribute('title', tooltips[key]));
}
// Spezielle Listen (ordered/bullet)
document.querySelectorAll('.ql-list[value="ordered"]').forEach(el => el.setAttribute('title', 'Nummerierte Liste'));
document.querySelectorAll('.ql-list[value="bullet"]').forEach(el => el.setAttribute('title', 'Aufzählungsliste'));
var form = document.getElementById('noteForm');
form.onsubmit = function() {
var content = document.getElementById('hiddenContent');

176
src/notes.php
View File

@@ -34,7 +34,7 @@ $stmt->close();
// Check if a specific note is selected
$active_note = null;
$active_note_id = isset($_GET['id']) ? intval($_GET['id']) : null;
$active_note_id = isset($_GET['id']) ? intval($_GET['id']) : (!empty($notes) ? $notes[0]['id'] : 0);
if ($active_note_id) {
foreach ($notes as $note) {
@@ -46,7 +46,6 @@ if ($active_note_id) {
}
?>
<!-- Quill Theme for rendering content -->
<link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
<style>
/* Anpassungen für die Anzeige ohne Editor-Rahmen */
@@ -57,121 +56,90 @@ if ($active_note_id) {
font-size: 1rem;
min-height: auto;
}
.note-list-row {
cursor: pointer;
transition: background-color 0.2s;
}
.note-list-row:hover {
background-color: #f8f9fa;
}
.note-list-row.active {
background-color: #e9ecef;
border-left: 4px solid #0d6efd;
}
</style>
<div class="container-fluid py-4">
<div class="d-flex justify-content-between align-items-center mb-4">
<h2 class="mb-0"><i class="fas fa-sticky-note text-warning me-2"></i>Notizen</h2>
<a href="add_note.php" class="btn btn-primary shadow-sm"><i class="fas fa-plus me-2"></i>Neue Notiz</a>
<div class="card mb-4">
<div class="card-header d-flex justify-content-between align-items-center">
<h2 class="h4 mb-0"><i class="fas fa-sticky-note me-2"></i>Notizen</h2>
<a href="add_note.php" class="btn btn-primary btn-sm shadow-sm"><i class="fas fa-plus me-2"></i>Neue Notiz</a>
</div>
<div class="row">
<!-- Linke Seite: Liste -->
<div class="col-lg-5 mb-4">
<div class="card shadow-sm border-0 h-100">
<div class="card-body p-0">
<div class="table-responsive">
<table class="table align-middle mb-0">
<thead class="table-light">
<tr>
<th>Titel & Status</th>
<th class="text-end">Aktionen</th>
</tr>
</thead>
<tbody>
<?php if (empty($notes)): ?>
<tr>
<td colspan="2" class="text-center py-4 text-muted">Keine Notizen vorhanden.</td>
</tr>
<?php else: ?>
<?php foreach ($notes as $note): ?>
<?php $is_active = ($active_note && $active_note['id'] == $note['id']); ?>
<tr class="note-list-row <?php echo $is_active ? 'active' : ''; ?>" onclick="window.location='notes.php?id=<?php echo $note['id']; ?>'">
<td class="py-3">
<div class="fw-bold text-dark mb-1">
<?php echo htmlspecialchars($note['title']); ?>
</div>
<div class="small">
<?php if ($note['user_id'] == $current_user_id): ?>
<span class="badge bg-secondary me-1">Ich</span>
<?php else: ?>
<span class="text-muted me-1"><i class="fas fa-user fa-xs"></i> <?php echo htmlspecialchars($note['owner_name']); ?></span>
<?php endif; ?>
<?php if ($note['is_shared']): ?>
<span class="badge bg-success" title="Geteilt"><i class="fas fa-share-alt"></i></span>
<?php endif; ?>
</div>
</td>
<td class="text-end" onclick="event.stopPropagation();">
<a href="edit_note.php?id=<?php echo $note['id']; ?>" class="btn btn-sm btn-outline-primary" title="Bearbeiten">
<i class="fas fa-edit"></i>
</a>
<?php if ($note['user_id'] == $current_user_id): ?>
<button type="button" class="btn btn-sm btn-outline-danger" onclick="confirmDelete(<?php echo $note['id']; ?>)" title="Löschen">
<i class="fas fa-trash"></i>
</button>
<?php endif; ?>
</td>
</tr>
<?php endforeach; ?>
<?php endif; ?>
</tbody>
</table>
<div class="card-body p-4">
<div class="row">
<!-- Linke Seite: Liste -->
<div class="col-md-4 mb-4 mb-md-0">
<div class="card h-100 bg-light border-0">
<div class="card-body p-3">
<h5 class="mb-3"><i class="fas fa-list me-2"></i>Meine Notizen</h5>
<div class="list-group mb-3 shadow-sm">
<?php foreach ($notes as $note): ?>
<?php $is_active = ($active_note && $active_note['id'] == $note['id']); ?>
<a href="notes.php?id=<?php echo $note['id']; ?>" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center <?php echo $is_active ? 'bg-success text-white fw-bold' : ''; ?>">
<div class="text-truncate" style="max-width: 80%;">
<?php echo htmlspecialchars($note['title']); ?>
<div class="small <?php echo $is_active ? 'text-white-50' : 'text-muted'; ?> fw-normal mt-1">
<?php if ($note['user_id'] != $current_user_id): ?>
<i class="fas fa-user fa-xs me-1"></i><?php echo htmlspecialchars($note['owner_name']); ?>
<?php endif; ?>
<?php if ($note['is_shared']): ?>
<i class="fas fa-share-alt fa-xs ms-1" title="Geteilt"></i>
<?php endif; ?>
</div>
</div>
<div onclick="event.stopPropagation();">
<?php if ($note['user_id'] == $current_user_id): ?>
<button type="button" class="btn btn-sm btn-link <?php echo $is_active ? 'text-white' : 'text-danger'; ?> p-0 ms-2" onclick="confirmDelete(<?php echo $note['id']; ?>, event)" title="Löschen">
<i class="fas fa-trash"></i>
</button>
<?php endif; ?>
</div>
</a>
<?php endforeach; ?>
<?php if (empty($notes)): ?>
<div class="list-group-item text-muted">Keine Notizen vorhanden.</div>
<?php endif; ?>
</div>
</div>
</div>
</div>
</div>
<!-- Rechte Seite: Inhalt -->
<div class="col-lg-7 mb-4">
<?php if ($active_note): ?>
<div class="card shadow-sm border-0 h-100">
<div class="card-body p-4">
<div class="d-flex justify-content-between align-items-start mb-3 border-bottom pb-3">
<h3 class="mb-0 fw-bold"><?php echo htmlspecialchars($active_note['title']); ?></h3>
<div class="text-end text-muted small">
<!-- Rechte Seite: Inhalt -->
<div class="col-md-8">
<?php if ($active_note): ?>
<div class="card h-100 border-0 shadow-sm bg-white">
<div class="card-header bg-white border-bottom d-flex justify-content-between align-items-center">
<h5 class="mb-0 py-2">
<i class="fas fa-align-left me-2 text-muted"></i><?php echo htmlspecialchars($active_note['title']); ?>
</h5>
<div>
<a href="edit_note.php?id=<?php echo $active_note['id']; ?>" class="btn btn-sm btn-outline-primary" title="Bearbeiten">
<i class="fas fa-edit"></i>
</a>
</div>
</div>
<div class="card-body p-4">
<div class="text-end text-muted small mb-4 border-bottom pb-2">
<div>Zuletzt geändert: <?php echo date('d.m.Y H:i', strtotime($active_note['updated_at'])); ?></div>
<?php if ($active_note['is_shared']): ?>
<div><i class="fas fa-share-alt text-success me-1"></i>Mit Haushalt geteilt</div>
<?php endif; ?>
</div>
</div>
<div class="ql-snow">
<div class="ql-editor render-only">
<?php echo $active_note['content']; ?>
<div class="ql-snow">
<div class="ql-editor render-only">
<?php echo $active_note['content']; ?>
</div>
</div>
</div>
<div class="mt-4 pt-3 border-top text-end">
<a href="edit_note.php?id=<?php echo $active_note['id']; ?>" class="btn btn-primary">
<i class="fas fa-edit me-2"></i>Diese Notiz bearbeiten
</a>
</div>
<?php else: ?>
<div class="alert alert-secondary d-flex align-items-center h-100 m-0">
<div>
<h5 class="alert-heading">Keine Notiz ausgewählt</h5>
<p class="mb-0">Wähle links eine Notiz aus oder erstelle eine neue, um sie hier zu lesen.</p>
</div>
</div>
</div>
<?php else: ?>
<div class="card shadow-sm border-0 h-100 bg-light d-flex align-items-center justify-content-center" style="min-height: 400px;">
<div class="text-center text-muted p-5">
<i class="fas fa-sticky-note fa-4x mb-3 text-secondary opacity-50"></i>
<h4>Keine Notiz ausgewählt</h4>
<p>Wähle links eine Notiz aus der Liste, um ihren Inhalt hier zu lesen.</p>
<a href="add_note.php" class="btn btn-outline-primary mt-2">
<i class="fas fa-plus me-2"></i>Jetzt eine Notiz erstellen
</a>
</div>
</div>
<?php endif; ?>
<?php endif; ?>
</div>
</div>
</div>
</div>
@@ -199,7 +167,11 @@ if ($active_note_id) {
</div>
<script>
function confirmDelete(id) {
function confirmDelete(id, event) {
if (event) {
event.preventDefault();
event.stopPropagation();
}
document.getElementById('deleteNoteId').value = id;
var myModal = new bootstrap.Modal(document.getElementById('deleteNoteModal'));
myModal.show();