Add editDefaultsView entry type concept

app/assets/stylesheets/pageflow/editor/inputs.scss

@@ -1,3 +1,4 @@
+@import "./inputs/edit_defaults_button";
 @import "./inputs/file_input";
 @import "./inputs/file_processing_state_display";
 @import "./inputs/reference";

app/assets/stylesheets/pageflow/editor/inputs/edit_defaults_button.scss

@@ -0,0 +1,15 @@
+.edit_defaults_button {
+  button {
+    @include simple-button;
+
+    width: 100%;
+    text-align: left;
+    padding-block: space(3);
+    padding-left: space(3);
+    margin-bottom: space(2);
+    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M8 6l4 4 -4 4'/%3e%3c/svg%3e");
+    background-position: right space(1) center;
+    background-repeat: no-repeat;
+    background-size: 1.5rem 1.5rem;
+  }
+}

config/locales/de.yml

@@ -1562,6 +1562,8 @@ de:
             unset: Verknüpfung entfernen
           theme_input_view:
             choose: Theme ändern
+          edit_defaults_input_view:
+            label: Voreinstellungen für neue Elemente
           oembed_url_input_view:
             status:
               resolving: "Auflösen..."

config/locales/en.yml

@@ -1555,6 +1555,8 @@ en:
             unset: Reset
           theme_input_view:
             choose: Change theme
+          edit_defaults_input_view:
+            label: Defaults for new elements
           oembed_url_input_view:
             status:
               resolving: "Resolving..."

entry_types/scrolled/config/locales/de.yml

@@ -1417,6 +1417,27 @@ de:
               around: Um den Inhalt
               above: Über dem Inhalt
               below: Unter dem Inhalt
+      edit_defaults:
+        back: Erscheinungsbild
+        sections_info: Änderungen an diesen Einstellungen haben keine Auswirkungen auf existierende Abschnitte.
+        tabs:
+          sections: Neue Abschnitte
+        attributes:
+          defaultSectionLayout:
+            label: Vordergrund-Positionierung
+            values:
+              center: Mitte
+              centerRagged: Zentriert
+              left: Links
+              right: Rechts
+          topPaddingVisualization:
+            label: Abstand oben
+          defaultSectionPaddingTop:
+            label: Abstand oben
+          bottomPaddingVisualization:
+            label: Abstand unten
+          defaultSectionPaddingBottom:
+            label: Abstand unten
       typography_sizes:
         xl: Sehr groß
         lg: Groß

entry_types/scrolled/config/locales/en.yml

@@ -1400,6 +1400,27 @@ en:
               around: Around content
               above: Above content
               below: Below content
+      edit_defaults:
+        back: Appearance
+        sections_info: Changes to these settings have no effect on existing sections.
+        tabs:
+          sections: New sections
+        attributes:
+          defaultSectionLayout:
+            label: Content alignment
+            values:
+              center: Centered
+              centerRagged: Centered (Ragged)
+              left: Left
+              right: Right
+          topPaddingVisualization:
+            label: Top padding
+          defaultSectionPaddingTop:
+            label: Top padding
+          bottomPaddingVisualization:
+            label: Bottom padding
+          defaultSectionPaddingBottom:
+            label: Bottom padding
       typography_sizes:
         xl: Very large
         lg: Large

entry_types/scrolled/package/spec/editor/models/Chapter-spec.js

@@ -32,6 +32,33 @@ describe('Chapter', () => {
       expect(section.configuration.get('transition')).toEqual('beforeAfter');
     });
 
