Merge pull request #2341 from tf/paddings

Improve edit section paddings view

Author: tf

app/assets/stylesheets/pageflow/ui/properties.scss

@@ -28,6 +28,8 @@
   --ui-selection-color-lighter: hsla(197, 69%, 76%, 0.3);
   --ui-selection-color-lightest: hsla(197, 69%, 76%, 0.1);
 
+  --ui-warning-color: #ff7400;
+
   --ui-error-color: #ff4d6d;
   --ui-error-color-light: hsla(349, 100%, 65%, 0.6);
   --ui-error-color-lighter: hsla(349, 100%, 65%, 0.3);

entry_types/scrolled/config/locales/de.yml

@@ -1150,6 +1150,7 @@ de:
         reset: Zurücksetzen
         save: Speichern
       edit_section:
+        motif_area_info_text: Markiere den wichtigsten Teil des Hintergrunds, der beim Erreichen des Abschnitts sichtbar und nicht von anderen Elementen überdeckt sein soll.
         attributes:
           appearance:
             inline_help: Diese Einstellung legt fest wie die scrollenden Vordergrund-Ebene vom Hintergrund abgehoben werden soll. Bei der Einstellung "Karte" wird der Vordergrund mit einer Fläche mit abgerundeten Ecken hinterlegt, bei "Schatten" mit einem hellen oder dunklen Farbverlauf.
@@ -1286,6 +1287,8 @@ de:
         side_by_side: "Darstellung des oberen Abstands, wenn der Inhalt neben dem Motivbereich Platz findet"
         top_padding: "Darstellung des oberen Abstands"
         bottom_padding: "Darstellung des unteren Abstands"
+      section_paddings_input:
+        motif: Motiv
       select_link_destination:
         cancel: Abbrechen
         create: Erstellen
@@ -1305,6 +1308,9 @@ de:
       edit_motif_area_input:
         select: Motivbereich auswählen
         edit: Motivbereich bearbeiten
+        warn: Noch kein Motivbereich ausgewählt
+        ignore_image: Für dieses Bild ignorieren
+        ignore_video: Für dieses Video ignorieren
       backdrop_content_element_input:
         add: Neues Element
         unset: Nicht mehr als Hintergrund verwenden
@@ -1373,8 +1379,6 @@ de:
         remove: "Stil entfernen"
       crop_types:
         circle: Kreis
-      section_paddings_input:
-        auto: (Automatisch)
       edit_section_paddings:
         tabs:
           sectionPaddings: Innenabstände
@@ -1387,7 +1391,7 @@ de:
           exposeMotifArea:
             label: Abstand oben
             values:
-              'true': Automatisch anpassen, um das Motiv im Hintergrund freizustellen
+              'true': Automatisch anpassen, um ein Motiv im Hintergrund freizustellen
               'false': Manuell festlegen
           sideBySideVisualization:
             label: Nebeneinander
@@ -1692,7 +1696,6 @@ de:
       add_caption: Beschriftung hinzufügen
       add_content_element: Neues Element hinzufügen
       cancel: Abbrechen
-      default_padding: Standard
       drag_content_element: Ziehen, um Element zu verschieben
       padding_suppressed_before_full_width: Abstand unterdrückt vor vollbreitem Element
       padding_suppressed_after_full_width: Abstand unterdrückt nach vollbreitem Element

entry_types/scrolled/config/locales/en.yml

@@ -1134,6 +1134,7 @@ en:
         reset: Reset
         save: Save
       edit_section:
+        motif_area_info_text: Mark the most important part of the backdrop that should be visible and unobstructed when reaching the section.
         attributes:
           appearance:
             inline_help: This setting controls how the scrolling foreground should get dimmed to increase contrast from the background. The option "Cards" adds a box with rounded corners to the foreground, with "Shadow" you can add a light or dark shadow to increase readability.
@@ -1270,6 +1271,8 @@ en:
         side_by_side: "Visualization of top padding when content fits next to the motif area"
         top_padding: "Visualization of top padding"
         bottom_padding: "Visualization of bottom padding"
+      section_paddings_input:
+        motif: Motif
       select_link_destination:
         cancel: Cancel
         create: Create
@@ -1289,6 +1292,9 @@ en:
       edit_motif_area_input:
         select: Select motif area
         edit: Edit motif area
+        warn: No motif area selected
+        ignore_image: Ignore for this image
+        ignore_video: Ignore for this video
       backdrop_content_element_input:
         add: New element
         unset: No longer use as backdrop
@@ -1357,8 +1363,6 @@ en:
         remove: "Remove style"
       crop_types:
         circle: Circle
-      section_paddings_input:
-        auto: (Auto)
       edit_section_paddings:
         tabs:
           sectionPaddings: Paddings
@@ -1522,7 +1526,6 @@ en:
       add_caption: Add caption
       add_content_element: Add new element
       cancel: Cancel
-      default_padding: Default
       drag_content_element: Drag to move element
       padding_suppressed_before_full_width: Padding suppressed before full width element
       padding_suppressed_after_full_width: Padding suppressed after full width element

entry_types/scrolled/package/spec/editor/models/ScrolledEntry/getScale-spec.js

