Tile

The bb-tile directive creates a collapsible container and is the bulding block for pages and forms in a Sky UX application. The bb-tile-section directive is used to create padded sections inside a bb-tile element. Additionally, the bb-tile-header-content directive may be placed inside the bb-tile directive to add summary information to the tile. If you simply need to show a check mark indicating the tile has data, you can add a bb-tile-header-check element to the bb-tile-header-content element.

When used on forms, it automatically adjusts the background color on the form and shrinks the tile header.

Tile settings

  • bb-tile-header — The header text for the tile.
  • bb-tile-settings-click — A function to call when the user clicks the settings button (indicated by a wrench icon) in the tile header. If not specified, the settings button is not displayed.
  • bb-tile-collapsed — (optional) binds to the collapsed state of the tile so that the tile can respond to user setting collapsed state.

Tile dashboard directive

The bb-tile-dashboard directive allows you to have a set of tiles within a page which have controllable layouts and collapsed states. It depends on angular-ui router to define states that map to tile controllers and templates.

Tile dashboard settings

  • bb-tiles — An array of tile objects to be contained in the dashboard. Contains the following object:
    • id — Unique ID for the tile.
    • view_name — The name of the view for the tile defined in the ui-router $stateProvider.
    • collapsed — True if the tile should be collapsed, false otherwise.
    • collapsed_small — True if the tile should be collapsed in small screen state, false otherwise.
  • bb-layout — An object containing information about how the tiles should be organized within the tile dashboard. Contains the following:
    • one_column_layout — Array of tile ids that correspond with how the tiles should be ordered in a one column layout (small screen) ex: layout.one_column_layout = ['Tile1', 'Tile2'];.
    • two_column_layout — Array that corresponds with how tiles should be ordered in a two column layout. ex: layout.two_column_layout = [['Tile1'], ['Tile2']]; where Tile1 is in the left hand column and Tile2 is in the right hand column.
  • bb-tile-dashboard-all-collapsed — If set to true, then collapses all tiles in the dashboard, if set to false, expands all tiles in the dashboard.

Demo

Tiles on pages

Markup

<div ng-controller="TileTestController as tileCtrl">
    <h3>Tiles on pages</h3>
    <div class="row" style="margin-top: 15px;">
        <div class="col-md-6">
            <button class="btn bb-btn-secondary" ng-click="tileCtrl.open()" type="button">Open modal with tile</button>
            <button class="btn bb-btn-secondary" ng-click="tileCtrl.collapseAll()" type="button">Collapse</button>
            <button class="btn bb-btn-secondary" ng-click="tileCtrl.expandAll()" type="button">Expand</button>
        </div>
    </div>
    <div style="background-color: #f2f2f2; margin-top: 15px; padding: 15px">
        <bb-tile-dashboard bb-layout="tileCtrl.layout" bb-tiles="tileCtrl.tiles" bb-tile-dashboard-all-collapsed="tileCtrl.allCollapsed"></bb-tile-dashboard>
    </div>
</div>

<script type="text/ng-template" id="demo/tile/tile1.html">
    <bb-tile bb-tile-header="tile1Ctrl.resources.tile_header" bb-tile-collapsed="tile1Ctrl.is_collapsed" bb-tile-settings-click="tile1Ctrl.openSettings()">
        <bb-tile-header-content>
            {{123456789 | bbAutonumeric:'money':true}}
        </bb-tile-header-content>
        <div bb-tile-section>
            Test.
        </div>
    </bb-tile>
</script>

<script type="text/ng-template" id="demo/tile/tile2.html">
    <bb-tile bb-tile-header="'Tile with check'">
        <bb-tile-header-content>
            <bb-tile-header-check></bb-tile-header-check>
        </bb-tile-header-content>
        <div bb-tile-section>
            Test 2.
        </div>
        <div bb-tile-section>
          Test 3. 
        </div>
    </bb-tile>
</script>

JavaScript

/*global angular, alert */
(function () {
    'use strict';

    function TileDashboardConfig($stateProvider) {
        $stateProvider
        .state('tiledashboard', {
            url: '',
            views: {
                'tile1': {
                    controller: 'Tile1Controller as tile1Ctrl',
                    templateUrl: 'demo/tile/tile1.html'
                },
                'tile2': {
                    controller: 'Tile2Controller',
                    templateUrl: 'demo/tile/tile2.html'
                }
            }
        });
    }

    function Tile1Controller() {
        var self = this;

        self.resources = {
            tile_header: 'Tile header'
        };

        self.openSettings = function () {
            alert('Settings invoked!');
        };
    }

    function TileTestController(bbModal) {
        var self = this;


        function collapseAll() {
            self.allCollapsed = true;
        }

        self.collapseAll = collapseAll;

        function expandAll() {
            self.allCollapsed = false;
        }

        self.expandAll = expandAll;

        self.open = function () {
            bbModal.open({
                template: '<bb-modal>' +
                      '    <div class="modal-form">' +
                      '        <bb-modal-header bb-modal-help-key="\'bb-security-users.html\'">Form Header</bb-modal-header>' +
                      '        <div class="bb-modal-body-tiled" bb-modal-body>' +
                      '            <bb-tile bb-tile-header="\'Tile header\'" bb-tile-collapsed="true">' +
                      '                <div bb-tile-section>' +
                      '                    Test.' +
                      '                </div>' +
                      '            </bb-tile>' +
                      '        </div>' +
                      '        <bb-modal-footer>' +
                      '            <bb-modal-footer-button-primary></bb-modal-footer-button-primary>' +
                      '            <bb-modal-footer-button-cancel></bb-modal-footer-button-cancel>' +
                      '        </bb-modal-footer>' +
                      '    </div>' +
                      '</bb-modal>'
            });
        };

        self.tiles = [
            {
                id: 'Tile1',
                view_name: 'tile1',
                collapsed: false,
                collapsed_small: true
            },
            {
                id: 'Tile2',
                view_name: 'tile2',
                collapsed: 'true',
                collapsed_small: true
            }
        ];

        self.layout = {
            one_column_layout: [
                'Tile1',
                'Tile2'
            ],
            two_column_layout: [
                [
                    'Tile1'
                ],
                [
                    'Tile2'
                ]

            ]
        };

    }

    TileDashboardConfig.$inject = ['$stateProvider'];
    TileTestController.$inject = ['bbModal'];


    angular.module('stache')
    .config(TileDashboardConfig)
    .controller('TileTestController', TileTestController)
    .controller('Tile1Controller', Tile1Controller)
    .controller('Tile2Controller', angular.noop);
}());