From 51fc1ddce0819e5e91f3d2982b1e1a8036ae35e8 Mon Sep 17 00:00:00 2001
From: David Lechner <david@pybricks.com>
Date: Thu, 14 Jan 2021 18:22:29 -0600
Subject: [PATCH] add tooltips to settings

---
 src/components/SettingsDrawer.tsx    | 97 ++++++++++++++++++----------
 src/components/settings-i18n.en.json |  9 ++-
 src/components/settings-i18n.ts      |  3 +
 3 files changed, 72 insertions(+), 37 deletions(-)

diff --git a/src/components/SettingsDrawer.tsx b/src/components/SettingsDrawer.tsx
index 271312ff..c7d3d68e 100644
--- a/src/components/SettingsDrawer.tsx
+++ b/src/components/SettingsDrawer.tsx
@@ -1,7 +1,7 @@
 // SPDX-License-Identifier: MIT
 // Copyright (c) 2021 The Pybricks Authors
 
-import { Drawer, FormGroup, Switch } from '@blueprintjs/core';
+import { Drawer, FormGroup, Position, Switch, Tooltip } from '@blueprintjs/core';
 import { WithI18nProps, withI18n } from '@shopify/react-i18n';
 import React from 'react';
 import { connect } from 'react-redux';
@@ -16,6 +16,8 @@ import en from './settings-i18n.en.json';
 
 import './settings.scss';
 
+const tooltipDelay = 1000;
+
 type StateProps = {
     open: boolean;
     showDocs: boolean;
@@ -64,44 +66,71 @@ class SettingsDrawer extends React.PureComponent<SettingsProps> {
                             },
                         )}
                     >
-                        <Switch
-                            label={i18n.translate(
-                                SettingsStringId.AppearanceDocumentationLabel,
+                        <Tooltip
+                            content={i18n.translate(
+                                SettingsStringId.AppearanceDocumentationTooltip,
                             )}
-                            large={true}
-                            checked={showDocs}
-                            onChange={(e) =>
-                                onShowDocsChanged(
-                                    (e.target as HTMLInputElement).checked,
-                                )
-                            }
-                        />
-                        <Switch
-                            label={i18n.translate(
-                                SettingsStringId.AppearanceDarkModeLabel,
+                            position={Position.LEFT}
+                            targetTagName="div"
+                            hoverOpenDelay={tooltipDelay}
+                        >
+                            <Switch
+                                label={i18n.translate(
+                                    SettingsStringId.AppearanceDocumentationLabel,
+                                )}
+                                large={true}
+                                checked={showDocs}
+                                onChange={(e) =>
+                                    onShowDocsChanged(
+                                        (e.target as HTMLInputElement).checked,
+                                    )
+                                }
+                            />
+                        </Tooltip>
+                        <Tooltip
+                            content={i18n.translate(
+                                SettingsStringId.AppearanceDarkModeTooltip,
                             )}
-                            large={true}
-                            checked={darkMode}
-                            onChange={(e) =>
-                                onDarkModeChanged(
-                                    (e.target as HTMLInputElement).checked,
-                                )
-                            }
-                        />
+                            position={Position.LEFT}
+                            targetTagName="div"
+                            hoverOpenDelay={tooltipDelay}
+                        >
+                            <Switch
+                                label={i18n.translate(
+                                    SettingsStringId.AppearanceDarkModeLabel,
+                                )}
+                                large={true}
+                                checked={darkMode}
+                                onChange={(e) =>
+                                    onDarkModeChanged(
+                                        (e.target as HTMLInputElement).checked,
+                                    )
+                                }
+                            />
+                        </Tooltip>
                     </FormGroup>
                     <FormGroup label={i18n.translate(SettingsStringId.FirmwareTitle)}>
-                        <Switch
-                            label={i18n.translate(
-                                SettingsStringId.FirmwareCurrentProgramLabel,
+                        <Tooltip
+                            content={i18n.translate(
+                                SettingsStringId.FirmwareCurrentProgramTooltip,
                             )}
-                            large={true}
-                            checked={flashCurrentProgram}
-                            onChange={(e) =>
-                                onFlashCurrentProgramChanged(
-                                    (e.target as HTMLInputElement).checked,
-                                )
-                            }
-                        />
+                            position={Position.LEFT}
+                            targetTagName="div"
+                            hoverOpenDelay={tooltipDelay}
+                        >
+                            <Switch
+                                label={i18n.translate(
+                                    SettingsStringId.FirmwareCurrentProgramLabel,
+                                )}
+                                large={true}
+                                checked={flashCurrentProgram}
+                                onChange={(e) =>
+                                    onFlashCurrentProgramChanged(
+                                        (e.target as HTMLInputElement).checked,
+                                    )
+                                }
+                            />
+                        </Tooltip>
                     </FormGroup>
                 </div>
             </Drawer>
diff --git a/src/components/settings-i18n.en.json b/src/components/settings-i18n.en.json
index 7ac9a327..121d1298 100644
--- a/src/components/settings-i18n.en.json
+++ b/src/components/settings-i18n.en.json
@@ -4,10 +4,12 @@
         "appearance": {
             "title": "Appearance",
             "documentation": {
-                "label": "Documentation"
+                "label": "Documentation",
+                "tooltip": "Hides/shows the documentation pane in the app."
             },
             "dark-mode": {
-                "label": "Dark mode"
+                "label": "Dark mode",
+                "tooltip": "Disables/enables dark mode."
             },
             "zoom": {
                 "help": "Use {in} and {out} to zoom."
@@ -16,7 +18,8 @@
         "firmware": {
             "title": "Firmware",
             "flash-current-program": {
-                "label": "Flash my program"
+                "label": "Flash my program",
+                "tooltip": "Selects including a default program or your program when flashing firmware on a hub."
             }
         }
     }
diff --git a/src/components/settings-i18n.ts b/src/components/settings-i18n.ts
index baea36ce..6dc5c3fd 100644
--- a/src/components/settings-i18n.ts
+++ b/src/components/settings-i18n.ts
@@ -7,8 +7,11 @@ export enum SettingsStringId {
     Title = 'settings.title',
     AppearanceTitle = 'settings.appearance.title',
     AppearanceDocumentationLabel = 'settings.appearance.documentation.label',
+    AppearanceDocumentationTooltip = 'settings.appearance.documentation.tooltip',
     AppearanceDarkModeLabel = 'settings.appearance.dark-mode.label',
+    AppearanceDarkModeTooltip = 'settings.appearance.dark-mode.tooltip',
     AppearanceZoomHelp = 'settings.appearance.zoom.help',
     FirmwareTitle = 'settings.firmware.title',
     FirmwareCurrentProgramLabel = 'settings.firmware.flash-current-program.label',
+    FirmwareCurrentProgramTooltip = 'settings.firmware.flash-current-program.tooltip',
 }