Merge pull request #2189 from tf/info-table-ext

Info table improvements

entry_types/scrolled/config/locales/new/info_table.de.yml

@@ -7,6 +7,21 @@ de:
           name: Info-Tabelle
           tabs:
             general: Info-Tabelle
+          attributes:
+            labelColumnAlign:
+              label: "Text-Ausrichtung (Erste Spalte) "
+              values:
+                auto: "(Automatisch)"
+                left: Linksbündig
+                center: Zentriert
+                right: Rechtsbündig
+            valueColumnAlign:
+              label: "Text-Ausrichtung (Zweite Spalte)"
+              values:
+                auto: "(Automatisch)"
+                left: Linksbündig
+                center: Zentriert
+                right: Rechtsbündig
           help_texts:
             shortcuts: |-
               <dl class="shortcuts">

entry_types/scrolled/config/locales/new/info_table.en.yml

@@ -7,6 +7,21 @@ en:
           name: Info Table
           tabs:
             general: Info Table
+          attributes:
+            labelColumnAlign:
+              label: "Text align (First column)"
+              values:
+                auto: "(Auto)"
+                left: Left
+                center: Center
+                right: Right
+            valueColumnAlign:
+              label: "Text align (Second column)"
+              values:
+                auto: "(Auto)"
+                left: Left
+                center: Center
+                right: Right
           help_texts:
             shortcuts: |-
               <dl class="shortcuts">

entry_types/scrolled/package/spec/frontend/EditableTable-spec.js

@@ -146,4 +146,49 @@ describe('EditableTable', () => {
     expect(container.querySelector('sup')).toHaveTextContent('3')
     expect(container.querySelector('sub')).toHaveTextContent('2')
   });
+
+  it('renders blank class on blank cells', () => {
+    const value = [
+      {
+        type: 'row',
+        children: [
+          {
+            type: 'label',
+            children: [
+              {text: ''}
+            ]
+          },
+          {
+            type: 'value',
+            children: [
+              {text: 'Value'}
+            ]
+          }
+        ]
+      },
+      {
+        type: 'row',
+        children: [
+          {
+            type: 'label',
+            children: [
+              {text: 'Label'}
+            ]
+          },
+          {
+            type: 'value',
+            children: [
+              {text: ''}
+            ]
+          }
+        ]
+      }
+    ];
+
+    render(<EditableTable value={value} />);
+
+    expect(
+      screen.queryAllByRole('cell').map(cell => cell.getAttribute('data-blank'))
+    ).toEqual(['', null, null, '']);
+  });
 });

entry_types/scrolled/package/spec/frontend/inlineEditing/EditableTable/withFixedColumns-spec.js

@@ -1862,6 +1862,61 @@ describe('handleTableNavigation', () => {
     });
   });
 
+  it('allows moving the cursor up inside multi line cell', () => {
+    const editor = withFixedColumns(
+      <editor>
+        <row>
+          <label>Row 1, Col 1</label>
+          <value>Row 1, Col 2</value>
+        </row>
+        <row>
+          <label>Row 2, Col 1</label>
+          <value>
+            A{'\n'}
+            B<cursor />
+          </value>
+        </row>
+      </editor>
+    );
+
+    const event = new KeyboardEvent('keydown', {key: 'ArrowUp'});
+    handleTableNavigation(editor, event);
+
+    expect(editor.selection).toEqual({
+      anchor: {path: [1, 1, 0], offset: 3},
+      focus: {path: [1, 1, 0], offset: 3}
+    });
+  });
+
+  it('moves the cursor up to the last line of a multi line cell', () => {
+    const editor = withFixedColumns(
+      <editor>
+        <row>
+          <label>Row 1, Col 1</label>
+          <value>
+            A{'\n'}
+            B{'\n'}
+            C
+          </value>
+        </row>
+        <row>
+          <label>Row 2, Col 1</label>
+          <value>
+            Row 2, Col 2<cursor />
+          </value>
+        </row>
+      </editor>
+    );
+
+    const event = new KeyboardEvent('keydown', {key: 'ArrowUp'});
+    handleTableNavigation(editor, event);
+
+    expect(editor.selection).toEqual({
+      anchor: {path: [0, 1, 0], offset: 4},
+      focus: {path: [0, 1, 0], offset: 4}
+    });
+  });
+
   it('moves the cursor to the cell below when pressing ArrowDown', () => {
     const editor = withFixedColumns(
       <editor>
@@ -1886,4 +1941,30 @@ describe('handleTableNavigation', () => {
       focus: {path: [1, 1, 0], offset: 0}
     });
   });
+
+  it('allows moving the cursor down inside multi line cell', () => {
+    const editor = withFixedColumns(
+      <editor>
+        <row>
+          <label>Row 1, Col 1</label>
+          <value>
+            A<cursor />{'\n'}
+            B
+          </value>
+        </row>
+        <row>
+          <label>Row 2, Col 1</label>
+          <value>Row 2, Col 2</value>
+        </row>
+      </editor>
+    );
+
+    const event = new KeyboardEvent('keydown', {key: 'ArrowDown'});
+    handleTableNavigation(editor, event);
+
+    expect(editor.selection).toEqual({
+      anchor: {path: [0, 1, 0], offset: 1},
+      focus: {path: [0, 1, 0], offset: 1}
+    });
+  });
 });

entry_types/scrolled/package/src/contentElements/infoTable/InfoTable.js

