Uploaded image for project: 'Magnolia pages module'
  1. Magnolia pages module
  2. PAGES-59

Allow to add components also at the top of an area




      We currently offer two ways to add a new component:

      • You click on the "new component" placeholder.
      • With an area selected, you click on the "add component" action.

      In both cases, we open a dialog to pick one of the components available in the affected/selected area. The component is then added at the location of the placeholder, which is typically at the end of the list. There's, however, no way to add a component in other locations of the list, in particular at the beginning of the list.

      We'll thus allow a user to pick one of several, preconfigured locations in the dialog that also asks him or her to pick the type of component to add. We should support both "at the beginning" and "at the end" for all areas, with "at the end" being the default. If feasible, allow for the amount and the actual location where new components get added to be configured.

      While placeholder can in theory be configured and moved elsewhere (I think there could be several ones), I would not want us to add two placeholders per area to not increase the UI complexity in the page editor ever more. For the same reason, I would not want us to introduce a second "+" (add) icon on the bars itself.

      UPDATE: Copied from the comments

      Here's the clarification, after double-checking with Andreas:

      • We call for radio options in the pages:newComponent dialog. This is a relatively cheap solution to let e.g. news editors to add latest articles on top easily.
        • We acknowledge that we skipped the component dialog (in PAGES-58) when there is only one type of component available; we're ok with this.
        • We don't show this field for single component areas.
      • We don't do the secondary split of the "add component" action in the end, not to bloat the action bar.
      • We consider configuring position of the placeholder(s) on the area definition

      • Added a wireframe showing the radio button group for picking where to add the component (at the beginning or at the end).
      • As a side note, you'll notice I've also renamed the dialog title and the label of the first input field to be more in-line with what we have elsewhere. If that's easy to change in one go, please do so, else feel free to create a follow-up issue for these label changes.

        Balsamiq Wireframes


          Acceptance criteria


            1. 1-1 Add component.action.png
              1-1 Add component.action.png
              110 kB
            2. 1-2 Add component.placeholder.png
              1-2 Add component.placeholder.png
              93 kB
            3. 2 Add dialog.png
              2 Add dialog.png
              238 kB
            4. Choose where to add.bmml
              2 kB
            5. Choose where to add.png
              Choose where to add.png
              12 kB

              Issue Links



                  ngoc.nguyenthanh Ngoc Nguyenthanh
                  weder Andreas Weder
                  1 Vote for this issue
                  4 Start watching this issue


                    Date of First Response:



                        Time Tracking

                        Original Estimate - 4d Original Estimate - 4d
                        Remaining Estimate - 0d
                        Time Spent - 9d 2h 20m
                        9d 2h 20m