@page "/application/chat"
|
|
<div class="d-flex flex-grow-1 flex-row">
|
<MudHidden Breakpoint="Breakpoint.SmAndDown">
|
<MudPaper Class="pa-3 mr-6" MinWidth="250px">
|
<MudButton EndIcon="@Icons.Material.Filled.Add" Color="MudBlazor.Color.Secondary" FullWidth="true">Create Channel</MudButton>
|
<ChatChannels />
|
</MudPaper>
|
</MudHidden>
|
<MudPaper Class="py-4 flex-grow-1">
|
<MudToolBar Dense="true">
|
<MudHidden Breakpoint="Breakpoint.MdAndUp">
|
<MudIconButton OnClick="@(() => OpenDrawer(Anchor.Left))" Icon="@Icons.Material.Outlined.Menu" Color="MudBlazor.Color.Inherit" Class="mr-2 ml-n2" />
|
</MudHidden>
|
<MudText Typo="Typo.h6" Inline="true" Class="mr-2">#</MudText>
|
<MudText Typo="Typo.h6">chat</MudText>
|
<MudSpacer />
|
<MudIconButton Icon="@Icons.Material.Outlined.Notifications" />
|
<MudIconButton Icon="@Icons.Material.Outlined.PushPin" />
|
<MudHidden Breakpoint="Breakpoint.MdAndUp">
|
<MudIconButton OnClick="@(() => OpenDrawer(Anchor.Right))" Icon="@Icons.Material.Outlined.PeopleAlt" Color="MudBlazor.Color.Inherit" Class="ml-3" />
|
</MudHidden>
|
</MudToolBar>
|
<div class="d-flex flex-column px-4" style="max-height:800px; overflow:scroll;">
|
@foreach (var message in chatMessages)
|
{
|
<UserMessage UserName="@message.UserName" Message="@message.Message" ChatUser="@GetUser(message.UserName)" />
|
}
|
</div>
|
<MudPaper Class="d-flex flex-row px-2 mx-4" Style="background-color: var(--mud-palette-background-grey);">
|
<MudIconButton Icon="@Icons.Material.Filled.AddCircle"></MudIconButton>
|
<MudTextField T="string" Placeholder="Message #chat" DisableUnderLine="true" Class="mt-n2 mx-4"></MudTextField>
|
<MudIconButton Icon="@IconGift"></MudIconButton>
|
<MudIconButton Icon="@IconGif"></MudIconButton>
|
<MudIconButton Icon="@Icons.Material.Outlined.Sick" Color="MudBlazor.Color.Warning"></MudIconButton>
|
</MudPaper>
|
</MudPaper>
|
<MudHidden Breakpoint="Breakpoint.SmAndDown">
|
<MudPaper Class="pa-3 pb-16 ml-6" MinWidth="250px">
|
<ChatUsers chatUsers="chatUsers" />
|
</MudPaper>
|
</MudHidden>
|
</div>
|
|
<MudDrawer @bind-Open="@open" Anchor="@ChatDrawer" Elevation="1" Variant="@DrawerVariant.Temporary">
|
@if (ChatDrawer == Anchor.Left)
|
{
|
<MudButton EndIcon="@Icons.Material.Filled.Add" Color="MudBlazor.Color.Secondary" Class="mx-4 mt-6 mb-4">Create Channel</MudButton>
|
<ChatChannels />
|
}
|
else if (ChatDrawer == Anchor.Right)
|
{
|
<div class="pa-3">
|
<ChatUsers chatUsers="chatUsers" />
|
</div>
|
}
|
</MudDrawer>
|
|
@code
|
{
|
bool open;
|
Anchor ChatDrawer { get; set; }
|
|
ChatUser[] chatUsers = new ChatUser[]
|
{
|
new ChatUser { UserName = "Garderoben", UserRoleColor = Colors.DeepPurple.Accent4, OnlineStatus = Color.Success, Spotify = true, AvatarUrl = "https://avatars2.githubusercontent.com/u/10367109?s=460&u=2abf95f9e01132e8e2915def42895ffe99c5d2c6&v=4"},
|
new ChatUser { UserName = "Henon", UserRoleColor = Colors.DeepPurple.Accent4, OnlineStatus = Color.Success, Spotify = false, AvatarUrl = "https://avatars.githubusercontent.com/u/44090?s=460&v=4"},
|
new ChatUser { UserName = "Flaflo", UserRoleColor = Colors.Red.Accent3, OnlineStatus = Color.Success, Spotify = true, AvatarUrl = "https://avatars.githubusercontent.com/u/12973684?s=460&u=ea557f04c5d9c54f902f8c700292baefe59217d0&v=4"},
|
new ChatUser { UserName = "porkopek", UserRoleColor = Colors.Red.Accent3, OnlineStatus = Color.Warning, Spotify = false, AvatarUrl = "https://avatars.githubusercontent.com/u/13745954?s=460&u=81ef9118f63113ad64bde35add178cbd9ca3bb38&v=4"},
|
new ChatUser { UserName = "mike-gh", UserRoleColor = Colors.Red.Accent3, OnlineStatus = Color.Warning, Spotify = false, AvatarColor = Color.Success},
|
new ChatUser { UserName = "tungi52", UserRoleColor = Colors.Red.Accent3, OnlineStatus = Color.Warning, Spotify = false, AvatarColor = Color.Success},
|
new ChatUser { UserName = "svenovic", UserRoleColor = Colors.Red.Accent3, OnlineStatus = Color.Dark, Spotify = false, AvatarColor = Color.Success},
|
new ChatUser { UserName = "Artroxa", UserRoleColor = Colors.BlueGrey.Lighten1, OnlineStatus = Color.Success, Spotify = false, AvatarUrl = "https://avatars2.githubusercontent.com/u/71094850?s=460&u=66c16f5bb7d27dc751f6759a82a3a070c8c7fe4b&v=4"},
|
new ChatUser { UserName = "II ARROWS", UserRoleColor = Colors.BlueGrey.Lighten1, OnlineStatus = Color.Success, Spotify = false, AvatarUrl = "https://avatars.githubusercontent.com/u/14835013?s=460&u=8d9acfca411be6941ceb44f710c4357857350c2a&v=4"},
|
new ChatUser { UserName = "rangsk", UserRoleColor = Colors.BlueGrey.Lighten1, OnlineStatus = Color.Success, Spotify = false, AvatarUrl = "https://avatars.githubusercontent.com/u/10701249?s=460&u=f806998af6e29fd4402736ba2efc2649adae9e39&v=4"},
|
new ChatUser { UserName = "Svarta Änkan", UserRoleColor = Colors.BlueGrey.Lighten1, OnlineStatus = Color.Error, Spotify = true, AvatarColor = Color.Error},
|
new ChatUser { UserName = "TommyG", UserRoleColor = Colors.BlueGrey.Lighten1, OnlineStatus = Color.Warning, Spotify = false, AvatarUrl = "https://avatars.githubusercontent.com/u/4773183?s=460&u=7d0ebb28e29ae5103a74070471ffd506cdbf03fd&v=4"},
|
};
|
|
ChatMessage[] chatMessages = new ChatMessage[]
|
{
|
new ChatMessage { UserName = "Garderoben", Message = "What is CSS?"},
|
new ChatMessage { UserName = "Henon", Message = "idk?"},
|
new ChatMessage { UserName = "Garderoben", Message = "me neither, anyone else?"},
|
new ChatMessage { UserName = "Artroxa", Message = "lololololol"},
|
new ChatMessage { UserName = "svenovic", Message = "Cascading Style Sheets"},
|
new ChatMessage { UserName = "rangsk", Message = "CSS is a style sheet language used for describing the presentation of a document written in a markup language such as HTML."},
|
new ChatMessage { UserName = "II ARROWS", Message = "We're on a mission from Glod."},
|
new ChatMessage { UserName = "TommyG", Message = "Wth dude, i love Terry Pratchett"},
|
new ChatMessage { UserName = "tungi52", Message = "Did you guys read his discworld book series?"},
|
new ChatMessage { UserName = "TommyG", Message = "Yeah! It's great!"},
|
new ChatMessage { UserName = "Garderoben", Message = "no more talk about books, this is very serious coder chat!"},
|
new ChatMessage { UserName = "Artroxa", Message = "Yes, blazor is cool coding for cool kids" },
|
new ChatMessage { UserName = "Flaflo", Message = "@Garderoben hey have you even started working on issue #294 on git?"},
|
new ChatMessage { UserName = "Henon", Message = "Don't worry Flaflo, i took care of it."},
|
};
|
|
public ChatUser GetUser(string username)
|
{
|
var chatUser = chatUsers.FirstOrDefault(x => x.UserName == username);
|
return chatUser;
|
}
|
|
void OpenDrawer(Anchor anchor)
|
{
|
ChatDrawer = anchor;
|
open = true;
|
}
|
|
public string IconGift { get; set; } = "<path d=\"M22,12V20A2,2 0 0,1 20,22H4A2,2 0 0,1 2,20V12A1,1 0 0,1 1,11V8A2,2 0 0,1 3,6H6.17C6.06,5.69 6,5.35 6,5A3,3 0 0,1 9,2C10,2 10.88,2.5 11.43,3.24V3.23L12,4L12.57,3.23V3.24C13.12,2.5 14,2 15,2A3,3 0 0,1 18,5C18,5.35 17.94,5.69 17.83,6H21A2,2 0 0,1 23,8V11A1,1 0 0,1 22,12M4,20H11V12H4V20M20,20V12H13V20H20M9,4A1,1 0 0,0 8,5A1,1 0 0,0 9,6A1,1 0 0,0 10,5A1,1 0 0,0 9,4M15,4A1,1 0 0,0 14,5A1,1 0 0,0 15,6A1,1 0 0,0 16,5A1,1 0 0,0 15,4M3,8V10H11V8H3M13,8V10H21V8H13Z\" />";
|
public string IconGif { get; set; } = "<path d=\"M11,8H13V16H11V8M7.67,8H4.33C3.53,8 3,8.67 3,9.33V14.67C3,15.33 3.53,16 4.33,16H7.67C8.47,16 9,15.33 9,14.67V12H7V14H5V10H9V9.33C9,8.67 8.47,8 7.67,8M21,10V8H15V16H17V14H19.5V12H17V10H21Z\" />";
|
}
|
