Moonlight-Panel/Moonlight
2
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #29 from Moonlight-Panel/SupportChatRedesign

Browse Source 
Support chat redesign
This commit is contained in:
Daniel Balk
2023-04-04 01:17:04 +02:00
committed by GitHub
parent bed1c3df05 f5e98bf774
commit 923f0adbef
4 changed files with 106 additions and 119 deletions
Download Patch File Download Diff File Expand all files Collapse all files

99
Moonlight/Shared/Views/Admin/Support/Index.razor
View File

@@ -14,45 +14,53 @@
<LazyLoader @ref="LazyLoader" Load="Load"> <LazyLoader @ref="LazyLoader" Load="Load">
<div class="card"> <div class="card">
<div class="card-body"> <div class="card-body">
<div class="d-flex flex-column flex-xl-row p-7"> <div class="d-flex flex-column flex-xl-row p-5 pb-0">
<div class="flex-lg-row-fluid me-xl-15 mb-20 mb-xl-0"> <div class="flex-lg-row-fluid me-xl-15 mb-20 mb-xl-0">
<div class="mb-0"> <div class="mb-0">
<h1 class="text-dark mb-10"> <h1 class="text-dark mb-6">
<TL>Open tickets</TL> <TL>Open tickets</TL>
</h1> </h1>
<div class="mb-10"> <div class="separator"></div>
<div class="mb-5">
@if (Users.Any()) @if (Users.Any())
{ {
foreach (var user in Users) foreach (var user in Users)
{ {
<div class="d-flex mb-10"> <div class="d-flex mt-3 mb-3 ms-2 me-2">
<span class="svg-icon svg-icon-2x me-5 ms-n1 mt-2 svg-icon-success"> <table>
<i class="text-primary bx bx-md bx-message-dots"></i> <tr>
</span> <td rowspan="2">
<span class="svg-icon svg-icon-2x me-5 ms-n1 svg-icon-success">
<i class="text-primary bx bx-md bx-message-dots"></i>
</span>
</td>
<td>
<a href="/admin/support/view/@(user.Id)" class="text-dark text-hover-primary fs-4 me-3 fw-semibold">
@(user.FirstName) @(user.LastName)
</a>
</td>
</tr>
<tr>
<td>
<span class="text-muted fw-semibold fs-6">
@{
var lastMessage = MessageCache.ContainsKey(user) ? MessageCache[user] : null;
}
<div class="d-flex flex-column"> @if (lastMessage == null)
<div class="d-flex align-items-center mb-2"> {
<a href="/admin/support/view/@(user.Id)" class="text-dark text-hover-primary fs-4 me-3 fw-semibold"> <TL>No message sent yet</TL>
@(user.FirstName) @(user.LastName) }
</a> else
</div> {
@(lastMessage.Message)
<span class="text-muted fw-semibold fs-6"> }
@{ </span>
var lastMessage = MessageCache.ContainsKey(user) ? MessageCache[user] : null; </td>
} </tr>
</table>
@if (lastMessage == null)
{
<TL>No message sent yet</TL>
}
else
{
@(lastMessage.Message)
}
</span>
</div>
</div> </div>
<div class="separator"></div>
} }
} }
else else
@@ -64,39 +72,6 @@
</div> </div>
</div> </div>
</div> </div>
<div class="flex-column flex-lg-row-auto w-100 mw-lg-300px mw-xxl-350px">
<div class="card-rounded bg-primary bg-opacity-5 p-10 mb-15">
<h2 class="text-dark fw-bold mb-11">
<TL>Actions</TL>
</h2>
<div class="d-flex align-items-center mb-10">
<!--begin::Icon-->
<i class="bi bi-file-earmark-text text-primary fs-1 me-5"></i>
<!--end::SymIconbol-->
<!--begin::Info-->
<div class="d-flex flex-column">
<h5 class="text-gray-800 fw-bold">Project Briefing</h5>
<!--begin::Section-->
<div class="fw-semibold">
<!--begin::Desc-->
<span class="text-muted">Check out our</span>
<!--end::Desc-->
<!--begin::Link-->
<a href="#" class="link-primary">Support Policy</a>
<!--end::Link-->
</div>
<!--end::Section-->
</div>
<!--end::Info-->
</div>
</div>
</div>
</div> </div>
</div> </div>
</div> </div>

78
Moonlight/Shared/Views/Admin/Support/View.razor
View File

