Make disabled button less visible

yo35 · Apr 21, 2024 · 030cd21 · 030cd21
1 parent 2b3c714
commit 030cd21
Show file tree

Hide file tree

Showing 32 changed files with 33 additions and 16 deletions.
diff --git a/src/navigationboard/NavigationBoard.tsx b/src/navigationboard/NavigationBoard.tsx
@@ -177,27 +177,30 @@ export class NavigationBoard extends React.Component<NavigationBoardProps, Navig
             moveArrowVisible={this.props.moveArrowVisible}
             moveArrowColor={this.props.moveArrowColor}
             animated={this.props.animated}
-            bottomComponent={({ squareSize }) => this.renderToolbar(game, node.id(), squareSize)}
+            bottomComponent={({ squareSize }) => this.renderToolbar(game, node, squareSize)}
         />;
     }
 
     private renderNavigationField(game: Game, currentNodeId: string) {
         return <NavigationField ref={this.navigationFieldRef}
-            onFirstPressed={() => this.handleNavigationButtonClicked(firstNodeId(game, currentNodeId))}
-            onPreviousPressed={() => this.handleNavigationButtonClicked(previousNodeId(game, currentNodeId))}
-            onNextPressed={() => this.handleNavigationButtonClicked(nextNodeId(game, currentNodeId))}
-            onLastPressed={() => this.handleNavigationButtonClicked(lastNodeId(game, currentNodeId))}
+            onFirstPressed={() => this.handleNavClicked(firstNodeId(game, currentNodeId))}
+            onPreviousPressed={() => this.handleNavClicked(previousNodeId(game, currentNodeId))}
+            onNextPressed={() => this.handleNavClicked(nextNodeId(game, currentNodeId))}
+            onLastPressed={() => this.handleNavClicked(lastNodeId(game, currentNodeId))}
         />;
     }
 
