Partow/Telegram-Final-Project
1
1
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Contacts UI implemented.

Browse Source
This commit is contained in:
Asal Lotfi
2025-09-01 13:04:57 +03:30
parent b678674f50
commit 694f923c10
5 changed files with 423 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/main/resources/org/to/telegramfinalproject/CSS/dark_theme.css
+96
View File
@@ -444,3 +444,99 @@
.camera-button:hover {
-fx-background-color: #0077b6;
}
.contacts-card {
-fx-background-color: #1f2a36;
-fx-background-radius: 8;
-fx-padding: 12;
}
.contacts-header {
-fx-padding: 8 0 8 0;
}
.contacts-title {
-fx-font-size: 16px;
-fx-font-weight: bold;
-fx-text-fill: #fff;
}
.icon-button {
-fx-background-color: transparent;
-fx-text-fill: #fff;
}
.contact-item {
-fx-padding: 8 12;
-fx-background-color: #1e2a35;
-fx-background-radius: 6;
/* Add subtle shadow like light theme */
-fx-effect: dropshadow(gaussian, rgba(0,0,0,0.4), 4, 0.2, 0, 1);
}
.contact-item:hover {
-fx-background-color: #253544; /* subtle hover */
-fx-effect: dropshadow(gaussian, rgba(0,0,0,0.6), 6, 0.3, 0, 1); /* stronger on hover */
}
.contact-name {
-fx-font-size: 14px;
-fx-text-fill: #eee;
}
.contact-status {
-fx-font-size: 12px;
-fx-text-fill: #999;
}
.footer-button {
-fx-background-color: transparent;
-fx-text-fill: #1e90ff;
-fx-font-weight: bold;
}
.overlay-background {
-fx-background-color: rgba(0, 0, 0, 0.4); /* semi-transparent black */
-fx-pref-width: 100%;
-fx-pref-height: 100%;
}
.contacts-search-box {
-fx-background-color: #253544;
-fx-background-radius: 10;
-fx-padding: 6 10;
-fx-effect: dropshadow(gaussian, rgba(0,0,0,0.3), 8, 0.3, 0, 1);
-fx-alignment: center-left;
}
.contacts-search {
-fx-background-color: #253544;
-fx-border-color: #253544;
-fx-prompt-text-fill: #777; /* Placeholder text */
-fx-text-fill: #eee; /* Actual user text (light so it’s visible) */
-fx-font-size: 13px;
}
.search-icon {
-fx-background-color: transparent;
-fx-cursor: hand;
-fx-opacity: 0.7;
}
.search-icon:hover {
-fx-opacity: 1;
}
.no-contacts-label {
-fx-text-fill: #aaa;
-fx-font-size: 13px;
}
.contacts-scroll {
-fx-background-color: transparent; /* outer scroll */
}
.contacts-scroll > .viewport {
-fx-background-color: #1f2a36; /* matches contacts-card */
}
.contacts-list {
-fx-background-color: #1f2a36; /* make sure the VBox background also matches */
}
src/main/resources/org/to/telegramfinalproject/CSS/light_theme.css
+88
View File
@@ -443,3 +443,91 @@
.camera-button:hover {
-fx-background-color: #0077b6;
}
.contacts-card {
-fx-background-color: white;
-fx-background-radius: 8;
-fx-padding: 12;
}
.contacts-header {
-fx-padding: 8 0 8 0;
}
.contacts-title {
-fx-font-size: 16px;
-fx-font-weight: bold;
-fx-text-fill: #000;
}
.icon-button {
-fx-background-color: transparent;
-fx-text-fill: #000;
}
.contacts-search {
-fx-background-color: #f5f5f5;
-fx-background-radius: 6;
-fx-padding: 6;
-fx-font-size: 13px;
}
.contact-item {
-fx-padding: 8 12;
-fx-background-color: white;
-fx-background-radius: 6;
}
.contact-item:hover {
-fx-background-color: #f0f0f0; /* highlight on hover */
}
.contact-name {
-fx-font-size: 14px;
-fx-text-fill: #111;
}
.contact-status {
-fx-font-size: 12px;
-fx-text-fill: #666;
}
.footer-button {
-fx-background-color: transparent;
-fx-text-fill: #0078d7;
-fx-font-weight: bold;
}
.overlay-background {
-fx-background-color: rgba(0, 0, 0, 0.4); /* semi-transparent black */
-fx-pref-width: 100%;
-fx-pref-height: 100%;
}
.contacts-search-box {
-fx-background-color: #ffffff;
-fx-background-radius: 6;
-fx-padding: 6 12;
-fx-effect: dropshadow(gaussian, rgba(0,0,0,0.1), 4, 0.2, 0, 1);
-fx-alignment: center-left;
}
.contacts-search {
-fx-background-color: transparent;
-fx-border-color: transparent;
-fx-prompt-text-fill: #aaa;
-fx-text-fill: #222;
-fx-font-size: 13px;
}
.search-icon {
-fx-background-color: transparent;
-fx-cursor: hand;
-fx-opacity: 0.8;
}
.search-icon:hover {
-fx-opacity: 1;
}
.no-contacts-label {
-fx-text-fill: #777; /* light theme */
-fx-font-size: 13px;
}
src/main/resources/org/to/telegramfinalproject/Fxml/contacts.fxml
+57
View File
@@ -0,0 +1,57 @@
<?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.ContactsController"
styleClass="overlay-root">
<!-- Background -->
<Pane fx:id="overlayBackground" styleClass="overlay-background"/>
<!-- Contacts card -->
<VBox fx:id="contactsCard" styleClass="contacts-card"
prefWidth="360" maxWidth="360"
prefHeight="520" maxHeight="520">
<!-- ===== Header ===== -->
<HBox alignment="CENTER_LEFT" spacing="10" styleClass="contacts-header">
<Label text="Contacts" styleClass="contacts-title"/>
<Pane HBox.hgrow="ALWAYS"/> <!-- pushes elements to right -->
</HBox>
<!-- ===== 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 ===== -->
<HBox alignment="CENTER_RIGHT" styleClass="contacts-footer">
<padding>
<Insets top="8" right="8" bottom="8" left="8"/>
</padding>
<Button fx:id="closeFooterButton" text="Close" styleClass="footer-button"/>
</HBox>
</VBox>
</StackPane>