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:
Asal Lotfi
2025-09-04 00:20:20 +03:30
parent aa066322c6 eb0cae92f5
commit 0a24d7ed1a
32 changed files with 2837 additions and 544 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/main/resources/org/to/telegramfinalproject/CSS/chat.css
+76
View File
@@ -0,0 +1,76 @@
/* دقیقاً فقط روی این دو دکمه اعمال می‌شود */
#joinAction, #addContactAction {
-fx-background-color: transparent, transparent, transparent, transparent;
-fx-background-insets: 0,0,0,0;
-fx-background-radius: 0,0,0,0;
-fx-border-color: transparent;
-fx-border-width: 0;
-fx-text-fill: #1e88e5; /* آبی لینک */
-fx-font-weight: 700;
-fx-font-size: 12px;
-fx-padding: 12 0 12 0;
-fx-cursor: hand;
-fx-effect: null;
}
#joinAction:hover, #addContactAction:hover {
-fx-underline: true;
}
#joinAction:focused, #addContactAction:focused {
-fx-underline: true;
-fx-focus-color: transparent;
-fx-faint-focus-color: transparent;
}
#joinAction:armed, #addContactAction:armed {
-fx-opacity: .85;
}
/* ظرف بنر پایین */
.chat-footer-banner {
-fx-background-color: transparent;
}
/* دکمهٔ لینک‌مانند (مشترک) */
.footer-link-btn {
-fx-background-color: transparent;
-fx-background-insets: 0;
-fx-background-radius: 0;
-fx-padding: 6 0 6 0; /* نازک مثل لینک */
-fx-border-color: transparent;
-fx-font-size: 14px;
-fx-font-weight: 700;
-fx-text-fill: #1a73e8; /* پیش‌فرض آبی (برای Join/Add) */
}
/* کانتینر بنر پایین چت */
.chat-footer-banner {
-fx-background-color: transparent;
-fx-alignment: center;
}
/* متن آبی برای حالت Read-only */
.chat-footer-banner .banner-text-blue {
-fx-text-fill: #1E88E5; /* آبی */
-fx-font-weight: 700;
-fx-background-color: transparent;
}
/* لینک‌استایل دکمه‌ها در بنر */
.chat-footer-banner .footer-link-btn {
-fx-background-color: transparent;
-fx-text-fill: #1E88E5; /* آبی پیش‌فرض */
-fx-font-weight: 700;
-fx-padding: 6 12;
-fx-background-insets: 0;
-fx-cursor: hand;
}
.chat-footer-banner .footer-link-btn:hover {
-fx-underline: true;
}
/* نسخه قرمز برای UNBLOCK */
.chat-footer-banner .footer-link-btn.danger {
-fx-text-fill: #D32F2F; /* قرمز */
}
src/main/resources/org/to/telegramfinalproject/CSS/telegram-action.css
+109
View File
@@ -0,0 +1,109 @@
/* رنگ‌ها */
:root {
-tg-bg: #ffffff;
-tg-sheet: #ffffff;
-tg-shadow: rgba(0,0,0,.25);
-tg-sep: rgba(0,0,0,.06);
-tg-text: #0f141a;
-tg-subtext: #6e7b87;
-tg-danger: #e53935;
-tg-primary: #2481cc;
-tg-chip-bg: #f5f7fa;
}
/* ACTION SHEET */
.tg-action-sheet {
-fx-background-color: -tg-sheet;
-fx-background-radius: 16;
-fx-effect: dropshadow(gaussian, -tg-shadow, 24, 0.26, 0, 4);
-fx-padding: 0;
-fx-border-radius: 16;
}
.tg-reaction-bar {
-fx-background-color: transparent;
-fx-spacing: 12;
}
.tg-reaction {
-fx-font-size: 22px;
-fx-cursor: hand;
-fx-padding: 2 4 2 4;
-fx-background-radius: 12;
}
.tg-reaction:hover {
-fx-background-color: -tg-chip-bg;
}
.tg-menu { -fx-background-color: transparent; }
.tg-item {
-fx-background-color: transparent;
-fx-background-radius: 12;
}
.tg-item:hover {
-fx-background-color: -tg-chip-bg;
}
.tg-item .tg-label {
-fx-text-fill: -tg-text;
-fx-font-size: 16px;
}
.tg-item.danger .tg-label {
-fx-text-fill: -tg-danger;
}
.tg-sep {
-fx-background-color: -tg-sep;
-fx-min-height: 1px;
-fx-pref-height: 1px;
-fx-max-height: 1px;
-fx-background-insets: 0 14 0 14;
}
/* DELETE SHEET */
.tg-delete-sheet {
-fx-background-color: -tg-bg;
-fx-background-radius: 16;
-fx-effect: dropshadow(gaussian, -tg-shadow, 28, 0.28, 0, 4);
}
.tg-delete-title {
-fx-font-size: 18px;
-fx-text-fill: -tg-text;
}
.tg-delete-check {
-fx-text-fill: -tg-text;
-fx-font-size: 14px;
}
/* Buttons */
.tg-btn-secondary {
-fx-background-color: transparent;
-fx-text-fill: -tg-primary;
-fx-font-size: 14px;
-fx-padding: 8 14 8 14;
-fx-background-radius: 10;
}
.tg-btn-secondary:hover {
-fx-background-color: -tg-chip-bg;
}
.tg-btn-danger {
-fx-background-color: -tg-danger;
-fx-text-fill: white;
-fx-font-size: 14px;
-fx-padding: 8 16 8 16;
-fx-background-radius: 10;
}
.tg-btn-danger:hover { -fx-opacity: .9; }
/* دارک‌مود (اگر CSS سوییچ داری، این کلس را به Scene اضافه کن) */
.root.dark .tg-action-sheet,
.root.dark .tg-delete-sheet { -fx-background-color: #1f2a33; }
.root.dark {
-tg-bg: #1f2a33;
-tg-sheet: #22303a;
-tg-text: #e8f1f8;
-tg-subtext: #9bb2c3;
-tg-sep: rgba(255,255,255,.08);
-tg-chip-bg: rgba(255,255,255,.06);
-tg-shadow: rgba(0,0,0,.45);
}
src/main/resources/org/to/telegramfinalproject/Fxml/chat_page.fxml
+78 -54
View File
@@ -6,17 +6,19 @@
<?import javafx.scene.image.ImageView?>
<?import javafx.scene.layout.*?>
<?import java.net.URL?>
<VBox xmlns="http://javafx.com/javafx/17"
xmlns:fx="http://javafx.com/fxml"
fx:controller="org.to.telegramfinalproject.UI.ChatPageController"
spacing="0"
styleClass="chat-root">
<stylesheets>
<URL value="@/org/to/telegramfinalproject/CSS/chat.css"/>
</stylesheets>
<!-- HEADER: avatar + name/status (left) | search + more (right) -->
<HBox fx:id="chatHeader" spacing="10" styleClass="chat-header">
<padding>
<Insets top="8" right="12" bottom="8" left="12"/>
</padding>
<padding><Insets top="8" right="12" bottom="8" left="12"/></padding>
<!-- Avatar -->
<ImageView fx:id="userAvatar" fitWidth="36" fitHeight="36" preserveRatio="true"/>
@@ -33,9 +35,7 @@
<Button fx:id="searchInChatButton" styleClass="icon-btn" onAction="#openSearchPanel">
<graphic>
<ImageView fx:id="searchIcon" fitWidth="20" fitHeight="20" preserveRatio="true">
<image>
<Image url="@/org/to/telegramfinalproject/Icons/search_light.png"/>
</image>
<image><Image url="@/org/to/telegramfinalproject/Icons/search_light.png"/></image>
</ImageView>
</graphic>
</Button>
@@ -44,9 +44,7 @@
<Button fx:id="moreButton" styleClass="icon-btn">
<graphic>
<ImageView fx:id="moreIcon" fitWidth="18" fitHeight="18" preserveRatio="true">
<image>
<Image url="@/org/to/telegramfinalproject/Icons/more_light.png"/>
</image>
<image><Image url="@/org/to/telegramfinalproject/Icons/more_light.png"/></image>
</ImageView>
</graphic>
<contextMenu>
@@ -55,18 +53,14 @@
<MenuItem fx:id="viewProfileItem" text="View profile">
<graphic>
<ImageView fitWidth="16" fitHeight="16" preserveRatio="true">
<image>
<Image url="@/org/to/telegramfinalproject/Icons/view_profile_light.png"/>
</image>
<image><Image url="@/org/to/telegramfinalproject/Icons/view_profile_light.png"/></image>
</ImageView>
</graphic>
</MenuItem>
<MenuItem fx:id="deleteChatItem" text="Delete chat" style="-fx-text-fill: red;">
<graphic>
<ImageView fitWidth="16" fitHeight="16" preserveRatio="true">
<image>
<Image url="@/org/to/telegramfinalproject/Icons/delete_red.png"/>
</image>
<image><Image url="@/org/to/telegramfinalproject/Icons/delete_red.png"/></image>
</ImageView>
</graphic>
</MenuItem>
@@ -85,50 +79,80 @@
styleClass="chat-scroll">
<content>
<VBox fx:id="messageContainer" spacing="10">
<padding>
<Insets top="10" right="10" bottom="10" left="10"/>
</padding>
<padding><Insets top="10" right="10" bottom="10" left="10"/></padding>
</VBox>
</content>
</ScrollPane>
<!-- INPUT BAR -->
<HBox fx:id="inputBar" spacing="8" styleClass="chat-input-bar">
<padding>
<Insets top="8" right="12" bottom="8" left="12"/>
</padding>
<!-- ===== FOOTER: فقط یکی از این پنل‌ها نمایش داده می‌شود ===== -->
<!-- حالت عادی: کامپوزر پیام -->
<VBox fx:id="composerPane" spacing="0" visible="true" managed="true">
<HBox spacing="8" styleClass="chat-input-bar">
<padding><Insets top="8" right="12" bottom="8" left="12"/></padding>
<!-- Attachment -->
<Button fx:id="attachmentButton" styleClass="icon-btn">
<graphic>
<ImageView fx:id="attachmentIcon" fitWidth="20" fitHeight="20" preserveRatio="true">
<image><Image url="@/org/to/telegramfinalproject/Icons/attachment_light.png"/></image>
</ImageView>
</graphic>
</Button>
<!-- Expanding input -->
<TextArea fx:id="messageInput"
HBox.hgrow="ALWAYS"
promptText="Write a message..."
styleClass="msg-input"
wrapText="true"
prefRowCount="1"
minHeight="40"
maxHeight="120"
VBox.vgrow="NEVER"/>
<!-- Send -->
<Button fx:id="sendButton" styleClass="send-btn">
<graphic>
<ImageView fx:id="sendIcon" fitWidth="20" fitHeight="20" preserveRatio="true">
<image><Image url="@/org/to/telegramfinalproject/Icons/send_cyan2.png"/></image>
</ImageView>
</graphic>
</Button>
</HBox>
</VBox>
<VBox fx:id="joinPane" alignment="CENTER" visible="false" managed="false" styleClass="chat-input-bar">
<padding><Insets top="12" right="12" bottom="12" left="12"/></padding>
<Button fx:id="joinButton" id="joinAction"
text="JOIN CHANNEL" onAction="#onJoinClicked"/>
</VBox>
<VBox fx:id="addContactPane" alignment="CENTER" visible="false" managed="false" styleClass="chat-input-bar">
<padding><Insets top="12" right="12" bottom="12" left="12"/></padding>
<Button fx:id="addContactButton" id="addContactAction"
text="ADD CONTACT" onAction="#onAddContactClicked"/>
</VBox>
<VBox fx:id="readOnlyPane" spacing="0" alignment="CENTER"
visible="false" managed="false" styleClass="chat-footer-banner" >
<padding><Insets top="10" right="12" bottom="10" left="12"/></padding>
<Label fx:id="readOnlyLabel"
text="You are not allowed to send messages."
styleClass="footer-link-btn"/>
</VBox>
<VBox fx:id="blockedPane" spacing="0" alignment="CENTER"
visible="false" managed="false" styleClass="chat-footer-banner">
<padding><Insets top="12" right="12" bottom="12" left="12"/></padding>
<Button fx:id="unblockBtn"
text="UNBLOCK"
onAction="#onUnblockClicked"
styleClass="footer-link-btn danger"/>
</VBox>
<!-- Attachment -->
<Button fx:id="attachmentButton" styleClass="icon-btn">
<graphic>
<ImageView fx:id="attachmentIcon" fitWidth="20" fitHeight="20" preserveRatio="true">
<image>
<Image url="@/org/to/telegramfinalproject/Icons/attachment_light.png"/>
</image>
</ImageView>
</graphic>
</Button>
<!-- Expanding input -->
<TextArea fx:id="messageInput"
HBox.hgrow="ALWAYS"
promptText="Write a message..."
styleClass="msg-input"
wrapText="true"
prefRowCount="1"
minHeight="40"
maxHeight="120"
VBox.vgrow="NEVER" />
<!-- Send -->
<Button fx:id="sendButton" styleClass="send-btn">
<graphic>
<ImageView fx:id="sendIcon" fitWidth="20" fitHeight="20" preserveRatio="true">
<image>
<Image url="@/org/to/telegramfinalproject/Icons/send_cyan2.png"/>
</image>
</ImageView>
</graphic>
</Button>
</HBox>
</VBox>