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

Telegram features UI implemented.

Browse Source
This commit is contained in:
Asal Lotfi
2025-09-08 00:22:05 +03:30
parent ae9bcce964
commit 1594c43c95
5 changed files with 357 additions and 184 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/main/java/org/to/telegramfinalproject/UI/TelegramFeaturesController.java
+42
View File
@@ -0,0 +1,42 @@
package org.to.telegramfinalproject.UI;
import javafx.application.Platform;
import javafx.fxml.FXML;
import javafx.scene.control.ScrollPane;
import javafx.scene.input.MouseEvent;
import javafx.scene.layout.BorderPane;
import javafx.scene.layout.Pane;
import javafx.scene.layout.StackPane;
public class TelegramFeaturesController {
@FXML private Pane overlayBackground;
@FXML private ScrollPane featureScroll;
@FXML private StackPane rootOverlay;
@FXML private BorderPane contentCard;
@FXML
public void initialize() {
// Clicking background closes overlay
overlayBackground.setOnMouseClicked( e -> {
MainController.getInstance().closeOverlay(rootOverlay);
});
// Smooth scroll feel
featureScroll.getStylesheets().add(getClass().getResource("/org/to/telegramfinalproject/CSS/scrollpane.css").toExternalForm());
featureScroll.setPannable(true);
featureScroll.setFitToWidth(true);
featureScroll.setFitToHeight(false);
featureScroll.getContent().setOnScroll(event -> {
double deltaY = event.getDeltaY() * 0.003;
featureScroll.setVvalue(featureScroll.getVvalue() - deltaY);
});
// Register scene for ThemeManager → stylesheet swap will handle colors/icons
Platform.runLater(() -> {
if (contentCard.getScene() != null) {
ThemeManager.getInstance().registerScene(contentCard.getScene());
}
});
}
}
src/main/resources/org/to/telegramfinalproject/CSS/dark_theme.css
+77 -11
View File
@@ -1284,17 +1284,83 @@
.link-btn:hover {
-fx-underline: true;
}
/* ===== Dark theme overrides ===== */
.root.dark .tf-title { -fx-text-fill: #f3f4f6; }
.root.dark .tf-caption { -fx-text-fill: #b8bdc7; }
.root.dark .tf-item-desc { -fx-text-fill: #9ca3af; }
/* TitledPane header/content */
.root.dark .titled-pane > .title {
-fx-background-color: #2b2f33;
-fx-text-fill: #f3f4f6;
}
.root.dark .titled-pane > *.content {
-fx-background-color: #1f2327;
.overlay-background {
-fx-background-color: rgba(0,0,0,0.4);
}
.tf-root {
-fx-background-color: #1f2a36;
-fx-background-radius: 10;
-fx-padding: 16;
-fx-effect: dropshadow(gaussian, rgba(0,0,0,0.5), 10, 0, 0, 4);
}
.tf-toolbar {
-fx-padding: 8 12 8 12;
}
.tf-title {
-fx-font-size: 18px;
-fx-font-weight: bold;
-fx-text-fill: #229ED9; /* Telegram blue */
}
.tf-caption {
-fx-font-size: 12px;
-fx-text-fill: #aaa;
}
.tf-section {
-fx-spacing: 8;
-fx-padding: 8 0 8 0;
}
/* ScrollPane backgrounds */
.scroll-pane {
-fx-background-color: transparent;
-fx-background: transparent;
}
.scroll-pane .viewport {
-fx-background-color: transparent;
}
.tf-sections {
-fx-background-color: #1f2a36; /* same as .tf-root */
}
/* Section + item text colors */
.tf-section-title {
-fx-font-size: 14px;
-fx-font-weight: bold;
-fx-text-fill: #ffffff;
-fx-padding: 4 0 2 0;
-fx-border-color: #333;
-fx-border-width: 0 0 1 0;
}
.tf-item-title {
-fx-font-weight: bold;
-fx-font-size: 13px;
-fx-text-fill: #f5f5f5;
}
.tf-item-desc {
-fx-font-size: 12px;
-fx-text-fill: #cccccc;
}
.tf-status {
-fx-font-size: 11px;
-fx-padding: 2 6 2 6;
-fx-background-radius: 6;
}
.tf-status-available {
-fx-text-fill: #a5d6a7;
-fx-background-color: #1b5e20;
}
.tf-status-progress {
-fx-text-fill: #ffb74d;
-fx-background-color: #e65100;
}
src/main/resources/org/to/telegramfinalproject/CSS/light_theme.css
+73 -29
View File
@@ -1262,38 +1262,82 @@
.link-btn:hover {
-fx-underline: true;
}
/* ===== Base (shared) ===== */
.tf-root { -fx-background-color: transparent; }
.tf-toolbar { -fx-padding: 10 12; -fx-alignment: CENTER_LEFT; }
.tf-title { -fx-font-size: 18px; -fx-font-weight: 700; }
.tf-caption { -fx-opacity: .75; }
.tf-section { -fx-padding: 10 12 14 12; }
.tf-item-desc { -fx-wrap-text: true; -fx-font-size: 13px; -fx-line-spacing: 1; }
/* TitledPane (Accordion items) */
.titled-pane > .title {
-fx-padding: 10 12;
-fx-background-radius: 10;
}
.titled-pane > *.content {
-fx-background-radius: 10;
-fx-background-insets: 0;
-fx-padding: 8 4 12 4;
.overlay-background {
-fx-background-color: rgba(0,0,0,0.4);
}
/* ===== Light theme overrides ===== */
.root.light .tf-title { -fx-text-fill: #111111; }
.root.light .tf-caption { -fx-text-fill: #555555; }
.root.light .tf-item-desc { -fx-text-fill: #444444; }
/* TitledPane header/content */
.root.light .titled-pane > .title {
-fx-background-color: #f1f1f1;
-fx-text-fill: #111111;
}
.root.light .titled-pane > *.content {
.tf-root {
-fx-background-color: #ffffff;
-fx-background-radius: 10;
-fx-padding: 16;
-fx-effect: dropshadow(gaussian, rgba(0,0,0,0.2), 10, 0, 0, 4);
}
.tf-toolbar {
-fx-padding: 8 12 8 12;
}
.tf-title {
-fx-font-size: 18px;
-fx-font-weight: bold;
-fx-text-fill: #229ED9; /* Telegram blue */
}
.tf-caption {
-fx-font-size: 12px;
-fx-text-fill: #888;
}
/* ScrollPane backgrounds */
.scroll-pane {
-fx-background-color: transparent;
-fx-background: transparent;
}
.scroll-pane .viewport {
-fx-background-color: transparent;
}
.tf-sections {
-fx-background-color: transparent;
}
.tf-section {
-fx-spacing: 8;
-fx-padding: 8 0 8 0;
}
.tf-section-title {
-fx-font-size: 14px;
-fx-font-weight: bold;
-fx-text-fill: #2c2c2c;
-fx-padding: 4 0 2 0;
-fx-border-color: #ddd;
-fx-border-width: 0 0 1 0;
}
.tf-item-title {
-fx-font-weight: bold;
-fx-font-size: 13px;
}
.tf-item-desc {
-fx-font-size: 12px;
-fx-text-fill: #555;
}
.tf-status {
-fx-font-size: 11px;
-fx-padding: 2 6 2 6;
-fx-background-radius: 6;
}
.tf-status-available {
-fx-text-fill: #2e7d32;
-fx-background-color: #e8f5e9;
}
.tf-status-progress {
-fx-text-fill: #e65100;
-fx-background-color: #fff3e0;
}
src/main/resources/org/to/telegramfinalproject/Fxml/feature_FAQ.fxml
-144
View File
@@ -1,144 +0,0 @@
<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.geometry.Insets?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>
<BorderPane xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml"
styleClass="tf-root">
<top>
<HBox spacing="10" styleClass="tf-toolbar">
<children>
<Label text="Telegram FAQ" styleClass="tf-title"/>
<Region HBox.hgrow="ALWAYS"/>
<Label text="(frequently asked questions)" styleClass="tf-caption"/>
</children>
</HBox>
</top>
<center>
<ScrollPane fitToWidth="true" hbarPolicy="NEVER" vbarPolicy="AS_NEEDED">
<content>
<Accordion>
<panes>
<TitledPane text="1) How do I create a new account?">
<content>
<VBox spacing="6" styleClass="tf-section">
<children>
<Label wrapText="true" styleClass="tf-item-desc"
text="Download the Telegram app, enter your phone number, and confirm it with the SMS code. Then you can set up your name and profile picture."/>
</children>
</VBox>
</content>
</TitledPane>
<TitledPane text="2) How can I add a new contact?">
<content>
<VBox spacing="6" styleClass="tf-section">
<children>
<Label wrapText="true" styleClass="tf-item-desc"
text="Tap the menu, choose 'Contacts', then 'Add Contact'. Enter the phone number and name. Telegram will link it to their account automatically."/>
</children>
</VBox>
</content>
</TitledPane>
<TitledPane text="3) How do I start a private chat?">
<content>
<VBox spacing="6" styleClass="tf-section">
<children>
<Label wrapText="true" styleClass="tf-item-desc"
text="Open the contact’s profile and tap 'Message'. This will create a private chat window with them."/>
</children>
</VBox>
</content>
</TitledPane>
<TitledPane text="4) How can I create a group?">
<content>
<VBox spacing="6" styleClass="tf-section">
<children>
<Label wrapText="true" styleClass="tf-item-desc"
text="Go to the menu, select 'New Group', choose members, and set a group name and picture."/>
</children>
</VBox>
</content>
</TitledPane>
<TitledPane text="5) How do channels work?">
<content>
<VBox spacing="6" styleClass="tf-section">
<children>
<Label wrapText="true" styleClass="tf-item-desc"
text="Channels let you broadcast messages to large audiences. Only admins can post, but everyone who subscribes receives the updates."/>
</children>
</VBox>
</content>
</TitledPane>
<TitledPane text="6) How can I search for messages?">
<content>
<VBox spacing="6" styleClass="tf-section">
<children>
<Label wrapText="true" styleClass="tf-item-desc"
text="Use the search bar at the top of the chat list for global search, or use the search option inside a chat to find specific messages."/>
</children>
</VBox>
</content>
</TitledPane>
<TitledPane text="7) How do I delete or edit a message?">
<content>
<VBox spacing="6" styleClass="tf-section">
<children>
<Label wrapText="true" styleClass="tf-item-desc"
text="Long-press (or right-click) on your message. Choose 'Edit' to change it or 'Delete' to remove it. You can delete for yourself or for everyone if allowed."/>
</children>
</VBox>
</content>
</TitledPane>
<TitledPane text="8) How can I use reactions?">
<content>
<VBox spacing="6" styleClass="tf-section">
<children>
<Label wrapText="true" styleClass="tf-item-desc"
text="Tap and hold on a message, then choose an emoji reaction to express your feedback instantly."/>
</children>
</VBox>
</content>
</TitledPane>
<TitledPane text="9) How do I archive chats?">
<content>
<VBox spacing="6" styleClass="tf-section">
<children>
<Label wrapText="true" styleClass="tf-item-desc"
text="Swipe left on a chat (mobile) or right-click on it (desktop) and choose 'Archive'. Archived chats are hidden in a separate folder until a new message arrives."/>
</children>
</VBox>
</content>
</TitledPane>
<TitledPane text="10) How can I enable Dark Mode?">
<content>
<VBox spacing="6" styleClass="tf-section">
<children>
<Label wrapText="true" styleClass="tf-item-desc"
text="Open 'Settings' → 'Appearance' and switch between Light and Dark themes. You can also schedule it automatically."/>
</children>
</VBox>
</content>
</TitledPane>
</panes>
</Accordion>
</content>
</ScrollPane>
</center>
<padding>
<Insets top="8" right="8" bottom="8" left="8"/>
</padding>
</BorderPane>
src/main/resources/org/to/telegramfinalproject/Fxml/telegram_features.fxml
+165
View File
@@ -0,0 +1,165 @@
<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.scene.layout.*?>
<?import javafx.scene.control.*?>
<?import javafx.geometry.Insets?>
<StackPane xmlns:fx="http://javafx.com/fxml"
fx:id="rootOverlay"
fx:controller="org.to.telegramfinalproject.UI.TelegramFeaturesController"
styleClass="overlay-root">
<!-- Background (click to close) -->
<Pane fx:id="overlayBackground" styleClass="overlay-background"/>
<!-- Content card -->
<BorderPane fx:id="contentCard"
styleClass="tf-root"
maxWidth="700" maxHeight="520">
<!-- Header -->
<top>
<HBox spacing="10" styleClass="tf-toolbar">
<children>
<Label text="Telegram Features" styleClass="tf-title"/>
<Region HBox.hgrow="ALWAYS"/>
</children>
</HBox>
</top>
<!-- Scrollable content -->
<center>
<ScrollPane fx:id="featureScroll" fitToWidth="true" hbarPolicy="NEVER" vbarPolicy="AS_NEEDED">
<content>
<VBox spacing="24" styleClass="tf-sections">
<padding>
<Insets top="8" right="16" bottom="8" left="16"/>
</padding>
<!-- Section 1 -->
<VBox spacing="8" styleClass="tf-section">
<Label text="1) Account &amp; Authentication" styleClass="tf-section-title"/>
<VBox spacing="12">
<VBox>
<HBox spacing="8" alignment="CENTER_LEFT">
<Label text="Register, Login &amp; Logout" styleClass="tf-item-title"/>
<Label text="Available" styleClass="tf-status tf-status-available"/>
</HBox>
<Label text="Create account, sign in/out, and manage sessions (devices, multi-login prevention)." wrapText="true" styleClass="tf-item-desc"/>
</VBox>
<VBox>
<HBox spacing="8" alignment="CENTER_LEFT">
<Label text="Profile &amp; Presence" styleClass="tf-item-title"/>
<Label text="Available" styleClass="tf-status tf-status-available"/>
</HBox>
<Label text="Bio, photo, display name, user id, online / last seen." wrapText="true" styleClass="tf-item-desc"/>
</VBox>
</VBox>
</VBox>
<Separator/>
<!-- Section 2 -->
<VBox spacing="8" styleClass="tf-section">
<Label text="2) Contacts" styleClass="tf-section-title"/>
<VBox spacing="12">
<VBox>
<HBox spacing="8" alignment="CENTER_LEFT">
<Label text="Add / Remove Contacts" styleClass="tf-item-title"/>
<Label text="Available" styleClass="tf-status tf-status-available"/>
</HBox>
<Label text="Add, remove, and browse contacts with full profile view." wrapText="true" styleClass="tf-item-desc"/>
</VBox>
<VBox>
<HBox spacing="8" alignment="CENTER_LEFT">
<Label text="Block / Unblock" styleClass="tf-item-title"/>
<Label text="Available" styleClass="tf-status tf-status-available"/>
</HBox>
<Label text="Manage private chat access and visibility." wrapText="true" styleClass="tf-item-desc"/>
</VBox>
</VBox>
</VBox>
<Separator/>
<!-- Section 3 -->
<VBox spacing="8" styleClass="tf-section">
<Label text="3) Chats" styleClass="tf-section-title"/>
<VBox spacing="12">
<VBox>
<HBox spacing="8" alignment="CENTER_LEFT">
<Label text="Private Chats" styleClass="tf-item-title"/>
<Label text="Available" styleClass="tf-status tf-status-available"/>
</HBox>
<Label text="Create or open private chats (get_or_create_private_chat)." wrapText="true" styleClass="tf-item-desc"/>
</VBox>
<VBox>
<HBox spacing="8" alignment="CENTER_LEFT">
<Label text="Groups" styleClass="tf-item-title"/>
<Label text="Available" styleClass="tf-status tf-status-available"/>
</HBox>
<Label text="Create groups, add members, roles &amp; permissions, ownership transfer." wrapText="true" styleClass="tf-item-desc"/>
</VBox>
<VBox>
<HBox spacing="8" alignment="CENTER_LEFT">
<Label text="Channels" styleClass="tf-item-title"/>
<Label text="Available" styleClass="tf-status tf-status-available"/>
</HBox>
<Label text="Create channels, manage subscribers, admins, and ownership." wrapText="true" styleClass="tf-item-desc"/>
</VBox>
<VBox>
<HBox spacing="8" alignment="CENTER_LEFT">
<Label text="Saved Messages" styleClass="tf-item-title"/>
<Label text="Available" styleClass="tf-status tf-status-available"/>
</HBox>
<Label text="Personal cloud chat to keep your own notes and files." wrapText="true" styleClass="tf-item-desc"/>
</VBox>
<VBox>
<HBox spacing="8" alignment="CENTER_LEFT">
<Label text="Archive Chats" styleClass="tf-item-title"/>
<Label text="In Progress" styleClass="tf-status tf-status-progress"/>
</HBox>
<Label text="Move chats in/out of Archive for better organization." wrapText="true" styleClass="tf-item-desc"/>
</VBox>
</VBox>
</VBox>
<Separator/>
<!-- Section 4 -->
<VBox spacing="8" styleClass="tf-section">
<Label text="4) Messaging" styleClass="tf-section-title"/>
<VBox spacing="12">
<VBox>
<HBox spacing="8" alignment="CENTER_LEFT">
<Label text="Reply" styleClass="tf-item-title"/>
<Label text="Available" styleClass="tf-status tf-status-available"/>
</HBox>
<Label text="Quote and reply to a specific message." wrapText="true" styleClass="tf-item-desc"/>
</VBox>
<VBox>
<HBox spacing="8" alignment="CENTER_LEFT">
<Label text="Forward" styleClass="tf-item-title"/>
<Label text="Available" styleClass="tf-status tf-status-available"/>
</HBox>
<Label text="Send a message to another chat with source attribution." wrapText="true" styleClass="tf-item-desc"/>
</VBox>
</VBox>
</VBox>
</VBox>
</content>
</ScrollPane>
</center>
<padding>
<Insets top="8" right="8" bottom="8" left="8"/>
</padding>
</BorderPane>
</StackPane>