Add configurable section paddings feature

Editors can now customize top and bottom padding for individual sections,
with separate portrait orientation settings. This provides better control
over section spacing and improves layout flexibility across different
screen orientations.

REDMINE-20979

Author: tf

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

@@ -0,0 +1,29 @@
+de:
+  pageflow:
+    section_paddings:
+      feature_name: "Abschnittsinnenabstände"
+  pageflow_scrolled:
+    editor:
+      section_paddings_input:
+        auto: (Automatisch)
+      edit_section:
+        attributes:
+          sectionPaddings:
+            label: Innenabstände oben/unten
+      edit_section_paddings:
+        tabs:
+          sectionPaddings: Innenabstände
+          portrait: Hochkant
+        attributes:
+          paddingTop:
+            blank: (Standard)
+            label: Oben
+          paddingBottom:
+            blank: (Standard)
+            label: Unten
+          portraitPaddingTop:
+            blank: (Standard)
+            label: Oben (Hochkant)
+          portraitPaddingBottom:
+            blank: (Standard)
+            label: Unten (Hochkant)

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

@@ -0,0 +1 @@
+en:

entry_types/scrolled/lib/pageflow_scrolled/plugin.rb

@@ -51,6 +51,7 @@ def configure(config)
         c.features.register('custom_palette_colors')
         c.features.register('decoration_effects')
         c.features.register('backdrop_size')
