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

Add various cosmetic improvement (including scrollbar) (#1714)

Browse Source 
* Color green on icons for current plan
* More precise details on exports
* Move LocalFolderPicker on top
* Styled scrollbar
This commit is contained in:
Aurélien Vivet
2020-05-01 11:55:53 +02:00
committed by GitHub
parent cbad5de106
commit 49418351d4
8 changed files with 239 additions and 165 deletions
Download Patch File Download Diff File Expand all files Collapse all files

302
newIDE/app/src/Profile/SubscriptionDialog.js
View File

@@ -31,6 +31,7 @@ import {
import SubscriptionPendingDialog from './SubscriptionPendingDialog';
import Window from '../Utils/Window';
import Text from '../UI/Text';
import ThemeConsumer from '../UI/Theme/ThemeConsumer';
const styles = {
descriptionText: {
@@ -168,150 +169,169 @@ export default class SubscriptionDialog extends React.Component<Props, State> {
{({ i18n }) => (
<UserProfileContext.Consumer>
{(userProfile: UserProfile) => (
<Dialog
actions={[
<FlatButton
label={<Trans>Close</Trans>}
key="close"
primary={false}
onClick={onClose}
/>,
]}
onRequestClose={onClose}
cannotBeDismissed={true}
open={open}
noMargin
>
<Column>
<Line>
<Text>
<Trans>
Get a subscription to package your games for Android,
Windows, macOS and Linux, use live preview over wifi and
more. With a subscription, you're also supporting the
development of GDevelop, which is an open-source
software.
</Trans>
</Text>
</Line>
</Column>
{getSubscriptionPlans().map(plan => (
<Card key={plan.planId || ''} style={styles.card}>
<CardHeader
title={
<span>
<b>{plan.name}</b> - {this._renderPrice(plan)}
</span>
}
subheader={
plan.smallDescription
? i18n._(plan.smallDescription)
: ''
}
/>
<CardContent>
{plan.descriptionBullets.map(
(descriptionBullet, index) => (
<Column key={index} expand>
<Line noMargin alignItems="center">
<CheckCircle style={styles.bulletIcon} />
<Text style={styles.bulletText}>
{i18n._(descriptionBullet.message)}{' '}
{descriptionBullet.isLocalAppOnly && (
<Trans>(on the desktop app only)</Trans>
)}
</Text>
</Line>
</Column>
)
)}
<Text style={styles.descriptionText}>
{plan.extraDescription
? i18n._(plan.extraDescription)
: ''}
</Text>
</CardContent>
<CardActions style={styles.actions}>
{userProfile.subscription &&
userProfile.subscription.planId === plan.planId ? (
<FlatButton
disabled
label={<Trans>This is your current plan</Trans>}
onClick={() =>
this.choosePlan(i18n, userProfile, plan)
<ThemeConsumer>
{muiTheme => (
<Dialog
actions={[
<FlatButton
label={<Trans>Close</Trans>}
key="close"
primary={false}
onClick={onClose}
/>,
]}
onRequestClose={onClose}
cannotBeDismissed={true}
open={open}
noMargin
>
<Column>
<Line>
<Text>
<Trans>
Get a subscription to package your games for
Android, Windows, macOS and Linux, use live preview
over wifi and more. With a subscription, you're also
supporting the development of GDevelop, which is an
open-source software.
</Trans>
</Text>
</Line>
</Column>
{getSubscriptionPlans().map(plan => (
<Card key={plan.planId || ''} style={styles.card}>
<CardHeader
title={
<span>
<b>{plan.name}</b> - {this._renderPrice(plan)}
</span>
}
subheader={
plan.smallDescription
? i18n._(plan.smallDescription)
: ''
}
/>
) : plan.planId ? (
<LeftLoader isLoading={this._isLoading(userProfile)}>
<RaisedButton
primary
disabled={this._isLoading(userProfile)}
label={<Trans>Choose this plan</Trans>}
onClick={() =>
this.choosePlan(i18n, userProfile, plan)
}
/>
</LeftLoader>
) : (
<LeftLoader isLoading={this._isLoading(userProfile)}>
<FlatButton
disabled={this._isLoading(userProfile)}
label={<Trans>Cancel your subscription</Trans>}
onClick={() =>
this.choosePlan(i18n, userProfile, plan)
}
/>
</LeftLoader>
)}
</CardActions>
</Card>
))}
<Column>
<Line>
<EmptyMessage>
<Trans>
Subscriptions can be stopped at any time. GDevelop uses
Stripe.com for secure payment. No credit card data is
stored by GDevelop: everything is managed by Stripe
secure infrastructure.
</Trans>
</EmptyMessage>
</Line>
</Column>
{!userProfile.authenticated && (
<PlaceholderMessage>
<Text>
<Trans>
Create a GDevelop account to continue. It's free and
you'll be able to access to online services like
one-click build for Android:
</Trans>
</Text>
<RaisedButton
label={<Trans>Create my account</Trans>}
primary
onClick={userProfile.onLogin}
/>
<FlatButton
label={<Trans>Not now, thanks</Trans>}
onClick={onClose}
/>
</PlaceholderMessage>
<CardContent>
{plan.descriptionBullets.map(
(descriptionBullet, index) => (
<Column key={index} expand>
<Line noMargin alignItems="center">
{userProfile.subscription &&
userProfile.subscription.planId ===
plan.planId ? (
<CheckCircle
style={{
...styles.bulletIcon,
...{ color: muiTheme.message.valid },
}}
/>
) : (
<CheckCircle style={styles.bulletIcon} />
)}
<Text style={styles.bulletText}>
{i18n._(descriptionBullet.message)}{' '}
{descriptionBullet.isLocalAppOnly && (
<Trans>(on the desktop app only)</Trans>
)}
</Text>
</Line>
</Column>
)
)}
<Text style={styles.descriptionText}>
{plan.extraDescription
? i18n._(plan.extraDescription)
: ''}
</Text>
</CardContent>
<CardActions style={styles.actions}>
{userProfile.subscription &&
userProfile.subscription.planId === plan.planId ? (
<FlatButton
disabled
label={<Trans>This is your current plan</Trans>}
onClick={() =>
this.choosePlan(i18n, userProfile, plan)
}
/>
) : plan.planId ? (
<LeftLoader
isLoading={this._isLoading(userProfile)}
>
<RaisedButton
primary
disabled={this._isLoading(userProfile)}
label={<Trans>Choose this plan</Trans>}
onClick={() =>
this.choosePlan(i18n, userProfile, plan)
}
/>
</LeftLoader>
) : (
<LeftLoader
isLoading={this._isLoading(userProfile)}
>
<FlatButton
disabled={this._isLoading(userProfile)}
label={<Trans>Cancel your subscription</Trans>}
onClick={() =>
this.choosePlan(i18n, userProfile, plan)
}
/>
</LeftLoader>
)}
</CardActions>
</Card>
))}
<Column>
<Line>
<EmptyMessage>
<Trans>
Subscriptions can be stopped at any time. GDevelop
uses Stripe.com for secure payment. No credit card
data is stored by GDevelop: everything is managed by
Stripe secure infrastructure.
</Trans>
</EmptyMessage>
</Line>
</Column>
{!userProfile.authenticated && (
<PlaceholderMessage>
<Text>
<Trans>
Create a GDevelop account to continue. It's free and
you'll be able to access to online services like
one-click build for Android:
</Trans>
</Text>
<RaisedButton
label={<Trans>Create my account</Trans>}
primary
onClick={userProfile.onLogin}
/>
<FlatButton
label={<Trans>Not now, thanks</Trans>}
onClick={onClose}
/>
</PlaceholderMessage>
)}
{subscriptionPendingDialogOpen && (
<SubscriptionPendingDialog
userProfile={userProfile}
onClose={() => {
this.setState(
{
subscriptionPendingDialogOpen: false,
},
() => userProfile.onRefreshUserProfile()
);
}}
/>
)}
</Dialog>
)}
{subscriptionPendingDialogOpen && (
<SubscriptionPendingDialog
userProfile={userProfile}
onClose={() => {
this.setState(
{
subscriptionPendingDialogOpen: false,
},
() => userProfile.onRefreshUserProfile()
);
}}
/>
)}
</Dialog>
</ThemeConsumer>
)}
</UserProfileContext.Consumer>
)}

26
newIDE/app/src/ProjectCreation/LocalExamples.js
View File

@@ -1,5 +1,5 @@
// @flow
import { t } from '@lingui/macro';
import { t, Trans } from '@lingui/macro';
import { I18n } from '@lingui/react';
import { type I18n as I18nType } from '@lingui/core';
import React, { Component } from 'react';
@@ -7,6 +7,7 @@ import Divider from '@material-ui/core/Divider';
import LocalFolderPicker from '../UI/LocalFolderPicker';
import { sendNewGameCreated } from '../Utils/Analytics/EventSender';
import { Column, Line } from '../UI/Grid';
import Text from '../UI/Text';
import { findExamples } from './LocalExamplesFinder';
import optionalRequire from '../Utils/OptionalRequire.js';
import { findEmptyPath } from './LocalPathFinder';
@@ -109,13 +110,6 @@ export default class LocalExamples extends Component<Props, State> {
<I18n>
{({ i18n }) => (
<Column noMargin>
<ExamplesList
exampleNames={this.state.exampleNames}
onCreateFromExample={exampleName =>
this.createFromExample(i18n, exampleName)
}
/>
<Divider />
<Line expand>
<Column expand>
<LocalFolderPicker
@@ -126,6 +120,22 @@ export default class LocalExamples extends Component<Props, State> {
/>
</Column>
</Line>
<Divider />
<Line>
<Column>
<Text>
<Trans>Choose or search for an example to open:</Trans>
</Text>
</Column>
</Line>
<Line>
<ExamplesList
exampleNames={this.state.exampleNames}
onCreateFromExample={exampleName =>
this.createFromExample(i18n, exampleName)
}
/>
</Line>
</Column>
)}
</I18n>

22
newIDE/app/src/ProjectCreation/LocalStarters.js
View File

@@ -99,6 +99,17 @@ export default class LocalStarters extends Component<Props, State> {
<I18n>
{({ i18n }) => (
<Column noMargin>
<Line expand>
<Column expand>
<LocalFolderPicker
fullWidth
value={this.state.outputPath}
onChange={this._handleChangePath}
type="create-game"
/>
</Column>
</Line>
<Divider />
<Line>
<Column>
<Text>
@@ -239,17 +250,6 @@ export default class LocalStarters extends Component<Props, State> {
</Line>
</Column>
</Line>
<Divider />
<Line expand>
<Column expand>
<LocalFolderPicker
fullWidth
value={this.state.outputPath}
onChange={this._handleChangePath}
type="create-game"
/>
</Column>
</Line>
</Column>
)}
</I18n>

20
newIDE/app/src/UI/Theme/DarkTheme/Global.css Normal file
View File

@@ -0,0 +1,20 @@
/* Width */
::-webkit-scrollbar {
width: 10px;
}
/* Track */
::-webkit-scrollbar-track {
background: #f1f1f100;
}
/* Handle */
::-webkit-scrollbar-thumb {
background: #8d8d8d;
border-radius: 10px;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: #919191;
}

2
newIDE/app/src/UI/Theme/DarkTheme/index.js
View File

@@ -6,6 +6,7 @@ import './EventsSheet.css';
import 'react-virtualized/styles.css'; // Styles for react-virtualized Table
import './Table.css';
import './Markdown.css';
import './Global.css';
const almostWhite = '#EEE';
const lightWhite = '#DDD';
@@ -44,6 +45,7 @@ const gdevelopTheme = {
message: {
warning: '#ffa500',
error: '#f00',
valid: '#00db00',
},
toolbar: {
backgroundColor: backgroundColor,

20
newIDE/app/src/UI/Theme/DefaultTheme/Global.css Normal file
View File

@@ -0,0 +1,20 @@
/* Width */
::-webkit-scrollbar {
width: 10px;
}
/* Track */
::-webkit-scrollbar-track {
background: #f1f1f100;
}
/* Handle */
::-webkit-scrollbar-thumb {
background: #8d8d8d;
border-radius: 10px;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: #919191;
}

2
newIDE/app/src/UI/Theme/DefaultTheme/index.js
View File

@@ -5,6 +5,7 @@ import './EventsSheet.css';
import 'react-virtualized/styles.css'; // Styles for react-virtualized Table
import './Table.css';
import './Markdown.css';
import './Global.css';
const gdevelopPurple = '#9100ce';
const gdevelopLightBlue = '#4ab0e4';
@@ -40,6 +41,7 @@ const gdevelopTheme = {
message: {
warning: '#ffa500',
error: '#f00',
valid: '#00db00',
},
toolbar: {
backgroundColor: backgroundColor,

10
newIDE/app/src/Utils/GDevelopServices/Usage.js
View File

@@ -51,10 +51,10 @@ export const getSubscriptionPlans = (): Array<PlanDetails> => [
smallDescription: t`Ideal for advanced game makers`,
descriptionBullets: [
{
message: t`Package your game for Android up to 70 times a day.`,
message: t`Package your game for Android up to 70 times each 24 hours.`,
},
{
message: t`One-click packaging for Windows, macOS and Linux up to 70 times a day.`,
message: t`One-click packaging for Windows, macOS and Linux up to 70 times each 24 hours.`,
},
{
message: t`Use Live Preview over Wifi to quickly test your game on mobiles and tablets.`,
@@ -77,10 +77,10 @@ export const getSubscriptionPlans = (): Array<PlanDetails> => [
smallDescription: t`Ideal for beginners`,
descriptionBullets: [
{
message: t`Package your game for Android up to 10 times a day.`,
message: t`Package your game for Android up to 10 times each 24 hours.`,
},
{
message: t`One-click packaging for Windows, macOS and Linux up to 10 times a day.`,
message: t`One-click packaging for Windows, macOS and Linux up to 10 times each 24 hours.`,
},
{
message: t`Use Live Preview over Wifi to quickly test your game on mobiles and tablets.`,
@@ -102,7 +102,7 @@ export const getSubscriptionPlans = (): Array<PlanDetails> => [
monthlyPriceInEuros: 0,
descriptionBullets: [
{
message: t`You can use GDevelop for free! Online packaging for Android, Windows, macOS and Linux is limited to twice a day to avoid overloading the services.`,
message: t`You can use GDevelop for free! Online packaging for Android, Windows, macOS and Linux is limited to twice each 24 hours. to avoid overloading the services.`,
},
],
},