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

style: UI-Verbesserungen für Message-Views mit konsistentem Layout

Browse Source
This commit is contained in:
Sven Carstensen
2026-03-20 16:03:46 +01:00
parent d8ee804019
commit 08ece158df
3 changed files with 36 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
src/main/frontend/themes/votian-modern/styles.css
View File

@@ -273,7 +273,6 @@ vaadin-vertical-layout.admin-form-view {
.view-toolbar,
.form-card,
.message-section,
.message-thread-layout,
.statistics-header,
.statistics-input-panel {
padding: clamp(1rem, 1.8vw, 1.5rem);
@@ -1265,12 +1264,12 @@ vaadin-grid-tree-toggle[expanded] .nav-expand-icon {
}
.message-thread-layout {
width: min(1240px, 100%);
margin: 0 auto;
border: 1px solid var(--app-border-strong);
background: rgba(255, 255, 255, 0.84);
box-shadow: var(--app-shadow-lg);
border-radius: 30px;
width: 100%;
margin: 0;
padding: 0;
background: transparent;
border: none;
box-shadow: none;
}
.message-thread-header {
@@ -1283,7 +1282,7 @@ vaadin-grid-tree-toggle[expanded] .nav-expand-icon {
.message-thread-scroller {
border: 1px solid var(--app-border-strong);
background: linear-gradient(180deg, rgba(239, 244, 255, 0.72), rgba(248, 250, 252, 0.92));
background: linear-gradient(180deg, rgba(249, 250, 251, 0.95), rgba(243, 244, 246, 0.88));
border-radius: 24px;
overflow-y: auto !important;
}
@@ -1342,8 +1341,8 @@ vaadin-grid-tree-toggle[expanded] .nav-expand-icon {
}
.message-bubble.client {
background: rgba(255, 255, 255, 0.96);
border: 1px solid var(--app-border-strong);
background: linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(241, 245, 249, 0.92));
border: 1px solid rgba(148, 163, 184, 0.25);
}
.message-bubble.server {

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

@@ -7,10 +7,11 @@ import com.vaadin.flow.component.UI;
import com.vaadin.flow.component.button.Button;
import com.vaadin.flow.component.dialog.Dialog;
import com.vaadin.flow.component.html.Div;
import com.vaadin.flow.component.html.H2;
import com.vaadin.flow.component.html.H1;
import com.vaadin.flow.component.html.Image;
import com.vaadin.flow.component.html.Main;
import com.vaadin.flow.component.html.Span;
import de.assecutor.votianlt.pages.base.ui.component.ViewToolbar;
import com.vaadin.flow.component.icon.VaadinIcon;
import com.vaadin.flow.component.notification.Notification;
import com.vaadin.flow.component.notification.NotificationVariant;
@@ -160,7 +161,7 @@ public class MessageDetailsView extends Main implements BeforeEnterObserver, Has
String conversationTitle = resolveConversationTitle(filteredMessages, conversationId);
HorizontalLayout headerLayout = createHeaderLayout(clientName, conversationTitle);
ViewToolbar headerLayout = createHeaderLayout(clientName, conversationTitle);
contentLayout.add(headerLayout);
// Store current messages for rendering and future updates
@@ -669,26 +670,34 @@ public class MessageDetailsView extends Main implements BeforeEnterObserver, Has
}
}
private HorizontalLayout createHeaderLayout(String clientName, String conversationTitle) {
private ViewToolbar createHeaderLayout(String clientName, String conversationTitle) {
// Create title with subtitle in a custom layout
VerticalLayout titleLayout = new VerticalLayout();
titleLayout.setPadding(false);
titleLayout.setSpacing(false);
H2 title = new H2(clientName);
title.getStyle().set("margin", "0");
H1 title = new H1(clientName);
title.addClassNames(com.vaadin.flow.theme.lumo.LumoUtility.FontSize.XLARGE, com.vaadin.flow.theme.lumo.LumoUtility.Margin.NONE, com.vaadin.flow.theme.lumo.LumoUtility.FontWeight.LIGHT);
title.addClassName("view-toolbar-title");
Span subtitle = new Span(conversationTitle);
subtitle.addClassName("message-subtitle");
titleLayout.add(title);
titleLayout.add(title, subtitle);
// Use ViewToolbar for consistent header layout with drawer toggle
ViewToolbar toolbar = new ViewToolbar("");
toolbar.getContent().removeAll();
HorizontalLayout layout = new HorizontalLayout(titleLayout);
layout.setWidthFull();
layout.setAlignItems(com.vaadin.flow.component.orderedlayout.FlexComponent.Alignment.CENTER);
layout.setSpacing(true);
layout.addClassName("message-thread-header");
// Build custom header content with drawer toggle
com.vaadin.flow.component.applayout.DrawerToggle drawerToggle = new com.vaadin.flow.component.applayout.DrawerToggle();
drawerToggle.addClassNames(com.vaadin.flow.theme.lumo.LumoUtility.Margin.NONE);
drawerToggle.addClassName("view-toolbar-toggle");
return layout;
com.vaadin.flow.component.html.Div titleRow = new com.vaadin.flow.component.html.Div(drawerToggle, titleLayout);
titleRow.addClassNames(com.vaadin.flow.theme.lumo.LumoUtility.Display.FLEX, com.vaadin.flow.theme.lumo.LumoUtility.AlignItems.CENTER);
titleRow.addClassName("view-toolbar-title-row");
toolbar.getContent().add(titleRow);
return toolbar;
}
private HorizontalLayout createMessageInputArea() {

15
src/main/java/de/assecutor/votianlt/pages/view/UserMessagesView.java
View File

@@ -6,6 +6,7 @@ import com.vaadin.flow.component.html.H2;
import com.vaadin.flow.component.html.H3;
import com.vaadin.flow.component.html.Main;
import com.vaadin.flow.component.html.Span;
import de.assecutor.votianlt.pages.base.ui.component.ViewToolbar;
import com.vaadin.flow.component.orderedlayout.HorizontalLayout;
import com.vaadin.flow.component.orderedlayout.VerticalLayout;
import com.vaadin.flow.router.BeforeEvent;
@@ -80,7 +81,7 @@ public class UserMessagesView extends Main implements HasUrlParameter<String>, H
String clientName = client != null ? client.getVorname() + " " + client.getNachname()
: Optional.ofNullable(participantKey).orElse(getTranslation("usermessages.unknown.participant"));
HorizontalLayout headerLayout = createHeaderLayout(clientName);
ViewToolbar headerLayout = createHeaderLayout(clientName);
contentLayout.add(headerLayout);
List<Message> conversation = messageService.getMessagesForAppUserAscending(participantKey);
@@ -91,16 +92,8 @@ public class UserMessagesView extends Main implements HasUrlParameter<String>, H
addJobMessagesTo(contentLayout, messagesByType.get(MessageType.JOB_RELATED));
}
private HorizontalLayout createHeaderLayout(String clientName) {
H2 title = new H2(getTranslation("usermessages.title.with", clientName));
HorizontalLayout layout = new HorizontalLayout(title);
layout.setWidthFull();
layout.setAlignItems(com.vaadin.flow.component.orderedlayout.FlexComponent.Alignment.CENTER);
layout.setSpacing(true);
layout.addClassName("message-thread-header");
return layout;
private ViewToolbar createHeaderLayout(String clientName) {
return new ViewToolbar(getTranslation("usermessages.title.with", clientName));
}
private void addGeneralMessagesTo(VerticalLayout target, List<Message> generalMessages) {