GSOC2017: Improving the UX and functionality of theme editor for Plone

Development User Interface
,
1

Greetings Everyone,

I'm Oshane Bailey, one of the Summer of Code students that is working on Plone during the summer. I will be using this post as a place for general discussion about my project and I will try to post updates about my progress for the Plone community to see. I do apologise for the late post, it took me away to clear my schedule to get to this point in my life of as a developer.

Project Scope:
The overall goal is to make it possible for individuals to feel comfortable working with the theme editor. Currently, theme editor is a fancy text editor with code highlight and more. However, it doesn't have key features such as searching for files by name and text within files, and more. This project is about giving the theme editor more superpowers while making it easier to do tasks and create rapido apps. This project is based on a suggestion made by David Bain on Products.CMFPlone issue tracker page to improve theme editor.

From the start of getting my proposal submitted to being my mentors for GSoC, @datakurre and @pigeonflight have been reviewing the goals and objectives of my project, to ensure I have a clear plan of what to do when the GSoC begins. Communication for the last few weeks has been mainly done on this website between @datakurre, while @pigeonflight and I have been in direct contact. My mentors and I have decided to use hangouts as our discussion panel. It is open for anyone who wants to keep track of this project:
https://hangouts.google.com/group/hxl963WZOwV32PIH2
I will still post relevant information here to give a brief update to the community.

A project board and milestone for the project can also be found on plone.app.theming github page

About me:

I'm a final year student of the University of The West Indies, Mona, who's pursuing a BSc in Computer Science. I've worked with many other developers and companies before. In fact, I work @pigeonflight as a developer. Iā€™m a big fan of Kotti and have been working with it for over a year now. The Kotti is heavily influenced by Plone, except for the fact that it uses SQLAlchemy and Pyramid for database interfacing and URL dispatching. I've created a number of open sources projects for various frameworks and languages. I have over a year of experience with Plone, mainly working as a frontend/backend developer. My usual task in the backend is database migration from the versions of Plone to Plone 5. I love coding because of its problem-solving nature.

I'm very grateful for being amongst the chosen ones for GSoC this year and looking forward to completing this project. For more information about this project and development timeline, see my GSoC proposal on Google Drive.

Thank you for accepting me in GSoC 2017
O. Bailey

3 Likes
2

I don't know if you are taking suggestions for features and if so, where is the best place but here some things that affect me.

  • Varnish purge requests when changing the theme TTW
  • tinymce and mosaic styles should be able to be included in the theme and just appear in the UI. Currently its a bit of a mess. Tinymce will pick styles from both the registry and the special css files but the special css file ones don't have proper names and appear in a different place from memory. Mosaic styles can only come from the registry. Registry entries are a pain for TTW themes as they either need to be done via themesitesetup or manually. I think we need to either go all in on special formatted css entries or extend the manifest to put in styles.
  • should be a UI in theme editor for creating new custom style entries too.
  • test styles should not be a public view
  • its weird that parameter expressions and rules path etc are defined in advanced settings, not with the theme.
3

Yes, I'm open to suggestions especially if the features and enhancements coincide with the objectives of project based on my development timeline. Any feature or enhancement that does not have a direct relation to objectives of this project, I might have to put it on the backburner. Once, I've finish with the main objectives, then I will work on those additional features.

If there's any you like to keep track of the discussion about this project, you can join the hangouts chat for this project:
https://hangouts.google.com/group/hxl963WZOwV32PIH2

1 Like
4

Thus far, the search for file names and text within files have been implemented: I'm going to change the look and feel of the themer page to something similar to c9 ACE editor.

image.jpg485Ɨ512 71.1 KB

2 Likes
5

https://github.com/plone/mockup/pull/773 for those, who are interested

6

After completing the searching for files and text within files, I implemented the drag and drop features as seen in the gif below.

There's couple of things I need to improve, which I will get done this week. The upcoming set of tasks are:

  • Improve the UI and UX of the theme editor
  • Add contextual menu on items in the file tree.
3 Likes
7

FYI. Search and drag and drop features have now been merged into CMFPlone, mockup and plone.resourceeditor, and are available in plone.app.theming with up-to-date thememapper bundle (we have not updated the bundle in plone.app.theming yet).

1 Like