New Pages and Containers Templates

[mzorai]

Rationale

It is not easy neither for customers nor consultants to create new pages on the platform:

• Too much confusing steps (add containers, select app,...)
• Too much unuseful choices: lines, tabs, rows,...
• An empty template is proposed
• Not mobile friendly templates
• The need to use CSS inline for newly created pages

1. Functional requirements

• Remove the current pages templates
• Add a new simple page template mobile friendly with predefined containers
• No more need to CSS inline when adding a new page
• Reorganize existing apps under categories
• Cleanup the list of existing containers in page's edition mode
• Create new containers

1.1 Remove current pages templates (Priority 1)

Currently in the page's creation steps, we have the step of template selection (through a dropdown list appearing on the left). Since some of those templates are not used and not mobile friendly, we need to remove them and just keep the analytics page template, blank page template and the new page template named "Normal page".

• Normal page : First position
• Blank page: Second position
• Analytic page : Third position

1.2 Add a new pages template (Priority 1)

The new pages template is composed of a table which contains 3 containers simple table / simple row / simple column:

• No CSS inline, in the page itself, containers will define their own CSS rules.
• We will keep the same current rules for inserting different components:
  • Page components order: Table > Container > Column and/or Mobile drawer column > Application
  • A container could be inserted under a table or directly placed into the page (i.e without table)
  • A column could be inserted under the standard container or not
  • An application could be inserted or not under a column or container
• An application inherits CSS rules of the component in which it is inserted (container and/or column and/or table) cf css rules below
• All the above cited components will be available in the containers list.
• Responsiveness should be defined with the simple row container and/or the simple column container with flex. So if the applications are not inserted directly outside simple column containers, responsiveness can not be guaranteed.

​

1.3 Create new containers

New container should be created in the following associated categories and properties:

Table category

Simple Table container

20px margin-top

Row category

Simple Row container

(min-width: 1320px)
10% margin-left
20px margin-bottom
10% margin-right

(max-width: 1319px)
20px margin-left
20px margin-bottom
20px margin-right

(max-width: 979px)
11px margin-left
20px margin-bottom
11px margin-right

Column category

Simple Column container

• Ensure a gap between columns
• Add the possibility to insert right or left an another column
• The width of the column could be defined in the properties of the column px or %

20px column-gap

1.4. Reorganize existing apps

Meeds configuration :

Category	Current app name
Analytics	Analytics applications
	Analytics rate application
	Analytics table
	AnalyticsDashboardBreadcrumb
Spaces application	Agenda (only eXo)
	Tasks
	Note
	Members
	Space settings
	Wallet
Tools	External space list
	Popular spaces
	Space Menu Portlet
	who's online
	My tasks
Contributions	My contributions
	My Reputation
	My Rewards
	Top Challengers
	Challenges Overview
	Programs Overview
	Profile Stats
	Overview banner

exo configuration : https://community.exoplatform.com/portal/g/:spaces:exo_product_management/exo_product_management/notes/21866

1.5. Cleanup containers list

Existing containers categories should be deleted

2. Software Architecture

Access

• Remove current pages templates

  • Useless pages templates categories configuration should be removed from page-template-configuration.xml.
  • only normalPageConfigs category should be kept with empty page template.
  • Useless pages templates definition with pages.xml files should be removed from pages location.

• Add a new pages template

• Pages templates categories configuration file should be updated by adding the new pages template called "normal" as an option of normalPageConfigs category.

• The new pages template structure should be defined with its pages.xml into pages location, the structure will be the layout of the new pages template based on the new implemented containers.

Reorganize existing apps

• For the different application and applications categories to be reorganized, the configuration of some component plugins of type org.exoplatform.application.registry.ApplicationCategoriesPlugins in the corresponding addons should be updated. Example for Tasks management application configuration.

Cleanup existing containers

• Useless existing preconfigured containers models and categories should be removed from ContainerConfigOption.groovy file, but we should keep these containers corresponding groovy template files (gtmpl) into containers files location since some of them are already used in the product and some of them can be used in existing customer environments.

Create new containers

• New containers categories Table, Row and Column should be configured into ContainerConfigOption.groovy file.

Table category

This category should contain:

• Simple Table container

