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 selection of a Scene in an instruction with a drop-down list (#5154)

Browse Source
This commit is contained in:
Clément Pasteau
2023-03-24 16:27:38 +01:00
committed by GitHub
parent 6d25496f89
commit 356bde650b
42 changed files with 329 additions and 309 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
newIDE/app/src/AssetStore/AssetDetails.js
View File

@@ -458,16 +458,21 @@ export const AssetDetails = React.forwardRef<Props, AssetDetailsInterface>(
textAlign="center"
disableUnderline
>
{assetAnimations.map(animation => (
<SelectOption
key={animation.name}
value={animation.name}
primaryText={
makeFirstLetterUppercase(animation.name) ||
t`Default` // Display default for animations with no name.
}
/>
))}
{assetAnimations.map(animation => {
const isAnimationNameEmpty = !animation.name;
return (
<SelectOption
key={animation.name}
value={animation.name}
label={
!isAnimationNameEmpty
? makeFirstLetterUppercase(animation.name)
: t`Default` // Display default for animations with no name.
}
shouldNotTranslate={!isAnimationNameEmpty}
/>
);
})}
</SelectField>
<div style={styles.arrowContainer}>
<IconButton

4
newIDE/app/src/AssetStore/ExtensionStore/index.js
View File

@@ -108,12 +108,12 @@ export const ExtensionStore = ({
setChosenCategory(value);
}}
>
<SelectOption value="" primaryText={t`All categories`} />
<SelectOption value="" label={t`All categories`} />
{allCategories.map(category => (
<SelectOption
key={category}
value={category}
primaryText={category}
label={category}
/>
))}
</SearchBarSelectField>

4
newIDE/app/src/BehaviorTypeSelector/index.js
View File

@@ -55,14 +55,14 @@ export default class BehaviorTypeSelector extends React.Component<
<SelectOption
key={metadata.type}
value={metadata.type}
primaryText={metadata.fullName}
label={metadata.fullName}
disabled={
metadata.objectType !== '' && metadata.objectType !== objectType
}
/>
))}
{!valueIsListed && value && (
<SelectOption value={value} primaryText={value} />
<SelectOption value={value} label={value} />
)}
</SelectField>
);

32
newIDE/app/src/BehaviorsEditor/Editors/Physics2Editor/index.js
View File

@@ -149,17 +149,13 @@ const Physics2Editor = (props: Props) => {
<SelectOption
key={'dynamic'}
value={'Dynamic'}
primaryText={t`Dynamic`}
/>,
<SelectOption
key={'static'}
value={'Static'}
primaryText={t`Static`}
label={t`Dynamic`}
/>,
<SelectOption key={'static'} value={'Static'} label={t`Static`} />,
<SelectOption
key={'kinematic'}
value={'Kinematic'}
primaryText={t`Kinematic`}
label={t`Kinematic`}
/>,
]}
</SelectField>
@@ -211,18 +207,10 @@ const Physics2Editor = (props: Props) => {
updateBehaviorProperty('shape', newValue)
}
>
<SelectOption key={'box'} value={'Box'} primaryText={t`Box`} />
<SelectOption
key={'circle'}
value={'Circle'}
primaryText={t`Circle`}
/>
<SelectOption key={'edge'} value={'Edge'} primaryText={t`Edge`} />
<SelectOption
key={'polygon'}
value={'Polygon'}
primaryText={t`Polygon`}
/>
<SelectOption key={'box'} value={'Box'} label={t`Box`} />
<SelectOption key={'circle'} value={'Circle'} label={t`Circle`} />
<SelectOption key={'edge'} value={'Edge'} label={t`Edge`} />
<SelectOption key={'polygon'} value={'Polygon'} label={t`Polygon`} />
</SelectField>
</Line>
<ResponsiveLineStackLayout>
@@ -277,17 +265,17 @@ const Physics2Editor = (props: Props) => {
<SelectOption
key={'center'}
value={'Center'}
primaryText={t`Center`}
label={t`Center`}
/>,
<SelectOption
key={'origin'}
value={'Origin'}
primaryText={t`Origin`}
label={t`Origin`}
/>,
<SelectOption
key={'topLeft'}
value={'TopLeft'}
primaryText={t`Top-Left`}
label={t`Top-Left`}
/>,
]}
</SelectField>

8
newIDE/app/src/Debugger/DebuggerSelector.js
View File

@@ -24,16 +24,12 @@ export default class DebuggerSelector extends React.Component<Props, void> {
disabled={!hasDebuggers}
>
{this.props.debuggerIds.map(id => (
<SelectOption
value={id}
key={id}
primaryText={t`Game preview #${id}`}
/>
<SelectOption value={id} key={id} label={t`Game preview #${id}`} />
))}
{!hasDebuggers && (
<SelectOption
value={0}
primaryText={t`No preview running. Run a preview and you will be able to inspect it with the debugger`}
label={t`No preview running. Run a preview and you will be able to inspect it with the debugger`}
/>
)}
</SelectField>

4
newIDE/app/src/EffectsList/index.js
View File

@@ -323,9 +323,7 @@ export default function EffectsList(props: Props) {
<SelectOption
key={effectMetadata.type}
value={effectMetadata.type}
primaryText={
effectMetadata.fullName
}
label={effectMetadata.fullName}
disabled={
props.target === 'object' &&
effectMetadata.isMarkedAsNotWorkingForObjects

29
newIDE/app/src/EventsBasedBehaviorEditor/EventsBasedBehaviorPropertiesEditor.js
View File

@@ -263,30 +263,21 @@ export default class EventsBasedBehaviorPropertiesEditor extends React.Component
}}
fullWidth
>
<SelectOption
value="Number"
primaryText={t`Number`}
/>
<SelectOption
value="String"
primaryText={t`String`}
/>
<SelectOption value="Number" label={t`Number`} />
<SelectOption value="String" label={t`String`} />
<SelectOption
value="Boolean"
primaryText={t`Boolean (checkbox)`}
label={t`Boolean (checkbox)`}
/>
<SelectOption
value="Choice"
primaryText={t`String from a list of options (text)`}
/>
<SelectOption
value="Color"
primaryText={t`Color (text)`}
label={t`String from a list of options (text)`}
/>
<SelectOption value="Color" label={t`Color (text)`} />
{!this.props.isSceneProperties && (
<SelectOption
value="Behavior"
primaryText={t`Required behavior`}
label={t`Required behavior`}
/>
)}
</SelectField>
@@ -324,7 +315,7 @@ export default class EventsBasedBehaviorPropertiesEditor extends React.Component
return (
<SelectOption
value={measurementUnit.getName()}
primaryText={label}
label={label}
/>
);
}
@@ -365,11 +356,11 @@ export default class EventsBasedBehaviorPropertiesEditor extends React.Component
>
<SelectOption
value="true"
primaryText={t`True (checked)`}
label={t`True (checked)`}
/>
<SelectOption
value="false"
primaryText={t`False (not checked)`}
label={t`False (not checked)`}
/>
</SelectField>
)}
@@ -428,7 +419,7 @@ export default class EventsBasedBehaviorPropertiesEditor extends React.Component
<SelectOption
key={index}
value={choice}
primaryText={choice}
label={choice}
/>
)
)}