@@ -18,6 +18,8 @@ export function InfoTable({configuration, sectionProps}) {
 
   return (
     <EditableTable className={classNames(styles.table,
+                                         styles[`labelColumnAlign-${configuration.labelColumnAlign}`],
+                                         styles[`valueColumnAlign-${configuration.valueColumnAlign}`],
                                          {[styles.selected]: isSelected,
                                           [styles.center]: sectionProps.layout === 'centerRagged'})}
                    labelScaleCategory="infoTableLabel"

entry_types/scrolled/package/src/contentElements/infoTable/InfoTable.module.css

@@ -29,10 +29,40 @@
   text-align: right;
 }
 
+.labelColumnAlign-left td:first-child,
+.valueColumnAlign-left td:last-child {
+  text-align: left;
+}
+
+.labelColumnAlign-center td:first-child,
+.valueColumnAlign-center td:last-child {
+  text-align: center;
+}
+
+.labelColumnAlign-right td:first-child,
+.valueColumnAlign-right td:last-child {
+  text-align: right;
+}
+
 .table tr:nth-child(n + 2) td {
   border-top: solid 1px var(--table-border-color);
 }
 
 .selected {
   --table-border-color: color-mix(in srgb, transparent, currentColor);
 }
+
+/*
+  Hide first column if:
+  - the table is not selected and
+  - the first column is blank (= the table does not have a first
+    column cell that is not blank) and
+  - the table is not completely blank (= has a non blank cell)
+*/
+.table:not(.selected):not(:has(td:not([data-blank]):first-child)):has(td:not([data-blank])) td:first-child {
+  display: none;
+}
+
+.table:not(.selected):not(:has(td:not([data-blank]):first-child)):has(td:not([data-blank])) td:last-child {
+  padding-left: 0;
+}

entry_types/scrolled/package/src/contentElements/infoTable/editor.js

@@ -1,7 +1,7 @@
 import I18n from 'i18n-js';
 import {editor} from 'pageflow-scrolled/editor';
 import {InfoBoxView} from 'pageflow/editor';
-import {SeparatorView} from 'pageflow/ui'
+import {SeparatorView, SelectInputView} from 'pageflow/ui'
 
 import pictogram from './pictogram.svg';
 
@@ -12,6 +12,15 @@ editor.contentElementTypes.register('infoTable', {
 
   configurationEditor({entry, contentElement}) {
     this.tab('general', function() {
+      this.input('labelColumnAlign', SelectInputView, {
+        values: ['auto', 'left', 'center', 'right']
+      });
+      this.input('valueColumnAlign', SelectInputView, {
+        values: ['auto', 'left', 'center', 'right']
+      });
+
+      this.view(SeparatorView);
+
       this.group('ContentElementPosition');
 
       this.view(SeparatorView);

entry_types/scrolled/package/src/contentElements/infoTable/stories.js

@@ -49,5 +49,55 @@ storiesOfContentElement(module, {
         ]
       }
     ]
-  }
+  },
+  variants: [
+    {
+      name: 'With empty first columns',
+      configuration: {
+        value: [
+          {
+            type: 'row',
+            children: [
+              {
+                type: 'label',
+                children: [
+                  {text: ''}
+                ]
+              },
+              {
+                type: 'value',
+                children: [
+                  {text: 'First column hidden'},
+                ]
+              }
+            ]
+          },
+          {
+            type: 'row',
+            children: [
+              {
+                type: 'label',
+                children: [
+                  {text: ''}
+                ]
+              },
+              {
+                type: 'value',
+                children: [
+                  {text: 'No padding left in second column'}
+                ]
+              }
+            ]
+          }
+        ]
+      }
+    },
+    {
+      name: 'With custom column alignment',
+      configuration: {
+        labelColumnAlign: 'right',
+        valueColumnAlign: 'center'
+      }
+    }
+  ]
 });

entry_types/scrolled/package/src/frontend/EditableTable.js

@@ -3,6 +3,7 @@ import classNames from 'classnames';
 
 import {withInlineEditingAlternative} from './inlineEditing';
 import {Text} from './Text';
+import {utils} from './utils';
 
 import {
   renderLink,
@@ -79,15 +80,15 @@ export function createRenderElement({labelScaleCategory, valueScaleCategory}) {
       return renderLink({attributes, children, element});
     case 'label':
       return (
-        <td {...attributes}>
+        <td {...attributes} {...cellAttributes(element)}>
           <Text scaleCategory={labelScaleCategory}>
             {children}
           </Text>
         </td>
       );
     default:
       return (
-        <td {...attributes}>
+        <td {...attributes} {...cellAttributes(element)}>
           <Text scaleCategory={valueScaleCategory}>
             {children}
           </Text>
@@ -96,3 +97,7 @@ export function createRenderElement({labelScaleCategory, valueScaleCategory}) {
     }
   }
 }
+
+function cellAttributes(element) {
+  return utils.isBlankEditableTextValue([element]) ? {'data-blank': ''} : {};
+}

entry_types/scrolled/package/src/frontend/inlineEditing/EditableTable/withFixedColumns/handleTableNavigation.js

@@ -12,16 +12,19 @@ export function handleTableNavigation(editor, event) {
       const [, cellPath] = cellMatch;
       const rowPath = cellPath.slice(0, -1);
 
-      if (event.key === 'ArrowUp') {
+      if (event.key === 'ArrowUp' && Cell.inFirstLine(editor, selection.anchor)) {
         event.preventDefault();
 
         if (rowPath[rowPath.length - 1] > 0) {
           const previousRowPath = Path.previous(rowPath);
           const targetPath = [...previousRowPath, cellPath[cellPath.length - 1]];
 
-          Transforms.select(editor, Editor.start(editor, targetPath));
+          Transforms.select(
+            editor,
+            Cell.getPointAtStartOfLastLine(editor, Editor.start(editor, targetPath).path)
+          );
         }
-      } else if (event.key === 'ArrowDown') {
+      } else if (event.key === 'ArrowDown' && Cell.inLastLine(editor, selection.anchor)) {
         event.preventDefault();
 
         const nextRowPath = Path.next(rowPath);