Page History

...

The DSpace 7 User Interface / Design was built collaboratively by the DSpace 7 Working Group (2016-2023). It is developed with Angular, and is composed of HTML5 templates for each Angular "component".  Out of the box, there are three theming layers/directories to be aware of:

...

• All the buttons should have a text description and an icon:

  

  If that it’s not possible (e.g. a small button with an icon) always use the ‘name’ and ‘title’ properties.

• Use the tooltip component when you need a better explanation of a button functionality. For example:

  

• For UI elements on public pages that are only visible to users with elevated privileges use an inverted color scheme btn-dark.

• For the ‘anchor’ ( the ‘<a>’ element) that uses the ‘btn’ Bootstrap CSS class always use btn-outline-primary.

• For the main action button use the Bootstrap CSS class btn-primary.

• For buttons like ‘Cancel’ or ‘Back’ use che Bootstrap CSS class btn-outline-secondary.

• For buttons that open a dropdown list use the Bootstrap CSS class btn-secondary.

• In a button series, or group, only one ‘<button>’ has the Bootstrap CSS class btn-primary.

• The buttons order, inside a group or a series, should follow the kind of action it performs. At the left side the most ‘light’ action, like ‘Back’ or ‘Cancel’, at the right side the most ‘changing’ action like ‘Delete’ or ‘Remove’. So, the order is:

  
  Back -> Cancel -> Submit/Edit/Save/Save for later/Deposit -> Discard/Delete/Remove
  
  

  Here an example:

  

  
  

• Where possible, align the buttons to the right.

• Ogni macro-funzionalità all’interno di una pagina può avere soltanto un button primaryEvery macro-function inside a page shall be a primary button.

• If, after an action, there is a waiting time, e.g. for the server response, the control (e.g. the button) that launched the action must become disabled and show an animated waiting icon. All other associated controls must be disabled (property ‘disabled=”true”’).

• Action confirmation should occur on cancellations or non-reversible operations; a modal should appear with a message giving the possibility to confirm or cancel the requested action:

...