Assecutor/votianlt
3
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects 1 Releases Wiki Activity

Erweiterungen

Browse Source
This commit is contained in:
Sven Carstensen
2025-10-09 11:33:30 +02:00
parent 01815ff084
commit 7fccd43eab
1 changed files with 17 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
src/main/java/de/assecutor/votianlt/pages/view/MessageDetailsView.java
View File

@@ -52,9 +52,8 @@ public class MessageDetailsView extends Main implements BeforeEnterObserver {
private boolean jobConversation; private boolean jobConversation;
private ObjectId jobIdContext; private ObjectId jobIdContext;
private String jobNumberContext; private String jobNumberContext;
private VerticalLayout contentLayout; private final VerticalLayout contentLayout;
private VerticalLayout messagesContainer; private VerticalLayout messagesContainer;
private Scroller messagesScroller;
private Div scrollAnchor; // Marker element at the end of messages for scrolling 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 TIME_FORMATTER = DateTimeFormatter.ofPattern("HH:mm");
private static final DateTimeFormatter DATE_FORMATTER = DateTimeFormatter.ofPattern("dd.MM.yyyy"); 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.setWidthFull();
messagesContainer.getStyle().set("background-color", "#f0f0f0"); messagesContainer.getStyle().set("background-color", "#f0f0f0");
messagesContainer.getStyle().set("border-radius", "8px"); messagesContainer.getStyle().set("border-radius", "8px");
messagesContainer.getStyle().set("padding", "20px"); messagesContainer.getStyle().set("padding", "15px");
messagesContainer.setHeightFull();
messagesContainer.getStyle().set("min-height", "100%");
messagesContainer.getStyle().set("display", "flex"); messagesContainer.getStyle().set("display", "flex");
messagesContainer.getStyle().set("flex-direction", "column"); messagesContainer.getStyle().set("flex-direction", "column");
messagesContainer.getStyle().set("flex", "1 1 auto");
if (!filteredMessages.isEmpty()) { if (!filteredMessages.isEmpty()) {
renderMessages(filteredMessages); renderMessages(filteredMessages);
@@ -143,12 +139,11 @@ public class MessageDetailsView extends Main implements BeforeEnterObserver {
ensureScrollAnchor(); ensureScrollAnchor();
} }
messagesScroller = new Scroller(messagesContainer); Scroller messagesScroller = new Scroller(messagesContainer);
messagesScroller.setWidthFull(); messagesScroller.setWidthFull();
messagesScroller.setScrollDirection(Scroller.ScrollDirection.VERTICAL);
messagesScroller.setHeightFull(); messagesScroller.setHeightFull();
messagesScroller.setScrollDirection(Scroller.ScrollDirection.VERTICAL);
messagesScroller.getStyle().set("flex", "1 1 auto"); messagesScroller.getStyle().set("flex", "1 1 auto");
messagesScroller.getStyle().set("background-color", "#f0f0f0");
contentLayout.add(messagesScroller); contentLayout.add(messagesScroller);
contentLayout.setFlexGrow(1, messagesScroller); contentLayout.setFlexGrow(1, messagesScroller);
@@ -186,14 +181,15 @@ public class MessageDetailsView extends Main implements BeforeEnterObserver {
Div separator = new Div(); Div separator = new Div();
separator.setWidthFull(); separator.setWidthFull();
separator.getStyle().set("text-align", "center"); separator.getStyle().set("text-align", "center");
separator.getStyle().set("margin", "20px 0");
Span dateSpan = new Span(date.format(DATE_FORMATTER)); Span dateSpan = new Span(date.format(DATE_FORMATTER));
dateSpan.getStyle().set("background-color", "#f0f0f0"); dateSpan.getStyle().set("background-color", "#d0d0d0");
dateSpan.getStyle().set("padding", "5px 15px"); dateSpan.getStyle().set("padding", "8px 20px");
dateSpan.getStyle().set("border-radius", "15px"); dateSpan.getStyle().set("border-radius", "20px");
dateSpan.getStyle().set("font-size", "12px"); 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); separator.add(dateSpan);
return separator; return separator;
@@ -204,8 +200,7 @@ public class MessageDetailsView extends Main implements BeforeEnterObserver {
messageWrapper.setWidthFull(); messageWrapper.setWidthFull();
messageWrapper.getStyle().set("display", "flex"); messageWrapper.getStyle().set("display", "flex");
messageWrapper.getStyle().set("justify-content", "flex-start"); messageWrapper.getStyle().set("justify-content", "flex-start");
messageWrapper.getStyle().set("margin-bottom", "10px");
Div messageBubble = new Div(); Div messageBubble = new Div();
messageBubble.getStyle().set("max-width", "60%"); messageBubble.getStyle().set("max-width", "60%");
messageBubble.getStyle().set("background-color", "#ffffff"); 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("max-width", "60%");
messageBubble.getStyle().set("background-color", "#dcf8c6"); messageBubble.getStyle().set("background-color", "#dcf8c6");
messageBubble.getStyle().set("padding", "10px 15px"); messageBubble.getStyle().set("padding", "10px 15px");
messageBubble.getStyle().set("padding-bottom", "5px");
messageBubble.getStyle().set("border-radius", "18px"); messageBubble.getStyle().set("border-radius", "18px");
messageBubble.getStyle().set("box-shadow", "0 1px 2px rgba(0,0,0,0.1)"); 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(); ensureScrollAnchor();
scrollToBottom(); scrollToBottom();
@@ -434,7 +425,7 @@ public class MessageDetailsView extends Main implements BeforeEnterObserver {
if (scrollAnchor == null) { if (scrollAnchor == null) {
scrollAnchor = new Div(); scrollAnchor = new Div();
scrollAnchor.setId("scroll-anchor"); scrollAnchor.setId("scroll-anchor");
scrollAnchor.getStyle().set("height", "5px"); scrollAnchor.getStyle().set("height", "50px");
} }
if (scrollAnchor.getParent().isEmpty()) { if (scrollAnchor.getParent().isEmpty()) {
messagesContainer.add(scrollAnchor); messagesContainer.add(scrollAnchor);
@@ -457,17 +448,17 @@ public class MessageDetailsView extends Main implements BeforeEnterObserver {
"console.log('Scroll anchor found:', anchor);" + "console.log('Scroll anchor found:', anchor);" +
// First attempt after 50ms - instant scroll // First attempt after 50ms - instant scroll
"setTimeout(() => {" + "setTimeout(() => {" +
" anchor.scrollIntoView({ behavior: 'instant', block: 'nearest' });" + " anchor.scrollIntoView({ behavior: 'instant', block: 'end' });" +
" console.log('Scroll attempt 1: scrollIntoView called (instant)');" + " console.log('Scroll attempt 1: scrollIntoView called (instant)');" +
"}, 50);" + "}, 50);" +
// Second attempt after 200ms - instant scroll // Second attempt after 200ms - instant scroll
"setTimeout(() => {" + "setTimeout(() => {" +
" anchor.scrollIntoView({ behavior: 'instant', block: 'nearest' });" + " anchor.scrollIntoView({ behavior: 'instant', block: 'end' });" +
" console.log('Scroll attempt 2: scrollIntoView called (instant)');" + " console.log('Scroll attempt 2: scrollIntoView called (instant)');" +
"}, 200);" + "}, 200);" +
// Third attempt after 500ms - instant scroll // Third attempt after 500ms - instant scroll
"setTimeout(() => {" + "setTimeout(() => {" +
" anchor.scrollIntoView({ behavior: 'instant', block: 'nearest' });" + " anchor.scrollIntoView({ behavior: 'instant', block: 'end' });" +
" console.log('Scroll attempt 3: scrollIntoView called (instant)');" + " console.log('Scroll attempt 3: scrollIntoView called (instant)');" +
"}, 500);" "}, 500);"
); );