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

<div class="work-packages-list-view--container">
  <div class="toolbar-container">
    <div class="toolbar">
      <selectable-title
          focus
          selected-title="selectedTitle">
      </selectable-title>

      <ul class="toolbar-items hide-when-print" ng-if="tableInformationLoaded">
        <li class="toolbar-item">
          <wp-create-button
              allowed="allowed('work_packages', 'createWorkPackage')"
              project-identifier="projectIdentifier"
              state-name="work-packages.list.new">
          </wp-create-button>
        </li>
        <li class="toolbar-item hidden-for-mobile">
          <wp-filter-button
              ng-disabled="wpEditModeState.active">
          </wp-filter-button>
        </li>
        <li class="toolbar-item hidden-for-mobile">
          <wp-details-view-button>
          </wp-details-view-button>
        </li>
        <li class="toolbar-item hidden-for-mobile">
          <wp-timeline-toggle-button>
          </wp-timeline-toggle-button>
        </li>
        <li class="toolbar-item hidden-for-mobile">
          <wp-zen-mode-toggle-button>
          </wp-zen-mode-toggle-button>
        </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">
            <op-icon icon-classes="button--icon icon-show-more"></op-icon>
          </button>
        </li>
      </ul>
    </div>
  </div>


  <filter-container></filter-container>

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

  <!-- (TABLE + TIMELINE) + DETAILS view -->
  <div class="work-packages-split-view"
       ng-class="{'edit-all-mode': wpEditModeState.active}">

    <!-- (TABLE + TIMELINE) and FOOTER vertical split-->
    <div class="work-packages-split-view--tabletimeline-side loading-indicator--location" data-indicator-name="table">

      <!-- TABLE + TIMELINE horizontal split -->
      <wp-table project-identifier="projectIdentifier" ng-if="tableInformationLoaded"></wp-table>

      <!-- Footer -->
      <div class="work-packages-split-view--tabletimeline-footer hide-when-print" ng-if="tableInformationLoaded">
        <table-pagination></table-pagination>
      </div>
    </div>

    <!-- Details view -->
    <div class="work-packages-split-view--details-side" ui-view></div>
  </div>
</div>