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 = [ const successful_formatted_list = [
{ {
first: { name: "English",
name: "English", code: "en",
code: "en", name_with_percent: "English",
name_with_percent: "English", selected: true,
selected: true,
},
second: {
name: "Bahasa Indonesia",
code: "id",
name_with_percent: "Bahasa Indonesia (32%)",
selected: false,
},
}, },
{ {
first: { name: "British English",
name: "British English", code: "en-gb",
code: "en-gb", name_with_percent: "British English (99%)",
name_with_percent: "British English (99%)", selected: false,
selected: false, },
}, {
name: "Bahasa Indonesia",
code: "id",
name_with_percent: "Bahasa Indonesia (32%)",
selected: false,
}, },
]; ];
const formatted_list = get_language_list_columns("en"); 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)) { for (const element of _.range(0, formatted_list.length)) {
check_value_match(element, "first"); assert.equal(formatted_list[element].name, successful_formatted_list[element].name);
if (formatted_list[element].second) { assert.equal(formatted_list[element].code, successful_formatted_list[element].code);
check_value_match(element, "second"); 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 type Language = {
// 2-column format. code: string;
type LanguageListColumn = { name: string;
[prop in "first" | "second"]?: { name_with_percent: string;
code: string; selected: boolean;
name: string;
name_with_percent: string;
selected: boolean;
};
}; };
export function get_language_list_columns(default_language: string): LanguageListColumn[] { export function get_language_list_columns(default_language: string): Language[] {
const formatted_list: LanguageListColumn[] = []; const formatted_list: Language[] = [];
const language_len = language_list.length; for (const language of language_list) {
const firsts_end = Math.floor(language_len / 2) + (language_len % 2); let name_with_percent = language.name;
const firsts = _.range(0, firsts_end); if (language.percent_translated !== undefined) {
const seconds = _.range(firsts_end, language_len); name_with_percent = `${language.name} (${language.percent_translated}%)`;
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,
};
}
} }
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; 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}} {{#*inline "z-link"}}<a target="_blank" rel="noopener noreferrer" href="https://zulip.readthedocs.io/en/latest/translating/translating.html">{{> @partial-block}}</a>{{/inline}}
{{/tr}} {{/tr}}
</p> </p>
<table> <div class="default_language_modal_table">
{{#each language_list}} {{#each language_list}}
<tr> <div class="language_block">
<td> <a class="language" data-code="{{this.code}}" data-name="{{this.name}}">
<a class="language" data-code="{{this.first.code}}" data-name="{{this.first.name}}"> {{#if this.selected}}
{{#if this.first.selected}} <b>{{this.name_with_percent}}</b>
<b>{{this.first.name_with_percent}}</b> {{else}}
{{else}} {{this.name_with_percent}}
{{this.first.name_with_percent}} {{/if}}
{{/if}} </a>
</a> </div>
</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>
{{/each}} {{/each}}
</table> </div>