Skip to content

Commit

Permalink
Merge pull request #1393 from Arnei/appkit-protobutton
Browse files Browse the repository at this point in the history
Make use of ProtoButton from appkit
  • Loading branch information
geichelberger authored Dec 17, 2024
2 parents 58cee66 + 3846cba commit 00bc540
Show file tree
Hide file tree
Showing 17 changed files with 132 additions and 177 deletions.
5 changes: 4 additions & 1 deletion src/cssStyles.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,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",
},
});


Expand All @@ -46,7 +50,6 @@ export const BREAKPOINTS = APPKIT_CONFIG.breakpoints;
*/
export const basicButtonStyle = (theme: Theme) => css({
borderRadius: "5px",
cursor: "pointer",
"&:hover": {
backgroundColor: `${theme.button_color}`,
color: `${theme.inverted_text}`,
Expand Down
42 changes: 16 additions & 26 deletions src/main/CuttingActions.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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());
Expand Down Expand Up @@ -196,8 +197,6 @@ const CuttingActions: React.FC = () => {
*/
const cuttingActionButtonStyle = css({
padding: "16px",
// boxShadow: `${theme.boxShadow}`,
// background: `${theme.element_bg}`
});

interface cuttingActionsButtonInterface {
Expand All @@ -208,7 +207,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,
Expand All @@ -232,24 +231,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 css={undisplay(BREAKPOINTS.medium)}>{actionName}</span>
</div>
</ProtoButton>
</ThemedTooltip>
);
};
Expand All @@ -260,7 +255,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,
Expand All @@ -276,28 +271,23 @@ 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} /> }
<span css={undisplay(BREAKPOINTS.medium)}>
{isCurrentSegmentAlive ? t("cuttingActions.delete-button") : t("cuttingActions.restore-button")}
</span>
</div>
</ProtoButton>
</ThemedTooltip>
);
};
Expand All @@ -308,7 +298,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,
Expand Down
13 changes: 5 additions & 8 deletions src/main/Discard.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,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.
Expand Down Expand Up @@ -58,17 +59,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>
);
};

Expand Down
25 changes: 9 additions & 16 deletions src/main/Finish.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ import { selectFinishState, selectPageNumber, setPageNumber } from "../redux/fin
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
Expand Down Expand Up @@ -89,17 +90,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>
);
};

Expand All @@ -119,22 +116,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>
}
</>
);
Expand Down
13 changes: 5 additions & 8 deletions src/main/FinishMenu.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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>
);
};

Expand Down
4 changes: 3 additions & 1 deletion src/main/Header.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -275,7 +275,9 @@ const HeaderButton = React.forwardRef<HTMLButtonElement, HeaderButtonProps>(
});

return (
<ProtoButton {...rest} ref={ref}
<ProtoButton
{...rest}
ref={ref}
css={[basicButtonStyle(theme), themeSelectorButtonStyle]}
>
<Icon css={iconStyle} />
Expand Down
13 changes: 5 additions & 8 deletions src/main/MainMenu.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@ import { resetPostRequestState } from "../redux/workflowPostSlice";
import { setIsDisplayEditView } from "../redux/subtitleSlice";

import { useTheme } from "../themes";
import { ProtoButton } from "@opencast/appkit";
import { screenWidthAtMost } from "@opencast/appkit";

/**
Expand Down Expand Up @@ -154,15 +155,11 @@ 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,
Expand All @@ -177,7 +174,7 @@ export const MainMenuButton: React.FC<mainMenuButtonInterface> = ({
}}>
{bottomText}
</div>}
</li>
</ProtoButton>
);
};

Expand Down
13 changes: 5 additions & 8 deletions src/main/Save.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,7 @@ import {
import { serializeSubtitle } from "../util/utilityFunctions";
import { useTheme } from "../themes";
import { ThemedTooltip } from "./Tooltip";
import { ProtoButton } from "@opencast/appkit";
import { IconType } from "react-icons";
import { setEnd } from "../redux/endSlice";

Expand Down Expand Up @@ -176,18 +177,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>{text ?? t("save.confirm-button")}</span>
<div css={ariaLive} aria-live="polite" aria-atomic="true">{ariaSaveUpdate()}</div>
</div>
</ProtoButton>
</ThemedTooltip>
);
};
Expand Down
26 changes: 11 additions & 15 deletions src/main/SubtitleEditor.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,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
Expand Down Expand Up @@ -239,13 +239,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>
);
};
Expand Down Expand Up @@ -312,13 +312,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
Expand Down Expand Up @@ -358,18 +358,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>
);
};
Expand Down
Loading

0 comments on commit 00bc540

Please sign in to comment.