Merge branch 'Connection-UI' into Main-UI

# Conflicts: # src/main/java/org/to/telegramfinalproject/UI/MainController.java # src/main/resources/org/to/telegramfinalproject/CSS/dark_theme.css # src/main/resources/org/to/telegramfinalproject/CSS/light_theme.css
2025-09-01 19:11:00 +03:30
parent 694f923c10 9d16258d0c
commit 7a7c9e979e
31 changed files with 3746 additions and 744 deletions
@@ -1,3 +1,9 @@
+/* ===== Dark Theme Root ===== */
+.root {
+    -fx-background-color: #0f1c26;  /* overall dark base */
+    -fx-text-fill: #e8f1f8;
+}
+
 /* Sidebar buttons */
 .sidebar-btn {
    -fx-background-color: transparent;
@@ -170,7 +176,7 @@
 .search-placeholder { -fx-text-fill: #8ea1b2; -fx-font-size: 13px; }

 /* ===== Global search bar ===== */
-.global-search {
+.global-search-pane {
    -fx-background-color: #1b2b39;
    -fx-background-radius: 15;
    -fx-text-fill: #e8f1f8;
@@ -295,6 +301,86 @@
    -fx-font-weight: bold;
 }

+/* === Global Search List (Dark) === */
+.global-search-list {
+    -fx-background-color: #1b2735;              /* uniform dark background */
+    -fx-control-inner-background: #1b2735;
+    -fx-control-inner-background-alt: #1b2735;  /* disable stripes */
+}
+
+.global-search-list .virtual-flow,
+.global-search-list .clipped-container,
+.global-search-list .sheet {
+    -fx-background-color: #1b2735;              /* internal containers same */
+}
+
+.global-search-list .list-cell {
+    -fx-padding: 8 10;
+    -fx-background-color: #1b2735;              /* solid dark rows */
+    -fx-border-color: #2e3948;                  /* subtle divider */
+    -fx-border-width: 0 0 0.5 0;
+    -fx-alignment: CENTER_LEFT;
+    -fx-text-fill: #e8f1f8;                     /* light text */
+}
+
+.global-search-list .list-cell:hover {
+    -fx-background-color: rgba(255, 255, 255, 0.08); /* lighter on hover */
+}
+
+.global-search-list .list-cell:selected {
+    -fx-background-color: #2a3a4a;              /* darker blue-gray on select */
+}
+
+/* Titles & subtitles */
+.global-search-title {
+    -fx-font-size: 14px;
+    -fx-font-weight: bold;
+    -fx-text-fill: #e8f1f8;
+}
+.global-search-subtitle {
+    -fx-font-size: 12px;
+    -fx-text-fill: #8ea1b2;                     /* muted gray-blue */
+}
+
+/* Search header */
+.search-header {
+    -fx-padding: 8 12;
+    -fx-background-color: #1b2735;
+    -fx-border-color: #2e3948;
+    -fx-border-width: 0 0 1 0;
+}
+.search-header-label {
+    -fx-font-size: 13px;
+    -fx-font-weight: bold;
+    -fx-text-fill: #e8f1f8;
+}
+
+/* No results */
+.no-results-label {
+    -fx-font-size: 12px;
+    -fx-text-fill: #8ea1b2;
+}
+
+/* Avatar placeholders */
+.global-search-avatar {
+    -fx-background-radius: 50%;
+    -fx-background-color: #444;
+    -fx-min-width: 36;
+    -fx-min-height: 36;
+}
+
+/* Close button */
+.search-close-btn {
+    -fx-background-color: transparent;
+    -fx-text-fill: #e8f1f8;
+    -fx-font-size: 14px;
+    -fx-cursor: hand;
+}
+.search-close-btn:hover {
+    -fx-text-fill: #2ca4ff;
+}
+
+
 /* ===== Overlay ===== */
 .overlay-root {
    -fx-alignment: CENTER;
@@ -1,3 +1,8 @@
+.root {
+    -fx-base: #ffffff;
+    -fx-text-base-color: #000000;
+}
+
 /* Sidebar buttons */
 .sidebar-btn {
    -fx-background-color: transparent;
@@ -195,7 +200,7 @@
    -fx-cursor: hand;
 }

-.global-search {
+.global-search-pane {
    -fx-background-color: #f5f5f5;
    -fx-background-radius: 15;
    -fx-text-fill: #0f141a;
@@ -294,6 +299,108 @@
    -fx-font-weight: bold;
 }

+/* === Global Search List === */
+.global-search-list .list-cell {
+    -fx-padding: 8 10;
+    -fx-background-color: transparent;
+    -fx-border-color: #ddd;   /* light divider */
+    -fx-border-width: 0 0 0.5 0;
+    -fx-alignment: CENTER_LEFT;
+}
+
+.global-search-list .list-cell:hover {
+    -fx-background-color: rgba(0, 0, 0, 0.05); /* light hover */
+}
+
+.global-search-title {
+    -fx-font-size: 14px;
+    -fx-font-weight: bold;
+    -fx-text-fill: black;
+}
+
+.global-search-subtitle {
+    -fx-font-size: 12px;
+    -fx-text-fill: #666; /* gray for light mode */
+}
+
+/* Avatar placeholder (if no image) */
+.global-search-avatar {
+    -fx-background-radius: 50%;
+    -fx-background-color: #bbb;
+    -fx-min-width: 36;
+    -fx-min-height: 36;
+}
+
+/* Global search panel */
+.global-search-pane {
+    -fx-background-color: -fx-base;
+}
+
+.search-header {
+    -fx-padding: 8 12;
+    -fx-background-color: transparent;
+    -fx-border-color: #ddd;
+    -fx-border-width: 0 0 1 0;
+}
+
+.search-header-label {
+    -fx-font-size: 13px;
+    -fx-font-weight: bold;
+    -fx-text-fill: -fx-text-base-color;
+}
+
+.no-results-label {
+    -fx-font-size: 12px;
+    -fx-text-fill: gray;
+}
+
+.close-btn {
+    -fx-background-color: transparent;
+    -fx-cursor: hand;
+    -fx-font-size: 14px;
+}
+
+/* ===== Global Search Result Panel ===== */
+.search-results-container {
+    -fx-background-color: -fx-base;
+    -fx-padding: 8;
+    -fx-spacing: 6;
+    -fx-border-color: transparent transparent #ddd transparent;
+    -fx-border-width: 0 0 1 0;
+}
+
+.search-results-title {
+    -fx-font-weight: bold;
+    -fx-font-size: 13px;
+    -fx-text-fill: -fx-text-base-color;
+}
+
+.search-result-item {
+    -fx-background-color: transparent;
+    -fx-padding: 6 10;
+    -fx-spacing: 8;
+}
+
+.search-result-item:hover {
+    -fx-background-color: rgba(0,0,0,0.05);
+}
+
+/* Avatar always square, not squeezed */
+.search-result-avatar {
+    -fx-fit-width: 40;
+    -fx-fit-height: 40;
+    -fx-preserve-ratio: true;
+}
+
+/* Close button */
+.search-close-btn {
+    -fx-background-color: transparent;
+    -fx-text-fill: -fx-text-base-color;
+    -fx-font-size: 14px;
+    -fx-cursor: hand;
+}
+
+
 /* ===== Overlay ===== */
 .overlay-root {
    -fx-alignment: CENTER;
@@ -44,10 +44,14 @@
                                </graphic>
                            </Button>

-                            <TextField fx:id="searchBar"
-                                       prefHeight="36" prefWidth="430.0"
-                                       promptText="Search"
-                                       styleClass="global-search"/>
+                            <HBox spacing="5" alignment="CENTER" HBox.hgrow="ALWAYS">
+                                <TextField fx:id="searchBar"
+                                           promptText="Search"
+                                           HBox.hgrow="ALWAYS"
+                                           maxWidth="Infinity"
+                                           styleClass="global-search"/>
+                            </HBox>
+
                        </children>
                    </HBox>

@@ -69,44 +73,82 @@
                            </content>
                        </ScrollPane>

-                        <!-- Search panel (hidden initially) -->
+                        <!-- Search in chat -->
                        <VBox fx:id="chatSearchPane"
                              visible="false" managed="false"
                              styleClass="chat-search-pane">

-                            <!-- Section label -->
                            <Label text="Search messages in" styleClass="search-label"/>
-
-                            <!-- Tiny separator line -->
                            <Separator styleClass="search-separator" prefHeight="0.5"/>

-                            <!-- User profile + "This chat" + close -->
                            <HBox spacing="10" alignment="CENTER_LEFT" styleClass="search-scope-bar">
-                                <!-- Avatar -->
-                                <ImageView fx:id="searchChatAvatar" fitWidth="32" fitHeight="32" preserveRatio="true">
-                                    <image>
-                                        <Image url="@/org/to/telegramfinalproject/Avatars/profile_test.png"/>
-                                    </image>
-                                </ImageView>
-
-                                <!-- scope -->
+                                <ImageView fx:id="searchChatAvatar" fitWidth="32" fitHeight="32" preserveRatio="true"/>
                                <VBox alignment="CENTER_LEFT">
                                    <Label text="This chat" styleClass="search-scope"/>
                                </VBox>
                                <Region HBox.hgrow="ALWAYS"/>
-                                <!-- Close button -->
                                <Button text="✕" onAction="#closeSearchPanel" styleClass="close-btn"/>
                            </HBox>

-                            <!-- Placeholder -->
                            <VBox alignment="CENTER" spacing="10" prefHeight="300">
                                <ImageView fx:id="searchIconLarge" fitWidth="64" fitHeight="64" preserveRatio="true"/>
                                <Label text="Search for messages" styleClass="search-placeholder"/>
                            </VBox>

-                            <!-- Results -->
                            <ListView fx:id="chatSearchResults" visible="false" managed="false"/>
                        </VBox>
+
+                        <!-- Global Search Panel -->
+                        <VBox fx:id="globalSearchPane" visible="false" managed="false" styleClass="global-search-pane">
+
+                            <!-- Header -->
+                            <HBox alignment="CENTER_LEFT">
+                                <Label text="  Search results" styleClass="search-results-title"/>
+                                <Region HBox.hgrow="ALWAYS"/>
+                                <Button text="✕" onAction="#closeGlobalSearch" styleClass="search-close-btn"/>
+                            </HBox>
+
+                            <!-- Search results -->
+                            <ScrollPane fx:id="globalSearchScroll"
+                                        fitToWidth="true"
+                                        hbarPolicy="NEVER"
+                                        vbarPolicy="AS_NEEDED"
+                                        styleClass="chat-scroll">
+                                <content>
+                                    <VBox fx:id="globalSearchResultsContainer" spacing="5"
+                                          styleClass="global-search-list">
+                                        <!-- One search result item -->
+                                        <HBox spacing="10" alignment="CENTER_LEFT" styleClass="search-result-item">
+                                            <!-- Avatar -->
+                                            <StackPane>
+                                                <ImageView fx:id="searchResultAvatar"
+                                                           fitWidth="40" fitHeight="40"
+                                                           preserveRatio="true"
+                                                           smooth="true"
+                                                           cache="true"
+                                                           styleClass="avatar"/>
+                                            </StackPane>
+
+                                            <!-- Texts -->
+                                            <VBox spacing="2">
+                                                <Label fx:id="searchResultTitle" styleClass="global-search-title"/>
+                                                <Label fx:id="searchResultSubtitle" styleClass="global-search-subtitle"/>
+                                            </VBox>
+                                        </HBox>
+                                    </VBox>
+                                </content>
+                            </ScrollPane>
+
+                            <!-- No Results Placeholder -->
+                            <VBox fx:id="noResultsBox" alignment="CENTER" spacing="10" visible="false" managed="false">
+                                <ImageView fx:id="noResultIcon" fitWidth="64" fitHeight="64" preserveRatio="true">
+                                    <image>
+                                        <Image url="@/org/to/telegramfinalproject/Icons/no_result_dark.png"/>
+                                    </image>
+                                </ImageView>
+                                <Label text="No results found" styleClass="no-results-label"/>
+                            </VBox>
+                        </VBox>
                    </StackPane>
                </VBox>