I have run across a lot of users that have confusion when using the "Add Content" element in the Panels IPE. The crux of this issue is that the "action" button to add content is at the top of each region, but the content is added to the bottom of the region when they click save (see attached screenshot). This can create confusion for content editors, especially when there is a lot of content in a region and they dont see the content that they add.

There are two possible improvements:

1.) We can make the added content show up at the top of the region instead of the bottom.

2.) We can move the "Add Content" button to be at the bottom of the region.

I don't have a strong preference, but do think that the content should be added at the same place as the user clicks "add content".

Comments

merlinofchaos’s picture

I would personally prefer that the add content button be at the bottom, where it is in the original. It was, however, your initial design that placed it at the top, which sdboyer implemented. I never actually bothered discussing the placement of it, figuring we would refine that over time.

Unless there's any reason to object (would be good to talk to Neca) I propose we move add content to the bottom.

merlinofchaos’s picture

Oh, I would add that for technical reasons, adding content to the bottom is slightly easier than to the top, because everything is kept as a list.

populist’s picture

i think that from a UX stand point, having the button at the top makes sense (easier to find + understand). I can see from #2 that it is probably more work to add it to the top, but would such a thing be possible to do? I think it would really improve the UX of the IPE to have that kind of "see it at the top", "add it to the top" experience.

populist’s picture

Title: UX Issue with Adding Content in the IPE » Add Content to Top of Region in IPE?
Status: Needs work » Needs review
StatusFileSize
new841 bytes

I rolled a quick patch to add content to the top so folks can test it + comment on it.

merlinofchaos’s picture

Status: Needs review » Fixed

Somehow I expected that would be a lot harder.

In the future this probably needs to be switchable somewhere, because I also just committed a patch that makes the position of the control themable. So presumably something should also be able to switch where the pane gets added to match.

Status: Fixed » Closed (fixed)

Automatically closed -- issue fixed for 2 weeks with no activity.

theodorosploumis’s picture

Issue summary: View changes

Sorry for opening this again but I am trying to change this option for Panels version 7.x - 3.4 (2014-Feb-12).

I cannot find the related function (ajax_command_append) on /panels/panels_ipe/plugins/display_renderers/panels_renderer_ipe.class.php.

Thanks a lot for any help.

theodorosploumis’s picture

Finally, I found out that I had to change codes on /panels/panels_ipe/js/panels_ipe.js around line 395. Attaching my codes.
Comments with capital letters are for these changes.

Drupal.ajax.prototype.commands.insertNewPane = function(ajax, data, status) {
    IPEContainerSelector = '#panels-ipe-regionid-' + data.regionId + ' div.panels-ipe-sort-container';
    //firstPaneSelector = IPEContainerSelector + ' div.panels-ipe-portlet-wrapper:first';
    // LAST CHILD OF THE LIST
     lastPaneSelector = IPEContainerSelector + ' div.panels-ipe-portlet-wrapper:last';
    // Insert the new pane AFTER the LAST existing pane in the region, if
    // any.
    if ($(lastPaneSelector).length) {
      insertData = {
        'method': 'after',
        'selector': lastPaneSelector,
        'data': data.renderedPane,
        'settings': null
      }
      Drupal.ajax.prototype.commands.insert(ajax, insertData, status);
    }
    // Else, insert it as a first child of the container. Doing so might fall
    // outside of the wrapping markup for the style, but it's the best we can
    // do.
    else {
      insertData = {
        'method': 'prepend',
        'selector': IPEContainerSelector,
        'data': data.renderedPane,
        'settings': null
      }
      Drupal.ajax.prototype.commands.insert(ajax, insertData, status);
    }
    
    // ADD SOME BASIC SCROLL TO THE ADDED PANE
    $('html, body').animate({
        scrollTop: $(lastPaneSelector).offset().top
    }, 2000);
  };

  • Commit 6662e3b on 7.x-3.x, 7.x-3.x-i18n, 8.x-3.x authored by populist, committed by merlinofchaos:
    Issue #1690128 by populist: Add Content to Top of Region in IPE?.