From 60309ec3c44431079579b9a6ce5b0a53533e414c Mon Sep 17 00:00:00 2001 From: Stefan Schallerl Date: Fri, 7 Feb 2025 12:28:43 +0100 Subject: [PATCH] Applies some beercss styling and layouting. --- app/src/main/kotlin/net/h34t/filemure/Util.kt | 10 ++- .../filemure/controller/DocumentController.kt | 5 +- .../filemure/controller/LimboController.kt | 4 +- .../filemure/controller/OverviewController.kt | 2 +- .../filemure/controller/SearchController.kt | 6 +- .../net.h34t.filemure.tpl/Document.tpl.html | 43 ++++++++--- .../DocumentCreateForm.tpl.html | 47 ++++++++---- .../DocumentEditForm.tpl.html | 40 +++++++--- .../net.h34t.filemure.tpl/FileList.tpl.html | 14 +++- .../tpl/net.h34t.filemure.tpl/Limbo.tpl.html | 74 +++++++++++-------- .../tpl/net.h34t.filemure.tpl/Login.tpl.html | 25 +++++-- .../net.h34t.filemure.tpl/Overview.tpl.html | 61 +++++++++++++-- .../OverviewDocuments.tpl.html | 11 ++- .../tpl/net.h34t.filemure.tpl/Search.tpl.html | 60 ++++++++++----- public/filemure.css | 4 + public/filemure.js | 4 +- 16 files changed, 289 insertions(+), 121 deletions(-) diff --git a/app/src/main/kotlin/net/h34t/filemure/Util.kt b/app/src/main/kotlin/net/h34t/filemure/Util.kt index ef6eee4..e656df0 100644 --- a/app/src/main/kotlin/net/h34t/filemure/Util.kt +++ b/app/src/main/kotlin/net/h34t/filemure/Util.kt @@ -48,9 +48,11 @@ fun formatHumanReadableSize(bytes: Long) = when (bytes) { else -> "${bytes / 1_000_000_000} gb" } +private val tagSplitRegex = Regex("\\s") + object TagAdapter { fun parse(ser: String?): List { - return ser?.let { if (it.isNotBlank()) it.split(",").map { Tag(it) } else emptyList() } ?: emptyList() + return ser?.let { if (it.isNotBlank()) it.split(tagSplitRegex).map { Tag(it) } else emptyList() } ?: emptyList() } fun List.serialize() = if (this.isEmpty()) "" else this.joinToString(",") { it.value } @@ -62,10 +64,12 @@ fun List.grouped(): Map>> = values.groupBy { it.referenceDate.month } } -private val htmlDtf = DateTimeFormatter.ofLocalizedDateTime(FormatStyle.SHORT, FormatStyle.SHORT) +private val shortDtf = DateTimeFormatter.ofLocalizedDateTime(FormatStyle.SHORT, FormatStyle.SHORT) +private val longDtf = DateTimeFormatter.ofLocalizedDateTime(FormatStyle.FULL, FormatStyle.SHORT) val formDtf = DateTimeFormatter.ofPattern("yyyy-MM-dd'T'HH:mm") -fun LocalDateTime.formatHuman() = this.format(htmlDtf) +fun LocalDateTime.formatHumanShort() = this.format(shortDtf) +fun LocalDateTime.formatHumanLong() = this.format(longDtf) fun LocalDateTime.formatHtmlForm() = this.format(formDtf) private val dfMonth = DateTimeFormatter.ofPattern("MMMM") diff --git a/app/src/main/kotlin/net/h34t/filemure/controller/DocumentController.kt b/app/src/main/kotlin/net/h34t/filemure/controller/DocumentController.kt index 8aa490d..28440b7 100644 --- a/app/src/main/kotlin/net/h34t/filemure/controller/DocumentController.kt +++ b/app/src/main/kotlin/net/h34t/filemure/controller/DocumentController.kt @@ -32,10 +32,9 @@ class DocumentController(val modifiers: TemplateModifiers, val repository: Sqlit content = Document( modifiers = modifiers, extId = document.extId.value, - title = document.title, - referenceDate = dtf.format(document.referenceDate), + referenceDate = document.referenceDate.formatHumanLong(), tags = { document.tags.map { TagsBlock(tag = it.value) }.asSequence() }, - description = document.description, + description = document.description.ifBlank { "-" }, files = FileList( modifiers = modifiers, delete = true, diff --git a/app/src/main/kotlin/net/h34t/filemure/controller/LimboController.kt b/app/src/main/kotlin/net/h34t/filemure/controller/LimboController.kt index c1ff387..f06653c 100644 --- a/app/src/main/kotlin/net/h34t/filemure/controller/LimboController.kt +++ b/app/src/main/kotlin/net/h34t/filemure/controller/LimboController.kt @@ -16,7 +16,7 @@ class LimboController(val modifiers: TemplateModifiers, val repository: SqliteRe ctx.tempolin( Frame( modifiers = modifiers, - title = "Filemure Limbo", + title = "Limbo", target = "limbo", back = "/", content = Limbo( @@ -27,7 +27,7 @@ class LimboController(val modifiers: TemplateModifiers, val repository: SqliteRe file = f.filename, type = f.contentType ?: "", size = formatHumanReadableSize(f.fileSize), - uploaded = f.created.formatHuman() + uploaded = f.created.formatHumanShort() ) }.asSequence() }) diff --git a/app/src/main/kotlin/net/h34t/filemure/controller/OverviewController.kt b/app/src/main/kotlin/net/h34t/filemure/controller/OverviewController.kt index b7c6ad5..5b6a992 100644 --- a/app/src/main/kotlin/net/h34t/filemure/controller/OverviewController.kt +++ b/app/src/main/kotlin/net/h34t/filemure/controller/OverviewController.kt @@ -71,7 +71,7 @@ class OverviewController(private val modifiers: TemplateModifiers, private val r documents.sortedBy { it.referenceDate }.map { document -> DocumentBlock( extId = document.extId.value, - referenceDate = document.referenceDate.formatHuman(), + referenceDate = document.referenceDate.formatHumanShort(), title = document.title.ifBlank { "untitled" }, ) }.asSequence() diff --git a/app/src/main/kotlin/net/h34t/filemure/controller/SearchController.kt b/app/src/main/kotlin/net/h34t/filemure/controller/SearchController.kt index 79fe98a..ba53a37 100644 --- a/app/src/main/kotlin/net/h34t/filemure/controller/SearchController.kt +++ b/app/src/main/kotlin/net/h34t/filemure/controller/SearchController.kt @@ -2,7 +2,7 @@ package net.h34t.filemure.controller import io.javalin.http.Context import net.h34t.filemure.TemplateModifiers -import net.h34t.filemure.formatHuman +import net.h34t.filemure.formatHumanShort import net.h34t.filemure.repository.SqliteRepository import net.h34t.filemure.requireSession import net.h34t.filemure.tempolin @@ -21,7 +21,7 @@ class SearchController(val modifiers: TemplateModifiers, val repository: SqliteR ctx.tempolin( Frame( modifiers = modifiers, - title = "Overview", + title = "Search", target = "document", back = "/", content = Search( @@ -32,7 +32,7 @@ class SearchController(val modifiers: TemplateModifiers, val repository: SqliteR DocumentBlock( extId = d.extId.value, title = d.title, - referenceDate = d.referenceDate.formatHuman() + referenceDate = d.referenceDate.formatHumanShort() ) }.asSequence() } diff --git a/app/src/main/tpl/net.h34t.filemure.tpl/Document.tpl.html b/app/src/main/tpl/net.h34t.filemure.tpl/Document.tpl.html index ed7d4de..2c95545 100644 --- a/app/src/main/tpl/net.h34t.filemure.tpl/Document.tpl.html +++ b/app/src/main/tpl/net.h34t.filemure.tpl/Document.tpl.html @@ -1,18 +1,39 @@ -

{*$title}

+
+ Document -

Date: {*$referenceDate}

+ Date +
{*$referenceDate}
-

Tags: {for $tags}{*$tag}{/for}

+
-

Description:
- {*$description} -

+ Tags +
{for $tags}{/for}
-{template $files} +
-

edit

+ Description +
{*$description}
+
-
- -
\ No newline at end of file +
+ Files + {template $files} +
+ +
+ Actions +
+
+ + + +
+ +
+
+ +
+
+
+
\ No newline at end of file diff --git a/app/src/main/tpl/net.h34t.filemure.tpl/DocumentCreateForm.tpl.html b/app/src/main/tpl/net.h34t.filemure.tpl/DocumentCreateForm.tpl.html index f80f86f..817c716 100644 --- a/app/src/main/tpl/net.h34t.filemure.tpl/DocumentCreateForm.tpl.html +++ b/app/src/main/tpl/net.h34t.filemure.tpl/DocumentCreateForm.tpl.html @@ -1,24 +1,41 @@
-

-

+
+ New Document -

-
{for $tags}{*$tag}{/for}
+
+ + +
-

- {for $fileId} - - {/for} +
+ + +
-

+
+ + +
{for $tags}{*$tag}{/for}
+
- {template $files} +
+ + +
+ + {for $fileId} + + {/for} + + + + {template $files} + +
\ No newline at end of file diff --git a/app/src/main/tpl/net.h34t.filemure.tpl/DocumentEditForm.tpl.html b/app/src/main/tpl/net.h34t.filemure.tpl/DocumentEditForm.tpl.html index 2342f51..6767c31 100644 --- a/app/src/main/tpl/net.h34t.filemure.tpl/DocumentEditForm.tpl.html +++ b/app/src/main/tpl/net.h34t.filemure.tpl/DocumentEditForm.tpl.html @@ -1,20 +1,36 @@
-

-

+
+ New Document -

-
{for $tags}{*$tag}{/for}
+
+ + +
-

+
+ + +
-

+
+ + +
{for $tags}{*$tag}{/for}
+
- {template $files} +
+ + +
+
+ +
+
+ +
+ Files + {template $files} +
\ No newline at end of file diff --git a/app/src/main/tpl/net.h34t.filemure.tpl/FileList.tpl.html b/app/src/main/tpl/net.h34t.filemure.tpl/FileList.tpl.html index 1d5dd7d..3d5666f 100644 --- a/app/src/main/tpl/net.h34t.filemure.tpl/FileList.tpl.html +++ b/app/src/main/tpl/net.h34t.filemure.tpl/FileList.tpl.html @@ -1,4 +1,5 @@ - +
+ @@ -8,17 +9,24 @@ {/if} + + {for $files} - + {if $delete} - + {/if} {/for} +
Filename TypeDelete
{*$filename} {*$contentType} {*$size}download + + delete + +
\ No newline at end of file diff --git a/app/src/main/tpl/net.h34t.filemure.tpl/Limbo.tpl.html b/app/src/main/tpl/net.h34t.filemure.tpl/Limbo.tpl.html index dea1f5f..e77a39d 100644 --- a/app/src/main/tpl/net.h34t.filemure.tpl/Limbo.tpl.html +++ b/app/src/main/tpl/net.h34t.filemure.tpl/Limbo.tpl.html @@ -1,32 +1,46 @@ -

Filemure Limbo

- -

{$limboFileCount} Files

- - - - - - - - - - - {for $file} - - - - - - - - - - {/for} -
-FilenameTypeSizeUploadedviewdelete
{*$file}{*$type}{*$size}{*$uploaded} - - -
-
- + +
+ {$limboFileCount} Files + + + + + + + + + + + + + + {for $file} + + + + + + + + + + {/for} + +
-FilenameTypeSizeUploadedviewdelete
{*$file}{*$type}{*$size}{*$uploaded} + + + + +
+ +
+
+
+ +
+ Actions + +
diff --git a/app/src/main/tpl/net.h34t.filemure.tpl/Login.tpl.html b/app/src/main/tpl/net.h34t.filemure.tpl/Login.tpl.html index 6653024..266424e 100644 --- a/app/src/main/tpl/net.h34t.filemure.tpl/Login.tpl.html +++ b/app/src/main/tpl/net.h34t.filemure.tpl/Login.tpl.html @@ -1,11 +1,26 @@

Hello to Filemure

-

-

+
+ Log In -

+
+ + +
+ +
+ + +
+ + + + + +
\ No newline at end of file diff --git a/app/src/main/tpl/net.h34t.filemure.tpl/Overview.tpl.html b/app/src/main/tpl/net.h34t.filemure.tpl/Overview.tpl.html index 37a4a4a..f05d103 100644 --- a/app/src/main/tpl/net.h34t.filemure.tpl/Overview.tpl.html +++ b/app/src/main/tpl/net.h34t.filemure.tpl/Overview.tpl.html @@ -1,21 +1,66 @@

To add a document, just drag & drop the file in here.

-

Files in limbo: {$limboFileCount}.

+
+
+
+ Limbo -
- -
+
+
+ Files in limbo: {$limboFileCount} +
+
+ +
+
+
+
- - {for $year} +
+
+ Search +
+
+
+
+ search + + +
+
+
+ +
+
+ +
+
+ + +
+ - + + + + + {for $year} + + + + + {for $month} + - + + + {/for} {/for}
{*$year}DateFilesView
{*$year}
{*$monthHuman}{*$count} Files{*$count} + +
diff --git a/app/src/main/tpl/net.h34t.filemure.tpl/OverviewDocuments.tpl.html b/app/src/main/tpl/net.h34t.filemure.tpl/OverviewDocuments.tpl.html index 71e599b..9f06841 100644 --- a/app/src/main/tpl/net.h34t.filemure.tpl/OverviewDocuments.tpl.html +++ b/app/src/main/tpl/net.h34t.filemure.tpl/OverviewDocuments.tpl.html @@ -1,17 +1,22 @@

Documents for {*$category}

- +
+ - + + {for $document} - + {/for} +
Date Title Details
{*$referenceDate} {*$title}details + +
\ No newline at end of file diff --git a/app/src/main/tpl/net.h34t.filemure.tpl/Search.tpl.html b/app/src/main/tpl/net.h34t.filemure.tpl/Search.tpl.html index dcb88e4..8ee6d76 100644 --- a/app/src/main/tpl/net.h34t.filemure.tpl/Search.tpl.html +++ b/app/src/main/tpl/net.h34t.filemure.tpl/Search.tpl.html @@ -1,25 +1,45 @@ -

Search for "{*$search}"

-
- +
+ Search + +
+
+
+ search + + +
+
+
+ +
+
+ +
-

Results

+
+ Search results for "{*$search}" - - - - - - +
DateTitleDetails
+ + + + + + + - {for $document} - - - - - - {/for} -
DateTitleDetails
{*$referenceDate}{*$title} - -
+ + {for $document} + + {*$referenceDate} + {*$title} + + + + + {/for} + + +
\ No newline at end of file diff --git a/public/filemure.css b/public/filemure.css index b0c8733..5fc871f 100644 --- a/public/filemure.css +++ b/public/filemure.css @@ -29,4 +29,8 @@ right: 32px; top: 32px; bottom: 64px; +} + +.nowrap { + white-space: nowrap; } \ No newline at end of file diff --git a/public/filemure.js b/public/filemure.js index fb3aeb3..5a93f46 100644 --- a/public/filemure.js +++ b/public/filemure.js @@ -3,8 +3,8 @@ document.addEventListener("DOMContentLoaded", function () { const targetContainer = document.querySelector('.dropzone') if (targetContainer != null) { - console.log("target ready") - const target = targetContainer.dataset.target; + const target = targetContainer.dataset.target + console.log("file drag & drop ready with target \"" + target + "\"") const progressDialog = document.querySelector('#upload_progress_dialog') const progressBar = document.querySelector('#upload_progress')