From ecb63e8c5fcc87c7c61686a6ab4f6ec01faf7a12 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fr=C3=A9d=C3=A9ric=20P=C3=A9ters?= <fpeters@entrouvert.com>
Date: Tue, 27 Jul 2021 14:31:31 +0200
Subject: [PATCH] wcs: add labels before layout/size values (#55860)

---
 .../templates/combo/wcs/manager/card-infos-cell-form.html  | 3 ++-
 combo/manager/static/css/combo.manager.css                 | 3 ---
 combo/manager/static/js/combo.manager.js                   | 7 +++----
 3 files changed, 5 insertions(+), 8 deletions(-)

diff --git a/combo/apps/wcs/templates/combo/wcs/manager/card-infos-cell-form.html b/combo/apps/wcs/templates/combo/wcs/manager/card-infos-cell-form.html
index df375967..9492d5fb 100644
--- a/combo/apps/wcs/templates/combo/wcs/manager/card-infos-cell-form.html
+++ b/combo/apps/wcs/templates/combo/wcs/manager/card-infos-cell-form.html
@@ -9,7 +9,8 @@
 {# UI to customize content layout #}
 <div class="wcs-cards-cell--grid">
   <div class="wcs-cards-cell--grid-options">
-    <span class="wcs-cards-cell--grid-layout-label">{% trans "Automatic" %}</span>
+    <span class="wcs-cards-cell--grid-layout-label">{% trans "Grid Layout:" %}</span>
+    <span class="wcs-cards-cell--grid-layout-mode">{% trans "Automatic" %}</span>
     <a role="button" class="wcs-cards-cell--grid-layout-btn">
       {% trans "Edit" %}
     </a>
diff --git a/combo/manager/static/css/combo.manager.css b/combo/manager/static/css/combo.manager.css
index 4e9250a3..e777bb77 100644
--- a/combo/manager/static/css/combo.manager.css
+++ b/combo/manager/static/css/combo.manager.css
@@ -656,17 +656,14 @@ form .choices {
 	font-weight: bold;
 }
 
-.wcs-cards-cell--grid-layout-label,
 .wcs-cards-cell--grid-cell-content .cell-size-label {
 	color: #666;
 }
 
-.wcs-cards-cell--grid-layout-label::before,
 .wcs-cards-cell--grid-cell-content .cell-size-label::before {
 	content: " [ ";
 }
 
-.wcs-cards-cell--grid-layout-label::after,
 .wcs-cards-cell--grid-cell-content .cell-size-label::after {
 	content: " ]";
 }
diff --git a/combo/manager/static/js/combo.manager.js b/combo/manager/static/js/combo.manager.js
index 15d2a5aa..c810b011 100644
--- a/combo/manager/static/js/combo.manager.js
+++ b/combo/manager/static/js/combo.manager.js
@@ -405,7 +405,6 @@ const Card_cell_custom = function(cell) {
   this.cell = cell;
   this.gridSchema_default = {
     "grid_class": "fx-grid--auto",
-    "grid_layout_label": gettext('Automatic'),
     "cells": []
   }
   this.init();
@@ -458,7 +457,7 @@ Card_cell_custom.prototype = {
     $(this.cell).trigger("custom_cell:change");
   },
   grid__set_layout: function() {
-    this.grid_layout_label.textContent = this.gridSchema.grid_layout_label;
+    this.grid_layout_label.textContent = $(this.grid_form).find('select[name="grid-layout"] option[value="' + this.gridSchema.grid_class + '"]').text();
     if (this.grid_wrapper.dataset.grid_layout) {
       this.grid_wrapper.classList.remove(this.grid_wrapper.dataset.grid_layout); }
     this.grid_wrapper.classList.add(this.gridSchema.grid_class);
@@ -539,7 +538,7 @@ Card_cell_custom.prototype = {
     let cell_display_mode_label = $(this.grid_cell_form).find('select[name="display_mode"] option[value="' + schema_cell.display_mode + '"]').text();
     cell_text += '<span class="cell-display-mode-label">' + cell_display_mode_label + '</span>';
     let cell_size_label = $(this.grid_cell_form).find('select[name="cell_size"] option[value="' + schema_cell.cell_size + '"]').text();
-    cell_text += '<span class="cell-size-label">' + cell_size_label + '</span>';
+    cell_text += '<span class="cell-size-label">' + gettext('Size:') + ' ' + cell_size_label + '</span>';
     cell_text += '</span>';
     grid_cell.contentEl.innerHTML = cell_text;
   },
@@ -665,7 +664,7 @@ Card_cell_custom.prototype = {
     this.is_on = false;
     this.grid = cell.querySelector('.wcs-cards-cell--grid');
     this.edit_grid_btn = cell.querySelector('.wcs-cards-cell--grid-layout-btn');
-    this.grid_layout_label = cell.querySelector('.wcs-cards-cell--grid-layout-label');
+    this.grid_layout_label = cell.querySelector('.wcs-cards-cell--grid-layout-mode');
 
     const grid_form_tpl_string = cell.querySelector('.wcs-cards-cell--grid-form-tpl').innerText;
     this.grid_form = this.parse_string_tpl(grid_form_tpl_string);
-- 
2.32.0

