PUBLIC - Liferay Portal Community Edition
  1. PUBLIC - Liferay Portal Community Edition
  2. LPS-33636

As an unexperienced portal administrator I'd like to see where I can drag/drop portlets on the page

    Details

    • Type: Story Story
    • Status: Contributed Solution
    • Priority: Minor Minor
    • Resolution: Unresolved
    • Affects Version/s: 6.1.1 CE GA2, 6.1.20 EE GA2
    • Fix Version/s: None
    • Component/s: UI Infrastructure
    • Labels:
      None
    • Epic/Theme:
    • Liferay Contributor's Agreement:
      Accept
    • Similar Issues:
      Show 5 results 

      Description

      I've seen unexperienced users missing a clue that they can drop portlets into the second row of a layout-template like the default 1-2-column-30-70: They might end up with all portlets in column-1, not realizing where they have to drop portlets to so that they will appear in row 2 (column-2 or column-3). IMHO this is due to the lack of obvious dropzones and a real usability issue.

      Experienced users have a mental model and know what to expect of these invisible areas.

      Proposing an easy patch to the _styled theme, so that every derived theme will automatically make use of it (see screenshot of a drag/drop activity in action: Dotted lines will appear once dragging activity starts)

        Activity

        Hide
        Olaf Kock added a comment -

        The proposed code is in https://github.com/olafk/liferay-portal/commit/cc973b87b8ba95b7088d41fb6fea02024860f323 - currently figuring out whom to send the pullrequest to

        Show
        Olaf Kock added a comment - The proposed code is in https://github.com/olafk/liferay-portal/commit/cc973b87b8ba95b7088d41fb6fea02024860f323 - currently figuring out whom to send the pullrequest to
        Hide
        Olaf Kock added a comment -

        pullrequest sent.

        Feel free to change the design - this commit is there to introduce the functionality. Another one might be required to fix the login

        Show
        Olaf Kock added a comment - pullrequest sent. Feel free to change the design - this commit is there to introduce the functionality. Another one might be required to fix the login
        Hide
        Olaf Kock added a comment -

        just found this old issue again. After some (ancient) communication with Nate, it showed that the CSS in question is already in the portal. Quickfix is to configure a Liferay site to have this javascript on any page (e.g. add on toplevel)

        Liferay.on('initLayout', function(event) {
        	Liferay.once(function() {
        		Liferay.Layout.on([ 'drag:end', 'drag:start' ], function(event) {
        			console.log('event type', event.type, event);
        			AUI().one("#main-content").toggleClass('dragging',
        					event.type == 'drag:start');
        		});
        	}, Liferay.Layout, 'bindDragDropListeners');
        });
        
        Show
        Olaf Kock added a comment - just found this old issue again. After some (ancient) communication with Nate, it showed that the CSS in question is already in the portal. Quickfix is to configure a Liferay site to have this javascript on any page (e.g. add on toplevel) Liferay.on('initLayout', function(event) { Liferay.once(function() { Liferay.Layout.on([ 'drag:end', 'drag:start' ], function(event) { console.log('event type', event.type, event); AUI().one( "#main-content" ).toggleClass('dragging', event.type == 'drag:start'); }); }, Liferay.Layout, 'bindDragDropListeners'); });

          People

          • Assignee:
            Nate Cavanaugh
            Reporter:
            Olaf Kock
            Recent user:
            Randy Zhu
            Participants of an Issue:
          • Votes:
            2 Vote for this issue
            Watchers:
            2 Start watching this issue

            Dates

            • Created:
              Updated:

              Development

                Structure Helper Panel