Skip to content

Commit

Permalink
Add more visible placeholder when no effects are present, with help b…
Browse files Browse the repository at this point in the history 
…utton
  • Loading branch information
@4ian
4ian committed Aug 20, 2021
1 parent a19f244 commit 4a98a4a
Show file tree
Hide file tree
Showing 10 changed files with 246 additions and 206 deletions.
52 changes: 19 additions & 33 deletions newIDE/app/src/BehaviorsEditor/EmptyBehaviorsPlaceholder.js
View file
Original file line number Diff line number Diff line change
@@ -1,43 +1,29 @@
// @flow
import { Trans } from '@lingui/macro';

import * as React from 'react';
import HelpButton from '../UI/HelpButton';
import Text from '../UI/Text';
import Paper from '@material-ui/core/Paper';
import { Line, Column } from '../UI/Grid';
import { EmptyPlaceholder } from '../UI/EmptyPlaceholder';

const EmptyBehaviorsPlaceholder = () => (
<Column alignItems="center">
<Paper
variant="outlined"
style={{
maxWidth: '450px',
whiteSpace: 'normal',
}}
>
<Column>
<Text>
<Trans>There are no behaviors here.</Trans>
</Text>
<Text>
<Trans>
Behaviors are predefined actions that are assigned to objects.
Behaviors can have no or multiple parameters.
</Trans>
</Text>
<Text>
<Trans>
Add your first behavior using the button "Add a behavior to the
object".
</Trans>
</Text>
<Line expand justifyContent="flex-end">
<HelpButton helpPagePath="/behaviors" />
</Line>
</Column>
</Paper>
</Column>
<EmptyPlaceholder
renderButtons={() => <HelpButton helpPagePath="/behaviors" />}
>
<Text>
<Trans>There are no behaviors here.</Trans>
</Text>
<Text>
<Trans>
Behaviors are predefined actions that are assigned to objects. Behaviors
can have no or multiple parameters.
</Trans>
</Text>
<Text>
<Trans>
Add your first behavior using the button "Add a behavior to the object".
</Trans>
</Text>
</EmptyPlaceholder>
);

