-
Notifications
You must be signed in to change notification settings - Fork 887
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Improve design overall & only 1 step in dialog
- Loading branch information
1 parent
005ea4b
commit d3ad24b
Showing
15 changed files
with
594 additions
and
361 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
93 changes: 93 additions & 0 deletions
93
newIDE/app/src/AssetStore/PrivateGameTemplates/PrivateGameTemplateOwnedInformationPage.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,93 @@ | ||
| // @flow | ||
| import * as React from 'react'; | ||
| import { type PrivateGameTemplateListingData } from '../../Utils/GDevelopServices/Shop'; | ||
| import Text from '../../UI/Text'; | ||
| import { Trans } from '@lingui/macro'; | ||
| 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 HelpIcon from '../../UI/HelpIcon'; | ||
| import PrivateGameTemplateThumbnail from './PrivateGameTemplateThumbnail'; | ||
|
|
||
| type Props = {| | ||
| privateGameTemplateListingData: PrivateGameTemplateListingData, | ||
| simulateAppStoreProduct?: boolean, | ||
| |}; | ||
|
|
||
| const PrivateGameTemplateOwnedInformationPage = ({ | ||
| privateGameTemplateListingData, | ||
| simulateAppStoreProduct, | ||
| }: 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, | ||
| ] | ||
| ); | ||
|
|
||
| return ( | ||
| <Column expand noMargin> | ||
| <ResponsiveLineStackLayout noMargin noResponsiveLandscape> | ||
| <Line> | ||
| <PrivateGameTemplateThumbnail | ||
| privateGameTemplateListingData={privateGameTemplateListingData} | ||
| simulateAppStoreProduct={shouldUseOrSimulateAppStoreProduct} | ||
| /> | ||
| </Line> | ||
| <Column noMargin> | ||
| <Line noMargin> | ||
| <Text size="sub-title"> | ||
| <Trans>Licensing</Trans> | ||
| </Text> | ||
| <HelpIcon | ||
| size="small" | ||
| helpPagePath="https://gdevelop.io/page/asset-store-license-agreement" | ||
| /> | ||
| </Line> | ||
| <ProductLicenseOptions | ||
| value={selectedUsageType} | ||
| onChange={setSelectedUsageType} | ||
| product={privateGameTemplateListingData} | ||
| ownedLicense={userGameTemplatePurchaseUsageType} | ||
| /> | ||
| <Text size="body" displayInlineAsSpan noMargin> | ||
| <MarkdownText | ||
| source={privateGameTemplateListingData.description} | ||
| allowParagraphs | ||
| /> | ||
| </Text> | ||
| </Column> | ||
| </ResponsiveLineStackLayout> | ||
| </Column> | ||
| ); | ||
| }; | ||
|
|
||
| export default PrivateGameTemplateOwnedInformationPage; |
59 changes: 59 additions & 0 deletions
59
newIDE/app/src/AssetStore/PrivateGameTemplates/PrivateGameTemplateThumbnail.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,59 @@ | ||
| // @flow | ||
| import * as React from 'react'; | ||
| import { type PrivateGameTemplateListingData } from '../../Utils/GDevelopServices/Shop'; | ||
| import { CorsAwareImage } from '../../UI/CorsAwareImage'; | ||
| import { useResponsiveWindowSize } from '../../UI/Responsive/ResponsiveWindowMeasurer'; | ||
| import { iconWithBackgroundStyle } from '../../UI/IconContainer'; | ||
|
|
||
| const iconPadding = 1; | ||
|
|
||
| const styles = { | ||
| iconBackground: { | ||
| display: 'flex', | ||
| justifyContent: 'left', | ||
| }, | ||
| icon: { | ||
| ...iconWithBackgroundStyle, | ||
| padding: iconPadding, | ||
| aspectRatio: '16 / 9', | ||
| }, | ||
| }; | ||
|
|
||
| const ICON_DESKTOP_HEIGHT = 120; | ||
|
|
||
| type Props = {| | ||
| privateGameTemplateListingData: PrivateGameTemplateListingData, | ||
| simulateAppStoreProduct: boolean, | ||
| |}; | ||
|
|
||
| const PrivateGameTemplateThumbnail = ({ | ||
| privateGameTemplateListingData, | ||
| simulateAppStoreProduct, | ||
| }: Props) => { | ||
| const { isMobile, isLandscape } = useResponsiveWindowSize(); | ||
| const iconUrl = React.useMemo( | ||
| () => | ||
| (simulateAppStoreProduct && | ||
| privateGameTemplateListingData.appStoreThumbnailUrls && | ||
| privateGameTemplateListingData.appStoreThumbnailUrls[0]) || | ||
| privateGameTemplateListingData.thumbnailUrls[0], | ||
| [privateGameTemplateListingData, simulateAppStoreProduct] | ||
| ); | ||
|
|
||
| // Make the icon be full width on mobile. | ||
| const height = isMobile && !isLandscape ? undefined : ICON_DESKTOP_HEIGHT; | ||
| const width = | ||
| isMobile && !isLandscape ? `calc(100% - ${2 * iconPadding}px)` : undefined; | ||
|
|
||
| return ( | ||
| <div style={styles.iconBackground}> | ||
| <CorsAwareImage | ||
| style={{ ...styles.icon, height, width }} | ||
| src={iconUrl} | ||
| alt={privateGameTemplateListingData.name} | ||
| /> | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| export default PrivateGameTemplateThumbnail; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.