diff --git a/newIDE/app/public/res/icons_default/global_variable24_black.svg b/newIDE/app/public/res/icons_default/global_variable24_black.svg new file mode 100644 index 000000000000..b77e97301df5 --- /dev/null +++ b/newIDE/app/public/res/icons_default/global_variable24_black.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/newIDE/app/public/res/icons_default/scene_variable24_black.svg b/newIDE/app/public/res/icons_default/scene_variable24_black.svg new file mode 100644 index 000000000000..834d6dc859c5 --- /dev/null +++ b/newIDE/app/public/res/icons_default/scene_variable24_black.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/newIDE/app/src/EventsFunctionsList/index.js b/newIDE/app/src/EventsFunctionsList/index.js index 25bf40e030c4..3967a9f837f3 100644 --- a/newIDE/app/src/EventsFunctionsList/index.js +++ b/newIDE/app/src/EventsFunctionsList/index.js @@ -1054,7 +1054,7 @@ const EventsFunctionsList = React.forwardRef< extensionGlobalVariablesItemId, i18n._(t`Extension global variables`), onSelectExtensionGlobalVariables, - 'res/icons_default/publish_black.svg' + 'res/icons_default/global_variable24_black.svg' ) ), new LeafTreeViewItem( @@ -1062,7 +1062,7 @@ const EventsFunctionsList = React.forwardRef< extensionSceneVariablesItemId, i18n._(t`Extension scene variables`), onSelectExtensionSceneVariables, - 'res/icons_default/scene_black.svg' + 'res/icons_default/scene_variable24_black.svg' ) ), ]; diff --git a/newIDE/app/src/EventsSheet/EventsTree/VariableDeclaration.js b/newIDE/app/src/EventsSheet/EventsTree/VariableDeclaration.js index 15e9ef8f0f83..b97c8ab75d7b 100644 --- a/newIDE/app/src/EventsSheet/EventsTree/VariableDeclaration.js +++ b/newIDE/app/src/EventsSheet/EventsTree/VariableDeclaration.js @@ -11,7 +11,7 @@ import { shouldActivate, shouldValidate, } from '../../UI/KeyboardShortcuts/InteractionKeys'; -import LocalIcon from '../../UI/CustomSvgIcons/ExternalEvents'; +import LocalVariableIcon from '../../UI/CustomSvgIcons/LocalVariable'; import { getVariableTypeIcon } from '../ParameterFields/VariableField'; const gd: libGDevelop = global.gd; @@ -98,7 +98,7 @@ export const VariableDeclaration = (props: Props) => { Declare{' '} - ( function GlobalVariableField(props: ParameterFieldProps, ref) { @@ -84,4 +84,4 @@ export default React.forwardRef( export const renderInlineGlobalVariable = ( props: ParameterInlineRendererProps -) => renderVariableWithIcon(props, 'global variable', GlobalIcon); +) => renderVariableWithIcon(props, 'global variable', GlobalVariableIcon); diff --git a/newIDE/app/src/EventsSheet/ParameterFields/ObjectVariableField.js b/newIDE/app/src/EventsSheet/ParameterFields/ObjectVariableField.js index 32f4d1e35514..b896706a0f20 100644 --- a/newIDE/app/src/EventsSheet/ParameterFields/ObjectVariableField.js +++ b/newIDE/app/src/EventsSheet/ParameterFields/ObjectVariableField.js @@ -14,7 +14,7 @@ import { import { getLastObjectParameterValue } from './ParameterMetadataTools'; import getObjectByName from '../../Utils/GetObjectByName'; import getObjectGroupByName from '../../Utils/GetObjectGroupByName'; -import ObjectIcon from '../../UI/CustomSvgIcons/Object'; +import ObjectVariableIcon from '../../UI/CustomSvgIcons/ObjectVariable'; import { enumerateVariables } from './EnumerateVariables'; import { intersectionBy } from 'lodash'; @@ -178,4 +178,4 @@ export default React.forwardRef( export const renderInlineObjectVariable = ( props: ParameterInlineRendererProps -) => renderVariableWithIcon(props, 'object variable', ObjectIcon); +) => renderVariableWithIcon(props, 'object variable', ObjectVariableIcon); diff --git a/newIDE/app/src/EventsSheet/ParameterFields/SceneVariableField.js b/newIDE/app/src/EventsSheet/ParameterFields/SceneVariableField.js index 6d745e2264d1..a05e2c94a6cd 100644 --- a/newIDE/app/src/EventsSheet/ParameterFields/SceneVariableField.js +++ b/newIDE/app/src/EventsSheet/ParameterFields/SceneVariableField.js @@ -12,7 +12,7 @@ import { type FieldFocusFunction, } from './ParameterFieldCommons'; import { enumerateVariables } from './EnumerateVariables'; -import SceneIcon from '../../UI/CustomSvgIcons/Scene'; +import SceneVariableIcon from '../../UI/CustomSvgIcons/SceneVariable'; export default React.forwardRef( function SceneVariableField(props: ParameterFieldProps, ref) { @@ -91,4 +91,4 @@ export default React.forwardRef( export const renderInlineSceneVariable = ( props: ParameterInlineRendererProps -) => renderVariableWithIcon(props, 'scene variable', SceneIcon); +) => renderVariableWithIcon(props, 'scene variable', SceneVariableIcon); diff --git a/newIDE/app/src/EventsSheet/ParameterFields/VariableField.js b/newIDE/app/src/EventsSheet/ParameterFields/VariableField.js index 1268f80d26d9..a46ce54aa766 100644 --- a/newIDE/app/src/EventsSheet/ParameterFields/VariableField.js +++ b/newIDE/app/src/EventsSheet/ParameterFields/VariableField.js @@ -34,10 +34,10 @@ import VariableStructureIcon from '../../VariablesList/Icons/VariableStructureIc import UnknownTypeIcon from '../../UI/CustomSvgIcons/Cross'; import { type EnumeratedVariable } from './EnumerateVariables'; import { LineStackLayout } from '../../UI/Layout'; -import GlobalIcon from '../../UI/CustomSvgIcons/Publish'; -import SceneIcon from '../../UI/CustomSvgIcons/Scene'; -import ObjectIcon from '../../UI/CustomSvgIcons/Object'; -import LocalIcon from '../../UI/CustomSvgIcons/ExternalEvents'; +import GlobalVariableIcon from '../../UI/CustomSvgIcons/GlobalVariable'; +import SceneVariableIcon from '../../UI/CustomSvgIcons/SceneVariable'; +import ObjectVariableIcon from '../../UI/CustomSvgIcons/ObjectVariable'; +import LocalVariableIcon from '../../UI/CustomSvgIcons/LocalVariable'; import { ProjectScopedContainersAccessor } from '../../InstructionOrExpression/EventsScope.flow'; const gd: libGDevelop = global.gd; @@ -128,14 +128,14 @@ export const getVariableSourceIcon = ( switch (variableSourceType) { case gd.VariablesContainer.Global: case gd.VariablesContainer.ExtensionGlobal: - return GlobalIcon; + return GlobalVariableIcon; case gd.VariablesContainer.Scene: case gd.VariablesContainer.ExtensionScene: - return SceneIcon; + return SceneVariableIcon; case gd.VariablesContainer.Object: - return ObjectIcon; + return ObjectVariableIcon; case gd.VariablesContainer.Local: - return LocalIcon; + return LocalVariableIcon; default: return UnknownTypeIcon; } diff --git a/newIDE/app/src/EventsSheet/Toolbar.js b/newIDE/app/src/EventsSheet/Toolbar.js index 49f6c7b98b69..1af61272bfe5 100644 --- a/newIDE/app/src/EventsSheet/Toolbar.js +++ b/newIDE/app/src/EventsSheet/Toolbar.js @@ -17,7 +17,7 @@ import RedoIcon from '../UI/CustomSvgIcons/Redo'; import ToolbarSearchIcon from '../UI/CustomSvgIcons/ToolbarSearch'; import EditSceneIcon from '../UI/CustomSvgIcons/EditScene'; import { getShortcutDisplayName, useShortcutMap } from '../KeyboardShortcuts'; -import AddLocalVariableIcon from '../UI/CustomSvgIcons/ExternalEvents'; +import AddLocalVariableIcon from '../UI/CustomSvgIcons/LocalVariable'; type Props = {| onAddStandardEvent: () => void, diff --git a/newIDE/app/src/ProjectManager/index.js b/newIDE/app/src/ProjectManager/index.js index d3fa22df5e38..efd417dd6472 100644 --- a/newIDE/app/src/ProjectManager/index.js +++ b/newIDE/app/src/ProjectManager/index.js @@ -999,7 +999,7 @@ const ProjectManager = React.forwardRef( globalVariablesItemId, i18n._(t`Global variables`), openProjectVariables, - 'res/icons_default/publish_black.svg' + 'res/icons_default/global_variable24_black.svg' ) ), new LeafTreeViewItem( diff --git a/newIDE/app/src/SceneEditor/ScenePropertiesDialog.js b/newIDE/app/src/SceneEditor/ScenePropertiesDialog.js index a4559eab1555..6426095b90c5 100644 --- a/newIDE/app/src/SceneEditor/ScenePropertiesDialog.js +++ b/newIDE/app/src/SceneEditor/ScenePropertiesDialog.js @@ -25,6 +25,7 @@ import { Accordion, AccordionHeader, AccordionBody } from '../UI/Accordion'; import { IconContainer } from '../UI/IconContainer'; import { getBehaviorTutorialIds } from '../Utils/GDevelopServices/Tutorial'; import { type ResourceManagementProps } from '../ResourcesList/ResourceSource'; +import SceneVariable from '../UI/CustomSvgIcons/SceneVariable'; const gd: libGDevelop = global.gd; @@ -212,6 +213,7 @@ const ScenePropertiesDialog = ({ secondaryActions={[ } label={Edit scene variables} fullWidth onClick={() => { diff --git a/newIDE/app/src/SceneEditor/SwipeableDrawerEditorsDisplay/BottomToolbar.js b/newIDE/app/src/SceneEditor/SwipeableDrawerEditorsDisplay/BottomToolbar.js index 4e3a9c7f10bf..f8c6c42f8ef5 100644 --- a/newIDE/app/src/SceneEditor/SwipeableDrawerEditorsDisplay/BottomToolbar.js +++ b/newIDE/app/src/SceneEditor/SwipeableDrawerEditorsDisplay/BottomToolbar.js @@ -12,23 +12,19 @@ import { type EditorId } from '..'; import Paper from '../../UI/Paper'; const iconSize = 24; -const iconButtonPaddingTop = 8; /** - * Padding bottom is bigger than padding top to leave space for the Android/iOS + * Padding bottom is added to toolbar to leave space for the Android/iOS * bottom navigation bar. */ -const iconButtonPaddingBottom = 20; -const iconButtonPaddingHorizontal = 8; +const toolbarPaddingBottom = 12; +const iconButtonPadding = 8; const iconButtonLabelPadding = 2; const toolbarHeight = - iconSize + - 2 * iconButtonLabelPadding + - iconButtonPaddingTop + - iconButtonPaddingBottom; + iconSize + 2 * iconButtonLabelPadding + 2 * iconButtonPadding; const styles = { iconButton: { - padding: `${iconButtonPaddingTop}px ${iconButtonPaddingHorizontal}px ${iconButtonPaddingBottom}px ${iconButtonPaddingHorizontal}px`, + padding: iconButtonPadding, fontSize: 'inherit', }, buttonLabel: { @@ -69,7 +65,7 @@ const editors = { const BottomToolbar = React.memo((props: Props) => { return ( - + {Object.keys(editors).map(editorId => { const { icon, buttonId } = editors[editorId]; diff --git a/newIDE/app/src/UI/CustomSvgIcons/GlobalVariable.js b/newIDE/app/src/UI/CustomSvgIcons/GlobalVariable.js new file mode 100644 index 000000000000..fb068fc656f1 --- /dev/null +++ b/newIDE/app/src/UI/CustomSvgIcons/GlobalVariable.js @@ -0,0 +1,19 @@ +import React from 'react'; +import SvgIcon from '@material-ui/core/SvgIcon'; + +export default React.memo(props => ( + + + + +)); diff --git a/newIDE/app/src/UI/CustomSvgIcons/LocalVariable.js b/newIDE/app/src/UI/CustomSvgIcons/LocalVariable.js new file mode 100644 index 000000000000..d3b17ba19033 --- /dev/null +++ b/newIDE/app/src/UI/CustomSvgIcons/LocalVariable.js @@ -0,0 +1,25 @@ +import React from 'react'; +import SvgIcon from '@material-ui/core/SvgIcon'; + +export default React.memo(props => ( + + + + + +)); diff --git a/newIDE/app/src/UI/CustomSvgIcons/ObjectVariable.js b/newIDE/app/src/UI/CustomSvgIcons/ObjectVariable.js new file mode 100644 index 000000000000..5d0583183cbd --- /dev/null +++ b/newIDE/app/src/UI/CustomSvgIcons/ObjectVariable.js @@ -0,0 +1,19 @@ +import React from 'react'; +import SvgIcon from '@material-ui/core/SvgIcon'; + +export default React.memo(props => ( + + + + +)); diff --git a/newIDE/app/src/UI/CustomSvgIcons/Paste.js b/newIDE/app/src/UI/CustomSvgIcons/Paste.js index 3bd7aa8869d5..a933b8ac22bb 100644 --- a/newIDE/app/src/UI/CustomSvgIcons/Paste.js +++ b/newIDE/app/src/UI/CustomSvgIcons/Paste.js @@ -2,7 +2,12 @@ import React from 'react'; import SvgIcon from '@material-ui/core/SvgIcon'; export default React.memo(props => ( - - + + )); diff --git a/newIDE/app/src/UI/CustomSvgIcons/Redo.js b/newIDE/app/src/UI/CustomSvgIcons/Redo.js index f92c554d3790..82a711db1e1f 100644 --- a/newIDE/app/src/UI/CustomSvgIcons/Redo.js +++ b/newIDE/app/src/UI/CustomSvgIcons/Redo.js @@ -2,17 +2,9 @@ import React from 'react'; import SvgIcon from '@material-ui/core/SvgIcon'; export default React.memo(props => ( - + - diff --git a/newIDE/app/src/UI/CustomSvgIcons/SceneVariable.js b/newIDE/app/src/UI/CustomSvgIcons/SceneVariable.js new file mode 100644 index 000000000000..b8ad8bba705a --- /dev/null +++ b/newIDE/app/src/UI/CustomSvgIcons/SceneVariable.js @@ -0,0 +1,19 @@ +import React from 'react'; +import SvgIcon from '@material-ui/core/SvgIcon'; + +export default React.memo(props => ( + + + + +)); diff --git a/newIDE/app/src/UI/CustomSvgIcons/Trash.js b/newIDE/app/src/UI/CustomSvgIcons/Trash.js index 288415f9470e..d7cd3ba35823 100644 --- a/newIDE/app/src/UI/CustomSvgIcons/Trash.js +++ b/newIDE/app/src/UI/CustomSvgIcons/Trash.js @@ -2,23 +2,11 @@ import React from 'react'; import SvgIcon from '@material-ui/core/SvgIcon'; export default React.memo(props => ( - + - - diff --git a/newIDE/app/src/UI/CustomSvgIcons/Undo.js b/newIDE/app/src/UI/CustomSvgIcons/Undo.js index eaf72645a634..2695204690e8 100644 --- a/newIDE/app/src/UI/CustomSvgIcons/Undo.js +++ b/newIDE/app/src/UI/CustomSvgIcons/Undo.js @@ -2,17 +2,9 @@ import React from 'react'; import SvgIcon from '@material-ui/core/SvgIcon'; export default React.memo(props => ( - + - diff --git a/newIDE/app/src/UI/Toolbar.js b/newIDE/app/src/UI/Toolbar.js index bba15ef1a0a9..1ea15821603b 100644 --- a/newIDE/app/src/UI/Toolbar.js +++ b/newIDE/app/src/UI/Toolbar.js @@ -6,6 +6,7 @@ type ToolbarProps = {| children: React.Node, height?: number, borderBottomColor?: ?string, + paddingBottom?: number, |}; const styles = { @@ -20,7 +21,12 @@ const styles = { }; export const Toolbar = React.memo( - ({ children, borderBottomColor, height = 40 }: ToolbarProps) => { + ({ + children, + borderBottomColor, + height = 40, + paddingBottom, + }: ToolbarProps) => { const gdevelopTheme = React.useContext(GDevelopThemeContext); return (
( borderBottom: borderBottomColor ? `2px solid ${borderBottomColor}` : undefined, + ...(paddingBottom ? { paddingBottom } : undefined), }} > {children} diff --git a/newIDE/app/src/VariablesList/VariablesListToolbar.js b/newIDE/app/src/VariablesList/VariablesListToolbar.js index 5710940635c1..9f14eedc01cd 100644 --- a/newIDE/app/src/VariablesList/VariablesListToolbar.js +++ b/newIDE/app/src/VariablesList/VariablesListToolbar.js @@ -8,7 +8,7 @@ import Undo from '../UI/CustomSvgIcons/Undo'; import Redo from '../UI/CustomSvgIcons/Redo'; import Trash from '../UI/CustomSvgIcons/Trash'; import Copy from '../UI/CustomSvgIcons/Copy'; -import Clipboard from '../UI/CustomSvgIcons/Clipboard'; +import Paste from '../UI/CustomSvgIcons/Paste'; import { Column, Line, Spacer } from '../UI/Grid'; import FlatButton from '../UI/FlatButton'; @@ -46,7 +46,7 @@ const VariablesListToolbar = React.memo((props: Props) => { }, { key: 'paste', - Icon: Clipboard, + Icon: Paste, label: Paste, tooltip: t`Paste`, onClick: props.onPaste,