export default EmptyBehaviorsPlaceholder;
231 changes: 115 additions & 116 deletions newIDE/app/src/BehaviorsEditor/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -109,29 +109,78 @@ const BehaviorsEditor = (props: Props) => {

return (
<Column noMargin expand useFullHeight>
<ScrollView>
{allBehaviorNames.length === 0 && (
<div style={{ height: 300, display: 'flex' }}>
<Line expand alignItems="center" justifyContent="center">
<EmptyBehaviorsPlaceholder />
</Line>
</div>
)}
{allBehaviorNames.map((behaviorName, index) => {
const behaviorContent = object.getBehavior(behaviorName);
const behaviorTypeName = behaviorContent.getTypeName();
{allBehaviorNames.length === 0 ? (
<Column noMargin expand justifyContent="center">
<EmptyBehaviorsPlaceholder />
</Column>
) : (
<ScrollView>
{allBehaviorNames.map((behaviorName, index) => {
const behaviorContent = object.getBehavior(behaviorName);
const behaviorTypeName = behaviorContent.getTypeName();

const behaviorMetadata = gd.MetadataProvider.getBehaviorMetadata(
gd.JsPlatform.get(),
behaviorTypeName
);
if (gd.MetadataProvider.isBadBehaviorMetadata(behaviorMetadata)) {
return (
<Accordion key={behaviorName} defaultExpanded>
<AccordionHeader
actions={[
<IconButton
key="delete"
onClick={ev => {
ev.stopPropagation();
onRemoveBehavior(behaviorName);
}}
>
<Delete />
</IconButton>,
]}
>
<MiniToolbarText firstChild>
<Trans>Unknown behavior</Trans>{' '}
</MiniToolbarText>
<Column noMargin expand>
<TextField margin="none" value={behaviorName} disabled />
</Column>
</AccordionHeader>
<AccordionBody>
<EmptyMessage>
<Trans>
This behavior is unknown. It might be a behavior that
was defined in an extension and that was later removed.
You should delete it.
</Trans>
</EmptyMessage>
</AccordionBody>
</Accordion>
);
}

const behavior = behaviorMetadata.get();
const BehaviorComponent = BehaviorsEditorService.getEditor(
behaviorTypeName
);
const tutorialHints = getBehaviorTutorialHints(behaviorTypeName);
const enabledTutorialHints = tutorialHints.filter(
hint => !values.hiddenTutorialHints[hint.identifier]
);
const iconUrl = behaviorMetadata.getIconFilename();

const behaviorMetadata = gd.MetadataProvider.getBehaviorMetadata(
gd.JsPlatform.get(),
behaviorTypeName
);
if (gd.MetadataProvider.isBadBehaviorMetadata(behaviorMetadata)) {
return (
<Accordion key={behaviorName} defaultExpanded>
<AccordionHeader
actions={[
<HelpIcon
key="help"
size="small"
helpPagePath={behaviorMetadata.getHelpPath()}
/>,
<IconButton
key="delete"
size="small"
onClick={ev => {
ev.stopPropagation();
onRemoveBehavior(behaviorName);
Expand All @@ -141,112 +190,62 @@ const BehaviorsEditor = (props: Props) => {
</IconButton>,
]}
>
<MiniToolbarText firstChild>
<Trans>Unknown behavior</Trans>{' '}
</MiniToolbarText>
<Column noMargin expand>
<TextField margin="none" value={behaviorName} disabled />
{iconUrl ? (
<IconContainer
src={iconUrl}
alt={behaviorMetadata.getFullName()}
size={20}
/>
) : null}
<Column expand>
<TextField
value={behaviorName}
hintText={t`Behavior name`}
margin="none"
fullWidth
disabled
onChange={(e, text) =>
onChangeBehaviorName(behaviorContent, text)
}
/>
</Column>
</AccordionHeader>
<AccordionBody>
<EmptyMessage>
<Trans>
This behavior is unknown. It might be a behavior that was
defined in an extension and that was later removed. You
should delete it.
</Trans>
</EmptyMessage>
</AccordionBody>
</Accordion>
);
}

const behavior = behaviorMetadata.get();
const BehaviorComponent = BehaviorsEditorService.getEditor(
behaviorTypeName
);
const tutorialHints = getBehaviorTutorialHints(behaviorTypeName);
const enabledTutorialHints = tutorialHints.filter(
hint => !values.hiddenTutorialHints[hint.identifier]
);
const iconUrl = behaviorMetadata.getIconFilename();

return (
<Accordion key={behaviorName} defaultExpanded>
<AccordionHeader
actions={[
<HelpIcon
key="help"
size="small"
helpPagePath={behaviorMetadata.getHelpPath()}
/>,
<IconButton
key="delete"
size="small"
onClick={ev => {
ev.stopPropagation();
onRemoveBehavior(behaviorName);
}}
<Column
expand
noMargin
// Avoid Physics2 behavior overflow on small screens
noOverflowParent
>
<Delete />
</IconButton>,
]}
>
{iconUrl ? (
<IconContainer
src={iconUrl}
alt={behaviorMetadata.getFullName()}
size={20}
/>
) : null}
<Column expand>
<TextField
value={behaviorName}
hintText={t`Behavior name`}
margin="none"
fullWidth
disabled
onChange={(e, text) =>
onChangeBehaviorName(behaviorContent, text)
}
/>
</Column>
</AccordionHeader>
<AccordionBody>
<Column
expand
noMargin
// Avoid Physics2 behavior overflow on small screens
noOverflowParent
>
{enabledTutorialHints.length ? (
{enabledTutorialHints.length ? (
<Line>
<ColumnStackLayout expand>
{tutorialHints.map(tutorialHint => (
<DismissableTutorialMessage
key={tutorialHint.identifier}
tutorialHint={tutorialHint}
/>
))}
</ColumnStackLayout>
</Line>
) : null}
<Line>
<ColumnStackLayout expand>
{tutorialHints.map(tutorialHint => (
<DismissableTutorialMessage
key={tutorialHint.identifier}
tutorialHint={tutorialHint}
/>
))}
</ColumnStackLayout>
<BehaviorComponent
behavior={behavior}
behaviorContent={behaviorContent}
project={project}
resourceSources={props.resourceSources}
onChooseResource={props.onChooseResource}
resourceExternalEditors={props.resourceExternalEditors}
/>
</Line>
) : null}
<Line>
<BehaviorComponent
behavior={behavior}
behaviorContent={behaviorContent}
project={project}
resourceSources={props.resourceSources}
onChooseResource={props.onChooseResource}
resourceExternalEditors={props.resourceExternalEditors}
/>
</Line>
</Column>
</AccordionBody>
</Accordion>
);
})}
</ScrollView>
</Column>
</AccordionBody>
</Accordion>
);
})}
</ScrollView>
)}
<Column>
<Line justifyContent="flex-end" expand>
<RaisedButton
Expand Down
37 changes: 37 additions & 0 deletions newIDE/app/src/EffectsList/EmptyEffectsPlaceholder.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
// @flow
import { Trans } from '@lingui/macro';
import * as React from 'react';
import HelpButton from '../UI/HelpButton';
import Text from '../UI/Text';
import { EmptyPlaceholder } from '../UI/EmptyPlaceholder';

type Props = {|
target: 'object' | 'layer',
|};

export const EmptyEffectsPlaceholder = (props: Props) => (
<EmptyPlaceholder
renderButtons={() => (
<HelpButton
helpPagePath={
props.target === 'object'
? '/objects/effects'
: '/interface/scene-editor/layer-effects'
}
/>
)}
>
<Text>
<Trans>
Effects can change how layers or objects are rendered on screen.
</Trans>
</Text>
<Text>
<Trans>
After adding an effect, set up its parameters. Launch a preview to see
the result. Using the events and the name of the effect, you can change
the parameters during the game.
</Trans>
</Text>
</EmptyPlaceholder>
);
Loading

0 comments on commit 4a98a4a

Please sign in to comment.