diff --git a/src/main/frontend/themes/votian-modern/styles.css b/src/main/frontend/themes/votian-modern/styles.css index db6667f..2b4b0c4 100644 --- a/src/main/frontend/themes/votian-modern/styles.css +++ b/src/main/frontend/themes/votian-modern/styles.css @@ -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 { 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 5fbb895..736e0a7 100644 --- a/src/main/java/de/assecutor/votianlt/pages/view/MessageDetailsView.java +++ b/src/main/java/de/assecutor/votianlt/pages/view/MessageDetailsView.java @@ -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() { diff --git a/src/main/java/de/assecutor/votianlt/pages/view/UserMessagesView.java b/src/main/java/de/assecutor/votianlt/pages/view/UserMessagesView.java index 51e84cb..8ce129a 100644 --- a/src/main/java/de/assecutor/votianlt/pages/view/UserMessagesView.java +++ b/src/main/java/de/assecutor/votianlt/pages/view/UserMessagesView.java @@ -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, 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 conversation = messageService.getMessagesForAppUserAscending(participantKey); @@ -91,16 +92,8 @@ public class UserMessagesView extends Main implements HasUrlParameter, 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 generalMessages) {