More chat ui

resources/chatbox.scss

@@ -11,15 +11,6 @@
     float: right;
     margin-right: 1em;
 }
-#emoji-button {
-    position: absolute;
-    right: 1em;
-    font-size: 2em;
-    color: lightgray;
-}
-#emoji-button:hover {
-    color: gray;
-}
 #chat-log {
     padding: 0;
     padding-top: 2em;
@@ -58,18 +49,12 @@
     overflow-y: scroll;
     border-bottom-left-radius: 0;
     border-bottom-right-radius: 0;
-    height: 75%;
+    flex-grow: 1;
 }
 
 #chat-input {
-    width: 100%;
-    padding: 0.4em 4em 1em 1.2em;
-    border: 0;
     color: black;
-    border-top-left-radius: 0;
+    border: 2px solid #e4a81c;
-    border-top-right-radius: 0;
-    height: 100%;
-    font-size: 16px;
 }
 #chat-online-content {
     padding: 0;
@@ -87,7 +72,7 @@
     #chat-container {
         display: flex;
         width: 100%;
-        height: calc(100vh - 3em);;
+        height: calc(100vh - 3em);
         border: 1px solid #ccc;
         /*border-radius: 0 4px 0 0;*/
         border-bottom: 0;
@@ -99,9 +84,6 @@
     #chat-area {
         flex-grow: 1;
     }
-    .chat-left-panel, .chat-right-panel {
-        display: block !important;
-    }
 }
 #chat-input, #chat-log .content-message {
     font-family: "Noto Sans", Arial, "Lucida Grande", sans-serif;
@@ -109,14 +91,7 @@
 .info-pic {
     height: 100%;
 }
-.info-circle {
+
-    position: absolute;
-    cx: 12%;
-    cy: 12%;
-    r: 12%;
-    stroke: white;
-    stroke-width: 1;
-}
 .info-name {
     margin-left: 10px;
     font-size: 2em;
@@ -173,6 +148,7 @@
     display: flex;
     padding: 15px;
     gap: 0.5em;
+    border-radius: 6px;
 }
 .status-row:hover {
     background: lightgray;
@@ -191,6 +167,8 @@
     border-radius: 15px;
     max-width: 70%;
     width: fit-content;
+    font-size: 1.05rem;
+    line-height: 1.3;
 }
 .message-text-other {
     background: #eeeeee;
@@ -200,7 +178,12 @@
     background: rgb(0, 132, 255);
     color: white;
 }
-
+.chat-input-icon {
+    color: #045343;
+}
+.chat-input-icon:hover {
+    background: lightgray;
+}
 .chat {
     .active-span {
         color: #636363;
@@ -239,9 +222,6 @@
 
 @media (max-width: 799px) {
     #chat-area {
-        height: calc(100vh - 50px);
+        height: calc(100vh - 120px);
-    }
-    #emoji-button {
-        display: none;
     }
 }

resources/darkmode.css

@@ -3008,19 +3008,13 @@ a.voted {
     background-image: initial;
     background-color: rgb(20, 22, 22);
 }
-#emoji-button {
-    color: rgb(169, 166, 160);
-}
-#emoji-button:hover {
-    color: rgb(126, 119, 107);
-}
 #chat-online {
     border-right-color: rgb(51, 56, 58);
     border-bottom-color: initial;
 }
 #chat-input {
-    border-color: initial;
     color: rgb(193, 191, 188);
+    border-color: rgb(132, 97, 16);
 }
 .selected-status-row {
     background-color: rgb(41, 44, 46);
@@ -3036,9 +3030,6 @@ a.voted {
         border-bottom-color: initial;
     }
 }
-.info-circle {
-    stroke: rgb(193, 191, 188);
-}
 #chat-info {
     box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 3px;
 }
@@ -3068,6 +3059,13 @@ a.voted {
     background-color: rgb(0, 88, 169);
     color: rgb(193, 191, 188);
 }
+.chat-input-icon {
+    color: rgb(170, 166, 161);
+}
+.chat-input-icon:hover {
+    background-image: initial;
+    background-color: rgb(41, 44, 46);
+}
 .chat .active-span {
     color: rgb(140, 134, 125);
 }
@@ -3728,19 +3726,6 @@ code .il {
 .sr-only {
     border-color: initial;
 }
-::-webkit-scrollbar-track {
-    background-color: transparent;
-}
-::-webkit-scrollbar-thumb {
-    background-color: rgb(33, 41, 45);
-    border-color: transparent;
-}
-::-webkit-scrollbar-thumb:hover {
-    background-color: rgb(50, 65, 68);
-}
-.body-message {
-    border-bottom-color: rgb(50, 54, 56);
-}
 .CtxtMenu_InfoContent {
     border-color: initial;
     background-color: rgb(28, 30, 32);
@@ -3838,6 +3823,15 @@ mjx-merror {
 mjx-assistive-mml {
     border-color: initial !important;
 }
+mjx-stretchy-v > mjx-ext {
+    border-color: transparent;
+}
+.recently-attempted ul {
+    list-style-image: initial;
+}
+.organization-row:last-child {
+    border-bottom-color: initial;
+}
 
 /* Override Style */
 .vimvixen-hint {

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%">
+        <div id="chat-input-container">
-          <a id="emoji-button" href="#" title="{{_('Emoji')}}"><i class="icofont-slightly-smile"></i></a>
           <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>