openproject/frontend/app/components/routing/views/work-packages.list.html

<div class="toolbar-container">
  <div toolbar class="toolbar">
    <selectable-title focus
                      selected-title="selectedTitle"
                      groups="groups"
                      transition-method="loadQuery">
    </selectable-title>

    <ul class="toolbar-items">
      <li class="toolbar-item">
        <wp-create-button project-identifier="projectIdentifier"
                          state-name="work-packages.list.new"></wp-create-button>
      </li>
      <li class="toolbar-item">
        <label for="work-packages-filter-toggle-button" class="hidden-for-sighted">
          {{ getToggleActionLabel(showFiltersOptions) + ' ' + I18n.t('js.button_filter') }}
        </label>
        <button id="work-packages-filter-toggle-button"
                ng-disabled="editAll.state"
                class="button"
                title="{{ getToggleActionLabel(showFiltersOptions) + ' ' + I18n.t('js.button_filter') }}"
                ng-click="toggleShowFilterOptions()"
                ng-class="{ '-active': showFiltersOptions }">
          <i class="icon-filter button--icon"></i>
          <span class="button--text" ng-bind="::I18n.t('js.toolbar.filter')"></span>
          <span class="badge -secondary">{{ getFilterCount() }}</span>
        </button>
      </li>
      <li class="toolbar-item show-for-small" feature-flag="detailsView">
        <ul id="work-packages-view-mode-selection" class="toolbar-button-group">
          <li>
            <wp-list-view-button project-identifier="projectIdentifier"></wp-list-view-button>
          </li>
          <li feature-flag="detailsView">
            <label for="work-packages-details-view-button"
                   ng-attr-accesskey="{{ isDetailsViewActive() ? undefined : '8' }}"
                   class="hidden-for-sighted">
              {{ getActivationActionLabel(!isDetailsViewActive()) + ' ' + I18n.t('js.button_details_view') }}
            </label>
            <button class="hide"
                    ng-click="openOverviewTab()"></button>
            <button id="work-packages-details-view-button"
                    class="button"
                    title="{{ getActivationActionLabel(!isDetailsViewActive()) + ' ' + I18n.t('js.button_details_view') }}"
                    ng-class="{ '-active': isDetailsViewActive() }"
                    ng-click="openLatestTab()">
              <i class="icon-view-split button--icon"></i>
              <span class="hidden-for-sighted">{{ getActivationActionLabel(!isDetailsViewActive()) + ' ' + I18n.t('js.button_details_view') }}</span>
            </button>
          </li>
          <li>
            <wp-view-button></wp-view-button>
          </li>
        </ul>
      </li>
      <li class="toolbar-item show-for-small">
        <label for="work-packages-settings-button" class="hidden-for-sighted">
          {{ I18n.t('js.button_settings') }}
        </label>
        <button id="work-packages-settings-button"
                ng-disabled="editAll.state"
                title="{{ I18n.t('js.button_settings') }}"
                class="button last work-packages-settings-button"
                has-dropdown-menu
                target="SettingsDropdownMenu"
                locals="query">
          <i class="button--icon icon-settings"></i>
          <i class="button--dropdown-indicator"></i>
        </button>
      </li>
    </ul>
  </div>
</div>

<div class="work-packages--filters-optional-container" ng-show="showFiltersOptions">
  <div query-form id="query_form_content" class="hide-when-print">
    <query-filters></query-filters>
  </div>
</div>

<back-url></back-url>

<div class="work-packages--split-view" cg-busy="loadingIndicator.config"
     ng-class="{'edit-all-mode': editAll.state}">
  <div class="work-packages--list">
    <div class="work-packages--list-table-area">
      <wp-table ng-if="rows && columns"
                           project-identifier="projectIdentifier"
                           columns="columns"
                           rows="rows"
                           query="query"
                           group-by="query.groupBy"
                           group-by-column="groupByColumn"
                           count-by-group="workPackageCountByGroup"
                           display-sums="query.displaySums"
                           total-sums="totalSums"
                           group-sums="groupSums"
                           activation-callback="showWorkPackageDetails(id, force)">
      </wp-table>
    </div>
    <div class="work-packages--list-pagination-area">
      <table-pagination total-entries="totalEntries">
      </table-pagination>
    </div>
  </div>
  <div class="work-packages--details" ui-view ng-show="workPackage"
    feature-flag="detailsView"></div>
</div>