Skip to content

Add support for right-to-left writing direction #363

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
davidhealey merged 11 commits into from
Oct 23, 2021
Merged

Add support for right-to-left writing direction #363

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
e541906
Add support for right-to-left (RTL)
EmilJunker Oct 2, 2021
967b82d
Add automatic RTL detection
EmilJunker Oct 2, 2021
bbe76c3
Improve RTL support
EmilJunker Oct 3, 2021
5f9d9f0
Simplify nutriments and statisctics strings
EmilJunker Oct 11, 2021
a61c3e9
Fix diary chart nutriments list padding
EmilJunker Oct 11, 2021
98333ac
Fix diary div alignment
EmilJunker Oct 11, 2021
0df5117
Localize unit symbols
EmilJunker Oct 11, 2021
5506047
Fix units of diary entries
EmilJunker Oct 11, 2021
7b0d09e
Fix diary nutriment lists column-gap
EmilJunker Oct 11, 2021
8258420
Localize dialog buttons
EmilJunker Oct 12, 2021
15b5fa7
Fix nutrition unit spacing
EmilJunker Oct 12, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion www/activities/about/views/about.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@
<div class="navbar-bg"></div>
<div class="navbar-inner">
<div class="left">
<a href="#" class="link icon-only panel-toggle" data-panel=".panel-left">
<a href="#" class="link icon-only panel-toggle" data-panel="#app-panel">
<i class="icon material-icons">menu</i>
</a>
</div>
Expand Down
12 changes: 6 additions & 6 deletions www/activities/diary/js/diary-chart.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -91,7 +91,7 @@ app.DiaryChart = {

if (value > 0) {
let name = app.strings.nutriments[x] || x;
result.labels.push(app.Utils.tidyText(name, 50, true));
result.labels.push(app.Utils.tidyText(name, 50));
result.values.push(Math.round(value * 100) / 100);
result.colours.push(app.DiaryChart.chartColours[i]);
}
Expand All @@ -115,7 +115,7 @@ app.DiaryChart = {
}

let entry = {
name: app.Utils.tidyText(name, 50, true),
name: app.Utils.tidyText(name, 50),
value: (Math.round(percent * 100) / 100) + "%"
}
result.macros.push(entry);
Expand All @@ -128,10 +128,10 @@ app.DiaryChart = {
if (!nutrition[x]) return;

let name = app.strings.nutriments[x] || x;
let unit = nutrimentUnits[x] || "g";
let unit = app.strings["unit-symbols"][nutrimentUnits[x]] || "g";

let entry = {
name: app.Utils.tidyText(name, 50, true),
name: app.Utils.tidyText(name, 50),
value: (Math.round(nutrition[x] * 100) / 100) + " " + unit
}
result.totals.push(entry);
Expand Down Expand Up @@ -172,7 +172,7 @@ app.DiaryChart = {
// Macros
data.macros.forEach((x) => {
let li = document.createElement("li");
li.className = "item-inner";
li.className = "item-content item-inner";

let name = document.createElement("div");
name.className = "item-title";
Expand All @@ -192,7 +192,7 @@ app.DiaryChart = {
// Totals
data.totals.forEach((x) => {
let li = document.createElement("li");
li.className = "item-inner";
li.className = "item-content item-inner";

let name = document.createElement("div");
name.className = "item-title";
Expand Down
148 changes: 100 additions & 48 deletions www/activities/diary/js/diary.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -231,13 +231,13 @@ app.Diary = {
title.id = x + "-title";

let text = app.strings.nutriments[x] || x;
let t = document.createTextNode(app.Utils.tidyText(text, 50, true));
let t = document.createTextNode(app.Utils.tidyText(text, 50));
title.appendChild(t);
rows[0].appendChild(title);

// Values and goal text
let values = document.createElement("div");
values.className = "col";
values.className = "col keep-ltr";
values.id = x + "-value";

let span = document.createElement("span");
Expand All @@ -261,14 +261,14 @@ app.Diary = {
else
span.style.color = "green";

t.nodeValue += " / " + goal + " ";
t.nodeValue += " / " + goal;
}

// Unit
if (app.Settings.get("diary", "show-nutrition-units")) {
let unit = nutrimentUnits[x];
let unit = app.strings["unit-symbols"][nutrimentUnits[x]];
if (unit !== undefined)
t.nodeValue += unit;
t.nodeValue += " " + unit;
}

span.appendChild(t);
Expand Down Expand Up @@ -341,6 +341,8 @@ app.Diary = {

items.forEach((x) => {
let item = x;
delete item.unit; // Do not store item unit in the DB
delete item.archived; // Do not store archived status in the DB
item.dateTime = new Date();
item.category = category;
item.quantity = x.quantity || 1;
Expand All @@ -363,7 +365,9 @@ app.Diary = {

if (entry) {
entry.items.splice(item.index, 1, item);
delete item.index; // Array index is not stored in the db
delete item.index; // Do not store array index in the DB
delete item.unit; // Do not store item unit in the DB
delete item.archived; // Do not store archived status in the DB

dbHandler.put(entry, "diary").onsuccess = function() {
resolve();
Expand All @@ -377,20 +381,36 @@ app.Diary = {
},

deleteItem: function(item) {
let title = app.strings.dialogs.delete || "Delete";
let title = app.strings.dialogs["delete-title"] || "Delete Entry";
let text = app.strings.dialogs["confirm-delete"] || "Are you sure you want to delete this item?";

let dialog = app.f7.dialog.confirm(text, title, async () => {
let div = document.createElement("div");
div.className = "dialog-text";
div.innerText = text;

let entry = await app.Diary.getEntryFromDB();
let dialog = app.f7.dialog.create({
title: title,
content: div.outerHTML,
buttons: [{
text: app.strings.dialogs.cancel || "Cancel",
keyCodes: [27]
},
{
text: app.strings.dialogs.delete || "Delete",
keyCodes: [13],
onClick: async () => {
let entry = await app.Diary.getEntryFromDB();

if (entry !== undefined)
entry.items.splice(item.index, 1);
if (entry !== undefined)
entry.items.splice(item.index, 1);

dbHandler.put(entry, "diary").onsuccess = function(e) {
app.f7.views.main.router.refreshPage();
};
});
dbHandler.put(entry, "diary").onsuccess = function(e) {
app.f7.views.main.router.refreshPage();
};
}
}
]
}).open();
},

quickAdd: function(category) {
Expand All @@ -404,30 +424,59 @@ app.Diary = {
else
text = app.strings.nutriments["kilojoules"] || "Kilojoules";

let dialog = app.f7.dialog.prompt(text, title, async function(value) {
let entry = await app.Diary.getEntryFromDB() || app.Diary.getNewEntry();
// Create dialog content
let div = document.createElement("div");
div.className = "dialog-text";
div.innerText = text;

let field = document.createElement("div");
field.className = "dialog-input-field input";

let input = document.createElement("input");
input.className = "dialog-input";
input.id = "energy";
input.name = "energy";
input.type = "number";
field.appendChild(input);

let quantity = value;
// Open dialog
let dialog = app.f7.dialog.create({
title: title,
content: div.outerHTML + field.outerHTML,
buttons: [{
text: app.strings.dialogs.cancel || "Cancel",
keyCodes: [27]
},
{
text: app.strings.dialogs.ok || "OK",
keyCodes: [13],
onClick: async function(dialog) {
let entry = await app.Diary.getEntryFromDB() || app.Diary.getNewEntry();

if (energyUnit == units.kilojoules)
quantity = app.Utils.convertUnit(value, units.kilojoules, units.calories);
let quantity = Array.from(dialog.el.getElementsByTagName("input"))[0].value;

if (!isNaN(quantity)) {
let item = await app.Foodlist.getQuickAddItem(); // Get food item
if (energyUnit == units.kilojoules)
quantity = app.Utils.convertUnit(quantity, units.kilojoules, units.calories);

if (item !== undefined) {
item.dateTime = new Date();
item.category = category;
item.quantity = parseFloat(quantity);
if (!isNaN(quantity)) {
let item = await app.Foodlist.getQuickAddItem(); // Get food item

entry.items.push(item);
if (item !== undefined) {
item.dateTime = new Date();
item.category = category;
item.quantity = parseFloat(quantity);

dbHandler.put(entry, "diary").onsuccess = function(e) {
app.f7.views.main.router.refreshPage();
};
entry.items.push(item);

dbHandler.put(entry, "diary").onsuccess = function(e) {
app.f7.views.main.router.refreshPage();
};
}
}
}
}
}
});
]
}).open();

dialog.$el.find('input').attr('type', 'number');
},
Expand Down Expand Up @@ -471,6 +520,9 @@ app.Diary = {
}
}

let name = app.strings.statistics[x] || x;
let unitSymbol = app.strings["unit-symbols"][unit] || "";

let li = document.createElement("li");
li.className = "item-content item-input";
ul.appendChild(li);
Expand All @@ -481,8 +533,8 @@ app.Diary = {

let title = document.createElement("div");
title.className = "item-title item-label";
title.innerHTML = app.strings.statistics[x] || app.Utils.tidyText(x, 50, true);
title.innerHTML += " (" + unit + ")";
title.innerHTML = app.Utils.tidyText(name, 50);
title.innerHTML += " (" + unitSymbol + ")";
inner.appendChild(title);

let inputWrap = document.createElement("div");
Expand All @@ -504,11 +556,11 @@ app.Diary = {
title: title,
content: div.outerHTML,
buttons: [{
text: "Cancel",
text: app.strings.dialogs.cancel || "Cancel",
keyCodes: [27]
},
{
text: "Ok",
text: app.strings.dialogs.ok || "OK",
keyCodes: [13],
onClick: function(dialog, e) {
app.Diary.saveStats(dialog, e);
Expand All @@ -520,7 +572,7 @@ app.Diary = {

saveStats: async function(dialog) {
let entry = await app.Diary.getEntryFromDB() || app.Diary.getNewEntry();
let inputs = Array.from(dialog.el.getElementsByTagName('input'));
let inputs = Array.from(dialog.el.getElementsByTagName("input"));
let units = app.Settings.getField("units");

let stats = {};
Expand Down Expand Up @@ -556,7 +608,7 @@ app.Diary = {
showCategoryNutriments: function(category, nutrition) {
const mealNames = app.Settings.get("diary", "meal-names");
const mealName = mealNames[category];
const title = app.strings.diary["default-meals"][mealName.toLowerCase()] || mealName;
const dialogTitle = app.strings.diary["default-meals"][mealName.toLowerCase()] || mealName;

const nutriments = app.Settings.get("nutriments", "order") || app.nutriments;
const visible = app.Settings.getField("nutrimentVisibility");
Expand All @@ -581,8 +633,8 @@ app.Diary = {
}

// Get name, unit and value
let nutriment = app.strings.nutriments[x] || x;
let unit = nutrimentUnits[x] || "g";
let name = app.strings.nutriments[x] || x;
let unit = app.strings["unit-symbols"][nutrimentUnits[x]] || "g";
let value = 0;

if (nutrition !== undefined && nutrition[x] !== undefined) {
Expand All @@ -597,14 +649,14 @@ app.Diary = {
// List item
let li = document.createElement("li");
let div = document.createElement("div");
div.className = "item-inner";
div.className = "item-content item-inner";

// Name
let name = document.createElement("div");
name.className = "item-title";
let text = app.Utils.tidyText(nutriment, 50, true);
let title = document.createElement("div");
title.className = "item-title";
let text = app.Utils.tidyText(name, 50);
let t = document.createTextNode(text);
name.appendChild(t);
title.appendChild(t);

// Value and Unit
let content = document.createElement("div");
Expand All @@ -613,18 +665,18 @@ app.Diary = {
t = document.createTextNode(text);
content.appendChild(t);

div.appendChild(name);
div.appendChild(title);
div.appendChild(content);
li.appendChild(div);
ul.appendChild(li);
}

if (ul.childElementCount > 0) {
let dialog = app.f7.dialog.create({
title: title,
title: dialogTitle,
content: div.outerHTML,
buttons: [{
text: "Ok",
text: app.strings.dialogs.ok || "OK",
keyCodes: [13]
}
]
Expand Down
7 changes: 4 additions & 3 deletions www/activities/diary/js/group.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -95,7 +95,7 @@ app.Group = {

//Add button
let left = document.createElement("div");
left.className = "col-10 add-button";
left.className = "add-button";
row.appendChild(left);

let a = document.createElement("a");
Expand All @@ -119,14 +119,15 @@ app.Group = {
const energyName = Object.keys(app.nutrimentUnits).find(key => app.nutrimentUnits[key] === energyUnit);

let right = document.createElement("div");
right.className = "col-25 energy link icon-only";
right.className = "margin-horizontal energy link icon-only";
let value = nutrition[energyName] || 0;
let energyUnitSymbol = app.strings["unit-symbols"][energyUnit] || "";

right.addEventListener("click", function(e) {
app.Diary.showCategoryNutriments(id, nutrition);
});

right.innerHTML = "<strong>" + value.toFixed(0) + " " + energyUnit + "</strong>";
right.innerHTML = "<strong>" + value.toFixed(0) + " " + energyUnitSymbol + "</strong>";
row.appendChild(right);
},

Expand Down
10 changes: 5 additions & 5 deletions www/activities/diary/views/diary-chart.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,15 +31,15 @@
</div>

<div class="page-content">
<div style="padding-top:10%;">
<div style="padding-top: 10%;">
<canvas id="chart" width="200" height="200"></canvas>
</div>
<div style="padding-right:40px;">
<ul class="list" id="macros-list">
<div style="padding-top: 1%;">
<ul class="list" id="macros-list" style="padding: 0 10%;">
</ul>
</div>
<div style="padding-right:40px;padding-top:5%;">
<ul class="list" id="totals-list">
<div style="padding-top: 5%;">
<ul class="list" id="totals-list" style="padding: 0 10%;">
</ul>
</div>
</div>
Expand Down
2 changes: 1 addition & 1 deletion www/activities/diary/views/diary.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@
<div class="navbar-bg"></div>
<div class="navbar-inner">
<div class="left">
<a href="#" class="link icon-only panel-toggle" data-panel=".panel-left">
<a href="#" class="link icon-only panel-toggle" data-panel="#app-panel">
<i class="icon material-icons">menu</i>
</a>
</div>
Expand Down
Loading