24
newIDE/app/src/EventsBasedObjectEditor/EventsBasedObjectPropertiesEditor.js
View File

@@ -264,25 +264,19 @@ export default class EventsBasedObjectPropertiesEditor extends React.Component<
}}
fullWidth
>
<SelectOption
value="Number"
primaryText={t`Number`}
/>
<SelectOption
value="String"
primaryText={t`String`}
/>
<SelectOption value="Number" label={t`Number`} />
<SelectOption value="String" label={t`String`} />
<SelectOption
value="Boolean"
primaryText={t`Boolean (checkbox)`}
label={t`Boolean (checkbox)`}
/>
<SelectOption
value="Choice"
primaryText={t`String from a list of options (text)`}
label={t`String from a list of options (text)`}
/>
<SelectOption
value="Color"
primaryText={t`Color (text)`}
label={t`Color (text)`}
/>
</SelectField>
{property.getType() === 'Number' && (
@@ -321,7 +315,7 @@ export default class EventsBasedObjectPropertiesEditor extends React.Component<
return (
<SelectOption
value={measurementUnit.getName()}
primaryText={label}
label={label}
/>
);
}
@@ -366,11 +360,11 @@ export default class EventsBasedObjectPropertiesEditor extends React.Component<
>
<SelectOption
value="true"
primaryText={t`True (checked)`}
label={t`True (checked)`}
/>
<SelectOption
value="false"
primaryText={t`False (not checked)`}
label={t`False (not checked)`}
/>
</SelectField>
)}
@@ -391,7 +385,7 @@ export default class EventsBasedObjectPropertiesEditor extends React.Component<
<SelectOption
key={index}
value={choice}
primaryText={choice}
label={choice}
/>
)
)}

12
newIDE/app/src/EventsFunctionsExtensionEditor/EventsFunctionConfigurationEditor/EventsFunctionPropertiesEditor.js
View File

