better styling for le chat

NielsPilgaard · Aug 17, 2024 · 0b4ab31 · 0b4ab31
1 parent 912e0a3
commit 0b4ab31
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 17 deletions.
diff --git a/src/web/Jordnaer/Features/Chat/ChatMessageList.razor b/src/web/Jordnaer/Features/Chat/ChatMessageList.razor
@@ -9,13 +9,17 @@
 
 @attribute [Authorize]
 
-@if (ActiveChat is null)
-{
-    <MudText>Der er ingen chat valgt</MudText>
-    return;
-}
+<MudItem Class="@MudItemClass" Style="@MudItemStyle" xs="12" sm="12" md="8" lg="8" xl="8" xxl="8">
+
+    @if (ActiveChat is null)
+    {
+	    <MudStack Row>
+		    <MudIcon Icon="@Icons.Material.Filled.ArrowCircleLeft" Color="Color.Info" />
+		    <MudText>Vælg én at skrive med</MudText>
+	    </MudStack>
+        return;
+    }
 
-<MudItem Class="chat-message-window" xs="12" sm="12" md="8" lg="8" xl="8" xxl="8">
     @if (IsMobile)
     {
         <MudAppBar Dense
@@ -98,6 +102,7 @@
                       Style="@($"background: {JordnaerTheme.CustomTheme.PaletteLight.BackgroundGray}")" />
     </MudList>
 </MudItem>
+
 @code
 {
     [Parameter, EditorRequired]
@@ -117,6 +122,14 @@
 
     private bool IsMessageFromSelf(ChatMessageDto message) => message.SenderId == CurrentUser.Id;
 
+    private string MudItemClass => ActiveChat is null
+        ? "chat-message-window d-flex align-center justify-center"
+        : "chat-message-window";
+
+    private string MudItemStyle => ActiveChat is null
+        ? "padding: 0"
+        : "";
+
     private string GetRecipientsProfilePictureUrl(ChatMessageDto message)
     => ActiveChat?
         .Recipients
@@ -149,7 +162,7 @@
 
     protected override async Task OnAfterRenderAsync(bool firstRender)
     {
-	    await ScrollToBottom();
+        await ScrollToBottom();
     }
 
     private void MarkMessageIfSuccessfullySentByCurrentUser()

diff --git a/src/web/Jordnaer/Features/Chat/UserAutoComplete.razor b/src/web/Jordnaer/Features/Chat/UserAutoComplete.razor
@@ -17,7 +17,7 @@
 
 <MudAutocomplete T="UserSlim"
                  @ref="_autocomplete"
-                 Label="Søg efter bruger"
+                 Label="Start samtale med..."
                  SearchFunc="@SearchForUsers"
                  ShowProgressIndicator
                  OpenIcon="@string.Empty"

diff --git a/src/web/Jordnaer/Pages/Chat/ChatPage.razor b/src/web/Jordnaer/Pages/Chat/ChatPage.razor
@@ -18,7 +18,7 @@
 <MudLoading @bind-Loading="_isLoading" Darken Overlap>
     <MudPaper Elevation="2">
 
-        <MudGrid Style="height: 80svh">
+        <MudGrid Style="height: 80svh" Spacing="1">
 
             @if ((_activeChat is null && _isMobile) || _isMobile is false)
             {
@@ -27,17 +27,15 @@
 
             @if (_isMobile is false)
             {
-                <MudItem md="1" lg="1" xl="1" xxl="1" Class="py-0">
-                    <MudDivider Vertical Style="width:3px" />
+                <MudItem md="1" lg="1" xl="1" xxl="1" Class="py-0 pl-3">
+                    <MudDivider Vertical Style="height: 95%; width: 1.5px" Class="mt-3" FlexItem/>
                 </MudItem>
             }
 
-            @if (_activeChat is not null)
-            {
-                <ChatMessageList @bind-ActiveChat="_activeChat"
-                                 IsMobile="_isMobile"
-                                 LastMessageWasSentSuccessfullyByCurrentUser="LastMessageWasSentSuccessfullyByCurrentUser" />
-            }
+            <ChatMessageList @bind-ActiveChat="_activeChat"
+                             IsMobile="_isMobile"
+                             LastMessageWasSentSuccessfullyByCurrentUser="LastMessageWasSentSuccessfullyByCurrentUser" />
+
         </MudGrid>
     </MudPaper>
 </MudLoading>