search

Meeds-io / MIPs

The Meeds Improvement Proposal repository
0 stars 0 forks source link

Portlet UI Cleanup #81

Closed srenault-meeds closed 10 months ago

srenault-meeds commented 1 year ago

Rationale

UI Theme used to display informations needs to be reviewed a bit to make sure we have consistencies between portlets: border, display of title, subtitle, body (padding, font-size, text-transform) For example, in the stream page, we have:

image

1. Functional Requirements

1. Functional Requirements

Top User Stories

Each time we add a new portlet, these characteristics below must be considered.

  1. Portlet padding/margin characteristics UI

    • Any existing portlet must be displayed with a border-radius of 8px (by default)
    • Padding inside needs to be 20px 
    • Margin-bottom (external) must be 20px. Other margins will be dealt by container
    • Contents inside the portlet needs to be displayed as left aligned AND with margin depending what to display: a. title (if not only a title): padding: 0 0 20px 0 b. subtitle (if something below): padding: 0 0 16px 0 c. subtitle (if body above): padding: 20px 0 16px 0 d. Body (until there are other items to list): padding: 0 0 16px 0

  2. Portlet text styles

Ideally, portlet will have same styles and adding a class for each would be a good way to ensure consistency and reusability. Below, characteristics of each content:

Title:

See more:

Subtitle:

body main text:

body subtitle:

Example:

image

Detail of padding/margin:

portlet review - details

Impacts

Any existing portlet must be updated to get those characteristics applied Provide a reusable component so the portlet is still used when adding a new portlet

2. Technical Requirements

Extensibility

Like the drawers, the widgets has to define a single template to reuse for all existing widgets with centralized styled title, borders and margins.

4. Software Architecture

Access 

We have to use the same manner as overview banner and drawer to define generic and reusable style for widgets. Please refer to Widget.vue to take an example of using slots for overview page.

PS: no specific stylesheet has to be added for this reusable component.

srenault-meeds commented 1 year ago

Ready for review @margondicco cc @Julien-Dubois-eXo if you want to take a look as well

srenault-meeds commented 1 year ago

Ready for review please @margondicco

margondicco commented 1 year ago

Perfect Go fonc

srenault-meeds commented 1 year ago

Thanks. Ready for tech spec @boubaker

boubaker commented 1 year ago

ok, thanks, Ready for Tec Review @rdenarie

@SaraBoutej FYI.

rdenarie commented 1 year ago

👍 go tech

Julien-Dubois-eXo commented 11 months ago

@srenault-meeds you did not mention the rules if we have a Setting button (gear icon): font-size, etc).

I think it could be interesting to include it.

srenault-meeds commented 10 months ago

@srenault-meeds you did not mention the rules if we have a Setting button (gear icon): font-size, etc).

Indeed, to be added afterwards as an enhancement. Thanks for this suggestion

SaraBoutej commented 10 months ago

ACCs and PRs ready for review by DAO members (eXo : @rdenarie ) PRs list : https://github.com/Meeds-io/gamification/pull/1308 https://github.com/Meeds-io/platform-ui/pull/707 https://github.com/Meeds-io/gatein-portal/pull/721 https://github.com/Meeds-io/wallet/pull/443 https://github.com/Meeds-io/analytics/pull/156 https://github.com/Meeds-io/kudos/pull/426 https://github.com/Meeds-io/perk-store/pull/290 https://github.com/Meeds-io/task/pull/311 https://github.com/Meeds-io/poll/pull/115 https://github.com/Meeds-io/app-center/pull/297 https://github.com/Meeds-io/social/pull/3158 https://github.com/Meeds-io/meeds-qa-ui/pull/216/

boubaker commented 10 months ago

ACCs and PRs ready for review by DAO members (eXo : @rdenarie )

Thanks @SaraBoutej . @rdenarie FYI, some adaptations are "optional" to b able to apply new border radius on eXo applications as well. (not blocker for MIP delivery on develop, but for better coherence on eXo applications, it would be better to apply the new CSS classes on parent DOM of eXo applications)

srenault-meeds commented 10 months ago

some adaptations are "optional" to b able to apply new border radius on eXo applications as well. (not blocker for MIP delivery on develop, but for better coherence on eXo applications, it would be better to apply the new CSS classes on parent DOM of eXo applications)

Regarding this, tell me if you need any help so that you can follow the same pattern (functionnally speaking I mean OFC) cc @margondicco

rdenarie commented 10 months ago

As I understand, I see 3 css class to apply :

@srenault-meeds I'm interested in a quick overview of the changes

rdenarie commented 10 months ago

All PRs except platform-ui one have been validated.

srenault-meeds commented 10 months ago

As I understand, I see 3 css class to apply :

  • card-border-radius => to apply radius on application border
  • overflow-hidden => not sure to understand this one
  • widget-text-header => to apply style on widget headers

@srenault-meeds I'm interested in a quick overview of the changes

Hello,

  • card-border-radius => to apply radius on application border

We have two types of border-radius item:

  • overflow-hidden => not sure to understand this one

A fix has been made to make sure that when you have a dialog, it is well displayed. For example, the analytics datepicker wasn't available to use before this.

  • widget-text-header => to apply style on widget headers

I guess it is related to the title and the see more we can find in widget headers

Hope that helps to understand

SaraBoutej commented 10 months ago

Thanks @rdenarie, merged to develop.