@@ -257,23 +257,23 @@ export default class EventsFunctionPropertiesEditor extends React.Component<
>
<SelectOption
value={gd.EventsFunction.Action}
primaryText={t`Action`}
label={t`Action`}
/>
<SelectOption
value={gd.EventsFunction.Condition}
primaryText={t`Condition`}
label={t`Condition`}
/>
<SelectOption
value={gd.EventsFunction.Expression}
primaryText={t`Expression`}
label={t`Expression`}
/>
<SelectOption
value={gd.EventsFunction.ExpressionAndCondition}
primaryText={t`Expression and condition`}
label={t`Expression and condition`}
/>
<SelectOption
value={gd.EventsFunction.ActionWithOperator}
primaryText={t`Action with operator`}
label={t`Action with operator`}
/>
</SelectField>
</Line>
@@ -306,7 +306,7 @@ export default class EventsFunctionPropertiesEditor extends React.Component<
<SelectOption
key={eventsFunction.getName()}
value={eventsFunction.getName()}
primaryText={
label={
eventsFunction.getFullName() ||
eventsFunction.getName()
}

54
newIDE/app/src/EventsFunctionsExtensionEditor/EventsFunctionConfigurationEditor/ValueTypeEditor.js
View File

@@ -73,58 +73,46 @@ export default function ValueTypeEditor({
fullWidth
>
{!isExpressionType && (
<SelectOption value="objectList" primaryText={t`Objects`} />
<SelectOption value="objectList" label={t`Objects`} />
)}
{!isExpressionType && (
<SelectOption
value="behavior"
primaryText={t`Behavior (for the previous object)`}
label={t`Behavior (for the previous object)`}
/>
)}
<SelectOption value="expression" primaryText={t`Number`} />
<SelectOption value="string" primaryText={t`String (text)`} />
<SelectOption value="expression" label={t`Number`} />
<SelectOption value="string" label={t`String (text)`} />
<SelectOption
value="stringWithSelector"
primaryText={t`String from a list of options (text)`}
/>
<SelectOption
value="key"
primaryText={t`Keyboard Key (text)`}
/>
<SelectOption
value="mouse"
primaryText={t`Mouse button (text)`}
/>
<SelectOption value="color" primaryText={t`Color (text)`} />
<SelectOption value="layer" primaryText={t`Layer (text)`} />
<SelectOption
value="sceneName"
primaryText={t`Scene name (text)`}
label={t`String from a list of options (text)`}
/>
<SelectOption value="key" label={t`Keyboard Key (text)`} />
<SelectOption value="mouse" label={t`Mouse button (text)`} />
<SelectOption value="color" label={t`Color (text)`} />
<SelectOption value="layer" label={t`Layer (text)`} />
<SelectOption value="sceneName" label={t`Scene name (text)`} />
{!isExpressionType && (
<SelectOption
value="yesorno"
primaryText={t`Yes or No (boolean)`}
label={t`Yes or No (boolean)`}
/>
)}
{!isExpressionType && (
<SelectOption
value="trueorfalse"
primaryText={t`True or False (boolean)`}
label={t`True or False (boolean)`}
/>
)}
<SelectOption
value="objectPointName"
primaryText={t`Object point (text)`}
label={t`Object point (text)`}
/>
<SelectOption
value="objectAnimationName"
primaryText={t`Object animation (text)`}
/>
<SelectOption
value="identifier"
primaryText={t`Identifier (text)`}
label={t`Object animation (text)`}
/>
<SelectOption value="identifier" label={t`Identifier (text)`} />
</SelectField>
)}
{valueTypeMetadata.isObject() && (
@@ -166,8 +154,8 @@ export default function ValueTypeEditor({
}}
fullWidth
>
<SelectOption value="yes" primaryText={t`Yes`} />
<SelectOption value="no" primaryText={t`No`} />
<SelectOption value="yes" label={t`Yes`} />
<SelectOption value="no" label={t`No`} />
</SelectField>
)}
{valueTypeMetadata.getName() === 'trueorfalse' && (
@@ -186,8 +174,8 @@ export default function ValueTypeEditor({
}}
fullWidth
>
<SelectOption value="True" primaryText={t`True`} />
<SelectOption value="False" primaryText={t`False`} />
<SelectOption value="True" label={t`True`} />
<SelectOption value="False" label={t`False`} />
</SelectField>
)}
{valueTypeMetadata.getName() === 'identifier' && (
@@ -204,8 +192,8 @@ export default function ValueTypeEditor({
}}
fullWidth
>
<SelectOption value="scene" primaryText={t`Scene`} />
<SelectOption value="object" primaryText={t`Object`} />
<SelectOption value="scene" label={t`Scene`} />
<SelectOption value="object" label={t`Object`} />
</SelectField>
)}
{valueTypeMetadata.getName() === 'identifier' && (

7
newIDE/app/src/EventsFunctionsExtensionEditor/OptionsEditorDialog/ExtensionDependenciesEditor.js
View File

@@ -157,11 +157,8 @@ export const ExtensionDependenciesEditor = ({
}}
margin="none"
>
<SelectOption value="npm" primaryText={t`NPM`} />
<SelectOption
value="cordova"
primaryText={t`Cordova`}
/>
<SelectOption value="npm" label={t`NPM`} />
<SelectOption value="cordova" label={t`Cordova`} />
</SelectField>
</TableRowColumn>
<TableRowColumn>

4
newIDE/app/src/EventsSheet/EventsFunctionExtractor/EventsFunctionExtractorDialog.js
View File

@@ -204,7 +204,7 @@ export default class EventsFunctionExtractorDialog extends React.Component<
<SelectOption
key={eventsFunctionsExtension.getName()}
value={eventsFunctionsExtension.getName()}
primaryText={
label={
eventsFunctionsExtension.getFullName() ||
eventsFunctionsExtension.getName()
}
@@ -212,7 +212,7 @@ export default class EventsFunctionExtractorDialog extends React.Component<
))}
<SelectOption
value={CREATE_NEW_EXTENSION_PLACEHOLDER}
primaryText={t`<Create a New Extension>`}
label={t`<Create a New Extension>`}
/>
</SelectField>
{createNewExtension ? (

13
newIDE/app/src/EventsSheet/InlinePopover.js
View File

@@ -12,6 +12,7 @@ import {
shouldValidate,
} from '../UI/KeyboardShortcuts/InteractionKeys';
import { doesPathContainDialog } from '../UI/MaterialUISpecificUtil';
import { useResponsiveWindowWidth } from '../UI/Reponsive/ResponsiveWindowMeasurer';
const styles = {
popover: {
@@ -24,8 +25,6 @@ const styles = {
// Restrict size in case of extra small or large popover (though this should not happen)
minHeight: 30,
maxHeight: 400,
maxWidth: 600,
minWidth: 300, // Avoid extra small popover for some parameters like relational operator
// When displayed in an events sheet that has Mosaic windows (see `EditorMosaic`) next to it,
// it could be displayed behind them, because they have a z-index of 1, and 4 for the window titles :/
@@ -51,6 +50,7 @@ type Props = {|
export default function InlinePopover(props: Props) {
const startSentinel = React.useRef<?HTMLDivElement>(null);
const endSentinel = React.useRef<?HTMLDivElement>(null);
const windowWidth = useResponsiveWindowWidth();
return (
<ClickAwayListener
@@ -89,7 +89,14 @@ export default function InlinePopover(props: Props) {
<Popper
open={props.open}
anchorEl={props.anchorEl}
style={styles.popover}
style={{
...styles.popover,
// On mobile, make it take full screen width, but not too much for large mobile phones.
// On desktop, make it take a min width, to ensure most fields with translations are well displayed.
width: windowWidth === 'small' ? '100%' : 'auto',
minWidth: windowWidth === 'small' ? 'auto' : 320,
maxWidth: windowWidth === 'small' ? 320 : 600,
}}
placement="bottom-start"
onKeyDown={event => {
// Much like a dialog, offer a way to close the popover

18
newIDE/app/src/EventsSheet/ParameterFields/LayerField.js
View File

@@ -68,13 +68,17 @@ export default React.forwardRef<ParameterFieldProps, ParameterFieldInterface>(
? props.parameterMetadata.getDescription()
: undefined;
const selectOptions = layerNames.map(layerName => (
<SelectOption
key={layerName === '' ? 'Base layer' : layerName}
value={layerName === '' ? '' : `"${layerName}"`}
primaryText={layerName === '' ? t`Base layer` : layerName}
/>
));
const selectOptions = layerNames.map(layerName => {
const isBaseLayer = layerName === '';
return (
<SelectOption
key={isBaseLayer ? 'Base layer' : layerName}
value={isBaseLayer ? '' : `"${layerName}"`}
label={isBaseLayer ? t`Base layer` : layerName}
shouldNotTranslate={!isBaseLayer}
/>
);
});
return (
<I18n>

12
newIDE/app/src/EventsSheet/ParameterFields/LeaderboardIdField.js
View File

@@ -98,21 +98,15 @@ export default React.forwardRef<ParameterFieldProps, ParameterFieldInterface>(
<SelectOption
key={leaderboard.id}
value={`"${leaderboard.id}"`}
primaryText={`${leaderboard.name} ${
label={`${leaderboard.name} ${
leaderboard.id
? `(${shortenUuidForDisplay(leaderboard.id)})`
: ''
}`}
shouldNotTranslate
/>
))
: [
<SelectOption
disabled
key="empty"
value="empty"
primaryText={''}
/>,
],
: [<SelectOption disabled key="empty" value="empty" label={''} />],
[leaderboards, gameHasLeaderboards]
);

6
newIDE/app/src/EventsSheet/ParameterFields/MouseField.js
View File

@@ -38,11 +38,11 @@ export default React.forwardRef<ParameterFieldProps, ParameterFieldInterface>(
ref={field}
onChange={(e, i, value) => props.onChange(value)}
>
<SelectOption value="Left" primaryText={t`Left (primary)`} />
<SelectOption value="Right" primaryText={t`Right (secondary)`} />
<SelectOption value="Left" label={t`Left (primary)`} />
<SelectOption value="Right" label={t`Right (secondary)`} />
<SelectOption
value="Middle"
primaryText={t`Middle (Auxiliary button, usually the wheel button)`}
label={t`Middle (Auxiliary button, usually the wheel button)`}
/>
</SelectField>
);

2
newIDE/app/src/EventsSheet/ParameterFields/OperatorField.js
View File

@@ -69,7 +69,7 @@ export default React.forwardRef<ParameterFieldProps, ParameterFieldInterface>(
<SelectOption
key={operator}
value={operator}
primaryText={operatorLabels[operator]}
label={operatorLabels[operator]}
/>
))}
</SelectField>

2
newIDE/app/src/EventsSheet/ParameterFields/RelationalOperatorField.js
View File

@@ -66,7 +66,7 @@ export default React.forwardRef<ParameterFieldProps, ParameterFieldInterface>(
<SelectOption
key={operator}
value={operator}
primaryText={operatorLabels[operator]}
label={operatorLabels[operator]}
/>
))}
</SelectField>

132
newIDE/app/src/EventsSheet/ParameterFields/SceneNameField.js
View File

@@ -7,11 +7,21 @@ import {
type ParameterFieldInterface,
type FieldFocusFunction,
} from './ParameterFieldCommons';
import { type ExpressionAutocompletion } from '../../ExpressionAutocompletion';
import FlatButton from '../../UI/FlatButton';
import Scene from '../../UI/CustomSvgIcons/Scene';
import { t, Trans } from '@lingui/macro';
import Functions from '@material-ui/icons/Functions';
import RaisedButton from '../../UI/RaisedButton';
import SelectOption from '../../UI/SelectOption';
import { TextFieldWithButtonLayout } from '../../UI/Layout';
import SelectField, { type SelectFieldInterface } from '../../UI/SelectField';
export default React.forwardRef<ParameterFieldProps, ParameterFieldInterface>(
function SceneNameField(props: ParameterFieldProps, ref) {
const field = React.useRef<?GenericExpressionField>(null);
const field = React.useRef<?(
| GenericExpressionField
| SelectFieldInterface
)>(null);
const focus: FieldFocusFunction = options => {
if (field.current) field.current.focus(options);
};
@@ -19,29 +29,107 @@ export default React.forwardRef<ParameterFieldProps, ParameterFieldInterface>(
focus,
}));
const layoutNames: Array<ExpressionAutocompletion> = props.project
? enumerateLayouts(props.project).map(layout => ({
kind: 'Text',
completion: `"${layout.getName()}"`,
}))
const layoutNames = props.project
? enumerateLayouts(props.project).map(layout => layout.getName())
: [];
return (
<GenericExpressionField
id={
props.parameterIndex !== undefined
? `parameter-${props.parameterIndex}-scene-field`
: undefined
}
expressionType="string"
onGetAdditionalAutocompletions={expression =>
layoutNames.filter(
({ completion }) => completion.indexOf(expression) === 0
)
}
ref={field}
{...props}
const isCurrentValueInLayoutsList = !!layoutNames.find(
layoutName => `"${layoutName}"` === props.value
);
// If the current value is not in the list of layouts, display an expression field.
const [isExpressionField, setIsExpressionField] = React.useState(
!!props.value && !isCurrentValueInLayoutsList
);
const switchFieldType = () => {
setIsExpressionField(!isExpressionField);
};
const onChangeSelectValue = (event, value) => {
props.onChange(event.target.value);
};
const onChangeTextValue = (value: string) => {
props.onChange(value);
};
const fieldLabel = props.parameterMetadata
? props.parameterMetadata.getDescription()
: undefined;
const selectOptions = layoutNames.map(layoutName => (
<SelectOption
key={layoutName}
value={`"${layoutName}"`}
label={layoutName}
shouldNotTranslate
/>
));
return (
<>
<TextFieldWithButtonLayout
renderTextField={() =>
!isExpressionField ? (
<SelectField
ref={field}
id={
props.parameterIndex !== undefined
? `parameter-${props.parameterIndex}-scene-field`
: undefined
}
value={props.value}
onChange={onChangeSelectValue}
margin={props.isInline ? 'none' : 'dense'}
fullWidth
floatingLabelText={fieldLabel}
translatableHintText={t`Choose a scene`}
helperMarkdownText={
(props.parameterMetadata &&
props.parameterMetadata.getLongDescription()) ||
null
}
>
{selectOptions}
</SelectField>
) : (
<GenericExpressionField
ref={field}
id={
props.parameterIndex !== undefined
? `parameter-${props.parameterIndex}-scene-field`
: undefined
}
expressionType="string"
{...props}
onChange={onChangeTextValue}
/>
)
}
renderButton={style =>
isExpressionField ? (
<FlatButton
id="switch-expression-select"
leftIcon={<Scene />}
style={style}
primary
label={<Trans>Select a Scene</Trans>}
onClick={switchFieldType}
/>
) : (
<RaisedButton
id="switch-expression-select"
icon={<Functions />}
style={style}
primary
label={<Trans>Use an Expression</Trans>}
onClick={switchFieldType}
/>
)
}
/>
</>
);
}
);

14
newIDE/app/src/Export/Builds/BuildsList.js
View File

@@ -36,30 +36,30 @@ type BuildFilter = BuildType | 'all-build';
const buildFilterOptions: Array<{
key: BuildFilter,
value: BuildFilter,
primaryText: React.Node,
label: React.Node,
}> = [
{
key: 'all-build',
value: 'all-build',
primaryText: t`All builds`,
label: t`All builds`,
},
{
key: 'web-build',
value: 'web-build',
primaryText: t`Web builds`,
label: t`Web builds`,
},
{
key: 'cordova-build',
value: 'cordova-build',
primaryText: t`Mobile builds`,
label: t`Mobile builds`,
},
{
key: 'electron-build',
value: 'electron-build',
primaryText: t`Desktop builds`,
label: t`Desktop builds`,
},
];
@@ -125,8 +125,8 @@ const BuildsList = ({
setBuildFilter(value);
}}
>
{buildFilterOptions.map(({ key, value, primaryText }) => (
<SelectOption key={key} value={value} primaryText={primaryText} />
{buildFilterOptions.map(({ key, value, label }) => (
<SelectOption key={key} value={value} label={label} />
))}
</SelectField>
</Column>

6
newIDE/app/src/GameDashboard/Feedbacks/GameFeedback.js
View File

@@ -350,19 +350,19 @@ const GameFeedback = ({ i18n, authenticatedUser, game }: Props) => {
<SelectOption
key={'all'}
value={''}
primaryText={t`All builds`}
label={t`All builds`}
/>
<SelectOption
key={'game-only'}
value={'game-only'}
primaryText={t`On game page only`}
label={t`On game page only`}
/>
{Object.keys(buildsByIds).map(buildId => {
return (
<SelectOption
key={buildId}
value={buildId}
primaryText={getBuildNameOption(buildId)}
label={getBuildNameOption(buildId)}
/>
);
})}

12
newIDE/app/src/GameDashboard/GameAnalyticsPanel.js
View File

@@ -193,16 +193,8 @@ export const GameAnalyticsPanel = ({ game }: Props) => {
}}
disableUnderline
>
<SelectOption
key="month"
value="month"
primaryText={i18n._(t`Month`)}
/>
<SelectOption
key="year"
value="year"
primaryText={i18n._(t`Year`)}
/>
<SelectOption key="month" value="month" label={t`Month`} />
<SelectOption key="year" value="year" label={t`Year`} />
</SelectField>
</Line>
{!isGameMetricsLoading &&

12
newIDE/app/src/GameDashboard/GameDetailsDialog.js
View File

@@ -517,15 +517,9 @@ export const GameDetailsDialog = ({
}
value={publicGame.orientation}
>
<SelectOption
value="default"
primaryText={t`Platform default`}
/>
<SelectOption
value="landscape"
primaryText={t`Landscape`}
/>
<SelectOption value="portrait" primaryText={t`Portrait`} />
<SelectOption value="default" label={t`Platform default`} />
<SelectOption value="landscape" label={t`Landscape`} />
<SelectOption value="portrait" label={t`Portrait`} />
</SelectField>
<Line noMargin justifyContent="flex-end">
<FlatButton

10
newIDE/app/src/GameDashboard/LeaderboardAdmin/LeaderboardAppearanceDialog.js
View File

@@ -382,12 +382,12 @@ function LeaderboardAppearanceDialog({
<SelectOption
key={'custom'}
value={'custom'}
primaryText={t`Custom display`}
label={t`Custom display`}
/>
<SelectOption
key={'time'}
value={'time'}
primaryText={t`Display as time`}
label={t`Display as time`}
/>
</SelectField>
<Spacer />
@@ -454,11 +454,7 @@ function LeaderboardAppearanceDialog({
disabled={isLoading}
>
{Object.keys(unitSelectOptions).map(option => (
<SelectOption
key={option}
value={option}
primaryText={option}
/>
<SelectOption key={option} value={option} label={option} />
))}
</SelectField>
<AlertMessage kind="info">

4
newIDE/app/src/GameDashboard/LeaderboardAdmin/LeaderboardSortOptionsDialog.js
View File

@@ -147,12 +147,12 @@ function LeaderboardSortOptionsDialog({
<SelectOption
key={'ASC'}
value={'ASC'}
primaryText={t`Lower is better`}
label={t`Lower is better`}
/>
<SelectOption
key={'DESC'}
value={'DESC'}
primaryText={t`Higher is better`}
label={t`Higher is better`}
/>
</SelectField>
<Checkbox

9
newIDE/app/src/GameDashboard/LeaderboardAdmin/index.js
View File

@@ -850,17 +850,17 @@ export const LeaderboardAdmin = ({
<SelectOption
key={'free'}
value={'FREE'}
primaryText={i18n._(t`Let the user select`)}
label={t`Let the user select`}
/>
<SelectOption
key={'prefer-unique'}
value={'PREFER_UNIQUE'}
primaryText={i18n._(t`Only best entry`)}
label={t`Only best entry`}
/>
<SelectOption
key={'prefer-non-unique'}
value={'PREFER_NON_UNIQUE'}
primaryText={i18n._(t`All entries`)}
label={t`All entries`}
/>
</SelectField>
),
@@ -920,11 +920,12 @@ export const LeaderboardAdmin = ({
<SelectOption
key={leaderboard.id}
value={leaderboard.id}
primaryText={
label={
leaderboard.primary
? t`${leaderboard.name} (default)`
: leaderboard.name
}
shouldNotTranslate={!leaderboard.primary}
/>
))}
</SelectField>

15
newIDE/app/src/GameDashboard/PublicGameProperties.js
View File

@@ -250,11 +250,16 @@ export function PublicGameProperties({
{profile && profile.username && (
<SelectOption
value={profile.username}
primaryText={profile.username}
label={profile.username}
shouldNotTranslate
/>
)}
{userSlug && (!profile || userSlug !== profile.username) && (
<SelectOption value={userSlug} primaryText={userSlug} />
<SelectOption
value={userSlug}
label={userSlug}
shouldNotTranslate
/>
)}
</SelectField>
<Spacer />
@@ -325,9 +330,9 @@ export function PublicGameProperties({
onChange={(e, i, value: string) => setOrientation(value)}
disabled={disabled}
>
<SelectOption value="default" primaryText={t`Platform default`} />
<SelectOption value="landscape" primaryText={t`Landscape`} />
<SelectOption value="portrait" primaryText={t`Portrait`} />
<SelectOption value="default" label={t`Platform default`} />
<SelectOption value="landscape" label={t`Landscape`} />
<SelectOption value="portrait" label={t`Portrait`} />
</SelectField>
{setPlayableWithKeyboard &&
setPlayableWithGamepad &&

4
newIDE/app/src/LayersList/LayerRemoveDialog.js
View File

@@ -89,8 +89,8 @@ export default class LayerRemoveDialog extends Component<Props, State> {
<SelectOption
key={value}
value={value}
primaryText={label}
primaryTextIsUserDefined={labelIsUserDefined}
label={label}
shouldNotTranslate={labelIsUserDefined}
/>
));

4
newIDE/app/src/MainFrame/Preferences/LanguageSelector.js
View File

@@ -38,7 +38,7 @@ const renderLanguageSelectOption = localeMetadata => {
return (
<SelectOption
value={localeMetadata.languageCode}
primaryText={`${localeMetadata.languageNativeName} (${
label={`${localeMetadata.languageNativeName} (${
localeMetadata.languageName
})${isStarted ? ` - ~${percent}%` : ''}`}
disabled={!isStarted}
@@ -62,7 +62,7 @@ const LanguageSelector = ({ onLanguageChanged }: Props) => {
}}
fullWidth
>
<SelectOption value="en" primaryText="English (default)" />
<SelectOption value="en" label="English (default)" />
{goodProgressLocales.map(localeMetadata =>
renderLanguageSelectOption(localeMetadata)
)}

14
newIDE/app/src/MainFrame/Preferences/PreferencesDialog.js
View File

@@ -117,7 +117,7 @@ const PreferencesDialog = ({ i18n, onClose }: Props) => {
{Object.keys(themes).map(themeName => (
<SelectOption
value={themeName}
primaryText={themeName}
label={themeName}
key={themeName}
/>
))}
@@ -131,7 +131,7 @@ const PreferencesDialog = ({ i18n, onClose }: Props) => {
{getAllThemes().map(codeEditorTheme => (
<SelectOption
value={codeEditorTheme.themeName}
primaryText={codeEditorTheme.name}
label={codeEditorTheme.name}
key={codeEditorTheme.themeName}
/>
))}
@@ -211,9 +211,9 @@ const PreferencesDialog = ({ i18n, onClose }: Props) => {
onChange={(e, i, value: string) => setBackdropClickBehavior(value)}
fullWidth
>
<SelectOption value="cancel" primaryText={t`Cancel changes`} />
<SelectOption value="apply" primaryText={t`Apply changes`} />
<SelectOption value="nothing" primaryText={t`Do nothing`} />
<SelectOption value="cancel" label={t`Cancel changes`} />
<SelectOption value="apply" label={t`Apply changes`} />
<SelectOption value="nothing" label={t`Do nothing`} />
</SelectField>
<Text size="block-title">
<Trans>Updates</Trans>
@@ -276,8 +276,8 @@ const PreferencesDialog = ({ i18n, onClose }: Props) => {
}}
fullWidth
>
<SelectOption value="cancel" primaryText={t`Cancel changes`} />
<SelectOption value="apply" primaryText={t`Apply changes`} />
<SelectOption value="cancel" label={t`Cancel changes`} />
<SelectOption value="apply" label={t`Apply changes`} />
</SelectField>
<Text size="block-title">
<Trans>Embedded help and tutorials</Trans>

9
newIDE/app/src/ObjectEditor/Editors/ParticleEmitterEditor.js
View File

@@ -57,15 +57,12 @@ export default class ParticleEmitterEditor extends React.Component<
>
<SelectOption
value={gd.ParticleEmitterObject.Point}
primaryText={t`Circle`}
/>
<SelectOption
value={gd.ParticleEmitterObject.Line}
primaryText={t`Line`}
label={t`Circle`}
/>
<SelectOption value={gd.ParticleEmitterObject.Line} label={t`Line`} />
<SelectOption
value={gd.ParticleEmitterObject.Quad}
primaryText={t`Image`}
label={t`Image`}
/>
</SelectField>
{particleEmitterConfiguration.getRendererType() ===

14
newIDE/app/src/ObjectEditor/Editors/SpriteEditor/Utils/SpriteSelector.js
View File

@@ -80,7 +80,7 @@ export default class SpriteSelector extends React.Component<Props, void> {
<SelectOption
key={i}
value={i}
primaryText={t`Animation #${i} ${animation.getName()}`}
label={t`Animation #${i} ${animation.getName()}`}
/>
);
})}
@@ -96,11 +96,7 @@ export default class SpriteSelector extends React.Component<Props, void> {
>
{mapFor(0, animation.getDirectionsCount(), i => {
return (
<SelectOption
value={i}
key={i}
primaryText={t`Direction #${i}`}
/>
<SelectOption value={i} key={i} label={t`Direction #${i}`} />
);
})}
</SelectField>
@@ -116,11 +112,7 @@ export default class SpriteSelector extends React.Component<Props, void> {
>
{mapFor(0, direction.getSpritesCount(), i => {
return (
<SelectOption
value={i}
key={i}
primaryText={t`Frame #${i}`}
/>
<SelectOption value={i} key={i} label={t`Frame #${i}`} />
);
})}
</SelectField>

4
newIDE/app/src/ObjectTypeSelector/index.js
View File

@@ -55,7 +55,7 @@ export default class ObjectTypeSelector extends React.Component<Props, State> {
>
<SelectOption
value=""
primaryText={t`Any object`}
label={t`Any object`}
disabled={isDisabled('')}
/>
{objectMetadata.map((metadata: EnumeratedObjectMetadata) => {
@@ -68,7 +68,7 @@ export default class ObjectTypeSelector extends React.Component<Props, State> {
<SelectOption
key={metadata.name}
value={metadata.name}
primaryText={metadata.fullName}
label={metadata.fullName}
disabled={isDisabled(metadata.name)}
/>
);

10
newIDE/app/src/Profile/AdditionalUserInfoDialog.js
View File

@@ -374,7 +374,7 @@ const AdditionalUserInfoDialog = ({
<SelectOption
key={usageOption.value}
value={usageOption.value}
primaryText={usageOption.label}
label={usageOption.label}
/>
))}
</SelectField>
@@ -392,7 +392,7 @@ const AdditionalUserInfoDialog = ({
<SelectOption
key={teamOrCompanySizeOption.value}
value={teamOrCompanySizeOption.value}
primaryText={teamOrCompanySizeOption.label}
label={teamOrCompanySizeOption.label}
/>
)
)}
@@ -423,7 +423,7 @@ const AdditionalUserInfoDialog = ({
<SelectOption
key={experienceOption.value}
value={experienceOption.value}
primaryText={experienceOption.label}
label={experienceOption.label}
/>
))}
</SelectField>
@@ -440,7 +440,7 @@ const AdditionalUserInfoDialog = ({
<SelectOption
key={creationGoalOption.value}
value={creationGoalOption.value}
primaryText={creationGoalOption.label}
label={creationGoalOption.label}
/>
))}
</SelectField>
@@ -457,7 +457,7 @@ const AdditionalUserInfoDialog = ({
<SelectOption
key={hearFromOption.value}
value={hearFromOption.value}
primaryText={hearFromOption.label}
label={hearFromOption.label}
/>
))}
</SelectField>

6
newIDE/app/src/ProjectCreation/NewProjectSetupDialog.js
View File

@@ -293,7 +293,7 @@ const NewProjectSetupDialog = ({
<SelectOption
key={storageProvider.internalName}
value={storageProvider.internalName}
primaryText={storageProvider.name}
label={storageProvider.name}
disabled={storageProvider.disabled}
/>
))}
@@ -303,7 +303,7 @@ const NewProjectSetupDialog = ({
// when they want to add their own resources or use external editors.
<SelectOption
value={emptyStorageProvider.internalName}
primaryText={t`Don't save this project now`}
label={t`Don't save this project now`}
/>
)}
</SelectField>
@@ -342,7 +342,7 @@ const NewProjectSetupDialog = ({
>
{Object.entries(resolutionOptions).map(([id, option]) => (
// $FlowFixMe - Object.entries does not keep types.
<SelectOption key={id} value={id} primaryText={option.label} />
<SelectOption key={id} value={id} label={option.label} />
))}
</SelectField>
<Checkbox

22
newIDE/app/src/ProjectManager/LoadingScreenEditor.js
View File

@@ -37,12 +37,12 @@ type Props = {|
|};
const watermarkPlacementOptions = [
{ value: 'top', primaryText: t`Top` },
{ value: 'top-left', primaryText: t`Top left corner` },
{ value: 'top-right', primaryText: t`Top right corner` },
{ value: 'bottom', primaryText: t`Bottom` },
{ value: 'bottom-left', primaryText: t`Bottom left corner` },
{ value: 'bottom-right', primaryText: t`Bottom right corner` },
{ value: 'top', label: t`Top` },
{ value: 'top-left', label: t`Top left corner` },
{ value: 'top-right', label: t`Top right corner` },
{ value: 'bottom', label: t`Bottom` },
{ value: 'bottom-left', label: t`Bottom left corner` },
{ value: 'bottom-right', label: t`Bottom right corner` },
];
export const LoadingScreenEditor = ({
@@ -114,15 +114,15 @@ export const LoadingScreenEditor = ({
!loadingScreen.isGDevelopLogoShownDuringLoadingScreen()
}
>
<SelectOption value="light" primaryText={t`Light (plain)`} />
<SelectOption value="light" label={t`Light (plain)`} />
<SelectOption
value="light-colored"
primaryText={t`Light (colored)`}
label={t`Light (colored)`}
/>
<SelectOption value="dark" primaryText={t`Dark (plain)`} />
<SelectOption value="dark" label={t`Dark (plain)`} />
<SelectOption
value="dark-colored"
primaryText={t`Dark (colored)`}
label={t`Dark (colored)`}
/>
</SelectField>
</Column>
@@ -173,7 +173,7 @@ export const LoadingScreenEditor = ({
<SelectOption
key={option.value}
value={option.value}
primaryText={option.primaryText}
label={option.label}
/>
))}
</SelectField>

14
newIDE/app/src/ProjectManager/ProjectPropertiesDialog.js
View File

@@ -502,15 +502,15 @@ function ProjectPropertiesDialog(props: Props) {
>
<SelectOption
value=""
primaryText={t`No changes to the game size`}
label={t`No changes to the game size`}
/>
<SelectOption
value="adaptWidth"
primaryText={t`Change width to fit the screen or window size`}
label={t`Change width to fit the screen or window size`}
/>
<SelectOption
value="adaptHeight"
primaryText={t`Change height to fit the screen or window size`}
label={t`Change height to fit the screen or window size`}
/>
</SelectField>
<Checkbox
@@ -605,11 +605,11 @@ function ProjectPropertiesDialog(props: Props) {
>
<SelectOption
value="linear"
primaryText={t`Linear (antialiased rendering, good for most games)`}
label={t`Linear (antialiased rendering, good for most games)`}
/>
<SelectOption
value="nearest"
primaryText={t`Nearest (no antialiasing, good for pixel perfect games)`}
label={t`Nearest (no antialiasing, good for pixel perfect games)`}
/>
</SelectField>
<Checkbox
@@ -671,11 +671,11 @@ function ProjectPropertiesDialog(props: Props) {
>
<SelectOption
value={'single-file'}
primaryText={t`Single file (default)`}
label={t`Single file (default)`}
/>
<SelectOption
value={'folder-project'}
primaryText={t`Multiple files, saved in folder next to the main file`}
label={t`Multiple files, saved in folder next to the main file`}
/>
</SelectField>
<ExtensionsProperties project={project} />

4
newIDE/app/src/PropertiesEditor/index.js
View File

@@ -458,8 +458,8 @@ const PropertiesEditor = ({
<SelectOption
key={value}
value={value}
primaryText={label}
primaryTextIsUserDefined={labelIsUserDefined}
label={label}
shouldNotTranslate={labelIsUserDefined}
/>
));

13
newIDE/app/src/UI/Layout.js
View File

@@ -24,11 +24,6 @@ const buttonCommonStyles = {
};
const textFieldWithButtonLayoutStyles = {
container: {
flex: 1,
display: 'flex',
alignItems: 'flex-start', // Align from the top to stay at the same position when error/multiline
},
filledTextFieldWithLabelRightButtonMargins: {
...buttonCommonStyles,
marginTop: 15, // Properly align with the text field (only dense "filled" text fields supported)
@@ -61,7 +56,11 @@ export const TextFieldWithButtonLayout = ({
renderButton,
}: TextFieldWithButtonLayoutProps) => {
return (
<div style={textFieldWithButtonLayoutStyles.container}>
<ResponsiveLineStackLayout
alignItems="flex-start" // Align from the top to stay at the same position when error/multiline
expand
noMargin
>
{renderTextField()}
{renderButton(
margin === 'none'
@@ -72,7 +71,7 @@ export const TextFieldWithButtonLayout = ({
? textFieldWithButtonLayoutStyles.filledTextFieldWithoutLabelRightButtonMargins
: textFieldWithButtonLayoutStyles.filledTextFieldWithLabelRightButtonMargins
)}
</div>
</ResponsiveLineStackLayout>
);
};

8
newIDE/app/src/UI/SelectOption.js
View File

@@ -8,9 +8,9 @@ import GDevelopThemeContext from './Theme/GDevelopThemeContext';
// They should be self descriptive - refer to Material UI docs otherwise.
type Props = {|
value: string | number | boolean,
primaryText: MessageDescriptor,
label: MessageDescriptor | React.Node,
disabled?: boolean,
primaryTextIsUserDefined?: boolean,
shouldNotTranslate?: boolean,
|};
/**
@@ -30,9 +30,7 @@ const SelectOption = (props: Props) => {
backgroundColor: gdevelopTheme.palette.canvasColor,
}}
>
{props.primaryTextIsUserDefined
? props.primaryText
: i18n._(props.primaryText)}
{props.shouldNotTranslate ? props.label : i18n._(props.label)}
</option>
)}
</I18n>

14
newIDE/app/src/VariablesList/VariableTypeSelector.js
View File

@@ -30,27 +30,23 @@ const getOptions = () => {
options = [
<SelectOption
key="string"
primaryText={t`String`}
label={t`String`}
value={gd.Variable.String}
/>,
<SelectOption
key="number"
primaryText={t`Number`}
label={t`Number`}
value={gd.Variable.Number}
/>,
<SelectOption
key="boolean"
primaryText={t`Boolean`}
label={t`Boolean`}
value={gd.Variable.Boolean}
/>,
<SelectOption
key="array"
primaryText={t`Array`}
value={gd.Variable.Array}
/>,
<SelectOption key="array" label={t`Array`} value={gd.Variable.Array} />,
<SelectOption
key="structure"
primaryText={t`Structure`}
label={t`Structure`}
value={gd.Variable.Structure}
/>,
];

24
newIDE/app/src/stories/index.js
View File

@@ -166,10 +166,10 @@ storiesOf('UI Building Blocks/SelectField', module)
onChange={(e, i, newValue: string) => onChange(newValue)}
fullWidth
>
<SelectOption value="1" primaryText="Choice 1" />
<SelectOption value="2" primaryText="Choice 2" />
<SelectOption value="3" primaryText="Choice 3" />
<SelectOption value="4" primaryText="Choice 4" />
<SelectOption value="1" label="Choice 1" />
<SelectOption value="2" label="Choice 2" />
<SelectOption value="3" label="Choice 3" />
<SelectOption value="4" label="Choice 4" />
</SelectField>
)}
/>
@@ -185,10 +185,10 @@ storiesOf('UI Building Blocks/SelectField', module)
helperMarkdownText="This is some help text that can be written in **markdown**. This is *very* useful for emphasis and can even be used to add [links](http://example.com)."
floatingLabelText="This is a floating label"
>
<SelectOption value="1" primaryText="Choice 1" />
<SelectOption value="2" primaryText="Choice 2" />
<SelectOption value="3" primaryText="Choice 3" />
<SelectOption value="4" primaryText="Choice 4" />
<SelectOption value="1" label="Choice 1" />
<SelectOption value="2" label="Choice 2" />
<SelectOption value="3" label="Choice 3" />
<SelectOption value="4" label="Choice 4" />
</SelectField>
)}
/>
@@ -203,10 +203,10 @@ storiesOf('UI Building Blocks/SelectField', module)
onChange={(e, i, newValue: string) => onChange(newValue)}
fullWidth
>
<SelectOption value="1" primaryText="Choice 1" />
<SelectOption value="2" primaryText="Choice 2" />
<SelectOption value="3" primaryText="Choice 3" />
<SelectOption value="4" primaryText="Choice 4" />
<SelectOption value="1" label="Choice 1" />
<SelectOption value="2" label="Choice 2" />
<SelectOption value="3" label="Choice 3" />
<SelectOption value="4" label="Choice 4" />
</SelectField>
)}
/>