Skip to content

Commit

Permalink
Refactoring and improvements (#433)
Browse files Browse the repository at this point in the history 
* Style improvements of expo info dialog from start screen

* fix: Do not display worksheet and expo files dialog opening buttons on mobile when there are no files to display

* Custom button component can now directly accept tooltip prop

* fix: Display pin and more option button on expo card on iOs

* Refactored custom icon component's tooltip prop

* Extracted filter fields from expositions header to separate components

* Filter component is spreaded to Header component

* Created custom separate component for card list view button

* Created custom separarate NewExpoButton component

* Created custom separate ViewOnlyPinnedCheckbox component

* Reorganized expositions header folder and its components
  • Loading branch information
@Werxis
Werxis authored Jul 10, 2024
1 parent 45f2a41 commit c6f8975
Show file tree
Hide file tree
Showing 20 changed files with 595 additions and 397 deletions.
103 changes: 60 additions & 43 deletions web/src/components/button/button.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,15 @@ import { CSSProperties, forwardRef } from "react";
import { useExpoDesignData } from "hooks/view-hooks/expo-design-data-hook";

import cx from "classnames";
import { BasicTooltip } from "components/tooltip/tooltip";
import { PlacesType } from "react-tooltip";

type TooltipOption = {
id: string;
content: string;
variant?: "light" | "dark"; // if undefined, based on selected theme
place?: PlacesType;
};

interface ButtonProps {
color?: "default" | "primary" | "secondary" | "white" | "expoTheme";
Expand All @@ -18,6 +27,7 @@ interface ButtonProps {
shadow?: boolean;
iconBefore?: React.ReactNode;
iconAfter?: React.ReactNode;
tooltip?: TooltipOption;
children?: React.ReactNode;
}

Expand All @@ -35,56 +45,63 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
shadow,
iconBefore,
iconAfter,
tooltip,
children,
},
ref
) => {
const { isLightMode, bfFgThemingIf } = useExpoDesignData();

return (
<button
ref={ref}
type="button"
disabled={disabled}
onClick={onClick}
className={cx(
"border-0 flex justify-center items-center gap-2 font-semibold whitespace-nowrap",
noPadding ? "p-0" : "px-2 py-1",
{
"text-lg font-bold px-4 py-2": big, // these paddings will overwrite the above one
"hover:cursor-pointer": !disabled,
"shadow-md": shadow,
"hover:brightness-90": color !== "default",
// "Default" color (e.g when not set any color)
"hover:bg-black hover:bg-opacity-10":
color === "default" && isLightMode,
"hover:bg-white hover:bg-opacity-10":
color === "default" && !isLightMode,
// "White" color
"bg-white text-black": color === "white",
// "Primary" color
"bg-primary text-white":
color === "primary" && type === "contained",
"bg-white text-primary": color === "primary" && type === "text",
"bg-white text-primary border-solid border-primary border-2":
color === "primary" && type === "outlined",
// "Secondary color"
"bg-secondary text-white":
color === "secondary" && type === "contained",
"bg-white text-secondary": color === "secondary" && type === "text",
"bg-white text-secondary border-solid border-secondary border-2":
color === "secondary" && type === "outlined",
// "expoTheme color.. use color by actual set expo theme"
...bfFgThemingIf(color === "expoTheme"),
},
className
)}
style={style}
>
{iconBefore}
{children}
{iconAfter}
</button>
<>
<button
ref={ref}
type="button"
disabled={disabled}
onClick={onClick}
className={cx(
"border-0 flex justify-center items-center gap-2 font-semibold whitespace-nowrap",
noPadding ? "p-0" : "px-2 py-1",
{
"text-lg font-bold px-4 py-2": big, // these paddings will overwrite the above one
"hover:cursor-pointer": !disabled,
"shadow-md": shadow,
"hover:brightness-90": color !== "default",
// "Default" color (e.g when not set any color)
"hover:bg-black hover:bg-opacity-10":
color === "default" && isLightMode,
"hover:bg-white hover:bg-opacity-10":
color === "default" && !isLightMode,
// "White" color
"bg-white text-black": color === "white",
// "Primary" color
"bg-primary text-white":
color === "primary" && type === "contained",
"bg-white text-primary": color === "primary" && type === "text",
"bg-white text-primary border-solid border-primary border-2":
color === "primary" && type === "outlined",
// "Secondary color"
"bg-secondary text-white":
color === "secondary" && type === "contained",
"bg-white text-secondary":
color === "secondary" && type === "text",
"bg-white text-secondary border-solid border-secondary border-2":
color === "secondary" && type === "outlined",
// "expoTheme color.. use color by actual set expo theme"
...bfFgThemingIf(color === "expoTheme"),
},
className
)}
style={style}
data-tooltip-id={tooltip?.id ?? undefined}
>
{iconBefore}
{children}
{iconAfter}
</button>

{tooltip && <BasicTooltip {...tooltip} />}
</>
);
}
);
Expand Down
16 changes: 9 additions & 7 deletions web/src/components/dialogs/expo-info-dialog/expo-info-dialog.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -76,33 +76,35 @@ export const ExpoInfoDialog = ({
closeOnEsc
applyTheming
>
<div className="pb-5 border-b border-b-black border-opacity-10">
<div className="pb-3 border-b border-b-black border-opacity-10">
{expoPerexLines}
</div>

{/* Dialog opening buttons */}
<div className="flex justify-end items-center gap-2">
<div className="flex justify-end items-center gap-2 my-2">
<Button color="primary" onClick={openAuthorsDialog}>
<Icon color="white" name="account_box" />
</Button>
<Button color="primary" onClick={openChaptersDialog}>
<Icon color="white" name="layers" />
</Button>
{startWorksheetFiles?.length !== 0 && (
{startWorksheetFiles && startWorksheetFiles.length !== 0 && (
<Button color="primary" onClick={openWorksheetDialog}>
<Icon color="white" name="description" />
</Button>
)}
{startExpoFiles?.length !== 0 && (
{startExpoFiles && startExpoFiles.length !== 0 && (
<Button color="primary" onClick={openFilesDialog}>
<Icon color="white" name="folder" />
</Button>
)}
</div>

<div className="mt-5 flex justify-between items-center gap-6">
{tags && <TagsList tags={tags} />}
</div>
{tags && (
<div className="mt-4 flex justify-between items-center gap-6">
<TagsList tags={tags} />
</div>
)}
</DialogWrap>
</>
);
Expand Down
48 changes: 30 additions & 18 deletions web/src/components/editors/ImageBox.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -426,9 +426,11 @@ const SettingsPanel = ({
onClick={() => {
setCurrZoom((prevZoom) => prevZoom + 0.2);
}}
tooltipId="zoom-in-icon-button"
tooltipText={t("imageBox.zoomInTooltip")}
tooltipVariant="dark"
tooltip={{
id: "zoom-in-icon-button",
content: t("imageBox.zoomInTooltip"),
variant: "dark",
}}
/>

<Icon
Expand All @@ -438,9 +440,11 @@ const SettingsPanel = ({
onClick={() => {
setCurrZoom(1);
}}
tooltipId="reset-zoom-icon-button"
tooltipText={t("imageBox.zoomResetTooltip")}
tooltipVariant="dark"
tooltip={{
id: "reset-zoom-icon-button",
content: t("imageBox.zoomResetTooltip"),
variant: "dark",
}}
/>

<Icon
Expand All @@ -452,9 +456,11 @@ const SettingsPanel = ({
prevZoom <= 1 ? prevZoom : prevZoom - 0.2
);
}}
tooltipId="zoom-out-icon-button"
tooltipText={t("imageBox.zoomOutTooltip")}
tooltipVariant="dark"
tooltip={{
id: "zoom-out-icon-button",
content: t("imageBox.zoomOutTooltip"),
variant: "dark",
}}
/>
</div>

Expand All @@ -467,9 +473,11 @@ const SettingsPanel = ({
onClick={() => {
changeImage();
}}
tooltipId="explorer-icon-button"
tooltipText={t("imageBox.openFileExplorerTooltip")}
tooltipVariant="dark"
tooltip={{
id: "zoom-out-icon-explorer-icon-button",
content: t("imageBox.openFileExplorerTooltip"),
variant: "dark",
}}
/>

<Icon
Expand All @@ -485,9 +493,11 @@ const SettingsPanel = ({
};
dispatch(setImageEditor(imageEditorObj));
}}
tooltipId="image-editor-icon-button"
tooltipText={t("imageBox.openImageEditorTooltip")}
tooltipVariant="dark"
tooltip={{
id: "image-editor-icon-button",
content: t("imageBox.openImageEditorTooltip"),
variant: "dark",
}}
/>

<Icon
Expand All @@ -503,9 +513,11 @@ const SettingsPanel = ({
})
);
}}
tooltipId="delete-icon-button"
tooltipText={t("imageBox.deleteImageFromBox")}
tooltipVariant="dark"
tooltip={{
id: "delete-icon-button",
content: t("imageBox.deleteImageFromBox"),
variant: "dark",
}}
/>
</div>
</div>
Expand Down
27 changes: 12 additions & 15 deletions web/src/components/icon/icon.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,9 +6,17 @@ import { Icon as MuiIcon } from "@mui/material";
import FontIcon from "react-md/lib/FontIcons/FontIcon";

import { BasicTooltip } from "components/tooltip/tooltip";
import { PlacesType } from "react-tooltip";

import cx from "classnames";

type TooltipOption = {
id: string;
content: string;
variant?: "light" | "dark"; // if undefined, based on selected theme
place?: PlacesType;
};

interface IconProps {
name: string | ReactNode; // name either for FontIcon from 'react-md' or Icon from 'material-ui'
useMaterialUiIcon?: boolean;
Expand All @@ -24,9 +32,7 @@ interface IconProps {
noCenterPlace?: boolean; // by default, icon should be inside some container and centered
className?: string;
style?: CSSProperties;
tooltipId?: string;
tooltipText?: string;
tooltipVariant?: "light" | "dark"; // if undefined, based on selected theme
tooltip?: TooltipOption;
}

export const Icon = ({
Expand All @@ -37,9 +43,7 @@ export const Icon = ({
style,
onClick,
noCenterPlace = false,
tooltipId,
tooltipText,
tooltipVariant,
tooltip,
}: IconProps) => {
const { expoDesignData, fgThemingIf } = useExpoDesignData();

Expand All @@ -66,7 +70,7 @@ export const Icon = ({
style={{
color: themeEnabledIconsColor,
}}
data-tooltip-id={tooltipId ? tooltipId : undefined}
data-tooltip-id={tooltip?.id ?? undefined}
>
{/* Icon color either inherited from Button parent or div if some color prop is used */}
{useMaterialUiIcon ? (
Expand All @@ -79,14 +83,7 @@ export const Icon = ({
</FontIcon>
)}

{/* Tooltip if tooltip text is provided */}
{tooltipId && tooltipText && (
<BasicTooltip
id={tooltipId}
content={tooltipText}
variant={tooltipVariant}
/>
)}
{tooltip && <BasicTooltip {...tooltip} />}
</div>
);
};
16 changes: 10 additions & 6 deletions ...src/containers/expo-administration/expo-editor/screen-game-options/answers/AnswerItem.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -64,9 +64,11 @@ const AnswerItem = ({
<Icon
useMaterialUiIcon
name="close"
tooltipId="answer-close-icon-tooltip"
tooltipText={t("closeAnswerTooltip")}
tooltipVariant="dark"
tooltip={{
id: "answer-close-icon-tooltip",
content: t("closeAnswerTooltip"),
variant: "dark",
}}
/>
</Button>
}
Expand Down Expand Up @@ -259,9 +261,11 @@ const AnswerItem = ({
useMaterialUiIcon
name="delete"
style={{ fontSize: "24px" }}
tooltipId="delete-answer-icon-tooltip"
tooltipText={t("deleteAnswerTooltip")}
tooltipVariant="dark"
tooltip={{
id: "delete-answer-icon-tooltip",
content: t("deleteAnswerTooltip"),
variant: "dark",
}}
/>
</Button>
</div>
Expand Down
16 changes: 10 additions & 6 deletions web/src/containers/expo-administration/expo-editor/screen-signpost/LinkItem.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -62,9 +62,11 @@ export const LinkItem = ({
<Icon
useMaterialUiIcon
name="close"
tooltipId="link-close-icon-tooltip"
tooltipText={t("closeIconTooltip")}
tooltipVariant="dark"
tooltip={{
id: "link-close-icon-tooltip",
content: t("closeIconTooltip"),
variant: "dark",
}}
/>
</Button>
}
Expand Down Expand Up @@ -201,9 +203,11 @@ export const LinkItem = ({
useMaterialUiIcon
name="delete"
style={{ fontSize: "24px" }}
tooltipId="link-delete-icon-tooltip"
tooltipText={t("deleteIconTooltip")}
tooltipVariant="dark"
tooltip={{
id: "link-delete-icon-tooltip",
content: t("deleteIconTooltip"),
variant: "dark",
}}
/>
</Button>
</div>
Expand Down
Loading

0 comments on commit c6f8975

Please sign in to comment.