RecentRunner/group-2-threaded-project-petshop
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Polish chat ui

Browse Source
This commit is contained in:
Harkamal Randhawa
2026-03-11 14:06:22 -06:00
parent e0def0f5a9
commit 99fe718d2c
6 changed files with 132 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
src/main/java/org/example/petshopdesktop/api/ChatRealtimeClient.java
View File

@@ -37,6 +37,7 @@ public class ChatRealtimeClient implements WebSocket.Listener {
private Consumer<ConversationResponse> conversationListener;
private Consumer<MessageResponse> messageListener;
private Consumer<String> statusListener;
private volatile String currentStatus = "Chat disconnected";
private ChatRealtimeClient() {
this.httpClient = HttpClient.newBuilder()
@@ -58,6 +59,9 @@ public class ChatRealtimeClient implements WebSocket.Listener {
public void setStatusListener(Consumer<String> statusListener) {
this.statusListener = statusListener;
if (statusListener != null) {
statusListener.accept(currentStatus);
}
}
public void connect() {
@@ -286,6 +290,7 @@ public class ChatRealtimeClient implements WebSocket.Listener {
}
private void publishStatus(String status) {
currentStatus = status;
if (statusListener != null) {
statusListener.accept(status);
}

2
src/main/java/org/example/petshopdesktop/controllers/ChatController.java
View File

@@ -107,7 +107,7 @@ public class ChatController {
realtimeClient.setConversationListener(conversation -> Platform.runLater(() -> upsertConversation(conversation)));
realtimeClient.setMessageListener(message -> Platform.runLater(() -> appendMessageIfSelected(message)));
realtimeClient.setStatusListener(status -> Platform.runLater(() -> lblChatStatus.setText(status)));
realtimeClient.connect();
realtimeClient.subscribeToConversations();
loadCustomers();
loadConversations();

4
src/main/resources/org/example/petshopdesktop/main-layout-view.fxml
View File

@@ -12,7 +12,7 @@
<?import javafx.scene.layout.VBox?>
<?import javafx.scene.text.Font?>
<BorderPane maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="742.0" prefWidth="1069.0" xmlns="http://javafx.com/javafx/17" xmlns:fx="http://javafx.com/fxml/1" fx:controller="org.example.petshopdesktop.controllers.MainLayoutController">
<BorderPane maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="742.0" prefWidth="1069.0" stylesheets="@styles/desktop-ui.css" xmlns="http://javafx.com/javafx/17" xmlns:fx="http://javafx.com/fxml/1" fx:controller="org.example.petshopdesktop.controllers.MainLayoutController">
<left>
<VBox prefWidth="200.0" style="-fx-background-color: #2C3E50;" BorderPane.alignment="CENTER">
<children>
@@ -47,7 +47,7 @@
<Separator prefWidth="200.0" style="-fx-background-color: #444444; -fx-opacity: 0.35;" />
</children>
</VBox>
<ScrollPane fitToWidth="true" hbarPolicy="NEVER" style="-fx-background-color: #2C3E50; -fx-background: #2C3E50;" VBox.vgrow="ALWAYS">
<ScrollPane fitToWidth="true" hbarPolicy="NEVER" styleClass="sidebar-scroll-pane" style="-fx-background-color: #2C3E50; -fx-background: #2C3E50;" VBox.vgrow="ALWAYS">
<content>
<VBox spacing="6.0" style="-fx-background-color: #2C3E50;">
<padding>

4
src/main/resources/org/example/petshopdesktop/modelviews/analytics-view.fxml
View File

@@ -14,7 +14,7 @@
<?import javafx.scene.layout.VBox?>
<?import javafx.scene.text.Font?>
<VBox spacing="15.0" style="-fx-background-color: #f8fafc;" xmlns="http://javafx.com/javafx/21" xmlns:fx="http://javafx.com/fxml/1" fx:controller="org.example.petshopdesktop.controllers.AnalyticsController">
<VBox spacing="15.0" style="-fx-background-color: #f8fafc;" stylesheets="@../styles/desktop-ui.css" xmlns="http://javafx.com/javafx/21" xmlns:fx="http://javafx.com/fxml/1" fx:controller="org.example.petshopdesktop.controllers.AnalyticsController">
<padding>
<Insets bottom="20.0" left="20.0" right="20.0" top="20.0" />
</padding>
@@ -41,7 +41,7 @@
</font>
</Label>
<TabPane VBox.vgrow="ALWAYS">
<TabPane styleClass="analytics-tabs" VBox.vgrow="ALWAYS">
<Tab text="Overview" closable="false">
<VBox spacing="15.0">
<padding>

6
src/main/resources/org/example/petshopdesktop/modelviews/chat-view.fxml
View File

@@ -14,7 +14,7 @@
<?import javafx.scene.layout.VBox?>
<?import javafx.scene.text.Font?>
<BorderPane prefHeight="680.0" prefWidth="900.0" style="-fx-background-color: linear-gradient(to bottom right, #f8fafc, #e2e8f0);" xmlns="http://javafx.com/javafx/17" xmlns:fx="http://javafx.com/fxml/1" fx:controller="org.example.petshopdesktop.controllers.ChatController">
<BorderPane prefHeight="680.0" prefWidth="900.0" style="-fx-background-color: linear-gradient(to bottom right, #f8fafc, #e2e8f0);" stylesheets="@../styles/desktop-ui.css" xmlns="http://javafx.com/javafx/17" xmlns:fx="http://javafx.com/fxml/1" fx:controller="org.example.petshopdesktop.controllers.ChatController">
<left>
<VBox prefWidth="290.0" spacing="12.0" style="-fx-background-color: #ffffff; -fx-border-color: #dbe4ee; -fx-border-width: 0 1 0 0;">
<padding>
@@ -38,7 +38,7 @@
</HBox>
<Label fx:id="lblChatStatus" text="Connecting chat..." textFill="#64748b" />
<Separator />
<ListView fx:id="lvConversations" prefHeight="620.0" style="-fx-background-color: transparent; -fx-border-color: transparent;" VBox.vgrow="ALWAYS" />
<ListView fx:id="lvConversations" prefHeight="620.0" styleClass="chat-conversation-list" style="-fx-background-color: transparent; -fx-border-color: transparent;" VBox.vgrow="ALWAYS" />
</children>
</VBox>
</left>
@@ -53,7 +53,7 @@
<Font name="System Bold" size="24.0" />
</font>
</Label>
<ScrollPane fx:id="spMessages" fitToWidth="true" hbarPolicy="NEVER" style="-fx-background-color: transparent; -fx-background: transparent;" VBox.vgrow="ALWAYS">
<ScrollPane fx:id="spMessages" fitToWidth="true" hbarPolicy="NEVER" styleClass="chat-messages-scroll-pane" style="-fx-background-color: transparent; -fx-background: transparent;" VBox.vgrow="ALWAYS">
<content>
<VBox fx:id="vbMessages" spacing="10.0" style="-fx-background-color: rgba(255,255,255,0.72); -fx-background-radius: 18; -fx-padding: 18;" />
</content>

119
src/main/resources/org/example/petshopdesktop/styles/desktop-ui.css Normal file
View File

@@ -0,0 +1,119 @@
.sidebar-scroll-pane {
-fx-background-color: transparent;
-fx-background-insets: 0;
-fx-padding: 0 4 0 0;
}
.sidebar-scroll-pane > .viewport {
-fx-background-color: #2C3E50;
}
.sidebar-scroll-pane .scroll-bar:vertical,
.chat-conversation-list .scroll-bar:vertical,
.chat-messages-scroll-pane .scroll-bar:vertical {
-fx-background-color: transparent;
-fx-pref-width: 10;
-fx-padding: 0;
}
.sidebar-scroll-pane .scroll-bar:vertical .track,
.chat-conversation-list .scroll-bar:vertical .track,
.chat-messages-scroll-pane .scroll-bar:vertical .track {
-fx-background-color: rgba(148, 163, 184, 0.18);
-fx-background-radius: 999;
}
.sidebar-scroll-pane .scroll-bar:vertical .thumb,
.chat-conversation-list .scroll-bar:vertical .thumb,
.chat-messages-scroll-pane .scroll-bar:vertical .thumb {
-fx-background-color: rgba(203, 213, 225, 0.52);
-fx-background-radius: 999;
}
.sidebar-scroll-pane .scroll-bar:vertical .increment-button,
.sidebar-scroll-pane .scroll-bar:vertical .decrement-button,
.chat-conversation-list .scroll-bar:vertical .increment-button,
.chat-conversation-list .scroll-bar:vertical .decrement-button,
.chat-messages-scroll-pane .scroll-bar:vertical .increment-button,
.chat-messages-scroll-pane .scroll-bar:vertical .decrement-button {
-fx-padding: 0;
-fx-background-color: transparent;
}
.sidebar-scroll-pane .scroll-bar:vertical .increment-arrow,
.sidebar-scroll-pane .scroll-bar:vertical .decrement-arrow,
.chat-conversation-list .scroll-bar:vertical .increment-arrow,
.chat-conversation-list .scroll-bar:vertical .decrement-arrow,
.chat-messages-scroll-pane .scroll-bar:vertical .increment-arrow,
.chat-messages-scroll-pane .scroll-bar:vertical .decrement-arrow {
-fx-shape: '';
-fx-padding: 0;
}
.analytics-tabs {
-fx-tab-min-height: 34;
-fx-tab-max-height: 34;
}
.analytics-tabs > .tab-header-area {
-fx-padding: 0 0 8 0;
}
.analytics-tabs > .tab-header-area > .headers-region > .tab {
-fx-background-color: transparent;
-fx-background-radius: 12 12 0 0;
-fx-border-color: transparent transparent rgba(148, 163, 184, 0.35) transparent;
-fx-border-width: 0 0 2 0;
-fx-padding: 8 16 8 16;
}
.analytics-tabs > .tab-header-area > .headers-region > .tab:selected {
-fx-background-color: white;
-fx-border-color: transparent transparent #ff6b6b transparent;
-fx-effect: dropshadow(gaussian, rgba(15, 23, 42, 0.08), 10, 0.2, 0, 2);
}
.analytics-tabs > .tab-header-area > .headers-region > .tab .tab-label {
-fx-text-fill: #64748b;
-fx-font-weight: 700;
}
.analytics-tabs > .tab-header-area > .headers-region > .tab:selected .tab-label {
-fx-text-fill: #1f2937;
}
.analytics-tabs > .tab-header-area > .tab-header-background {
-fx-background-color: transparent;
}
.analytics-tabs > .tab-content-area {
-fx-background-color: transparent;
-fx-padding: 0;
}
.chat-conversation-list {
-fx-background-insets: 0;
-fx-background-color: transparent;
}
.chat-conversation-list .list-cell {
-fx-background-color: transparent;
-fx-background-radius: 14;
-fx-padding: 10 10 10 10;
}
.chat-conversation-list .list-cell:filled:selected,
.chat-conversation-list .list-cell:filled:hover {
-fx-background-color: #eef2ff;
}
.chat-conversation-list .list-cell:filled:selected {
-fx-border-color: #c7d2fe;
-fx-border-radius: 14;
-fx-background-insets: 0;
}
.chat-messages-scroll-pane,
.chat-messages-scroll-pane > .viewport {
-fx-background-color: transparent;
}