@@ -22,11 +22,11 @@
{ {
<div class="row"> <div class="row">
<div class="d-flex flex-column flex-xl-row p-7"> <div class="d-flex flex-column flex-xl-row p-7">
<div class="flex-lg-row-fluid me-xl-15 mb-20 mb-xl-0"> <div class="flex-lg-row-fluid me-6 mb-20 mb-xl-0">
<div class="card"> <div class="card">
<div class="card-body"> <div class="card-body">
<LazyLoader Load="LoadMessages"> <LazyLoader Load="LoadMessages">
<div class="scroll-y me-n5 pe-5" style="max-height: 65vh; display: flex; flex-direction: column-reverse;"> <div class="scroll-y me-n5 pe-5" style="max-height: 55vh; display: flex; flex-direction: column-reverse;">
@foreach (var message in Messages) @foreach (var message in Messages)
{ {
if (message.IsSystem || message.IsSupport) if (message.IsSystem || message.IsSupport)
@@ -99,10 +99,10 @@
@if (typingUsers.Any()) @if (typingUsers.Any())
{ {
<span class="mb-5 fs-5 d-flex flex-row"> <span class="mb-5 fs-5 d-flex flex-row">
<div class="wave me-3"> <div class="wave me-1">
<div class="dot"></div> <div class="dot h-5px w-5px" style="margin-right: 1px;"></div>
<div class="dot"></div> <div class="dot h-5px w-5px" style="margin-right: 1px;"></div>
<div class="dot"></div> <div class="dot h-5px w-5px"></div>
</div> </div>
@if (typingUsers.Length > 1) @if (typingUsers.Length > 1)
{ {
@@ -118,52 +118,56 @@
} }
</span> </span>
} }
<textarea @bind="Content" @oninput="OnTyping" class="form-control mb-3" rows="1" placeholder="Type a message">
</textarea>
<div class="d-flex flex-stack"> <div class="d-flex flex-stack">
<div class="d-flex align-items-center me-2"> <table class="w-100">
<button class="btn btn-sm btn-icon btn-active-light-primary me-1" type="button"> <tr>
<i class="bx bx-upload fs-3"></i> <!--<td class="align-top">
</button> <button class="btn btn-sm btn-icon btn-active-light-primary me-1" type="button">
</div> <i class="bx bx-upload fs-3"></i>
<WButton Text="@(SmartTranslateService.Translate("Send"))" </button>
WorkingText="@(SmartTranslateService.Translate("Sending"))" </td>-->
CssClasses="btn-primary" <td class="w-100">
OnClick="Send"> <textarea @bind="Content" @oninput="OnTyping" class="form-control mb-3 form-control-flush" rows="1" placeholder="Type a message">
</WButton> </textarea>
</td>
<td class="align-top">
<WButton Text="@(SmartTranslateService.Translate("Send"))"
WorkingText="@(SmartTranslateService.Translate("Sending"))"
CssClasses="btn-primary ms-2"
OnClick="Send">
</WButton>
</td>
</tr>
</table>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="flex-column flex-lg-row-auto w-100 mw-lg-300px mw-xxl-350px"> <div class="flex-column flex-lg-row-auto w-100 mw-lg-300px mw-xxl-350px">
<div class="card p-10 mb-15"> <div class="card p-10 mb-15 pb-8">
<h2 class="text-dark fw-bold mb-11"> <h2 class="text-dark fw-bold mb-2">
<TL>User information</TL> <TL>User information</TL>
</h2> </h2>
<div class="d-flex align-items-center mb-6"> <div class="d-flex align-items-center mb-1">
<spna class="fw-semibold text-gray-800 fs-5 m-0"> <span class="fw-semibold text-gray-800 fs-5 m-0">
<TL>Firstname</TL>: @(User.FirstName) <TL>Name</TL>: @(User.FirstName) @User.LastName
</spna> </span>
</div> </div>
<div class="d-flex align-items-center mb-6"> <div class="d-flex align-items-center mb-2">
<spna class="fw-semibold text-gray-800 fs-5 m-0"> <span class="fw-semibold text-gray-800 fs-5 m-0">
<TL>Lastname</TL>: @(User.LastName) <TL>Email</TL>: <a href="/admin/users/view/@User.Id">@(User.Email)</a>
</spna> </span>
</div> </div>
<div class="d-flex align-items-center mb-6"> <div class="align-items-center mt-3">
<spna class="fw-semibold text-gray-800 fs-5 m-0"> <span class="fw-semibold text-gray-800 fs-5 m-0">
<TL>Email</TL>: @(User.Email)
</spna>
</div>
<div class="d-flex align-items-center mb-6">
<spna class="fw-semibold text-gray-800 fs-5 m-0">
<WButton Text="@(SmartTranslateService.Translate("Close ticket"))" <WButton Text="@(SmartTranslateService.Translate("Close ticket"))"
WorkingText="@(SmartTranslateService.Translate("Closing"))" WorkingText="@(SmartTranslateService.Translate("Closing"))"
CssClasses="btn-danger" CssClasses="btn-danger float-end"
OnClick="CloseTicket"> OnClick="CloseTicket">
</WButton> </WButton>
</spna> </span>
</div> </div>
</div> </div>
</div> </div>

44
Moonlight/Shared/Views/Support.razor
View File

@@ -13,7 +13,7 @@
<div class="card"> <div class="card">
<div class="card-body"> <div class="card-body">
<LazyLoader Load="LoadMessages"> <LazyLoader Load="LoadMessages">
<div class="scroll-y me-n5 pe-5" style="max-height: 65vh; display: flex; flex-direction: column-reverse;"> <div class="scroll-y me-n5 pe-5" style="max-height: 55vh; display: flex; flex-direction: column-reverse;">
@foreach (var message in Messages) @foreach (var message in Messages)
{ {
if (message.IsSystem || message.IsSupport) if (message.IsSystem || message.IsSupport)
@@ -21,7 +21,7 @@
<div class="d-flex justify-content-start mb-10 "> <div class="d-flex justify-content-start mb-10 ">
<div class="d-flex flex-column align-items-start"> <div class="d-flex flex-column align-items-start">
<div class="d-flex align-items-center mb-2"> <div class="d-flex align-items-center mb-2">
<div class="symbol symbol-35px symbol-circle "> <div class="symbol symbol-35px symbol-circle ">
<img alt="Logo" src="@(ResourceService.Image("logo.svg"))"> <img alt="Logo" src="@(ResourceService.Image("logo.svg"))">
</div> </div>
<div class="ms-3"> <div class="ms-3">
@@ -104,10 +104,10 @@
@if (typingUsers.Any()) @if (typingUsers.Any())
{ {
<span class="mb-5 fs-5 d-flex flex-row"> <span class="mb-5 fs-5 d-flex flex-row">
<div class="wave me-3"> <div class="wave me-1">
<div class="dot"></div> <div class="dot h-5px w-5px" style="margin-right: 1px;"></div>
<div class="dot"></div> <div class="dot h-5px w-5px" style="margin-right: 1px;"></div>
<div class="dot"></div> <div class="dot h-5px w-5px"></div>
</div> </div>
@if (typingUsers.Length > 1) @if (typingUsers.Length > 1)
{ {
@@ -120,19 +120,27 @@
</span> </span>
} }
<textarea @bind="Content" @oninput="OnTyping" class="form-control mb-3" rows="1" placeholder="Type a message">
</textarea>
<div class="d-flex flex-stack"> <div class="d-flex flex-stack">
<div class="d-flex align-items-center me-2"> <table class="w-100">
<button class="btn btn-sm btn-icon btn-active-light-primary me-1" type="button"> <tr>
<i class="bx bx-upload fs-3"></i> <!--<td class="align-top">
</button> <button class="btn btn-sm btn-icon btn-active-light-primary me-1" type="button">
</div> <i class="bx bx-upload fs-3"></i>
<WButton Text="@(SmartTranslateService.Translate("Send"))" </button>
WorkingText="@(SmartTranslateService.Translate("Sending"))" </td>-->
CssClasses="btn-primary" <td class="w-100">
OnClick="Send"> <textarea @bind="Content" @oninput="OnTyping" class="form-control mb-3 form-control-flush" rows="1" placeholder="Type a message">
</WButton> </textarea>
</td>
<td class="align-top">
<WButton Text="@(SmartTranslateService.Translate("Send"))"
WorkingText="@(SmartTranslateService.Translate("Sending"))"
CssClasses="btn-primary ms-2"
OnClick="Send">
</WButton>
</td>
</tr>
</table>
</div> </div>
</div> </div>
</div> </div>

2
Moonlight/wwwroot/assets/css/utils.css
View File

@@ -39,6 +39,6 @@ div.wave .dot:nth-child(3) {
transform: initial; transform: initial;
} }
30% { 30% {
transform: translateY(-15px); transform: translateY(-8px);
} }
} }