Improves the experience of reordering modalities for categorical laye…

…r (see riatelab#62) + avoid to propose to reuse the style of an existing categorical layer when there is only one + harmonize style between categorical and picto modal windows

client/css/discretization.css

@@ -142,3 +142,29 @@ label_it_inline {
   background-image: linear-gradient(to bottom, #edfa3c, #d6d934);
   text-decoration: none;
 }
+
+/* Styles for list of elements in categorical / picto panel */
+li.typo_class:first-child {
+  border-top-left-radius: 4px;
+  border-top-right-radius: 4px;
+}
+
+li.typo_class:last-child {
+  border-bottom-left-radius: 4px;
+  border-bottom-right-radius: 4px;
+}
+
+li.typo_class {
+  border: 1px solid #ddd;
+  padding: 4px;
+  cursor: grab;
+}
+
+li.typo_class > p.color_square {
+  cursor: pointer;
+}
+
+li.typo_class > p.symbol_section {
+  cursor: pointer;
+}
+/* End of styles for list of elements in categorical / picto panel */

client/js/classification/categorical_panel.js

@@ -14,12 +14,16 @@ function fetch_categorical_colors() {
   return color_map;
 }
 
+// eslint-disable-next-line import/prefer-default-export
 export function display_categorical_box(data_layer, layer_name, field, cats) {
   const is_hex_color = new RegExp(/^#([0-9a-f]{6}|[0-9a-f]{3})$/i);
   const nb_features = data_manager.current_layers[layer_name].n_features;
   const nb_class = cats.length;
   const existing_typo_layer = Object.keys(data_manager.current_layers)
-    .filter(lyr => data_manager.current_layers[lyr].renderer === 'Categorical' || data_manager.current_layers[lyr].renderer === 'PropSymbolsTypo');
+    .filter((lyr) => lyr !== layer_name && (
+      data_manager.current_layers[lyr].renderer === 'Categorical'
+      || data_manager.current_layers[lyr].renderer === 'PropSymbolsTypo'
+    ));
   const modal_box = make_dialog_container(
     'categorical_box',
     _tr('app_page.categorical_box.title', { layer: layer_name, nb_features: nb_features }),
@@ -84,17 +88,17 @@ export function display_categorical_box(data_layer, layer_name, field, cats) {
       input_col.dispatchEvent(new MouseEvent('click'));
     });
 
-    newbox.selectAll('.typo_class')
-      .append('input')
-      .attr('class', 'color_hex')
-      .styles({ height: '22px', 'vertical-align': 'middle' })
-      .property('value', d => d.color)
-      .style('width', '60px')
-      .on('keyup', function () {
-        if (is_hex_color.test(this.value)) {
-          this.previousSibling.style.backgroundColor = this.value;
-        }
-      });
+  newbox.selectAll('.typo_class')
+    .append('input')
+    .attr('class', 'color_hex')
+    .styles({ height: '22px', 'vertical-align': 'middle' })
+    .property('value', d => d.color)
+    .style('width', '60px')
+    .on('keyup', function () {
+      if (is_hex_color.test(this.value)) {
+        this.previousSibling.style.backgroundColor = this.value;
+      }
+    });
 
   newbox.selectAll('.typo_class')
     .insert('span')

client/js/symbols_picto.js

@@ -73,23 +73,14 @@ export const display_box_symbol_typo = function (layer, field, categories) {
     .data(cats)
     .enter()
     .append('li')
-    .styles({
-      margin: '1px',
-      display: 'inline-flex',
-    })
     .attr('class', 'typo_class')
     .attr('id', (_, i) => ['line', i].join('_'));
 
-  newbox.selectAll('.typo_class')
-    .append('span')
-    .attr('class', 'three_dots')
-    .style('cursor', 'grab');
-
   newbox.selectAll('.typo_class')
     .append('input')
     .styles({
       width: '200px',
-      height: 'auto',
+      height: '30px',
       'vertical-align': 'middle',
     })
     .attrs(d => ({ class: 'typo_name', id: d.name }))
@@ -123,7 +114,7 @@ export const display_box_symbol_typo = function (layer, field, categories) {
   newbox.selectAll('.typo_class')
     .insert('input')
     .attrs({ type: 'number', id: 'symbol_size' })
-    .styles({ width: '50px', 'margin-left': '25px' })
+    .styles({ width: '50px', 'margin-left': '25px', height: '30px' })
     .property('value', 50);
 
   newbox.selectAll('.typo_class')