From b417c08bfe20dfe9e6b91ced00709d9e9e621367 Mon Sep 17 00:00:00 2001
From: Phuoc Anh Kha Le <76896393+anhkha2003@users.noreply.github.com>
Date: Mon, 25 Sep 2023 02:12:06 -0500
Subject: [PATCH] Update chat UI(#84)

---
 resources/base.scss                    | 13 ++++--
 resources/chatbox.scss                 | 53 +++++++++++-------------
 resources/contest.scss                 |  2 +-
 resources/vars.scss                    |  1 +
 templates/chat/chat.html               | 15 ++-----
 templates/chat/chat_css.html           | 46 +++++++++++++++------
 templates/chat/chat_js.html            | 56 +++++++++++++++-----------
 templates/chat/online_status.html      | 14 ++++---
 templates/chat/user_online_status.html | 13 ++++--
 9 files changed, 124 insertions(+), 89 deletions(-)

diff --git a/resources/base.scss b/resources/base.scss
index 70ad269..3ec3602 100644
--- a/resources/base.scss
+++ b/resources/base.scss
@@ -182,6 +182,9 @@ header {
         cursor: pointer;
         padding: 3.5px;
     }
+    img {
+        border-radius: 50%;
+    }
 }
 
 #nav-shadow {
@@ -539,7 +542,11 @@ math {
 
 @media (max-width: 799px) {
     #navigation {
-        height: 36px;
+        height: $navbar_height_mobile;
+    }
+
+    #content {
+        margin-top: $navbar_height_mobile;
     }
 
     #navicon {
@@ -637,11 +644,11 @@ math {
 }
 
 #chat-icon {
-    color: $theme_color;
+    color: darkgreen;
 }
 
 #chat-icon:hover {
-    color: green;
+    color: $theme_color;
 }
 
 #nav-lang-icon {
diff --git a/resources/chatbox.scss b/resources/chatbox.scss
index 89fef60..e4b3264 100644
--- a/resources/chatbox.scss
+++ b/resources/chatbox.scss
@@ -52,11 +52,15 @@
     border-bottom-left-radius: 0;
     border-bottom-right-radius: 0;
     flex-grow: 1;
+    padding-left: 0.5em;
 }
 
 #chat-input {
     color: black;
-    border: 2px solid #e4a81c;
+    border: 2px solid black;
+}
+#chat-input::placeholder {
+    color: grey;
 }
 #chat-online-content {
     padding: 0;
@@ -81,7 +85,7 @@
     }
     #chat-online {
         margin: 0;
-        width: 35%;
+        width: 30%;
     }
     #chat-area {
         flex-grow: 1;
@@ -91,12 +95,12 @@
     font-family: "Noto Sans", Arial, "Lucida Grande", sans-serif;
 }
 .info-pic {
-    height: 100%;
+    height: 95%;
 }
 
 .info-name {
     margin-left: 10px;
-    font-size: 2em;
+    font-size: 1.8em;
     font-weight: bold !important;
     display: flex;
     align-items: center;
@@ -111,21 +115,6 @@
     position: relative;
     z-index: 100;
 }
