New Channel UI implemented.

2025-09-02 01:27:18 +03:30
parent 4eb33b5101
commit 7b54835468
9 changed files with 605 additions and 11 deletions
@@ -239,11 +239,6 @@ public class AddMembersController {
        searchIcon.setGraphic(icon);
    }

-    private void showAlert(String msg) {
-        Alert alert = new Alert(Alert.AlertType.WARNING, msg, ButtonType.OK);
-        alert.showAndWait();
-    }
-
    public void setGroupInfo(String groupName, File groupImageFile) {
        this.groupName = groupName;
        this.groupImageFile = groupImageFile;
@@ -0,0 +1,226 @@
+package org.to.telegramfinalproject.UI;
+
+import javafx.application.Platform;
+import javafx.fxml.FXML;
+import javafx.geometry.Pos;
+import javafx.scene.control.*;
+import javafx.scene.image.Image;
+import javafx.scene.image.ImageView;
+import javafx.scene.layout.*;
+
+import java.io.File;
+import java.util.*;
+import java.util.stream.Collectors;
+
+public class AddSubscriberController {
+
+    @FXML private VBox contactsList;
+    @FXML private VBox addMembersCard;
+    @FXML private TextField searchField;
+    @FXML private Pane overlayBackground;
+    @FXML private ScrollPane contactsScroll;
+    @FXML private Button searchIcon;
+    @FXML private Label memberCountLabel;
+    @FXML private FlowPane selectedMembersPane;
+    @FXML private Button skipButton;
+    @FXML private Button addButton;
+
+    // Keep selected contacts
+    private final Set<Contact> selectedContacts = new HashSet<>();
+
+    private String channelName;
+    private File channelImageFile;
+    private String description;
+
+    // Sample data for testing
+    private final List<Contact> allContacts = Arrays.asList(
+            new Contact("Ali", "last seen recently", "/org/to/telegramfinalproject/Avatars/default_user_profile.png"),
+            new Contact("Iman", "last seen a long time ago", "/org/to/telegramfinalproject/Avatars/default_user_profile.png"),
+            new Contact("Amir", "last seen within a month", "/org/to/telegramfinalproject/Avatars/default_user_profile.png"),
+            new Contact("Sara", "online", "/org/to/telegramfinalproject/Avatars/default_user_profile.png"),
+            new Contact("Ali", "last seen recently", "/org/to/telegramfinalproject/Avatars/default_user_profile.png"),
+            new Contact("Iman", "last seen a long time ago", "/org/to/telegramfinalproject/Avatars/default_user_profile.png"),
+            new Contact("Amir", "last seen within a month", "/org/to/telegramfinalproject/Avatars/default_user_profile.png"),
+            new Contact("Sara", "online", "/org/to/telegramfinalproject/Avatars/default_user_profile.png"),
+            new Contact("Ali", "last seen recently", "/org/to/telegramfinalproject/Avatars/default_user_profile.png"),
+            new Contact("Iman", "last seen a long time ago", "/org/to/telegramfinalproject/Avatars/default_user_profile.png"),
+            new Contact("Amir", "last seen within a month", "/org/to/telegramfinalproject/Avatars/default_user_profile.png"),
+            new Contact("Sara", "online", "/org/to/telegramfinalproject/Avatars/default_user_profile.png")
+    );
+
+    @FXML
+    public void initialize() {
+        updateMemberCount();
+
+        // Sort + render initially
+        renderContacts(allContacts.stream()
+                .sorted(Comparator.comparing(Contact::getName))
+                .collect(Collectors.toList()));
+
+        // Search filter
+        searchField.textProperty().addListener((obs, oldVal, newVal) -> {
+            String filter = newVal.toLowerCase();
+            List<Contact> filtered = allContacts.stream()
+                    .filter(c -> c.getName().toLowerCase().contains(filter))
+                    .sorted(Comparator.comparing(Contact::getName))
+                    .collect(Collectors.toList());
+            renderContacts(filtered);
+        });
+
+        // Auto-focus
+        Platform.runLater(() -> searchField.requestFocus());
+
+        // Skip → ignore selection and create chat
+        skipButton.setOnAction(e -> {
+            createChannel(); // always creates, even if no members selected
+        });
+
+        // Add → requires at least one member
+        addButton.setOnAction(e -> {
+            if (!selectedContacts.isEmpty()) {
+                createChannel();
+            }
+        });
+
+        // Close when clicking outside
+        overlayBackground.setOnMouseClicked(e -> MainController.getInstance().closeOverlay(addMembersCard.getParent()));
+
+        // Smooth scroll
+        contactsScroll.getStylesheets().add(getClass().getResource("/org/to/telegramfinalproject/CSS/scrollpane.css").toExternalForm());
+        contactsScroll.setPannable(true);
+        contactsScroll.setFitToWidth(true);
+        contactsScroll.setFitToHeight(false);
+        contactsScroll.getContent().setOnScroll(event -> {
+            double deltaY = event.getDeltaY() * 0.003;
+            contactsScroll.setVvalue(contactsScroll.getVvalue() - deltaY);
+        });
+
+        // Theme icon handling
+        Platform.runLater(() -> {
+            if (addMembersCard.getScene() != null) {
+                ThemeManager.getInstance().registerScene(addMembersCard.getScene());
+            }
+        });
+        ThemeManager.getInstance().darkModeProperty().addListener((obs, oldVal, newVal) -> updateSearchIcon(newVal));
+        updateSearchIcon(ThemeManager.getInstance().isDarkMode());
+    }
+
+    private void createChannel() {
+        // TODO: real server request → for now just print and close overlay
+        System.out.println("✅ Creating group/channel: " + channelName);
+        System.out.println("Selected members: " + selectedContacts.stream()
+                .map(Contact::getName).collect(Collectors.joining(", ")));
+
+        MainController.getInstance().closeOverlay(addMembersCard.getParent());
+
+        // TODO: open chat immediately (like you did with newGroup)
+    }
+
+    private void renderContacts(List<Contact> contacts) {
+        contactsList.getChildren().clear();
+
+        if (contacts.isEmpty()) {
+            StackPane emptyPane = new StackPane();
+            emptyPane.setPrefHeight(300);
+            emptyPane.setAlignment(Pos.CENTER);
+
+            Label emptyLabel = new Label("No contacts found");
+            emptyLabel.getStyleClass().add("no-contacts-label");
+
+            emptyPane.getChildren().add(emptyLabel);
+            contactsList.getChildren().add(emptyPane);
+            return;
+        }
+
+        for (Contact c : contacts) {
+            HBox item = new HBox(10);
+            item.getStyleClass().add("contact-item");
+
+            // Avatar
+            ImageView avatar = new ImageView(new Image(
+                    Objects.requireNonNull(getClass().getResourceAsStream(c.getImageUrl()))
+            ));
+            avatar.setFitWidth(48);
+            avatar.setFitHeight(48);
+            avatar.setPreserveRatio(true);
+
+            VBox details = new VBox(2);
+            Label nameLabel = new Label(c.getName());
+            nameLabel.getStyleClass().add("contact-name");
+            Label statusLabel = new Label(c.getStatus());
+            statusLabel.getStyleClass().add("contact-status");
+
+            details.getChildren().addAll(nameLabel, statusLabel);
+
+            item.getChildren().addAll(avatar, details);
+
+            // Click to toggle selection
+            item.setOnMouseClicked(e -> toggleSelection(c));
+
+            // Highlight if already selected
+            if (selectedContacts.contains(c)) {
+                item.getStyleClass().add("contact-selected");
+            }
+
+            contactsList.getChildren().add(item);
+        }
+    }
+
+    private void toggleSelection(Contact contact) {
+        if (selectedContacts.contains(contact)) {
+            selectedContacts.remove(contact);
+        } else {
+            selectedContacts.add(contact);
+        }
+        updateMemberCount();
+        updateSelectedMembersPane();
+        renderContacts(allContacts);
+    }
+
+    private void updateSelectedMembersPane() {
+        selectedMembersPane.getChildren().clear();
+        for (Contact c : selectedContacts) {
+            Label chip = new Label(c.getName());
+            chip.getStyleClass().add("member-chip");
+            selectedMembersPane.getChildren().add(chip);
+        }
+    }
+
+    private void updateMemberCount() {
+        memberCountLabel.setText(selectedContacts.size() + " / 200000");
+    }
+
+    private void updateSearchIcon(boolean darkMode) {
+        String iconPath = darkMode
+                ? "/org/to/telegramfinalproject/Icons/search_light.png"
+                : "/org/to/telegramfinalproject/Icons/search_dark.png";
+
+        ImageView icon = new ImageView(new Image(getClass().getResourceAsStream(iconPath)));
+        icon.setFitWidth(16);
+        icon.setFitHeight(16);
+        searchIcon.setGraphic(icon);
+    }
+
+    public void setChannelInfo(String name, String description, File image) {
+        this.channelName = name;
+        this.channelImageFile = image;
+        this.description = description;
+    }
+
+    // Inner class for contact data
+    public static class Contact {
+        private final String name;
+        private final String status;
+        private final String imageUrl;
+
+        public Contact(String name, String status, String imageUrl) {
+            this.name = name;
+            this.status = status;
+            this.imageUrl = imageUrl;
+        }
+
+        public String getName() { return name; }
+        public String getStatus() { return status; }
+        public String getImageUrl() { return imageUrl; }
+    }
+}
@@ -0,0 +1,146 @@
+package org.to.telegramfinalproject.UI;
+
+import javafx.application.Platform;
+import javafx.fxml.FXML;
+import javafx.fxml.FXMLLoader;
+import javafx.scene.control.*;
+import javafx.scene.image.Image;
+import javafx.scene.image.ImageView;
+import javafx.scene.layout.StackPane;
+import javafx.scene.layout.VBox;
+import javafx.stage.FileChooser;
+import javafx.scene.layout.Pane;
+import java.io.File;
+import java.io.IOException;
+import java.util.ArrayList;
+import java.util.HashSet;
+import java.util.Set;
+
+public class NewChannelController {
+
+    @FXML private VBox newChannelCard;
+    @FXML private Pane overlayBackground;
+    @FXML private TextField channelNameField;
+    @FXML private Label channelNameLabel;
+    @FXML private TextArea channelDescField;
+    @FXML private Label channelDescLabel;
+    @FXML private Button cameraButton;
+    @FXML private ImageView cameraIcon;
+    @FXML private Button cancelButton;
+    @FXML private Button createButton;
+    @FXML private StackPane overlayRoot;   // the root
+    @FXML private Label descCounter;
+
+    private File channelImageFile;
+
+    @FXML
+    public void initialize() {
+        // Load default camera icon
+        cameraIcon.setImage(new Image(
+                getClass().getResourceAsStream("/org/to/telegramfinalproject/Icons/camera.png")
+        ));
+
+        // Camera button action → choose image
+        cameraButton.setOnAction(e -> {
+            FileChooser chooser = new FileChooser();
+            chooser.setTitle("Choose Channel Picture");
+            chooser.getExtensionFilters().addAll(
+                    new FileChooser.ExtensionFilter("Image Files", "*.png", "*.jpg", "*.jpeg")
+            );
+            File file = chooser.showOpenDialog(cameraButton.getScene().getWindow());
+            if (file != null) {
+                channelImageFile = file;
+                cameraIcon.setImage(new Image(file.toURI().toString()));
+            }
+        });
+
+        // Cancel → close overlay
+        cancelButton.setOnAction(e -> {
+            MainController.getInstance().closeOverlay(overlayRoot);
+        });
+
+        // Close when clicking outside card
+        overlayBackground.setOnMouseClicked(e -> {
+            MainController.getInstance().closeOverlay(overlayRoot);
+        });
+
+        // Create button → validate name + submit
+        createButton.setOnAction(e -> {
+            String channelName = channelNameField.getText().trim();
+            String description = channelDescField.getText().trim();
+
+            if (channelName.isEmpty()) {
+                // Apply error style
+                channelNameField.getStyleClass().add("error");
+                channelNameLabel.getStyleClass().add("error");
+                return;
+            }
+
+            try {
+                // Load Add Members overlay
+                FXMLLoader loader = new FXMLLoader(getClass().getResource(
+                        "/org/to/telegramfinalproject/Fxml/add_subscriber.fxml"));
+                StackPane addSubscribersOverlay = loader.load();
+
+                // Pass channel info to AddMembersController
+                AddSubscriberController controller = loader.getController();
+                controller.setChannelInfo(channelName, description, channelImageFile);
+
+                // Close the current "New Channel" overlay
+                MainController.getInstance().closeOverlay(overlayRoot);
+
+                // Then open the "Add Members" overlay
+                MainController.getInstance().showOverlay(addSubscribersOverlay);
+
+            } catch (IOException ex) {
+                ex.printStackTrace();
+            }
+        });
+
+        final int MAX_LENGTH = 255;
+        channelDescField.addEventFilter(javafx.scene.input.KeyEvent.KEY_TYPED, e -> {
+            if (channelDescField.getText().length() >= MAX_LENGTH) {
+                e.consume(); // stop extra character from being typed
+            }
+        });
+
+        channelDescField.textProperty().addListener((obs, oldText, newText) -> {
+            if (newText.length() > MAX_LENGTH) {
+                channelDescField.setText(newText.substring(0, MAX_LENGTH));
+                channelDescField.positionCaret(MAX_LENGTH);
+            }
+
+            // Current length out of max
+            int current = channelDescField.getText().length();
+            descCounter.setText(current + " / " + MAX_LENGTH);
+
+            // Style when limit reached
+            if (current == MAX_LENGTH) {
+                descCounter.setStyle("-fx-text-fill: red;");
+            } else {
+                descCounter.setStyle(""); // fallback to CSS
+            }
+        });
+
+        // Initial value
+        descCounter.setText("0 / " + MAX_LENGTH);
+
+        // Reset error state when typing
+        channelNameField.textProperty().addListener((obs, oldVal, newVal) -> {
+            if (!newVal.trim().isEmpty()) {
+                channelNameField.getStyleClass().remove("error");
+                channelNameLabel.getStyleClass().remove("error");
+            }
+        });
+
+        // Auto-focus channel name on open
+        Platform.runLater(() -> channelNameField.requestFocus());
+
+        // Register scene for ThemeManager → stylesheet swap will handle colors/icons
+        Platform.runLater(() -> {
+            if (newChannelCard.getScene() != null) {
+                ThemeManager.getInstance().registerScene(newChannelCard.getScene());
+            }
+        });
+    }
+}
@@ -97,9 +97,4 @@ public class NewGroupController {
        // Auto_focus search bar when overlay opens
        Platform.runLater(() -> groupNameField.requestFocus());
    }
-
-    private void showAlert(String msg) {
-        Alert alert = new Alert(Alert.AlertType.WARNING, msg, ButtonType.OK);
-        alert.showAndWait();
-    }
 }
