Skip to content

Commit

Permalink
Improve design overall
Browse files Browse the repository at this point in the history
  • Loading branch information
@ClementPasteau
ClementPasteau committed Nov 22, 2024
1 parent d3ad24b commit c6601ae
Show file tree
Hide file tree
Showing 17 changed files with 229 additions and 200 deletions.
125 changes: 52 additions & 73 deletions newIDE/app/src/AssetStore/ExampleStore/ExampleInformationPage.js
View file
Original file line number Diff line number Diff line change
@@ -1,63 +1,51 @@
// @flow
import { Trans } from '@lingui/macro';
import * as React from 'react';
import {
type ExampleShortHeader,
type Example,
getExample,
} from '../../Utils/GDevelopServices/Example';
import { type ExampleShortHeader } from '../../Utils/GDevelopServices/Example';
import { isCompatibleWithAsset } from '../../Utils/GDevelopServices/Asset';
import PlaceholderError from '../../UI/PlaceholderError';
import { MarkdownText } from '../../UI/MarkdownText';
import Text from '../../UI/Text';
import AlertMessage from '../../UI/AlertMessage';
import { getIDEVersion } from '../../Version';
import { Column, Line } from '../../UI/Grid';
import Divider from '@material-ui/core/Divider';
import { ColumnStackLayout, ResponsiveLineStackLayout } from '../../UI/Layout';
import { ExampleThumbnailOrIcon } from './ExampleThumbnailOrIcon';
import Window from '../../Utils/Window';
import { UserPublicProfileChip } from '../../UI/User/UserPublicProfileChip';
import { ExampleDifficultyChip } from '../../UI/ExampleDifficultyChip';
import { ExampleSizeChip } from '../../UI/ExampleSizeChip';
import {
isStartingPointExampleShortHeader,
getStartingPointExampleShortHeaderTitle,
} from '../../ProjectCreation/EmptyAndStartingPointProjects';
const isDev = Window.isDev();

const styles = {
chipsContainer: {
display: 'flex',
flexWrap: 'wrap',
},
};

type Props = {|
exampleShortHeader: ExampleShortHeader,
|};

