Allow applying palette colors to info table columns

REDMINE-20878
codevise · Jan 21, 2025 · 1983f17 · 1983f17
1 parent 35aa434
commit 1983f17
Show file tree

Hide file tree

Showing 6 changed files with 55 additions and 12 deletions.
diff --git a/entry_types/scrolled/config/locales/new/info_table.de.yml b/entry_types/scrolled/config/locales/new/info_table.de.yml
@@ -9,7 +9,7 @@ de:
             general: Info-Tabelle
           attributes:
             labelColumnAlign:
-              label: "Text-Ausrichtung (Erste Spalte) "
+              label: "Text-Ausrichtung (Erste Spalte)"
               values:
                 auto: "(Automatisch)"
                 left: Linksbündig
@@ -22,6 +22,10 @@ de:
                 left: Linksbündig
                 center: Zentriert
                 right: Rechtsbündig
+            labelColor:
+              label: "Text-Farbe (Erste Spalte)"
+            valueColor:
+              label: "Text-Farbe (Zweite Spalte)"
           help_texts:
             shortcuts: |-
               <dl class="shortcuts">

diff --git a/entry_types/scrolled/config/locales/new/info_table.en.yml b/entry_types/scrolled/config/locales/new/info_table.en.yml
@@ -22,6 +22,10 @@ en:
                 left: Left
                 center: Center
                 right: Right
+            labelColor:
+              label: "Text color (First column)"
+            valueColor:
+              label: "Text align (Second column)"
           help_texts:
             shortcuts: |-
               <dl class="shortcuts">

diff --git a/entry_types/scrolled/package/src/contentElements/infoTable/InfoTable.js b/entry_types/scrolled/package/src/contentElements/infoTable/InfoTable.js
@@ -3,6 +3,7 @@ import classNames from 'classnames';
 
 import {
   EditableTable,
+  paletteColor,
   useContentElementConfigurationUpdate,
   useContentElementEditorState,
   useI18n
@@ -17,16 +18,19 @@ export function InfoTable({configuration, sectionProps}) {
   const {t} = useI18n({locale: 'ui'});
 
   return (
-    <EditableTable className={classNames(styles.table,
-                                         styles[`labelColumnAlign-${configuration.labelColumnAlign}`],
-                                         styles[`valueColumnAlign-${configuration.valueColumnAlign}`],
-                                         {[styles.selected]: isSelected,
-                                          [styles.center]: sectionProps.layout === 'centerRagged'})}
-                   labelScaleCategory="infoTableLabel"
-                   valueScaleCategory="infoTableValue"
-                   labelPlaceholder={t('pageflow_scrolled.inline_editing.type_text')}
-                   valuePlaceholder={t('pageflow_scrolled.inline_editing.type_text')}
-                   value={configuration.value}
-                   onChange={value => updateConfiguration({value})} />
+    <div style={{'--label-color': paletteColor(configuration.labelColor),
+                 '--value-color': paletteColor(configuration.valueColor)}}>
+      <EditableTable className={classNames(styles.table,
+                                           styles[`labelColumnAlign-${configuration.labelColumnAlign}`],
+                                           styles[`valueColumnAlign-${configuration.valueColumnAlign}`],
+                                           {[styles.selected]: isSelected,
+                                            [styles.center]: sectionProps.layout === 'centerRagged'})}
+                     labelScaleCategory="infoTableLabel"
+                     valueScaleCategory="infoTableValue"
+                     labelPlaceholder={t('pageflow_scrolled.inline_editing.type_text')}
+                     valuePlaceholder={t('pageflow_scrolled.inline_editing.type_text')}
+                     value={configuration.value}
+                     onChange={value => updateConfiguration({value})} />
+    </div>
   );
 }
diff --git a/entry_types/scrolled/package/src/contentElements/infoTable/InfoTable.module.css b/entry_types/scrolled/package/src/contentElements/infoTable/InfoTable.module.css
@@ -16,11 +16,19 @@
   white-space: pre;
 }
 
+.table td:first-child div {
+  color: var(--label-color);
+}
+
 .table td:last-child {
   width: 100%;
   padding: 0.5rem 0 0.5rem 0.5rem;
 }
 
+.table td:last-child div {
+  color: var(--value-color);
+}
+
 .center td {
   width: 50%;
 }

diff --git a/entry_types/scrolled/package/src/contentElements/infoTable/editor.js b/entry_types/scrolled/package/src/contentElements/infoTable/editor.js
@@ -18,6 +18,14 @@ editor.contentElementTypes.register('infoTable', {
       this.input('valueColumnAlign', SelectInputView, {
         values: ['auto', 'left', 'center', 'right']
       });
+      this.group('PaletteColor', {
+        propertyName: 'labelColor',
+        entry
+      });
+      this.group('PaletteColor', {
+        propertyName: 'valueColor',
+        entry
+      });
 
       this.view(SeparatorView);
 

diff --git a/entry_types/scrolled/package/src/contentElements/infoTable/stories.js b/entry_types/scrolled/package/src/contentElements/infoTable/stories.js
@@ -92,6 +92,21 @@ storiesOfContentElement(module, {
         ]
       }
     },
+    {
+      name: 'Pallete colors',
+      themeOptions: {
+        properties: {
+          root: {
+            paletteColorAccent: '#04f',
+            paletteColorPrimary: '#0f4'
+          }
+        }
+      },
+      configuration: {
+        labelColor: 'accent',
+        valueColor: 'primary'
+      }
+    },
     {
       name: 'With custom column alignment',
       configuration: {