From 35e6a9116490df64e5067f2b9a8c305d0b3d2fc3 Mon Sep 17 00:00:00 2001
From: Przemek Wiech <pwiech@gmail.com>
Date: Fri, 10 Apr 2020 15:37:36 +0200
Subject: [PATCH] Show "WikiTree ID" menu when in WikiTree mode

---
 src/app.tsx              |  2 +-
 src/index.css            |  6 ++++
 src/top_bar.tsx          | 75 ++++++++++++++++++++++++++++------------
 src/translations/pl.json |  2 +-
 4 files changed, 60 insertions(+), 25 deletions(-)

diff --git a/src/app.tsx b/src/app.tsx
index 6d8a906..3dae197 100644
--- a/src/app.tsx
+++ b/src/app.tsx
@@ -595,7 +595,7 @@ export class App extends React.Component<RouteComponentProps, {}> {
                 onDownloadPng: this.onDownloadPng,
                 onDownloadSvg: this.onDownloadSvg,
               }}
-              showWikiTreeLogin={this.state.source === DataSourceEnum.WIKITREE}
+              showWikiTreeMenus={this.state.source === DataSourceEnum.WIKITREE}
             />
           )}
         />
diff --git a/src/index.css b/src/index.css
index 96e94cb..62d4573 100644
--- a/src/index.css
+++ b/src/index.css
@@ -131,3 +131,9 @@ div.ui.card.intro {
   color: #4183c4;
   cursor: pointer;
 }
+
+.ui.menu .item>img:not(.ui).menu-icon {
+  width: 24px;
+  height: 24px;
+  margin-right: 5px
+}
diff --git a/src/top_bar.tsx b/src/top_bar.tsx
index 6f8c718..df2310c 100644
--- a/src/top_bar.tsx
+++ b/src/top_bar.tsx
@@ -67,8 +67,8 @@ interface Props {
   /** Whether to show the "All relatives" chart type in the menu. */
   allowAllRelativesChart: boolean;
   eventHandlers: EventHandlers;
-  /** Whether to show the 'Log in to WikiTree' button. */
-  showWikiTreeLogin: boolean;
+  /** Whether to show additional WikiTree menus. */
+  showWikiTreeMenus: boolean;
 }
 
 function loadFileAsText(file: File): Promise<string> {
@@ -381,6 +381,7 @@ export class TopBar extends React.Component<
       inputRef: HTMLInputElement;
     }).inputRef.value = id;
     this.handleWikiTreeIdChange(id);
+    this.wikiTreeIdInputRef.current!.focus();
   }
 
   private wikiTreeIdModal() {
@@ -403,7 +404,7 @@ export class TopBar extends React.Component<
           />
         </Header>
         <Modal.Content>
-          <Form onSubmit={() => this.handleLoad()}>
+          <Form onSubmit={() => this.handleSelectWikiTreeId()}>
             <p>
               <FormattedMessage
                 id="select_wikitree_id.comment"
@@ -643,9 +644,50 @@ export class TopBar extends React.Component<
   }
 
   private fileMenus(screenSize: ScreenSize) {
+    const loadWikiTreeItem = (
+      <>
+        <img
+          src={WIKITREE_LOGO_URL}
+          alt="WikiTree logo"
+          className="menu-icon"
+          />
+        <FormattedMessage
+          id="menu.select_wikitree_id"
+          defaultMessage="Select WikiTree ID"
+        />
+      </>
+    );
+
+    // In standalone WikiTree mode, show only the "Select WikiTree ID" menu.
+    if (!this.props.standalone && this.props.showWikiTreeMenus) {
+      switch (screenSize) {
+        case ScreenSize.LARGE:
+          return (
+            <>
+              <Menu.Item onClick={() => this.openWikiTreeIdDialog()}>
+                {loadWikiTreeItem}
+              </Menu.Item>
+              {this.wikiTreeIdModal()}
+            </>
+          );
+        case ScreenSize.SMALL:
+          return (
+            <>
+              <Dropdown.Item onClick={() => this.openWikiTreeIdDialog()}>
+                {loadWikiTreeItem}
+              </Dropdown.Item>
+              <Dropdown.Divider />
+              {this.wikiTreeIdModal()}
+            </>
+          );
+      }
+    }
+
+    // Don't show "open" menus in non-standalone mode.
     if (!this.props.standalone) {
       return null;
     }
+
     const openFileItem = (
       <>
         <Icon name="folder open" />
@@ -661,19 +703,6 @@ export class TopBar extends React.Component<
         />
       </>
     );
-    const loadWikiTreeItem = (
-      <>
-        <img
-          src={WIKITREE_LOGO_URL}
-          alt="WikiTree logo"
-          style={{width: '24px', height: '24px'}}
-        />
-        <FormattedMessage
-          id="menu.select_wikitree_id"
-          defaultMessage="Select WikiTree ID"
-        />
-      </>
-    );
     const commonElements = (
       <>
         {this.loadFromUrlModal()}
@@ -754,7 +783,7 @@ export class TopBar extends React.Component<
   }
 
   private wikiTreeLoginMenu(screenSize: ScreenSize) {
-    if (!this.props.showWikiTreeLogin) {
+    if (!this.props.showWikiTreeMenus) {
       return null;
     }
     switch (this.state.wikiTreeLoginState) {
@@ -781,7 +810,7 @@ export class TopBar extends React.Component<
                 <img
                   src={WIKITREE_LOGO_URL}
                   alt="WikiTree logo"
-                  style={{width: '24px', height: '24px'}}
+                  className="menu-icon"
                 />
                 <FormattedMessage
                   id="menu.wikitree_login"
@@ -798,8 +827,8 @@ export class TopBar extends React.Component<
                   <img
                     src={WIKITREE_LOGO_URL}
                     alt="WikiTree logo"
-                    style={{width: '24px', height: '24px'}}
-                  />
+                    className="menu-icon"
+                    />
                   <FormattedMessage
                     id="menu.wikitree_login"
                     defaultMessage="Log in to WikiTree"
@@ -832,7 +861,7 @@ export class TopBar extends React.Component<
                 <img
                   src={WIKITREE_LOGO_URL}
                   alt="WikiTree logo"
-                  style={{width: '24px', height: '24px'}}
+                  className="menu-icon"
                 />
                 <FormattedMessage
                   id="menu.wikitree_logged_in"
@@ -848,8 +877,8 @@ export class TopBar extends React.Component<
                   <img
                     src={WIKITREE_LOGO_URL}
                     alt="WikiTree logo"
-                    style={{width: '24px', height: '24px'}}
-                  />
+                    className="menu-icon"
+                    />
                   <FormattedMessage
                     id="menu.wikitree_logged_in"
                     defaultMessage="Logged in"
diff --git a/src/translations/pl.json b/src/translations/pl.json
index 9f44c34..c2a4bba 100644
--- a/src/translations/pl.json
+++ b/src/translations/pl.json
@@ -2,7 +2,7 @@
   "menu.open": "Otwórz",
   "menu.open_file": "Otwórz plik",
   "menu.load_from_url": "Otwórz URL",
-  "menu.select_wikitree_id": "WikiTree ID",
+  "menu.select_wikitree_id": "Wybierz WikiTree ID",
   "menu.print": "Drukuj",
   "menu.download": "Pobierz",
   "menu.pdf_file": "Plik PDF",