Details View

The reporting application provides a shared view that displays a table of data, referred to as a Details View. This scaffold is meant to showcase the subheader, filterbar, and data table elements holistically together within a single view. Not that some elements may be hardcoded to a loading state to showcase that as well.

HTML

<div class="t-content t-reporting" ng-controller="reportingDetailsViewExampleController">
    <div class="c-content">
        <div class="c-breadcrumbs">
            <div class="c-breadcrumb">
                Breadcrumb
            </div>
            <inv-icon glyph="'angle-right'" class="u-mh"></inv-icon>
            <div class="c-breadcrumb">
                Breadcrumb
            </div>
            <inv-icon glyph="'angle-right'" class="u-mh"></inv-icon>
            <div class="c-breadcrumb c-breadcrumb--inactive">
                Breadcrumb
            </div>
        </div>
        <div class="c-content-container">
            <div class="c-masthead">
                <div class="c-heading">
                    <div class="c-heading-titleArea">
                        <div class="c-heading-label">Transaction Activity</div>
                        <div class="c-button c-button--borderless c-button--icon u-ml+" ui-popout-visualizer-switcher
                            ui-popout-visualizer-switcher-items="visualizers"
                            ui-popout-visualizer-switcher-selected="onVisualizerSelect(item)"
                            ui-popout-visualizer-switcher-app-id="appId">
                            <inv-icon glyph="'list'"></inv-icon>
                            <inv-icon glyph="'caret-down'"></inv-icon>
                        </div>
                    </div>
                    <div class="c-heading-buttons">
                        <div class="c-button c-button--icon">
                            <inv-icon glyph="'cloud-download'" class="u-mr"></inv-icon>
                            <div class="c-buttonText">Export</div>
                            <inv-icon class="u-ml" glyph="'caret-down'"></inv-icon>
                        </div>
                        <div class="c-button c-button--icon">
                            <inv-icon glyph="'clock-o'" class="u-mr"></inv-icon>
                            <div class="c-buttonText">Schedule</div>
                        </div>
                        <div class="c-button c-button--primary">Save</div>
                        <div class="c-button c-button--icon">
                            <inv-icon glyph="'ellipsis-h'" class="u-mr"></inv-icon>
                            <div class="c-buttonText">More</div>
                            <inv-icon class="u-ml" glyph="'caret-down'"></inv-icon>
                        </div>
                        <div class="c-divider"></div>
                        <div class="c-button c-button--icon">
                            <inv-icon glyph="'clone'" class="u-m0"></inv-icon>
                        </div>
                    </div>
                </div>
                <div class="c-subheading u-pt0">
                    <div class="c-subheading-label">Created by John Smith</div>
                    <div class="c-subheading-label">Public</div>
                    <div class="c-subheading-label">Last Updated 10/22/2016</div>
                </div>
            </div>
            <div class="c-filterBar">
                <inv-single-select class="c-filterButton" name="countryName"
                    options="countryOptions"
                    is-removable="isRemovable"
                    on-selected-option="handleSingleSelect"
                    on-remove="handleSingleSelectRemove"></inv-single-select>
                <inv-single-select class="c-filterButton" name="paymentTypeName"
                    options="paymentTypeOptions"
                    is-removable="isRemovable"
                    on-selected-option="handleSingleSelect"
                    on-remove="handleSingleSelectRemove"></inv-single-select>
                <inv-single-select class="c-filterButton" name="deviceTypeName"
                    options="deviceTypeOptions"
                    is-removable="isRemovable"
                    on-selected-option="handleSingleSelect"
                    on-remove="handleSingleSelectRemove"
                    is-loading="true"></inv-single-select>
            </div>
            <div class="c-content-tableContainer">
                <div class="c-datatable">
                    <div ui-grid="{ data: tableData }" class="s-datatable"></div>
                </div>
            </div>
        </div>
    </div>
</div>