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

Merge remote-tracking branch 'origin/Main-UI' into Main-UI

Browse Source
This commit is contained in:
Partow
2025-09-03 17:31:57 +03:30
parent ea5e703f99 cc9dcf2ac8
commit eb0cae92f5
17 changed files with 682 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/main/resources/org/to/telegramfinalproject/CSS/dark_theme.css
+138
View File
@@ -760,3 +760,141 @@
.channel-desc-area .content {
-fx-background-color: #1f2a36;
}
.settings-card {
-fx-background-color: #1f2a36;
-fx-background-radius: 8;
-fx-padding: 12;
}
.settings-avatar {
-fx-fit-width: 56px;
-fx-fit-height: 56px;
}
.settings-name {
-fx-font-size: 16px;
-fx-font-weight: bold;
-fx-text-fill: #ffffff;
}
.settings-id {
-fx-font-size: 13px;
-fx-text-fill: #aaaaaa;
}
.settings-option {
-fx-background-color: transparent;
-fx-text-fill: #ffffff;
-fx-font-size: 14px;
-fx-alignment: CENTER_LEFT;
}
.settings-option:hover {
-fx-background-color: #253544;
}
.settings-menu {
-fx-background-color: transparent;
-fx-font-size: 18px;
-fx-text-fill: #eeeeee;
}
.settings-header {
-fx-padding: 8 12;
-fx-border-color: -fx-box-border;
-fx-border-width: 0 0 1 0; /* bottom border only */
}
.settings-title {
-fx-font-size: 15px;
-fx-font-weight: bold;
-fx-text-fill: #fff;
}
.icon-button {
-fx-background-color: transparent;
-fx-padding: 0;
}
.icon-button:hover {
-fx-background-color: rgba(0,0,0,0.05);
-fx-background-radius: 50%;
}
/* Profile header */
.profile-header {
-fx-padding: 12 16;
}
.profile-avatar {
-fx-background-radius: 50%;
-fx-effect: dropshadow(gaussian, rgba(0,0,0,0.2), 4, 0.3, 0, 1);
}
.profile-name {
-fx-font-size: 14px;
-fx-font-weight: bold;
-fx-text-fill: #fff;
}
.profile-id {
-fx-font-size: 12px;
-fx-text-fill: #aaa;
}
/* Hide MenuButton text & arrow */
.icon-button > .label {
-fx-padding: 0;
-fx-text-fill: transparent;
}
.icon-button > .arrow-button,
.icon-button > .arrow {
-fx-padding: 0;
-fx-shape: null; /* removes arrow shape */
-fx-background-color: transparent;
-fx-opacity: 0;
}
.icon-image {
-fx-smooth: true; /* keeps scaling smooth */
-fx-opacity: 0.8; /* slightly dim until hover */
}
.icon-image:hover {
-fx-opacity: 1.0; /* brighten on hover */
}
/* Container for all settings buttons */
.settings-options {
-fx-background-color: transparent;
-fx-spacing: 4;
-fx-padding: 8 0 8 0;
-fx-border-color: #2a3b47;
-fx-border-width: 0 0 0 0; /* thin top border */
}
/* Settings action buttons */
.settings-option {
-fx-background-color: transparent;
-fx-text-fill: #ddd;
-fx-font-size: 14px;
-fx-alignment: CENTER_LEFT;
-fx-padding: 10 14;
-fx-background-radius: 6;
-fx-cursor: hand;
/* space between icon and text */
-fx-graphic-text-gap: 10px;
}
/* Hover effect */
.settings-option:hover {
-fx-background-color: #2c3e50;
}
/* Pressed effect */
.settings-option:pressed {
-fx-background-color: #1f2a36;
}
src/main/resources/org/to/telegramfinalproject/CSS/light_theme.css
+138
View File
@@ -763,3 +763,141 @@
-fx-background-color: #fff;
}
.settings-card {
-fx-background-color: #ffffff;
-fx-background-radius: 8;
-fx-padding: 12;
}
.settings-avatar {
-fx-fit-width: 56px;
-fx-fit-height: 56px;
}
.settings-name {
-fx-font-size: 16px;
-fx-font-weight: bold;
-fx-text-fill: #000000;
}
.settings-id {
-fx-font-size: 13px;
-fx-text-fill: #666666;
}
.settings-option {
-fx-background-color: transparent;
-fx-text-fill: #000000;
-fx-font-size: 14px;
-fx-alignment: CENTER_LEFT;
}
.settings-option:hover {
-fx-background-color: #f1f1f1;
}
.settings-menu {
-fx-background-color: transparent;
-fx-font-size: 18px;
-fx-text-fill: #333333;
}
.settings-header {
-fx-padding: 8 12;
-fx-border-color: -fx-box-border;
-fx-border-width: 0 0 1 0; /* bottom border only */
}
.settings-title {
-fx-font-size: 15px;
-fx-font-weight: bold;
-fx-text-fill: -fx-text-base-color;
}
.icon-button {
-fx-background-color: transparent;
-fx-padding: 0;
}
.icon-button:hover {
-fx-background-color: rgba(0,0,0,0.05);
-fx-background-radius: 50%;
}
/* Profile header */
.profile-header {
-fx-padding: 12 16;
}
.profile-avatar {
-fx-background-radius: 50%;
-fx-effect: dropshadow(gaussian, rgba(0,0,0,0.2), 4, 0.3, 0, 1);
}
.profile-name {
-fx-font-size: 14px;
-fx-font-weight: bold;
-fx-text-fill: -fx-text-base-color;
}
.profile-id {
-fx-font-size: 12px;
-fx-text-fill: #888;
}
/* Hide MenuButton text & arrow */
.icon-button > .label {
-fx-padding: 0;
-fx-text-fill: transparent;
}
.icon-button > .arrow-button,
.icon-button > .arrow {
-fx-padding: 0;
-fx-shape: null; /* removes arrow shape */
-fx-background-color: transparent;
-fx-opacity: 0;
}
.icon-image {
-fx-smooth: true; /* keeps scaling smooth */
-fx-opacity: 0.8; /* slightly dim until hover */
}
.icon-image:hover {
-fx-opacity: 1.0; /* brighten on hover */
}
/* Container for all settings buttons */
.settings-options {
-fx-background-color: transparent;
-fx-spacing: 4;
-fx-padding: 8 0 8 0;
-fx-border-color: #e6e6e6;
-fx-border-width: 0 0 0 0; /* thin top border */
}
/* Settings action buttons */
.settings-option {
-fx-background-color: transparent;
-fx-text-fill: #222;
-fx-font-size: 14px;
-fx-alignment: CENTER_LEFT;
-fx-padding: 10 14;
-fx-background-radius: 6;
-fx-cursor: hand;
/* space between icon and text */
-fx-graphic-text-gap: 10px;
}
/* Hover effect */
.settings-option:hover {
-fx-background-color: #f2f2f2;
}
/* Pressed effect */
.settings-option:pressed {
-fx-background-color: #e0e0e0;
}
src/main/resources/org/to/telegramfinalproject/Fxml/main.fxml
+5 -1
View File
@@ -166,11 +166,15 @@
</items>
</SplitPane>
<!-- Overlay (for sidebar) -->
<!-- ===== Overlay background for sidebar only ===== -->
<Pane fx:id="overlay"
mouseTransparent="true"
onMouseClicked="#closeSidebar"
styleClass="overlay"
visible="false"/>
<!-- ===== Overlay layer for profile/settings/etc. ===== -->
<StackPane fx:id="overlayLayer"
pickOnBounds="false"/>
</children>
</StackPane>
src/main/resources/org/to/telegramfinalproject/Fxml/new_channel.fxml
+10 -1
View File
@@ -17,7 +17,7 @@
spacing="16"
alignment="CENTER"
prefWidth="400" maxWidth="400"
prefHeight="280" maxHeight="280">
prefHeight="380" maxHeight="380">
<!-- Header Row: Picture + Name -->
<HBox alignment="CENTER_LEFT" spacing="12">
@@ -42,6 +42,15 @@
</VBox>
</HBox>
<!-- ID -->
<VBox spacing="4" alignment="CENTER_LEFT">
<Label fx:id="channelIdLabel" text="Channel ID" styleClass="group-name-label"/>
<TextField fx:id="channelIdField"
promptText="Enter channel ID"
styleClass="group-name-field"
HBox.hgrow="ALWAYS"/>
</VBox>
<!-- Channel Description -->
<VBox spacing="4" alignment="CENTER_LEFT">
<Label fx:id="channelDescLabel" text="Description (optional)" styleClass="group-name-label"/>
src/main/resources/org/to/telegramfinalproject/Fxml/new_group.fxml
+9
View File
@@ -42,6 +42,15 @@
</VBox>
</HBox>
<!-- Group ID (below the name) -->
<VBox spacing="4" alignment="CENTER_LEFT">
<Label fx:id="groupIdLabel" text="Group ID" styleClass="group-name-label"/>
<TextField fx:id="groupIdField"
promptText="Enter group ID"
styleClass="group-name-field"
HBox.hgrow="ALWAYS"/>
</VBox>
<!-- Footer: Cancel + Next -->
<HBox alignment="CENTER_RIGHT" spacing="16">
<Button fx:id="cancelButton" text="Cancel" styleClass="footer-button"/>
src/main/resources/org/to/telegramfinalproject/Fxml/settings.fxml
+132
View File
@@ -0,0 +1,132 @@
<?xml version="1.0" encoding="UTF-8"?>
<?import java.lang.*?>
<?import javafx.scene.image.*?>
<?import javafx.scene.layout.*?>
<?import javafx.scene.image.ImageView?>
<?import javafx.scene.control.*?>
<?import javafx.geometry.Insets?>
<?import javafx.scene.image.Image?>
<StackPane styleClass="overlay-root" xmlns:fx="http://javafx.com/fxml/1" xmlns="http://javafx.com/javafx/8" fx:controller="org.to.telegramfinalproject.UI.SettingsController">
<children>
<!-- Dimmed background -->
<Pane fx:id="overlayBackground" styleClass="overlay-background" />
<!-- Settings Card -->
<VBox fx:id="settingsCard" maxHeight="470" maxWidth="350" prefHeight="470" prefWidth="350" spacing="12" styleClass="settings-card">
<children>
<!-- ===== Header ===== -->
<HBox alignment="CENTER_RIGHT" spacing="10" styleClass="settings-header">
<children>
<Label styleClass="settings-title" text="Settings" />
<Region HBox.hgrow="ALWAYS" /> <!-- pushes buttons to the right -->
<!-- 3-dots Menu -->
<MenuButton fx:id="menuButton" styleClass="icon-button">
<graphic>
<ImageView fitHeight="18" fitWidth="18" pickOnBounds="true" preserveRatio="true" styleClass="icon-image">
<image>
<Image url="@/org/to/telegramfinalproject/Icons/more_dark.png" />
</image>
</ImageView>
</graphic>
<items>
<MenuItem fx:id="editProfileItem" text="Edit Profile">
<graphic>
<ImageView fitHeight="14" fitWidth="14" preserveRatio="true">
<image>
<Image url="@/org/to/telegramfinalproject/Icons/edit_dark.png" />
</image>
</ImageView>
</graphic>
</MenuItem>
<MenuItem fx:id="logoutItem" text="Log Out">
<graphic>
<ImageView fitHeight="14" fitWidth="14" preserveRatio="true">
<image>
<Image url="@/org/to/telegramfinalproject/Icons/log_out.png" />
</image>
</ImageView>
</graphic>
</MenuItem>
</items>
</MenuButton>
<!-- Close Button -->
<Button fx:id="closeButton" styleClass="icon-button" text="✕" />
</children>
</HBox>
<!-- ===== Profile Info ===== -->
<HBox alignment="CENTER_LEFT" spacing="12" styleClass="profile-header">
<children>
<!-- Profile Picture -->
<ImageView fx:id="profileImage" fitHeight="92" fitWidth="92" preserveRatio="true" styleClass="profile-avatar" />
<!-- Name + ID -->
<VBox alignment="CENTER_LEFT" spacing="2">
<children>
<Label fx:id="profileName" styleClass="profile-name" text="User Name" />
<Label fx:id="profileId" styleClass="profile-id" />
</children>
</VBox>
</children>
</HBox>
<Separator />
<!-- ===== Options ===== -->
<VBox spacing="8" styleClass="settings-options">
<children>
<!-- My Account -->
<Button fx:id="myAccountButton" prefHeight="25.0" prefWidth="361.0" styleClass="settings-option" text="My Account">
<graphic>
<ImageView fitWidth="25" fitHeight="25" preserveRatio="true">
<image>
<Image url="@/org/to/telegramfinalproject/Icons/my_profile_dark.png"/>
</image>
</ImageView>
</graphic>
</Button>
<!-- Privacy and Security -->
<Button fx:id="privacyButton" prefHeight="25.0" prefWidth="376.0" styleClass="settings-option" text="Privacy and Security">
<graphic>
<ImageView fitWidth="25" fitHeight="25" preserveRatio="true">
<image>
<Image url="@/org/to/telegramfinalproject/Icons/lock_dark.png"/>
</image>
</ImageView>
</graphic>
</Button>
<!-- Telegram Q&A -->
<Button fx:id="faqButton" prefHeight="25.0" prefWidth="390.0" styleClass="settings-option" text="Telegram Q&amp;A">
<graphic>
<ImageView fitWidth="25" fitHeight="25" preserveRatio="true">
<image>
<Image url="@/org/to/telegramfinalproject/Icons/telegram_qna_dark.png"/>
</image>
</ImageView>
</graphic>
</Button>
<!-- Telegram Features -->
<Button fx:id="featuresButton" prefHeight="25.0" prefWidth="370.0" styleClass="settings-option" text="Telegram Features">
<graphic>
<ImageView fitWidth="25" fitHeight="25" preserveRatio="true">
<image>
<Image url="@/org/to/telegramfinalproject/Icons/telegram_features_dark.png"/>
</image>
</ImageView>
</graphic>
</Button>
</children>
</VBox>
</children>
</VBox>
</children>
</StackPane>
src/main/resources/org/to/telegramfinalproject/Icons/lock_dark.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 305 B

src/main/resources/org/to/telegramfinalproject/Icons/lock_light.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 260 B

src/main/resources/org/to/telegramfinalproject/Icons/log_out.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 553 B