MPA

From the to-do list: MPA V1.0: UI

❏ Reduced side menu

Comments

Pierre henri Seylan on October 24, 2019:

This task is about create a new reduced version of the side menu, which will be used for small app sizes.

1. Concept:

-The small side menu will be olny a thin strip with the main icons.
-When hovering the strip, the full side menu appears.
-The full side menu is displayed over the content in this mode.
-The full side menu disapear when the mouse is out of the side menu.
-A sliding animation is used when the side menu open and closes.

This mechanism is very similar to the gmail side menu, see the video below:
https://www.dropbox.com/s/8rd61ie29fte7i7/reduced%20side%20menu%20gmail.mov?dl=0

2. Reduced side menu:
In the reduced mode, the strip only displays:
  • Main icons: Sound lib / projects / plugins / create new / logout / task number (if any)
  • 68 px wide

Reduced "create" icon:
The "create new" icon should be a circle with the "+" icon in the center.
the circle should have the same color and shadow as the button in full size.
the circle should have 30 px diameter


Reduced task number:
Here it displays only the circle which appears when tasks are processed:


3. Responsive layout.
The small side menu shall be active whe the app reaches 850 px width.
The minimal app width should be updated to be 600 px