Telegram features UI implemented.
This commit is contained in:
Asal Lotfi
@@ -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());
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -1284,17 +1284,83 @@
|
|||||||
.link-btn:hover {
|
.link-btn:hover {
|
||||||
-fx-underline: true;
|
-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 */
|
.overlay-background {
|
||||||
.root.dark .titled-pane > .title {
|
-fx-background-color: rgba(0,0,0,0.4);
|
||||||
-fx-background-color: #2b2f33;
|
|
||||||
-fx-text-fill: #f3f4f6;
|
|
||||||
}
|
|
||||||
.root.dark .titled-pane > *.content {
|
|
||||||
-fx-background-color: #1f2327;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.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;
|
||||||
|
}
|
||||||
|
|||||||
@@ -1262,38 +1262,82 @@
|
|||||||
.link-btn:hover {
|
.link-btn:hover {
|
||||||
-fx-underline: true;
|
-fx-underline: true;
|
||||||
}
|
}
|
||||||
/* ===== Base (shared) ===== */
|
|
||||||
.tf-root { -fx-background-color: transparent; }
|
|
||||||
|
|
||||||
.tf-toolbar { -fx-padding: 10 12; -fx-alignment: CENTER_LEFT; }
|
.overlay-background {
|
||||||
.tf-title { -fx-font-size: 18px; -fx-font-weight: 700; }
|
-fx-background-color: rgba(0,0,0,0.4);
|
||||||
.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;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ===== Light theme overrides ===== */
|
.tf-root {
|
||||||
.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 {
|
|
||||||
-fx-background-color: #ffffff;
|
-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;
|
||||||
|
}
|
||||||
|
|||||||
@@ -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>
|
|
||||||
@@ -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 & Authentication" styleClass="tf-section-title"/>
|
||||||
|
<VBox spacing="12">
|
||||||
|
<VBox>
|
||||||
|
<HBox spacing="8" alignment="CENTER_LEFT">
|
||||||
|
<Label text="Register, Login & 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 & 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 & 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>
|
||||||
Reference in New Issue
Block a user