+    it('uses default paddingTop from entry metadata configuration', () => {
+      const {entry} = testContext;
+
+      entry.metadata.configuration.set('defaultSectionPaddingTop', 'lg');
+      const section = entry.chapters.first().addSection();
+
+      expect(section.configuration.get('paddingTop')).toEqual('lg');
+    });
+
+    it('uses default paddingBottom from entry metadata configuration', () => {
+      const {entry} = testContext;
+
+      entry.metadata.configuration.set('defaultSectionPaddingBottom', 'sm');
+      const section = entry.chapters.first().addSection();
+
+      expect(section.configuration.get('paddingBottom')).toEqual('sm');
+    });
+
+    it('uses default layout from entry metadata configuration', () => {
+      const {entry} = testContext;
+
+      entry.metadata.configuration.set('defaultSectionLayout', 'right');
+      const section = entry.chapters.first().addSection();
+
+      expect(section.configuration.get('layout')).toEqual('right');
+    });
+
     it('handles sparse positions correctly', () => {
       const {entry} = testContext;
 
@@ -225,6 +252,16 @@ describe('Chapter', () => {
       expect(requests.length).toEqual(2);
       expect(requests[1].url).toBe('/editor/entries/1/scrolled/sections/102');
     });
+
+    it('does not apply default configuration', () => {
+      const {entry} = testContext;
+      entry.metadata.configuration.set('defaultSectionLayout', 'right');
+
+      const chapter = entry.chapters.first();
+      const section = chapter.duplicateSection(chapter.sections.first());
+
+      expect(section.configuration.get('layout')).toBeUndefined();
+    });
   });
 
   describe('#isExcursion', () => {

entry_types/scrolled/package/spec/editor/views/EditDefaultsView-spec.js

@@ -0,0 +1,97 @@
+import '@testing-library/jest-dom/extend-expect';
+
+import {EditDefaultsView} from 'editor/views/EditDefaultsView';
+import {features} from 'pageflow/frontend';
+
+import {ConfigurationEditor, useFakeTranslations, renderBackboneView} from 'pageflow/testHelpers';
+import {useEditorGlobals} from 'support';
+
+describe('EditDefaultsView', () => {
+  const {createEntry} = useEditorGlobals();
+
+  useFakeTranslations({
+    'pageflow_scrolled.editor.edit_defaults.tabs.sections': 'Sections',
+    'pageflow_scrolled.editor.edit_defaults.attributes.defaultSectionLayout.label': 'Default layout',
+    'pageflow_scrolled.editor.edit_defaults.attributes.defaultSectionLayout.values.left': 'Left',
+    'pageflow_scrolled.editor.edit_defaults.attributes.defaultSectionLayout.values.right': 'Right',
+    'pageflow_scrolled.editor.edit_defaults.attributes.defaultSectionLayout.values.center': 'Center',
+    'pageflow_scrolled.editor.edit_defaults.attributes.defaultSectionLayout.values.centerRagged': 'Center ragged',
+    'pageflow_scrolled.editor.edit_defaults.attributes.defaultSectionPaddingTop.label': 'Default top padding',
+    'pageflow_scrolled.editor.edit_defaults.attributes.defaultSectionPaddingBottom.label': 'Default bottom padding',
+    'pageflow_scrolled.editor.section_padding_visualization.top_padding': 'TopPadding',
+    'pageflow_scrolled.editor.section_padding_visualization.bottom_padding': 'Bottom'
+  });
+
+  it('renders with sections tab', () => {
+    const entry = createEntry({});
+
+    const view = new EditDefaultsView({
+      model: entry.metadata,
+      entry
+    });
+
+    const {getByRole} = renderBackboneView(view);
+
+    expect(getByRole('tab', {name: 'Sections'})).toBeInTheDocument();
+  });
+
+  it('contains defaultSectionLayout select input', () => {
+    const entry = createEntry({});
+
+    const view = new EditDefaultsView({
+      model: entry.metadata,
+      entry
+    });
+
+    view.render();
+    const configurationEditor = ConfigurationEditor.find(view);
+
+    expect(configurationEditor.inputPropertyNames()).toContain('defaultSectionLayout');
+  });
+
+  describe('with section_paddings feature flag', () => {
+    beforeEach(() => features.enable('frontend', ['section_paddings']));
+
+    it('contains defaultSectionPaddingTop slider input', () => {
+      const entry = createEntry({});
+
+      const view = new EditDefaultsView({
+        model: entry.metadata,
+        entry
+      });
+
+      view.render();
+      const configurationEditor = ConfigurationEditor.find(view);
+
+      expect(configurationEditor.inputPropertyNames()).toContain('defaultSectionPaddingTop');
+    });
+
+    it('contains defaultSectionPaddingBottom slider input', () => {
+      const entry = createEntry({});
+
+      const view = new EditDefaultsView({
+        model: entry.metadata,
+        entry
+      });
+
+      view.render();
+      const configurationEditor = ConfigurationEditor.find(view);
+
+      expect(configurationEditor.inputPropertyNames()).toContain('defaultSectionPaddingBottom');
+    });
+
+    it('shows padding visualizations', () => {
+      const entry = createEntry({});
+
+      const view = new EditDefaultsView({
+        model: entry.metadata,
+        entry
+      });
+
+      const {getByRole} = renderBackboneView(view);
+
+      expect(getByRole('img', {name: 'TopPadding'})).toBeInTheDocument();
+      expect(getByRole('img', {name: 'Bottom'})).toBeInTheDocument();
+    });
+  });
+});

entry_types/scrolled/package/src/editor/config.js

@@ -3,6 +3,7 @@ import {editor} from './api';
 import {ScrolledEntry} from './models/ScrolledEntry';
 import {ContentElementFileSelectionHandler} from './models/ContentElementFileSelectionHandler';
 
+import {EditDefaultsView} from './views/EditDefaultsView';
 import {EntryOutlineView} from './views/EntryOutlineView';
 import {EntryPreviewView} from './views/EntryPreviewView';
 
@@ -32,6 +33,7 @@ editor.registerEntryType('scrolled', {
     });
   },
   outlineView: EntryOutlineView,
+  editDefaultsView: EditDefaultsView,
 
   appearanceInputs(tabView) {
     tabView.input('darkWidgets', CheckBoxInputView);

entry_types/scrolled/package/src/editor/models/Chapter.js

@@ -48,15 +48,20 @@ export const Chapter = Backbone.Model.extend({
     return !this.storyline.isMain();
   },
 
-  addSection(attributes, options) {
+  addSection(attributes, options = {}) {
+    const defaultConfiguration = options.skipDefaults ? {} : {
+      transition: this.entry.metadata.configuration.get('defaultTransition'),
+      layout: this.entry.metadata.configuration.get('defaultSectionLayout'),
+      paddingTop: this.entry.metadata.configuration.get('defaultSectionPaddingTop'),
+      paddingBottom: this.entry.metadata.configuration.get('defaultSectionPaddingBottom')
+    };
+
     const section = this.sections.create(
       new Section(
         {
           position: this.sections.length ? Math.max(...this.sections.pluck('position')) + 1 : 0,
           chapterId: this.id,
-          configuration: {
-            transition: this.entry.metadata.configuration.get('defaultTransition')
-          },
+          configuration: defaultConfiguration,
           ...attributes
         },
         {
@@ -95,6 +100,7 @@ export const Chapter = Backbone.Model.extend({
   duplicateSection(section) {
     const newSection = this.insertSection({after: section}, {
       url: `${section.url()}/duplicate`,
+      skipDefaults: true
     });
 
     return newSection;

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

@@ -0,0 +1,57 @@
+import I18n from 'i18n-js';
+import {EditConfigurationView, InfoBoxView} from 'pageflow/editor';
+import {SelectInputView, SliderInputView} from 'pageflow/ui';
+import {features} from 'pageflow/frontend';
+
+import {SectionPaddingVisualizationView} from './inputs/SectionPaddingVisualizationView';
+
+import paddingTopIcon from './images/paddingTop.svg';
+import paddingBottomIcon from './images/paddingBottom.svg';
+
+export const EditDefaultsView = EditConfigurationView.extend({
+  translationKeyPrefix: 'pageflow_scrolled.editor.edit_defaults',
+  hideDestroyButton: true,
+  goBackPath: '/meta_data/widgets',
+
+  configure: function(configurationEditor) {
+    const entry = this.options.entry;
+
+    configurationEditor.tab('sections', function() {
+      this.view(InfoBoxView, {
+        text: I18n.t('pageflow_scrolled.editor.edit_defaults.sections_info'),
+        level: 'info'
+      });
+
+      this.input('defaultSectionLayout', SelectInputView, {
+        values: ['left', 'right', 'center', 'centerRagged']
+      });
+
+      if (features.isEnabled('section_paddings')) {
+        const paddingTopScale = entry.getScale('sectionPaddingTop');
+        const paddingBottomScale = entry.getScale('sectionPaddingBottom');
+
+        this.input('topPaddingVisualization', SectionPaddingVisualizationView, {
+          variant: 'topPadding'
+        });
+        this.input('defaultSectionPaddingTop', SliderInputView, {
+          hideLabel: true,
+          icon: paddingTopIcon,
+          values: paddingTopScale.values,
+          texts: paddingTopScale.texts,
+          defaultValue: paddingTopScale.defaultValue
+        });
+
+        this.input('bottomPaddingVisualization', SectionPaddingVisualizationView, {
+          variant: 'bottomPadding'
+        });
+        this.input('defaultSectionPaddingBottom', SliderInputView, {
+          hideLabel: true,
+          icon: paddingBottomIcon,
+          values: paddingBottomScale.values,
+          texts: paddingBottomScale.texts,
+          defaultValue: paddingBottomScale.defaultValue
+        });
+      }
+    });
+  }
+});