Styling Portlets Framework

[srenault-meeds]

Rationale

The Meeds Layout Manager enables different options to customize pages and portlets:

• page design: background, full window
• sections types: dynamic, fixed
• section styling: background
• portlet styling: border, background, fixed height

Considering it, we identified we needed to work on a global review of portlets (cf. MIP #135 )

Before working on such a cleanup, we suggest to implement a framework so we can variabilize such items to then apply it to each portlet. This will help other team to do the cleanup.

1. Functional Requirements

Top User Stories

Precision: only content portlets (snv, link, image) and portlets provided in the dashboard page (AKA overview) will be tested during this implementation to test it out

This framework must help us to manage:

1. Height for portlet:

• if fixed section, then whole height of the selected zone is applied to the portlet
• if dynamic AND fixed height applied to the portlet, then height selected
• if dynamic (no fixed height), then height is depending on the content to list (as currently)

2. Background for portlet:

• A background can be applied to the portlet and its content (including the listed items)
• In case the background applied is darker than text, propose by default a lighter text color for text in the portlet

3. text-style:

• If a background is applied, ability to update the text color to make sure it is ok for readability / accessibility
• Ability as well to set a custom size / style for texts depending on their attribute (title, header, body, subtitle)
• Default style for text are:
• Title: 20px, bold, #20282C (regularColor)
• Header: 18px, #707070 (GreyLightenColor)
• Body: 16px, bold, #20282C (regularColor)
• Subtitle: 12px, #707070 (GreyLightenColor)

4. General Branding options
   As all these items will be variabilized in a global framework, we suggest to provide new options to set default styling.

Hence, from the branding options (theme page), we would be able to:

• As an admin, I can setup the default page design (full window or not). Of course, I can still go against this decision from the page design edition
• As an admin, I can update the default background

5. Platform Styling Review
   All pages are reviewed in order to apply these styling characteristics.
   As for instance:

• any messages text will get the body style
• any specific activity like link, news will get the title style for title, and subtitle for description / summary
• any app's header will get the header style
• any column's header of tables will get the header style
• any timestamp, subtitle, will get the subtitle style

And some specific style is applied for few items:

• menu item (left nav / tabs): body + font-weight-bold
• menu title (topbar logo, user display name, site name): body + font-weight-bold
  Everything is detailed there: https://builders.meeds.io/portal/g/:spaces:developers/developers/notes/526

Impacts

Gamification

NA

Notifications

NA

Analytics

NA

Unified Search

NA

2. Technical Requirements

Expected Volume & Performance

N/A

Security

The Branding Options has to remain modifiable by Administrators only.
The read/write of user's theme (dark/light) has to be accessible to current user only.

Extensibility

N/A

Configurability

The default branding options has to remain configurable through branding.less file.

Upgradability

No data upgrade should be necessary in order to benifit from this feature.

Existing Features

No change to apply on default branding primary, secondary and tertiary colors for now, which may not fit the dark mode.

Feature Flags

N/A

Other Non Functional Requirements

N/A

3. Software Architecture

Security

Access

• The portlets styling has to use the helpers classes in order to allow define branding colors
• The portlets branding has to be distinct from general branding, thus each portlet has to be able to specify different values for font and background colors
• To allow branding portlets content using a generic class, each portlet body has to add a class application-body. This class will define all customizable CSS branding properties, such as colors, heights, margins ...

Services & processing

• A branding.less has to be defined by theme to allow defining default colors in both modes: light and dark.
• When accessing the Branding CSS :root element, a new path parameter has to be added in order to specify which theme is used
• The BrandingService has to be updated consequently in order to allow processing both themes at startup time.

Data and persistence

• The user personal preference shouldn't be stored in database, but should be based on Browser Local Storage only in order to allow choosing the preferred theme by Device and by Browser.

[srenault-meeds]

Hi @margondicco , to check.
I can't display any UI samples for now. Indeed, it seems I have no more access to adobe XD old files

[margondicco]

Hello ok for me

For the font :
can we have in the list these fonts Marianne + spectral + Arial + Georgia
https://www.systeme-de-design.gouv.fr/elements-d-interface/fondamentaux-de-l-identite-de-l-etat/typographie/

I would like to add these two points in general branding :

• fix by default the left navigation (important point)
• hide the option "define your own home page" (nice to have)

Thank you

[srenault-meeds]

Ok I added these points to be studied.

[boubaker]

Ready for tech review by DAO members (eXo @rdenarie )

[rdenarie]

Ok for me on tech side.

@boubaker have you evaluate if it will have an impact on our codebase and our portlets, to apply when merging the feature ?

[boubaker]

Ok for me on tech side.

@boubaker have you evaluate if it will have an impact on our codebase and our portlets, to apply when merging the feature ?

Yes, there will be changes to do. But as usual, to help you receiving the feature, we will consider changes to propose on eXo side. But just keep in mind that the changes in the context of this MIP will be on some portlets only to prepare a framework, and all other portlets will be considered in #135.

Top User Stories
Precision: only content portlets (snv, link, image and newslit) will be tested during this implementation to test it out

[srenault-meeds]

FYI @margondicco, @rdenarie we won't make any change to newslist for now as it is currently being used by your team.
For now, during this MIP, we will test our changes to following portlets:

• links
• snv
• image
• and any portlet proposed in the dashboard (AKA overview page)