Merge remote-tracking branch 'origin/245_mention_autocomplete' into beta

src/plugins/sib-mention-autocomplete.js

+/**
+ * Custom mention autocomplete list.
+ */
+converse.plugins.add('sib-mention-autocomplete', {
+  overrides: {
+    ChatRoom: {
+      /**
+       * Move the `all` mention at the bottom.
+       * @returns {*}
+       */
+      getAllKnownNicknames() {
+        const nicknames = this.__super__.getAllKnownNicknames.apply(this, arguments);
+
+        if (nicknames.indexOf('all') >= 0) {
+          return nicknames.filter(n => n !== 'all').concat(['all']);
+        }
+
+        return nicknames;
+      },
+    },
+    ChatRoomView: {
+      /**
+       * Disable sort so the `all` mention stays at the bottom.
+       */
+      initMentionAutoComplete() {
+        this.__super__.initMentionAutoComplete.apply(this, arguments);
+        this.mention_auto_complete.sort = false;
+      },
+
+      /**
+       * Show a custom icon for `all`
+       * Render the full name on top of the nickname
+       *
+       * @param text
+       * @param input
+       * @returns {HTMLLIElement}
+       */
+      getAutoCompleteListItem(text, input) {
+        const _converse = this.__super__._converse;
+        const { api } = _converse;
+
+        input = input.trim();
+        const element = document.createElement('li');
+        element.setAttribute('aria-selected', 'false');
+
+        const is_mention_all = text.toString() === 'all';
+        let vcard = null;
+
+        // Get the vcard for the current user
+        if (_converse.vcards && !is_mention_all) {
+          vcard = _converse.vcards.findWhere({
+            'nickname': text,
+          });
+        }
+
+        // Update the `@all` mention with a custom label
+        // Update the label with the user full name if available
+        // TODO: Add translation support
+        if (is_mention_all) {
+          text.title = 'Notifier tous les utilisateurs du cercle';
+        } else if (vcard && vcard.get('fullname')) {
+          text.title = vcard.get('fullname') || text.toString();
+        } else {
+          text.title = text.toString();
+        }
+
+        // Update mention item with the avatar
+        if (api.settings.get('muc_mention_autocomplete_show_avatar')) {
+
+          const ALL_IMAGE_TYPE = 'image/png';
+          const ALL_IMAGE = 'iVBORw0KGgoAAAANSUhEUgAAACQAAAAkCAYAAADhAJiYAAABhGlDQ1BJQ0MgcHJvZmlsZQAAKJF9kT1Iw0AcxV/Tih9UFOwg4pChdrJQVMRRq1CECqFWaNXB5NIvaNKQpLg4Cq4FBz8Wqw4uzro6uAqC4AeIm5uToouU+L+k0CLWg+N+vLv3uHsHCPUy06xADNB020wl4mImuyp2vyKAQfQihojMLGNOkpLoOL7u4ePrXZRndT735+hXcxYDfCLxLDNMm3iDeHrTNjjvE4dYUVaJz4nHTbog8SPXFY/fOBdcFnhmyEyn5olDxGKhjZU2ZkVTI54iDquaTvlCxmOV8xZnrVxlzXvyFwZz+soy12mOIoFFLEGCCAVVlFCGjSitOikWUrQf7+Afcf0SuRRylcDIsYAKNMiuH/wPfndr5ScnvKRgHOh6cZyPMaB7F2jUHOf72HEaJ4D/GbjSW/5KHZj5JL3W0sJHwMA2cHHd0pQ94HIHGH4yZFN2JT9NIZ8H3s/om7LA0C3Qt+b11tzH6QOQpq6SN8DBIRApUPZ6h3f3tPf275lmfz+L0XKxj98XuQAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAAuIwAALiMBeKU/dgAAAAd0SU1FB+UEEAkzFM6kWwwAAAAZdEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIEdJTVBXgQ4XAAACSUlEQVRYw+3Xz0sUYRjA8e/Mjs6s6+iuq64/0mzTJLQIy0DqokQRUVfp4jE6B9VBCLtF/0MEdapDknjwYJeIsLykUbaU+WNd21zW/TG6zu7M7HQQBCkQ0132MM/x4eXhw/s+7/PyCoTHbUooREosHJADckAO6EDFDAvsg81Z6TAgykqSI0+mkFdT2C4R7UwzvwZ7MKuVfdcSDvx02DbeqSVMr8LGyQYEK0/txBy+dz/5MXKVvCwVZ4dcmzn8kyHcywkMv4d4f8e2zyUSu9aFEk6izqySOt9a+B5SIilODI8jGnni/R1kG1SOPX6D9+PSzhrD60bS9OL0UNOzaSJDvaR7WgDYoJH06WbaH06QOtuC7RIRbLAFoTi3TFlJonU37coZtR5MVaZsPQNAeUwjV19ZGnNISut4vq2hH60pDshyl1H2j/6QNnNYlTJNz6dJ9bVhqnJxQFtBPxXfY7sxmg7CNta9uI4lS4i6URxQfKCDwOgsrkxuJ9fw8hPJvjYA5h9cQdRNOu+N4Z8MIVj5woIy7XUYXje+t/MAyFGN6qlF4pc6ATBVhdWhXuaHL6N+idL89EOBQLaN9/0CnffHMGo8JC4GAcgGVGI3ujk+MkH968+IORNscC8nyAT9lK9tHP7TIW4ZBB9NYlWUE73Zw1ar7++mTukEXs1QNRth4c4AntBvlHCS9LlWtFONhwuqnItSN/6VhbsDe64NjM5iSyJr17sLN6mzgSqUSJKuWy/2PllJJHz7wn/NMMH5KDogB+SAHJAD2l/8AVdEzx8qjlPAAAAAAElFTkSuQmCC';
+
+          const img = document.createElement('img');
+          let dataUri = 'data:' + _converse.DEFAULT_IMAGE_TYPE + ';base64,' + _converse.DEFAULT_IMAGE;
+
+          if (vcard) {
+            dataUri = 'data:' + vcard.get('image_type') + ';base64,' + vcard.get('image');
+          }
+
+          if (is_mention_all) {
+            dataUri = 'data:' + ALL_IMAGE_TYPE + ';base64,' + ALL_IMAGE;
+          }
+
+          img.setAttribute('src', dataUri);
+          img.setAttribute('width', '32');
+          img.setAttribute('class', 'avatar avatar-autocomplete');
+          element.appendChild(img);
+        }
+
+        const label = document.createElement('span');
+        label.appendChild(document.createTextNode(text.title));
+
+        const val = document.createElement('small');
+        val.appendChild(document.createTextNode('@'));
+
+        const regex = new RegExp('(' + input + ')', 'ig');
+        const parts = input ? text.split(regex) : [text];
+
+        parts.forEach(txt => {
+          if (input && txt.match(regex)) {
+            const match = document.createElement('mark');
+            match.textContent = txt;
+            val.appendChild(match);
+          } else {
+            val.appendChild(document.createTextNode(txt));
+          }
+        });
+
+        label.appendChild(val);
+        element.appendChild(label);
+
+        return element;
+      },
+    },
+  },
+});

