Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Refactoring and improvements #437

Merged
merged 9 commits into from
Jul 18, 2024
49 changes: 29 additions & 20 deletions web/src/components/app-header/LoginAppHeader.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -9,11 +9,6 @@ import { IconButton, Menu, MenuItem } from "@mui/material";
import MenuIcon from "@mui/icons-material/Menu";
import ArrowBackIcon from "@mui/icons-material/ArrowBack";

import { MdEdit } from "react-icons/md";
import { MdEditOff } from "react-icons/md";

import { BasicTooltip } from "components/tooltip/tooltip";

// Models
import { ActiveExpo, Screen } from "models";
import { AppDispatch } from "store/store";
Expand All @@ -24,6 +19,7 @@ import { signOut } from "actions/user-actions";
import { openInNewTab } from "utils";
import { mapScreenTypeValuesToKeys } from "enums/screen-type";
import { useActiveExpoAccess } from "context/active-expo-access-provider/active-expo-access-provider";
import { Icon } from "components/icon/icon";

// - -

Expand Down Expand Up @@ -116,26 +112,39 @@ const LoginAppHeader = ({
</div>
<div className="self-center border-[1px] border-solid border-white rounded-full p-[1px]">
{isReadWriteAccess ? (
<div data-tooltip-id="md-edit-on">
<MdEdit style={{ fontSize: "14px", color: "#cccccc" }} />
<div>
<Icon
useMaterialUiIcon
name="edit-on"
style={{
fontSize: "14px",
color: "#cccccc",
}}
tooltip={{
id: "md-edit-on",
content: t("read-write-permission-tooltip"),
variant: "dark",
}}
/>
</div>
) : (
<div data-tooltip-id="md-edit-off">
<MdEditOff style={{ fontSize: "14px", color: "#cccccc" }} />
<div>
<Icon
useMaterialUiIcon
name="edit-off"
style={{
fontSize: "14px",
color: "#cccccc",
}}
tooltip={{
id: "md-edit-off",
content: t("read-only-permission-tooltip"),
variant: "dark",
}}
/>
</div>
)}
</div>

<BasicTooltip
id="md-edit-on"
content={t("read-write-permission-tooltip")}
variant="dark"
/>
<BasicTooltip
id="md-edit-off"
content={t("read-only-permission-tooltip")}
variant="dark"
/>
</div>
)}
</div>
Expand Down
13 changes: 3 additions & 10 deletions web/src/components/button/button.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,15 +3,8 @@ 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;
};
import { BasicTooltip } from "components/tooltip/BasicTooltip";
import { BasicTooltipProps } from "components/tooltip/tooltip-props";

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

Expand Down
18 changes: 5 additions & 13 deletions web/src/components/dialogs/audio-dialog/audio-dialog.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -12,8 +12,6 @@ import { Icon } from "components/icon/icon";
import { Divider } from "components/divider/divider";
import { Slider } from "@mui/material";

import { Tooltip } from "react-tooltip";

// Actions
import {
setExpoVolumes,
Expand Down Expand Up @@ -160,17 +158,12 @@ const AudioSlider = ({
})
);
}}
tooltip={{
id: `tooltip-${volumeKey}`,
content: tooltipContent ?? "",
}}
>
<div
data-tooltip-id={`tooltip-${volumeKey}`}
data-tooltip-content={tooltipContent}
>
<Icon
name={iconName}
useMaterialUiIcon
style={{ fontSize: "26px" }}
/>
</div>
<Icon name={iconName} useMaterialUiIcon style={{ fontSize: "26px" }} />
</Button>

<Slider
Expand Down Expand Up @@ -219,7 +212,6 @@ const AudioSlider = ({
/>

<div className="text-2xl font-bold">{volumeObj.actualVolume}</div>
<Tooltip id={`tooltip-${volumeKey}`} />
</div>
);
};
29 changes: 12 additions & 17 deletions web/src/components/dialogs/share-expo-dialog/CopyClipboardBox.tsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
import { useMemo } from "react";
import Snackbar from "react-md/lib/Snackbars";
import CopyToClipboard from "react-copy-to-clipboard";
import { Tooltip } from "react-tooltip";

