Add version info dialog

index.html

@@ -85,10 +85,7 @@
         </div>
         <footer ng-controller="FooterController as ctrl">
             <ul>
-                <li><a
-                        href="{{ ctrl.changelogUrl }}"
-                        target="_blank"
-                        rel="noopener noreferrer">Version [[VERSION]] {{ ctrl.config.VERSION_MOUNTAIN }}</a></li>
+                <li><a ng-click="ctrl.showVersionInfo('[[VERSION]]')">Version [[VERSION]] {{ ctrl.config.VERSION_MOUNTAIN }}</a></li>
                 <li><a
                         href="https://threema.ch/threema-web"
                         target="_blank"

public/i18n/de.json

@@ -39,7 +39,9 @@
         "LOCAL_STORAGE_MISSING_DETAILS": "Zugriff auf LocalStorage ist nicht möglich. Dieses Problem kann auftreten, wenn in Ihrem Browser Cookies blockiert werden, oder wenn ein Browser-Add-On installiert ist, welches den Zugriff auf LocalStorage blockiert. Bitte erlauben Sie die Nutzung von LocalStorage in Ihrem Browser oder deaktivieren Sie die installierten Browser-Add-Ons.",
         "LOCAL_STORAGE_EXCEPTION_DETAILS": "Kritischer Fehler beim Zugriff auf LocalStorage: {errorMsg}.<br>Bitte starten Sie Ihren Browser neu.",
         "ALREADY_CONNECTED": "Bereits verbunden",