This container should be implemented with the following css class:

      .simple-table-container {          margin-top: 20px;        }

Row category

This category should contain:

• Simple container

This container should be implemented with css classes:

      @media (min-width: 1320px) {         .simple-container {           margin-left: 10%;           margin-bottom: 20px;           margin-right: 10%;         }       }       @media (max-width: 1319px) {         .simple-container {           margin-left: 20px;           margin-bottom: 20px;           margin-right: 20px;         }       }       @media (max-width: 979px) {         .simple-container {           margin-left: 11px;           margin-bottom: 20px;           margin-right: 11px;         }       }

Column category

​​​​​​​This category should contain:

• Simple column container

This container should be implemented with the following css class:

  .simple-column-container {
    column-gap: 20px;
  }

[srenault-meeds]

Hello,

Thanks for this MIP. My feedbacks:

What is the definition of the "Normal page"? What differencies with "Blank page"?

Do we need "Blank page"?

Row category . simple row container

(min-width: 1320px)
10% margin-left
20px margin-bottom

Are we sure about this? only margin-left 10%?

Are we sure about this breakpoint? These are different than ones used in the product (1279 px for stream).

> Apps in app registry

Do you plan to remove apps from the app registry? It is not clear to me (you only talk about categorization of these)

> An application inherits CSS rules of the component in which it is inserted (container and/or column and/or table)
cf css rules below

Don't find the css rules part (unless it is 1.3 create new containers chapter).
And what happens if I add an app in the simple table container? Any problem with the fact that I didn't add a simple row container? Or is this container added automatically? 

Thanks

[margondicco]

Hello

Are we sure about this? only margin-left 10%?

no margin-right 10% coud be added only if we'll manage simply the gap between column.

Do we need "Blank page"?

It could be optional yes but the proposal was made not to delete the existing templates

Are we sure about this? only margin-left 10%?

Normally for a one column page id could be 1279 BUT the it's possible to add a column. So it seems simpler to propose this rule.

Do you plan to remove apps from the app registry? It is not clear to me (you only talk about categorization of these)

no just in the edit layout so also in the app registry but not in the all app registry. Do you understand the difference ;-)

Don't find the css rules part (unless it is 1.3 create new containers chapter). yes cf 1.3

And what happens if I add an app in the simple table container? Any problem with the fact that I didn't add a simple row container? Or is this container added automatically?

a user can be everything and also ugly things. I can add an app directly in the simple table Or outside the simple table.

[rdenarie]

no just in the edit layout so also in the app registry but not in the all app registry. Do you understand the difference ;-)

No sure to understand on my side.

Will we update applications in application Registry ? For new instances (start from zero) ? What about existing instances ? with existing data ? Can we add a part about that ?

[margondicco]

No sure to understand on my side. Will we update applications in application Registry ? For new instances (start from zero) ? What about existing instances ? with existing data ? Can we add a part about that ?

My need : for new instances : we update applications in application Registry. Existing instances. : no change

[rdenarie]

Ok, so we update the initial app registry configuration. No need for data upgrades. @mkrout @mzorai can you add this precision in MIP description ?

Thanks

[margondicco]

Hello @mzorai @mkrout @azayati ; i updated the MIP 1.1 And 1.4

[boubaker]

I think that this is part of eXo layout-management addon only. This will not impact Meeds and will not serve Meeds Package. @Samuel-Renault-eXo WDYT ?

[rdenarie]

The idea was to cleaned some old unused stuff (configuration for old containers and pages template), and add new ones, which could be used in the future by meeds. Thats why we add it in meeds part

[margondicco]

Added : a section in the app registry "Contributions"

[azayati]

PRs review needed:

• https://github.com/Meeds-io/analytics/pull/105
• https://github.com/Meeds-io/gatein-portal/pull/479
• https://github.com/Meeds-io/platform-ui/pull/550
• https://github.com/Meeds-io/commons/pull/425
• https://github.com/Meeds-io/social/pull/2145
• https://github.com/Meeds-io/wallet/pull/354
• https://github.com/Meeds-io/gamification/pull/799
• https://github.com/Meeds-io/task/pull/166

@rdenarie @boubaker

[boubaker]

all PRs approved