superdesk/superdesk-client-core

<div class="sd-padding-all--2 widget-content__main" ng-controller="Macros">
    <div class="macro-option" ng-show="groupedMacros">
        <span translate>Group Macros</span>
        <span class="pull-right" sd-switch ng-model="groupedList" data-test-id="group-macros-toggle"></span>
    </div>
    <div ng-show="!groupedList">
        <ul class="link-list" sd-loading="loading">
            <li ng-repeat="macro in macros">
                <button class="btn btn--hollow" ng-click="call(macro)" translate>{{ macro.label }}</button>
            </li>
        </ul>
    </div>
    <div ng-show="groupedList">
        <div sd-toggle-box data-title="{{:: 'quick list' | translate }}" data-open="true">
            <ul class="link-list" sd-loading="loading">
                <li ng-repeat="macro in quickList | orderBy:'label'">
                    <button class="btn btn--hollow" ng-click="call(macro)" translate>{{ macro.label }}</button>
                </li>
            </ul>
        </div>
        <div ng-repeat="(key,value) in orderedGroupedMacros">
            <div sd-toggle-box data-title="{{:: key | translate }}"
                ng-click="setGroupStatus(key)" data-open="{{getGroupStatus(key)}}">
                <ul class="link-list" sd-loading="loading">
                    <li ng-repeat="macro in value">
                        <button class="btn btn--hollow" ng-click="call(macro)" translate>{{ macro.label }}</button>
                    </li>
                </ul>
            </div>
        </div>
        <div sd-toggle-box data-title="{{:: 'miscellaneous' | translate }}"
            ng-click="setGroupStatus('miscellaneous')" data-open="{{getGroupStatus('miscellaneous')}}">
            <ul class="link-list" sd-loading="loading">
                <li ng-repeat="macro in miscMacros | orderBy:'label'">
                    <button class="btn btn--hollow" ng-click="call(macro)" translate>{{ macro.label }}</button>
                </li>
            </ul>
        </div>
    </div>
</div>