toolbar: make buttons scale with screen size

This is very basic, just 2 sizes. But it makes things a bit better
on phones.

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

CHANGELOG.md

@@ -6,11 +6,13 @@
 
 ### Changed
 - Saving file now uses proper save dialog in Chromium browser ([support#84]).
+- Toolbar buttons now scale with screen size ([support#300]).
 
 ### Fixed
 - Fixed buttons wrong size while image is downloading ([support#369]).
 
 [support#84]: https://github.com/pybricks/support/issues/84
+[support#300]: https://github.com/pybricks/support/issues/300
 [support#369]: https://github.com/pybricks/support/issues/369
 
 ## [1.1.0] - 2021-12-16

public/manifest.json

@@ -22,7 +22,6 @@
     ],
     "start_url": ".",
     "display": "fullscreen",
-    "orientation": "landscape",
     "theme_color": "#000000",
     "background_color": "#ffffff"
 }

src/toolbar/ActionButton.tsx

@@ -11,11 +11,13 @@ import {
 } from '@blueprintjs/core';
 import { Tooltip2 } from '@blueprintjs/popover2';
 import { useI18n } from '@shopify/react-i18n';
-import React, { useMemo } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 import { tooltipDelay } from '../app/constants';
 import { TooltipId } from './i18n';
 import en from './i18n.en.json';
 
+const smallScreenThreshold = 700;
+
 export interface ActionButtonProps {
     /** A unique id for each instance. */
     readonly id: string;
@@ -40,6 +42,20 @@ export interface ActionButtonProps {
 const ActionButton: React.FC<ActionButtonProps> = (props) => {
     const [i18n] = useI18n({ id: 'actionButton', translations: { en }, fallback: en });
 
+    const [isSmallScreen, setIsSmallScreen] = useState(
+        window.innerWidth <= smallScreenThreshold,
+    );
+
+    useEffect(() => {
+        const handleResize = () => {
+            setIsSmallScreen(window.innerWidth <= smallScreenThreshold);
+        };
+        window.addEventListener('resize', handleResize);
+        return () => window.removeEventListener('resize', handleResize);
+    });
+
+    const buttonSize = isSmallScreen ? SpinnerSize.SMALL : SpinnerSize.STANDARD;
+
     const tooltipText =
         props.showProgress && props.progressTooltip
             ? i18n.translate(props.progressTooltip, {
@@ -97,11 +113,15 @@ const ActionButton: React.FC<ActionButtonProps> = (props) => {
                     }
                 >
                     {props.showProgress ? (
-                        <Spinner value={props.progress} intent={Intent.PRIMARY} />
+                        <Spinner
+                            value={props.progress}
+                            intent={Intent.PRIMARY}
+                            size={buttonSize}
+                        />
                     ) : (
                         <img
-                            width={`${SpinnerSize.STANDARD}px`}
-                            height={`${SpinnerSize.STANDARD}px`}
+                            width={`${buttonSize}px`}
+                            height={`${buttonSize}px`}
                             src={props.icon}
                             alt={props.id}
                             style={{ pointerEvents: 'none' }}

src/toolbar/OpenFileButton.tsx

@@ -4,12 +4,14 @@
 import { Button, IRef, Intent, Spinner, SpinnerSize } from '@blueprintjs/core';
 import { Tooltip2 } from '@blueprintjs/popover2';
 import { useI18n } from '@shopify/react-i18n';
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import { useDropzone } from 'react-dropzone';
 import { tooltipDelay } from '../app/constants';
 import { TooltipId } from './i18n';
 import en from './i18n.en.json';
 
+const smallScreenThreshold = 700;
+
 export interface OpenFileButtonProps {
     /** A unique id for each instance. */
     readonly id: string;
@@ -43,6 +45,20 @@ const OpenFileButton: React.FC<OpenFileButtonProps> = (props) => {
         fallback: en,
     });
 
+    const [isSmallScreen, setIsSmallScreen] = useState(
+        window.innerWidth <= smallScreenThreshold,
+    );
+
+    useEffect(() => {
+        const handleResize = () => {
+            setIsSmallScreen(window.innerWidth <= smallScreenThreshold);
+        };
+        window.addEventListener('resize', handleResize);
+        return () => window.removeEventListener('resize', handleResize);
+    });
+
+    const buttonSize = isSmallScreen ? SpinnerSize.SMALL : SpinnerSize.STANDARD;
+
     const { getRootProps, getInputProps } = useDropzone({
         accept: props.fileExtension,
         multiple: false,
@@ -113,11 +129,15 @@ const OpenFileButton: React.FC<OpenFileButtonProps> = (props) => {
                 >
                     <input {...getInputProps()} />
                     {props.showProgress ? (
-                        <Spinner value={props.progress} intent={Intent.PRIMARY} />
+                        <Spinner
+                            value={props.progress}
+                            intent={Intent.PRIMARY}
+                            size={buttonSize}
+                        />
                     ) : (
                         <img
-                            width={`${SpinnerSize.STANDARD}px`}
-                            height={`${SpinnerSize.STANDARD}px`}
+                            width={`${buttonSize}px`}
+                            height={`${buttonSize}px`}
                             src={props.icon}
                             alt={props.id}
                             style={{ pointerEvents: 'none' }}

src/toolbar/toolbar.scss

@@ -19,7 +19,7 @@
 
 .pb-toolbar-group {
     align-items: center;
-    height: $pb-toolbar-height;
+    height: 100%;
 
     &.pb-align-left {
         float: left;
@@ -31,3 +31,18 @@
         margin-left: $pt-grid-size * 2;
     }
 }
+
+// make small buttons more square and slightly smaller
+@media screen and (max-width: 700px) {
+    .pb-toolbar .#{$ns}-button {
+        padding: 5px;
+    }
+}
+
+// this is the point where the buttons start wrapping to 2 rows so we need to
+// adjust the height so that they stay in the toolbar
+@media screen and (max-width: 350px) {
+    .pb-toolbar-group {
+        height: 50%;
+    }
+}