Content Tree

Specifications

Anatomy

A content tree should be located on the left side of the screen and should consist of the following elements:

Tree item:

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

Behaviors

• 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,
  • Duplicate,
  • Reorder (drag & drop),
  • Delete,
  • Edit,
  • Add new folder.
• The content tree may include a search box.

States of Tree Items

Collapse and Expand

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

Text Overflow

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.

Large Tree Views

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).

Content Tree Action bar

The content tree may include an action bar that contains a variety of icons that turn on a content tree functionality:

Collapse All

• 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).

Duplicate

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.

Delete

• 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

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 Trimble Blue