Merge pull request #2 from kshetline/development

Localization, collapsible control panel.

Author: kshetline

angular.json

@@ -16,10 +16,22 @@
       "root": "",
       "sourceRoot": "src",
       "prefix": "app",
+      "i18n": {
+        "sourceLocale": "en-US",
+        "locales": {
+          "cs": {
+            "translation": "src/locales/messages.cs.xlf"
+          },
+          "es": {
+            "translation": "src/locales/messages.es.xlf"
+          }
+        }
+      },
       "architect": {
         "build": {
           "builder": "@angular-devkit/build-angular:browser",
           "options": {
+            "localize": true,
             "outputPath": "dist/prague-clock",
             "index": "src/index.html",
             "main": "src/main.ts",
@@ -68,6 +80,15 @@
               "extractLicenses": false,
               "sourceMap": true,
               "namedChunks": true
+            },
+            "cs": {
+              "localize": ["cs"]
+            },
+            "es": {
+              "localize": ["es"]
+            },
+            "en-US": {
+              "localize": ["en-US"]
             }
           },
           "defaultConfiguration": "production"
@@ -80,6 +101,15 @@
             },
             "development": {
               "browserTarget": "prague-clock:build:development"
+            },
+            "cs": {
+              "browserTarget": "prague-clock:build:cs"
+            },
+            "es": {
+              "browserTarget": "prague-clock:build:es"
+            },
+            "en-US": {
+              "browserTarget": "prague-clock:build:en-US"
             }
           },
           "defaultConfiguration": "development"

messages.xlf

