search

Meeds-io / MIPs

The Meeds Improvement Proposal repository
0 stars 0 forks source link

Styling Portlets Framework #144

Open srenault-meeds opened 2 weeks ago

srenault-meeds commented 2 weeks ago

Rationale

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

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)
image
  1. 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:

  1. 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:

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

Services & processing

Data and persistence

srenault-meeds commented 2 weeks ago

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 commented 2 weeks ago

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 :

Thank you

srenault-meeds commented 2 weeks ago

Ok I added these points to be studied.

boubaker commented 1 week ago

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

rdenarie commented 1 week ago

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 commented 1 week ago

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 Meeds-io/MIPs#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 commented 1 week ago

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:

srenault-meeds commented 3 hours ago

Description updated + documentation link added

srenault-meeds commented 3 hours ago

Feedbacks collected from exo-mips: < Only eXo >

Other items need to be worked but these are not blocker for now as another MIP will take care of app's cleanup. As for instance, few apps (tasks, agenda for exo, webconferencing, coediting admin pages don't get the style (background for example, we can custom)