Harmonize status icons (#385)

Harmonize conversation list status icons.

Fixes #345

public/fonts/material.css

@@ -57,3 +57,6 @@
 .material-icons.user-ack {
     color: #4caf50;
 }
+.material-icons.send-failed {
+    color: #d50000;
+}

src/directives.ts

@@ -29,7 +29,6 @@ import dragFile from './directives/drag_file';
 import groupBadge from './directives/group_badge';
 import includeReplace from './directives/include_replace';
 import latestMessage from './directives/latest_message';
-import latestMessageState from './directives/latest_message_state';
 import location from './directives/location';
 import mediabox from './directives/mediabox';
 import memberListEditor from './directives/member_list_editor';
@@ -59,7 +58,6 @@ angular.module('3ema.directives').directive('eeeContactBadge', contactBadge);
 angular.module('3ema.directives').directive('eeeDistributionListBadge', distributionListBadge);
 angular.module('3ema.directives').directive('eeeGroupBadge', groupBadge);
 angular.module('3ema.directives').directive('eeeLatestMessage', latestMessage);
-angular.module('3ema.directives').directive('eeeLatestMessageState', latestMessageState);
 angular.module('3ema.directives').directive('eeeMessage', message);
 angular.module('3ema.directives').directive('eeeMessageContact', messageContact);
 angular.module('3ema.directives').directive('eeeMessageDate', messageDate);

src/directives/latest_message.html

@@ -41,14 +41,11 @@
         <span class="no-draft no-hidden">
             <span eee-message-date
                   class="message-date" eee-message="ctrl.message"></span>
-            <span eee-latest-message-state
-                  class="message-state"
-                  eee-message="ctrl.message"
-                  ng-show="!ctrl.defaultStatusIcon"></span>
-
-            <span class="message-state"
-                  ng-show="ctrl.defaultStatusIcon">
-                <i class="material-icons md-dark md-14">{{ ctrl.defaultStatusIcon }}</i>
+
+            <span class="message-state" ng-show="ctrl.statusIcon">
+                 <i class="material-icons md-dark md-14 {{ctrl.message.state}}">
+                     {{ ctrl.statusIcon }}
+                 </i>
             </span>
         </span>
         <span class="draft no-hidden">

src/directives/latest_message.ts

@@ -15,12 +15,14 @@
  * along with Threema Web. If not, see <http://www.gnu.org/licenses/>.
  */
 
+import {MessageService} from '../services/message';
 import {ReceiverService} from '../services/receiver';
 import {WebClientService} from '../services/webclient';
 
 export default [
-    'WebClientService', 'ReceiverService',
-    function(webClientService: WebClientService, receiverService: ReceiverService) {
+    'WebClientService', 'ReceiverService', 'MessageService', '$filter',
+    function(webClientService: WebClientService, receiverService: ReceiverService,
+             messageService: MessageService, $filter: any) {
         return {
             restrict: 'EA',
             scope: {},
@@ -42,7 +44,6 @@ export default [
                     }
                     return null;
                 };
-
                 // Conversation properties
 
                 this.isGroup = this.type as threema.ReceiverType === 'group';
@@ -52,8 +53,21 @@ export default [
                 this.showVoipInfo = this.message
                     && (this.message as threema.Message).type === 'voipStatus';
 
-                this.defaultStatusIcon = this.showVoipInfo ? 'phone_locked' :
-                    (this.isGroup ? 'group' : (this.isDistributionList ? 'forum' : null));
+                if (this.showVoipInfo) {
+                    this.statusIcon = 'phone_locked';
+                } else if (this.isGroup) {
+                    this.statusIcon = 'group';
+                } else if (this.isDistributionList) {
+                    this.statusIcon = 'forum';
+                } else if (!this.message.isOutbox) {
+                    this.statusIcon = 'reply';
+                } else if (messageService.showStatusIcon(this.message, this.receiver)) {
+                    // Show status icon of incoming messages every time
+                    this.statusIcon = $filter('messageStateIcon')(this.message);
+                } else {
+                    // Do not show a status icon
+                    this.statusIcon = null;
+                }
 
                 // Find sender of latest message in group chats
                 this.contact = null;
@@ -64,7 +78,7 @@ export default [
                 // Typing indicator
                 this.isTyping = () => false;
                 if (this.isGroup === false
-                    && this.isDitributionList === false
+                    && this.isDistributionList === false
                     && this.contact !== null) {
                     this.isTyping = () => {
                         return webClientService.isTyping(this.contact);

src/directives/latest_message_state.ts

@@ -1,38 +0,0 @@
-/**
- * This file is part of Threema Web.
- *
- * Threema Web is free software: you can redistribute it and/or modify it
- * under the terms of the GNU Affero General Public License as published by
- * the Free Software Foundation, either version 3 of the License, or (at
- * your option) any later version.
- *
- * This program is distributed in the hope that it will be useful, but
- * WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Affero
- * General Public License for more details.
- *
- * You should have received a copy of the GNU Affero General Public License
- * along with Threema Web. If not, see <http://www.gnu.org/licenses/>.
- */
-
-/*
- * Create the appropriate icon for the state of the specified message.
- *
- * In contrast to eeeMessageState, a few more icons are possible here
- * (e.g. the "replied" icon).
- */
-export default [
-    function() {
-        return {
-            restrict: 'EA',
-            scope: {
-                message: '=eeeMessage',
-                receiver: '=eeeReceiver',
-                type: '=eeeType',
-            },
-            template: `
-                <i class="material-icons md-dark md-14 {{message.state}}">{{ message | messageStateIcon }}</i>
-            `,
-        };
-    },
-];