mmr/Hushian
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

...

Browse Source
This commit is contained in:
mmrbnjd
2025-08-01 14:47:05 +03:30
parent 5cbb98360c
commit 1efa21c998
1 changed files with 120 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

139
Presentation/HushianWebApp/Pages/Chat.razor
View File

@@ -8,7 +8,7 @@
@inject GroupService groupService
@inject UserService userService
@inject IJSRuntime JS
<PageTitle>گفتمان</PageTitle>
<div class="container-fluid">
<div class="row" style="height:85vh">
<!-- Sidebar (A) -->
@@ -25,7 +25,7 @@
<div class="sidebar-tabs" id="A2">
<!-- Inbox1 -->
<Button Outline="@isSelectedInbox1" Type="ButtonType.Link" @onclick="async()=>{await OnclickInbox(1);}" Size=ButtonSize.Small Color="ButtonColor.Primary"
class=@($"tab-button {(isSelectedInbox1 ? "active-tab" : "")}")>
class=@($"tab-button {(isSelectedInbox1 ? "active-tab" : "")}")>
<Icon Name="IconName.Inbox" Class="tab-icon" />
<span class="tab-text">پیام های آمده</span>
<Badge Color="BadgeColor.Warning" Class="tab-badge">@Inbox1Items.Count()</Badge>
@@ -33,7 +33,7 @@
<!-- Inbox2 -->
<Button Outline="@isSelectedInbox2" Type="ButtonType.Link" @onclick="async()=>{await OnclickInbox(2);}" Size=ButtonSize.Small Color="ButtonColor.Primary"
class=@($"tab-button {(isSelectedInbox2 ? "active-tab" : "")}")>
class=@($"tab-button {(isSelectedInbox2 ? "active-tab" : "")}")>
<Icon Name="IconName.Send" Class="tab-icon" />
<span class="tab-text">پیام های من</span>
<Badge Color="BadgeColor.Warning" Class="tab-badge">@Inbox2Items.Count()</Badge>
@@ -41,7 +41,7 @@
<!-- Inbox3 -->
<Button Outline="@isSelectedInbox3" Type="ButtonType.Link" @onclick="async()=>{await OnclickInbox(3);}" Size=ButtonSize.Small Color="ButtonColor.Primary"
class=@($"tab-button {(isSelectedInbox3 ? "active-tab" : "")}")>
class=@($"tab-button {(isSelectedInbox3 ? "active-tab" : "")}")>
<Icon Name="IconName.Archive" Class="tab-icon" />
<span class="tab-text">پیام های بسته</span>
</Button>
@@ -55,9 +55,7 @@
@foreach (var item in Inbox1Items)
{
<div class="chat-list-item" @onclick="async()=>await onClickSelectedChat(1,item)">
<div class="item-avatar">
<Icon Name="IconName.Person" Class="avatar-icon" />
</div>
<div class="item-content">
<div class="item-header">
<strong class="item-name">@item.UserFullName</strong>
@@ -80,9 +78,7 @@
@foreach (var item in Inbox2Items)
{
<div class="chat-list-item" @onclick="async()=>await onClickSelectedChat(2,item)">
<div class="item-avatar">
<Icon Name="IconName.Person" Class="avatar-icon" />
</div>
<div class="item-content">
<div class="item-header">
<strong class="item-name">@item.UserFullName</strong>
@@ -108,9 +104,7 @@
@foreach (var item in Inbox3Items)
{
<div class="chat-list-item" @onclick="async()=>await onClickSelectedChat(3,item)">
<div class="item-avatar">
<Icon Name="IconName.Person" Class="avatar-icon" />
</div>
<div class="item-content">
<div class="item-header">
<strong class="item-name">@item.UserFullName</strong>
@@ -135,7 +129,7 @@
@if (ChatCurrent != null)
{
<p type="text" class="form-control fw-bold text-primary" style="border:none;align-self: center;" aria-describedby="basic-addon1">@SelectedChatUserName</p>
<div class="d-flex gap-2 ms-auto">
<div class="d-flex gap-2 ms-auto">
@if (ChatCurrent.status == Common.Enums.ConversationStatus.InProgress)
{
<Button Color="ButtonColor.Danger" Size=ButtonSize.ExtraSmall Outline="true" Class="finish-conversation-btn"
@@ -162,6 +156,18 @@
</div>
}
else if (isSelectedInbox3)
{
<div class="warning-note">
<div class="warning-icon">
<Icon Name="IconName.ExclamationTriangle" Color="IconColor.Warning" Size="IconSize.x3" />
</div>
<div class="warning-content">
<h6 class="warning-title">نکته مهم</h6>
<p class="warning-text">از انتخاب گفتگو مطمئن شوید، بعد از انتخاب شما مسئول بررسی می‌باشد</p>
</div>
</div>
}
</div>
<!-- B1: Chat area -->
<div class="flex-fill chat-area-container" id="B1">
@@ -355,7 +361,7 @@
border-radius: 20px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05), 0 1px 3px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.8);
backdrop-filter: blur(10px);
padding: 1.5rem;
padding: 0.5rem;
height: 85vh;
display: flex;
flex-direction: column;
@@ -365,8 +371,7 @@
.sidebar-header {
background: linear-gradient(135deg, #0d6efd 0%, #0b5ed7 100%);
border-radius: 15px;
padding: 1rem;
margin-bottom: 1.5rem;
margin-bottom: 0.5rem;
box-shadow: 0 4px 12px rgba(13, 110, 253, 0.3);
position: relative;
overflow: hidden;
@@ -411,7 +416,6 @@
.sidebar-tabs {
display: flex;
flex-direction: column;
gap: 0.75rem;
margin-bottom: 1.5rem;
}
@@ -478,7 +482,7 @@
border-radius: 15px;
background: rgba(255, 255, 255, 0.8);
backdrop-filter: blur(10px);
padding: 1rem;
padding: 0.5rem;
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05);
}
@@ -502,6 +506,7 @@
}
.chat-list-item {
height:75px;
display: flex;
align-items: center;
padding: 1rem;
@@ -1001,6 +1006,102 @@
box-shadow: 0 6px 16px rgba(255, 193, 7, 0.5);
background: linear-gradient(135deg, #e0a800 0%, #d39e00 100%);
}
/* Beautiful Warning Note Styling */
.warning-note {
display: flex;
align-items: center;
gap: 1rem;
background: linear-gradient(135deg, #fff3cd 0%, #ffeaa7 100%);
border: 2px solid #ffc107;
border-radius: 20px;
padding: 1.25rem;
box-shadow: 0 4px 12px rgba(255, 193, 7, 0.2), 0 2px 4px rgba(0, 0, 0, 0.1);
position: relative;
overflow: hidden;
animation: warningGlow 3s ease-in-out infinite;
}
.warning-note::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 193, 7, 0.1), transparent);
animation: warningShimmer 4s infinite;
}
@@keyframes warningGlow {
0%, 100% {
box-shadow: 0 4px 12px rgba(255, 193, 7, 0.2), 0 2px 4px rgba(0, 0, 0, 0.1);
}
50% {
box-shadow: 0 6px 16px rgba(255, 193, 7, 0.3), 0 4px 8px rgba(0, 0, 0, 0.15);
}
}
@@keyframes warningShimmer {
0% { left: -100%; }
100% { left: 100%; }
}
.warning-icon {
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
width: 50px;
height: 50px;
background: linear-gradient(135deg, #ffc107 0%, #e0a800 100%);
border-radius: 50%;
box-shadow: 0 4px 12px rgba(255, 193, 7, 0.4);
animation: warningPulse 2s ease-in-out infinite;
}
@@keyframes warningPulse {
0%, 100% {
transform: scale(1);
box-shadow: 0 4px 12px rgba(255, 193, 7, 0.4);
}
50% {
transform: scale(1.05);
box-shadow: 0 6px 16px rgba(255, 193, 7, 0.6);
}
}
.warning-content {
flex: 1;
min-width: 0;
}
.warning-title {
color: #856404;
font-weight: 700;
font-size: 1.1rem;
margin: 0 0 0.5rem 0;
text-shadow: 0 1px 2px rgba(133, 100, 4, 0.1);
}
.warning-text {
color: #856404;
font-size: 0.95rem;
line-height: 1.5;
margin: 0;
font-weight: 500;
}
.warning-note:hover {
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(255, 193, 7, 0.3), 0 4px 8px rgba(0, 0, 0, 0.15);
transition: all 0.3s ease;
}
.warning-note:hover .warning-icon {
animation: warningPulse 1s ease-in-out infinite;
}
/* Enhanced button styling */
.finish-conversation-btn {
border-radius: 20px;