diff --git a/newIDE/app/src/InstancesEditor/InstancesList/index.js b/newIDE/app/src/InstancesEditor/InstancesList/index.js index 8d25438ba628..9bf4e84b6c6d 100644 --- a/newIDE/app/src/InstancesEditor/InstancesList/index.js +++ b/newIDE/app/src/InstancesEditor/InstancesList/index.js @@ -9,11 +9,14 @@ import { } from 'react-virtualized'; import IconButton from '../../UI/IconButton'; import KeyboardShortcuts from '../../UI/KeyboardShortcuts'; -import GDevelopThemeContext from '../../UI/Theme/GDevelopThemeContext'; import CompactSearchBar from '../../UI/CompactSearchBar'; import RemoveCircle from '../../UI/CustomSvgIcons/RemoveCircle'; import Lock from '../../UI/CustomSvgIcons/Lock'; import LockOpen from '../../UI/CustomSvgIcons/LockOpen'; +import RotateZ from '../../UI/CustomSvgIcons/RotateZ'; +import Layers from '../../UI/CustomSvgIcons/Layers'; +import SortArrowUp from '../../UI/CustomSvgIcons/SortArrowUp'; +import SortArrowDown from '../../UI/CustomSvgIcons/SortArrowDown'; import { toFixedWithoutTrailingZeros } from '../../Utils/Mathematics'; import ErrorBoundary from '../../UI/ErrorBoundary'; import useForceUpdate from '../../Utils/UseForceUpdate'; @@ -46,11 +49,13 @@ const styles = { flexDirection: 'column', alignItems: 'stretch', minWidth: 0, + backgroundColor: 'var(--theme-surface-window-background-color)', }, tableContainer: { flex: 1, overflowX: 'auto', overflowY: 'hidden', + backgroundColor: 'var(--table-row-odd-background-color)', }, }; @@ -63,6 +68,40 @@ const compareStrings = (x: string, y: string, direction: number): number => { return 0; }; +const renderSortableHeader = ({ + dataKey, + label, + sortBy, + sortDirection, +}: { + dataKey: string, + label: React.Node, + sortBy: string, + sortDirection: string, +}) => { + const isActive = dataKey === sortBy; + return ( + + {label} + {isActive && + (sortDirection === 'ASC' ? ( + + ) : ( + + ))} + + ); +}; + export type InstancesListInterface = {| forceUpdate: () => void, |}; @@ -85,8 +124,8 @@ class InstancesList extends Component { // $FlowFixMe[missing-local-annot] state = { searchText: '', - sortBy: '', - sortDirection: SortDirection.ASC, + sortBy: 'zOrder', + sortDirection: SortDirection.DESC, }; renderedRows: Array = []; instanceRowRenderer: ?typeof gd.InitialInstanceJSFunctor; @@ -118,7 +157,7 @@ class InstancesList extends Component { y: toFixedWithoutTrailingZeros(instance.getY(), 2), angle: toFixedWithoutTrailingZeros(instance.getAngle(), 2), layer: instance.getLayer(), - zOrder: instance.getZOrder(), + zOrder: String(instance.getZOrder()), }); } }; @@ -250,112 +289,112 @@ class InstancesList extends Component { const tableKey = instances.ptr; return ( - - {gdevelopTheme => ( -
- - - - this.setState({ - searchText, - }) - } - onRequestSearch={this._selectFirstInstance} - placeholder={t`Search instances`} +
+ + + + this.setState({ + searchText, + }) + } + onRequestSearch={this._selectFirstInstance} + placeholder={t`Search instances`} + /> + + +
+ + {({ height, width }) => ( + (this.table = table)} + key={tableKey} + headerHeight={30} + height={height} + className={`gd-table`} + headerClassName={'tableHeaderColumn'} + headerStyle={{ + backgroundColor: 'var(--table-row-odd-background-color)', + }} + rowCount={this.renderedRows.length} + rowGetter={this._rowGetter} + rowHeight={32} + onRowClick={this._onRowClick} + rowClassName={this._rowClassName} + sort={this._sort} + sortBy={sortBy} + sortDirection={sortDirection} + width={Math.max(width, minimumWidths.table)} + > + Object name} + dataKey="name" + width={Math.max(width * 0.35, minimumWidths.objectName)} + className={'tableColumn'} + headerRenderer={renderSortableHeader} /> - - -
- - {({ height, width }) => ( - (this.table = table)} - key={tableKey} - headerHeight={30} - height={height} - className={`gd-table`} - headerClassName={'tableHeaderColumn'} - rowCount={this.renderedRows.length} - rowGetter={this._rowGetter} - rowHeight={32} - onRowClick={this._onRowClick} - rowClassName={this._rowClassName} - sort={this._sort} - sortBy={sortBy} - sortDirection={sortDirection} - width={Math.max(width, minimumWidths.table)} - > - Object name} - dataKey="name" - width={Math.max(width * 0.35, minimumWidths.objectName)} - className={'tableColumn'} - /> - - X} - dataKey="x" - width={Math.max( - width * 0.1, - minimumWidths.numberProperty - )} - className={'tableColumn'} - /> - Y} - dataKey="y" - width={Math.max( - width * 0.1, - minimumWidths.numberProperty - )} - className={'tableColumn'} - /> - Angle} - dataKey="angle" - width={Math.max( - width * 0.1, - minimumWidths.numberProperty - )} - className={'tableColumn'} - /> - Layer} - dataKey="layer" - width={Math.max(width * 0.2, minimumWidths.layerName)} - className={'tableColumn'} + X} + dataKey="x" + width={Math.max(width * 0.1, minimumWidths.numberProperty)} + className={'tableColumn tableColumnSecondary'} + headerRenderer={renderSortableHeader} + /> + Y} + dataKey="y" + width={Math.max(width * 0.1, minimumWidths.numberProperty)} + className={'tableColumn tableColumnSecondary'} + headerRenderer={renderSortableHeader} + /> + Z} + dataKey="zOrder" + width={Math.max(width * 0.1, minimumWidths.numberProperty)} + className={'tableColumn tableColumnSecondary'} + headerRenderer={renderSortableHeader} + /> + - Z Order} - dataKey="zOrder" - width={Math.max( - width * 0.1, - minimumWidths.numberProperty - )} - className={'tableColumn'} + } + dataKey="angle" + width={Math.max(width * 0.1, minimumWidths.numberProperty)} + className={'tableColumn tableColumnSecondary'} + headerRenderer={renderSortableHeader} + /> + - - )} - -
-
- )} - + } + dataKey="layer" + width={Math.max(width * 0.2, minimumWidths.layerName)} + className={'tableColumn tableColumnSecondary'} + headerRenderer={renderSortableHeader} + /> + + + )} + +
+
); } } diff --git a/newIDE/app/src/UI/CustomSvgIcons/SortArrowDown.js b/newIDE/app/src/UI/CustomSvgIcons/SortArrowDown.js new file mode 100644 index 000000000000..ce4a8622dcf4 --- /dev/null +++ b/newIDE/app/src/UI/CustomSvgIcons/SortArrowDown.js @@ -0,0 +1,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/SortArrowUp.js b/newIDE/app/src/UI/CustomSvgIcons/SortArrowUp.js new file mode 100644 index 000000000000..e0a4eefc7a8c --- /dev/null +++ b/newIDE/app/src/UI/CustomSvgIcons/SortArrowUp.js @@ -0,0 +1,11 @@ +import React from 'react'; +import SvgIcon from '@material-ui/core/SvgIcon'; + +export default React.memo(props => ( + + + +)); diff --git a/newIDE/app/src/UI/EditorMosaic/index.js b/newIDE/app/src/UI/EditorMosaic/index.js index ef8bcc30bd56..c7fdafdf7ea5 100644 --- a/newIDE/app/src/UI/EditorMosaic/index.js +++ b/newIDE/app/src/UI/EditorMosaic/index.js @@ -514,6 +514,7 @@ const EditorMosaic: React.ComponentType<{