Partow/Telegram-Final-Project
1
1
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Main UI implemented.

Browse Source
This commit is contained in:
Asal Lotfi
2025-08-15 19:56:00 +03:30
parent 96fcfdd7c4
commit f80fd60a48
15 changed files with 438 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/main/java/org/to/telegramfinalproject/UI/ChatItemController.java
+26
View File
@@ -0,0 +1,26 @@
package org.to.telegramfinalproject.UI;
import javafx.fxml.FXML;
import javafx.fxml.FXMLLoader;
import javafx.scene.Node;
import javafx.scene.control.Label;
import javafx.scene.image.ImageView;
import java.io.IOException;
public class ChatItemController {
@FXML private ImageView profileImage;
@FXML private Label chatName;
@FXML private Label lastMessage;
@FXML private Label chatTime;
@FXML private Label unreadCount;
public void setChatData(String name, String lastMsg, String time, int unread) {
chatName.setText(name);
lastMessage.setText(lastMsg);
chatTime.setText(time);
unreadCount.setVisible(unread > 0);
unreadCount.setText(String.valueOf(unread));
}
}
src/main/java/org/to/telegramfinalproject/UI/MainController.java
+211
View File
@@ -0,0 +1,211 @@
package org.to.telegramfinalproject.UI;
import javafx.animation.TranslateTransition;
import javafx.application.Platform;
import javafx.fxml.FXML;
import javafx.fxml.FXMLLoader;
import javafx.geometry.Pos;
import javafx.scene.Node;
import javafx.scene.control.Button;
import javafx.scene.control.ScrollPane;
import javafx.scene.control.SplitPane;
import javafx.scene.control.TextField;
import javafx.scene.image.Image;
import javafx.scene.image.ImageView;
import javafx.scene.layout.BorderPane;
import javafx.scene.layout.Pane;
import javafx.scene.layout.StackPane;
import javafx.scene.layout.VBox;
import javafx.util.Duration;
import java.io.IOException;
public class MainController {
@FXML private StackPane mainRoot;
@FXML private VBox chatListContainer;
@FXML private StackPane chatDisplayArea;
@FXML private Pane overlay;
@FXML private ImageView menuIcon;
@FXML private ScrollPane scrollPane;
@FXML private SplitPane mainSplitPane;
@FXML private VBox leftPane;
@FXML private Button menuButton;
@FXML private TextField searchBar;
private Node sidebarRoot;
private boolean isSidebarOpen = false;
// Add ThemeManager handle
private final ThemeManager themeManager = ThemeManager.getInstance();
@FXML
public void initialize() {
addSampleChats();
// Register the scene for automatic CSS updates
Platform.runLater(() -> {
ThemeManager.getInstance().registerScene(mainRoot.getScene());
});
// Listen for theme changes to update icons & labels manually
ThemeManager.getInstance().darkModeProperty().addListener((obs, oldVal, newVal) -> {
if (newVal) {
// Dark mode ON
updateIconsForDarkMode();
updateLabelsForDarkMode();
} else {
// Light mode ON
updateIconsForLightMode();
updateLabelsForLightMode();
}
});
// Smooth scroll feel
scrollPane.getStylesheets().add(getClass().getResource("/org/to/telegramfinalproject/CSS/scrollpane.css").toExternalForm());
scrollPane.setPannable(true);
scrollPane.setFitToWidth(true);
scrollPane.setFitToHeight(false);
scrollPane.getContent().setOnScroll(event -> {
double deltaY = event.getDeltaY() * 0.003; // smaller = smoother
scrollPane.setVvalue(scrollPane.getVvalue() - deltaY);
});
// ---------- SplitPane limits so panes can't fully collapse ----------
leftPane.setMinWidth(72); // avatars-only collapse
chatDisplayArea.setMinWidth(360); // chat area never fully collapses
mainSplitPane.widthProperty().addListener((o, ov, nv) -> clampDivider());
if (!mainSplitPane.getDividers().isEmpty()) {
mainSplitPane.getDividers().get(0).positionProperty().addListener((o, ov, nv) -> clampDivider());
}
}
private void addSampleChats() {
addChat("Archived Chats", "Your archived chats", "10:45", 0);
addChat("Saved Messages", "Keep messages for later", "Yesterday", 0);
addChat("Alice", "Hey, how are you?", "14:12", 3);
addChat("Bob", "Let's meet tomorrow", "12:08", 1);
addChat("Alice", "Hey, how are you?", "14:12", 3);
addChat("Bob", "Let's meet tomorrow", "12:08", 1);
addChat("Alice", "Hey, how are you?", "14:12", 3);
addChat("Bob", "Let's meet tomorrow", "12:08", 1);
addChat("Alice", "Hey, how are you?", "14:12", 3);
addChat("Bob", "Let's meet tomorrow", "12:08", 1);
addChat("Alice", "Hey, how are you?", "14:12", 3);
addChat("Bob", "Let's meet tomorrow", "12:08", 1);
addChat("Alice", "Hey, how are you?", "14:12", 3);
addChat("Bob", "Let's meet tomorrow", "12:08", 1);
addChat("Alice", "Hey, how are you?", "14:12", 3);
addChat("Bob", "Let's meet tomorrow", "12:08", 1);
addChat("Alice", "Hey, how are you?", "14:12", 3);
addChat("Bob", "Let's meet tomorrow", "12:08", 1);
}
private void addChat(String name, String lastMsg, String time, int unread) {
try {
FXMLLoader loader = new FXMLLoader(getClass().getResource("/org/to/telegramfinalproject/Fxml/chat_item.fxml"));
Node chatItem = loader.load();
ChatItemController controller = loader.getController();
controller.setChatData(name, lastMsg, time, unread);
chatItem.setOnMouseClicked(e -> openChat(name));
chatListContainer.getChildren().add(chatItem);
} catch (IOException e) {
e.printStackTrace();
}
}
private void openChat(String chatName) {
chatDisplayArea.getChildren().clear();
chatDisplayArea.getChildren().add(new javafx.scene.control.Label("Chat with " + chatName));
}
@FXML
private void toggleSidebar() {
if (isSidebarOpen) {
closeSidebar();
} else {
openSidebar();
}
}
@FXML
private void openSidebar() {
try {
if (sidebarRoot == null) {
sidebarRoot = FXMLLoader.load(getClass().getResource("/org/to/telegramfinalproject/Fxml/Sidebar_menu.fxml"));
StackPane.setAlignment(sidebarRoot, Pos.CENTER_LEFT);
sidebarRoot.setTranslateX(-getSidebarWidth());
mainRoot.getChildren().add(sidebarRoot);
}
TranslateTransition slideIn = new TranslateTransition(Duration.millis(250), sidebarRoot);
slideIn.setToX(0);
slideIn.play();
overlay.setVisible(true);
overlay.setMouseTransparent(false);
isSidebarOpen = true;
} catch (IOException e) {
e.printStackTrace();
}
}
@FXML
private void closeSidebar() {
if (sidebarRoot != null && isSidebarOpen) {
TranslateTransition slideOut = new TranslateTransition(Duration.millis(250), sidebarRoot);
slideOut.setToX(-getSidebarWidth());
slideOut.setOnFinished(e -> {
overlay.setVisible(false);
overlay.setMouseTransparent(true);
isSidebarOpen = false;
});
slideOut.play();
}
}
private double getSidebarWidth() {
return 250; // Sidebar width in px
}
private void clampDivider() {
if (mainSplitPane.getDividers().isEmpty()) return;
double totalW = mainSplitPane.getWidth();
if (totalW <= 0) return;
double leftMinRatio = leftPane.getMinWidth() / totalW;
double rightMinRatio = chatDisplayArea.getMinWidth() / totalW;
double maxLeftRatio = 1.0 - rightMinRatio;
SplitPane.Divider d = mainSplitPane.getDividers().get(0);
double p = d.getPosition();
if (p < leftMinRatio) {
d.setPosition(leftMinRatio);
} else if (p > maxLeftRatio) {
d.setPosition(maxLeftRatio);
}
}
private void updateIconsForDarkMode() {
// Example: switch images to white versions
menuIcon.setImage(new Image(getClass().getResourceAsStream("/org/to/telegramfinalproject/Icons/menu_light.png")));
}
private void updateIconsForLightMode() {
// Example: switch images to black versions
menuIcon.setImage(new Image(getClass().getResourceAsStream("/org/to/telegramfinalproject/Icons/menu_dark.png")));
}
private void updateLabelsForDarkMode() {
//myLabel.setStyle("-fx-text-fill: white;");
}
private void updateLabelsForLightMode() {
//myLabel.setStyle("-fx-text-fill: black;");
}
}
src/main/java/org/to/telegramfinalproject/UI/SidebarMenuController.java
+3 -3
View File
@@ -42,7 +42,7 @@ public class SidebarMenuController {
@FXML
public void initialize() {
// Load default profile image (if present)
// Load default profile image
Image profile = loadImage("/org/to/telegramfinalproject/Images/profile.png");
if (profile != null) profileImage.setImage(profile);
@@ -55,8 +55,7 @@ public class SidebarMenuController {
// 1) Register with ThemeManager so this scene auto-updates on theme changes
themeManager.registerScene(newScene);
// 2) Make sure we start in LIGHT mode (if that's what you want)
// (If you already set the initial mode elsewhere, remove the next line)
// 2) Make sure we start in LIGHT mode
themeManager.setDarkMode(false);
// 3) Sync icons & toggle with current mode
@@ -93,6 +92,7 @@ public class SidebarMenuController {
// Update the global theme via ThemeManager
themeManager.setDarkMode(newDark);
themeManager.applyThemeToAll();
// Animate the thumb to its new position (listener will handle icons & final position sync)
syncToggleVisual(newDark, /*animate=*/true);
src/main/java/org/to/telegramfinalproject/UI/TelegramApplication.java
+1 -1
View File
@@ -11,7 +11,7 @@ import java.io.IOException;
public class TelegramApplication extends Application {
@Override
public void start(Stage stage) throws IOException {
FXMLLoader fxmlLoader = new FXMLLoader(TelegramApplication.class.getResource("/org/to/telegramfinalproject/Fxml/sidebar_menu.fxml"));
FXMLLoader fxmlLoader = new FXMLLoader(TelegramApplication.class.getResource("/org/to/telegramfinalproject/Fxml/main.fxml"));
Scene scene = new Scene(fxmlLoader.load(), 1480, 820);
scene.getStylesheets().add(getClass().getResource("/org/to/telegramfinalproject/CSS/light_theme.css").toExternalForm());
src/main/java/org/to/telegramfinalproject/UI/ThemeManager.java
+1 -1
View File
@@ -41,7 +41,7 @@ public class ThemeManager {
}
}
private void applyThemeToAll() {
public void applyThemeToAll() {
for (Scene scene : registeredScenes) {
applyTheme(scene);
}
src/main/resources/org/to/telegramfinalproject/CSS/dark_theme.css
+8
View File
@@ -50,3 +50,11 @@
.button, .label {
-fx-text-fill: white;
}
/* Thin Telegram-like SplitPane divider (dark) */
.split-pane:horizontal > .split-pane-divider {
-fx-background-color: transparent; /* no big solid block */
-fx-border-color: #cccccc; /* the visible thin line */
-fx-border-width: 0 1px 0 1px; /* 1px vertical line */
-fx-padding: 0 0 0 0.5px; /* big invisible hitbox for the mouse */
}
src/main/resources/org/to/telegramfinalproject/CSS/light_theme.css
+8
View File
@@ -50,3 +50,11 @@
.button, .label {
-fx-text-fill: black;
}
/* Thin Telegram-like SplitPane divider (light) */
.split-pane:horizontal > .split-pane-divider {
-fx-background-color: transparent; /* no big solid block */
-fx-border-color: #cccccc; /* the visible thin line */
-fx-border-width: 0 1px 0 1px; /* 1px vertical line */
-fx-padding: 0 0 0 0.5px; /* big invisible hitbox for the mouse */
}
src/main/resources/org/to/telegramfinalproject/CSS/scrollpane.css
+22
View File
@@ -0,0 +1,22 @@
.scroll-pane > .viewport {
-fx-background-color: transparent; /* No background behind content */
}
.scroll-pane .scroll-bar {
-fx-background-color: transparent; /* Remove background bar */
-fx-opacity: 0; /* Initially hidden */
-fx-padding: 0;
-fx-pref-width: 6px; /* Thinner scrollbar */
-fx-background-insets: 0;
-fx-background-radius: 3px;
-fx-transition: opacity 0.3s ease;
}
.scroll-pane:hover .scroll-bar {
-fx-opacity: 0.6; /* Show on hover */
}
.scroll-pane .thumb {
-fx-background-color: rgba(100, 100, 100, 0.5); /* Semi-transparent thumb */
-fx-background-radius: 3px;
}
src/main/resources/org/to/telegramfinalproject/Fxml/chat_item.fxml
+30
View File
@@ -0,0 +1,30 @@
<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.geometry.Insets?>
<?import javafx.scene.control.Label?>
<?import javafx.scene.image.ImageView?>
<?import javafx.scene.layout.*?>
<HBox xmlns:fx="http://javafx.com/fxml"
fx:controller="org.to.telegramfinalproject.UI.ChatItemController"
spacing="10" alignment="CENTER_LEFT"
style="-fx-padding: 10; -fx-background-color: white; -fx-border-color: #ddd; -fx-border-width: 0 0 1 0;">
<!-- Profile Image -->
<ImageView fx:id="profileImage" fitWidth="40" fitHeight="40" preserveRatio="true"
style="-fx-background-radius: 50; -fx-border-radius: 50;"/>
<!-- Chat Details -->
<VBox alignment="CENTER_LEFT" HBox.hgrow="ALWAYS">
<Label fx:id="chatName" style="-fx-font-size: 14; -fx-font-weight: bold;"/>
<Label fx:id="lastMessage" style="-fx-text-fill: gray; -fx-font-size: 12;"/>
</VBox>
<!-- Time + Unread -->
<VBox alignment="CENTER_RIGHT" spacing="5">
<Label fx:id="chatTime" style="-fx-font-size: 11; -fx-text-fill: gray;"/>
<Label fx:id="unreadCount"
style="-fx-background-color: #2196f3; -fx-text-fill: white; -fx-font-size: 10;
-fx-padding: 3 6; -fx-background-radius: 10;"/>
</VBox>
</HBox>
src/main/resources/org/to/telegramfinalproject/Fxml/main.fxml
+69
View File
@@ -0,0 +1,69 @@
<?xml version="1.0" encoding="UTF-8"?>
<?import java.lang.*?>
<?import javafx.geometry.*?>
<?import javafx.scene.text.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.image.*?>
<?import javafx.scene.layout.*?>
<?import javafx.scene.text.Font?>
<StackPane fx:id="mainRoot" xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1" fx:controller="org.to.telegramfinalproject.UI.MainController">
<children>
<!-- Use SplitPane so the two sides are resizable -->
<SplitPane fx:id="mainSplitPane" dividerPositions="0.32" orientation="HORIZONTAL" prefHeight="700" prefWidth="1100" styleClass="thin-splitpane">
<items>
<!-- LEFT: Chat list -->
<VBox fx:id="leftPane" minWidth="72" spacing="10" style="-fx-background-color: #FFFFFF;"> <!-- keep at least avatar width when collapsed -->
<children>
<HBox spacing="10">
<padding>
<Insets bottom="10" left="10" right="10" top="10" />
</padding>
<children>
<Button fx:id="menuButton" minHeight="29.0" minWidth="40" onAction="#toggleSidebar" prefHeight="29.0" prefWidth="40.0" style="-fx-background-color: transparent;">
<graphic>
<ImageView fx:id="menuIcon" fitHeight="24" fitWidth="17" preserveRatio="true" smooth="true">
<image>
<Image url="@/org/to/telegramfinalproject/Icons/menu_dark.png" />
</image>
</ImageView>
</graphic>
</Button>
<TextField fx:id="searchBar" prefHeight="36" prefWidth="430.0" promptText="Search" style="-fx-background-color: #f5f5f5; -fx-background-radius: 15;" />
</children>
</HBox>
<ScrollPane fx:id="scrollPane" fitToWidth="true" hbarPolicy="NEVER" style="-fx-background-color: transparent;" vbarPolicy="AS_NEEDED">
<content>
<VBox fx:id="chatListContainer" spacing="5" style="-fx-background-color: transparent;">
<padding>
<Insets bottom="10" left="10" right="10" top="10" />
</padding>
</VBox>
</content>
</ScrollPane>
</children>
</VBox>
<!-- RIGHT: Chat panel -->
<StackPane fx:id="chatDisplayArea" minWidth="360" style="-fx-background-color: #FAFAFA;"> <!-- don't let chat page collapse -->
<children>
<Label style="-fx-text-fill: #888888;" text="Select a chat to start messaging">
<font>
<Font size="15" />
</font>
</Label>
</children>
</StackPane>
</items>
</SplitPane>
<!-- Overlay (for sidebar) -->
<Pane fx:id="overlay" mouseTransparent="true" onMouseClicked="#closeSidebar" style="-fx-background-color: rgba(0,0,0,0.3);" visible="false" />
</children>
</StackPane>
src/main/resources/org/to/telegramfinalproject/Fxml/sidebar_menu.fxml
+25 -10
View File
@@ -6,35 +6,44 @@
<?import javafx.scene.layout.*?>
<?import javafx.scene.control.Separator?>
<VBox fx:id="sidebarRoot" spacing="20" alignment="TOP_LEFT"
prefWidth="250.0"
<!-- Sidebar Menu -->
<StackPane fx:id="sidebarContainer"
xmlns="http://javafx.com/javafx/17"
xmlns:fx="http://javafx.com/fxml"
fx:controller="org.to.telegramfinalproject.UI.SidebarMenuController">
fx:controller="org.to.telegramfinalproject.UI.SidebarMenuController"
prefWidth="250"
maxWidth="250"
style="-fx-background-color: #2c2c2c;">
<!-- The actual VBox menu -->
<VBox fx:id="sidebarRoot"
spacing="20"
alignment="TOP_LEFT"
prefWidth="250">
<padding>
<Insets top="20" left="10" right="10" bottom="10"/>
</padding>
<!-- Profile Section -->
<VBox alignment="TOP_LEFT" spacing="10">
<padding>
<Insets top="10" left="10" bottom="0" right="0"/>
</padding>
<ImageView fx:id="profileImage" fitWidth="80" fitHeight="80" pickOnBounds="true" preserveRatio="true"/>
<Label fx:id="usernameLabel" text=" Asal Lotfi" textFill="white" style="-fx-font-size: 14px; -fx-font-weight: bold;"/>
<ImageView fx:id="profileImage" fitWidth="80" fitHeight="80"
pickOnBounds="true" preserveRatio="true"/>
<Label fx:id="usernameLabel" text=" Asal Lotfi"
textFill="white"
style="-fx-font-size: 14px; -fx-font-weight: bold;"/>
</VBox>
<!-- Menu Buttons -->
<VBox spacing="8" alignment="TOP_LEFT">
<!-- Thin Telegram-style line -->
<Separator orientation="HORIZONTAL" styleClass="thin-separator" />
<Button fx:id="myProfileButton" text=" My Profile" styleClass="sidebar-btn"/>
<!-- Thin Telegram-style line -->
<Separator orientation="HORIZONTAL" styleClass="thin-separator" />
<Button fx:id="newGroupButton" text=" New Group" styleClass="sidebar-btn"/>
@@ -48,7 +57,6 @@
<!-- Night Mode Toggle -->
<HBox spacing="10" alignment="CENTER_LEFT">
<padding>
<!-- Match button's left padding -->
<Insets left="15"/>
</padding>
<ImageView fx:id="nightModeIcon" fitWidth="22" fitHeight="22" pickOnBounds="true" preserveRatio="true"/>
@@ -58,4 +66,11 @@
</HBox>
</HBox>
</VBox>
</VBox>
<!-- Push footer to bottom -->
<Pane VBox.vgrow="ALWAYS" />
<!-- Footer label -->
<Label text="Telegram Desktop"
style="-fx-font-size: 12px; -fx-text-fill: #888; -fx-padding: 10;" />
</VBox>
</StackPane>
src/main/resources/org/to/telegramfinalproject/Icons/archived_chats_dark.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 364 B

src/main/resources/org/to/telegramfinalproject/Icons/archived_chats_light.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 319 B

src/main/resources/org/to/telegramfinalproject/Icons/menu_dark.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 156 B

src/main/resources/org/to/telegramfinalproject/Icons/menu_light.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 124 B