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

<div class="work-packages--details loading-indicator--location"
      data-indicator-name="wpDetails"
      ng-if="$ctrl.workPackage">
    <div id="tabs">
      <ul class="tabrow">
        <!-- The hrefs with empty URLs are necessary for IE10 to focus these links
        properly. Thus, don't remove the hrefs or the empty URLs! -->
        <li ui-sref="work-packages.list.details.overview({})"
            ui-sref-active="selected">
          <a href="" ng-bind="::$ctrl.text.tabs.overview"/>
        </li>
        <li ui-sref="work-packages.list.details.activity({})"
            ui-sref-active="selected">
          <a href="" ng-bind="::$ctrl.text.tabs.activity"/>
        </li>
        <li ui-sref="work-packages.list.details.relations({})"
            ui-sref-active="selected">
          <a href="" ng-bind="::$ctrl.text.tabs.relations"/>
          <wp-relations-count wp-id="::$ctrl.workPackage.id"></wp-relations-count>
        </li>
        <li ng-if="$ctrl.canViewWorkPackageWatchers()"
            ui-sref="work-packages.list.details.watchers({})"
            ui-sref-active="selected">
          <a href="" ng-bind="::$ctrl.text.tabs.watchers"/>
        </li>
        <li class="tab-icon">
          <accessible-by-keyboard execute="$ctrl.switchToFullscreen()"
                                  link-aria-label="{{ ::$ctrl.text.goTofullScreen }}"
                                  link-title="{{ ::$ctrl.text.goTofullScreen }}"
                                  link-class="work-packages--details-fullscreen-icon"
                                  span-class="icon-context icon-to-fullscreen">
          </accessible-by-keyboard>
        </li>
        <li class="tab-icon">
          <accessible-by-keyboard execute="$ctrl.close()"
                                  link-aria-label="{{ ::$ctrl.text.closeDetailsView }}"
                                  link-title="{{ ::$ctrl.text.closeDetailsView }}"
                                  link-class="work-packages--details-close-icon"
                                  span-class="icon-context icon-close">
          </accessible-by-keyboard>
        </li>
      </ul>
    </div>
    <div class="work-packages--details-content">
      <span class="hidden-for-sighted" tabindex="-1" focus="$ctrl.shouldFocus" ng-bind="$ctrl.focusAnchorLabel">
      </span>

      <wp-breadcrumb work-package="$ctrl.workPackage"></wp-breadcrumb>

      <wp-edit-field-group work-package="$ctrl.workPackage">
        <wp-subject></wp-subject>
        <div class="work-package-details-tab" ui-view></div>
      </wp-edit-field-group>
    </div>

    <div class="work-packages--details-toolbar-container" ng-if="$ctrl.workPackage">
      <wp-details-toolbar work-package='$ctrl.workPackage'></wp-details-toolbar>
    </div>

    <div class="work-packages--details--resizer hidden-for-mobile">
      <wp-resizer></wp-resizer>
    </div>
</div