src/solid-xmpp-chat.js

@@ -12,6 +12,7 @@ import './plugins/sib-custom-hats.js';
 import './plugins/sib-disconnected.js';
 import './plugins/sib-emoji-picker.js';
 import './plugins/sib-history-improved.js';
+import './plugins/sib-mention-autocomplete.js';
 import './plugins/sib-mention-mobile.js';
 import './plugins/sib-reactions.js';
 import './plugins/sib-remove-notifications.js';
@@ -239,6 +240,7 @@ export const SolidXMPPChat = {
           'sib-disconnected',
           'sib-emoji-picker',
           'sib-history-improved',
+          'sib-mention-autocomplete',
           'sib-mention-mobile',
           'sib-reactions',
           'sib-remove-notifications',

src/styles/index.scss

@@ -589,21 +589,45 @@
 
   .suggestion-box .suggestion-box__results,
   .suggestion-box > ul {
-    box-shadow: 0 0 5px 0 rgba(133, 140, 148, 0.09);
+    box-shadow: 0 0 5px 0 rgba(133, 140, 148, 0.25);
   }
 
   &.converse-fullscreen .chatroom .sendXMPPMessage .suggestion-box__results--above,
   .chatroom .sendXMPPMessage .suggestion-box__results--above {
     border: none;
+    position: absolute;
+    top: -3px;
+    transform: translateY(-100%);
+    bottom: unset;
 
     li {
+      display: flex;
+      align-items: center;
       color: var(--color-chat-suggestion);
       font-size: 13px;
       font-weight: 600;
       border-bottom: 1px solid #E4E8ED;
+
+      small:before {
+        content: "\a";
+        white-space: pre;
+      }
+    }
+
+    @media (min-width: 768px) {
+      max-width: 30rem;
+      min-width: unset;
     }
   }
 
+  .suggestion-box {
+    position: unset;
+  }
+
+  .sendXMPPMessage {
+    position: relative;
+  }
+
   &.converse-fullscreen .chatroom .sendXMPPMessage .chat-toolbar,
   .chatroom .sendXMPPMessage .chat-toolbar {
     border-top: 1px solid var(--chat-head-color);
@@ -846,23 +870,15 @@
   }
 
   .suggestion-box mark {
-    background: var(--hd-hightlight-color);
+    background: transparent !important;
+    font-weight: bold;
   }
 
   .suggestion-box > ul > li[aria-selected=true] {
-    background: transparent;
+    background: #f6f6f6 !important;
     color: var(--chat-suggestion-selected-true) !important;
   }
 
-  .suggestion-box li:hover mark {
-    background: var(--hd-hightlight-color);
-  }
-
-  .suggestion-box li[aria-selected=true] mark {
-    background: inherit;
-    font-weight: bold;
-  }
-
   .modal-backdrop {
     z-index: 1030;
   }