Kalakoi/GDevelop
1
0
Fork 0
mirror of https://github.com/4ian/GDevelop.git synced 2025-10-15 10:19:04 +00:00
Code Issues Packages Projects Releases Wiki Activity

Improve homepage bottom bar icons on mobile (#7342)

Browse Source
This commit is contained in:
Clément Pasteau
2025-01-23 18:31:04 +01:00
committed by GitHub
parent c4e230d9ba
commit 2d6b2c1753
12 changed files with 232 additions and 147 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
newIDE/app/src/MainFrame/EditorContainers/HomePage/GetStartedSection/SurveyCard.js
View File

@@ -33,8 +33,7 @@ export const SurveyCard = ({
</Text>
<Text noMargin size="body">
<Trans>
Answer a 1-minute survey to personalize your “Get started”
content.
Answer a 1-minute survey to personalize your suggested content.
</Trans>
</Text>
<Spacer />

10
newIDE/app/src/MainFrame/EditorContainers/HomePage/HomePageMenu.js
View File

@@ -6,9 +6,9 @@ import Drawer from '@material-ui/core/Drawer';
import IconButton from '../../../UI/IconButton';
import VerticalTabButton from '../../../UI/VerticalTabButton';
import DoubleChevronArrowLeft from '../../../UI/CustomSvgIcons/DoubleChevronArrowLeft';
import PickAxeIcon from '../../../UI/CustomSvgIcons/PickAxe';
import HammerIcon from '../../../UI/CustomSvgIcons/Hammer';
import SchoolIcon from '../../../UI/CustomSvgIcons/School';
import GoogleControllerIcon from '../../../UI/CustomSvgIcons/GoogleController';
import ControllerIcon from '../../../UI/CustomSvgIcons/Controller';
import BookLeafIcon from '../../../UI/CustomSvgIcons/BookLeaf';
import SunIcon from '../../../UI/CustomSvgIcons/Sun';
import StoreIcon from '../../../UI/CustomSvgIcons/Store';
@@ -63,7 +63,7 @@ export type HomePageMenuTab = {|
const homePageMenuTabs: { [tab: HomeTab]: HomePageMenuTab } = {
'get-started': {
label: <Trans>Get Started</Trans>,
label: <Trans>Start</Trans>,
tab: 'get-started',
id: 'home-get-started-tab',
getIcon: ({ color, fontSize }) => (
@@ -75,7 +75,7 @@ const homePageMenuTabs: { [tab: HomeTab]: HomePageMenuTab } = {
tab: 'create',
id: 'home-create-tab',
getIcon: ({ color, fontSize }) => (
<PickAxeIcon fontSize={fontSize} color={color} />
<HammerIcon fontSize={fontSize} color={color} />
),
},
shop: {
@@ -99,7 +99,7 @@ const homePageMenuTabs: { [tab: HomeTab]: HomePageMenuTab } = {
tab: 'play',
id: 'home-play-tab',
getIcon: ({ color, fontSize }) => (
<GoogleControllerIcon fontSize={fontSize} color={color} />
<ControllerIcon fontSize={fontSize} color={color} />
),
},
'team-view': {

84
newIDE/app/src/MainFrame/EditorContainers/HomePage/HomePageMenuBar.js
View File

@@ -20,18 +20,19 @@ import {
import { Toolbar, ToolbarGroup } from '../../../UI/Toolbar';
import AuthenticatedUserContext from '../../../Profile/AuthenticatedUserContext';
import { SECTION_DESKTOP_SPACING } from './SectionContainer';
import Text from '../../../UI/Text';
const iconSize = 20;
const iconButtonPadding = 8;
const iconSize = 24;
const iconButtonPadding = 4;
/**
* Padding bottom is bigger than padding top to leave space for the Android/iOS
* bottom navigation bar.
*/
const iconButtonMarginBottom = 12;
const iconButtonLabelPadding = 4;
const iconButtonLabelSize = 20;
const toolbarHeight =
iconSize +
2 * iconButtonLabelPadding +
iconButtonLabelSize +
2 * iconButtonPadding +
iconButtonMarginBottom;
export const homepageDesktopMenuBarWidth = 230;
@@ -57,6 +58,12 @@ export const styles = {
fontSize: iconSize,
height: toolbarHeight,
},
buttonContainer: {
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
flex: 1,
},
bottomButtonsContainer: {
marginBottom: 'env(safe-area-inset-bottom)',
},
@@ -65,7 +72,11 @@ export const styles = {
marginBottom: iconButtonMarginBottom,
fontSize: 'inherit',
},
buttonLabel: { padding: iconButtonLabelPadding, display: 'flex' },
icon: {
display: 'flex',
justifyContent: 'center',
marginBottom: 2,
},
};
type Props = {|
@@ -85,7 +96,7 @@ const HomePageMenuBar = ({
}: Props) => {
const { isMobile, isMediumScreen } = useResponsiveWindowSize();
const isMobileOrSmallScreen = isMobile || isMediumScreen;
const theme = React.useContext(GDevelopThemeContext);
const gdevelopTheme = React.useContext(GDevelopThemeContext);
const { limits } = React.useContext(AuthenticatedUserContext);
const tabsToDisplay = getTabsToDisplay({ limits });
const largeScreenOnlyButtons: {
@@ -119,33 +130,54 @@ const HomePageMenuBar = ({
square
style={{
...styles.mobileContainer,
borderTop: `1px solid ${theme.home.separator.color}`,
borderTop: `1px solid ${gdevelopTheme.home.separator.color}`,
}}
>
<Toolbar height={toolbarHeight}>
<ToolbarGroup>
<ToolbarGroup spaceOut>
{tabsToDisplay.map(({ label, tab, getIcon, id }) => {
const isActive = activeTab === tab;
return (
<IconButton
color="default"
key={id}
disableRipple
disableFocusRipple
style={styles.mobileButton}
onClick={() => {
setActiveTab(tab);
<div
style={{
...styles.buttonContainer,
borderTop: `3px solid ${
isActive
? gdevelopTheme.iconButton.selectedBackgroundColor
: // Always keep the border so there's no layout shift.
'transparent'
}`,
...(!isActive
? { color: gdevelopTheme.text.color.secondary }
: {}),
}}
selected={isActive}
id={id}
>
<span style={styles.buttonLabel}>
{getIcon({
color: isActive ? 'inherit' : 'secondary',
fontSize: 'inherit',
})}
</span>
</IconButton>
<IconButton
color="inherit"
key={id}
disableRipple
disableFocusRipple
disableHover
style={styles.mobileButton}
onClick={() => {
setActiveTab(tab);
}}
selected={false}
id={id}
>
<Column noMargin>
<span style={styles.icon}>
{getIcon({
color: 'inherit',
fontSize: 'inherit',
})}
</span>
<Text size="body-small" color="inherit" noMargin>
{label}
</Text>
</Column>
</IconButton>
</div>
);
})}
</ToolbarGroup>
@@ -158,7 +190,7 @@ const HomePageMenuBar = ({
<Paper
style={{
...(isMobileOrSmallScreen ? styles.mobileMenu : styles.desktopMenu),
borderRight: `1px solid ${theme.home.separator.color}`,
borderRight: `1px solid ${gdevelopTheme.home.separator.color}`,
}}
square
background="dark"

2
newIDE/app/src/SceneEditor/SwipeableDrawerEditorsDisplay/BottomToolbar.js
View File

@@ -66,7 +66,7 @@ const BottomToolbar = React.memo<Props>((props: Props) => {
return (
<Paper background="medium" square style={styles.container}>
<Toolbar height={toolbarHeight} paddingBottom={toolbarPaddingBottom}>
<ToolbarGroup>
<ToolbarGroup spaceOut>
{Object.keys(editors).map(editorId => {
const { icon, buttonId } = editors[editorId];
const isSelected = props.selectedEditorId === editorId;

38
newIDE/app/src/UI/CustomSvgIcons/Controller.js Normal file
View File

@@ -0,0 +1,38 @@
import React from 'react';
import SvgIcon from '@material-ui/core/SvgIcon';
export default React.memo(props => (
<SvgIcon
{...props}
width="25"
height="24"
viewBox="0 0 25 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M7.2079 4.25C6.08921 4.25 5.15646 5.04939 4.90073 6.12513C4.21877 8.99403 3.61173 11.5052 2.89195 14.2377C2.42794 15.9991 3.14788 17.6469 4.43117 18.3752C5.07736 18.7419 5.85387 18.8626 6.63456 18.6338C7.41151 18.4061 8.12572 17.8531 8.70885 16.9922C8.94115 16.6493 8.85145 16.1829 8.50851 15.9506C8.16556 15.7183 7.69924 15.808 7.46694 16.151C7.034 16.7901 6.58495 17.0852 6.21265 17.1943C5.84409 17.3024 5.48536 17.2487 5.1715 17.0706C4.5347 16.7092 4.03537 15.7856 4.34247 14.6198C5.06704 11.8691 5.67749 9.3435 6.36006 6.47205C6.46711 6.02173 6.83463 5.75 7.2079 5.75H17.6749C18.0509 5.75 18.4247 6.02298 18.5399 6.47691C18.8684 7.77218 19.4991 10.2222 20.6575 14.6198C20.9646 15.7856 20.4653 16.7092 19.8285 17.0706C19.5146 17.2487 19.1559 17.3024 18.7873 17.1943C18.415 17.0852 17.966 16.7901 17.533 16.151C17.3007 15.808 16.8344 15.7183 16.4915 15.9506C16.1485 16.1829 16.0588 16.6493 16.2911 16.9922C16.8743 17.8531 17.5885 18.4061 18.3654 18.6338C19.1461 18.8626 19.9226 18.7419 20.5688 18.3752C21.8521 17.6469 22.572 15.9991 22.108 14.2377C20.9503 9.84271 20.3208 7.39736 19.9938 6.10808C19.7234 5.04219 18.7908 4.25 17.6749 4.25H7.2079Z"
fill="currentColor"
/>
<path
d="M9.24999 8C9.24999 7.58579 8.9142 7.25 8.49999 7.25C8.08577 7.25 7.74999 7.58579 7.74999 8V8.25H7.49999C7.08577 8.25 6.74999 8.58579 6.74999 9C6.74999 9.41421 7.08577 9.75 7.49999 9.75H7.74999V10C7.74999 10.4142 8.08577 10.75 8.49999 10.75C8.9142 10.75 9.24999 10.4142 9.24999 10V9.75H9.49999C9.9142 9.75 10.25 9.41421 10.25 9C10.25 8.58579 9.9142 8.25 9.49999 8.25H9.24999V8Z"
fill="currentColor"
/>
<path
d="M14.75 9C14.75 8.58579 15.0858 8.25 15.5 8.25H16.5C16.9142 8.25 17.25 8.58579 17.25 9C17.25 9.41421 16.9142 9.75 16.5 9.75H15.5C15.0858 9.75 14.75 9.41421 14.75 9Z"
fill="currentColor"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M6.74999 13.5C6.74999 12.2573 7.75735 11.25 8.99999 11.25C10.2426 11.25 11.25 12.2573 11.25 13.5C11.25 14.7427 10.2426 15.75 8.99999 15.75C7.75735 15.75 6.74999 14.7427 6.74999 13.5ZM8.99999 12.75C8.58577 12.75 8.24999 13.0858 8.24999 13.5C8.24999 13.9142 8.58577 14.25 8.99999 14.25C9.41421 14.25 9.74999 13.9142 9.74999 13.5C9.74999 13.0858 9.41421 12.75 8.99999 12.75Z"
fill="currentColor"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M16 11.25C14.7573 11.25 13.75 12.2573 13.75 13.5C13.75 14.7427 14.7573 15.75 16 15.75C17.2427 15.75 18.25 14.7427 18.25 13.5C18.25 12.2573 17.2427 11.25 16 11.25ZM15.25 13.5C15.25 13.0858 15.5858 12.75 16 12.75C16.4142 12.75 16.75 13.0858 16.75 13.5C16.75 13.9142 16.4142 14.25 16 14.25C15.5858 14.25 15.25 13.9142 15.25 13.5Z"
fill="currentColor"
/>
</SvgIcon>
));

11
newIDE/app/src/UI/CustomSvgIcons/GoogleController.js
View File

@@ -1,11 +0,0 @@
import React from 'react';
import SvgIcon from '@material-ui/core/SvgIcon';
export default React.memo(props => (
<SvgIcon {...props} width="16" height="16" viewBox="0 0 16 16" fill="none">
<path
fill="currentColor"
d="M5.31331 10.6667L3.33331 12.6667C3.11331 12.8667 2.81998 13 2.49998 13C2.19056 13 1.89381 12.8771 1.67502 12.6583C1.45623 12.4395 1.33331 12.1428 1.33331 11.8333V11.6667L1.99998 6.74667C2.06719 5.99709 2.41221 5.29972 2.96729 4.79151C3.52237 4.2833 4.24739 4.00099 4.99998 4H11C12.5733 4 13.86 5.20667 14 6.74667L14.6666 11.6667V11.8333C14.6666 12.1428 14.5437 12.4395 14.3249 12.6583C14.1061 12.8771 13.8094 13 13.5 13C13.18 13 12.8866 12.8667 12.6666 12.6667L10.6866 10.6667H5.31331ZM4.66665 5.33333V6.66667H3.33331V7.33333H4.66665V8.66667H5.33331V7.33333H6.66665V6.66667H5.33331V5.33333H4.66665ZM11 5.33333C10.8674 5.33333 10.7402 5.38601 10.6464 5.47978C10.5527 5.57355 10.5 5.70073 10.5 5.83333C10.5 5.96594 10.5527 6.09312 10.6464 6.18689C10.7402 6.28065 10.8674 6.33333 11 6.33333C11.1326 6.33333 11.2598 6.28065 11.3535 6.18689C11.4473 6.09312 11.5 5.96594 11.5 5.83333C11.5 5.70073 11.4473 5.57355 11.3535 5.47978C11.2598 5.38601 11.1326 5.33333 11 5.33333ZM9.83331 6.5C9.7007 6.5 9.57353 6.55268 9.47976 6.64645C9.38599 6.74022 9.33331 6.86739 9.33331 7C9.33331 7.13261 9.38599 7.25978 9.47976 7.35355C9.57353 7.44732 9.7007 7.5 9.83331 7.5C9.96592 7.5 10.0931 7.44732 10.1869 7.35355C10.2806 7.25978 10.3333 7.13261 10.3333 7C10.3333 6.86739 10.2806 6.74022 10.1869 6.64645C10.0931 6.55268 9.96592 6.5 9.83331 6.5ZM12.1666 6.5C12.034 6.5 11.9069 6.55268 11.8131 6.64645C11.7193 6.74022 11.6666 6.86739 11.6666 7C11.6666 7.13261 11.7193 7.25978 11.8131 7.35355C11.9069 7.44732 12.034 7.5 12.1666 7.5C12.2993 7.5 12.4264 7.44732 12.5202 7.35355C12.614 7.25978 12.6666 7.13261 12.6666 7C12.6666 6.86739 12.614 6.74022 12.5202 6.64645C12.4264 6.55268 12.2993 6.5 12.1666 6.5ZM11 7.66667C10.8674 7.66667 10.7402 7.71935 10.6464 7.81311C10.5527 7.90688 10.5 8.03406 10.5 8.16667C10.5 8.29927 10.5527 8.42645 10.6464 8.52022C10.7402 8.61399 10.8674 8.66667 11 8.66667C11.1326 8.66667 11.2598 8.61399 11.3535 8.52022C11.4473 8.42645 11.5 8.29927 11.5 8.16667C11.5 8.03406 11.4473 7.90688 11.3535 7.81311C11.2598 7.71935 11.1326 7.66667 11 7.66667Z"
/>
</SvgIcon>
));

20
newIDE/app/src/UI/CustomSvgIcons/Hammer.js Normal file
View File

@@ -0,0 +1,20 @@
import React from 'react';
import SvgIcon from '@material-ui/core/SvgIcon';
export default React.memo(props => (
<SvgIcon
{...props}
width="25"
height="24"
viewBox="0 0 25 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M10.8427 1.23901C10.5452 1.0407 10.1491 1.07992 9.89633 1.33272L8.83567 2.39338C8.69501 2.53403 8.616 2.7248 8.616 2.92371C8.616 3.12262 8.69502 3.31339 8.83567 3.45404C10.5106 5.12894 11.2421 6.69567 11.5617 7.81432C11.7222 8.37618 11.7804 8.83058 11.7994 9.13557C11.8038 9.20557 11.8061 9.26768 11.8071 9.3214L2.11811 19.0103C1.82522 19.3032 1.82521 19.7781 2.1181 20.071L4.23942 22.1924C4.38007 22.3331 4.57084 22.4121 4.76975 22.4121C4.96867 22.4121 5.15943 22.3331 5.30009 22.1924L15.0228 12.4696L15.3764 12.8232L14.8461 13.3536C14.5532 13.6465 14.5532 14.1213 14.8461 14.4142L17.3209 16.8891C17.4616 17.0298 17.6523 17.1088 17.8512 17.1088C18.0502 17.1088 18.2409 17.0298 18.3816 16.8891L23.3314 11.9393C23.472 11.7987 23.551 11.6079 23.551 11.409C23.551 11.2101 23.472 11.0193 23.3314 10.8786L20.8565 8.40378C20.5636 8.11089 20.0887 8.11089 19.7958 8.40377L19.2655 8.93412L18.9119 8.58057L19.4423 8.05024C19.6012 7.89136 19.6804 7.66961 19.6583 7.446C19.6362 7.2224 19.5149 7.0205 19.328 6.89586L10.8427 1.23901ZM12.1944 13.1768L11.1337 12.1161L3.70909 19.5407L4.76977 20.6014L12.1944 13.1768ZM13.0783 10.1715C13.1987 10.0511 13.2746 9.89331 13.2934 9.72405L13.2936 9.72213L13.2938 9.71991L13.2944 9.71457L13.2957 9.70037C13.2967 9.68934 13.2979 9.67521 13.2991 9.65807C13.3016 9.62378 13.3042 9.5774 13.3059 9.51965C13.3093 9.40416 13.3091 9.24305 13.2965 9.04202C13.2714 8.6399 13.197 8.07783 13.0039 7.40225C12.6543 6.1786 11.9205 4.60016 10.4137 2.93665L10.5222 2.82815L17.7347 7.63646L17.3209 8.05022C17.1803 8.19087 17.1012 8.38164 17.1012 8.58055C17.1012 8.77947 17.1803 8.97023 17.3209 9.11089L18.7351 10.5251C19.028 10.818 19.5029 10.818 19.7958 10.5251L20.3261 9.99476L21.7404 11.409L17.8513 15.2981L16.4371 13.8839L16.9674 13.3535C17.2603 13.0606 17.2603 12.5857 16.9674 12.2929L15.5532 10.8787C15.2603 10.5858 14.7854 10.5858 14.4925 10.8786L13.255 12.1161L12.1944 11.0555L13.0783 10.1715Z"
fill="currentColor"
/>
</SvgIcon>
));

11
newIDE/app/src/UI/CustomSvgIcons/PickAxe.js
View File

@@ -1,11 +0,0 @@
import React from 'react';
import SvgIcon from '@material-ui/core/SvgIcon';
export default React.memo(props => (
<SvgIcon {...props} width="16" height="16" viewBox="0 0 16 16" fill="none">
<path
fill="currentColor"
d="M9.86003 7.08L2.33336 14.6L1.40002 13.6667L8.92002 6.14L9.86003 7.08ZM12.8467 5.15333L13.24 4.76L12.7134 4.23333L13.14 3.80666L12.1934 2.86L11.7667 3.28666L11.24 2.76L10.8467 3.15333C9.68669 2.20666 8.38002 1.44666 6.98003 0.91333L6.42669 2.10666C7.59336 2.72 8.66669 3.46 9.66669 4.33333L9.33336 4.66666L11.3334 6.66666L11.6667 6.33333C12.54 7.33333 13.28 8.40666 13.8934 9.57333L15.0867 9.02C14.5534 7.62 13.7934 6.31333 12.8467 5.15333Z"
/>
</SvgIcon>
));

4
newIDE/app/src/UI/HelpIcon/__snapshots__/HelpIcon.spec.js.snap
View File

@@ -4,7 +4,7 @@ exports[`HelpIcon renders nothing if the helpPagePath is empty 1`] = `null`;
exports[`HelpIcon renders the icon linking to a help page 1`] = `
<button
className="MuiButtonBase-root MuiIconButton-root makeStyles-root-1 makeStyles-root-3 MuiIconButton-colorSecondary"
className="MuiButtonBase-root MuiIconButton-root makeStyles-root-1 MuiIconButton-colorSecondary"
disabled={false}
onBlur={[Function]}
onClick={[Function]}
@@ -22,7 +22,7 @@ exports[`HelpIcon renders the icon linking to a help page 1`] = `
type="button"
>
<span
className="MuiIconButton-label makeStyles-label-2 makeStyles-label-4"
className="MuiIconButton-label makeStyles-label-2"
>
<svg
aria-hidden={true}

51
newIDE/app/src/UI/IconButton.js
View File

@@ -7,6 +7,7 @@ import { type MessageDescriptor } from '../Utils/i18n/MessageDescriptor.flow';
import { adaptAcceleratorString } from '../UI/AcceleratorString';
import { tooltipEnterDelay } from './Tooltip';
import GDevelopThemeContext from './Theme/GDevelopThemeContext';
import { type GDevelopTheme } from './Theme';
import { makeStyles } from '@material-ui/core/styles';
type IconProps =
@@ -60,25 +61,32 @@ type Props = {|
disableRipple?: boolean,
disableFocusRipple?: boolean,
disableHover?: boolean,
color?: 'default',
color?: 'default' | 'inherit',
|};
const useStyles = makeStyles({
root: props =>
props.color
? {
color: props.color,
}
: undefined,
label: props =>
props.backgroundColor
? {
backgroundColor: props.backgroundColor,
borderRadius: 4,
}
: undefined,
});
const useStylesForIconButton = ({
theme,
selected,
disableHover,
}: {|
theme: GDevelopTheme,
selected?: boolean,
disableHover?: boolean,
|}) =>
makeStyles({
root: {
color: selected ? theme.iconButton.selectedColor : undefined,
'&:hover': disableHover ? { backgroundColor: 'transparent' } : {},
},
label: {
backgroundColor: selected
? theme.iconButton.selectedBackgroundColor
: undefined,
borderRadius: selected ? 4 : undefined,
},
})();
/**
* A button showing just an icon, based on Material-UI icon button.
@@ -92,16 +100,15 @@ const IconButton = React.forwardRef<Props, {||}>((props: Props, ref) => {
acceleratorString,
color,
style,
disableHover,
...otherProps
} = props;
const gdevelopTheme = React.useContext(GDevelopThemeContext);
const classes = useStyles({
// Override Material-UI colors only when the button is selected.
color: selected ? gdevelopTheme.iconButton.selectedColor : undefined,
backgroundColor: selected
? gdevelopTheme.iconButton.selectedBackgroundColor
: undefined,
const classes = useStylesForIconButton({
theme: gdevelopTheme,
selected,
disableHover,
});
const iconButton = (

5
newIDE/app/src/UI/Toolbar.js
View File

@@ -51,7 +51,9 @@ const toolbarGroupStyle = props => ({
flex: 1,
display: 'flex',
alignItems: 'center',
justifyContent: props.firstChild
justifyContent: props.spaceOut
? 'space-around'
: props.firstChild
? 'flex-start'
: props.lastChild
? 'flex-end'
@@ -62,6 +64,7 @@ type ToolbarGroupProps = {|
children?: React.Node,
firstChild?: boolean,
lastChild?: boolean,
spaceOut?: boolean,
|};
export const ToolbarGroup = React.memo<ToolbarGroupProps>(

140
newIDE/app/src/stories/componentStories/HomePage/HomePage.stories.js
View File

@@ -26,6 +26,7 @@ import {
import { GDevelopAssetApi } from '../../../Utils/GDevelopServices/ApiConfigs';
import fakeResourceManagementProps from '../../FakeResourceManagement';
import inAppTutorialDecorator from '../../InAppTutorialDecorator';
import { useResponsiveWindowSize } from '../../../UI/Responsive/ResponsiveWindowMeasurer';
const apiDataServerSideError = {
mockData: [
@@ -71,72 +72,79 @@ const WrappedHomePage = ({
tutorialProgress?: InAppTutorialUserProgress,
inAppTutorialsFetchingError?: string | null,
user: AuthenticatedUser,
|}) => (
<FixedHeightFlexContainer height={1080}>
<PreferencesContext.Provider
value={{
...initialPreferences,
getRecentProjectFiles: () => recentProjectFiles,
getTutorialProgress: () => tutorialProgress,
}}
>
<AuthenticatedUserContext.Provider value={user}>
<ExampleStoreStateProvider>
<TutorialStateProvider>
<HomePage
project={project}
fileMetadata={null}
isActive={true}
projectItemName={null}
setToolbar={() => {}}
canOpen={true}
storageProviders={[CloudStorageProvider]}
onChooseProject={() => action('onChooseProject')()}
onOpenRecentFile={() => action('onOpenRecentFile')()}
onSelectExampleShortHeader={() =>
action('onSelectExampleShortHeader')()
}
onSelectPrivateGameTemplateListingData={() =>
action('onSelectPrivateGameTemplateListingData')()
}
onOpenPrivateGameTemplateListingData={() =>
action('onOpenPrivateGameTemplateListingData')()
}
onOpenVersionHistory={() => action('onOpenVersionHistory')()}
onOpenLanguageDialog={() => action('open language dialog')()}
onOpenNewProjectSetupDialog={() =>
action('onOpenNewProjectSetupDialog')()
}
onOpenTemplateFromTutorial={() =>
action('onOpenTemplateFromTutorial')()
}
onOpenTemplateFromCourseChapter={() =>
action('onOpenTemplateFromCourseChapter')()
}
canSave={true}
onSave={() => action('onSave')()}
selectInAppTutorial={() => action('select in app tutorial')()}
onOpenProfile={() => action('open profile')()}
onOpenPreferences={() => action('open preferences')()}
onOpenAbout={() => action('open about')()}
resourceManagementProps={fakeResourceManagementProps}
onCreateProjectFromExample={action('onCreateProjectFromExample')}
askToCloseProject={async () => true}
closeProject={async () => {}}
gamesList={{
games: null,
fetchGames: async () => {},
gamesFetchingError: null,
onGameUpdated: () => {},
markGameAsSavedIfRelevant: async () => {},
}}
/>
</TutorialStateProvider>
</ExampleStoreStateProvider>
</AuthenticatedUserContext.Provider>
</PreferencesContext.Provider>
</FixedHeightFlexContainer>
);
|}) => {
const { isMobile, isLandscape } = useResponsiveWindowSize();
// Adapt height for storybook to see the bottom menu on mobile.
const fixedHeight = isMobile ? (isLandscape ? 400 : 850) : 1080;
return (
<FixedHeightFlexContainer height={fixedHeight}>
<PreferencesContext.Provider
value={{
...initialPreferences,
getRecentProjectFiles: () => recentProjectFiles,
getTutorialProgress: () => tutorialProgress,
}}
>
<AuthenticatedUserContext.Provider value={user}>
<ExampleStoreStateProvider>
<TutorialStateProvider>
<HomePage
project={project}
fileMetadata={null}
isActive={true}
projectItemName={null}
setToolbar={() => {}}
canOpen={true}
storageProviders={[CloudStorageProvider]}
onChooseProject={() => action('onChooseProject')()}
onOpenRecentFile={() => action('onOpenRecentFile')()}
onSelectExampleShortHeader={() =>
action('onSelectExampleShortHeader')()
}
onSelectPrivateGameTemplateListingData={() =>
action('onSelectPrivateGameTemplateListingData')()
}
onOpenPrivateGameTemplateListingData={() =>
action('onOpenPrivateGameTemplateListingData')()
}
onOpenVersionHistory={() => action('onOpenVersionHistory')()}
onOpenLanguageDialog={() => action('open language dialog')()}
onOpenNewProjectSetupDialog={() =>
action('onOpenNewProjectSetupDialog')()
}
onOpenTemplateFromTutorial={() =>
action('onOpenTemplateFromTutorial')()
}
onOpenTemplateFromCourseChapter={() =>
action('onOpenTemplateFromCourseChapter')()
}
canSave={true}
onSave={() => action('onSave')()}
selectInAppTutorial={() => action('select in app tutorial')()}
onOpenProfile={() => action('open profile')()}
onOpenPreferences={() => action('open preferences')()}
onOpenAbout={() => action('open about')()}
resourceManagementProps={fakeResourceManagementProps}
onCreateProjectFromExample={action(
'onCreateProjectFromExample'
)}
askToCloseProject={async () => true}
closeProject={async () => {}}
gamesList={{
games: null,
fetchGames: async () => {},
gamesFetchingError: null,
onGameUpdated: () => {},
markGameAsSavedIfRelevant: async () => {},
}}
/>
</TutorialStateProvider>
</ExampleStoreStateProvider>
</AuthenticatedUserContext.Provider>
</PreferencesContext.Provider>
</FixedHeightFlexContainer>
);
};
export default {
title: 'HomePage',