@@ -210,7 +210,19 @@ public class SidebarMenuController {
        }
    }

-    private void createNewChannel() { System.out.println("Creating New Channel..."); }
+    private void createNewChannel() {
+        try {
+            FXMLLoader loader = new FXMLLoader(getClass().getResource(
+                    "/org/to/telegramfinalproject/Fxml/new_channel.fxml"));
+            Node channelOverlay = loader.load();
+
+            // Show overlay (like MyProfile, Contacts, etc.)
+            MainController.getInstance().showOverlay(channelOverlay);
+
+        } catch (IOException e) {
+            e.printStackTrace();
+        }
+    }

    private void openContacts() {
        try {
@@ -715,3 +715,48 @@
 .member-chip:hover {
    -fx-background-color: #31475b;  /* lighter on hover */
 }
+
+.desc-counter {
+    -fx-font-size: 11px;
+    -fx-text-fill: #aaa;   /* slightly lighter gray for dark background */
+    -fx-alignment: CENTER_RIGHT;
+}
+
+/* ===== TextArea Scrollbar Styling ===== */
+.text-area .scroll-pane .scroll-bar:vertical {
+    -fx-pref-width: 6px;       /* super thin */
+    -fx-background-color: transparent;
+    -fx-opacity: 0;            /* hidden by default */
+    -fx-padding: 0;
+}
+
+.text-area .scroll-pane:hover .scroll-bar:vertical {
+    -fx-opacity: 0.6;          /* appear on hover */
+    -fx-transition: opacity 0.3s ease;
+}
+
+.text-area .scroll-pane .thumb {
+    -fx-background-color: rgba(120,120,120,0.5); /* subtle gray */
+    -fx-background-radius: 2;
+}
+
+.text-area .scroll-pane .scroll-bar:horizontal {
+    -fx-opacity: 0;  /* hide horizontal completely */
+    -fx-max-height: 0;
+}
+
+/* Channel description text area */
+.channel-desc-area {
+    -fx-background-color: #1f2a36;   /* dark background */
+    -fx-text-fill: #eee;             /* text color */
+    -fx-control-inner-background: #1f2a36; /* inner background */
+    -fx-prompt-text-fill: #888;      /* placeholder */
+    -fx-border-color: #444;
+    -fx-border-radius: 6;
+    -fx-background-radius: 6;
+}
+
+/* Fix for the inner content region */
+.channel-desc-area .content {
+    -fx-background-color: #1f2a36;
+}
@@ -719,3 +719,47 @@
 .member-chip:hover {
    -fx-background-color: #c6c6c6;  /* slightly darker on hover */
 }
+
+.desc-counter {
+    -fx-font-size: 11px;
+    -fx-text-fill: #888;   /* subtle gray */
+    -fx-alignment: CENTER_RIGHT;
+}
+
+/* ===== TextArea Scrollbar Styling ===== */
+.text-area .scroll-pane .scroll-bar:vertical {
+    -fx-pref-width: 6px;       /* super thin */
+    -fx-background-color: transparent;
+    -fx-opacity: 0;            /* hidden by default */
+    -fx-padding: 0;
+}
+
+.text-area .scroll-pane:hover .scroll-bar:vertical {
+    -fx-opacity: 0.6;          /* appear on hover */
+    -fx-transition: opacity 0.3s ease;
+}
+
+.text-area .scroll-pane .thumb {
+    -fx-background-color: rgba(120,120,120,0.5); /* subtle gray */
+    -fx-background-radius: 2;
+}
+
+.text-area .scroll-pane .scroll-bar:horizontal {
+    -fx-opacity: 0;  /* hide horizontal completely */
+    -fx-max-height: 0;
+}
+
+.channel-desc-area {
+    -fx-background-color: #fff;
+    -fx-text-fill: #000;
+    -fx-control-inner-background: #fff;
+    -fx-prompt-text-fill: #888;
+    -fx-border-color: #ccc;
+    -fx-border-radius: 6;
+    -fx-background-radius: 6;
+}
+
+.channel-desc-area .content {
+    -fx-background-color: #fff;
+}
+
@@ -0,0 +1,69 @@
+<?xml version="1.0" encoding="UTF-8"?>
+
+<?import javafx.scene.layout.*?>
+<?import javafx.scene.control.*?>
+<?import javafx.scene.image.ImageView?>
+<?import javafx.geometry.Insets?>
+
+<StackPane xmlns:fx="http://javafx.com/fxml"
+           fx:controller="org.to.telegramfinalproject.UI.AddSubscriberController"
+           styleClass="overlay-root">
+
+    <!-- Background -->
+    <Pane fx:id="overlayBackground" styleClass="overlay-background"/>
+
+    <!-- Add Members card -->
+    <VBox fx:id="addMembersCard" styleClass="contacts-card"
+          prefWidth="360" maxWidth="360"
+          prefHeight="520" maxHeight="520">
+
+        <!-- ===== Header ===== -->
+        <HBox alignment="CENTER_LEFT" spacing="10" styleClass="contacts-header">
+            <Label text="Add Members" styleClass="contacts-title"/>
+            <!-- Member count -->
+            <Label fx:id="memberCountLabel" text="0 / 200000" styleClass="member-count"/>
+            <Pane HBox.hgrow="ALWAYS"/> <!-- pushes elements to right -->
+        </HBox>
+
+        <!-- ===== Selected Members Row ===== -->
+        <FlowPane fx:id="selectedMembersPane"
+                  hgap="6" vgap="6"
+                  styleClass="selected-members-pane">
+            <padding>
+                <Insets top="6" right="6" bottom="6" left="6"/>
+            </padding>
+        </FlowPane>
+
+        <!-- ===== Search Bar with Icon ===== -->
+        <HBox alignment="CENTER_LEFT" spacing="6" styleClass="contacts-search-box">
+            <Button fx:id="searchIcon" styleClass="search-icon"/>
+            <TextField fx:id="searchField"
+                       promptText="Search"
+                       styleClass="contacts-search"
+                       HBox.hgrow="ALWAYS"/>
+        </HBox>
+
+        <Separator styleClass="section-separator"/>
+
+        <!-- ===== Contacts List (fills space) ===== -->
+        <ScrollPane fx:id="contactsScroll"
+                    fitToWidth="true"
+                    vbarPolicy="AS_NEEDED"
+                    hbarPolicy="NEVER"
+                    VBox.vgrow="ALWAYS"
+                    styleClass="contacts-scroll">
+            <VBox fx:id="contactsList" spacing="6" styleClass="contacts-list"/>
+        </ScrollPane>
+
+        <Separator styleClass="section-separator"/>
+
+        <!-- ===== Footer: Skip + Add ===== -->
+        <HBox alignment="CENTER_RIGHT" styleClass="contacts-footer" spacing="16">
+            <padding>
+                <Insets top="8" right="12" bottom="8" left="12"/>
+            </padding>
+            <Button fx:id="skipButton" text="Skip" styleClass="footer-button"/>
+            <Button fx:id="addButton" text="Add" styleClass="footer-button"/>
+        </HBox>
+    </VBox>
+</StackPane>
@@ -0,0 +1,62 @@
+<?xml version="1.0" encoding="UTF-8"?>
+
+<?import javafx.scene.layout.*?>
+<?import javafx.scene.image.ImageView?>
+<?import javafx.scene.control.*?>
+
+<StackPane fx:id="overlayRoot" xmlns:fx="http://javafx.com/fxml"
+           fx:controller="org.to.telegramfinalproject.UI.NewChannelController"
+           styleClass="overlay-root">
+
+    <!-- Dimmed background -->
+    <Pane fx:id="overlayBackground" styleClass="overlay-background"/>
+
+    <!-- Channel card -->
+    <VBox fx:id="newChannelCard"
+          styleClass="group-card"
+          spacing="16"
+          alignment="CENTER"
+          prefWidth="400" maxWidth="400"
+          prefHeight="280" maxHeight="280">
+
+        <!-- Header Row: Picture + Name -->
+        <HBox alignment="CENTER_LEFT" spacing="12">
+            <!-- Channel Picture -->
+            <Button fx:id="cameraButton"
+                    prefWidth="64" prefHeight="64"
+                    styleClass="group-camera-button">
+                <graphic>
+                    <ImageView fx:id="cameraIcon"
+                               fitWidth="28" fitHeight="28"
+                               preserveRatio="true"/>
+                </graphic>
+            </Button>
+
+            <!-- Channel Name -->
+            <VBox spacing="4" alignment="CENTER_LEFT" HBox.hgrow="ALWAYS">
+                <Label fx:id="channelNameLabel" text="Channel name" styleClass="group-name-label"/>
+                <TextField fx:id="channelNameField"
+                           promptText="Enter channel name"
+                           styleClass="group-name-field"
+                           HBox.hgrow="ALWAYS"/>
+            </VBox>
+        </HBox>
+
+        <!-- Channel Description -->
+        <VBox spacing="4" alignment="CENTER_LEFT">
+            <Label fx:id="channelDescLabel" text="Description (optional)" styleClass="group-name-label"/>
+            <TextArea fx:id="channelDescField"
+                      promptText="Enter description"
+                      styleClass="channel-desc-area"
+                      prefRowCount="3"
+                      wrapText="true"/>
+            <Label fx:id="descCounter" text="0 / 255" styleClass="desc-counter"/>
+        </VBox>
+
+        <!-- Footer: Cancel + Create -->
+        <HBox alignment="CENTER_RIGHT" spacing="16">
+            <Button fx:id="cancelButton" text="Cancel" styleClass="footer-button"/>
+            <Button fx:id="createButton" text="Create" styleClass="footer-button"/>
+        </HBox>
+    </VBox>
+</StackPane>