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, .view-toolbar,
.form-card, .form-card,
.message-section, .message-section,
.message-thread-layout,
.statistics-header, .statistics-header,
.statistics-input-panel { .statistics-input-panel {
padding: clamp(1rem, 1.8vw, 1.5rem); padding: clamp(1rem, 1.8vw, 1.5rem);
@@ -1265,12 +1264,12 @@ vaadin-grid-tree-toggle[expanded] .nav-expand-icon {
} }
.message-thread-layout { .message-thread-layout {
width: min(1240px, 100%); width: 100%;
margin: 0 auto; margin: 0;
border: 1px solid var(--app-border-strong); padding: 0;
background: rgba(255, 255, 255, 0.84); background: transparent;
box-shadow: var(--app-shadow-lg); border: none;
border-radius: 30px; box-shadow: none;
} }
.message-thread-header { .message-thread-header {
@@ -1283,7 +1282,7 @@ vaadin-grid-tree-toggle[expanded] .nav-expand-icon {
.message-thread-scroller { .message-thread-scroller {
border: 1px solid var(--app-border-strong); 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; border-radius: 24px;
overflow-y: auto !important; overflow-y: auto !important;
} }
@@ -1342,8 +1341,8 @@ vaadin-grid-tree-toggle[expanded] .nav-expand-icon {
} }
.message-bubble.client { .message-bubble.client {
background: rgba(255, 255, 255, 0.96); background: linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(241, 245, 249, 0.92));
border: 1px solid var(--app-border-strong); border: 1px solid rgba(148, 163, 184, 0.25);
} }
.message-bubble.server { .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.button.Button;
import com.vaadin.flow.component.dialog.Dialog; import com.vaadin.flow.component.dialog.Dialog;
import com.vaadin.flow.component.html.Div; 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.Image;
import com.vaadin.flow.component.html.Main; import com.vaadin.flow.component.html.Main;
import com.vaadin.flow.component.html.Span; 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.icon.VaadinIcon;
import com.vaadin.flow.component.notification.Notification; import com.vaadin.flow.component.notification.Notification;
import com.vaadin.flow.component.notification.NotificationVariant; import com.vaadin.flow.component.notification.NotificationVariant;
@@ -160,7 +161,7 @@ public class MessageDetailsView extends Main implements BeforeEnterObserver, Has
String conversationTitle = resolveConversationTitle(filteredMessages, conversationId); String conversationTitle = resolveConversationTitle(filteredMessages, conversationId);
HorizontalLayout headerLayout = createHeaderLayout(clientName, conversationTitle); ViewToolbar headerLayout = createHeaderLayout(clientName, conversationTitle);
contentLayout.add(headerLayout); contentLayout.add(headerLayout);
// Store current messages for rendering and future updates // 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(); VerticalLayout titleLayout = new VerticalLayout();
titleLayout.setPadding(false); titleLayout.setPadding(false);
titleLayout.setSpacing(false); titleLayout.setSpacing(false);
H2 title = new H2(clientName); H1 title = new H1(clientName);
title.getStyle().set("margin", "0"); 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); titleLayout.add(title);
subtitle.addClassName("message-subtitle");
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); // Build custom header content with drawer toggle
layout.setWidthFull(); com.vaadin.flow.component.applayout.DrawerToggle drawerToggle = new com.vaadin.flow.component.applayout.DrawerToggle();
layout.setAlignItems(com.vaadin.flow.component.orderedlayout.FlexComponent.Alignment.CENTER); drawerToggle.addClassNames(com.vaadin.flow.theme.lumo.LumoUtility.Margin.NONE);
layout.setSpacing(true); drawerToggle.addClassName("view-toolbar-toggle");
layout.addClassName("message-thread-header");
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() { 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.H3;
import com.vaadin.flow.component.html.Main; import com.vaadin.flow.component.html.Main;
import com.vaadin.flow.component.html.Span; 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.HorizontalLayout;
import com.vaadin.flow.component.orderedlayout.VerticalLayout; import com.vaadin.flow.component.orderedlayout.VerticalLayout;
import com.vaadin.flow.router.BeforeEvent; 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() String clientName = client != null ? client.getVorname() + " " + client.getNachname()
: Optional.ofNullable(participantKey).orElse(getTranslation("usermessages.unknown.participant")); : Optional.ofNullable(participantKey).orElse(getTranslation("usermessages.unknown.participant"));
HorizontalLayout headerLayout = createHeaderLayout(clientName); ViewToolbar headerLayout = createHeaderLayout(clientName);
contentLayout.add(headerLayout); contentLayout.add(headerLayout);
List<Message> conversation = messageService.getMessagesForAppUserAscending(participantKey); 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)); addJobMessagesTo(contentLayout, messagesByType.get(MessageType.JOB_RELATED));
} }
private HorizontalLayout createHeaderLayout(String clientName) { private ViewToolbar createHeaderLayout(String clientName) {
H2 title = new H2(getTranslation("usermessages.title.with", clientName)); return new ViewToolbar(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 void addGeneralMessagesTo(VerticalLayout target, List<Message> generalMessages) { private void addGeneralMessagesTo(VerticalLayout target, List<Message> generalMessages) {