+        c.features.register('section_paddings')
 
         c.additional_frontend_seed_data.register(
           'frontendVersion',

entry_types/scrolled/package/spec/frontend/features/sectionPadding-spec.js

@@ -1,5 +1,10 @@
 import {renderEntry, useInlineEditingPageObjects} from 'support/pageObjects';
 
+import '@testing-library/jest-dom/extend-expect';
+
+import {usePortraitOrientation} from 'frontend/usePortraitOrientation';
+jest.mock('frontend/usePortraitOrientation');
+
 describe('section padding', () => {
   useInlineEditingPageObjects();
 
@@ -55,4 +60,73 @@ describe('section padding', () => {
 
     expect(getSectionByPermaId(6).hasBottomPadding()).toBe(true);
   });
+
+  it('supports setting custom foreground padding', () => {
+    const {getSectionByPermaId} = renderEntry({
+      seed: {
+        sections: [{
+          id: 5,
+          permaId: 6,
+          configuration: {
+            paddingTop: 'lg',
+            paddingBottom: 'md'
+          }
+        }],
+        contentElements: [{sectionId: 5}]
+      }
+    });
+
+    expect(getSectionByPermaId(6).el).toHaveStyle({
+      '--foreground-padding-top': 'var(--theme-section-padding-top-lg)',
+      '--foreground-padding-bottom': 'var(--theme-section-padding-bottom-md)',
+    });
+  });
+
+  it('supports portrait custom foreground padding', () => {
+    usePortraitOrientation.mockReturnValue(true);
+
+    const {getSectionByPermaId} = renderEntry({
+      seed: {
+        sections: [{
+          id: 5,
+          permaId: 6,
+          configuration: {
+            paddingTop: 'lg',
+            paddingBottom: 'md',
+            portraitPaddingTop: 'sm',
+            portraitPaddingBottom: 'xs'
+          }
+        }],
+        contentElements: [{sectionId: 5}]
+      }
+    });
+
+    expect(getSectionByPermaId(6).el).toHaveStyle({
+      '--foreground-padding-top': 'var(--theme-section-padding-top-sm)',
+      '--foreground-padding-bottom': 'var(--theme-section-padding-bottom-xs)',
+    });
+  });
+
+  it('falls back to default padding if portrait padding not configured', () => {
+    usePortraitOrientation.mockReturnValue(true);
+
+    const {getSectionByPermaId} = renderEntry({
+      seed: {
+        sections: [{
+          id: 5,
+          permaId: 6,
+          configuration: {
+            paddingTop: 'lg',
+            paddingBottom: 'md'
+          }
+        }],
+        contentElements: [{sectionId: 5}]
+      }
+    });
+
+    expect(getSectionByPermaId(6).el).toHaveStyle({
+      '--foreground-padding-top': 'var(--theme-section-padding-top-lg)',
+      '--foreground-padding-bottom': 'var(--theme-section-padding-bottom-md)',
+    });
+  });
 });

entry_types/scrolled/package/src/editor/controllers/SideBarController.js

@@ -5,6 +5,7 @@ import {editor} from 'pageflow-scrolled/editor';
 import {EditChapterView} from '../views/EditChapterView';
 import {EditSectionView} from '../views/EditSectionView';
 import {EditSectionTransitionView} from '../views/EditSectionTransitionView';
+import {EditSectionPaddingsView} from '../views/EditSectionPaddingsView';
 import {EditContentElementView} from '../views/EditContentElementView';
 
 export const SideBarController = Marionette.Controller.extend({
@@ -37,6 +38,14 @@ export const SideBarController = Marionette.Controller.extend({
     }));
   },
 
+  sectionPaddings: function(id, tab) {
+    this.region.show(new EditSectionPaddingsView({
+      entry: this.entry,
+      model: this.entry.sections.get(id),
+      editor
+    }));
+  },
+
   contentElement: function(id, tab) {
     this.region.show(new EditContentElementView({
       entry: this.entry,

entry_types/scrolled/package/src/editor/routers/SideBarRouter.js

@@ -4,6 +4,7 @@ export const SideBarRouter = Marionette.AppRouter.extend({
   appRoutes: {
     'scrolled/chapters/:id': 'chapter',
     'scrolled/sections/:id/transition': 'sectionTransition',
+    'scrolled/sections/:id/paddings': 'sectionPaddings',
     'scrolled/sections/:id': 'section',
     'scrolled/content_elements/:id': 'contentElement'
   }

entry_types/scrolled/package/src/editor/views/EditSectionPaddingsView.js

@@ -0,0 +1,49 @@
+import {EditConfigurationView} from 'pageflow/editor';
+import {SelectInputView} from 'pageflow/ui';
+
+import styles from './EditSectionPaddingsView.module.css';
+
+export const EditSectionPaddingsView = EditConfigurationView.extend({
+  translationKeyPrefix: 'pageflow_scrolled.editor.edit_section_paddings',
+  hideDestroyButton: true,
+
+  className: styles.view,
+
+  goBackPath() {
+    return `/scrolled/sections/` + this.model.get('id')
+  },
+
+  configure: function(configurationEditor) {
+    const entry = this.options.entry;
+
+    const [paddingTopValues, paddingTopTexts] = entry.getScale('sectionPaddingTop');
+    const [paddingBottomValues, paddingBottomTexts] = entry.getScale('sectionPaddingBottom');
+
+    configurationEditor.tab('sectionPaddings', function() {
+      this.input('paddingTop', SelectInputView, {
+        includeBlank: true,
+        values: paddingTopValues,
+        texts: paddingTopTexts
+      });
+
+      this.input('paddingBottom', SelectInputView, {
+        includeBlank: true,
+        values: paddingBottomValues,
+        texts: paddingBottomTexts
+      });
+    });
+    configurationEditor.tab('portrait', function() {
+      this.input('portraitPaddingTop', SelectInputView, {
+        includeBlank: true,
+        values: paddingTopValues,
+        texts: paddingTopTexts
+      });
+
+      this.input('portraitPaddingBottom', SelectInputView, {
+        includeBlank: true,
+        values: paddingBottomValues,
+        texts: paddingBottomTexts
+      });
+    });
+  }
+});

entry_types/scrolled/package/src/editor/views/EditSectionPaddingsView.module.css

@@ -0,0 +1,10 @@
+.view :global(.tabs_view-headers) li:nth-child(2) {
+  margin-left: 5px;
+}
+
+.view :global(.tabs_view-headers) li:nth-child(2)::before {
+  content: "›";
+  margin-left: -15px;
+  margin-right: 10px;
+  font-weight: normal;
+}

entry_types/scrolled/package/src/editor/views/EditSectionTransitionView.js

@@ -5,6 +5,7 @@ import {normalizeSectionConfigurationData} from '../../entryState';
 
 export const EditSectionTransitionView = EditConfigurationView.extend({
   translationKeyPrefix: 'pageflow_scrolled.editor.edit_section_transition',
+  hideDestroyButton: true,
 
   configure: function(configurationEditor) {
     const entry = this.options.entry;

entry_types/scrolled/package/src/editor/views/EditSectionView.js

@@ -7,6 +7,7 @@ import {
 } from 'pageflow/ui';
 import {BackdropContentElementInputView} from './inputs/BackdropContentElementInputView';
 import {EffectListInputView} from './inputs/EffectListInputView';
+import {SectionPaddingsInputView} from './inputs/SectionPaddingsInputView';
 import {InlineFileRightsMenuItem} from '../models/InlineFileRightsMenuItem'
 import I18n from 'i18n-js';
 import {features} from 'pageflow/frontend';
@@ -126,6 +127,13 @@ export const EditSectionView = EditConfigurationView.extend({
       this.input('layout', SelectInputView, {
         values: ['left', 'right', 'center', 'centerRagged']
       });
+
+      if (features.isEnabled('section_paddings')) {
+        this.input('sectionPaddings', SectionPaddingsInputView, {
+          entry
+        });
+      }
+
       if (entry.supportsSectionWidths()) {
         this.input('width', SelectInputView, {
           values: ['wide', 'narrow']