export const openExampleInWebApp = (example: Example) => {
export const openExampleInWebApp = (exampleShortHeader: ExampleShortHeader) => {
Window.openExternalURL(
`${
isDev ? 'http://localhost:3000' : 'https://editor.gdevelop.io'
}/?create-from-example=${example.slug}`
}/?create-from-example=${exampleShortHeader.slug}`
);
};

const ExampleInformationPage = ({ exampleShortHeader }: Props) => {
const [error, setError] = React.useState<?Error>(null);
const [example, setExample] = React.useState<?Example>(null);

const loadExample = React.useCallback(
async () => {
setError(null);
try {
const example = await getExample(exampleShortHeader);
setExample(example);
} catch (error) {
setError(error);
}
},
[exampleShortHeader]
);

React.useEffect(
() => {
loadExample();
},
[loadExample]
);
const getExampleName = (exampleShortHeader: ExampleShortHeader) => {
return isStartingPointExampleShortHeader(exampleShortHeader)
? getStartingPointExampleShortHeaderTitle(exampleShortHeader)
: exampleShortHeader.name;
};

const ExampleInformationPage = ({ exampleShortHeader }: Props) => {
const isCompatible = isCompatibleWithAsset(
getIDEVersion(),
exampleShortHeader
Expand All @@ -76,57 +64,48 @@ const ExampleInformationPage = ({ exampleShortHeader }: Props) => {
)}
<ResponsiveLineStackLayout noMargin noResponsiveLandscape>
{hasIcon ? (
<Line>
<Line noMargin>
<ExampleThumbnailOrIcon exampleShortHeader={exampleShortHeader} />
</Line>
) : null}
<Column expand>
{
<Line>
<div style={{ flexWrap: 'wrap' }}>
{exampleShortHeader.difficultyLevel && (
<ExampleDifficultyChip
difficultyLevel={exampleShortHeader.difficultyLevel}
/>
)}
{exampleShortHeader.codeSizeLevel && (
<ExampleSizeChip
codeSizeLevel={exampleShortHeader.codeSizeLevel}
<Line>
<div style={styles.chipsContainer}>
{exampleShortHeader.difficultyLevel && (
<ExampleDifficultyChip
difficultyLevel={exampleShortHeader.difficultyLevel}
/>
)}
{exampleShortHeader.codeSizeLevel && (
<ExampleSizeChip
codeSizeLevel={exampleShortHeader.codeSizeLevel}
/>
)}
{exampleShortHeader.authors &&
exampleShortHeader.authors.map(author => (
<UserPublicProfileChip
user={author}
key={author.id}
isClickable
/>
)}
{exampleShortHeader.authors &&
exampleShortHeader.authors.map(author => (
<UserPublicProfileChip
user={author}
key={author.id}
isClickable
/>
))}
</div>
</Line>
}
))}
</div>
</Line>
<Line noMargin>
<Text size="block-title" noMargin>
{getExampleName(exampleShortHeader)}
</Text>
</Line>
<Text size="body" displayInlineAsSpan>
<MarkdownText source={exampleShortHeader.shortDescription} />
</Text>
{exampleShortHeader.description && (
<Text size="body" displayInlineAsSpan>
<MarkdownText source={exampleShortHeader.description} />
</Text>
)}
</Column>
</ResponsiveLineStackLayout>

{example && example.description && (
<Column noMargin>
<Divider />
<Text size="body" displayInlineAsSpan>
<MarkdownText source={example.description} />
</Text>
</Column>
)}
{!example && error && (
<PlaceholderError onRetry={loadExample}>
<Trans>
Can't load the example. Verify your internet connection or try again
later.
</Trans>
</PlaceholderError>
)}
</ColumnStackLayout>
);
};
Expand Down
2 changes: 1 addition & 1 deletion newIDE/app/src/AssetStore/ExampleStore/ExampleThumbnailOrIcon.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ const styles = {
},
};

const ICON_DESKTOP_HEIGHT = 120;
const ICON_DESKTOP_HEIGHT = 150;

type Props = {|
exampleShortHeader: ExampleShortHeader,
Expand Down
82 changes: 41 additions & 41 deletions newIDE/app/src/AssetStore/PrivateGameTemplates/PrivateGameTemplateOwnedInformationPage.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,51 +7,34 @@ import { ResponsiveLineStackLayout } from '../../UI/Layout';
import { Column, Line } from '../../UI/Grid';
import { MarkdownText } from '../../UI/MarkdownText';
import { shouldUseAppStoreProduct } from '../../Utils/AppStorePurchases';
import AuthenticatedUserContext from '../../Profile/AuthenticatedUserContext';
import { PrivateGameTemplateStoreContext } from './PrivateGameTemplateStoreContext';
import { getUserProductPurchaseUsageType } from '../ProductPageHelper';
import ProductLicenseOptions from '../ProductLicense/ProductLicenseOptions';
import { OwnedProductLicense } from '../ProductLicense/ProductLicenseOptions';
import HelpIcon from '../../UI/HelpIcon';
import PrivateGameTemplateThumbnail from './PrivateGameTemplateThumbnail';
import FlatButton from '../../UI/FlatButton';
import RouterContext from '../../MainFrame/RouterContext';

const styles = {
openProductContainer: {
display: 'flex',
paddingLeft: 32, // To align with licensing options.
marginTop: 8,
marginBottom: 8,
},
};

type Props = {|
privateGameTemplateListingData: PrivateGameTemplateListingData,
simulateAppStoreProduct?: boolean,
purchaseUsageType: string,
onStoreProductOpened: () => void,
|};

const PrivateGameTemplateOwnedInformationPage = ({
privateGameTemplateListingData,
simulateAppStoreProduct,
purchaseUsageType,
onStoreProductOpened,
}: Props) => {
const { privateGameTemplateListingDatas } = React.useContext(
PrivateGameTemplateStoreContext
);
const { receivedGameTemplates, gameTemplatePurchases } = React.useContext(
AuthenticatedUserContext
);
const [selectedUsageType, setSelectedUsageType] = React.useState<string>(
privateGameTemplateListingData.prices[0].usageType
);
const shouldUseOrSimulateAppStoreProduct =
shouldUseAppStoreProduct() || !!simulateAppStoreProduct;

const userGameTemplatePurchaseUsageType = React.useMemo(
() =>
getUserProductPurchaseUsageType({
productId: privateGameTemplateListingData
? privateGameTemplateListingData.id
: null,
receivedProducts: receivedGameTemplates,
productPurchases: gameTemplatePurchases,
allProductListingDatas: privateGameTemplateListingDatas,
}),
[
gameTemplatePurchases,
privateGameTemplateListingData,
privateGameTemplateListingDatas,
receivedGameTemplates,
]
);
const shouldUseOrSimulateAppStoreProduct = shouldUseAppStoreProduct();
const { navigateToRoute } = React.useContext(RouterContext);

return (
<Column expand noMargin>
Expand All @@ -62,7 +45,12 @@ const PrivateGameTemplateOwnedInformationPage = ({
simulateAppStoreProduct={shouldUseOrSimulateAppStoreProduct}
/>
</Line>
<Column noMargin>
<Column noMargin expand>
<Line noMargin>
<Text size="block-title">
{privateGameTemplateListingData.name}
</Text>
</Line>
<Line noMargin>
<Text size="sub-title">
<Trans>Licensing</Trans>
Expand All @@ -72,12 +60,24 @@ const PrivateGameTemplateOwnedInformationPage = ({
helpPagePath="https://gdevelop.io/page/asset-store-license-agreement"
/>
</Line>
<ProductLicenseOptions
value={selectedUsageType}
onChange={setSelectedUsageType}
product={privateGameTemplateListingData}
ownedLicense={userGameTemplatePurchaseUsageType}
<OwnedProductLicense
productType="game-template"
ownedLicense={purchaseUsageType}
/>
<div style={styles.openProductContainer}>
<FlatButton
label={<Trans>Open in Store</Trans>}
onClick={() => {
navigateToRoute('store', {
'game-template': `product-${
privateGameTemplateListingData.id
}`,
});
onStoreProductOpened();
}}
primary
/>
</div>
<Text size="body" displayInlineAsSpan noMargin>
<MarkdownText
source={privateGameTemplateListingData.description}
Expand Down
2 changes: 1 addition & 1 deletion newIDE/app/src/AssetStore/PrivateGameTemplates/PrivateGameTemplateThumbnail.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ const styles = {
},
};

const ICON_DESKTOP_HEIGHT = 120;
const ICON_DESKTOP_HEIGHT = 150;

type Props = {|
privateGameTemplateListingData: PrivateGameTemplateListingData,
Expand Down
10 changes: 8 additions & 2 deletions newIDE/app/src/AssetStore/ShopTiles.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ import makeStyles from '@material-ui/core/styles/makeStyles';
import { shouldValidate } from '../UI/KeyboardShortcuts/InteractionKeys';
import { CorsAwareImage } from '../UI/CorsAwareImage';
import { textEllipsisStyle } from '../UI/TextEllipsis';
import { Column, Line } from '../UI/Grid';
import { Column, Line, Spacer } from '../UI/Grid';
import Text from '../UI/Text';
import { Trans } from '@lingui/macro';
import ProductPriceTag, { renderProductPrice } from './ProductPriceTag';
Expand All @@ -29,6 +29,7 @@ import GDevelopThemeContext from '../UI/Theme/GDevelopThemeContext';
import { ResponsiveLineStackLayout } from '../UI/Layout';
import Skeleton from '@material-ui/lab/Skeleton';
import EmptyMessage from '../UI/EmptyMessage';
import { useResponsiveWindowSize } from '../UI/Responsive/ResponsiveWindowMeasurer';

const styles = {
priceTagContainer: {
Expand Down Expand Up @@ -502,6 +503,7 @@ export const PrivateGameTemplateTile = ({
owned: boolean,
disabled?: boolean,
|}) => {
const { isMobile } = useResponsiveWindowSize();
const classesForGridListItem = useStylesForGridListItem({
disabled,
});
Expand Down Expand Up @@ -534,8 +536,9 @@ export const PrivateGameTemplateTile = ({
/>
</div>
<Column>
{isMobile && <Spacer />}
<Line justifyContent="flex-start" noMargin>
<Text style={styles.packTitle} size="body2">
<Text style={styles.packTitle} size="body2" noMargin={isMobile}>
{privateGameTemplateListingData.name}
</Text>
</Line>
Expand Down Expand Up @@ -563,6 +566,7 @@ export const ExampleTile = ({
useQuickCustomizationThumbnail?: boolean,
disabled?: boolean,
|}) => {
const { isMobile } = useResponsiveWindowSize();
const thumbnailImgUrl = React.useMemo(
() => {
if (!exampleShortHeader) return '';
Expand Down Expand Up @@ -619,11 +623,13 @@ export const ExampleTile = ({
/>
)}
<Column>
{isMobile && <Spacer />}
<Line justifyContent={centerTitle ? 'center' : 'flex-start'} noMargin>
<Text
style={styles.packTitle}
size="body2"
hidden={!exampleShortHeader}
noMargin={isMobile}
>
{customTitle
? customTitle
Expand Down
Loading

0 comments on commit c6601ae

Please sign in to comment.