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-07-31 20:46:09 +03:30
parent daa734389b
commit a88fcc68d1
1 changed files with 342 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -12,61 +12,66 @@
<div class="container-fluid"> <div class="container-fluid">
<div class="row" style="height:85vh"> <div class="row" style="height:85vh">
<!-- Sidebar (A) --> <!-- Sidebar (A) -->
<div class="col-md-3 bg-light d-flex flex-column p-2 rounded-end" id="A"> <div class="col-md-3 sidebar-container" id="A">
<!-- A1: Header --> <!-- A1: Header -->
<div class="border mb-2 p-2" id="A1"> <div class="sidebar-header" id="A1">
گفتگو های اخیر <div class="header-content">
<Icon Name="IconName.ChatDots" Class="header-icon" />
<span class="header-text">گفتگو های اخیر</span>
</div>
</div> </div>
<!-- A2: Buttons --> <!-- A2: Buttons -->
<div class="d-flex justify-content-between mb-2" id="A2"> <div class="sidebar-tabs" id="A2">
<!-- Inbox1 --> <!-- Inbox1 -->
<Button Outline="@isSelectedInbox1" Type="ButtonType.Link" @onclick="async()=>{await OnclickInbox(1);}" Size=ButtonSize.ExtraSmall Color="ButtonColor.Secondary"> <Button Outline="@isSelectedInbox1" Type="ButtonType.Link" @onclick="async()=>{await OnclickInbox(1);}" Size=ButtonSize.Small Color="ButtonColor.Primary"
پیام های آمده <Badge Color="BadgeColor.Warning">@Inbox1Items.Count()</Badge> 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>
</Button> </Button>
<!-- Inbox2 --> <!-- Inbox2 -->
<Button Outline="@isSelectedInbox2" Type="ButtonType.Link" @onclick="async()=>{await OnclickInbox(2);}" Size=ButtonSize.ExtraSmall Color="ButtonColor.Secondary"> <Button Outline="@isSelectedInbox2" Type="ButtonType.Link" @onclick="async()=>{await OnclickInbox(2);}" Size=ButtonSize.Small Color="ButtonColor.Primary"
پیام های من <Badge Color="BadgeColor.Warning">@Inbox2Items.Count()</Badge> 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>
</Button> </Button>
<!-- Inbox3 --> <!-- Inbox3 -->
<Button Outline="@isSelectedInbox3" Type="ButtonType.Link" @onclick="async()=>{await OnclickInbox(3);}" Size=ButtonSize.ExtraSmall Color="ButtonColor.Secondary"> <Button Outline="@isSelectedInbox3" Type="ButtonType.Link" @onclick="async()=>{await OnclickInbox(3);}" Size=ButtonSize.Small Color="ButtonColor.Primary"
پیام های بسته class=@($"tab-button {(isSelectedInbox3 ? "active-tab" : "")}")>
<Icon Name="IconName.Archive" Class="tab-icon" />
<span class="tab-text">پیام های بسته</span>
</Button> </Button>
</div> </div>
<!-- A3: Chat list --> <!-- A3: Chat list -->
<div class="flex-fill border p-2 overflow-auto" id="A3" style="height: 300px; overflow-y: auto;"> <div class="sidebar-chat-list" id="A3">
<Spinner Class="me-3" Type="SpinnerType.Dots" Color="SpinnerColor.Primary" Visible="@chatloading" Size="SpinnerSize.Small" /> <Spinner Class="me-3" Type="SpinnerType.Dots" Color="SpinnerColor.Primary" Visible="@chatloading" Size="SpinnerSize.Small" />
@if (isSelectedInbox1) @if (isSelectedInbox1)
{ {
@foreach (var item in Inbox1Items) @foreach (var item in Inbox1Items)
{ {
<div class="d-flex align-items-center p-3 border-bottom message-item hover-bg" <div class="chat-list-item" @onclick="async()=>await onClickSelectedChat(1,item)">
style="cursor: pointer; margin-top: -10px;margin-bottom: -10px;" @onclick="async()=>await onClickSelectedChat(1,item)"> <div class="item-avatar">
<Icon Name="IconName.Person" Class="avatar-icon" />
<div class="flex-grow-1">
<div class="d-flex justify-content-between">
<strong>@item.UserFullName</strong>
<small class="text-muted">@item.LastMsgdate</small>
<small class="text-muted">@item.LastMsgtime</small>
</div> </div>
<div class="text-muted small text-truncate">@item.LastText</div> <div class="item-content">
<div class="item-header">
<strong class="item-name">@item.UserFullName</strong>
<div class="item-time">
<small class="time-text">@item.LastMsgdate</small>
<small class="time-text">@item.LastMsgtime</small>
</div>
</div>
<div class="item-message">@item.LastText</div>
</div>
<div class="item-badge">
<Badge Color="BadgeColor.Danger" Class="unread-badge">@item.Responses.Count()</Badge>
</div> </div>
<Badge Style="margin-top:25px" Color="BadgeColor.Danger">@item.Responses.Count()</Badge>
</div> </div>
} }
} }
@@ -74,25 +79,27 @@
{ {
@foreach (var item in Inbox2Items) @foreach (var item in Inbox2Items)
{ {
<div class="d-flex align-items-center p-3 border-bottom message-item hover-bg" <div class="chat-list-item" @onclick="async()=>await onClickSelectedChat(2,item)">
style="cursor: pointer; margin-top: -10px;margin-bottom: -10px;" @onclick="async()=>await onClickSelectedChat(2,item)"> <div class="item-avatar">
<Icon Name="IconName.Person" Class="avatar-icon" />
<div class="flex-grow-1">
<div class="d-flex justify-content-between">
<strong>@item.UserFullName</strong>
<small class="text-muted">@item.LastMsgdate</small>
<small class="text-muted">@item.LastMsgtime</small>
</div> </div>
<div class="text-muted small text-truncate">@item.LastText</div> <div class="item-content">
<div class="item-header">
<strong class="item-name">@item.UserFullName</strong>
<div class="item-time">
<small class="time-text">@item.LastMsgdate</small>
<small class="time-text">@item.LastMsgtime</small>
</div>
</div>
<div class="item-message">@item.LastText</div>
</div> </div>
@if (item.Responses.Count(c => !c.IsRead && c.Type == ConversationType.UE) > 0) @if (item.Responses.Count(c => !c.IsRead && c.Type == ConversationType.UE) > 0)
{ {
<Badge Style="margin-top:25px" Color="BadgeColor.Danger">@item.Responses.Count(c => !c.IsRead && c.Type == ConversationType.UE)</Badge> <div class="item-badge">
} <Badge Color="BadgeColor.Danger" Class="unread-badge">@item.Responses.Count(c => !c.IsRead && c.Type == ConversationType.UE)</Badge>
</div>
}
</div> </div>
} }
} }
@@ -100,20 +107,21 @@
{ {
@foreach (var item in Inbox3Items) @foreach (var item in Inbox3Items)
{ {
<div class="d-flex align-items-center p-3 border-bottom message-item hover-bg" <div class="chat-list-item" @onclick="async()=>await onClickSelectedChat(3,item)">
style="cursor: pointer; margin-top: -10px;margin-bottom: -10px;" @onclick="async()=>await onClickSelectedChat(3,item)"> <div class="item-avatar">
<Icon Name="IconName.Person" Class="avatar-icon" />
<div class="flex-grow-1">
<div class="d-flex justify-content-between">
<strong>@item.UserFullName</strong>
<small class="text-muted">@item.LastMsgdate</small>
<small class="text-muted">@item.LastMsgtime</small>
</div> </div>
<div class="text-muted small text-truncate">@item.LastText</div> <div class="item-content">
<div class="item-header">
<strong class="item-name">@item.UserFullName</strong>
<div class="item-time">
<small class="time-text">@item.LastMsgdate</small>
<small class="time-text">@item.LastMsgtime</small>
</div>
</div>
<div class="item-message">@item.LastText</div>
</div> </div>
</div> </div>
} }
} }
@@ -340,6 +348,282 @@
} }
<style> <style>
/* Enhanced Sidebar Styling */
.sidebar-container {
background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
border: 2px solid #e9ecef;
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;
height: 85vh;
display: flex;
flex-direction: column;
overflow: hidden;
}
.sidebar-header {
background: linear-gradient(135deg, #0d6efd 0%, #0b5ed7 100%);
border-radius: 15px;
padding: 1rem;
margin-bottom: 1.5rem;
box-shadow: 0 4px 12px rgba(13, 110, 253, 0.3);
position: relative;
overflow: hidden;
}
.sidebar-header::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: linear-gradient(45deg, transparent 30%, rgba(255, 255, 255, 0.1) 50%, transparent 70%);
animation: shimmer 3s infinite;
}
@@keyframes shimmer {
0% { transform: translateX(-100%) translateY(-100%) rotate(45deg); }
100% { transform: translateX(100%) translateY(100%) rotate(45deg); }
}
.header-content {
display: flex;
align-items: center;
gap: 0.75rem;
position: relative;
z-index: 2;
}
.header-icon {
font-size: 1.5rem;
color: white;
filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}
.header-text {
color: white;
font-size: 1.1rem;
font-weight: 700;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
.sidebar-tabs {
display: flex;
flex-direction: column;
gap: 0.75rem;
margin-bottom: 1.5rem;
}
.tab-button {
border-radius: 12px;
padding: 0.75rem 1rem;
transition: all 0.3s ease;
border: 2px solid transparent;
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
position: relative;
overflow: hidden;
}
.tab-button::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
transition: left 0.5s ease;
}
.tab-button:hover::before {
left: 100%;
}
.tab-button:hover {
transform: translateY(-2px);
box-shadow: 0 6px 16px rgba(13, 110, 253, 0.2);
border-color: #0d6efd;
}
.tab-button.active-tab {
background: linear-gradient(135deg, #0d6efd 0%, #0b5ed7 100%);
color: white;
border-color: #0d6efd;
box-shadow: 0 4px 12px rgba(13, 110, 253, 0.3);
}
.tab-icon {
margin-right: 0.5rem;
font-size: 1.1rem;
}
.tab-text {
font-weight: 600;
font-size: 0.9rem;
}
.tab-badge {
margin-left: auto;
font-size: 0.75rem;
padding: 0.25rem 0.5rem;
border-radius: 10px;
}
.sidebar-chat-list {
flex: 1;
overflow-y: auto;
border-radius: 15px;
background: rgba(255, 255, 255, 0.8);
backdrop-filter: blur(10px);
padding: 1rem;
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05);
}
.sidebar-chat-list::-webkit-scrollbar {
width: 6px;
}
.sidebar-chat-list::-webkit-scrollbar-track {
background: rgba(241, 241, 241, 0.5);
border-radius: 10px;
}
.sidebar-chat-list::-webkit-scrollbar-thumb {
background: linear-gradient(135deg, #0d6efd 0%, #0b5ed7 100%);
border-radius: 10px;
transition: all 0.3s ease;
}
.sidebar-chat-list::-webkit-scrollbar-thumb:hover {
background: linear-gradient(135deg, #0b5ed7 0%, #0a4b9e 100%);
}
.chat-list-item {
display: flex;
align-items: center;
padding: 1rem;
margin-bottom: 0.75rem;
border-radius: 12px;
background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
border: 1px solid #e9ecef;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
transition: all 0.3s ease;
cursor: pointer;
position: relative;
overflow: hidden;
}
.chat-list-item::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(13, 110, 253, 0.1), transparent);
transition: left 0.5s ease;
}
.chat-list-item:hover::before {
left: 100%;
}
.chat-list-item:hover {
transform: translateY(-2px);
box-shadow: 0 6px 16px rgba(13, 110, 253, 0.15);
border-color: #0d6efd;
}
.item-avatar {
width: 45px;
height: 45px;
border-radius: 50%;
background: linear-gradient(135deg, #0d6efd 0%, #0b5ed7 100%);
display: flex;
align-items: center;
justify-content: center;
margin-right: 1rem;
box-shadow: 0 4px 12px rgba(13, 110, 253, 0.3);
flex-shrink: 0;
}
.avatar-icon {
color: white;
font-size: 1.2rem;
}
.item-content {
flex: 1;
min-width: 0;
}
.item-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 0.5rem;
}
.item-name {
color: #333;
font-size: 0.95rem;
font-weight: 600;
margin: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.item-time {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 0.25rem;
flex-shrink: 0;
}
.time-text {
color: #6c757d;
font-size: 0.75rem;
font-weight: 500;
}
.item-message {
color: #6c757d;
font-size: 0.85rem;
line-height: 1.4;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin: 0;
}
.item-badge {
margin-left: 0.75rem;
flex-shrink: 0;
}
.unread-badge {
font-size: 0.75rem;
padding: 0.25rem 0.5rem;
border-radius: 10px;
animation: pulse 2s infinite;
}
@@keyframes pulse {
0%, 100% {
transform: scale(1);
box-shadow: 0 2px 4px rgba(220, 53, 69, 0.3);
}
50% {
transform: scale(1.05);
box-shadow: 0 4px 8px rgba(220, 53, 69, 0.4);
}
}
/* Improved input group styling */ /* Improved input group styling */
.input-group { .input-group {
margin-bottom: 1rem; margin-bottom: 1rem;