Reintroduce the visual indicator to recognize where I can drag/drop portlets on the page

• Type: Story
• Status: Closed
• Priority: Major
• Resolution: Completed
• Affects Version/s: 6.1.1 CE GA2, 6.1.20 EE GA2, 6.2.5 CE GA6, 6.2.10 EE GA1, 7.0.0 Beta 6, 7.0.4 CE GA5, 7.0.0 DXP FP39, 7.1.0 M1, 7.1.0 CE GA1, 7.1.10 DXP GA1, 7.1.3 CE GA4, 7.2.0 Alpha 1, 7.2.0 Beta 3, 7.2.10 DXP RC2, 7.2.0 GA1
• Fix Version/s: Master
• Component/s: ~ [Archived] Frontend Infrastructure
• Labels:
  • user-experience
  • ux
• Epic/Theme:
  • Quick_Win
• Git Pull Request: https://github.com/natecavanaugh/liferay-portal/pull/1057

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)