[GSOC17] Editing list layouts with inline tiles in Mosaic

Hello everyone.

Since the second coding period is over for Summer of Code, it is high time for me to give an update on my progress.

I had the chance to meet some of Plone community members and demonstrate the inline tile functionality I had done in June. My earlier post about inline tiles can be found here.

This month I've been building upon the inline tile functionality towards the second goal of my project which is to allow for easier list customization with mosaic. I've modified the existing content listing tile so that using the inline tile functionality it's now easier to customize the layout of list items and to choose what fields are included in the list.

Here's a quick video showing how the layout editing works.

The top part of of the tile is a tinymce editor which acts like a rich text tile (In the video there is a bug where the tinyMCE isn't initialized when the listing tile is added to the page for the first time). The contents of the tinymce get saved into the tile schema as HTML. In this example I have lead image, title and summary tiles in the tinyMCE as inline tiles. The list itself is showing list of news items on my page. The html content is then transformed into a tal template for the actual list. The list layout updates automatically to match the content of the tinyMCE whenever the contents of tinyMCE are edited.

Editing the list content works just the same as it does with the current content listing tile, by editing the querry in tile settings.

While the basic functionality for the editing item layout is working fine for now, there is still work to be done in it. The tile itself still requires some bug fixes and general UX-improvements, but also there's work to be done on how different fields are added to the list. Currently mosaic editor allows you to only add fields for the content on the current page. This isn't sufficient for editing list, since we might for example want to add list of upcoming events to our front page, and we might want to add event starting date or end date to the list, which the current mosaic editor doesn't allow if the page we're editing doesn't itself have those fields. The solution we decided upon with @djay is a generic metadata tile that user can add to the list layout and then from the tile's settings choose which field this tile will represent. This tile would be aware of it's context and allow user to choose from all the fields available for list items.

Another great functionality for the new content listing that we have planed, is to make the tile aware of what content should be repeated. In practice this would mean that if we for example add a single row table to the tinyMCE editor in a listing tile, and add inline tiles to that table, the listing tile should know that it shouldn't repeat the table itself for the list, but rather show one table where it repeats the table row(or even rows) the user has added in the tinyMCE.

I'll start my last period by working on these two functionalities. I originaly had even more planed for my project, but I believe my goal is to have the list editing and inline tiles ready for pull request and possibly continue on the rest of my project after the GSOC-program. :slight_smile:

I'd love to hear your feedback on my progress so far and my plans for the last period of the program.

-Mikko

2 Likes