editor: move docs toggle from settings

This removes the docs toggle switch from the settings and adds a new
docs toggle button to the editor.

Fixes: https://github.com/pybricks/support/issues/778

CHANGELOG.md

@@ -4,11 +4,15 @@
 
 ## [Unreleased]
 
+### Changed
+- Moved documentation show/hide button from settings to editor area ([support#778]).
+
 ### Fixed
 - Fixed first tour item not shown if settings is not open ([support#823]).
 - Fixed selected activity tab not controlled independently per window ([support#807]);
 - Fixed selected documentation visibility not controlled independently per window ([support#807]);
 
+[support#778]: https://github.com/pybricks/support/issues/778
 [support#807]: https://github.com/pybricks/support/issues/807
 [support#823]: https://github.com/pybricks/support/issues/823
 

src/blueprintjs-icons.js

@@ -27,6 +27,7 @@ import {
     Import,
     InfoSign,
     Lightbulb,
+    Manual,
     Play,
     Plus,
     Redo,
@@ -44,6 +45,7 @@ import {
     Document as Document20,
     Error as Error20,
     InfoSign as InfoSign20,
+    Manual as Manual20,
     Trash as Trash20,
     WarningSign as WarningSign20,
 } from '@blueprintjs/icons/lib/esm/generated/20px/paths';
@@ -76,6 +78,7 @@ export const IconSvgPaths16 = {
     Import,
     InfoSign,
     Lightbulb,
+    Manual,
     Play,
     Plus,
     Redo,
@@ -94,6 +97,7 @@ export const IconSvgPaths20 = {
     Document: Document20,
     Error: Error20,
     InfoSign: InfoSign20,
+    Manual: Manual20,
     Trash: Trash20,
     WarningSign: WarningSign20,
 };

src/editor/Editor.tsx

@@ -357,7 +357,8 @@ const Editor: React.VFC = () => {
     const dispatch = useDispatch();
 
     const [editor, setEditor] = useState<monaco.editor.IStandaloneCodeEditor>();
-    const { toggleIsSettingShowDocsEnabled } = useSettingIsShowDocsEnabled();
+    const { isSettingShowDocsEnabled, toggleIsSettingShowDocsEnabled } =
+        useSettingIsShowDocsEnabled();
     const { isDarkMode } = useTernaryDarkMode();
 
     const i18n = useI18n();
@@ -486,6 +487,18 @@ const Editor: React.VFC = () => {
                     <div className="pb-editor-monaco" ref={editorRef} />
                 </ContextMenu2>
             </ResizeSensor2>
+            <Button
+                className="pb-editor-doc-button"
+                minimal
+                large
+                icon="manual"
+                title={
+                    isSettingShowDocsEnabled
+                        ? i18n.translate('docs.hide')
+                        : i18n.translate('docs.show')
+                }
+                onClick={toggleIsSettingShowDocsEnabled}
+            />
         </div>
     );
 };

src/editor/editor.scss

@@ -93,4 +93,11 @@
             color: bp.$pt-dark-text-color-muted;
         }
     }
+
+    &-doc-button {
+        position: absolute;
+        bottom: bp.$pt-grid-size;
+        right: bp.$pt-grid-size;
+        z-index: bp.$pt-z-index-overlay;
+    }
 }

src/editor/translations/en.json

@@ -8,5 +8,9 @@
     "undo": "Undo",
     "redo": "Redo",
     "closeFile": { "tooltip": "Close {fileName}" },
-    "contextMenu": { "label": "Editor context menu" }
+    "contextMenu": { "label": "Editor context menu" },
+    "docs": {
+        "show": "Show documentation",
+        "hide": "Hide documentation"
+    }
 }

src/settings/Settings.test.tsx

@@ -15,18 +15,6 @@ afterEach(() => {
     sessionStorage.clear();
 });
 
-describe('showDocs setting switch', () => {
-    it('should toggle setting', async () => {
-        const [user, settings] = testRender(<Settings />);
-
-        const showDocs = settings.getByLabelText('Documentation');
-        expect(showDocs).toBeChecked();
-
-        await user.click(showDocs);
-        expect(showDocs).not.toBeChecked();
-    });
-});
-
 describe('darkMode setting switch', () => {
     it('should toggle setting', async () => {
         const [user, settings] = testRender(<Settings />);

src/settings/Settings.tsx

@@ -29,13 +29,10 @@ import { pseudolocalize } from '../i18n';
 import { useSelector } from '../reducers';
 import { tourStart } from '../tour/actions';
 import { isMacOS } from '../utils/os';
-import { useSettingIsShowDocsEnabled } from './hooks';
 import { useI18n } from './i18n';
 import './settings.scss';
 
 const Settings: React.VoidFunctionComponent = () => {
-    const { isSettingShowDocsEnabled, setIsSettingShowDocsEnabled } =
-        useSettingIsShowDocsEnabled();
     const [isAboutDialogOpen, setIsAboutDialogOpen] = useState(false);
     const { isDarkMode, setTernaryDarkMode } = useTernaryDarkMode();
 
@@ -63,21 +60,6 @@ const Settings: React.VoidFunctionComponent = () => {
                     out: <span>{isMacOS() ? 'Cmd' : 'Ctrl'}--</span>,
                 })}
             >
-                <ControlGroup>
-                    <Switch
-                        label={i18n.translate('appearance.documentation.label')}
-                        checked={isSettingShowDocsEnabled}
-                        onChange={(e) =>
-                            setIsSettingShowDocsEnabled(
-                                (e.target as HTMLInputElement).checked,
-                            )
-                        }
-                    />
-                    <HelpButton
-                        helpForLabel={i18n.translate('appearance.documentation.label')}
-                        content={i18n.translate('appearance.documentation.help')}
-                    />
-                </ControlGroup>
                 <ControlGroup>
                     <Switch
                         label={i18n.translate('appearance.darkMode.label')}

src/settings/translations/en.json

@@ -2,10 +2,6 @@
     "title": "Settings & Help",
     "appearance": {
         "title": "Appearance",
-        "documentation": {
-            "label": "Documentation",
-            "help": "Enable to show the documentation and disable to hide the documentation."
-        },
         "darkMode": {
             "label": "Dark mode",
             "help": "Enable to set theme to dark mode and disable to set theme to light mode."