@@ -4,7 +4,7 @@ import {normalizeSeed} from 'support';
 
 describe('ScrolledEntry', () => {
   describe('#getScale', () => {
-    it('returns empty arrays by default', () => {
+    it('returns scale with empty values by default', () => {
       const entry = factories.entry(
         ScrolledEntry,
         {},
@@ -13,14 +13,13 @@ describe('ScrolledEntry', () => {
         }
       );
 
-      const [values, texts, cssValues] = entry.getScale('contentElementMargin');
+      const scale = entry.getScale('contentElementMargin');
 
-      expect(values).toEqual([]);
-      expect(texts).toEqual([]);
-      expect(cssValues).toEqual([]);
+      expect(scale.values).toEqual([]);
+      expect(scale.texts).toEqual([]);
     });
 
-    it('returns values, texts, and cssValues based on theme custom properties', () => {
+    it('returns scale with values and texts based on theme custom properties', () => {
       const entry = factories.entry(
         ScrolledEntry,
         {},
@@ -48,12 +47,164 @@ describe('ScrolledEntry', () => {
         }
       );
 
-      const [values, texts, cssValues] = entry.getScale('contentElementMargin');
+      const scale = entry.getScale('contentElementMargin');
 
-      expect(values).toEqual(['sm', 'md', 'lg']);
-      expect(texts).toEqual(['Small', 'Medium', 'Large']);
-      expect(cssValues).toEqual(['0.5rem', '1rem', '1.5rem']);
+      expect(scale.values).toEqual(['sm', 'md', 'lg']);
+      expect(scale.texts).toEqual(['Small', 'Medium', 'Large']);
     });
 
+    describe('defaultValue', () => {
+      it('is undefined when no default is set', () => {
+        const entry = factories.entry(
+          ScrolledEntry,
+          {},
+          {
+            entryTypeSeed: normalizeSeed({
+              themeOptions: {
+                properties: {
+                  root: {
+                    'sectionPaddingTop-sm': '10vh',
+                    'sectionPaddingTop-md': '20vh',
+                    'sectionPaddingTop-lg': '30vh'
+                  }
+                }
+              }
+            })
+          }
+        );
+
+        const scale = entry.getScale('sectionPaddingTop');
+
+        expect(scale.defaultValue).toBeUndefined();
+      });
+
+      it('is undefined when scale has no mapped default property name', () => {
+        const entry = factories.entry(
+          ScrolledEntry,
+          {},
+          {
+            entryTypeSeed: normalizeSeed({
+              themeOptions: {
+                properties: {
+                  root: {
+                    'contentElementMargin-sm': '0.5rem',
+                    'contentElementMargin-md': '1rem'
+                  }
+                }
+              }
+            })
+          }
+        );
+
+        const scale = entry.getScale('contentElementMargin');
+
+        expect(scale.defaultValue).toBeUndefined();
+      });
+
+      it('returns default value from root scope', () => {
+        const entry = factories.entry(
+          ScrolledEntry,
+          {},
+          {
+            entryTypeSeed: normalizeSeed({
+              themeOptions: {
+                properties: {
+                  root: {
+                    'sectionPaddingTop-sm': '10vh',
+                    'sectionPaddingTop-md': '20vh',
+                    'sectionPaddingTop-lg': '30vh',
+                    'sectionDefaultPaddingTop': '20vh'
+                  }
+                }
+              }
+            })
+          }
+        );
+
+        const scale = entry.getScale('sectionPaddingTop');
+
+        expect(scale.defaultValue).toEqual('md');
+      });
+
+      it('returns default value from specific scope', () => {
+        const entry = factories.entry(
+          ScrolledEntry,
+          {},
+          {
+            entryTypeSeed: normalizeSeed({
+              themeOptions: {
+                properties: {
+                  root: {
+                    'sectionPaddingTop-sm': '10vh',
+                    'sectionPaddingTop-md': '20vh',
+                    'sectionPaddingTop-lg': '30vh',
+                    'sectionDefaultPaddingTop': '20vh'
+                  },
+                  'section-cards': {
+                    'sectionDefaultPaddingTop': '30vh'
+                  }
+                }
+              }
+            })
+          }
+        );
+
+        const scale = entry.getScale('sectionPaddingTop', {scope: 'section-cards'});
+
+        expect(scale.defaultValue).toEqual('lg');
+      });
+
+      it('falls back to root scope when specific scope does not have property', () => {
+        const entry = factories.entry(
+          ScrolledEntry,
+          {},
+          {
+            entryTypeSeed: normalizeSeed({
+              themeOptions: {
+                properties: {
+                  root: {
+                    'sectionPaddingTop-sm': '10vh',
+                    'sectionPaddingTop-md': '20vh',
+                    'sectionPaddingTop-lg': '30vh',
+                    'sectionDefaultPaddingTop': '20vh'
+                  },
+                  'section-cards': {
+                    'someOtherProperty': 'value'
+                  }
+                }
+              }
+            })
+          }
+        );
+
+        const scale = entry.getScale('sectionPaddingTop', {scope: 'section-cards'});
+
+        expect(scale.defaultValue).toEqual('md');
+      });
+
+      it('is undefined when default css value is not in scale', () => {
+        const entry = factories.entry(
+          ScrolledEntry,
+          {},
+          {
+            entryTypeSeed: normalizeSeed({
+              themeOptions: {
+                properties: {
+                  root: {
+                    'sectionPaddingTop-sm': '10vh',
+                    'sectionPaddingTop-md': '20vh',
+                    'sectionDefaultPaddingTop': '15vh'
+                  }
+                }
+              }
+            })
+          }
+        );
+
+        const scale = entry.getScale('sectionPaddingTop');
+
+        expect(scale.defaultValue).toBeUndefined();
+      });
+    });
   });
 });