Instance list panel visual update

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 (
+    <span
+      style={{
+        color: isActive
+          ? 'var(--theme-text-default-color)'
+          : 'var(--table-text-color-header)',
+        display: 'flex',
+        alignItems: 'center',
+        gap: 4,
+      }}
+    >
+      {label}
+      {isActive &&
+        (sortDirection === 'ASC' ? (
+          <SortArrowUp style={{ width: 12, height: 12, display: 'block' }} />
+        ) : (
+          <SortArrowDown style={{ width: 12, height: 12, display: 'block' }} />
+        ))}
+    </span>
+  );
+};
+
 export type InstancesListInterface = {|
   forceUpdate: () => void,
 |};
@@ -85,8 +124,8 @@ class InstancesList extends Component<Props, State> {
   // $FlowFixMe[missing-local-annot]
   state = {
     searchText: '',
-    sortBy: '',
-    sortDirection: SortDirection.ASC,
+    sortBy: 'zOrder',
+    sortDirection: SortDirection.DESC,
   };
   renderedRows: Array<RenderedRowInfo> = [];
   instanceRowRenderer: ?typeof gd.InitialInstanceJSFunctor;
@@ -118,7 +157,7 @@ class InstancesList extends Component<Props, State> {
           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<Props, State> {
     const tableKey = instances.ptr;
 
     return (
-      <GDevelopThemeContext.Consumer>
-        {gdevelopTheme => (
-          <div style={styles.container}>
-            <Line>
-              <Column expand noOverflowParent>
-                <CompactSearchBar
-                  value={searchText}
-                  onChange={searchText =>
-                    this.setState({
-                      searchText,
-                    })
-                  }
-                  onRequestSearch={this._selectFirstInstance}
-                  placeholder={t`Search instances`}
+      <div style={styles.container}>
+        <Line>
+          <Column expand noOverflowParent>
+            <CompactSearchBar
+              value={searchText}
+              onChange={searchText =>
+                this.setState({
+                  searchText,
+                })
+              }
+              onRequestSearch={this._selectFirstInstance}
+              placeholder={t`Search instances`}
+            />
+          </Column>
+        </Line>
+        <div
+          style={styles.tableContainer}
+          onKeyDown={this._keyboardShortcuts.onKeyDown}
+          onKeyUp={this._keyboardShortcuts.onKeyUp}
+        >
+          <AutoSizer>
+            {({ height, width }) => (
+              <RVTable
+                ref={table => (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)}
+              >
+                <RVColumn
+                  label={<Trans>Object name</Trans>}
+                  dataKey="name"
+                  width={Math.max(width * 0.35, minimumWidths.objectName)}
+                  className={'tableColumn'}
+                  headerRenderer={renderSortableHeader}
                 />
-              </Column>
-            </Line>
-            <div
-              style={styles.tableContainer}
-              onKeyDown={this._keyboardShortcuts.onKeyDown}
-              onKeyUp={this._keyboardShortcuts.onKeyUp}
-            >
-              <AutoSizer>
-                {({ height, width }) => (
-                  <RVTable
-                    ref={table => (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)}
-                  >
-                    <RVColumn
-                      label={<Trans>Object name</Trans>}
-                      dataKey="name"
-                      width={Math.max(width * 0.35, minimumWidths.objectName)}
-                      className={'tableColumn'}
-                    />
-                    <RVColumn
-                      label=""
-                      dataKey="locked"
-                      width={Math.max(
-                        width * 0.05,
-                        minimumWidths.numberProperty
-                      )}
-                      className={'tableColumn'}
-                      cellRenderer={this._renderLockCell}
-                    />
-                    <RVColumn
-                      label={<Trans>X</Trans>}
-                      dataKey="x"
-                      width={Math.max(
-                        width * 0.1,
-                        minimumWidths.numberProperty
-                      )}
-                      className={'tableColumn'}
-                    />
-                    <RVColumn
-                      label={<Trans>Y</Trans>}
-                      dataKey="y"
-                      width={Math.max(
-                        width * 0.1,
-                        minimumWidths.numberProperty
-                      )}
-                      className={'tableColumn'}
-                    />
-                    <RVColumn
-                      label={<Trans>Angle</Trans>}
-                      dataKey="angle"
-                      width={Math.max(
-                        width * 0.1,
-                        minimumWidths.numberProperty
-                      )}
-                      className={'tableColumn'}
-                    />
-                    <RVColumn
-                      label={<Trans>Layer</Trans>}
-                      dataKey="layer"
-                      width={Math.max(width * 0.2, minimumWidths.layerName)}
-                      className={'tableColumn'}
+                <RVColumn
+                  label={<Trans>X</Trans>}
+                  dataKey="x"
+                  width={Math.max(width * 0.1, minimumWidths.numberProperty)}
+                  className={'tableColumn tableColumnSecondary'}
+                  headerRenderer={renderSortableHeader}
+                />
+                <RVColumn
+                  label={<Trans>Y</Trans>}
+                  dataKey="y"
+                  width={Math.max(width * 0.1, minimumWidths.numberProperty)}
+                  className={'tableColumn tableColumnSecondary'}
+                  headerRenderer={renderSortableHeader}
+                />
+                <RVColumn
+                  label={<Trans>Z</Trans>}
+                  dataKey="zOrder"
+                  width={Math.max(width * 0.1, minimumWidths.numberProperty)}
+                  className={'tableColumn tableColumnSecondary'}
+                  headerRenderer={renderSortableHeader}
+                />
+                <RVColumn
+                  label={
+                    <RotateZ
+                      titleAccess="Rotation (Z)"
+                      style={{ width: 18, height: 18, display: 'block' }}
                     />
-                    <RVColumn
-                      label={<Trans>Z Order</Trans>}
-                      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}
+                />
+                <RVColumn
+                  label={
+                    <Layers
+                      titleAccess="Layer"
+                      style={{ width: 18, height: 18, display: 'block' }}
                     />
-                  </RVTable>
-                )}
-              </AutoSizer>
-            </div>
-          </div>
-        )}
-      </GDevelopThemeContext.Consumer>
+                  }
+                  dataKey="layer"
+                  width={Math.max(width * 0.2, minimumWidths.layerName)}
+                  className={'tableColumn tableColumnSecondary'}
+                  headerRenderer={renderSortableHeader}
+                />
+                <RVColumn
+                  label=""
+                  dataKey="locked"
+                  width={Math.max(width * 0.05, minimumWidths.numberProperty)}
+                  className={'tableColumn'}
+                  cellRenderer={this._renderLockCell}
+                />
+              </RVTable>
+            )}
+          </AutoSizer>
+        </div>
+      </div>
     );
   }
 }

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 => (
+  <SvgIcon {...props} width="12" height="12" viewBox="0 0 12 12" fill="none">
+    <path
+      d="M5.99996 2C6.20707 2 6.37496 2.16789 6.37496 2.375V8.68848L8.35348 6.61621C8.49642 6.46646 8.73393 6.4607 8.88375 6.60352C9.0335 6.74646 9.03926 6.98397 8.89644 7.13379L6.27144 9.88379C6.20068 9.95792 6.10244 10 5.99996 10C5.89748 10 5.79924 9.95792 5.72848 9.88379L3.10348 7.13379C2.96066 6.98397 2.96642 6.74646 3.11617 6.60352C3.26599 6.46069 3.5035 6.46646 3.64644 6.61621L5.62496 8.68848V2.375C5.62496 2.16789 5.79285 2 5.99996 2Z"
+      fill="currentColor"
+    />
+  </SvgIcon>
+));

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 => (
+  <SvgIcon {...props} width="12" height="12" viewBox="0 0 12 12" fill="none">
+    <path
+      d="M5.99996 10C6.20707 10 6.37496 9.83211 6.37496 9.625V3.31152L8.35348 5.38379C8.49642 5.53354 8.73393 5.5393 8.88375 5.39648C9.0335 5.25354 9.03926 5.01603 8.89644 4.86621L6.27144 2.11621C6.20068 2.04208 6.10244 2 5.99996 2C5.89748 2 5.79924 2.04208 5.72848 2.11621L3.10348 4.86621C2.96066 5.01603 2.96642 5.25354 3.11617 5.39648C3.26599 5.53931 3.5035 5.53354 3.64644 5.38379L5.62496 3.31152V9.625C5.62496 9.83211 5.79285 10 5.99996 10Z"
+      fill="currentColor"
+    />
+  </SvgIcon>
+));

newIDE/app/src/UI/EditorMosaic/index.js

@@ -514,6 +514,7 @@ const EditorMosaic: React.ComponentType<{
                 <MosaicWindow
                   path={path}
                   title={i18n._(editor.title)}
+                  className={`mosaic-editor-${editorName}`}
                   onDragStart={onDragOrResizedStarted}
                   onDragEnd={onDragOrResizedEnded}
                   toolbarControls={

newIDE/app/src/UI/Theme/DefaultDarkTheme/theme.json

@@ -940,12 +940,12 @@
     "row": {
       "odd": {
         "background-color": {
-          "value": "#282C34"
+          "value": "#1D1D26"
         }
       },
       "even": {
         "background-color": {
-          "value": "#21252B"
+          "value": "#1D1D26"
         }
       },
       "selected": {