Emojify nicknames (#338)

Emoji in the public nickname are now rendered properly.

src/directives/contact_badge.ts

@@ -59,8 +59,8 @@ export default [
                                     eee-receiver="ctrl.contactReceiver"
                                     eee-resolution="'low'"></eee-avatar>
                     </section>
-                    <div class="receiver-badge-name">
-                        {{ctrl.contactReceiver.displayName}}
+                    <div class="receiver-badge-name"
+                        ng-bind-html="ctrl.contactReceiver.displayName | emojify">
                     </div>
                     <div class="contact-badge-identity">
                         {{ctrl.contactReceiver.id}}

src/directives/distribution_list_badge.ts

@@ -45,8 +45,7 @@ export default [
                                     eee-receiver="ctrl.distributionListReceiver"
                                     eee-resolution="'low'"></eee-avatar>
                     </section>
-                    <div class="receiver-badge-name">
-                        {{ctrl.distributionListReceiver.displayName}}
+                    <div class="receiver-badge-name" ng-bind-html="ctrl.distributionListReceiver.displayName | emojify">
                     </div>
 
                 </div>

src/directives/group_badge.ts

@@ -63,10 +63,8 @@ export default [
                                     eee-receiver="ctrl.groupReceiver"
                                     eee-resolution="'low'"></eee-avatar>
                     </section>
-                    <div class="receiver-badge-name">
-                        {{ctrl.groupReceiver.displayName}}
+                    <div class="receiver-badge-name" ng-bind-html="ctrl.groupReceiver.displayName | emojify">
                     </div>
-
                     <div class="receiver-role" ng-if="ctrl.showRoleIcon" title="{{ctrl.roleLabel}}">
                         <md-icon aria-label="{{ctrl.roleLabel}}"  class="material-icons md-24">
                             {{ctrl.roleIcon}}

src/directives/message_contact.ts

@@ -24,8 +24,9 @@ export default [
                 colored: '=eeeColored',
             },
             template: `
-                <span class="message-name" ng-style="colored && {'color': contact.color}">
-                    {{ contact.displayName }}
+                <span class="message-name"
+                    ng-style="colored && {'color': contact.color}"
+                       ng-bind-html="contact.displayName | emojify">
                 </span>
             `,
         };

src/directives/message_quote.ts

@@ -34,7 +34,8 @@ export default [
             }],
             template: `
                 <div class="message-quote-content" ng-style="{'border-color': ctrl.contact().color}">
-                    <span class="message-name" ng-style="{'color': ctrl.contact().color}">{{ ctrl.contact().displayName }}</span>
+                    <span class="message-name" ng-style="{'color': ctrl.contact().color}"
+                        ng-bind-html="ctrl.contact().displayName | emojify"></span>
                     <span class="message-quote" ng-bind-html="ctrl.quote.text | escapeHtml | markify | emojify | linkify | nlToBr"></span>
                 </div>
             `,

src/directives/my_identity.ts

@@ -55,9 +55,8 @@ export default [
             }],
             template: `
                 <div class="my-threema-information" ng-click="ctrl.showQRCode()">
-                    <div class="threema-id" ng-cloak>
-                        <span translate>messenger.MY_PUBLIC_NICKNAME</span>
-                        {{ctrl.identity.publicNickname}}
+                    <div class="nickname" ng-cloak
+                        ng-bind-html="ctrl.identity.publicNickname | emojify | emptyToPlaceholder: '-'">
                     </div>
                 </div>
             `,

src/filters.ts

@@ -52,6 +52,18 @@ angular.module('3ema.filters', [])
     };
 })
 
+/**
+ * Replace a undefined/null or empty string with a placeholder
+ */
+.filter('emptyToPlaceholder', function() {
+    return (text, placeholder: string = '-') => {
+        if (text === null || text === undefined || text.trim().length === 0) {
+            return placeholder;
+        }
+        return text;
+    };
+})
+
 /**
  * Convert links in text to <a> tags.
  */

