Telegram Q&A UI implemented.
This commit is contained in:
Asal Lotfi
@@ -364,10 +364,31 @@ public class SidebarMenuController {
|
||||
}
|
||||
}
|
||||
|
||||
private void openTelegramFeatures() { System.out.println("Opening Telegram Features..."); }
|
||||
private void openTelegramQnA() { System.out.println("Opening Telegram Q&A..."); }
|
||||
private void openTelegramFeatures() {
|
||||
try {
|
||||
FXMLLoader loader = new FXMLLoader(getClass().getResource(
|
||||
"/org/to/telegramfinalproject/Fxml/telegram_features.fxml"));
|
||||
Node featuresOverlay = loader.load();
|
||||
|
||||
MainController.getInstance().showOverlay(featuresOverlay);
|
||||
|
||||
} catch (IOException e) {
|
||||
e.printStackTrace();
|
||||
}
|
||||
}
|
||||
|
||||
private void openTelegramQnA() {
|
||||
try {
|
||||
FXMLLoader loader = new FXMLLoader(getClass().getResource(
|
||||
"/org/to/telegramfinalproject/Fxml/telegram_qna.fxml"));
|
||||
Node qnaOverlay = loader.load();
|
||||
|
||||
MainController.getInstance().showOverlay(qnaOverlay);
|
||||
|
||||
} catch (IOException e) {
|
||||
e.printStackTrace();
|
||||
}
|
||||
}
|
||||
|
||||
public void setUserFromSession(JSONObject user) {
|
||||
if (user == null) return;
|
||||
|
||||
@@ -0,0 +1,41 @@
|
||||
package org.to.telegramfinalproject.UI;
|
||||
|
||||
import javafx.application.Platform;
|
||||
import javafx.fxml.FXML;
|
||||
import javafx.scene.control.ScrollPane;
|
||||
import javafx.scene.layout.BorderPane;
|
||||
import javafx.scene.layout.Pane;
|
||||
import javafx.scene.layout.StackPane;
|
||||
|
||||
public class TelegramQnAController {
|
||||
|
||||
@FXML private StackPane rootOverlay;
|
||||
@FXML private Pane overlayBackground;
|
||||
@FXML private ScrollPane qnaScroll;
|
||||
@FXML private BorderPane contentCard;
|
||||
|
||||
@FXML
|
||||
private void initialize() {
|
||||
// Clicking outside closes overlay
|
||||
overlayBackground.setOnMouseClicked(e ->
|
||||
MainController.getInstance().closeOverlay(rootOverlay)
|
||||
);
|
||||
|
||||
// Smooth scroll feel
|
||||
qnaScroll.getStylesheets().add(getClass().getResource("/org/to/telegramfinalproject/CSS/scrollpane.css").toExternalForm());
|
||||
qnaScroll.setPannable(true);
|
||||
qnaScroll.setFitToWidth(true);
|
||||
qnaScroll.setFitToHeight(false);
|
||||
qnaScroll.getContent().setOnScroll(event -> {
|
||||
double deltaY = event.getDeltaY() * 0.003;
|
||||
qnaScroll.setVvalue(qnaScroll.getVvalue() - deltaY);
|
||||
});
|
||||
|
||||
// Register scene for ThemeManager → stylesheet swap will handle colors/icons
|
||||
Platform.runLater(() -> {
|
||||
if (contentCard.getScene() != null) {
|
||||
ThemeManager.getInstance().registerScene(contentCard.getScene());
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,108 @@
|
||||
<?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.TelegramQnAController"
|
||||
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 FAQ" styleClass="tf-title"/>
|
||||
<Region HBox.hgrow="ALWAYS"/>
|
||||
<Label text="(frequently asked questions)" styleClass="tf-caption"/>
|
||||
</children>
|
||||
</HBox>
|
||||
</top>
|
||||
|
||||
<!-- Scrollable content -->
|
||||
<center>
|
||||
<ScrollPane fx:id="qnaScroll" fitToWidth="true" hbarPolicy="NEVER" vbarPolicy="AS_NEEDED">
|
||||
<content>
|
||||
<VBox spacing="20" styleClass="tf-sections">
|
||||
<padding>
|
||||
<Insets top="8" right="16" bottom="8" left="16"/>
|
||||
</padding>
|
||||
|
||||
<!-- FAQ Item -->
|
||||
<VBox spacing="6" styleClass="tf-section">
|
||||
<Label text="1) How do I create a new account?" styleClass="tf-section-title"/>
|
||||
<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."/>
|
||||
</VBox>
|
||||
|
||||
<VBox spacing="6" styleClass="tf-section">
|
||||
<Label text="2) How can I add a new contact?" styleClass="tf-section-title"/>
|
||||
<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."/>
|
||||
</VBox>
|
||||
|
||||
<VBox spacing="6" styleClass="tf-section">
|
||||
<Label text="3) How do I start a private chat?" styleClass="tf-section-title"/>
|
||||
<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."/>
|
||||
</VBox>
|
||||
|
||||
<VBox spacing="6" styleClass="tf-section">
|
||||
<Label text="4) How can I create a group?" styleClass="tf-section-title"/>
|
||||
<Label wrapText="true" styleClass="tf-item-desc"
|
||||
text="Go to the menu, select 'New Group', choose members, and set a group name and picture."/>
|
||||
</VBox>
|
||||
|
||||
<VBox spacing="6" styleClass="tf-section">
|
||||
<Label text="5) How do channels work?" styleClass="tf-section-title"/>
|
||||
<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."/>
|
||||
</VBox>
|
||||
|
||||
<VBox spacing="6" styleClass="tf-section">
|
||||
<Label text="6) How can I search for messages?" styleClass="tf-section-title"/>
|
||||
<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."/>
|
||||
</VBox>
|
||||
|
||||
<VBox spacing="6" styleClass="tf-section">
|
||||
<Label text="7) How do I delete or edit a message?" styleClass="tf-section-title"/>
|
||||
<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."/>
|
||||
</VBox>
|
||||
|
||||
<VBox spacing="6" styleClass="tf-section">
|
||||
<Label text="8) How can I use reactions?" styleClass="tf-section-title"/>
|
||||
<Label wrapText="true" styleClass="tf-item-desc"
|
||||
text="Tap and hold on a message, then choose an emoji reaction to express your feedback instantly."/>
|
||||
</VBox>
|
||||
|
||||
<VBox spacing="6" styleClass="tf-section">
|
||||
<Label text="9) How do I archive chats?" styleClass="tf-section-title"/>
|
||||
<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."/>
|
||||
</VBox>
|
||||
|
||||
<VBox spacing="6" styleClass="tf-section">
|
||||
<Label text="10) How can I enable Dark Mode?" styleClass="tf-section-title"/>
|
||||
<Label wrapText="true" styleClass="tf-item-desc"
|
||||
text="Open 'Settings' → 'Appearance' and switch between Light and Dark themes. You can also schedule it automatically."/>
|
||||
</VBox>
|
||||
</VBox>
|
||||
</content>
|
||||
</ScrollPane>
|
||||
</center>
|
||||
|
||||
<padding>
|
||||
<Insets top="8" right="8" bottom="8" left="8"/>
|
||||
</padding>
|
||||
</BorderPane>
|
||||
</StackPane>
|
||||
Reference in New Issue
Block a user