Collapsed menu options under an "Open" dropdown.

The dropdown is only shown when a chart is displayed.
This commit is contained in:
Przemek Wiech
2020-04-03 18:33:07 +02:00
parent c9d5dac0f2
commit 9bbc8e1899
3 changed files with 43 additions and 19 deletions

View File

@@ -37,7 +37,7 @@ export function Intro() {
<FormattedMessage
id="intro.instructions"
defaultMessage={
'Use the LOAD FROM URL or LOAD FROM FILE buttons above to load' +
'Use the OPEN FILE or LOAD FROM URL buttons above to load' +
' a GEDCOM file. You can export a GEDCOM file from most of the' +
' existing genealogy programs and web sites.'
}

View File

@@ -506,6 +506,12 @@ export class TopBar extends React.Component<
if (!this.props.standalone) {
return null;
}
const openFileItem = (
<>
<Icon name="folder open" />
<FormattedMessage id="menu.open_file" defaultMessage="Open file" />
</>
);
const loadUrlItem = (
<>
<Icon name="cloud download" />
@@ -515,15 +521,6 @@ export class TopBar extends React.Component<
/>
</>
);
const loadFileItem = (
<>
<Icon name="folder open" />
<FormattedMessage
id="menu.load_from_file"
defaultMessage="Load from file"
/>
</>
);
const commonElements = (
<>
{this.loadFromUrlModal()}
@@ -539,14 +536,40 @@ export class TopBar extends React.Component<
);
switch (screenSize) {
case ScreenSize.LARGE:
return (
// Show dropdown if chart is shown, otherwise show individual menu
// items.
const menus = this.props.showingChart ? (
<Dropdown
trigger={
<div>
<Icon name="folder open" />
<FormattedMessage id="menu.open" defaultMessage="Open" />
</div>
}
className="item"
>
<Dropdown.Menu>
<Dropdown.Item as="label" htmlFor="fileInput">
{openFileItem}
</Dropdown.Item>
<Dropdown.Item onClick={() => this.openLoadUrlDialog()}>
{loadUrlItem}
</Dropdown.Item>
</Dropdown.Menu>
</Dropdown>
) : (
<>
<label htmlFor="fileInput">
<Menu.Item as="a">{openFileItem}</Menu.Item>
</label>
<Menu.Item onClick={() => this.openLoadUrlDialog()}>
{loadUrlItem}
</Menu.Item>
<label htmlFor="fileInput">
<Menu.Item as="a">{loadFileItem}</Menu.Item>
</label>
</>
);
return (
<>
{menus}
{commonElements}
</>
);
@@ -554,12 +577,12 @@ export class TopBar extends React.Component<
case ScreenSize.SMALL:
return (
<>
<Dropdown.Item as="label" htmlFor="fileInput">
{openFileItem}
</Dropdown.Item>
<Dropdown.Item onClick={() => this.openLoadUrlDialog()}>
{loadUrlItem}
</Dropdown.Item>
<Dropdown.Item as="label" htmlFor="fileInput">
{loadFileItem}
</Dropdown.Item>
<Dropdown.Divider />
{commonElements}
</>

View File

@@ -1,6 +1,7 @@
{
"menu.open": "Otwórz",
"menu.open_file": "Otwórz plik",
"menu.load_from_url": "Otwórz URL",
"menu.load_from_file": "Otwórz plik",
"menu.print": "Drukuj",
"menu.download": "Pobierz",
"menu.pdf_file": "Plik PDF",
@@ -22,7 +23,7 @@
"menu.search.no_results": "Brak wyników",
"intro.title": "Topola Genealogy",
"intro.description": "Topola Genealogy pozwala przeglądać drzewo genealogiczne w interaktywny sposób.",
"intro.instructions": "Kliknij OTWÓRZ URL lub OTWÓRZ PLIK, aby załadować plik GEDCOM. Większość programów genealogicznych posiada funkcję eksportu do pliku GEDCOM.",
"intro.instructions": "Kliknij OTWÓRZ PLIK lub OTWÓRZ URL, aby załadować plik GEDCOM. Większość programów genealogicznych posiada funkcję eksportu do pliku GEDCOM.",
"intro.examples": "Poniżej jest kilka przykładów znalezionych w Internecie:",
"intro.from": "źródło:",
"intro.privacy": "Prywatność",