From d21858547bd37183971235bd16a78ba7951e9d93 Mon Sep 17 00:00:00 2001 From: Przemek Wiech Date: Tue, 31 Mar 2020 23:42:31 +0200 Subject: [PATCH] Added mobile-friendly menu (#5) --- src/top_bar.tsx | 542 +++++++++++++++++++++++++++------------ src/translations/pl.json | 6 +- 2 files changed, 376 insertions(+), 172 deletions(-) diff --git a/src/top_bar.tsx b/src/top_bar.tsx index 95c9969..6a3a59b 100644 --- a/src/top_bar.tsx +++ b/src/top_bar.tsx @@ -23,6 +23,7 @@ import { Search, SearchProps, SearchResultProps, + Responsive, } from 'semantic-ui-react'; enum WikiTreeLoginState { @@ -31,6 +32,11 @@ enum WikiTreeLoginState { LOGGED_IN, } +enum ScreenSize { + LARGE, + SMALL, +} + /** Menus and dialogs state. */ interface State { loadUrlDialogOpen: boolean; @@ -319,126 +325,208 @@ export class TopBar extends React.Component< ); } - private chartMenus() { + private search() { + return ( + , data: SearchProps) => + this.handleSearch(data.value), + 200, + )} + onResultSelect={(_, data) => this.handleResultSelect(data.result.id)} + results={this.state.searchResults} + noResultsMessage={this.context.intl.formatMessage({ + id: 'menu.search.no_results', + defaultMessage: 'No results found', + })} + placeholder={this.context.intl.formatMessage({ + id: 'menu.search.placeholder', + defaultMessage: 'Search for people', + })} + selectFirstResult={true} + ref={(ref) => + (this.searchRef = (ref as unknown) as { + setValue(value: string): void; + }) + } + /> + ); + } + + private chartMenus(screenSize: ScreenSize) { if (!this.props.showingChart) { return null; } - return ( + const chartTypeItems = ( <> - this.props.eventHandlers.onPrint()}> - - - + this.changeView('hourglass')}> + + + + {this.props.allowAllRelativesChart ? ( + this.changeView('relatives')}> + + + + ) : null} + this.changeView('fancy')}> + + + + + ); + switch (screenSize) { + case ScreenSize.LARGE: + return ( + <> + this.props.eventHandlers.onPrint()}> + + + + + + + + + } + className="item" + > + + this.props.eventHandlers.onDownloadPdf()} + > + + + this.props.eventHandlers.onDownloadPng()} + > + + + this.props.eventHandlers.onDownloadSvg()} + > + + + + + + + + + + } + className="item" + > + {chartTypeItems} + + {this.search()} + + ); + + case ScreenSize.SMALL: + return ( + <> + this.props.eventHandlers.onPrint()}> + + + + + - - - - - } - className="item" - > - this.props.eventHandlers.onDownloadPdf()} > - + + this.props.eventHandlers.onDownloadPng()} > - + + this.props.eventHandlers.onDownloadSvg()} > - - - - - - - - - - } - className="item" - > - - this.changeView('hourglass')}> - + - {this.props.allowAllRelativesChart ? ( - this.changeView('relatives')}> - - - - ) : null} - this.changeView('fancy')}> - - - - - - , data: SearchProps) => - this.handleSearch(data.value), - 200, - )} - onResultSelect={(_, data) => this.handleResultSelect(data.result.id)} - results={this.state.searchResults} - noResultsMessage={this.context.intl.formatMessage({ - id: 'menu.search.no_results', - defaultMessage: 'No results found', - })} - placeholder={this.context.intl.formatMessage({ - id: 'menu.search.placeholder', - defaultMessage: 'Search for people', - })} - selectFirstResult={true} - ref={(ref) => - (this.searchRef = (ref as unknown) as { - setValue(value: string): void; - }) - } - /> - + + {chartTypeItems} + + + ); + } + } + + private title() { + return ( + + Topola Genealogy + ); } - private fileMenus() { + private fileMenus(screenSize: ScreenSize) { if (!this.props.standalone) { return null; } - return ( + const loadUrlItem = ( <> - - - Topola Genealogy - - - this.openLoadUrlDialog()}> - - - + + + + ); + const loadFileItem = ( + <> + + + + ); + const commonElements = ( + <> + {this.loadFromUrlModal()} this.handleUpload(e)} /> - ); + switch (screenSize) { + case ScreenSize.LARGE: + return ( + <> + this.openLoadUrlDialog()}> + {loadUrlItem} + + + {commonElements} + + ); + + case ScreenSize.SMALL: + return ( + <> + this.openLoadUrlDialog()}> + {loadUrlItem} + + + {loadFileItem} + + + {commonElements} + + ); + } } - private wikiTreeLoginMenu() { + private wikiTreeLoginMenu(screenSize: ScreenSize) { if (!this.props.showWikiTreeLogin) { return null; } const wikiTreeLogoUrl = 'https://www.wikitree.com/photo.php/a/a5/WikiTree_Images.png'; + switch (this.state.wikiTreeLoginState) { case WikiTreeLoginState.NOT_LOGGED_IN: - return ( - this.wikiTreeLogin()}> - WikiTree logo + + - -
- - -
- + ); + switch (screenSize) { + case ScreenSize.LARGE: + return ( + this.wikiTreeLogin()}> + WikiTree logo + + {loginForm} + + ); + + case ScreenSize.SMALL: + return ( + <> + this.wikiTreeLogin()}> + WikiTree logo + + {loginForm} + + + + ); + } + break; + case WikiTreeLoginState.LOGGED_IN: const tooltip = this.state.wikiTreeLoginUsername ? this.context.intl.formatMessage( @@ -507,62 +642,129 @@ export class TopBar extends React.Component< id: 'menu.wikitree_popup', defaultMessage: 'Logged in to WikiTree', }); - return ( - - WikiTree logo - - - ); - default: - return null; + switch (screenSize) { + case ScreenSize.LARGE: + return ( + + WikiTree logo + + + ); + + case ScreenSize.SMALL: + return ( + <> + + WikiTree logo + + + + + ); + + default: + return null; + } } } - private sourceLink() { + private mobileMenus() { return ( - - - + <> + + + + } + className="item" + icon={null} + > + + {this.fileMenus(ScreenSize.SMALL)} + {this.chartMenus(ScreenSize.SMALL)} + {this.wikiTreeLoginMenu(ScreenSize.SMALL)} + + + + + + + {this.props.standalone ? ( + {this.title()} + ) : ( + this.title() + )} + ); } - private poweredByLink() { + private desktopMenus() { return ( - - - + <> + {this.props.standalone ? {this.title()} : null} + {this.fileMenus(ScreenSize.LARGE)} + {this.chartMenus(ScreenSize.LARGE)} + + {this.wikiTreeLoginMenu(ScreenSize.LARGE)} + + + + + ); } render() { return ( - - {this.fileMenus()} - {this.chartMenus()} - - {this.wikiTreeLoginMenu()} - {this.props.standalone ? this.sourceLink() : this.poweredByLink()} - - {this.loadFromUrlModal()} - + <> + + {this.desktopMenus()} + + + {this.mobileMenus()} + + ); } } diff --git a/src/translations/pl.json b/src/translations/pl.json index 836a8f3..dcc69f5 100644 --- a/src/translations/pl.json +++ b/src/translations/pl.json @@ -6,6 +6,9 @@ "menu.pdf_file": "Plik PDF", "menu.png_file": "Plik PNG", "menu.svg_file": "Plik SVG", + "menu.download_pdf": "Pobierz PDF", + "menu.download_png": "Pobierz PNG", + "menu.download_svg": "Pobierz SVG", "menu.view": "Widok", "menu.hourglass": "Wykres klepsydrowy", "menu.relatives": "Wszyscy krewni", @@ -14,8 +17,7 @@ "menu.wikitree_logged_in": "Zalogowano", "menu.wikitree_popup_username": "Zalogowano do WikiTree jako {username}", "menu.wikitree_popup": "Zalogowano do WikiTree", - "menu.github": "Źródła na GitHub", - "menu.powered_by": "Topola Genealogy", + "menu.github": "Projekt na stronie GitHub", "menu.search.placeholder": "Szukaj osoby", "menu.search.no_results": "Brak wyników", "intro.title": "Topola Genealogy",