Main UI implemented.

2025-08-15 19:56:00 +03:30
parent 96fcfdd7c4
commit f80fd60a48
15 changed files with 438 additions and 49 deletions
@@ -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>