Merge pull request #2246 from tf/section-paddings

Section paddings

Author: tf

config/locales/new/edit_configuration_back_button.de.yml

@@ -0,0 +1,7 @@
+de:
+  pageflow:
+    editor:
+      views:
+        edit_configuration:
+          back: "Zurück"
+          outline: "Gliederung"

config/locales/new/edit_configuration_back_button.en.yml

@@ -0,0 +1,7 @@
+en:
+  pageflow:
+    editor:
+      views:
+        edit_configuration:
+          back: "Back"
+          outline: "Outline"

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

@@ -52,6 +52,7 @@ def configure(config)
         c.features.register('decoration_effects')
         c.features.register('content_element_margins')
         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;
+}