@@ -1,9 +1,11 @@
 {
   "name": "prague-clock",
-  "version": "1.0.1",
+  "version": "1.1.0",
   "scripts": {
     "ng": "ng",
-    "start": "ng serve",
+    "start": "ng serve --configuration=en-US",
+    "start:cs": "ng serve --configuration=cs",
+    "start:es": "ng serve --configuration=es",
     "build": "ng build --base-href /orloj/",
     "watch": "ng build --watch --configuration development",
     "test": "ng test",
@@ -45,6 +47,7 @@
     "@angular-eslint/template-parser": "^13.1.0",
     "@angular/cli": "~13.2.5",
     "@angular/compiler-cli": "~13.2.0",
+    "@angular/localize": "^13.2.7",
     "@types/jasmine": "~3.10.0",
     "@types/node": "^12.11.1",
     "@types/three": "^0.138.0",

package-lock.json

@@ -1,7 +1,13 @@
-<div class="controls tbw-dark-mode" [class.short]="lastHeight <= 420 && lastHeight > 380" [class.extra-short]="lastHeight <= 380">
-  <div class="place-name-group">
+<div class="controls tbw-dark-mode"
+    [class.short]="lastHeight <= 420 && lastHeight > 380"
+    [class.extra-short]="lastHeight <= 380"
+    [class.collapsed]="collapsed">
+  <p-menu #menu [popup]="true" [model]="menuItems" appendTo="body"></p-menu>
+  <i class="pi pi-bars" (click)="menu.toggle($event)" [class.collapsed]="collapsed"></i>
+  <i class="pi pi-chevron-down" (click)="collapsed = !collapsed" [class.collapsed]="collapsed"></i>
+  <div class="place-name-group" [class.collapsed]="collapsed">
     <span *ngIf="!canSaveName && placeName" class="place-name">{{placeName}}</span>
-    <span *ngIf="!canSaveName && !placeName" class="no-name">No name provided</span>
+    <span i18n *ngIf="!canSaveName && !placeName" class="no-name">No name provided</span>
     <input *ngIf="canSaveName" id="name-input" class="name-input" [value]="inputName"
         (input)="inputChanged($event)" (keydown.enter)="saveName()">
     <span *ngIf="canSaveName" class="height-holder">&nbsp;</span>
@@ -10,16 +16,15 @@
         [class.icon-disabled]="inputLength === 0" (click)="saveName()"></i>
     <i *ngIf="canSaveName" class="pi pi-undo" (click)="cancelEdit()"></i>
   </div>
-  <p-menu #menu [popup]="true" [model]="menuItems" appendTo="body"></p-menu>
-  <i class="pi pi-bars" (click)="menu.toggle($event)"></i>
   <div class="time-row">
     <i class="pi pi-caret-left" (click)="skipToEvent(true)"></i>
     <tbw-time-editor
       [max]="MAX_YEAR + '-12-31'"
       [min]="MIN_YEAR + '-01-01'"
       wideSpinner
       (click)="checkIfTimeIsEditable()"
-      pTooltip='Uncheck on "Track current time" to modify the time'
+      i18n-pTooltip
+      pTooltip='Uncheck "Track current time" to modify the time'
       tooltipPosition="bottom"
       [tooltipDisabled]="!trackTime"
       [options]="isoFormat ? ISO_OPTS : LOCAL_OPTS"
@@ -30,25 +35,28 @@
     <i class="pi pi-caret-right" (click)="skipToEvent()"></i>
   </div>
   <div class="button-row">
-    <p-checkbox [(ngModel)]="isoFormat" [binary]="true" label="ISO time format"></p-checkbox>
-    <p-checkbox [(ngModel)]="disableDst" [binary]="true" label="Disable DST on clock" (onChange)="updateTime(true)"></p-checkbox>
+    <p-checkbox [(ngModel)]="isoFormat" [binary]="true"
+        i18n-label label="ISO time format"></p-checkbox>
+    <p-checkbox [(ngModel)]="disableDst" [binary]="true"
+        i18n-label label="Disable DST on clock" (onChange)="updateTime(true)"></p-checkbox>
   </div>
   <tze-zone-selector [(ngModel)]="zone" [recents]="recentLocations" (clearItem)='clearItem($event)' (clearRecents)="clearRecents()"
       [autofocus]="false" [disabled]="canSaveName" (location)="changeLocation($event)"></tze-zone-selector>
   <div class="button-row time-row">
-    <p-checkbox [(ngModel)]="trackTime" [binary]="true" label="Track current time"></p-checkbox><span>&nbsp;&nbsp;</span>
-    <button type="button" pButton (click)="setNow()" [disabled]="trackTime">Now</button>
+    <p-checkbox [(ngModel)]="trackTime" [binary]="true"
+        i18n-label label="Track current time"></p-checkbox><span>&nbsp;&nbsp;</span>
+    <button i18n type="button" pButton (click)="setNow()" [disabled]="trackTime">Now</button>
   </div>
   <div class="button-row">
-    <tbw-angle-editor wideSpinner [(ngModel)]="latitude" [disableMobileKeyboard]="suppressOsKeyboard"
-        [disabled]="canSaveName" [options]="{ angleStyle: DD, compass: true, decimalPrecision: 1 }"></tbw-angle-editor>
-    <tbw-angle-editor wideSpinner [(ngModel)]="longitude" [disableMobileKeyboard]="suppressOsKeyboard"
-        [disabled]="canSaveName" [options]="{ angleStyle: DDD, compass: true, decimalPrecision: 1 }"></tbw-angle-editor>
+    <tbw-angle-editor wideSpinner [(ngModel)]="latitude" [disableMobileKeyboard]="suppressOsKeyboard" [disabled]="canSaveName"
+        [options]="{ angleStyle: DD, compass: SOUTH_NORTH, decimalPrecision: 1, locale: specificLocale }"></tbw-angle-editor>
+    <tbw-angle-editor wideSpinner [(ngModel)]="longitude" [disableMobileKeyboard]="suppressOsKeyboard" [disabled]="canSaveName"
+        [options]="{ angleStyle: DDD, compass: WEST_EAST, decimalPrecision: 1, locale: specificLocale }"></tbw-angle-editor>
   </div>
 </div>
 
 <div id="svg-wrapper">
-  <svg viewBox="0 0 600 600" xml:space="preserve">
+  <svg viewBox="0 0 600 600" xml:space="preserve" [class.controls-collapsed]="collapsed">
     <defs>
       <filter id="filterHand" x="0" y="0" width="200%" height="200%">
         <feOffset result="offOut" in="SourceAlpha" dx="8" dy="8"/>
@@ -344,7 +352,7 @@
        consistent across browsers, with Safari and Chrome on Android having particular problems. -->
   <div id="globe-host"></div>
 
-  <svg viewBox="0 0 600 600" xml:space="preserve" class="svg-overlay">
+  <svg viewBox="0 0 600 600" xml:space="preserve" class="svg-overlay" [class.controls-collapsed]="collapsed">
     <g transform="translate(300, 300)" class="content">
       <g id="frontPart">
         <g [attr.filter]="svgFilteringOn ? 'url(#filterHand)' : null">
@@ -609,7 +617,7 @@
   </svg>
 </div>
 
-<div id="graphics-credit">Original SVG clock graphics by Jan Tošovský</div>
+<div i18n id="graphics-credit">Original SVG clock graphics by Jan Tošovský</div>
 
 <p-toast position="center"></p-toast>
-<p-confirmDialog header="Change time"></p-confirmDialog>
+<p-confirmDialog i18n-header header="Change time"></p-confirmDialog>