A content tree provides users with a way to navigate nested hierarchical information using a parent-child relationship model. It is located on the left side of the screen and cannot be combined with Side Navigation or Toolbar.
- You have nested, hierarchical information.
- You want to manage hierarchical data and information.
Don’t use when
- You need to navigate between pages of an application. Instead use Side Navigation.
- You need to display actions a user may take to manipulate content within an application (i.e. edit, erase, rotate, etc.). Instead use a Toolbar (coming soon).
- You want a folder to collapse when another folder opens (instead, use an Accordion).
A content tree should be located on the left side of the screen and should consist of the following elements:
A content tree view is text-only by default. This option is best used when a hierarchy consists of all of the same content type. Background color: white, font weight: Semi-bold/ 600, font color: Trimble Gray. There are two sizes of available:
Default: 48px/3rem in height
Condensed: 32px/2rem in height
Collapse/ expand icon: Size: 16x16px, color: Trimble Gray. required
Drag icon: Allows the user to rearrange items in the content tree and change their hierarchical relationships. Size: 16x16px, color: Trimble Gray. optional
Checkbox: Checkboxes within the tree view allow users to select items and apply actions to them. Both single-select and multiselect tree views display checkboxes on the left side of each item. Size: 16x16px (see Checkboxes). optional
Icon: Icons can be used to add clarification about tree view items. They help to differentiate content types visually. Choose icons that relate to the object type being represented in the content tree. These icons can be unique to specific data types to add better clarification for users. Size: 16x16px, color: Trimble Gray. optional
Action icon(s): Action icons may appear next to the tree item or above the content tree in an action bar. optional
- Expand icon expands the clicked folder and does not collapse any other folders that are open.
- When a folder expands and collapses only its height should change; its width should remain consistent.
- Expand-and-collapse functionality should never be triggered on hover.
- Clicking the chevron will expand the folder but not select it.
- Always display the collapse and expand button.
- The content tree may have an action bar above it’s content where the user can trigger additional actions:
- Collapse all,
- Reorder (drag & drop),
- Add new folder.
- The content tree may include a search box.
|State||Background Color||Top/Bottom Border||Font||Notes|
|1px solid |
Gray 0 Gray 8
|Body text for default size; Small body text for condensed size|
|Checkmark appears at the end if action icons are not used|
|See Checkboxes for specifications|
- Clicking the collapse/ expand button in each content tree item expands or collapse a tree view item that contains child tree items.
- Clicking the chevron expands the folder but does not select it. Click a tree item selects it and expands it.
- User can click the “Collapse all” icon/button in the action bar to have all the open folders in the tree collapse.
When a label’s length is too long to display within the tree view, the text should be truncated at the end using an ellipsis. Hovering over or focusing on the truncated tree view item should reveal a tooltip that shows the full text of the label.
When tree views are very large, use a progress circle or a “show more” affordance to show additional parts when it’s contextually relevant. These loading patterns can apply to the entire tree view or to nested tree view items.
If system processes are delaying the display of child tree view items when a parent tree view item is expanded, show a clear indication that the items are in the process of loading (see Spinners).
The content tree may include an action bar that contains a variety of icons that turn on a content tree functionality:
- Enabled when a folder is expanded.
- Clicking it, collapses all the expanded folders.
- It highlights the top parent folder as the selected one; It does not change the selected folder (if there is one).
When a folder is selected, the duplicate icon in the toolbar becomes active.
- The user clicks the duplicate icon.
- The system duplicated that folder and it’s children.
- The system pastes the duplicate folder below.
- The new folder name is immediately editable. The name is not required to be unique; however, best for best accessibility practices, it should be).
Drag and Drop
The Drag & Drop icon (and functionality) is hidden by default. The user needs to click the icon in the action bar above the content Tree.
- Click the Drag & Drop icon.
- The tree shows the Drag & Drop icon in front of each item in the tree.
- The user can still expand the tree to be able to drag and drop into a different folder.
Content tree items can be dragged and dropped as a way of reordering or restructuring the hierarchy. Multiple content tree items can be dragged and reordered simultaneously. When selecting items in different hierarchies, dropping them in a new location flattens their hierarchical relationship with one another as sibling children of the content tree item they were dropped into.
The content tree DOES NOT accept dropped items from outside the component (e.g., dropping a new file into a content tree in order to upload a file to a specific folder is not allowed).
If a drag operation is not allowed, the line indicating the drop location will be red, and when the user tries to drop it, the item will return to its original location.
- Only enabled when a tree item is selected.
- When clicked, a modal opens to confirm the delete (see Modals). It warns the user they are about to delete x number of items.
- Deletes everything in the tree item including its children.
Edit Tree Item Name
When a tree item is selected, the edit icon in the toolbar becomes active.
- User clicks the edit icon.
- The tree item name becomes an editable input field (see Inputs).
- The user types in a new name (see accessibility guidelines below for best naming conventions).
- The user can click outside of the input field or press enter to commit the new tree item name.
Add New Tree Item
Clicking the + will either add a new tree item to the top of the tree structure or if an item is selected above it.
- When the user clicks the + icon, a new tree item is added to the top of the tree or above a selected tree item.
- The user types in a new tree item name (see accessibility guidelines below for best naming conventions).
- The user can click outside of the input field or press enter to commit the new tree item and its name.
Note: The user can later drag & drop to move the tree item into their preferred place.
Filter shows all the tree items matching the user’s search term. Tree items are expanded to show all of the results of the search. Matching items are highlighted in Trimble Blue (#0063a3).
|02/04/2022||1.3.0||New component added.||J. Wittmeyer, E. Gunther, L. Meskanen-Kundu|