Merge pull request #2693 from element-hq/feature/bma/gallery/date
Add date of modification on EXA Gallery
This commit is contained in:
@@ -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.
|
||||
|
||||
11
README.md
11
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.
|
||||
|
||||
@@ -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();
|
||||
|
||||
@@ -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)
|
||||
|
||||
Reference in New Issue
Block a user