Page History

These guidelines have been written to help the developer to ensure that all DSpace components have a consistent layout and follow the essential Components of Web Accessibility ( https://www.w3.org/WAI/standards-guidelines/wcag/ ). These guidelines have to be followed by anyone who wants to contribute to the project.

...

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:

• Base Theme (/src/app/ directories):  The primary look & feel of DSpace (e.g. HTML layout, header/footer, etc) is defined by the HTML5 templates under this directory. Each HTML5 template is stored in a subdirectory named for the Angular component where that template is used. The base theme includes very limited styling (CSS, etc), based heavily on default Bootstrap (4.x) styling, and only allowing for minor tweaks to improve accessibility (e.g. default Bootstrap's color scheme does not have sufficient color contrast)
• Custom Theme (/src/themes/custom directories): This directory acts as the scaffolding or template for creating a new custom theme.  It provides (empty) Angular components/templates which allow you to change the theme of individual components.  Since all files are empty by default, if you enable this theme (without modifying it), it will look identical to the Base Theme.
• DSpace Theme (/src/themes/dspace directories): This is the default theme for DSpace 7.  In version 7.0, it's a very simple example theme providing a custom color scheme & homepage on top of the Base Theme. In later versions of 7.x, this may be enhanced to provide additional theming examples (and to enhance the default DSpace theme itself).  It's important to note that this theme ONLY provides custom CSS/images to override our Base Theme. All HTML5 templates are included at the Base Theme level, as this ensures those HTML5 templates are also available to the Custom Theme.
• Which theme am I using? or How can I change themes?  Everyone's theme is always based on the Base Theme, but you may have overrides in place based on the "themes" section in the in config.yml (or environment.common.ts in DSpace 7.0/7.1).  As you can see from that configuration, it is possible to customize your global theme, or customize the theme per Community/Collection/Item.

...

• 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:

...