Update Chat

resources/chatbox.scss

@@ -59,6 +59,9 @@
     color: black;
     border: 2px solid black;
 }
+#chat-input::placeholder {
+    color: grey;
+}
 #chat-online-content {
     padding: 0;
     width: 100%;
@@ -136,6 +139,7 @@
     position: relative;
     display: inline-flex;
     flex: 0 0 auto;
+    align-items: center;
 }
 .status-circle {
     position: absolute;
@@ -194,13 +198,16 @@
     }
 
     .unread-count {
-        float: right;
         color: white;
         background-color: darkcyan;
-        border-radius: 2px;
-        padding: 0 0.5em;
-        align-self: flex-end;
         border-radius: 50%;
+        align-self: center;
+        flex: 0 0 1.25rem;
+        height: 1.25rem;
+        font-size: smaller;
+        display: flex;
+        align-items: center;
+        justify-content: center;
     }
     #setting-content {
         display: none;

templates/chat/chat.html

@@ -98,7 +98,7 @@
           <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>
+            <i class="fa fa-arrow-right"></i>
           </div>
         </div>
         <div class="tooltip" role="tooltip">

templates/chat/chat_css.html

@@ -106,6 +106,16 @@
     #setting {
       position: relative;
     }
+    #setting-button {
+      height: 2.3em;
+      width: 2.5em;
+      border-radius: 50%;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      cursor: pointer;
+      padding-top: 2px;
+    }
     .status-user {
       display: flex;
       flex-direction: column;
@@ -128,7 +138,7 @@
     #chat-input {
       padding: 10px 20px;
       font-size: 16px;
-      border-radius: 20px;
+      border-radius: 100px;
       box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
       transition: box-shadow 0.3s ease-in-out;
       width: 80%;
@@ -168,12 +178,12 @@
     }
     .info-pic {
       border-radius: 50%;
-      margin-left: 1em;
-      margin-top: 3px;
     }
     #chat-info {
       height: 3em;
-      padding-bottom: 0.25em;
+      padding-left: 0.75em;
+      display: flex;
+      align-items: center;
     }
 
     @media (min-width: 800px) {

templates/chat/chat_js.html

@@ -559,16 +559,14 @@
     register_setting();
     color_selected_room();
 
-    // Adjust textarea height to fit the content
+    $('#chat-input').on('input', function() {
-    $(document).ready(function() {
+      if (this.scrollHeight > this.clientHeight) {
-      $('#chat-input').on('input', function() {
+        this.style.height = (this.scrollHeight) + 'px';
-        if (this.scrollHeight > this.clientHeight) {
+        $(this).css('border-radius', '30px');
-          this.style.height = 'auto';
+      } else {
-          this.style.height = (this.scrollHeight) + 'px';
+        $(this).css('height', '80%');
-        } else {
+      }
-          $(this).css('height', '80%');
-        }
-      });
     });
+    $('#submit-button').on('click', submit_chat);
   });
 </script>

templates/chat/online_status.html

@@ -5,8 +5,10 @@
   <span style="padding-left:0.5em">
     <b>{{_('Lobby')}}</b>
   </span>
-  <span class="spacer">
+  <span class="spacer" style="display:flex;justify-content: flex-end;">
-    <span class="unread-count" id="unread-count-lobby">{{unread_count_lobby if unread_count_lobby}}</span>
+    {% if unread_count_lobby and unread_count_lobby > 0 %}
+      <span class="unread-count" id="unread-count-lobby">{{unread_count_lobby}}</span>
+    {% endif %}
   </span>
 </li>
 {% for section in status_sections %}
@@ -37,9 +39,11 @@
               </span>
             {% endif %}
           </div>
-          <span class="unread-count" id="unread-count-{{user.user.id}}">
+          {% if user.unread_count and user.unread_count > 0 %}
-            {{user.unread_count if user.unread_count}}
+            <span class="unread-count" id="unread-count-{{user.user.id}}">
-          </span>
+              {{user.unread_count}}
+            </span>
+          {% endif %}
         </li>
       {% endfor %}
     </ul>

templates/chat/user_online_status.html

@@ -1,11 +1,15 @@
 {% if other_user %}
-  <div class="status-container" style="height: 100%">
+  <div class="status-container" style="height: 3em; width: 3em;">
     <img src="{{ gravatar(other_user, 135) }}" class="info-pic">
     <svg style="position:absolute; height:100%; width: 100%; transform: rotate(180deg);" >
       <circle class="info-circle"
         fill="{{'green' if other_online else 'red'}}"/>
     </svg>
   </div>
+{% else %}
+  <div class="status-container" style="height: 3em;">
+    <img src="{{ static('icons/logo.png') }}" class="info-pic" style="border-radius: 0px;">
+  </div>
 {% endif %}
 <span class="info-name username">
   {% if other_user %}
@@ -21,9 +25,9 @@
 
 {% if other_user %}
   <span style="margin-right: 0.3em" id="setting">
-    <button class="control-button small" style="height:100%; border-radius: 99px;" id="setting-button">
+    <div class="control-button small" style="" id="setting-button">
       <i class="fa fa-ellipsis-h"></i>
-    </button>
+    </div>
     <div id="setting-content">
       <li>
         <a href="{{url('toggle_ignore', other_user.id)}}" class=" {{'green' if is_ignored else 'red'}}">