Skip to content

Commit

Permalink
Merge pull request #24 from sillsdev/tweaks
Browse files Browse the repository at this point in the history 
tweaks
  • Loading branch information
@hatton
hatton authored Oct 17, 2024
2 parents eebec93 + 2b4a92e commit feabefe
Show file tree
Hide file tree
Showing 5 changed files with 48 additions and 30 deletions.
41 changes: 26 additions & 15 deletions components/language-chooser/common/find-language/langtagProcessing.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,15 +38,24 @@ function getIso639_3CodeDetails() {
}

// turn "Uzbek, Northern" into "Northern Uzbek"
function uncomma(str: string) {
if (!str) {
return "";
function uncomma(str: string | Set<string>) {
if (!str || typeof str === "string") {
if (!str) {
return "";
}
const parts = str.split(COMMA_SEPARATOR);
if (parts.length === 1) {
return str;
}
return parts[1] + " " + parts[0];
}
const parts = str.split(COMMA_SEPARATOR);
if (parts.length === 1) {
return str;
if (typeof str === "object") {
const newSet = new Set<string>();
str.forEach((item: string) => {
newSet.add(uncomma(item) as string);
});
return newSet;
}
return parts[1] + " " + parts[0];
}

interface ILanguageInternal {
Expand Down Expand Up @@ -157,10 +166,10 @@ function parseLangtagsJson() {
);
}
}
if (iso639_3Codes.size > 2) {
// TODO future work handle these cases when we get language type/status data and deal with macrolanguages
console.log("multiple iso639_3 codes", entry.iso639_3, iso639_3Codes);
}
// if (iso639_3Codes.size > 2) {
// TODO future work handle these cases when we get language type/status data and deal with macrolanguages
// console.log("multiple iso639_3 codes", entry.iso639_3, iso639_3Codes);
// }
}
}

Expand All @@ -170,21 +179,23 @@ function parseLangtagsJson() {
// Don't repeat the autonym and exonym in the names list
langData.names.delete(langData.autonym);
langData.names.delete(langData.exonym);
langData.names.forEach(uncomma);
langData.regionNames.forEach(uncomma);
return {
autonym: uncomma(langData.autonym),
exonym: uncomma(langData.exonym),
iso639_3_code: langData.iso639_3_code,
languageSubtag: langData.languageSubtag,
regionNames: [...langData.regionNames].join(COMMA_SEPARATOR),
regionNames: [...(uncomma(langData.regionNames) as Set<string>)]
.filter((regionName) => !!regionName)
.join(COMMA_SEPARATOR),
scripts: [...new Set([...langData.scripts])].map((scriptCode) => {
return {
code: scriptCode,
name: uncomma(scriptNames[scriptCode]),
} as IScript;
}),
names: [...langData.names],
names: [...(uncomma(langData.names) as Set<string>)].filter(
(name) => !!name
),
alternativeTags: [...langData.alternativeTags],
} as ILanguage;
}
Expand Down
2 changes: 1 addition & 1 deletion components/language-chooser/common/find-language/language-data/languageData.json
View file

Large diffs are not rendered by default.

3 changes: 3 additions & 0 deletions components/language-chooser/react/language-chooser-react-mui/src/CustomizeLanguageDialog.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -205,6 +205,9 @@ export const CustomizeLanguageDialog: React.FunctionComponent<{
onChange={(event) => {
setDialogSelectedDialect(event.target.value);
}}
inputProps={{
spellCheck: false,
}}
/>
</div>
)}
Expand Down
5 changes: 4 additions & 1 deletion components/language-chooser/react/language-chooser-react-mui/src/LanguageCard.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,8 @@ import { memo } from "react";
import { PartiallyBoldedTypography } from "./PartiallyBoldedTypography";
import { COLORS } from "./colors";

const COMMA_SEPARATOR = ", ";

export const LanguageCard: React.FunctionComponent<
{ languageCardData: ILanguage } & OptionCardPropsWithoutColors
> = memo(({ languageCardData, ...partialOptionCardProps }) => {
Expand Down Expand Up @@ -53,6 +55,7 @@ export const LanguageCard: React.FunctionComponent<
variant="body2"
css={css`
flex-grow: 0;
margin-bottom: 1px; // for visual alignment
color: ${COLORS.greys[3]};
`}
>
Expand Down Expand Up @@ -83,7 +86,7 @@ export const LanguageCard: React.FunctionComponent<
color: ${COLORS.greys[3]};
`}
>
{languageCardData.names.join(", ")}
{languageCardData.names.join(COMMA_SEPARATOR)}
</PartiallyBoldedTypography>
)}
</OptionCard>
Expand Down
27 changes: 14 additions & 13 deletions components/language-chooser/react/language-chooser-react-mui/src/LanguageChooser.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -117,7 +117,7 @@ export const LanguageChooser: React.FunctionComponent<{
},
},
});
const LANG_CARD_MIN_HEIGHT = "100px";
const LANG_CARD_MIN_HEIGHT = "90px"; // The height of typical card - 1 line of alternate names and 1 line of regions

return (
<ThemeProvider theme={theme}>
Expand Down Expand Up @@ -178,7 +178,7 @@ export const LanguageChooser: React.FunctionComponent<{
position: relative;
display: flex; // to make the language list overflow scroll work
flex-direction: column;
padding: 10px 20px;
padding: 10px 10px 10px 15px;
background-color: ${COLORS.greys[0]};
`}
>
Expand All @@ -200,12 +200,15 @@ export const LanguageChooser: React.FunctionComponent<{
inputRef={(el) => (searchInputRef = el)}
css={css`
background-color: white;
margin-right: 0;
margin-bottom: 5px;
margin-bottom: 10px;
width: 100%;
min-width: 100px;
max-width: 436px;
padding-left: 10px;
padding-right: 10px;
`}
inputProps={{
spellCheck: false,
}}
size="small"
startAdornment={
<InputAdornment
Expand All @@ -222,7 +225,7 @@ export const LanguageChooser: React.FunctionComponent<{
<IconButton
onClick={clearSearchText}
css={css`
margin-right: 0;
padding-right: 0px;
`}
>
<ClearIcon />
Expand All @@ -243,10 +246,6 @@ export const LanguageChooser: React.FunctionComponent<{
scrollbar-width: thick;
flex-basis: 0;
flex-grow: 1;
// to make the scrollbar appear at the far right of the "left-pane", on top of the padding
margin-right: -20px;
padding-right: 20px;
`}
>
{lp.languageData.map((language, index) => {
Expand All @@ -261,10 +260,9 @@ export const LanguageChooser: React.FunctionComponent<{
>
<LanguageCard
css={css`
max-width: 406px;
min-height: ${LANG_CARD_MIN_HEIGHT};
flex-direction: column;
margin: 5px 0px;
margin: 5px 10px 5px 0px;
`}
languageCardData={language}
isSelected={codeMatches(
Expand Down Expand Up @@ -341,7 +339,7 @@ export const LanguageChooser: React.FunctionComponent<{
flex-direction: column;
justify-content: flex-end;
background-color: white;
padding: 10px 20px;
padding: 10px 15px 10px 20px;
`}
>
{lp.selectedLanguage && (
Expand All @@ -358,6 +356,9 @@ export const LanguageChooser: React.FunctionComponent<{
</label>
<OutlinedInput
type="text"
inputProps={{
spellCheck: false,
}}
css={css`
background-color: white;
margin-right: 16px;
Expand Down

0 comments on commit feabefe

Please sign in to comment.