src/partials/messenger.conversation.html

@@ -18,7 +18,7 @@
             </div>
             <div class="conversation-header-details-detail" ng-if="ctrl.type == 'group'"
                  title="{{ ctrl.receiver.members | idsToNames }}">
-                <span>{{ ctrl.receiver.members | idsToNames }}</span>
+                <span ng-bind-html="ctrl.receiver.members | idsToNames | emojify"></span>
             </div>
         </div>
     </div>

src/partials/messenger.receiver/contact.html

@@ -29,7 +29,7 @@
 				<dd>{{ ctrl.fingerPrint }}</dd>
 
 				<dt><span translate>messenger.NICKNAME</span></dt>
-				<dd>{{ ctrl.receiver.publicNickname || "-" }}</dd>
+				<dd ng-bind-html="ctrl.receiver.publicNickname | emojify"></dd>
 
 				<dt><span translate>messenger.FIRST_NAME</span></dt>
 				<dd>{{ ctrl.receiver.firstName || "-" }}</dd>

src/partials/messenger.ts

@@ -166,6 +166,7 @@ class ConversationController {
     private $state: ng.ui.IStateService;
     private $log: ng.ILogService;
     private $scope: ng.IScope;
+    private $filter: ng.IFilterService;
 
     // Own services
     private webClientService: WebClientService;
@@ -212,7 +213,7 @@ class ConversationController {
 
     public static $inject = [
         '$stateParams', '$state', '$timeout', '$log', '$scope', '$rootScope',
-        '$mdDialog', '$mdToast', '$location', '$translate',
+        '$mdDialog', '$mdToast', '$location', '$translate', '$filter',
         'WebClientService', 'StateService', 'ReceiverService', 'MimeService', 'VersionService',
         'ControllerModelService',
     ];
@@ -226,6 +227,7 @@ class ConversationController {
                 $mdToast: ng.material.IToastService,
                 $location,
                 $translate: ng.translate.ITranslateService,
+                $filter: ng.IFilterService,
                 webClientService: WebClientService,
                 stateService: StateService,
                 receiverService: ReceiverService,
@@ -242,6 +244,7 @@ class ConversationController {
 
         this.$state = $state;
         this.$scope = $scope;
+        this.$filter = $filter;
 
         this.$mdDialog = $mdDialog;
         this.$mdToast = $mdToast;
@@ -443,7 +446,8 @@ class ConversationController {
 
                     // Eager translations
                     const title = this.$translate.instant('messenger.CONFIRM_FILE_SEND', {
-                        senderName: this.receiver.displayName,
+                        senderName: (this.$filter('emojify') as any)
+                            ((this.$filter('emptyToPlaceholder') as any)(this.receiver.displayName, '-')),
                     });
                     const placeholder = this.$translate.instant('messenger.CONFIRM_FILE_CAPTION');
                     const confirmSendAsFile = this.$translate.instant('messenger.CONFIRM_SEND_AS_FILE');

src/sass/sections/_conversation.scss

@@ -103,7 +103,6 @@
         font-weight: bold;
         font-size: 0.9em;
         margin-bottom: 8px;
-
     }
 
     .message-quote {
@@ -301,6 +300,10 @@
             font-weight: bold;
             font-size: 0.9em;
             margin-bottom: 8px;
+            // Emoji styling
+            > span:not(.ng-binding) {
+                transform: scale(0.6);
+            }
         }
 
         .message-text {

src/sass/sections/_my_identity.scss

@@ -20,20 +20,13 @@
     .my-threema-information {
       @include mouse-hand;
       div {
-        /* hide nickname */
-        span {
-          font-size: 10pt;
-          text-shadow: none;
-          margin-bottom: ($main-padding/2);
-          display: none;
-        }
         white-space: nowrap;
         overflow: hidden;
         text-overflow: ellipsis;
         word-wrap: break-word;
         word-break: break-all;
       }
-      .threema-id {
+      .nickname {
         font-size: 16pt;
       }
     }