openproject/frontend/public/templates/work_packages.list.html

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

    <ul id="toolbar-items">
      <li class="toolbar-item">
        <button class="button_highlight"
                with-dropdown
                dropdown-id="tasksDropdown"
                ng-disabled="cannot('work_package', 'create')">
          <i class="icon-add icon4"></i>
          {{ I18n.t('js.toolbar.unselected_title') }}
          <i class="icon-pulldown-arrow1 icon-dropdown"></i>
        </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"
                class="button"
                title="{{ getToggleActionLabel(showFiltersOptions) + ' ' + I18n.t('js.button_filter') }}"
                ng-click="toggleShowFilterOptions()"
                ng-class="{active: showFiltersOptions}">
          <i class="icon-filter-big icon-buttons"></i>{{ I18n.t('js.toolbar.filter') }}
        </button>
      </li>
      <li class="toolbar-item" feature-flag="detailsView">
        <ul id="work-packages-view-mode-selection" class="toolbar-button-group">
          <li>
            <label for="work-packages-list-view-button" class="hidden-for-sighted">
              {{ getActivationActionLabel(isDetailsViewActive()) + ' ' + I18n.t('js.button_list_view') }}
            </label>
            <button id="work-packages-list-view-button"
                    class="button"
                    title="{{ getActivationActionLabel(isDetailsViewActive()) + ' ' + I18n.t('js.button_list_view') }}"
                    ng-click="closeDetailsView()"
                    ng-class="{ active: !isDetailsViewActive() }">
              <i class="icon-table-view icon-buttons"></i>
            </button>
          </li>
          <li feature-flag="detailsView">
            <label for="work-packages-details-view-button" class="hidden-for-sighted">
              {{ getActivationActionLabel(!isDetailsViewActive()) + ' ' + I18n.t('js.button_details_view') }}
            </label>
            <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-table-detail-view icon-buttons"></i>
            </button>
          </li>
        </ul>
      </li>
      <li class="toolbar-item">
        <label for="work-packages-settings-button" class="hidden-for-sighted">
          {{ I18n.t('js.button_settings') }}
        </label>
        <button id="work-packages-settings-button"
                title="{{ I18n.t('js.button_settings') }}"
                class="button last work-packages-settings-button"
                with-dropdown dropdown-id="settingsDropdown">
          <i class="icon-settings"></i>
          <i class="icon-pulldown-arrow1 icon-dropdown"></i>
        </button>
      </li>
    </ul>
  </div>
</div>

<div class="dropdown dropdown-relative dropdown-anchor-right" id="tasksDropdown">
  <ul class="dropdown-menu">
    <li ng-repeat="type in availableTypes">
      <a ng-href="{{ workPackageNewPath(type.id) }}">
        {{type.name}}
      </a>
    </li>
  </ul>
</div>

<div options-dropdown class="dropdown dropdown-relative dropdown-anchor-right" id="settingsDropdown">
  <!-- The hrefs with empty URLs are necessary for IE10 to focus these links
  properly. Thus, don't remove the hrefs or the empty URLs! -->
  <ul class="dropdown-menu">
    <li><a href="" ng-click="showColumnsModal()"><i class="icon-action-menu icon-columns"></i>{{ I18n.t('js.toolbar.settings.columns') }}</a></li>
    <li><a href="" ng-click="showSortingModal()"><i class="icon-action-menu icon-sort-by2"></i>{{ I18n.t('js.toolbar.settings.sort_by') }}</a></li>
    <li><a href="" ng-click="showGroupingModal()"><i class="icon-action-menu icon-group-by2"></i>{{ I18n.t('js.toolbar.settings.group_by') }}</a></li>
    <li>
      <a href="" ng-click="toggleDisplaySums()">
        <i ng-if="query.displaySums" class="icon-action-menu icon-yes"></i><i ng-if="!query.displaySums" class="icon-action-menu no-icon"></i>
        <accessible-element visible-text="I18n.t('js.toolbar.settings.display_sums')"
                            readable-text="displaySumsLabel">
        </accessible-element>
      </a>
    </li>
    <li class="dropdown-divider"></li>
    <li><a href="" ng-click="saveQuery($event)"
           inaccessible-by-tab="(!query.isDirty() && cannot('query', 'update')) || (query.isNew() && cannot('query', 'create'))"
           ng-class="{'inactive': (!query.isDirty() && cannot('query', 'update')) || (query.isNew() && cannot('query', 'create'))}">
        <i class="icon-action-menu icon-save1"></i>{{ I18n.t('js.toolbar.settings.save') }}</a>
    </li>
    <li><a href="" ng-click="showSaveAsModal($event)"
           inaccessible-by-tab="query.isNew() || cannot('query', 'create')"
           ng-class="{'inactive': query.isNew() || cannot('query', 'create')}">
      <i class="icon-action-menu icon-save1"></i>{{ I18n.t('js.toolbar.settings.save_as') }}</a>
    </li>
    <li><a href="" ng-click="deleteQuery($event)"
           inaccessible-by-tab="cannot('query', 'delete')"
           ng-class="{'inactive': cannot('query', 'delete')}">
      <i class="icon-action-menu icon-delete"></i>{{ I18n.t('js.toolbar.settings.delete') }}</a>
    </li>
    <li><a href="" ng-click="showExportModal($event)"
           inaccessible-by-tab="cannot('work_package', 'export')"
           ng-class="{'inactive': cannot('work_package', 'export')}">
      <i class="icon-action-menu icon-export"></i>{{ I18n.t('js.toolbar.settings.export') }}</a>
    </li>
    <li><a href="" ng-click="showShareModal($event)"
           inaccessible-by-tab="cannot('query', 'publicize') && cannot('query', 'star')"
           ng-class="{'inactive': (cannot('query', 'publicize') && cannot('query', 'star'))}">
      <i class="icon-action-menu icon-publish"></i>{{ I18n.t('js.toolbar.settings.share') }}</a>
    </li>
    <li><a href="" ng-click="showSettingsModal($event)"
           inaccessible-by-tab="cannot('query', 'update')"
           ng-class="{'inactive': cannot('query', 'update')}">
      <i class="icon-action-menu icon-settings"></i>{{ I18n.t('js.toolbar.settings.page_settings') }}</a>
    </li>
  </ul>
</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">
  <div class="work-packages--list" cg-busy="[settingUpPage,refreshWorkPackages]">
    <div class="work-packages--list-table-area">
      <work-packages-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)">
      </work-packages-table>
    </div>
    <div class="work-packages--list-pagination-area">
      <table-pagination total-entries="totalEntries">
      </table-pagination>
    </div>
    <modal-loading>
    </modal-loading>
  </div>
  <div class="work-packages--details" ui-view ng-show="workPackage"
    feature-flag="detailsView"></div>
</div>