More chat ui

templates/chat/chat.html

@@ -84,18 +84,22 @@
         </div>
       </div>
       <div id="chat-area" class="chat-left-panel">
-        <div id="chat-info" style="height: 10%">
+        <div id="chat-info">
           {% include 'chat/user_online_status.html' %}
         </div>
         <div id="chat-box">
           <img src="{{static('loading.gif')}}" id="loader">
-          <ul id="chat-log" style="display: none">
+          <ul id="chat-log">
             {% include 'chat/message_list.html' %}
           </ul>
         </div>
-        <div style="height: 15%">
-          <a id="emoji-button" href="#" title="{{_('Emoji')}}"><i class="icofont-slightly-smile"></i></a>
+        <div id="chat-input-container">
           <textarea maxlength="5000" id="chat-input" placeholder="{{_('Enter your message')}}"></textarea>
+          <div class="chat-input-icon" id="emoji-button" href="#" title="{{_('Emoji')}}"><i class="icofont-slightly-smile"></i>
+          </div>
+          <div class="chat-input-icon" id="submit-button">
+            <i class="fa fa-play"></i>
+          </div>
         </div>
         <div class="tooltip" role="tooltip">
           <emoji-picker></emoji-picker>

templates/chat/chat_css.html

@@ -64,7 +64,6 @@
     .body-message {
       padding-left: 3em;
       padding-bottom: 0.5em;
-      border-bottom: 1px dotted lightgray;
     }
     .user-time {
       margin-bottom: 0.3em;
@@ -118,12 +117,69 @@
       white-space: nowrap;
       text-overflow: ellipsis;
     }
+    #chat-input-container {
+      display: flex;
+      align-items: center;
+      gap: 1em;
+    }
+    #chat-input {
+      padding: 10px 20px;
+      font-size: 16px;
+      border-radius: 20px;
+      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+      transition: box-shadow 0.3s ease-in-out;
+      width: 80%;
+      resize: none;
+      height: 100%;
+    }
+    #chat-input:focus {
+      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
+      outline: none;
+    }
+    .chat-input-icon {
+      font-size: 16px;
+      border-radius: 50%;
+      width: 2em;
+      height: 2em;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      border: 2px solid;
+    }
+    .chat-input-icon:hover {
+      cursor: pointer;
+    }
+    #chat-area {
+      display: flex;
+      flex-direction: column;
+    }
+    .info-circle {
+      position: absolute;
+      cx: 5px;
+      cy: 5px;
+      r: 5px;
+      stroke: white;
+      stroke-width: 1;
+    }
+    .info-pic {
+      border-radius: 50%;
+      margin-left: 1em;
+    }
+    #chat-info {
+      height: 10%;
+    }
 
     @media (min-width: 800px) {
       #page-container {
         position:fixed;
         overflow:hidden;
       }
+      #chat-input-container {
+        padding-left: 10%;
+      }
+      #chat-area {
+        padding-bottom: 1.5em;
+      }
     }
     @media (max-width: 799px) {
       html, body {
@@ -139,6 +195,9 @@
       .active-span {
         display: none;
       }
+      #chat-info {
+        height: 5%;
+      }
     }
   </style>
 {% endcompress %}

templates/chat/chat_js.html

@@ -223,6 +223,7 @@
   function submit_chat() {
     {% if last_msg and not request.profile.mute %}
       if ($("#chat-input").val().trim()) {
+        $('#chat-input-container').height('auto');
         var body = $('#chat-input').val().trim();
         // body = body.split('\n').join('\n\n');
 
@@ -438,7 +439,6 @@
       return true
     });
 
-    $('.chat-right-panel').hide();
     $('#chat-tab').find('a').click(function (e) {
       e.preventDefault();
       $('#chat-tab').addClass('active');
@@ -558,5 +558,11 @@
     }
     register_setting();
     color_selected_room();
+
+    $('#chat-input').on('input', function () {
+      $('#chat-input-container').height('auto');
+      $('#chat-input-container').height((this.scrollHeight) + 'px');
+    });
+    $('#submit-button').on('click', submit_chat);
   });
 </script>

templates/chat/user_online_status.html

@@ -1,7 +1,7 @@
 {% if other_user %}
   <div class="status-container" style="height: 100%">
     <img src="{{ gravatar(other_user, 135) }}" class="info-pic">
-    <svg style="position:absolute; height:100%; width: 100%">
+    <svg style="position:absolute; height:100%; width: 100%; transform: rotate(180deg);" >
       <circle class="info-circle"
         fill="{{'green' if other_online else 'red'}}"/>
     </svg>