Remove page gap, default left right padding to 0 for child elements and fix elpisis

web-frontend/modules/builder/elementTypes.js

@@ -101,13 +101,27 @@ export class ElementType extends Registerable {
   }
 
   /**
-   * This hook allows you to change the values given by the form of the element before
-   * they are sent to the backend to update the element.
-   *
-   * @param {object} values - The values of the element
-   * @returns {*}
+   * Allow to hook into default values for this element type at element creation.
+   * @param {object} values the current values for the element to create.
+   * @returns an object containing values updated with the default values.
    */
-  prepareValuesForRequest(values) {
+  getDefaultValues(page, values) {
+    // By default if an element is inside a container we apply the
+    // `.getDefaultChildValues()` method of the parent to it.
+    if (values?.parent_element_id) {
+      const parentElement = this.app.store.getters['element/getElementById'](
+        page,
+        values.parent_element_id
+      )
+      const parentElementType = this.app.$registry.get(
+        'element',
+        parentElement.type
+      )
+      return {
+        ...values,
+        ...parentElementType.getDefaultChildValues(page, values),
+      }
+    }
     return values
   }
 
@@ -188,6 +202,17 @@ export class ContainerElementType extends ElementType {
   get defaultPlaceInContainer() {
     throw new Error('Not implemented')
   }
+
+  /**
+   * Returns the default value when creating a child element to this container.
+   * @param {Object} page The current page object
+   * @param {Object} values The values of the to be created element
+   * @returns the default values for this element.
+   */
+  getDefaultChildValues(page, values) {
+    // By default an element inside a container should have no left and right padding
+    return { style_padding_left: 0, style_padding_right: 0 }
+  }
 }
 
 export class ColumnElementType extends ContainerElementType {

web-frontend/modules/builder/store/element.js

@@ -135,7 +135,7 @@ const actions = {
       page.id,
       elementTypeName,
       beforeId,
-      elementType.prepareValuesForRequest(configuration)
+      elementType.getDefaultValues(page, configuration)
     )
 
     if (forceCreate) {
@@ -146,7 +146,6 @@ const actions = {
     return element
   },
   async update({ dispatch }, { page, element, values }) {
-    const elementType = this.$registry.get('element', element.type)
     const oldValues = {}
     const newValues = {}
     Object.keys(values).forEach((name) => {
@@ -159,10 +158,7 @@ const actions = {
     await dispatch('forceUpdate', { page, element, values: newValues })
 
     try {
-      await ElementService(this.$client).update(
-        element.id,
-        elementType.prepareValuesForRequest(values)
-      )
+      await ElementService(this.$client).update(element.id, values)
     } catch (error) {
       await dispatch('forceUpdate', { page, element, values: oldValues })
       throw error
@@ -171,7 +167,6 @@ const actions = {
 
   async debouncedUpdateSelected({ dispatch, getters }, { page, values }) {
     const element = getters.getSelected
-    const elementType = this.$registry.get('element', element.type)
 
     const oldValues = {}
     Object.keys(values).forEach((name) => {
@@ -194,10 +189,7 @@ const actions = {
         const toUpdate = updateContext.valuesToUpdate
         updateContext.valuesToUpdate = {}
         try {
-          await ElementService(this.$client).update(
-            element.id,
-            elementType.prepareValuesForRequest(toUpdate)
-          )
+          await ElementService(this.$client).update(element.id, toUpdate)
           updateContext.lastUpdatedValues = null
           resolve()
         } catch (error) {

web-frontend/modules/core/assets/scss/components/builder/page_preview.scss

@@ -37,19 +37,8 @@
   min-height: 100%;
   background-color: $white;
   overflow: auto;
-  padding-top: 14px;
   position: relative;
 
-  &::after {
-    content: '';
-    display: block;
-    background-color: $color-neutral-100;
-    position: absolute;
-    top: 0;
-    width: 100%;
-    height: 14px;
-  }
-
   // We need to do this because the border of the preview is round and we need to round
   // the border of the selection box so that border has to have the same shape.
   > div:first-child {

web-frontend/modules/core/assets/scss/components/dropdown.scss

@@ -98,6 +98,8 @@
 }
 
 .dropdown__selected-placeholder {
+  @extend %ellipsis;
+
   color: $palette-neutral-700;
 }