Patterns
Activity stream
The activity stream pattern is used to show easy to scan activity within a given context. This activity could be shown on the control panel dashboard, a person’s profile, or any place that aggregates activity. The elements included are an activity type icon, user avatar, activity content, expanded content, and activity date.
App profile
The app listing view uses a standard table and displays the logo, name, owner, and description of each app. Users can click through to install.
Criteria filters
Used for creating a listing of related criteria, such as for a filter. Each criteria grouping contains a row of related input fields.
Followups
Followup items are displayed as a list in the right hand column of the signup profile card with a "+ Followup” action at the top that allows users to add new followups to a profile through a modal dialog. Each followup item contains an icon which is colored based on its status, the followup type name, and a relative due date that is linked to a date picker to change it. Clicking the followup item removes it from the profile.
Leaderboards
Leaderboards display a ranked listing of signups based on a specific activity goal. Leaderboards are typically displayed in the right-hand column with a title, date last updated, and a listing of signups which includes their avatar with a rank badge, linked name, and their contribution to the goal.
Page header
The page header displays information about the view and also helps orient the user for where they are in the product. It can contain multiple elements, these include: the page heading, search bar, user avatar and menu, breadcrumbs, and sub-navigation level 1. There could also be information included about a broadcaster, website page, or signup profile information.
Paths
Path Journey
A path journey component is made of 2 parts, the journey info and the path steps. The journey info displays the name of the path, the avatar of the point person if one is assigned, and an action chevron. The steps of the path are displayed in order with the active step highlighted.
A signup's currently active path journeys are displayed at the bottom of the signup card with and “Add path” action button.
Path view
Path view displays the steps of a path in columns from left to right with cards for each signup currently on each step. Step headers include the name of the step, number of journeys, and the total associated value.
Permission sets
Permission sets define the access of control panel users to different parts of the app. They are displayed in a table containing outlined badges to demarcate features of the permission. The table only shows the top level access. e.g. If a permission set has access to any of the website features, they will have a “yes” badge under “Website.” Hovering on the permission set allows you to edit with more granularity.
The edit view of an individual permission set is a form populated by checkboxes and an input field at the top to name the set. Each grouping of checkboxes has a bolded header. Checking this header will select all the checkboxes in the grouping. Only the “People” header also contains a dropdown with a qualification of which category of people this permission set allows access to.
Goals
Goals are displayed with the name of the goal, the date range of when the goal starts and ends, a thermometer demonstrating progress towards the goal, the person responsible for that goal including their leaderboard rank, the person’s contribution towards the goal and the remaining number needed towards the goal. Goals are collected in a table.
Preview
Priority meter
The priority meter is used to set priority on a signup’s profile using a score of 1 - 5. Clicking the small scored priority meter triggers the priority popover that allows selection of a new priority score. Once selected, the new score is shown and the priority popover closes.
Theme selection
The Theme Selector is used to select a website theme from a list of public themes. Hovering over a thumbnail will reveal a button to select the theme. Themes are shown in a flexible grid that fill out the card depending on the size of the browser.
Turf cutter
The turf cutter is used to group lists of signups by location. It behaves like this:
1. Clicking the turf cutter button on a map will turn on the turf cutter controls.
2. While turf cutter is on, users can draw a bounding box on a map to identify anyone within that geographic location.