-    private renderToolbar(game: Game, currentNodeId: string, squareSize: number) {
+    private renderToolbar(game: Game, node: GameNode | Variation, squareSize: number) {
         const buttons: NavigationButtonList = [];
 
         // Core navigation buttons
-        buttons.push({ iconPath: GO_FIRST_ICON_PATH, tooltip: i18n.TOOLTIP_GO_FIRST, onClick: () => this.handleNavigationButtonClicked(firstNodeId(game, currentNodeId)) });
-        buttons.push({ iconPath: GO_PREVIOUS_ICON_PATH, tooltip: i18n.TOOLTIP_GO_PREVIOUS, onClick: () => this.handleNavigationButtonClicked(previousNodeId(game, currentNodeId)) });
-        buttons.push({ iconPath: GO_NEXT_ICON_PATH, tooltip: i18n.TOOLTIP_GO_NEXT, onClick: () => this.handleNavigationButtonClicked(nextNodeId(game, currentNodeId)) });
-        buttons.push({ iconPath: GO_LAST_ICON_PATH, tooltip: i18n.TOOLTIP_GO_LAST, onClick: () => this.handleNavigationButtonClicked(lastNodeId(game, currentNodeId)) });
+        const currentNodeId = node.id();
+        const hasPrevious = currentNodeId !== 'start';
+        const hasNext = (node instanceof Variation ? node.first() : node.next()) !== undefined;
+        buttons.push({ iconPath: GO_FIRST_ICON_PATH, tooltip: i18n.TOOLTIP_GO_FIRST, enabled: hasPrevious, onClick: () => this.handleNavClicked(firstNodeId(game, currentNodeId)) });
+        buttons.push({ iconPath: GO_PREVIOUS_ICON_PATH, tooltip: i18n.TOOLTIP_GO_PREVIOUS, enabled: hasPrevious, onClick: () => this.handleNavClicked(previousNodeId(game, currentNodeId)) });
+        buttons.push({ iconPath: GO_NEXT_ICON_PATH, tooltip: i18n.TOOLTIP_GO_NEXT, enabled: hasNext, onClick: () => this.handleNavClicked(nextNodeId(game, currentNodeId)) });
+        buttons.push({ iconPath: GO_LAST_ICON_PATH, tooltip: i18n.TOOLTIP_GO_LAST, enabled: hasNext, onClick: () => this.handleNavClicked(lastNodeId(game, currentNodeId)) });
         buttons.push('spacer');
         if (this.props.flipButtonVisible) {
             buttons.push({ iconPath: FLIP_ICON_PATH, tooltip: i18n.TOOLTIP_FLIP, onClick: () => this.handleFlipButtonClicked() });
@@ -213,7 +216,7 @@ export class NavigationBoard extends React.Component<NavigationBoardProps, Navig
         return <NavigationToolbar squareSize={squareSize} buttons={buttons} />;
     }
 
-    private handleNavigationButtonClicked(targetNodeId: string | undefined) {
+    private handleNavClicked(targetNodeId: string | undefined) {
         this.focus();
         if (targetNodeId === undefined) {
             return;

diff --git a/src/navigationboard/NavigationButton.ts b/src/navigationboard/NavigationButton.ts
@@ -40,6 +40,11 @@ export type NavigationButton = {
      */
     tooltip?: string;
 
+    /**
+     * Whether or not the button is enabled (true by default).
+     */
+    enabled?: boolean;
+
     /**
      * Callback invoked when the user clicks on the button.
      */
@@ -62,5 +67,6 @@ export function isNavigationButton(button: unknown): button is NavigationButton
     }
     return typeof (button as NavigationButton).iconPath === 'string' &&
         ((button as NavigationButton).tooltip === undefined || typeof (button as NavigationButton).tooltip === 'string') &&
+        ((button as NavigationButton).enabled === undefined || typeof (button as NavigationButton).enabled === 'boolean') &&
         ((button as NavigationButton).onClick === undefined || typeof (button as NavigationButton).onClick === 'function');
 }
diff --git a/src/navigationboard/NavigationToolbar.css b/src/navigationboard/NavigationToolbar.css
@@ -32,15 +32,23 @@
     line-height: 0px;
 }
 
-.kokopu-navigationButton {
+.kokopu-enabledNavigationButton,
+.kokopu-disabledNavigationButton {
     display: inline-block;
+}
+
+.kokopu-enabledNavigationButton {
     cursor: pointer;
 }
 
-.kokopu-navigationButton:hover {
+.kokopu-enabledNavigationButton:hover {
     opacity: 0.6;
 }
 
+.kokopu-disabledNavigationButton {
+    opacity: 0.2;
+}
+
 .kokopu-navigationSpacer {
     display: inline-block;
 }
diff --git a/src/navigationboard/NavigationToolbar.tsx b/src/navigationboard/NavigationToolbar.tsx
@@ -64,7 +64,7 @@ export function NavigationToolbar({ squareSize, buttons }: NavigationToolbarProp
         // Enqueue the button node.
         buttonNodes.push(<NavigationButtonImpl
             key={buttonNodes.length}
-            tooltip={button.tooltip} iconPath={button.iconPath} onClick={button.onClick}
+            tooltip={button.tooltip} iconPath={button.iconPath} enabled={button.enabled} onClick={button.onClick}
             size={buttonSize}
             spaceOnLeft={i === 0 || buttons[i - 1] === 'spacer'}
             spaceOnRight={i === buttons.length - 1 || buttons[i + 1] === 'spacer'}
@@ -85,11 +85,11 @@ interface NavigationButtonImplProps extends NavigationButton {
 /**
  * Button for the navigation toolbar.
  */
-function NavigationButtonImpl({ size, spaceOnLeft, spaceOnRight, tooltip, iconPath, onClick }: NavigationButtonImplProps) {
+function NavigationButtonImpl({ size, spaceOnLeft, spaceOnRight, iconPath, tooltip, enabled, onClick }: NavigationButtonImplProps) {
     const leftBoundary = spaceOnLeft ? 'A 16 16 0 0 0 16 32' : 'L 1 0 L 1 32 L 16 32';
     const rightBoundary = spaceOnRight ? 'A 16 16 0 0 0 16 0' : 'L 31 32 L 31 0 L 16 0';
     return (
-        <div className="kokopu-navigationButton" title={tooltip} onClick={onClick}>
+        <div className={(enabled ?? true) ? 'kokopu-enabledNavigationButton' : 'kokopu-disabledNavigationButton'} title={tooltip} onClick={onClick}>
             <svg viewBox="0 0 32 32" width={size} height={size}>
                 <path d={`M 16 0 ${leftBoundary} ${rightBoundary} Z ${iconPath}`} fill="currentcolor" />
             </svg>

diff --git a/.../graphic_references/12_navigation_board/additional_buttons/multiple_buttons.png b/.../graphic_references/12_navigation_board/additional_buttons/multiple_buttons.png
diff --git a/test/graphic_references/12_navigation_board/additional_buttons/single_button.png b/test/graphic_references/12_navigation_board/additional_buttons/single_button.png
diff --git a/test/graphic_references/12_navigation_board/controlled/forbidden_navigation_0.png b/test/graphic_references/12_navigation_board/controlled/forbidden_navigation_0.png
diff --git a/test/graphic_references/12_navigation_board/controlled/forbidden_navigation_1.png b/test/graphic_references/12_navigation_board/controlled/forbidden_navigation_1.png
diff --git a/test/graphic_references/12_navigation_board/controlled/invalid_node_id.png b/test/graphic_references/12_navigation_board/controlled/invalid_node_id.png
diff --git a/test/graphic_references/12_navigation_board/controlled/no_callback_defined_0.png b/test/graphic_references/12_navigation_board/controlled/no_callback_defined_0.png
diff --git a/test/graphic_references/12_navigation_board/controlled/no_callback_defined_1.png b/test/graphic_references/12_navigation_board/controlled/no_callback_defined_1.png
diff --git a/...raphic_references/12_navigation_board/controlled/overriding_initial_node_id.png b/...raphic_references/12_navigation_board/controlled/overriding_initial_node_id.png
diff --git a/test/graphic_references/12_navigation_board/theme/custom_1.png b/test/graphic_references/12_navigation_board/theme/custom_1.png
diff --git a/test/graphic_references/12_navigation_board/theme/custom_2.png b/test/graphic_references/12_navigation_board/theme/custom_2.png
diff --git a/test/graphic_references/12_navigation_board/theme/large.png b/test/graphic_references/12_navigation_board/theme/large.png
diff --git a/test/graphic_references/12_navigation_board/theme/small.png b/test/graphic_references/12_navigation_board/theme/small.png
diff --git a/...rences/12_navigation_board/uncontrolled/forbidden_navigation_at_beginning_0.png b/...rences/12_navigation_board/uncontrolled/forbidden_navigation_at_beginning_0.png
diff --git a/...rences/12_navigation_board/uncontrolled/forbidden_navigation_at_beginning_1.png b/...rences/12_navigation_board/uncontrolled/forbidden_navigation_at_beginning_1.png
diff --git a/...rences/12_navigation_board/uncontrolled/forbidden_navigation_at_beginning_2.png b/...rences/12_navigation_board/uncontrolled/forbidden_navigation_at_beginning_2.png
diff --git a/...c_references/12_navigation_board/uncontrolled/forbidden_navigation_at_end_0.png b/...c_references/12_navigation_board/uncontrolled/forbidden_navigation_at_end_0.png
diff --git a/...c_references/12_navigation_board/uncontrolled/forbidden_navigation_at_end_1.png b/...c_references/12_navigation_board/uncontrolled/forbidden_navigation_at_end_1.png
diff --git a/...c_references/12_navigation_board/uncontrolled/forbidden_navigation_at_end_2.png b/...c_references/12_navigation_board/uncontrolled/forbidden_navigation_at_end_2.png
diff --git a/test/graphic_references/12_navigation_board/uncontrolled/initial_state_at_end.png b/test/graphic_references/12_navigation_board/uncontrolled/initial_state_at_end.png
diff --git a/test/graphic_references/12_navigation_board/uncontrolled/initial_state_default.png b/test/graphic_references/12_navigation_board/uncontrolled/initial_state_default.png
diff --git a/...nces/12_navigation_board/uncontrolled/initial_state_default_with_game_index.png b/...nces/12_navigation_board/uncontrolled/initial_state_default_with_game_index.png
diff --git a/.../graphic_references/12_navigation_board/uncontrolled/navigation_with_keys_1.png b/.../graphic_references/12_navigation_board/uncontrolled/navigation_with_keys_1.png
diff --git a/.../graphic_references/12_navigation_board/uncontrolled/navigation_with_keys_4.png b/.../graphic_references/12_navigation_board/uncontrolled/navigation_with_keys_4.png
diff --git a/test/graphic_references/12_navigation_board/uncontrolled/regular_flipping_0.png b/test/graphic_references/12_navigation_board/uncontrolled/regular_flipping_0.png
diff --git a/test/graphic_references/12_navigation_board/uncontrolled/regular_flipping_1.png b/test/graphic_references/12_navigation_board/uncontrolled/regular_flipping_1.png
diff --git a/test/graphic_references/12_navigation_board/uncontrolled/regular_navigation_3.png b/test/graphic_references/12_navigation_board/uncontrolled/regular_navigation_3.png
diff --git a/test/graphic_references/12_navigation_board/uncontrolled/regular_navigation_4.png b/test/graphic_references/12_navigation_board/uncontrolled/regular_navigation_4.png
diff --git a/test/graphic_references/12_navigation_board/uncontrolled/regular_navigation_5.png b/test/graphic_references/12_navigation_board/uncontrolled/regular_navigation_5.png