Top bar application composant

[margondicco]

Rationale

• Standardise behaviour in eXo
• Simplify design by defining common rules
• Limit overloading of native vuetify components
• Respect accessibility rules

1. Functional Requirements

Top bar position

• Top bar height: 64px
• Padding left and right in relation to the edge of the application: 16px
• Padding top in relation to the edge of the application: 17px
• Bottom padding on the rest of the application: 17px
• note: on some apps the padding is applied to the whole app, on others it's applied per element.

Buttons:

• vertical-align : center

• All buttons have the same height of 38px (standard vuetify height)

  Create button

• Full primary colour

• Click effect: no border

Views button

• Text in lower case. Note: do not force the characters to be lower or upper case. Depending on the language, the second word may need to be upper case.
• View selected : in primary colour
• Inactive view : in grey

Filter zone

If 1 or 2 options, you can keep the display of two options

Text filter area

• When typing, the icon takes on the primary colour and a button is used to empty the input.
• Funnel icon size: 16x16

Advanced filters button

• must be grey when a filter is not active
• When a filter is active, it should take on the primary colour for the border, icon and text. The number of filters selected is identified

If there are 3 or more options, only one filter icon should be displayed.

• [Fontawesome link
• ](https://fontawesome.com/v5/icons/filter?f=classic&s=regular)
• By clicking on it, the entire top bar is replaced by the filter zone

• Pressing ESC returns to the previous view, retaining the filters you have defined
• After selecting a filter, the filter button is full and takes on the primary colour

2. Technical Requirements

Expected Volume & Performance

Security

Extensibility

Configurability

Upgradability

Existing Features

Feature Flags

Property Name	Default Value	Target Audience	Functional Behaviour

Other Non Functional Requirements

3. Impacts

Documentation

Training

4. Software Architecture

Security

Access

• GUI
• API

Services & processing

• Ex: Scheduled Jobs

Data and persistence

• Macro data model
• Persistence layer
• Use of caches

  Clustering

Multitenancy

Integrations

Migration strategy

5. Annexes

• Reasoning that explain the technical choices
• Impacts
• References

[srenault-meeds]

Related issue: https://github.com/Meeds-io/social/pull/2561

[Julien-Dubois-eXo]

Here are my comments :

• when the filter by name is active, the icon is no more displayed only the text field
• in my understanding, the ESC does the same as if we click on the "X". In my mind ESC key = close.

[margondicco]

Here are my comments :

• when the filter by name is active, the icon is no more displayed only the text field

yes but only if we have 3 elements or more

• in my understanding, the ESC does the same as if we click on the "X". In my mind ESC key = close.

yes

[Julien-Dubois-eXo]

I have edited the MIP to correct the following elements to match the final results:

• padding top and bottom:17px instead of 16px
• button size 38px instead of 36px