Add row allowing to change background color in LayersList

newIDE/app/src/EffectsList/EffectsListDialog.js

@@ -18,7 +18,12 @@ export default class EffectsListDialog extends React.Component<Props, {||}> {
     return (
       <Dialog
         noMargin
-        secondaryActions={[<HelpButton key="help" helpPagePath="TODO" />]}
+        secondaryActions={[
+          <HelpButton
+            key="help"
+            helpPagePath="/interface/scene-editor/layers-and-cameras"
+          />,
+        ]}
         actions={[
           <FlatButton
             label={<Trans>Ok</Trans>}

newIDE/app/src/LayersList/BackgroundColorRow.js

@@ -0,0 +1,48 @@
+// @flow
+import { Trans } from '@lingui/macro';
+
+import React from 'react';
+import { TableRow, TableRowColumn } from 'material-ui/Table';
+import TextField from 'material-ui/TextField';
+
+import styles from './styles';
+import ThemeConsumer from '../UI/Theme/ThemeConsumer';
+import ColorPicker from '../UI/ColorField/ColorPicker';
+
+type Props = {|
+  layout: gdLayout,
+  onBackgroundColorChanged: () => void,
+|};
+
+export default ({ layout, onBackgroundColorChanged }: Props) => (
+  <ThemeConsumer>
+    {muiTheme => (
+      <TableRow
+        style={{
+          backgroundColor: muiTheme.list.itemsBackgroundColor,
+        }}
+      >
+        <TableRowColumn style={styles.handleColumn} />
+        <TableRowColumn>
+          <TextField hintText={<Trans>Background color</Trans>} disabled />
+        </TableRowColumn>
+        <TableRowColumn style={styles.effectsColumn}>
+          <ColorPicker
+            disableAlpha
+            color={{
+              r: layout.getBackgroundColorRed(),
+              g: layout.getBackgroundColorGreen(),
+              b: layout.getBackgroundColorBlue(),
+              a: 255,
+            }}
+            onChangeComplete={color => {
+              layout.setBackgroundColor(color.rgb.r, color.rgb.g, color.rgb.b);
+              onBackgroundColorChanged();
+            }}
+          />
+        </TableRowColumn>
+        <TableRowColumn style={styles.toolColumn} />
+      </TableRow>
+    )}
+  </ThemeConsumer>
+);

newIDE/app/src/LayersList/index.js

@@ -15,8 +15,8 @@ import styles from './styles';
 import LayerRow from './LayerRow';
 import AddLayerRow from './AddLayerRow';
 import EffectsListDialog from '../EffectsList/EffectsListDialog';
+import BackgroundColorRow from './BackgroundColorRow';
 
-const SortableAddLayerRow = SortableElement(AddLayerRow);
 const SortableLayerRow = SortableElement(LayerRow);
 
 type LayersListBodyState = {|
@@ -83,31 +83,29 @@ class LayersListBody extends Component<*, LayersListBodyState> {
       );
     });
 
-    const addRow = (
-      <SortableAddLayerRow
-        index={layersContainer.getLayersCount()}
-        key={'add-layer-row'}
-        disabled
-        onAdd={() => {
-          const name = newNameGenerator('Layer', name =>
-            layersContainer.hasLayerNamed(name)
-          );
-          layersContainer.insertNewLayer(
-            name,
-            layersContainer.getLayersCount()
-          );
-          this.forceUpdate();
-        }}
-      />
-    );
-
     return (
       <TableBody
         displayRowCheckbox={false}
         deselectOnClickaway={true}
         showRowHover={true}
       >
-        {containerLayersList.concat(addRow)}
+        {containerLayersList}
+        <BackgroundColorRow
+          layout={layersContainer}
+          onBackgroundColorChanged={() => this.forceUpdate()}
+        />
+        <AddLayerRow
+          onAdd={() => {
+            const name = newNameGenerator('Layer', name =>
+              layersContainer.hasLayerNamed(name)
+            );
+            layersContainer.insertNewLayer(
+              name,
+              layersContainer.getLayersCount()
+            );
+            this.forceUpdate();
+          }}
+        />
       </TableBody>
     );
   }

newIDE/app/src/LayersList/styles.js

@@ -7,6 +7,7 @@ export default {
   },
   effectsColumn: {
     width: 100,
+    textAlign: 'center',
   },
   toolColumn: {
     width: 96,