Improve UI design for the chat example

arkannet · May 12, 2020 · f8c8ea9 · f8c8ea9
1 parent a1c72cf
commit f8c8ea9
Show file tree

Hide file tree

Showing 4 changed files with 51 additions and 10 deletions.
diff --git a/SignalRDemo/src/SignalRDemo.Web/ChatHub.cs b/SignalRDemo/src/SignalRDemo.Web/ChatHub.cs
@@ -23,7 +23,7 @@ public async Task SendMessage(string targetUserName, string message)
         {
             var targetUser = await _identityUserRepository.FindByNormalizedUserNameAsync(_lookupNormalizer.NormalizeName(targetUserName));
 
-            message = $"{CurrentUser.UserName} => {targetUserName}: {message}";
+            message = $"{CurrentUser.UserName}: {message}";
 
             await Clients
                 .User(targetUser.Id.ToString())

diff --git a/SignalRDemo/src/SignalRDemo.Web/Pages/Chat.cshtml b/SignalRDemo/src/SignalRDemo.Web/Pages/Chat.cshtml
@@ -1,19 +1,43 @@
 @page
 @using Volo.Abp.AspNetCore.Mvc.UI.Packages.SignalR
 @model SignalRDemo.Web.Pages.ChatModel
+@section styles {
+    <abp-style src="/Pages/Chat.css" />
+}
 @section scripts {
     <abp-script type="typeof(SignalRBrowserScriptContributor)" />
     <abp-script src="/Pages/Chat.js" />
 }
 <h1>Chat</h1>
 
 <div>
-    <ul id="MessageList">
-    </ul>
-</div>
+    <abp-row>
+        <abp-column size-md="_6">
+            <div>All Messages:</div>
+            <ul id="MessageList" style="">
+            </ul>
+        </abp-column>
+        <abp-column size-md="_6">
+            <form>
+                <abp-row>
+                    <abp-column>
+                        <label for="TargetUser">Target user:</label>
+                        <input type="text" id="TargetUser" />
+                    </abp-column>
+                </abp-row>
+                <abp-row class="mt-2">
+                    <abp-column>
+                        <label for="Message">Message:</label>
+                        <textarea id="Message" rows="4"></textarea>
+                    </abp-column>
+                </abp-row>
+                <abp-row class="mt-2">
+                    <abp-column>
+                        <abp-button type="submit" id="SendMessageButton" button-type="Primary" size="Block" text="SEND!" />
+                    </abp-column>
+                </abp-row>
+            </form>
+        </abp-column>
+    </abp-row>
 
-<div>
-    Target user: <input type="text" id="TargetUser" /><br/>
-    Message: <input type="text" id="Message" /><br />
-    <button id="SendMessageButton">Send</button>
 </div>
diff --git a/SignalRDemo/src/SignalRDemo.Web/Pages/Chat.css b/SignalRDemo/src/SignalRDemo.Web/Pages/Chat.css
@@ -0,0 +1,16 @@
+#MessageList {
+    border: 1px solid gray;
+    height: 400px;
+    overflow: auto;
+    list-style: none;
+    padding-left: 0;
+    padding: 10px;
+}
+
+#TargetUser {
+    width: 100%;
+}
+
+#Message {
+    width: 100%;
+}
diff --git a/SignalRDemo/src/SignalRDemo.Web/Pages/Chat.js b/SignalRDemo/src/SignalRDemo.Web/Pages/Chat.js
@@ -2,7 +2,7 @@
     var connection = new signalR.HubConnectionBuilder().withUrl("/signalr-hubs/chat").build();
 
     connection.on("ReceiveMessage", function (message) {
-        $('#MessageList').append('<li><strong>' + message + '</strong></li>');
+        $('#MessageList').append('<li><strong><i class="fas fa-long-arrow-alt-right"></i> ' + message + '</strong></li>');
     });
 
     connection.start().then(function () {
@@ -20,7 +20,8 @@
 
         connection.invoke("SendMessage", targetUserName, message)
             .then(function() {
-                $('#MessageList').append('<li>' + abp.currentUser.userName + ' => ' + targetUserName + ': ' + message + '</li>');
+                $('#MessageList')
+                    .append('<li><i class="fas fa-long-arrow-alt-left"></i> ' + abp.currentUser.userName + ': ' + message + '</li>');
             })
             .catch(function(err) {
                 return console.error(err.toString());