-        "ALREADY_CONNECTED_DETAILS": "Sie sind bereits in einem anderen Tab oder Fenster mit Threema Web verbunden!"
+        "ALREADY_CONNECTED_DETAILS": "Sie sind bereits in einem anderen Tab oder Fenster mit Threema Web verbunden!",
+        "VERSION": "Version",
+        "BACKGROUND_IMAGE": "Hintergrundbild"
     },
     "connecting": {
         "CONNECTION_PROBLEMS": "Verbindungsprobleme",

public/i18n/en.json

@@ -39,7 +39,9 @@
         "LOCAL_STORAGE_MISSING_DETAILS": "Access to LocalStorage not possible. This can occur if your browser is configured to reject cookies, or if you installed a browser add-on that blocks access to LocalStorage. Please allow local storage in your browser settings or disable any add-ons you might have installed.",
         "LOCAL_STORAGE_EXCEPTION_DETAILS": "Critical error when accessing LocalStorage: {errorMsg}.<br>Try restarting your browser.",
         "ALREADY_CONNECTED": "Already connected",
-        "ALREADY_CONNECTED_DETAILS": "You are already connected to Threema Web in another tab or window!"
+        "ALREADY_CONNECTED_DETAILS": "You are already connected to Threema Web in another tab or window!",
+        "VERSION": "Version",
+        "BACKGROUND_IMAGE": "Background Image"
     },
     "connecting": {
         "CONNECTION_PROBLEMS": "Connection problems",

src/config.ts

@@ -9,7 +9,7 @@ export default {
     SELF_HOSTED: false,
     VERSION_MOUNTAIN: 'Grosser Mythen',
     VERSION_MOUNTAIN_URL: 'https://de.wikipedia.org/wiki/Mythen#/media/File:Die_Mythen.jpg',
-    VERSION_MOUNTAIN_HEIGHT: '1898m',
+    VERSION_MOUNTAIN_HEIGHT: 1898,
     PREV_PROTOCOL_LAST_VERSION: '1.8.2',
     GIT_BRANCH: 'ios',
 

src/controllers/footer.ts

@@ -19,13 +19,42 @@
  * Handle footer information.
  */
 export class FooterController {
+    private $mdDialog: ng.material.IDialogService;
+
     private config: threema.Config;
 
-    public static $inject = ['CONFIG'];
-    constructor(CONFIG: threema.Config) {
+    public static $inject = ['CONFIG', '$mdDialog'];
+    constructor(CONFIG: threema.Config, $mdDialog: ng.material.IDialogService) {
+        this.$mdDialog = $mdDialog;
         this.config = CONFIG;
     }
 
+    public showVersionInfo(version: string): void {
+        this.$mdDialog.show({
+            controller: [
+                '$mdDialog',
+                'CONFIG',
+                function($mdDialog: ng.material.IDialogService, CONFIG: threema.Config) {
+                    this.activeElement = null;
+                    this.version = version;
+                    this.fullVersion = `${version} ${CONFIG.VERSION_MOUNTAIN}`;
+                    this.config = CONFIG;
+                    this.cancel = () => {
+                        $mdDialog.cancel();
+                        if (this.activeElement !== null) {
+                            this.activeElement.focus(); // reset focus
+                        }
+                    };
+                },
+            ],
+            controllerAs: 'ctrl',
+            templateUrl: 'partials/dialog.version.html',
+            parent: angular.element(document.body),
+            clickOutsideToClose: true,
+            fullscreen: true,
+        });
+    }
+
     /**
      * Return the changelog URL.
      */

src/partials/dialog.version.html

@@ -0,0 +1,34 @@
+<md-dialog aria-label="About">
+    <form ng-cloak>
+        <md-toolbar>
+            <div class="md-toolbar-tools">
+                <h2 translate>Version {{ ctrl.fullVersion }}</h2>
+                <span flex></span>
+                <md-button class="md-icon-button" ng-click="ctrl.cancel()">
+                    <md-icon aria-label="Close dialog" class="material-icons md-24">close</md-icon>
+                </md-button>
+            </div>
+        </md-toolbar>
+        <md-dialog-content>
+            <div class="md-dialog-content">
+                <h2 translate>welcome.VERSION</h2>
+                <p>{{ ctrl.version }}</p>
+
+                <h2 translate>welcome.BACKGROUND_IMAGE</h2>
+                <p><a ng-href="{{ ctrl.config.VERSION_MOUNTAIN_URL }}" target="_blank" rel="noopener noreferrer">{{ ctrl.config.VERSION_MOUNTAIN }} ({{ ctrl.config.VERSION_MOUNTAIN_HEIGHT }}m)</a></p>
+
+                <h2 translate>about.CHANGELOG</h2>
+                <p>
+                    <span translate>about.CHANGELOG_LINK_BEFORE</span>
+                    <a href="https://github.com/threema-ch/threema-web/blob/{{ ctrl.config.GIT_BRANCH }}/CHANGELOG.md"
+                       target="_blank" rel="noopener noreferrer" translate>about.CHANGELOG_LINK_TEXT</a><span translate>about.CHANGELOG_LINK_AFTER</span>
+                </p>
+            </div>
+        </md-dialog-content>
+        <md-dialog-actions layout="row">
+            <span flex></span>
+            <md-button ng-click="ctrl.cancel()"><span translate>common.CLOSE</span></md-button>
+        </md-dialog-actions>
+    </form>
+</md-dialog>
+

src/sass/components/_dialogs.scss

@@ -21,6 +21,11 @@ md-dialog {
     }
     md-dialog-content {
         line-height: 1.3em;
+
+        // If a h2 is the first child of a dialog, remove the top margin
+        .md-dialog-content>h2:first-child {
+            margin-top: 0;
+        }
     }
     .md-subheader-inner {
         padding-left: 0;

src/sass/sections/_footer.scss

@@ -22,6 +22,7 @@ footer {
 
             a {
                 color: white !important;
+                @include mouse-hand;
                 &:hover {
                     text-decoration: underline;
                 }

src/threema.d.ts

@@ -631,6 +631,9 @@ declare namespace threema {
     interface Config {
         SELF_HOSTED: boolean;
         PREV_PROTOCOL_LAST_VERSION: string | null;
+        VERSION_MOUNTAIN: string;
+        VERSION_MOUNTAIN_URL: string;
+        VERSION_MOUNTAIN_HEIGHT: number;
         GIT_BRANCH: string;
         SALTYRTC_PORT: number;
         SALTYRTC_SERVER_KEY: string | null;