-#refresh-button {
-    padding: 0;
-    margin-left: auto;
-    margin-right: 0.3em;
-    background: transparent;
-    border: none;
-    height: 1.5em;
-    width: 1.5em;
-}
-#refresh-button:hover {
-    background: lightgreen;
-    -webkit-transform: rotate(360deg);
-    transform: rotate(360deg);
-    transition: 1.5s ease-in-out;
-}
 .status-pic {
     height: 32px;
     width: 32px;
@@ -135,6 +124,7 @@
     position: relative;
     display: inline-flex;
     flex: 0 0 auto;
+    align-items: center;
 }
 .status-circle {
     position: absolute;
@@ -166,11 +156,11 @@
 }
 .message-text {
     padding: 0.4em 0.6em 0.5em;
-    border-radius: 15px;
+    border-radius: 20px;
     max-width: 70%;
     width: fit-content;
-    font-size: 1.05rem;
-    line-height: 1.3;
+    font-size: 1rem;
+    line-height: 1.2;
 }
 .message-text-other {
     background: #eeeeee;
@@ -181,10 +171,11 @@
     color: white;
 }
 .chat-input-icon {
-    color: $theme_color;
+    color: white;
+    background-color: #3c8262;
 }
 .chat-input-icon:hover {
-    background: lightgray;
+    background: #57b28b;
 }
 .chat {
     .active-span {
@@ -193,12 +184,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;
@@ -224,6 +219,6 @@
 
 @media (max-width: 799px) {
     #chat-area {
-        height: calc(100vh - 120px);
+        height: calc(100vh - $navbar_height_mobile);
     }
 }
diff --git a/resources/contest.scss b/resources/contest.scss
index 2bc2ab1..cfdd478 100644
--- a/resources/contest.scss
+++ b/resources/contest.scss
@@ -1,7 +1,7 @@
 @import "vars";
 
 .list-contest {
-    box-shadow: 0px 4px 8px rgba(4, 83, 67, 0.2), 0px 6px 20px rgba(4, 83, 67, 0.19);
+    box-shadow: 0px 1px 2px lightgrey, 0px 1px 5px lightgrey;
     border-radius: 15px;
     padding: 20px;
     margin-bottom: 20px;
diff --git a/resources/vars.scss b/resources/vars.scss
index ba1c0bf..70c30a6 100644
--- a/resources/vars.scss
+++ b/resources/vars.scss
@@ -12,3 +12,4 @@ $table_header_rounding: 6px;
 
 $monospace-fonts: Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier, monospace;
 $navbar_height: 50px;
+$navbar_height_mobile: 36px;
diff --git a/templates/chat/chat.html b/templates/chat/chat.html
index 1991402..df6b0ca 100644
--- a/templates/chat/chat.html
+++ b/templates/chat/chat.html
@@ -59,17 +59,8 @@
 
 {% block body %}
   <div class="chat">
-    <div id="mobile" class="tabs">
-      <ul>
-        <li id="chat-tab" class="tab active"><a href="#">
-          <i class="tab-icon fa fa-comments"></i> {{ _('Chat') }}
-        </a></li>
-        <li id="online-tab" class="tab"><a href="#"><i class="tab-icon fa fa-wifi"></i> {{ _('Online Users') }}</a></li>
-      </ul>
-    </div>
-
     <div id="chat-container">
-      <div id="chat-online" class="chat-right-panel sidebox">
+      <div id="chat-online" class="chat-left-panel sidebox">
         <div id="chat-online-content">
           <div id="search-container">
             <form id="chat-search-form" name="form" action="{{ url('get_or_create_room') }}" method="post">
@@ -83,7 +74,7 @@
           </div>
         </div>
       </div>
-      <div id="chat-area" class="chat-left-panel">
+      <div id="chat-area" class="chat-right-panel">
         <div id="chat-info">
           {% include 'chat/user_online_status.html' %}
         </div>
@@ -98,7 +89,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">
diff --git a/templates/chat/chat_css.html b/templates/chat/chat_css.html
index 7c4777f..01929cd 100644
--- a/templates/chat/chat_css.html
+++ b/templates/chat/chat_css.html
@@ -6,6 +6,7 @@
 
     #content {
       padding-top: 0;
+      margin-bottom: 0;
     }
 
     ::-webkit-scrollbar {
@@ -57,7 +58,7 @@
     .profile-pic {
       height: 2.6em;
       width: 2.6em;
-      border-radius: 0.3em;
+      border-radius: 50%;
       margin-top: 0.1em;
       float: left;
     }
@@ -106,6 +107,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;
@@ -122,15 +133,20 @@
       align-items: center;
       gap: 1em;
     }
+    ::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
+      text-align: left;
+    }
     #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%;
       resize: none;
-      height: 100%;
+      height: 80%;
+      max-height: 200px;
+      overflow-y: auto;
     }
     #chat-input:focus {
       box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
@@ -162,11 +178,13 @@
       stroke-width: 1;
     }
     .info-pic {
-      border-radius: 5px;
-      margin-left: 1em;
+      border-radius: 50%;
     }
     #chat-info {
       height: 3em;
+      padding-left: 0.75em;
+      display: flex;
+      align-items: center;
     }
 
     @media (min-width: 800px) {
@@ -175,26 +193,30 @@
         overflow:hidden;
       }
       #chat-input-container {
-        padding-left: 5%;
+        padding-left: 3%;
       }
       #chat-area {
         padding-bottom: 1.5em;
       }
+      .back-button {
+        display: none;
+      }
     }
     @media (max-width: 799px) {
       html, body {
         max-width: 100%;
         overflow-x: hidden;
       }
-      #mobile ul {
-        width: 100%;
-      }
-      .info-pic {
-        margin-left: 0.5em;
-      }
       .active-span {
         display: none;
       }
+      #chat-area {
+        display: none;
+      }
+      .back-button {
+        margin-right: 1em;
+        font-size: 1.5em;
+      }
     }
   </style>
 {% endcompress %}