import { Icon } from "components/icon/icon";
import { useBoolean } from "hooks/boolean-hook";
Expand Down Expand Up @@ -32,33 +31,29 @@ export const CopyClipboardBox = ({
<span style={{ color: isLightMode ? undefined : palette["black"] }}>
{text}
</span>
<div
data-tooltip-content={tooltipText}
data-tooltip-id="copy-clipboard-box-tooltip"
style={{ color: isLightMode ? undefined : palette["black"] }}
>
<div style={{ color: isLightMode ? undefined : palette["black"] }}>
<CopyToClipboard
text={text}
onCopy={() => {
setTrue();
onCopy?.();
}}
>
<Icon name="link" />
<Icon
name="link"
tooltip={{
id: "copy-clipboard-box-tooltip",
content: tooltipText ?? "",
place: "left",
variant: "dark",
className:
"!pointer-events-auto !opacity-100 !rounded-none shadow-md",
}}
/>
</CopyToClipboard>
</div>
</div>

{tooltipText && (
<Tooltip
id="copy-clipboard-box-tooltip"
place="left"
variant="dark"
float={false}
className="!pointer-events-auto !opacity-100 !rounded-none shadow-md"
/>
)}

<Snackbar
id="copy-clipboard-box-snackbar"
toasts={toasts}
Expand Down
13 changes: 3 additions & 10 deletions web/src/components/icon/icon.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,18 +5,11 @@ import { useExpoDesignData } from "hooks/view-hooks/expo-design-data-hook";
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 { BasicTooltip } from "components/tooltip/BasicTooltip";
import { BasicTooltipProps } from "components/tooltip/tooltip-props";

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 @@ -32,7 +25,7 @@ interface IconProps {
noCenterPlace?: boolean; // by default, icon should be inside some container and centered
className?: string;
style?: CSSProperties;
tooltip?: TooltipOption;
tooltip?: BasicTooltipProps;
}

export const Icon = ({
Expand Down
Original file line number Diff line number Diff line change
@@ -1,13 +1,7 @@
import { Tooltip as ReactTooltip, PlacesType } from "react-tooltip";
import { Tooltip as ReactTooltip } from "react-tooltip";
import { useExpoDesignData } from "hooks/view-hooks/expo-design-data-hook";

type TooltipProps = {
id: string;
content: string;
variant?: "light" | "dark";
place?: PlacesType;
className?: string;
};
import { BasicTooltipProps } from "./tooltip-props";
import { useMediaDevice } from "context/media-device-provider/media-device-provider";

/**
* Basic tooltip which listens to theme changes if variant is not overridden by prop
Expand All @@ -18,8 +12,14 @@ export const BasicTooltip = ({
variant,
place,
className,
}: TooltipProps) => {
}: BasicTooltipProps) => {
const { isLightMode } = useExpoDesignData();
const { isMobile, isMobileLandscape } = useMediaDevice();

if (isMobile || isMobileLandscape) {
return null;
}

return (
<ReactTooltip
id={id}
Expand Down
9 changes: 9 additions & 0 deletions web/src/components/tooltip/tooltip-props.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
import { PlacesType } from "react-tooltip";

export type BasicTooltipProps = {
id: string;
content: string;
variant?: "light" | "dark";
place?: PlacesType;
className?: string;
};
27 changes: 10 additions & 17 deletions web/src/containers/views/games/GameActionsPanel.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
import { Button } from "components/button/button";
import { Icon } from "components/icon/icon";
import { BasicTooltip } from "components/tooltip/tooltip";
import { useDrawerPanel } from "context/drawer-panel-provider/drawer-panel-provider";
import { useTranslation } from "react-i18next";

Expand Down Expand Up @@ -42,37 +41,31 @@ export const GameActionsPanel = ({
)}

{/* Play again button */}
<div
className="pointer-events-auto"
data-tooltip-id="game-overlay-replay-button-tooltip"
>
<div className="pointer-events-auto">
<Button
iconBefore={<Icon name="replay" />}
color="primary"
style={{ width: "38px", height: "31px", border: "2px solid white" }}
onClick={onGameReset}
/>
<BasicTooltip
id="game-overlay-replay-button-tooltip"
content={t("game.controls.play-again")}
tooltip={{
id: "game-overlay-replay-button-tooltip",
content: t("game.controls.play-again"),
}}
/>
</div>

{/* Done button */}
<div
className="pointer-events-auto"
data-tooltip-id="game-overlay-done-button-tooltip"
>
<div className="pointer-events-auto">
<Button
disabled={isGameFinished}
iconBefore={<Icon name="done" />}
color="primary"
style={{ width: "38px", height: "31px", border: "2px solid white" }}
onClick={onGameFinish}
/>
<BasicTooltip
id="game-overlay-done-button-tooltip"
content={t("game.controls.finished")}
tooltip={{
id: "game-overlay-done-button-tooltip",
content: t("game.controls.finished"),
}}
/>
</div>
</div>
Expand Down
Loading