lgdd/liferay-dropzone-themelet

Add visual effects to highlight portlet dropzones

Liferay Dropzone Themelet

Add visual effects to highlight portlet dropzones.

Install

Go to your theme's root folder and type:

gulp extend

Choose Themelet :

? What kind of theme asset would you like to extend? 
  Base theme 
❯ Themelet 

Choose Search npm registry :

? Where would you like to search for themelets? 
  Search globally installed npm modules (development purposes only) 
❯ Search npm registry (published modules) 

Search for liferay-dropzone-themelet :

? Search npm for themelets: liferay-dropzone-themelet

If you have an error, try npm audit fix and retry installation from the beginning

Press space to select it :

? Select a themelet 
❯◉ liferay-dropzone-themelet

Resources

Inspired by these discussions brought by @olafk:

• https://community.liferay.com/blogs/-/blogs/dragging-portlets-is-easy-but-where-to-drop-them-
• https://community.liferay.com/blogs/-/blogs/dragging-and-dropping-portlets
• https://community.liferay.com/blogs/-/blogs/exploring-liferay-7-dragging-and-dropping-portlets

liferay-dropzone-themelet's Issues

Highlighted zone isn't always where portlet is going to drop

Describe the bug
Highlighted zone (in green) isn't always where portlet is going to drop.

To Reproduce
Steps to reproduce the behavior:

1. Create a page
2. Update layout to 1-3-1 columns
3. Place "Sign-in" portlet to the left column of the second row
4. Grab portlet and move to top until dropzone is highlighted
5. Drop the portlet
6. The portlet remains in the same zone

Expected behavior
Highlighted zone should always indicates where the portlet is going to be placed after being dropped.

Screenshots

Tested environment

Liferay Tomcat Bundle - 7.1.0-ga1 - CE