\ No newline at end of file
diff --git a/templates/chat/chat_js.html b/templates/chat/chat_js.html
index be2abc7..5c467f8 100644
--- a/templates/chat/chat_js.html
+++ b/templates/chat/chat_js.html
@@ -279,6 +279,21 @@
     $("#click_space_" + window.other_user_id).addClass("selected-status-row");
   }
 
+  function show_right_panel() {
+    if (isMobile) {
+      $('.chat-left-panel').hide();
+      $('#chat-area').css('display', 'flex');
+      $('#chat-box').scrollTop($('#chat-box')[0].scrollHeight);
+    }
+  }
+
+  function hide_right_panel() {
+    if (isMobile) {
+      $('.chat-left-panel').show();
+      $('#chat-area').hide();
+    }
+  }
+
   function load_room(encrypted_user) {
     if (window.lock_click_space) return;
 
@@ -288,6 +303,7 @@
       update_last_seen();
       refresh_status();
       $('#chat-input').focus();
+      show_right_panel();
     }
     window.lock_click_space = true;
     if (encrypted_user) {
@@ -314,6 +330,7 @@
   function register_click_space() {
     $('.click_space').on('click', function(e) {
       if ($(this).attr('id') == 'click_space_' + window.other_user_id) {
+        show_right_panel();
         return;
       }
       var other_user = $(this).attr('value');
@@ -323,10 +340,10 @@
       if (window.room_id) {
         load_room(null);
       }
+      else {
+        show_right_panel();
+      }
     });
-    if (isMobile) {
-      $('#chat-tab a').click();
-    }
   }
 
   function update_last_seen() {
@@ -439,26 +456,6 @@
       return true
     });
 
-    $('#chat-tab').find('a').click(function (e) {
-      e.preventDefault();
-      $('#chat-tab').addClass('active');
-      $('#online-tab').removeClass('active');
-      $('.chat-left-panel').show();
-      $('.chat-right-panel').hide();
-    });
-    $('#online-tab').find('a').click(function (e) {
-      e.preventDefault();
-      $('#online-tab').addClass('active');
-      $('#chat-tab').removeClass('active');
-      $('.chat-left-panel').hide();
-      $('.chat-right-panel').show();
-    });
-
-    $('#refresh-button').on('click', function(e) {
-      e.preventDefault();
-      refresh_status();
-    });
-
     setInterval(refresh_status, 2 * 60 * 1000);
 
     $('#chat-box').scrollTop($('#chat-box')[0].scrollHeight);
@@ -466,7 +463,7 @@
     const button = document.querySelector('#emoji-button');
     const tooltip = document.querySelector('.tooltip');
     Popper.createPopper(button, tooltip, {
-      placement: 'left-end',
+      placement: isMobile ? 'auto-end' : 'left-end',
     });
 
     function toggleEmoji() {
@@ -558,5 +555,16 @@
     }
     register_setting();
     color_selected_room();
+
+    $('#chat-input').on('input', function() {
+      if (this.scrollHeight > this.clientHeight) {
+        this.style.height = (this.scrollHeight) + 'px';
+        $(this).css('border-radius', '30px');
+      } else {
+        $(this).css('height', '80%');
+      }
+    });
+
+    $('#submit-button').on('click', submit_chat);
   });
 </script>
\ No newline at end of file
diff --git a/templates/chat/online_status.html b/templates/chat/online_status.html
index d82159d..73dea74 100644
--- a/templates/chat/online_status.html
+++ b/templates/chat/online_status.html
@@ -5,8 +5,10 @@
   <span style="padding-left:0.5em">
     <b>{{_('Lobby')}}</b>
   </span>
-  <span class="spacer">
-    <span class="unread-count" id="unread-count-lobby">{{unread_count_lobby if unread_count_lobby}}</span>
+  <span class="spacer" style="display:flex;justify-content: flex-end;">
+    {% 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}}">
-            {{user.unread_count if user.unread_count}}
-          </span>
+          {% if user.unread_count and user.unread_count > 0 %}
+            <span class="unread-count" id="unread-count-{{user.user.id}}">
+              {{user.unread_count}}
+            </span>
+          {% endif %}
         </li>
       {% endfor %}
     </ul>
diff --git a/templates/chat/user_online_status.html b/templates/chat/user_online_status.html
index 51ffa38..370d261 100644
--- a/templates/chat/user_online_status.html
+++ b/templates/chat/user_online_status.html
@@ -1,11 +1,18 @@
+<div onclick="hide_right_panel()" class="back-button">
+  <i class="fa fa-arrow-left"></i>
+</div>
 {% 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 +28,9 @@
 
 {% if other_user %}
   <span style="margin-right: 0.3em" id="setting">
-    <button class="control-button small" style="height:100%;" 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'}}">