Layout improvements

public/locales/en/translation.json

@@ -418,6 +418,8 @@
       "ordering": "Ordering",
       "description": "Description",
       "show-description": "Display description in layers tree",
+      "description-rich": "Rich text",
+      "description-html": "HTML",
       "interactions": "Interactions",
       "all-data-available": " All available data",
       "error-required": "This field is required",

public/locales/fr/translation.json

@@ -470,6 +470,8 @@
       "ordering": "Classement",
       "description": "Description",
       "show-description": "Afficher la description dans l'arbre des couches",
+      "description-rich": "Texte riche",
+      "description-html": "HTML",
       "interactions": "Interactions",
       "all-data-available": " Toutes les données disponibles",
       "error-required": "Ce champ est requis",

src/modules/RA/DataLayer/components/DataLayerForm.js

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { TabbedForm, FormTab, ArrayInput, SimpleFormIterator } from 'react-admin';
+import { TabbedForm, FormTab, ArrayInput, SimpleFormIterator, TabbedFormTabs } from 'react-admin';
 
 import JSONInput from '../../../../components/react-admin/JSONInput';
 import CustomFormTab from '../../../../components/react-admin/CustomFormTab';
@@ -131,7 +131,7 @@ const DataLayerForm = React.memo(props => {
   }, []);
 
   return (
-    <TabbedForm sanitizeEmptyValues={false} {...props} initialValues={{ fields: [] }}>
+    <TabbedForm tabs={<TabbedFormTabs variant="scrollable" scrollButtons="auto" />} sanitizeEmptyValues={false} {...props} initialValues={{ fields: [] }}>
       <CustomFormTab
         label="datalayer.form.definition"
         onChange={onDefinitionErrorChange}

src/modules/RA/DataLayer/components/DescriptionInput.js

@@ -0,0 +1,37 @@
+import React, { useState } from 'react';
+import { Tab, Tabs } from '@material-ui/core';
+import RichTextInput from 'ra-input-rich-text';
+import { Labeled, TextInput, useTranslate } from 'react-admin';
+
+const DescriptionInput = ({ source, label }) => {
+  const [currentTab, setCurrentTab] = useState(0);
+  const translate = useTranslate();
+
+  return (
+    <>
+      <Labeled label={label} />
+      <Tabs
+        value={currentTab}
+        onChange={(_, newVal) => setCurrentTab(newVal)}
+        style={{
+          root: {
+            textTransform: 'none',
+          },
+        }}
+        indicatorColor="primary"
+        textColor="primary"
+      >
+        <Tab label={translate('datalayer.form.description-rich')} />
+        <Tab label={translate('datalayer.form.description-html')} />
+      </Tabs>
+      <div style={{ minHeight: 200 }}>
+        {currentTab === 0 && <RichTextInput source={source} label="" />}
+        {currentTab === 1 && (
+          <TextInput multiline source={source} label="" fullWidth />
+        )}
+      </div>
+    </>
+  );
+};
+
+export default DescriptionInput;

src/modules/RA/DataLayer/components/tabs/DefinitionTab.js

@@ -21,6 +21,7 @@ import { RES_DATASOURCE } from '../../../ra-modules';
 import { WMTS } from '../../../DataSource';
 import useSourceData from '../useSourceData';
 import SourceFilterField from '../SourceFilterField';
+import DescriptionInput from '../DescriptionInput';
 
 const Br = () => <br />;
 
@@ -31,15 +32,21 @@ const DefinitionTab = ({ onSwitch, external }) => {
   const dataProvider = useDataProvider();
   const form = useForm();
 
-  const { input: { value: sourceId } } = useField('source');
-  const { input: { value: fields } } = useField('fields');
+  const {
+    input: { value: sourceId },
+  } = useField('source');
+  const {
+    input: { value: fields },
+  } = useField('fields');
 
   const { _type: type } = useSourceData('source');
 
   React.useEffect(() => onSwitch(type === WMTS), [onSwitch, type]);
 
   React.useEffect(() => {
-    if (external) { return; }
+    if (external) {
+      return;
+    }
     updateFieldFromSource(fields, form, dataProvider, sourceId);
   }, [dataProvider, external, fields, form, sourceId]);
 
@@ -90,12 +97,7 @@ const DefinitionTab = ({ onSwitch, external }) => {
         label="resources.datalayer.fields.active_by_default_pastpart"
       />
 
-      <TextInput
-        multiline
-        source="description"
-        label="datalayer.form.description"
-        fullWidth
-      />
+      <DescriptionInput source="description" label="datalayer.form.description" />
 
       <BooleanInput
         source="settings.description.show_in_tree"

src/modules/RA/DataLayer/components/tabs/StyleTab/Style/CategorizeValue.js

@@ -31,7 +31,7 @@ const CategorizedValue = ({ path, category, Component }) => {
           />
         )}
       </Field>
-      <span>
+      <span style={{ marginLeft: '1em' }}>
         {category.name || translate('style-editor.categorize.empty-category')}
       </span>
     </div>

src/modules/RA/DataLayer/components/tabs/StyleTab/index.js

@@ -56,7 +56,7 @@ const StyleTab = ({ external, ...rest }) => {
 
   return (
     <> {/* Protect div element */}
-      <div style={{ width: '70%' }}>
+      <div>
         <StyleEditor path="main_style" geomType={geomType} fields={fields} getValuesOfProperty={getValuesOfProperty} />
 
         <ArrayInput source="extra_styles" label="datalayer.form.styles.secondarylabels" fullWidth>

src/modules/RA/DataLayer/components/tabs/TableTab/TableConfigField.js

@@ -80,7 +80,7 @@ const FieldRow = ({ field, onChange, exportEnabled }) => {
       <TableCell scope="row">
         <DragHandle />
       </TableCell>
-      <TableCell style={{ userSelect: 'none' }}>
+      <TableCell>
         {field.name}
       </TableCell>
       <TableCell>

src/views/Main/styles.scss

@@ -5,6 +5,7 @@
   flex: 1 0 auto;
 
   &-content {
+    max-width: calc(100vw - 15px);
     min-height: 100%;
     display: flex;
     flex-direction: column;
@@ -37,3 +38,11 @@
     text-align: center;
   }
 }
+
+.layout {
+  min-width: unset !important;
+}
+
+#main-content {
+  width: 100%;
+}