Create user setting button in chat (#101)

resources/chatbox.scss

@@ -139,6 +139,7 @@
 .status-row {
     display: flex;
     padding: 15px;
+    padding-right: 0;
     gap: 0.5em;
     border-radius: 6px;
 }
@@ -195,7 +196,7 @@
         align-items: center;
         justify-content: center;
     }
-    #setting-content {
+    .setting-content {
         display: none;
         position: absolute;
         background-color: #f1f1f1;
@@ -204,14 +205,14 @@
         z-index: 1;
         right: 0;
     }
-    #setting-content li {
+    .setting-content a {
         padding: 12px 16px;
         text-decoration: none;
         display: block;
-        color: black;
         font-weight: bold;
+        font-size: 1rem;
     }
-    #setting-content li:hover {
+    .setting-content a:hover {
         background-color: #ddd;
         cursor: pointer;
     }

resources/widgets.scss

@@ -602,7 +602,6 @@ ul.select2-selection__rendered {
 }
 
 .control-button {
-    background: lightgray;
     color: black !important;
     border: 0;
 }

templates/chat/chat_css.html

@@ -115,7 +115,17 @@
     #setting {
       position: relative;
     }
-    #setting-button {
+    .setting-button {
+      height: 2.3em;
+      width: 2.5em;
+      border-radius: 50%;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      cursor: pointer;
+      padding-top: 2px;
+    }
+    .user-setting-button {
       height: 2.3em;
       width: 2.5em;
       border-radius: 50%;

templates/chat/chat_js.html

@@ -2,6 +2,10 @@
   let isMobile = window.matchMedia("only screen and (max-width: 799px)").matches;
 
   function load_next_page(last_id, refresh_html=false) {
+    if (refresh_html) {
+      $('#chat-log').html('');
+      $('#loader').show();
+    }
     var param = {
       'last_id': last_id,
       'only_messages': true,
@@ -12,7 +16,6 @@
     })
       .done(function(data) {
       if (refresh_html) {
-        $('#chat-log').html('');
         $('#chat-box').scrollTop($('#chat-box')[0].scrollHeight);
         window.lock = true;
       }
@@ -78,6 +81,7 @@
           register_toggle($(this));
         });
         register_click_space();
+        register_setting(false);
         color_selected_room();
       }
     })
@@ -93,7 +97,7 @@
       .done(function(data) {
       $('#chat-info').html(data);
       register_time($('.time-with-rel'));
-      register_setting();
+      register_setting(true);
     })
   }
 
@@ -363,18 +367,22 @@
     }
   }
 
-  function register_setting() {
-    $('#setting-button').on('click', function() {
-      $('#setting-content').toggle();
+  function register_setting(is_on_user_status_bar) {
+    let $setting_button = is_on_user_status_bar ? $('.user-setting-button') : $('.setting-button');
+    $setting_button.on('click', function(e) {
+      e.stopPropagation();
+      $('.setting-content').not($(this).siblings('.setting-content')).hide();
+      $(this).siblings('.setting-content').toggle();
     });
-    $('#setting-content li').on('click', function() {
-      $(this).children('a')[0].click();
-    })
-    $('#setting-content a').on('click', function() {
+    $('.setting-content a').on('click', function(e) {
+      e.stopPropagation();
       var href = $(this).attr('href');
       href += '?next=' + window.location.pathname;
       $(this).attr('href', href);
     })
+    $(document).on('click', function() {
+      $('.setting-content').hide();
+    });
   }
   $(function() {
     $('#loader').hide();
@@ -547,7 +555,8 @@
         characterData: false
       })
     }
-    register_setting();
+    register_setting(true);
+    register_setting(false);
     color_selected_room();
 
     $('#chat-input').on('input', function() {

templates/chat/online_status.html

@@ -25,8 +25,7 @@
           <div class="status-container">
             <img src="{{ gravatar(user.user, 135) }}" class="status-pic">
             <svg style="position:absolute;" height="32" width="32">
-              <circle class="status-circle"
-                fill="{{'green' if user.is_online else 'red'}}"/>
+              <circle class="status-circle" fill="{{'green' if user.is_online else 'red'}}"/>
             </svg>
           </div>
           <div class="status-user">
@@ -44,8 +43,19 @@
               {{user.unread_count}}
             </span>
           {% endif %}
+          <div style="margin-right: 0.3em; position: relative;">
+            <div class="control-button small setting-button">
+              <i class="fa fa-ellipsis-h"></i>
+            </div>
+            <div class="setting-content">
+              <a href="{{url('toggle_ignore', user.user.id)}}" class="red">
+                {{_('Ignore')}}
+              </a>
+            </div>
+          </div>
         </li>
       {% endfor %}
     </ul>
   {% endif %}
 {% endfor %}
+

templates/chat/user_online_status.html

@@ -27,22 +27,20 @@
 {% endif %}
 
 {% if other_user %}
-  <span style="margin-right: 0.3em" id="setting">
-    <div class="control-button small" style="" id="setting-button">
+  <div style="margin-right: 0.3em; position: relative;">
+    <div class="control-button small user-setting-button">
       <i class="fa fa-ellipsis-h"></i>
     </div>
-    <div id="setting-content">
-      <li>
-        <a href="{{url('toggle_ignore', other_user.id)}}" class=" {{'green' if is_ignored else 'red'}}">
-          {% if is_ignored %}
-            {{_('Unignore')}}
-          {% else %}
-            {{_('Ignore')}}
-          {% endif %}
-        </a>
-      </li>
+    <div class="setting-content">
+      <a href="{{url('toggle_ignore', other_user.id)}}" class=" {{'green' if is_ignored else 'red'}}">
+        {% if is_ignored %}
+          {{_('Unignore')}}
+        {% else %}
+          {{_('Ignore')}}
+        {% endif %}
+      </a>
     </div>
-  </span>
+  </div>
 {% else %}
   <span class="active-span">{{online_count}} {{_('users are online')}}</span>
 {% endif %}