Skip to content
This repository was archived by the owner on Jul 13, 2021. It is now read-only.

User Interface

Elorfin edited this page Dec 4, 2016 · 22 revisions

Introduction

Top bar

  • do not move the content based on the display of the left/right bars.
  • add a "no workspace selected" in the menu when on desktop (to explicit the icon)
  • add an icon to the "administration" link. Maybe we don't need the label ?

User menu

  • display the avatar of the user in the top bar. It's a common feature in applications (Google, GitHub, Sensio, etc.).
  • do do not display the full name (if we really want it, we might display it in the dropdown like GitHub) : this info is not important and it can break the display if User has a long name.

User alerts

In the platform each message source uses it's own way to display alerts to user. Messages must be grouped and categorized to have the possibility to use only one UI component by group to have a more coherent/easier to theme interface.

The actual Message sources are :

  • symfony flash bag : contains the messages generated by the server
  • browser check : checked in template
  • maintenance mode : checked in template
  • validate send info : checked in template
  • user action feedback
  • [to complete]

Easy improvements:

  • display the symfony flash bag in the app layout (for now, it's let to the developer).
  • adds some template checks in the symfony flash bag instead of using a custom display ?

Sidebars

For now, the sidebars are fully animated using JS code. The animation is very simple so it can be done using only CSS. The most important advantage of using CSS is that a custom theme will be able to configure/change the animation. For example, a theme could want to only display the title of the hovered tool instead of displaying the full menu.

Left bar

Right bar

There is a right bar implemented with the same system than the left one. It seems to be never used. Is it planned to use it ? For what ? If no, I think we can remove it and simplify the twig/js code of the left bar.

Page

Header

The page header is the part at the top of each page that contains the title of the current page. It may include an additional breadcrumb and a set of actions.

Breadcrumb

Title

Actions

Content

Footer

Icons

Tools

Resources

Summary

Clone this wiki locally