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/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
+59 -44
View File
@@ -6,56 +6,71 @@
<?import javafx.scene.layout.*?>
<?import javafx.scene.control.Separator?>
<VBox fx:id="sidebarRoot" spacing="20" alignment="TOP_LEFT"
prefWidth="250.0"
xmlns="http://javafx.com/javafx/17"
xmlns:fx="http://javafx.com/fxml"
fx:controller="org.to.telegramfinalproject.UI.SidebarMenuController">
<!-- 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"
prefWidth="250"
maxWidth="250"
style="-fx-background-color: #2c2c2c;">
<padding>
<Insets top="20" left="10" right="10" bottom="10"/>
</padding>
<!-- The actual VBox menu -->
<VBox fx:id="sidebarRoot"
spacing="20"
alignment="TOP_LEFT"
prefWidth="250">
<!-- Profile Section -->
<VBox alignment="TOP_LEFT" spacing="10">
<padding>
<Insets top="10" left="10" bottom="0" right="0"/>
<Insets top="20" left="10" right="10" bottom="10"/>
</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;"/>
</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"/>
<Button fx:id="newChannelButton" text=" New Channel" styleClass="sidebar-btn"/>
<Button fx:id="contactsButton" text=" Contacts" styleClass="sidebar-btn"/>
<Button fx:id="savedMessagesButton" text=" Saved Messages" styleClass="sidebar-btn"/>
<Button fx:id="settingsButton" text=" Settings" styleClass="sidebar-btn"/>
<Button fx:id="telegramFeaturesButton" text=" Telegram Features" styleClass="sidebar-btn"/>
<Button fx:id="telegramQnAButton" text=" Telegram Q&amp;A" styleClass="sidebar-btn"/>
<!-- Night Mode Toggle -->
<HBox spacing="10" alignment="CENTER_LEFT">
<!-- Profile Section -->
<VBox alignment="TOP_LEFT" spacing="10">
<padding>
<!-- Match button's left padding -->
<Insets left="15"/>
<Insets top="10" left="10" bottom="0" right="0"/>
</padding>
<ImageView fx:id="nightModeIcon" fitWidth="22" fitHeight="22" pickOnBounds="true" preserveRatio="true"/>
<Label text="Night Mode" textFill="white" style="-fx-font-size: 13px;"/>
<HBox fx:id="nightModeToggle" styleClass="telegram-toggle">
<Region fx:id="toggleThumb" styleClass="toggle-thumb"/>
<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">
<Separator orientation="HORIZONTAL" styleClass="thin-separator" />
<Button fx:id="myProfileButton" text=" My Profile" styleClass="sidebar-btn"/>
<Separator orientation="HORIZONTAL" styleClass="thin-separator" />
<Button fx:id="newGroupButton" text=" New Group" styleClass="sidebar-btn"/>
<Button fx:id="newChannelButton" text=" New Channel" styleClass="sidebar-btn"/>
<Button fx:id="contactsButton" text=" Contacts" styleClass="sidebar-btn"/>
<Button fx:id="savedMessagesButton" text=" Saved Messages" styleClass="sidebar-btn"/>
<Button fx:id="settingsButton" text=" Settings" styleClass="sidebar-btn"/>
<Button fx:id="telegramFeaturesButton" text=" Telegram Features" styleClass="sidebar-btn"/>
<Button fx:id="telegramQnAButton" text=" Telegram Q&amp;A" styleClass="sidebar-btn"/>
<!-- Night Mode Toggle -->
<HBox spacing="10" alignment="CENTER_LEFT">
<padding>
<Insets left="15"/>
</padding>
<ImageView fx:id="nightModeIcon" fitWidth="22" fitHeight="22" pickOnBounds="true" preserveRatio="true"/>
<Label text="Night Mode" textFill="white" style="-fx-font-size: 13px;"/>
<HBox fx:id="nightModeToggle" styleClass="telegram-toggle">
<Region fx:id="toggleThumb" styleClass="toggle-thumb"/>
</HBox>
</HBox>
</HBox>
</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>
</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