superdesk/superdesk-client-core

<div class="subnav subnav--absolute">
    <h2 class="page-nav-title"><span translate>Dashboard</span> {{ dashboard.current.name | translate}}</h2>

    <div class="subnav__button-stack--square-buttons">
        <button ng-if="configurable" class="navbtn" ng-click="dashboard.edit = true" ng-show="dashboard.widgets.length && !dashboard.edit" sd-tooltip="{{ :: 'Rearrange widgets' | translate }}" flow="left">
            <i class="icon-switches"></i>
        </button>

        <button class="navbtn navbtn--blue" ng-click="dashboard.save()" ng-show="dashboard.edit" sd-tooltip="{{ :: 'Accept' | translate }}" flow="left">
            <i class="svg-icon-ok inverse"></i>
        </button>

        <div sd-tooltip="{{ :: 'Add widget' | translate }}" flow="left" ng-show="!dashboard.edit">
            <button ng-if="configurable" class="navbtn sd-create-btn" ng-disabled="dashboard.edit" ng-click="dashboard.add = true" aria-label="{{ :: 'Add widget' | translate }}"></button>
        </div>
        <div class="dropdown__menu pull-right" sd-multiedit-dropdown ng-if="dashboard.current.name !== 'personal' && dashboard.current._id && !dashboard.current.desk"></div>
        <div class="dropdown" dropdown ng-if="dashboard.current.name !== 'personal' && dashboard.current._id && !dashboard.current.desk">
            <button class="navbtn dropdown__toggle" dropdown__toggle>
                <i class="icon-dots-vertical"></i>
            </button>
            <div class="dropdown__menu pull-right">
                <ul>
                    <li>
                        <span class="dropdown__menu-label" translate>Workspace</span>
                    </li>
                    <li>
                        <button type="button" ng-click="dashboard.rename()">
                            <i class="icon-pencil"></i>
                            <span translate>Rename workspace</span>
                        </button>
                    </li>
                    <li>
                        <button type="button" ng-click="dashboard.delete()">
                            <i class="icon-trash"></i>
                            <span translate>Delete workspace</span>
                        </button>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>

<div sd-edit-workspace data-workspace="edited" data-done="afterRename"></div>

<div class="dashboard-container" ng-if="dashboard.current" data-test-id="dashboard">
    <div class="content clearfix">
        <div sd-grid
            data-status="dashboard.edit"
            data-widgets="dashboard.widgets"
            data-save="dashboard.save()"
            data-configurable="configurable"
            ></div>
        <div class="content-state__empty-container content-state__empty-container--absolute" ng-show="dashboard.widgets.length === 0">
            <div class="content-state__empty-info">
                <figure class="content-state__image content-state__image--large">
                    <img src="{{emptyState}}" alt="Empty state illustration">
                </figure>
                <h3 class="content-state__heading" translate>Dashboard is empty</h3>
                <p class="content-state__description sd-padding-x--5" translate>Click on the "+" button in the top right corner to add some widgets.</p>
            </div>
        </div>
        <div class="empty-dashboard loading" ng-show="dashboard.widgets == null" translate>Loading...</div>
    </div>
</div>

<div sd-modal data-model="dashboard.add" class="modal--large modal--x-large modal--tabs" data-test-id="'widget-modal'">
    <div class="modal__header modal__header--flex">
        <h3 class="modal__heading" translate>Add new widget</h3>
        <button class="modal__close icn-btn" ng-click="dashboard.add = false"><i class="icon-close-small"></i></button>
    </div>

    <div class="modal__body" ng-if="!dashboard.selectedWidget">
        <div class="modal__body-content">
            <ul class="widget-list">
                <li ng-repeat="widget in dashboard.availableWidgets" ng-click="dashboard.selectWidget(widget)" ng-class="{selected: dashboard.isSelected(widget)}" class="widget {{ widget._id }}" data-test-id="widget-item" data-test-value="{{ widget._id }}">
                <div class="thumbnail"><img ng-src="{{ :: widget.thumbnail }}"></div>
                <div class="title">{{ :: widget.label | translate}}</div>
                </li>
            </ul>
        </div>
        <div class="modal__body-footer" ng-if="!dashboard.selectedWidget">
            <button class="btn btn--primary btn--large" ng-click="dashboard.add = false" translate>Done</button>
        </div>
    </div>

    <div class="modal__body" ng-if="dashboard.selectedWidget">
        <div class="modal__body-header modal__body-header--flex modal__body-header--add-padding">
            <button class="backlink" ng-click="dashboard.selectWidget()" translate>Back</button>
        </div>
        <div class="modal__body-content widget-detail">
            <div class="thumbnail-box {{ dashboard.selectedWidget._id }}">
                <img ng-src="{{ :: dashboard.selectedWidget.thumbnail }}">
            </div>
            <div class="content-box">
                <div class="title">{{ :: dashboard.selectedWidget.label | translate }}</div>
                <div class="description" ng-if="dashboard.selectedWidget.description">{{ :: dashboard.selectedWidget.description | translate }}</div>
                <div class="description" ng-if="dashboard.selectedWidget.descriptionHtml" ng-bind-html="dashboard.selectedWidget.descriptionHtml"></div>
                <button class="btn btn--primary btn--large"
                    ng-click="dashboard.addWidget(dashboard.selectedWidget)"
                    ng-disabled="!dashboard.selectedWidget"
                    translate>Add This Widget</button>
            </div>
        </div>
        <div class="modal__body-footer" ng-if="dashboard.selectedWidget"></div>
    </div>
</div>