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

Add date of modification on EXA Gallery
This commit is contained in:
Benoit Marty
2024-04-12 14:30:07 +02:00
committed by GitHub
4 changed files with 78 additions and 10 deletions

View File

@@ -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.

View File

@@ -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.

View File

@@ -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];
if (hasFile === 0) {
let modifiedDayTime = screenshots[screenshotIndex][languageIndex];
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();

View File

@@ -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)