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

<div class="work-packages--show-view" ng-class="{'edit-all-mode': editAll.state}">
  <div class="toolbar-container">
    <div wp-toolbar id="toolbar">
      <ul id="toolbar-items" class="toolbar-items">
        <li class="toolbar-item">
          <wp-create-button project-identifier="projectIdentifier"
                            ng-hide="editAll.state"
                            state-name="work-packages.new"></wp-create-button>
        </li>
        <li class="toolbar-item">
          <button class="button edit-all-button"
                  ng-hide="editAll.state"
                  ng-click="editAll.start()"
                  ng-disabled="!canEdit"
                  title="{{I18n.t('js.button_edit')}}">
            <i class="button--icon icon-edit"></i>
          </button>
        </li>
        <li class="toolbar-item" ng-if="displayWatchButton">
          <wp-watcher-button work-package="workPackage" disabled="editAll.state"></wp-watcher-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 edit-all="editAll"
                                 project-identifier="projectIdentifier"></wp-list-view-button>
            </li>
            <li>
              <wp-details-view-button project-identifier="projectIdentifier"></wp-details-view-button>
            </li>
            <li>
              <wp-view-button work-package-id="preselectedWorkPackageId"></wp-view-button>
            </li>
          </ul>
        </li>
        <li class="toolbar-item action_menu_main" id="action-show-more-dropdown-menu">
          <button class="button dropdown-relative"
                  ng-disabled="!actionsAvailable || editAll.state"
                  has-dropdown-menu
                  target="ShowMoreDropdownMenu"
                  locals="permittedActions,actionsAvailable,triggerMoreMenuAction"
                  title="{{I18n.t('js.button_more')}}">
            <i class="button--icon icon-show-more"></i>
          </button>
        </li>
      </ul>
      <ul class="subject-header">
        <li class="subject-header-inner">
          <div class="inline-edit">
            <wp-field field-name="'subject'"></wp-field>
          </div>
        </li>
      </ul>
    </div>
  </div>

  <back-url></back-url>

  <div class="work-packages--split-view">
    <div class="work-packages--left-panel">
      <div class="work-packages--panel-inner">
        <wp-single-view></wp-single-view>
        <edit-actions-bar></edit-actions-bar>
      </div>
    </div>
    <div class="work-packages--right-panel">
      <div class="work-packages--panel-inner">
        <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.show.activity({})"
                ui-sref-active="selected">
              <a href="" ng-bind="I18n.t('js.work_packages.tabs.activity')"/>
            </li>
            <li ui-sref="work-packages.show.relations({})"
                ui-sref-active="selected">
              <a href="" ng-bind="I18n.t('js.work_packages.tabs.relations')"/>
            </li>
            <li ng-if="canViewWorkPackageWatchers()"
                ui-sref="work-packages.show.watchers({})"
                ui-sref-active="selected">
              <a href="" ng-bind="I18n.t('js.work_packages.tabs.watchers')"/>
            </li>
          </ul>
        </div>
        <div class="tabcontent" ui-view>
        </div>
      </div>
    </div>
  </div>
</div>