Location message redesign (#185)

* Hide loading indicator on locations
* Open location link on text and icon click
* Text below location and timestamp are selectable, mouse changes accordingly
* Fix some translations

public/i18n/de.json

@@ -15,7 +15,7 @@
         "CHOOSE_PASSWORD": "W\u00e4hlen Sie vor dem Scannen ein Passwort, <br> um sp\u00e4ter die gleiche Sitzung erneut herzustellen.",
         "UNLOCK_FAILED_TEXT": "Sie haben das falsche Passwort eingegeben. Die Verbindung kann nicht aufgebaut werden.",
         "ENTER_PASSWORD": "Um die letzte Sitzung wiederherzustellen, <br> geben Sie bitte das entsprechende Passwort ein.",
-        "UNLOCK_FAILED_TITLE": "Verbindung abbrechen fehlgeschlagen",
+        "UNLOCK_FAILED_TITLE": "Verbindung aufbauen fehlgeschlagen",
         "ALTERNATIVELY": "Alternativ:",
         "UNLOCK_FAILED_FORGOTTEN": "Haben Sie Ihr Passwort vergessen? W\u00e4hlen Sie \"Verbindung abbrechen\" und setzen Sie ein neues Passwort.",
         "IF_YOU_WANT": "Wenn Sie möchten, können Sie die",
@@ -146,7 +146,8 @@
         "PRIVATE_CHAT": "Private Unterhaltung",
         "PRIVATE_CHAT_DESCRIPTION": "Private Unterhaltungen werden in Threema Web nicht unterstützt.",
         "MESSAGE_TOO_LONG_SPLIT_SUBJECT": "Nachricht aufteilen.",
-        "MESSAGE_TOO_LONG_SPLIT_BODY": "Es werden maximal {max} Zeichen pro Nachricht unterstützt, wollen Sie die Nachricht in {count} separate Nachrichten aufteilen?"
+        "MESSAGE_TOO_LONG_SPLIT_BODY": "Es werden maximal {max} Zeichen pro Nachricht unterstützt, wollen Sie die Nachricht in {count} separate Nachrichten aufteilen?",
+        "BALLOT_MESSAGES_NOT_SUPPORTED": "Umfragen werden in Threema Web derzeit nicht untersützt."
     },
     "messageTypes": {
         "AUDIO_MESSAGE": "Sprachnachricht",

public/i18n/en.json

@@ -147,7 +147,8 @@
         "PRIVATE_CHAT": "Private chat",
         "PRIVATE_CHAT_DESCRIPTION": "Private chat are not supported in Threema Web.",
         "MESSAGE_TOO_LONG_SPLIT_SUBJECT": "Split Message",
-        "MESSAGE_TOO_LONG_SPLIT_BODY": "No more than {max} characters can be sent per message, do you want to split it into {count} separate messages?"
+        "MESSAGE_TOO_LONG_SPLIT_BODY": "No more than {max} characters can be sent per message, do you want to split it into {count} separate messages?",
+        "BALLOT_MESSAGES_NOT_SUPPORTED": "Ballot messages are not yet supported in Threema Web."
     },
     "messageTypes": {
         "AUDIO_MESSAGE": "Audio Message",

src/directives/location.ts

@@ -31,10 +31,14 @@ export default [
                         : this.location.lat  + ', ' + this.location.lon;
             }],
             template: `
-                <a ng-href="{{ctrl.location | mapLink}}" class="location-address" target="_blank" rel="noopener noreferrer">
-                    {{ctrl.label}}
-                </a>
-                <div class="location-poi" ng-if="ctrl.location.poi">{{ctrl.location.poi}}</div>
+                <div class="file-message">
+                    <div class="circle">
+                        <i class="material-icons md-24">location_on</i>
+                    </div>
+                    <div class="info">
+                            {{ctrl.label}}
+                    </div>
+                </div>
             `,
         };
     },

src/directives/message_media.html

@@ -1,6 +1,6 @@
 <!-- Thumbnail -->
 <!-- Images, Gifs & Videos -->
-<span class="in-view-indicator" in-view="ctrl.thumbnailInView($inview)"></span>
+<span class="in-view-indicator" ng-if="ctrl.type !== 'location'" in-view="ctrl.thumbnailInView($inview)"></span>
 
 <div ng-if="ctrl.uploading">
     <!-- Loading indicator -->
@@ -35,12 +35,12 @@
     </div>
 
     <!-- Location -->
-    <location ng-if="ctrl.type === 'location'" location="ctrl.location"></location>
+    <location ng-if="ctrl.type === 'location'" location="ctrl.location" ng-click="ctrl.openMapLink()"></location>
 
     <!-- Audio file -->
-    <div class="file-message" ng-if="ctrl.type === 'audio'">
+    <div class="file-message" ng-if="ctrl.type === 'audio'" ng-click="ctrl.download()">
         <!-- Loading indicator -->
-        <div class="circle" ng-click="ctrl.download()"
+        <div class="circle"
              ng-class="{active: !ctrl.downloading}"
              ng-if="!ctrl.downloaded">
             <i class="material-icons md-24">file_download</i>
@@ -86,4 +86,4 @@
     </div>
 </div>
 <!-- Ballot -->
-<span ng-if="ctrl.type === 'ballot'"><em>Ballot messages are not yet supported.</em></span> <!-- TODO -->
+<span ng-if="ctrl.type === 'ballot'"><em translate>messenger.BALLOT_MESSAGES_NOT_SUPPORTED</em></span> <!-- TODO -->

src/directives/message_media.ts

@@ -28,6 +28,7 @@ export default [
     '$timeout',
     '$log',
     '$filter',
+    '$window',
     function(webClientService: WebClientService,
              mediaboxService: MediaboxService,
              messageService: MessageService,
@@ -35,7 +36,8 @@ export default [
              $mdDialog: ng.material.IDialogService,
              $timeout: ng.ITimeoutService,
              $log: ng.ILogService,
-             $filter: ng.IFilterService) {
+             $filter: ng.IFilterService,
+             $window: ng.IWindowService) {
         return {
             restrict: 'EA',
             scope: {},
@@ -114,6 +116,11 @@ export default [
                     this.downloaded = true;
                 }
 
+                // Open map link in new window using mapLink-filter
+                this.openMapLink = () => {
+                    $window.open($filter<any>('mapLink')(this.location), '_blank');
+                };
+
                 // Play a Audio file in a dialog
                 this.playAudio = (buffer: ArrayBuffer) => {
                     $mdDialog.show({

src/partials/dialog.unlockfailed.html

@@ -18,7 +18,7 @@
         <md-dialog-actions layout="row">
             <span flex></span>
             <md-button ng-click="ctrl.cancel()">
-                Close
+                <span translate>common.CLOSE</span>
             </md-button>
         </md-dialog-actions>
     </form>

src/sass/sections/_conversation.scss

@@ -328,10 +328,6 @@
                 align-items: center;
                 flex-direction: column;
                 padding: 4px 0;
-                i {
-                    margin-left: -3px;
-                    margin-right: 2px;
-                }
 
                 .location-poi {
                     font-size: 80%;