Show message history

public/i18n/de.json

@@ -117,8 +117,15 @@
         "GROUP_ROLE_NORMAL": "Mitglied",
         "GROUP_ROLE_CREATOR": "Ersteller",
         "DOWNLOAD": "Herunterladen",
-        "COPY": "Kopieren",
         "DOWNLOADING": "Laden …",
+        "COPY": "Kopieren",
+        "MSG_HISTORY": "Nachrichten-Verlauf",
+        "MSG_HISTORY_CREATED": "Erstellt",
+        "MSG_HISTORY_SENT": "Gesendet",
+        "MSG_HISTORY_DELIVERED": "Zugestellt",
+        "MSG_HISTORY_READ": "Gelesen",
+        "MSG_HISTORY_ACKED": "Bestätigt",
+        "MSG_HISTORY_MODIFIED": "Geändert",
         "CONFIRM_FILE_SEND": "Senden an «{senderName}»?",
         "CONFIRM_FILE_CAPTION": "Optionale Beschriftung",
         "CONFIRM_SEND_AS_FILE": "Als Datei senden",

public/i18n/en.json

@@ -117,8 +117,15 @@
         "GROUP_ROLE_NORMAL": "Member",
         "GROUP_ROLE_CREATOR": "Creator",
         "DOWNLOAD": "Download",
-        "COPY": "Copy",
         "DOWNLOADING": "Downloading …",
+        "COPY": "Copy",
+        "MSG_HISTORY": "Message History",
+        "MSG_HISTORY_CREATED": "Created",
+        "MSG_HISTORY_SENT": "Sent",
+        "MSG_HISTORY_DELIVERED": "Delivered",
+        "MSG_HISTORY_READ": "Read",
+        "MSG_HISTORY_ACKED": "Acknowledged",
+        "MSG_HISTORY_MODIFIED": "Modified",
         "CONFIRM_FILE_SEND": "Send to «{senderName}»?",
         "CONFIRM_FILE_CAPTION": "Optional caption",
         "CONFIRM_SEND_AS_FILE": "Send as file message",

src/directives/message.ts

@@ -15,6 +15,8 @@
  * along with Threema Web. If not, see <http://www.gnu.org/licenses/>.
  */
 
+// tslint:disable:max-line-length
+
 import {MessageService} from '../services/message';
 import {ReceiverService} from '../services/receiver';
 import {WebClientService} from '../services/webclient';
@@ -133,6 +135,49 @@ export default [
                 this.isDownloading = () => {
                     return this.downloading;
                 };
+
+                this.showHistory = (ev) => {
+                    const getEvents = () => this.message.events;
+                    $mdDialog.show({
+                        controllerAs: 'ctrl',
+                        controller: function() {
+                            this.getEvents = getEvents;
+                            this.close = () => {
+                                $mdDialog.hide();
+                            };
+                        },
+                        template: `
+                            <md-dialog class="message-history-dialog" translate-attr="{'aria-label': 'messenger.MSG_HISTORY'}">
+                                <form ng-cloak>
+                                    <md-toolbar>
+                                        <div class="md-toolbar-tools">
+                                            <h2 translate>messenger.MSG_HISTORY</h2>
+                                        </div>
+                                    </md-toolbar>
+                                    <md-dialog-content>
+                                        <p ng-repeat="event in ctrl.getEvents()">
+                                            <span class="event-type" ng-if="event.type === 'created'" translate>messenger.MSG_HISTORY_CREATED</span>
+                                            <span class="event-type" ng-if="event.type === 'sent'" translate>messenger.MSG_HISTORY_SENT</span>
+                                            <span class="event-type" ng-if="event.type === 'delivered'" translate>messenger.MSG_HISTORY_DELIVERED</span>
+                                            <span class="event-type" ng-if="event.type === 'read'" translate>messenger.MSG_HISTORY_READ</span>
+                                            <span class="event-type" ng-if="event.type === 'acked'" translate>messenger.MSG_HISTORY_ACKED</span>
+                                            <span class="event-type" ng-if="event.type === 'modified'" translate>messenger.MSG_HISTORY_MODIFIED</span>
+                                            {{ event.date | unixToTimestring:true }}
+                                        </p>
+                                    </md-dialog-content>
+                                    <md-dialog-actions layout="row" >
+                                        <md-button ng-click="ctrl.close()">
+                                            <span translate>common.OK</span>
+                                        </md-button>
+                                    </md-dialog-actions>
+                                </form>
+                            </md-dialog>
+                        `,
+                        parent: angular.element(document.body),
+                        targetEvent: ev,
+                        clickOutsideToClose: true,
+                    });
+                };
             }],
             link: function(scope: any, element: ng.IAugmentedJQuery, attrs) {
                 // Prevent status messages from being draggable

src/directives/message_menu.html

@@ -34,6 +34,12 @@
                 <span translate>messenger.COPY</span>
             </md-button>
         </md-menu-item>
+        <md-menu-item ng-if="ctrl.message.events">
+            <md-button ng-click="ctrl.showHistory($event)">
+                <md-icon aria-label="Message history" class="material-icons md-24">history</md-icon>
+                <span translate>messenger.MSG_HISTORY</span>
+            </md-button>
+        </md-menu-item>
         <md-menu-item ng-if="ctrl.access.delete">
             <md-button ng-click="ctrl.delete($event)">
             <md-icon aria-label="Delete" class="material-icons md-24">delete</md-icon>

src/sass/components/_dialogs.scss

@@ -45,3 +45,16 @@ md-dialog.send-file-dialog {
         max-width: 100%;
     }
 }
+
+md-dialog.message-history-dialog {
+    md-dialog-content {
+        padding: 24px;
+    }
+
+    .event-type {
+        font-weight: bold;
+    }
+    .event-type:after {
+        content: ':';
+    }
+}