Really thanks to @schulungen and @timostollenwerk for the #CathedralSprint!
Some photos : https://www.icloud.com/photostream/ca-es/#A25oqs3q2bM7z
We’ve done a LOT of work these weeks, in my opinion one of top productive sprints I’ve been! We really focused on moving forward and having a alpha release for Plone 5! Discussions, implementation, testing, all at the same time thanks to a 25 people team working all day long! I really felt like we are a big engine working perfectly on the same direction! Thanks ! Its been amazing !
Theme
From the initial design we had on plone5 skin we moved forward to have a barceloneta theme in a advanced situation. Albert Casado has been working all week tunning the design to look properly. We tried to maintain as less LESS as possible so it can be a good example for future themes (570 lines right now)
Toolbar design
My initial idea is to have a functional version of the plone toolbar, the place were we are going to have the options/menus/… After some discussion we decided to push for a left-fixed toolbar with three different positions on desktop and two on mobile: (collapsed/thin/expanded). The desired behaviour on mobiles is that is hidden on the left and you need to swipe the screen to the right to see it.
4 Desktop: There is the option to have the toolbar on the left and on the top (in case somebody wants to have it on the top)
* https://dl.dropboxusercontent.com/u/667918/Plone5/left-topbar-normal.tiff
* https://dl.dropboxusercontent.com/u/667918/Plone5/left-topbar-expanded.tiff
* https://dl.dropboxusercontent.com/u/667918/Plone5/top-topbar-normal.tiff
* https://dl.dropboxusercontent.com/u/667918/Plone5/top-topbar-expanded.tiff
* https://dl.dropboxusercontent.com/u/667918/Plone5/anonymous.tiff
TODO:
* We still need to work on the mobile css to enable the toolbar and the reactjs mockup bundle enabled so we can use it to hide and show the toolbar.
* We need to check on really old browsers how is it seen and use modernizr to enable or disable options.
Folder Contents
Nathan merged the plone.app.toolbar folder_contents view so we have it native on Plone5. In case you access folder_contents we get the view without any toolbar option ( it doesn’t make sense we can add on toolbar if we can change on structure widget the context and not change it on the browser url/view context)
In the normal case, folder contents will be opened as a modal, what means that any option there will open another modal. We need to check and think about that.
* https://dl.dropboxusercontent.com/u/667918/Plone5/structure.tiff
Plone Toolbar native Plone (no diazo works)
We want that plone toolbar is there with and without diazo so we designed the less/js mockup files so the plone bundle ( native js/less 4 plone ) will render properly the toolbar.
* https://dl.dropboxusercontent.com/u/667918/Plone5/no-diazo.tiff
Plone by itself will render the toolbar and the needed less files using as less bootstrap as possible ( only the classes for the navigation )
Toolbar integration
All toolbar actions are obtained from portal_actions, we added an extra feature that shows the level where it’s rendered (level0 on the toolbar, level1 on the … menu option)
We also added a new contentmenu that shows the option to manage the port let managers so we can remove the manage_portlet link on the page.
The top tiny logo is a view let that can be overwritten so customized.
DT/DL/DD remove
Kees has been working hard on removing the DT/DL/DD and some of them are already merged and skinned. There is a list of pull request on the github ticket
TODO: needs to be merged
Footer from viewlet to portlets
Giacomo worked to find a solution for the footer. We want that the user can modify its content and that we can have different footers depending on the context ( multilingual sites 4 example need a different footer depending on the language we are ) so we moved the viewless to a port let manager. As performance was a possible issue we did some statistics performance tests so we saw that adding the new port let manager was only 2% of overload.
Logo customization
Giacomo was working hard also on that with a site control panel, there is going to bé an option to upload the site logo (finally!) It needs the merge of plone.app.controlpanel with z3cform PLIP to go forward !
TODO: needs to be finished
z3cform control panel
Timo has been working on merging some of the control panel forms on z3cform, we need them as the markup is different and we would like to skin it with the z3cform layout.
TODO: needs to be finished
How to set modal actions
David designed a way actions can be called as modal, on the actions.xml file we can define a modal property with the json options on it so we can call them on a modal. We applied that behaviour on all the actions that may need it, rename, delete, folder_contents,...
Sitemap
Mike has been working on a new site map design that can be collapsed using the toggle pattern. It looks great and by default it will show it expanded.
TODO: needs to be merged and skined
Design on edit forms
We brainstormed on how edit forms should look like, one idea that we loved is to remove the tabbed navigation ( it produces a lot of confussion when we have a required field on a separated fieldset, so we moved to have a continuous page with the same tabs on the top that scroll spy to the desired section. We also thought that this tab navigation should have the action buttons and it will be fixed top. Rok is working on the needed pattern.
TODO: patterns needs to be done
Nested menus on …
On the new toolbar we have a more options section where we are going to handle the less used option (display/cut/copy/paste/manage_portlets)
Document by line
We thought about moving the document by line to the bottom of the content and designing them as pills so we can show more information about the content in a modular way (like language, content_type… )
TODO: It’s half implemented
Theme tests
Asko did a great job writing soucelabs tests so we can see the result of the theme on all the possible browsers and mobile devices.
* http://jenkins.plone.org/view/Theme/
Accessibility
Paul has been working on the accessibility of the theme, taking care of how to design the markup and less to be as accessible as possible.
TODO: We need to figure out how many things are on Plone that doesn’t respect the global accessibility rules (AA)
Sumary
Finally, we have all the work done on the plips/plip13787-main-template.cfg buildout on coredev. You can checkout and try it! I'm happy to have a buildout configuration really close to Plone 5!
When we can deal with the 6 failing tests on this configuration we will merge on plone5 master all the work and we will be able to go forward!
Some photos : https://www.icloud.com/photostream/ca-es/#A25oqs3q2bM7z
We’ve done a LOT of work these weeks, in my opinion one of top productive sprints I’ve been! We really focused on moving forward and having a alpha release for Plone 5! Discussions, implementation, testing, all at the same time thanks to a 25 people team working all day long! I really felt like we are a big engine working perfectly on the same direction! Thanks ! Its been amazing !
Theme
From the initial design we had on plone5 skin we moved forward to have a barceloneta theme in a advanced situation. Albert Casado has been working all week tunning the design to look properly. We tried to maintain as less LESS as possible so it can be a good example for future themes (570 lines right now)
Toolbar design
My initial idea is to have a functional version of the plone toolbar, the place were we are going to have the options/menus/… After some discussion we decided to push for a left-fixed toolbar with three different positions on desktop and two on mobile: (collapsed/thin/expanded). The desired behaviour on mobiles is that is hidden on the left and you need to swipe the screen to the right to see it.
4 Desktop: There is the option to have the toolbar on the left and on the top (in case somebody wants to have it on the top)
* https://dl.dropboxusercontent.com/u/667918/Plone5/left-topbar-normal.tiff
* https://dl.dropboxusercontent.com/u/667918/Plone5/left-topbar-expanded.tiff
* https://dl.dropboxusercontent.com/u/667918/Plone5/top-topbar-normal.tiff
* https://dl.dropboxusercontent.com/u/667918/Plone5/top-topbar-expanded.tiff
* https://dl.dropboxusercontent.com/u/667918/Plone5/anonymous.tiff
TODO:
* We still need to work on the mobile css to enable the toolbar and the reactjs mockup bundle enabled so we can use it to hide and show the toolbar.
* We need to check on really old browsers how is it seen and use modernizr to enable or disable options.
Folder Contents
Nathan merged the plone.app.toolbar folder_contents view so we have it native on Plone5. In case you access folder_contents we get the view without any toolbar option ( it doesn’t make sense we can add on toolbar if we can change on structure widget the context and not change it on the browser url/view context)
In the normal case, folder contents will be opened as a modal, what means that any option there will open another modal. We need to check and think about that.
* https://dl.dropboxusercontent.com/u/667918/Plone5/structure.tiff
Plone Toolbar native Plone (no diazo works)
We want that plone toolbar is there with and without diazo so we designed the less/js mockup files so the plone bundle ( native js/less 4 plone ) will render properly the toolbar.
* https://dl.dropboxusercontent.com/u/667918/Plone5/no-diazo.tiff
Plone by itself will render the toolbar and the needed less files using as less bootstrap as possible ( only the classes for the navigation )
Toolbar integration
All toolbar actions are obtained from portal_actions, we added an extra feature that shows the level where it’s rendered (level0 on the toolbar, level1 on the … menu option)
We also added a new contentmenu that shows the option to manage the port let managers so we can remove the manage_portlet link on the page.
The top tiny logo is a view let that can be overwritten so customized.
DT/DL/DD remove
Kees has been working hard on removing the DT/DL/DD and some of them are already merged and skinned. There is a list of pull request on the github ticket
TODO: needs to be merged
Footer from viewlet to portlets
Giacomo worked to find a solution for the footer. We want that the user can modify its content and that we can have different footers depending on the context ( multilingual sites 4 example need a different footer depending on the language we are ) so we moved the viewless to a port let manager. As performance was a possible issue we did some statistics performance tests so we saw that adding the new port let manager was only 2% of overload.
Logo customization
Giacomo was working hard also on that with a site control panel, there is going to bé an option to upload the site logo (finally!) It needs the merge of plone.app.controlpanel with z3cform PLIP to go forward !
TODO: needs to be finished
z3cform control panel
Timo has been working on merging some of the control panel forms on z3cform, we need them as the markup is different and we would like to skin it with the z3cform layout.
TODO: needs to be finished
How to set modal actions
David designed a way actions can be called as modal, on the actions.xml file we can define a modal property with the json options on it so we can call them on a modal. We applied that behaviour on all the actions that may need it, rename, delete, folder_contents,...
Sitemap
Mike has been working on a new site map design that can be collapsed using the toggle pattern. It looks great and by default it will show it expanded.
TODO: needs to be merged and skined
Design on edit forms
We brainstormed on how edit forms should look like, one idea that we loved is to remove the tabbed navigation ( it produces a lot of confussion when we have a required field on a separated fieldset, so we moved to have a continuous page with the same tabs on the top that scroll spy to the desired section. We also thought that this tab navigation should have the action buttons and it will be fixed top. Rok is working on the needed pattern.
TODO: patterns needs to be done
Nested menus on …
On the new toolbar we have a more options section where we are going to handle the less used option (display/cut/copy/paste/manage_portlets)
Document by line
We thought about moving the document by line to the bottom of the content and designing them as pills so we can show more information about the content in a modular way (like language, content_type… )
TODO: It’s half implemented
Theme tests
Asko did a great job writing soucelabs tests so we can see the result of the theme on all the possible browsers and mobile devices.
* http://jenkins.plone.org/view/Theme/
Accessibility
Paul has been working on the accessibility of the theme, taking care of how to design the markup and less to be as accessible as possible.
TODO: We need to figure out how many things are on Plone that doesn’t respect the global accessibility rules (AA)
Sumary
Finally, we have all the work done on the plips/plip13787-main-template.cfg buildout on coredev. You can checkout and try it! I'm happy to have a buildout configuration really close to Plone 5!
When we can deal with the 6 failing tests on this configuration we will merge on plone5 master all the work and we will be able to go forward!