paulmataruso/zulip
1
0
Fork 0
mirror of https://github.com/zulip/zulip.git synced 2025-11-09 08:26:11 +00:00
Code Issues Packages Projects Releases Wiki Activity

default_language_modal: Add more space around languages displayed.

Browse Source 
We use 3 columns on wide screens and come down to 1 column on
narrow screens to ensure that the languages are properly
displayed.
This commit is contained in:
Aman Agrawal
2022-06-06 13:38:17 +00:00
committed by Tim Abbott
parent 084b054827
commit df6ad8154a
4 changed files with 70 additions and 114 deletions
Download Patch File Download Diff File Expand all files Collapse all files

62
frontend_tests/node_tests/i18n.js
View File

@@ -146,54 +146,34 @@ run_test("language_list", () => {
const successful_formatted_list = [
{
first: {
name: "English",
code: "en",
name_with_percent: "English",
selected: true,
},
second: {
name: "Bahasa Indonesia",
code: "id",
name_with_percent: "Bahasa Indonesia (32%)",
selected: false,
},
name: "English",
code: "en",
name_with_percent: "English",
selected: true,
},
{
first: {
name: "British English",
code: "en-gb",
name_with_percent: "British English (99%)",
selected: false,
},
name: "British English",
code: "en-gb",
name_with_percent: "British English (99%)",
selected: false,
},
{
name: "Bahasa Indonesia",
code: "id",
name_with_percent: "Bahasa Indonesia (32%)",
selected: false,
},
];
const formatted_list = get_language_list_columns("en");
function check_value_match(element, position) {
assert.equal(
formatted_list[element][position].name,
successful_formatted_list[element][position].name,
);
assert.equal(
formatted_list[element][position].code,
successful_formatted_list[element][position].code,
);
assert.equal(
formatted_list[element][position].name_with_percent,
successful_formatted_list[element][position].name_with_percent,
);
assert.equal(
formatted_list[element][position].selected,
successful_formatted_list[element][position].selected,
);
}
for (const element of _.range(0, formatted_list.length)) {
check_value_match(element, "first");
if (formatted_list[element].second) {
check_value_match(element, "second");
}
assert.equal(formatted_list[element].name, successful_formatted_list[element].name);
assert.equal(formatted_list[element].code, successful_formatted_list[element].code);
assert.equal(
formatted_list[element].name_with_percent,
successful_formatted_list[element].name_with_percent,
);
assert.equal(formatted_list[element].selected, successful_formatted_list[element].selected);
}
});

73
static/js/i18n.ts
View File

@@ -78,61 +78,32 @@ export function initialize(language_params: {language_list: typeof language_list
}
}
// This formats language data for the language selection modal in a
// 2-column format.
type LanguageListColumn = {
[prop in "first" | "second"]?: {
code: string;
name: string;
name_with_percent: string;
selected: boolean;
};
type Language = {
code: string;
name: string;
name_with_percent: string;
selected: boolean;
};
export function get_language_list_columns(default_language: string): LanguageListColumn[] {
const formatted_list: LanguageListColumn[] = [];
const language_len = language_list.length;
const firsts_end = Math.floor(language_len / 2) + (language_len % 2);
const firsts = _.range(0, firsts_end);
const seconds = _.range(firsts_end, language_len);
const longest_zip: [number, number][] = [];
// Create a zip (itertools.zip_longest in python)
for (const value of firsts) {
longest_zip.push([value, seconds[value]]);
}
for (const row of longest_zip) {
const item: LanguageListColumn = {};
const zip_row = [
["first", row[0]],
["second", row[1]],
] as const;
for (const zip_value of zip_row) {
if (zip_value[1] !== undefined) {
const lang = language_list[zip_value[1]];
const name = lang.name;
let name_with_percent = name;
if (lang.percent_translated !== undefined) {
name_with_percent = `${name} (${lang.percent_translated}%)`;
}
let selected = false;
if (default_language === lang.code || default_language === lang.locale) {
selected = true;
}
item[zip_value[0]] = {
name,
code: lang.code,
name_with_percent,
selected,
};
}
export function get_language_list_columns(default_language: string): Language[] {
const formatted_list: Language[] = [];
for (const language of language_list) {
let name_with_percent = language.name;
if (language.percent_translated !== undefined) {
name_with_percent = `${language.name} (${language.percent_translated}%)`;
}
formatted_list.push(item);
let selected = false;
if (default_language === language.code || default_language === language.locale) {
selected = true;
}
formatted_list.push({
code: language.code,
name: language.name,
name_with_percent,
selected,
});
}
return formatted_list;
}

16
static/styles/popovers.css
View File

@@ -672,3 +672,19 @@ ul {
}
}
}
#language_selection_modal {
width: min(750px, 70vw);
}
.default_language_modal_table {
column-count: 3;
@media (width < $md_min) {
column-count: 2;
}
@media (width < $sm_min) {
column-count: 1;
}
}

33
static/templates/default_language_modal.hbs
View File

@@ -12,27 +12,16 @@
{{#*inline "z-link"}}<a target="_blank" rel="noopener noreferrer" href="https://zulip.readthedocs.io/en/latest/translating/translating.html">{{> @partial-block}}</a>{{/inline}}
{{/tr}}
</p>
<table>
<div class="default_language_modal_table">
{{#each language_list}}
<tr>
<td>
<a class="language" data-code="{{this.first.code}}" data-name="{{this.first.name}}">
{{#if this.first.selected}}
<b>{{this.first.name_with_percent}}</b>
{{else}}
{{this.first.name_with_percent}}
{{/if}}
</a>
</td>
<td>
<a class="language" data-code="{{this.second.code}}" data-name="{{this.second.name}}">
{{#if this.second.selected}}
<b>{{this.second.name_with_percent}}</b>
{{else}}
{{this.second.name_with_percent}}
{{/if}}
</a>
</td>
</tr>
<div class="language_block">
<a class="language" data-code="{{this.code}}" data-name="{{this.name}}">
{{#if this.selected}}
<b>{{this.name_with_percent}}</b>
{{else}}
{{this.name_with_percent}}
{{/if}}
</a>
</div>
{{/each}}
</table>
</div>