openproject/frontend/app/components/routing/wp-list/wp.list.html

<div class="toolbar-container">
  <div wp-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
            allowed="!!resource.$links.createWorkPackage"
            project-identifier="projectIdentifier"
            state-name="work-packages.list.new">
        </wp-create-button>
      </li>
      <li class="toolbar-item hidden-for-mobile">
        <wp-filter-button
            filters="query.filters"
            ng-disabled="wpEditModeState.active">
        </wp-filter-button>
      </li>
      <li class="toolbar-item hidden-for-mobile">
        <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>
            <wp-details-view-button
                next-wp-func="nextAvailableWorkPackage">
            </wp-details-view-button>
          </li>
          <li>
            <wp-view-button
                next-wp-func="nextAvailableWorkPackage">
            </wp-view-button>
          </li>
        </ul>
      </li>
      <li class="toolbar-item hidden-for-mobile">
        <button id="work-packages-settings-button"
                ng-disabled="wpEditModeState.active"
                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-show-more"></i>
        </button>
      </li>
    </ul>
  </div>
</div>

<filter-container></filter-container>

<back-url></back-url>

<div class="work-packages--split-view"
     ng-class="{'edit-all-mode': wpEditModeState.active}">

  <accessible-by-keyboard
      link-class="hidden-for-sighted skip-navigation-link"
      aria-label="{{ ::text.text_jump_to_pagination }}"
      execute="setAnchorToNextElement()">
    <span ng-bind="::text.jump_to_pagination"></span>
  </accessible-by-keyboard>

  <div class="work-packages--list"
       cg-busy="{promise: loadingIndicator.mainPage, message: I18n.t('js.label_please_wait')}">

    <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-headers="groupHeaders"
                display-sums="query.displaySums"
                resource="resource"
                activation-callback="openWorkPackageInFullView(id, force)">
      </wp-table>
    </div>

    <div class="work-packages--list-pagination-area">
      <table-pagination total-entries="totalEntries">
      </table-pagination>
    </div>

  </div>
  <div class="work-package--details-container" ui-view></div>
</div>