Make use of ProtoButton from appkit

Replaces our home-brewed buttons with the basic ProtoButtons from appkit. There is arguably more work to be done on buttons, but this should serve as a good foundation for such future work.
opencast · Jun 27, 2024 · 5e15645 · 5e15645
1 parent b321cf9
commit 5e15645
Show file tree

Hide file tree

Showing 16 changed files with 135 additions and 182 deletions.
diff --git a/src/cssStyles.tsx b/src/cssStyles.tsx
@@ -31,6 +31,10 @@ export const globalStyle = (theme: Theme) => css({
     // Makes the body span to the bottom of the page
     minHeight: "100vh",
   },
+  // Some elements not inheriting fonts is a really confusing browser default.
+  "input, button, textarea, select": {
+    font: "inherit",
+  },
 });
 
 
@@ -43,7 +47,6 @@ export const BREAKPOINT_MEDIUM = 650;
  */
 export const basicButtonStyle = (theme: Theme) => css({
   borderRadius: "5px",
-  cursor: "pointer",
   "&:hover": {
     backgroundColor: `${theme.button_color}`,
     color: `${theme.inverted_text}`,

diff --git a/src/main/CuttingActions.tsx b/src/main/CuttingActions.tsx
@@ -30,6 +30,7 @@ import { useTheme } from "../themes";
 import { ThemedTooltip } from "./Tooltip";
 import { Slider } from "@mui/material";
 import { useHotkeys } from "react-hotkeys-hook";
+import { ProtoButton } from "@opencast/appkit";
 
 /**
  * Defines the different actions a user can perform while in cutting mode
@@ -52,7 +53,7 @@ const CuttingActions: React.FC = () => {
     actionWithPayload?: ActionCreatorWithPayload<number, string> | undefined,
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     payload?: any,
-    ref?: React.RefObject<HTMLDivElement>
+    ref?: React.RefObject<HTMLButtonElement>
   ) => {
     if (action) {
       dispatch(action());
@@ -194,8 +195,6 @@ const CuttingActions: React.FC = () => {
  */
 const cuttingActionButtonStyle = css({
   padding: "16px",
-  // boxShadow: `${theme.boxShadow}`,
-  // background: `${theme.element_bg}`
 });
 
 interface cuttingActionsButtonInterface {
@@ -206,7 +205,7 @@ interface cuttingActionsButtonInterface {
     actionWithPayload: ActionCreatorWithPayload<number, string> | undefined,
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     payload: any,
-    ref?: React.RefObject<HTMLDivElement>,
+    ref?: React.RefObject<HTMLButtonElement>,
   ) => void,
   action: ActionCreatorWithoutPayload<string>,
   actionWithPayload: ActionCreatorWithPayload<number, string> | undefined,
@@ -230,24 +229,20 @@ const CuttingActionsButton: React.FC<cuttingActionsButtonInterface> = ({
   tooltip,
   ariaLabelText,
 }) => {
-  const ref = React.useRef<HTMLDivElement>(null);
+  const ref = React.useRef<HTMLButtonElement>(null);
   const theme = useTheme();
 
   return (
     <ThemedTooltip title={tooltip}>
-      <div css={[basicButtonStyle(theme), cuttingActionButtonStyle]}
-        ref={ref}
-        role="button" tabIndex={0} aria-label={ariaLabelText}
+      <ProtoButton
+        {...{ ref }}
+        aria-label={ariaLabelText}
         onClick={() => actionHandler(action, actionWithPayload, payload, ref)}
-        onKeyDown={(event: React.KeyboardEvent) => {
-          if (event.key === " " || event.key === "Enter") {
-            actionHandler(action, actionWithPayload, payload);
-          }
-        }}
+        css={[basicButtonStyle(theme), cuttingActionButtonStyle]}
       >
         <Icon />
         <span>{actionName}</span>
-      </div>
+      </ProtoButton>
     </ThemedTooltip>
   );
 };
@@ -258,7 +253,7 @@ interface markAsDeleteButtonInterface {
     actionWithPayload: ActionCreatorWithPayload<number, string> | undefined,
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     payload: any,
-    ref?: React.RefObject<HTMLDivElement>
+    ref?: React.RefObject<HTMLButtonElement>
   ) => void,
   action: ActionCreatorWithoutPayload<string>,
   hotKeyName: string,
@@ -274,26 +269,21 @@ const MarkAsDeletedButton: React.FC<markAsDeleteButtonInterface> = ({
 }) => {
   const { t } = useTranslation();
   const isCurrentSegmentAlive = useAppSelector(selectIsCurrentSegmentAlive);
-  const ref = React.useRef<HTMLDivElement>(null);
+  const ref = React.useRef<HTMLButtonElement>(null);
 
   const theme = useTheme();
 
   return (
     <ThemedTooltip title={t("cuttingActions.delete-restore-tooltip", { hotkeyName: hotKeyName })}>
-      <div css={[basicButtonStyle(theme), cuttingActionButtonStyle]}
-        ref={ref}
-        role="button" tabIndex={0}
+      <ProtoButton
+        {...{ ref }}
         aria-label={t("cuttingActions.delete-restore-tooltip-aria", { hotkeyName: hotKeyName })}
         onClick={() => actionHandler(action, undefined, undefined, ref)}
-        onKeyDown={(event: React.KeyboardEvent) => {
-          if (event.key === " " || event.key === "Enter") {
-            actionHandler(action, undefined, undefined);
-          }
-        }}
+        css={[basicButtonStyle(theme), cuttingActionButtonStyle]}
       >
         {isCurrentSegmentAlive ? <LuTrash /> : <TrashRestore css={customIconStyle} />}
         <div>{isCurrentSegmentAlive ? t("cuttingActions.delete-button") : t("cuttingActions.restore-button")}</div>
-      </div>
+      </ProtoButton>
     </ThemedTooltip>
   );
 };
@@ -304,7 +294,7 @@ interface ZoomSliderInterface {
     actionWithPayload: ActionCreatorWithPayload<number, string> | undefined,
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     payload: any,
-    ref?: React.RefObject<HTMLDivElement>,
+    ref?: React.RefObject<HTMLButtonElement>,
   ) => void,
   tooltip: string,
   ariaLabelText: string,

diff --git a/src/main/Discard.tsx b/src/main/Discard.tsx
@@ -13,6 +13,7 @@ import { PageButton } from "./Finish";
 
 import { useTranslation } from "react-i18next";
 import { useTheme } from "../themes";
+import { ProtoButton } from "@opencast/appkit";
 
 /**
  * Shown if the user wishes to abort.
@@ -61,17 +62,13 @@ const DiscardButton: React.FC = () => {
   };
 
   return (
-    <div css={[basicButtonStyle(theme), navigationButtonStyle(theme)]}
-      role="button" tabIndex={0}
+    <ProtoButton
       onClick={discard}
-      onKeyDown={(event: React.KeyboardEvent<HTMLDivElement>) => {
-        if (event.key === " " || event.key === "Enter") {
-          discard();
-        }
-      }}>
+      css={[basicButtonStyle(theme), navigationButtonStyle(theme)]}
+    >
       <LuXCircle />
       <span>{t("discard.confirm-button")}</span>
-    </div>
+    </ProtoButton>
   );
 };
 

diff --git a/src/main/Finish.tsx b/src/main/Finish.tsx
@@ -18,6 +18,7 @@ import { selectPageNumber, setPageNumber } from "../redux/finishSlice";
 import { useTheme } from "../themes";
 import { settings } from "../config";
 import { useTranslation } from "react-i18next";
+import { ProtoButton } from "@opencast/appkit";
 
 /**
  * Displays a menu for selecting what should be done with the current changes
@@ -86,17 +87,13 @@ export const PageButton: React.FC<{
   });
 
   return (
-    <div css={[basicButtonStyle(theme), pageButtonStyle]}
-      role="button" tabIndex={0}
+    <ProtoButton
       onClick={onPageChange}
-      onKeyDown={(event: React.KeyboardEvent<HTMLDivElement>) => {
-        if (event.key === " " || event.key === "Enter") {
-          onPageChange();
-        }
-      }}>
+      css={[basicButtonStyle(theme), pageButtonStyle]}
+    >
       <Icon />
       <span>{label}</span>
-    </div>
+    </ProtoButton>
   );
 };
 
@@ -116,22 +113,18 @@ export const CallbackButton: React.FC = () => {
   return (
     <>
       {settings.callbackUrl !== undefined &&
-        <div css={[basicButtonStyle(theme), navigationButtonStyle(theme)]}
-          role="button" tabIndex={0}
+        <ProtoButton
           onClick={openCallbackUrl}
-          onKeyDown={(event: React.KeyboardEvent<HTMLDivElement>) => {
-            if (event.key === " " || event.key === "Enter") {
-              openCallbackUrl();
-            }
-          }}>
+          css={[basicButtonStyle(theme), navigationButtonStyle(theme)]}
+        >
           <LuDoorOpen />
           <span>
             {settings.callbackSystem ?
               t("various.callback-button-system", { system: settings.callbackSystem }) :
               t("various.callback-button-generic")
             }
           </span>
-        </div>
+        </ProtoButton>
       }
     </>
   );

diff --git a/src/main/FinishMenu.tsx b/src/main/FinishMenu.tsx
@@ -11,6 +11,7 @@ import { setState, setPageNumber, finish } from "../redux/finishSlice";
 
 import { useTranslation } from "react-i18next";
 import { useTheme } from "../themes";
+import { ProtoButton } from "@opencast/appkit";
 
 /**
  * Displays a menu for selecting what should be done with the current changes
@@ -81,19 +82,15 @@ const FinishMenuButton: React.FC<{ Icon: IconType, stateName: finish["value"]; }
   });
 
   return (
-    <div css={[basicButtonStyle(theme), tileButtonStyle(theme)]}
-      role="button" tabIndex={0}
+    <ProtoButton
       onClick={finish}
-      onKeyDown={(event: React.KeyboardEvent<HTMLDivElement>) => {
-        if (event.key === " " || event.key === "Enter") {
-          finish();
-        }
-      }}>
+      css={[basicButtonStyle(theme), tileButtonStyle(theme)]}
+    >
       <div css={iconStyle}>
         <Icon css={{ fontSize: 36 }} />
       </div>
       <div css={labelStyle}>{buttonString}</div>
-    </div>
+    </ProtoButton>
   );
 };
 

diff --git a/src/main/Header.tsx b/src/main/Header.tsx
@@ -247,7 +247,9 @@ const HeaderButton = React.forwardRef<HTMLButtonElement, HeaderButtonProps>(
     });
 
     return (
-      <ProtoButton {...rest} ref={ref}
+      <ProtoButton
+        {...rest}
+        ref={ref}
         css={[basicButtonStyle(theme), themeSelectorButtonStyle]}
       >
         <Icon css={iconStyle} />

diff --git a/src/main/MainMenu.tsx b/src/main/MainMenu.tsx
@@ -22,6 +22,7 @@ import { resetPostRequestState } from "../redux/workflowPostSlice";
 import { setIsDisplayEditView } from "../redux/subtitleSlice";
 
 import { useTheme } from "../themes";
+import { ProtoButton } from "@opencast/appkit";
 
 /**
  * A container for selecting the functionality shown in the main part of the app
@@ -147,23 +148,19 @@ export const MainMenuButton: React.FC<mainMenuButtonInterface> = ({
   });
 
   return (
-    <li css={[basicButtonStyle(theme), customCSS ? customCSS : mainMenuButtonStyle]}
-      role="menuitem" tabIndex={0}
+    <ProtoButton
+      role="menuitem"
       aria-label={ariaLabelText}
       onClick={onMenuItemClicked}
-      onKeyDown={(event: React.KeyboardEvent<HTMLLIElement>) => {
-        if (event.key === "Enter") {
-          onMenuItemClicked();
-        }
-      }}
+      css={[basicButtonStyle(theme), customCSS ? customCSS : mainMenuButtonStyle]}
     >
       <Icon css={iconCustomCSS ? iconCustomCSS : {
         fontSize: 36,
         width: "36px",
         height: "auto",
       }} />
       {bottomText && <div>{bottomText}</div>}
-    </li>
+    </ProtoButton>
   );
 };
 

diff --git a/src/main/Save.tsx b/src/main/Save.tsx
@@ -32,6 +32,7 @@ import {
 import { serializeSubtitle } from "../util/utilityFunctions";
 import { useTheme } from "../themes";
 import { ThemedTooltip } from "./Tooltip";
+import { ProtoButton } from "@opencast/appkit";
 
 /**
  * Shown if the user wishes to save.
@@ -193,18 +194,14 @@ export const SaveButton: React.FC = () => {
 
   return (
     <ThemedTooltip title={tooltip == null ? tooltip = "" : tooltip}>
-      <div css={[basicButtonStyle(theme), navigationButtonStyle(theme)]}
-        role="button" tabIndex={0}
+      <ProtoButton
         onClick={save}
-        onKeyDown={(event: React.KeyboardEvent<HTMLDivElement>) => {
-          if (event.key === " " || event.key === "Enter") {
-            save();
-          }
-        }}>
+        css={[basicButtonStyle(theme), navigationButtonStyle(theme)]}
+      >
         <Icon css={spin ? spinningStyle : undefined} />
         <span>{t("save.confirm-button")}</span>
         <div css={ariaLive} aria-live="polite" aria-atomic="true">{ariaSaveUpdate()}</div>
-      </div>
+      </ProtoButton>
     </ThemedTooltip>
   );
 };

diff --git a/src/main/SubtitleEditor.tsx b/src/main/SubtitleEditor.tsx
@@ -21,7 +21,7 @@ import { parseSubtitle, serializeSubtitle } from "../util/utilityFunctions";
 import { ThemedTooltip } from "./Tooltip";
 import { titleStyle, titleStyleBold } from "../cssStyles";
 import { generateButtonTitle } from "./SubtitleSelect";
-import { ConfirmationModal, ConfirmationModalHandle, Modal, ModalHandle } from "@opencast/appkit";
+import { ConfirmationModal, ConfirmationModalHandle, Modal, ModalHandle, ProtoButton } from "@opencast/appkit";
 
 /**
  * Displays an editor view for a selected subtitle file
@@ -194,13 +194,13 @@ const DownloadButton: React.FC = () => {
 
   return (
     <ThemedTooltip title={t("subtitles.downloadButton-tooltip")}>
-      <div css={[basicButtonStyle(theme), subtitleButtonStyle(theme)]}
-        role="button"
+      <ProtoButton
         onClick={() => downloadSubtitles()}
+        css={[basicButtonStyle(theme), subtitleButtonStyle(theme)]}
       >
         <LuDownload css={{ fontSize: "16px" }} />
         <span>{t("subtitles.downloadButton-title")}</span>
-      </div>
+      </ProtoButton>
     </ThemedTooltip>
   );
 };
@@ -267,13 +267,13 @@ const UploadButton: React.FC<{
   return (
     <>
       <ThemedTooltip title={t("subtitles.uploadButton-tooltip")}>
-        <div css={[basicButtonStyle(theme), subtitleButtonStyle(theme)]}
-          role="button"
+        <ProtoButton
           onClick={() => modalRef.current?.open()}
+          css={[basicButtonStyle(theme), subtitleButtonStyle(theme)]}
         >
           <LuUpload css={{ fontSize: "16px" }}/>
           <span>{t("subtitles.uploadButton-title")}</span>
-        </div>
+        </ProtoButton>
       </ThemedTooltip>
       {/* Hidden input field for upload */}
       <input
@@ -313,18 +313,14 @@ export const BackButton: React.FC = () => {
 
   return (
     <ThemedTooltip title={t("subtitles.backButton-tooltip")}>
-      <div css={[basicButtonStyle(theme), subtitleButtonStyle(theme)]}
-        role="button" tabIndex={0}
+      <ProtoButton
         aria-label={t("subtitles.backButton-tooltip")}
         onClick={() => dispatch(setIsDisplayEditView(false))}
-        onKeyDown={(event: React.KeyboardEvent<HTMLDivElement>) => {
-          if (event.key === " " || event.key === "Enter") {
-            dispatch(setIsDisplayEditView(false));
-          }
-        }}>
+        css={[basicButtonStyle(theme), subtitleButtonStyle(theme)]}
+      >
         <LuChevronLeft css={{ fontSize: 24 }} />
         <span>{t("subtitles.backButton")}</span>
-      </div>
+      </ProtoButton>
     </ThemedTooltip>
   );
 };