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 <FormattedMessage
id="intro.instructions" id="intro.instructions"
defaultMessage={ 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' + ' a GEDCOM file. You can export a GEDCOM file from most of the' +
' existing genealogy programs and web sites.' ' existing genealogy programs and web sites.'
} }

View File

@@ -506,6 +506,12 @@ export class TopBar extends React.Component<
if (!this.props.standalone) { if (!this.props.standalone) {
return null; return null;
} }
const openFileItem = (
<>
<Icon name="folder open" />
<FormattedMessage id="menu.open_file" defaultMessage="Open file" />
</>
);
const loadUrlItem = ( const loadUrlItem = (
<> <>
<Icon name="cloud download" /> <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 = ( const commonElements = (
<> <>
{this.loadFromUrlModal()} {this.loadFromUrlModal()}
@@ -539,14 +536,40 @@ export class TopBar extends React.Component<
); );
switch (screenSize) { switch (screenSize) {
case ScreenSize.LARGE: 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()}> <Menu.Item onClick={() => this.openLoadUrlDialog()}>
{loadUrlItem} {loadUrlItem}
</Menu.Item> </Menu.Item>
<label htmlFor="fileInput"> </>
<Menu.Item as="a">{loadFileItem}</Menu.Item> );
</label> return (
<>
{menus}
{commonElements} {commonElements}
</> </>
); );
@@ -554,12 +577,12 @@ export class TopBar extends React.Component<
case ScreenSize.SMALL: case ScreenSize.SMALL:
return ( return (
<> <>
<Dropdown.Item as="label" htmlFor="fileInput">
{openFileItem}
</Dropdown.Item>
<Dropdown.Item onClick={() => this.openLoadUrlDialog()}> <Dropdown.Item onClick={() => this.openLoadUrlDialog()}>
{loadUrlItem} {loadUrlItem}
</Dropdown.Item> </Dropdown.Item>
<Dropdown.Item as="label" htmlFor="fileInput">
{loadFileItem}
</Dropdown.Item>
<Dropdown.Divider /> <Dropdown.Divider />
{commonElements} {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_url": "Otwórz URL",
"menu.load_from_file": "Otwórz plik",
"menu.print": "Drukuj", "menu.print": "Drukuj",
"menu.download": "Pobierz", "menu.download": "Pobierz",
"menu.pdf_file": "Plik PDF", "menu.pdf_file": "Plik PDF",
@@ -22,7 +23,7 @@
"menu.search.no_results": "Brak wyników", "menu.search.no_results": "Brak wyników",
"intro.title": "Topola Genealogy", "intro.title": "Topola Genealogy",
"intro.description": "Topola Genealogy pozwala przeglądać drzewo genealogiczne w interaktywny sposób.", "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.examples": "Poniżej jest kilka przykładów znalezionych w Internecie:",
"intro.from": "źródło:", "intro.from": "źródło:",
"intro.privacy": "Prywatność", "intro.privacy": "Prywatność",