From 7fccd43eabbe97452d1344c05f3c8a2ae992f17c Mon Sep 17 00:00:00 2001 From: Sven Carstensen Date: Thu, 9 Oct 2025 11:33:30 +0200 Subject: [PATCH] Erweiterungen --- .../pages/view/MessageDetailsView.java | 43 ++++++++----------- 1 file changed, 17 insertions(+), 26 deletions(-) diff --git a/src/main/java/de/assecutor/votianlt/pages/view/MessageDetailsView.java b/src/main/java/de/assecutor/votianlt/pages/view/MessageDetailsView.java index 9f0c50f..2026c35 100644 --- a/src/main/java/de/assecutor/votianlt/pages/view/MessageDetailsView.java +++ b/src/main/java/de/assecutor/votianlt/pages/view/MessageDetailsView.java @@ -52,9 +52,8 @@ public class MessageDetailsView extends Main implements BeforeEnterObserver { private boolean jobConversation; private ObjectId jobIdContext; private String jobNumberContext; - private VerticalLayout contentLayout; + private final VerticalLayout contentLayout; private VerticalLayout messagesContainer; - private Scroller messagesScroller; private Div scrollAnchor; // Marker element at the end of messages for scrolling private static final DateTimeFormatter TIME_FORMATTER = DateTimeFormatter.ofPattern("HH:mm"); private static final DateTimeFormatter DATE_FORMATTER = DateTimeFormatter.ofPattern("dd.MM.yyyy"); @@ -130,12 +129,9 @@ public class MessageDetailsView extends Main implements BeforeEnterObserver { messagesContainer.setWidthFull(); messagesContainer.getStyle().set("background-color", "#f0f0f0"); messagesContainer.getStyle().set("border-radius", "8px"); - messagesContainer.getStyle().set("padding", "20px"); - messagesContainer.setHeightFull(); - messagesContainer.getStyle().set("min-height", "100%"); + messagesContainer.getStyle().set("padding", "15px"); messagesContainer.getStyle().set("display", "flex"); messagesContainer.getStyle().set("flex-direction", "column"); - messagesContainer.getStyle().set("flex", "1 1 auto"); if (!filteredMessages.isEmpty()) { renderMessages(filteredMessages); @@ -143,12 +139,11 @@ public class MessageDetailsView extends Main implements BeforeEnterObserver { ensureScrollAnchor(); } - messagesScroller = new Scroller(messagesContainer); + Scroller messagesScroller = new Scroller(messagesContainer); messagesScroller.setWidthFull(); - messagesScroller.setScrollDirection(Scroller.ScrollDirection.VERTICAL); messagesScroller.setHeightFull(); + messagesScroller.setScrollDirection(Scroller.ScrollDirection.VERTICAL); messagesScroller.getStyle().set("flex", "1 1 auto"); - messagesScroller.getStyle().set("background-color", "#f0f0f0"); contentLayout.add(messagesScroller); contentLayout.setFlexGrow(1, messagesScroller); @@ -186,14 +181,15 @@ public class MessageDetailsView extends Main implements BeforeEnterObserver { Div separator = new Div(); separator.setWidthFull(); separator.getStyle().set("text-align", "center"); - separator.getStyle().set("margin", "20px 0"); - + Span dateSpan = new Span(date.format(DATE_FORMATTER)); - dateSpan.getStyle().set("background-color", "#f0f0f0"); - dateSpan.getStyle().set("padding", "5px 15px"); - dateSpan.getStyle().set("border-radius", "15px"); + dateSpan.getStyle().set("background-color", "#d0d0d0"); + dateSpan.getStyle().set("padding", "8px 20px"); + dateSpan.getStyle().set("border-radius", "20px"); dateSpan.getStyle().set("font-size", "12px"); - dateSpan.getStyle().set("color", "#666666"); + dateSpan.getStyle().set("color", "#333333"); + dateSpan.getStyle().set("font-weight", "500"); + dateSpan.getStyle().set("box-shadow", "0 1px 3px rgba(0,0,0,0.15)"); separator.add(dateSpan); return separator; @@ -204,8 +200,7 @@ public class MessageDetailsView extends Main implements BeforeEnterObserver { messageWrapper.setWidthFull(); messageWrapper.getStyle().set("display", "flex"); messageWrapper.getStyle().set("justify-content", "flex-start"); - messageWrapper.getStyle().set("margin-bottom", "10px"); - + Div messageBubble = new Div(); messageBubble.getStyle().set("max-width", "60%"); messageBubble.getStyle().set("background-color", "#ffffff"); @@ -241,6 +236,7 @@ public class MessageDetailsView extends Main implements BeforeEnterObserver { messageBubble.getStyle().set("max-width", "60%"); messageBubble.getStyle().set("background-color", "#dcf8c6"); messageBubble.getStyle().set("padding", "10px 15px"); + messageBubble.getStyle().set("padding-bottom", "5px"); messageBubble.getStyle().set("border-radius", "18px"); messageBubble.getStyle().set("box-shadow", "0 1px 2px rgba(0,0,0,0.1)"); @@ -416,11 +412,6 @@ public class MessageDetailsView extends Main implements BeforeEnterObserver { } } - // Remove margin-bottom from the last message to control spacing precisely - if (lastMessageWrapper != null) { - lastMessageWrapper.getStyle().set("margin-bottom", "5px"); - } - ensureScrollAnchor(); scrollToBottom(); @@ -434,7 +425,7 @@ public class MessageDetailsView extends Main implements BeforeEnterObserver { if (scrollAnchor == null) { scrollAnchor = new Div(); scrollAnchor.setId("scroll-anchor"); - scrollAnchor.getStyle().set("height", "5px"); + scrollAnchor.getStyle().set("height", "50px"); } if (scrollAnchor.getParent().isEmpty()) { messagesContainer.add(scrollAnchor); @@ -457,17 +448,17 @@ public class MessageDetailsView extends Main implements BeforeEnterObserver { "console.log('Scroll anchor found:', anchor);" + // First attempt after 50ms - instant scroll "setTimeout(() => {" + - " anchor.scrollIntoView({ behavior: 'instant', block: 'nearest' });" + + " anchor.scrollIntoView({ behavior: 'instant', block: 'end' });" + " console.log('Scroll attempt 1: scrollIntoView called (instant)');" + "}, 50);" + // Second attempt after 200ms - instant scroll "setTimeout(() => {" + - " anchor.scrollIntoView({ behavior: 'instant', block: 'nearest' });" + + " anchor.scrollIntoView({ behavior: 'instant', block: 'end' });" + " console.log('Scroll attempt 2: scrollIntoView called (instant)');" + "}, 200);" + // Third attempt after 500ms - instant scroll "setTimeout(() => {" + - " anchor.scrollIntoView({ behavior: 'instant', block: 'nearest' });" + + " anchor.scrollIntoView({ behavior: 'instant', block: 'end' });" + " console.log('Scroll attempt 3: scrollIntoView called (instant)');" + "}, 500);" );