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
@@ -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>