Merge pull request #2693 from element-hq/feature/bma/gallery/date

Add date of modification on EXA Gallery

CONTRIBUTING.md

@@ -9,6 +9,7 @@
 * [Strings](#strings)
   * [I want to add new strings to the project](#i-want-to-add-new-strings-to-the-project)
   * [I want to help translating Element](#i-want-to-help-translating-element)
+  * [Element X Android Gallery](#element-x-android-gallery)
 * [I want to submit a PR to fix an issue](#i-want-to-submit-a-pr-to-fix-an-issue)
   * [Kotlin](#kotlin)
   * [Changelog](#changelog)
@@ -69,6 +70,14 @@ To help translating, please go to [https://localazy.com/p/element](https://local
 
 More information can be found [in this README.md](./tools/localazy/README.md).
 
+Once a language is sufficiently translated, it will be added to the app. The core team will decide when a language is sufficiently translated.
+
+### Element X Android Gallery
+
+Once added to Localazy, translations can be checked screen per screen using our tool Element X Android Gallery, available at https://element-hq.github.io/element-x-android/.
+
+Localazy syncs occur every Monday and the screenshots on this page are generated every Tuesday, so you'll have to wait to see your change appearing on Element X Android Gallery.
+
 ## I want to submit a PR to fix an issue
 
 Please have a look in the [dedicated documentation](./docs/pull_request.md) about pull request.

README.md

@@ -19,6 +19,7 @@ Learn more about why we are building Element X in our blog post: [https://elemen
 <!--- TOC -->
 
 * [Screenshots](#screenshots)
+* [Translations](#translations)
 * [Rust SDK](#rust-sdk)
 * [Status](#status)
 * [Contributing](#contributing)
@@ -50,6 +51,16 @@ adb shell am broadcast -a com.android.systemui.demo -e command exit
 |-|-|-|-|
 |<img src=./docs/images-lfs/screen_1_dark.png width=280 />|<img src=./docs/images-lfs/screen_2_dark.png width=280 />|<img src=./docs/images-lfs/screen_3_dark.png width=280 />|<img src=./docs/images-lfs/screen_4_dark.png width=280 />|
 
+## Translations
+
+Element X Android supports many languages. You can help us to translate the app in your language by joining our [Localazy project](https://localazy.com/p/element). You can also help us to improve the existing translations.
+
+Note that for now, we keep control on the French and German translations.
+
+Translations can be checked screen per screen using our tool Element X Android Gallery, available at https://element-hq.github.io/element-x-android/. Note that this page is updated every Tuesday. 
+
+More instructions about translating the application can be found at [CONTRIBUTING.md](CONTRIBUTING.md#strings).
+
 ## Rust SDK
 
 Element X leverages the [Matrix Rust SDK](https://github.com/matrix-org/matrix-rust-sdk) through an FFI layer that the final client can directly import and use.

screenshots/html/script.js

@@ -18,6 +18,7 @@ import { screenshots } from './data.js';
 const URL_PARAM_LANGUAGES = "l";
 const URL_PARAM_IMAGE_WIDTH = "w";
 const URL_PARAM_ALL_SCREENSHOTS = "a";
+const URL_PARAM_IF_MODIFIED_AFTER = "d";
 
 // Get the base url of the current page
 const baseUrl = window.location.href.split('/').slice(0, -1).join('/');
@@ -53,6 +54,8 @@ if (width) {
 }
 // Read showAllScreenshots from the url params
 let showAllScreenshots = urlParams.get(URL_PARAM_ALL_SCREENSHOTS) === 1;
+// Read the minimum date of modification from the url params
+let minModifiedDayTime = urlParams.get(URL_PARAM_IF_MODIFIED_AFTER);
 
 function updatePageUrl() {
     // Update the URL displayed in the browser without loading again the page
@@ -74,6 +77,11 @@ function updatePageUrl() {
     } else {
         queryParams.delete(URL_PARAM_ALL_SCREENSHOTS);
     }
+    if (minModifiedDayTime > 0) {
+        queryParams.set(URL_PARAM_IF_MODIFIED_AFTER, minModifiedDayTime);
+    } else {
+        queryParams.delete(URL_PARAM_IF_MODIFIED_AFTER);
+    }
     // Replace the current URL with the new one, including the fragment
     history.replaceState(null, '', `${window.location.pathname}?${queryParams}${window.location.hash}`);
 }
@@ -141,6 +149,30 @@ function addForm() {
   };
   label2.appendChild(input2);
   form.appendChild(label2);
+  // Add a date picker to input the minimum date of modification
+  const label3 = document.createElement('label');
+  label3.textContent = 'If modified since:';
+  form.appendChild(label3);
+  const dateInput = document.createElement('input');
+  dateInput.type = 'date';
+  if (minModifiedDayTime > 0) {
+    dateInput.value = new Date(minModifiedDayTime * 86400000).toISOString().split('T')[0];
+  }
+  dateInput.onchange = (e) => {
+      if (e.target.value === "") {
+          minModifiedDayTime = 0;
+      } else {
+          minModifiedDayTime = new Date(e.target.value).getTime() / 86400000;
+      }
+      updatePageUrl();
+      addTable();
+  };
+  form.appendChild(dateInput);
+  // Add a span with id result to display the number of lines
+  const lines = document.createElement('span');
+  lines.id = 'lines';
+  lines.textContent = "...";
+  form.appendChild(lines);
   document.getElementById('form_container').appendChild(form);
 }
 
@@ -159,17 +191,27 @@ function createMissingImageElement() {
     return text;
 }
 
-function createImageElement(fullFile) {
+function convertToHumanReadableDate(modifiedDayTime) {
+    var date = new Date(modifiedDayTime * 86400000);
+    return date.toLocaleDateString();
+}
+
+function createImageElement(fullFile, modifiedDayTime) {
     const img = document.createElement('img');
     img.className = "screenshot";
     img.src = `${baseUrl}/${fullFile}`;
-    img.title = fullFile;
+    if(modifiedDayTime > 0) {
+        img.title = fullFile + "\n\nModified on " + convertToHumanReadableDate(modifiedDayTime);
+    } else {
+        img.title = fullFile;
+    }
     img.alt = "Missing image";
     img.width = imageWidth;
     return img;
 }
 
 function addTable() {
+  var linesCounter = 0;
   // Remove any previous table
   document.getElementById('screenshots_container').innerHTML = '';
   // screenshots contains a table of screenshots, lets convert to an html table
@@ -209,30 +251,31 @@ function addTable() {
       const td = document.createElement('td');
       if (languageIndex == 0) {
         // English file
-        td.appendChild(createImageElement(`${englishBasePath}/${englishFile}.png`));
+        td.appendChild(createImageElement(`${englishBasePath}/${englishFile}.png`, 0));
       } else if (languageIndex == 1) {
         // Dark English file
         if (screenshots[screenshotIndex][1].length > 0) {
           hasTranslatedFiles = true;
-          td.appendChild(createImageElement(`${englishBasePath}/${screenshots[screenshotIndex][1]}.png`));
+          td.appendChild(createImageElement(`${englishBasePath}/${screenshots[screenshotIndex][1]}.png`, 0));
         } else {
           td.appendChild(createMissingImageElement());
         }
       } else {
-        let hasFile = screenshots[screenshotIndex][languageIndex];
+        let modifiedDayTime = screenshots[screenshotIndex][languageIndex];
-        if (hasFile === 0) {
+        if (modifiedDayTime === 0) {
           td.appendChild(createMissingImageElement());
-        } else {
+        } else if(modifiedDayTime >= minModifiedDayTime) {
           hasTranslatedFiles = true;
           // Foreign file is the same as the english file, replacing the language
           const foreignFile = englishFile.replace("en]", `${dataLanguages[languageIndex]}]`).replace("_S_", "_T_")
           const fullForeignFile = `${dataLanguages[languageIndex]}/${foreignFile}.png`;
-          td.appendChild(createImageElement(fullForeignFile));
+          td.appendChild(createImageElement(fullForeignFile, modifiedDayTime));
         }
       }
       tr.appendChild(td);
     }
     if (showAllScreenshots || hasTranslatedFiles) {
+      linesCounter++;
       // Add a header for row, if different from previous
       if (niceName != currentHeaderValue) {
         currentHeaderValue = niceName;
@@ -255,6 +298,8 @@ function addTable() {
 
   // Add the table to the div with id screenshots_container
   document.getElementById('screenshots_container').appendChild(table);
+  // Update the number of lines
+  document.getElementById('lines').textContent = `${linesCounter} lines`;
 }
 
 addForm();

tools/test/generateAllScreenshots.py

@@ -103,7 +103,7 @@ def detectRecordedLanguages():
 def computeDarkFileName(lightFileName):
     if "-Day_0" in lightFileName:
         return lightFileName.replace("-Day_0", "-Night_1")
-    match = re.match("(.*)-Day-(\d+)_(\d+)(.*)", lightFileName, flags=re.ASCII)
+    match = re.match("(.*)-Day-(\\d+)_(\\d+)(.*)", lightFileName, flags=re.ASCII)
     if match:
         return match.group(1) + "-Night-" + match.group(2) + "_" + str((int(match.group(3)) + 1)) + match.group(4)
     return ""
@@ -132,7 +132,10 @@ def generateJavascriptFile():
             simpleFile = file[:3] + "T" + file[4:-7] + l + file[-5:-4]
             translatedFile = "./screenshots/" + l + "/" + simpleFile + ".png"
             if os.path.exists(translatedFile):
-                dataForFile.append(1)
+                # Get the last modified date of the file in seconds and round to days
+                date = os.popen("git log -1 --format=%ct -- \"" + translatedFile + "\"").read().strip()
+                dateDay = int(date) // 86400
+                dataForFile.append(dateDay)
             else:
                 dataForFile.append(0)
         data.append(dataForFile)