Uploaded image for project: 'Magnolia Frontend Helpers'
  1. Magnolia Frontend Helpers
  2. MGNLFE-35

Control layout of greenbars and components within an area

    XMLWordPrintable

Details

    • Improvement
    • Resolution: Done
    • Major
    • 1.0.4
    • 1.0.0
    • None
    • None
    • Yes
    • HL & LD 3
    • 3

    Description

      As a developer I want to be able to control the layout of components in an area, and the green bars of the area and the components.

      Options (see comments):

      • additional component to act as area itself
      • adding an attribute to editable area to state which element is the component container / div

      Original proposal:

      Area component in front end editors for SPA should be wrapped in DIV with class prop.

      Area component e.g. in react-editor is not wrapped in any div.
      That results in green bars being added on the same level as components.

      This is ok when element wrapping area does not implement any display property e.g. flex. If property is added green bars and components are all affected/

      Solution would be to make area be a div and be able to use class prop.

      E.g https://git.magnolia-cms.com/projects/MODULES/repos/frontend-helpers/browse/packages/react-editor/src/component/EditableArea/EditableArea.js#51

      To sth like:

      <div className={this.props.className}>
      {componentNames.map((name) => this.renderComponentWithComment(name))}
      </div>

      Checklists

        Acceptance criteria

        Attachments

          Activity

            People

              canh.nguyen Canh Nguyen
              bstaryga Bartosz Staryga
              Votes:
              0 Vote for this issue
              Watchers:
              3 Start watching this issue

              Dates

                Created:
                Updated:
                Resolved:

                Checklists

                  Task DoD

                  Time Tracking

                    Estimated:
                    Original Estimate - Not Specified
                    Not Specified
                    Remaining:
                    Remaining Estimate - 0d
                    0d
                    Logged:
                    Time Spent - 1.5d
                    1.5d