openproject/frontend/app/components/work-packages/wp-single-view/wp-single-view.directive.html

<div ng-if="$ctrl.workPackage" class="work-package--single-view">
  <div class="wp-new--subject-wrapper" ng-if="$ctrl.workPackage.isNew">
    <wp-edit-field work-package-id="$ctrl.workPackage.id"
                   wrapper-classes="'-no-label'"
                   field-name="'subject'"></wp-edit-field>
  </div>

  <div class="wp-info-wrapper">
    <wp-status-button ng-if="!$ctrl.workPackage.isNew"
                      work-package="$ctrl.workPackage"
                      allowed="$ctrl.workPackage.isEditable"></wp-status-button>
    <attribute-help-text attribute="'status'" attribute-scope="WorkPackage" ng-if="!$ctrl.workPackage.isNew"></attribute-help-text>

    <div class="work-packages--info-row" ng-if="!$ctrl.workPackage.isNew">
      <span ng-bind="$ctrl.idLabel"/>:
      <span ng-bind="$ctrl.text.infoRow.createdBy"/>
      <user-link class="user-link" user="$ctrl.workPackage.author"></user-link>.
      <span ng-bind="$ctrl.text.infoRow.lastUpdatedOn"/>
      <op-date-time date-time-value="$ctrl.workPackage.updatedAt"></op-date-time>.
    </div>

    <wp-custom-actions [work-package]="$ctrl.workPackage" class="custom-actions"></wp-custom-actions>
  </div>

  <div class="attributes-group -project-context" ng-if="$ctrl.projectContext.field">
    <div class="attributes-group--header">
      <div class="attributes-group--header-container"></div>
    </div>
    <div class="">
      <p ng-hide="$ctrl.projectContext.href" ng-bind="::$ctrl.text.project.required"></p>
      <div class="attributes-key-value"
           ng-class="{'-span-all-columns': descriptor.spanAll }"
           ng-repeat="descriptor in $ctrl.projectContext.field track by descriptor.name">
        <div class="attributes-key-value--key"
             wp-replacement-label="descriptor.name">
          {{ descriptor.label }}
          <span class="required" ng-if="descriptor.field.required && descriptor.field.writable"> *</span>
          <attribute-help-text title-text="descriptor.label" attribute="descriptor.name" attribute-scope="WorkPackage"></attribute-help-text>
        </div>
        <div class="attributes-key-value--value-container">
          <wp-edit-field work-package-id="$ctrl.workPackage.id" field-name="descriptor.name"></wp-edit-field>
        </div>
      </div>
    </div>
  </div>

  <div class="attributes-group -project-context hide-when-print" ng-if="!$ctrl.workPackage.isNew && !$ctrl.projectContext.matches">
    <div>
      <p>
        <span ng-bind-html="$ctrl.projectContextText"></span>
        <br/>
        <a ng-href="{{ $ctrl.projectContext.href }}"
           class="project-context--switch-link"
           ng-bind="::$ctrl.text.project.switchTo">
        </a>
      </p>
    </div>
  </div>

  <div class="attributes-group description-group">
    <div class="attributes-group--header">
      <div class="attributes-group--header-container">
        <h3 class="attributes-group--header-text"
            ng-bind="$ctrl.text.fields.description"></h3>
      </div>
    </div>
    <div class="single-attribute wiki work-packages--details--description">
      <wp-edit-field field-name="'description'"
                     work-package-id="$ctrl.workPackage.id"
                     wrapper-classes="'-no-label'"
                     display-placeholder="$ctrl.I18n.t('js.work_packages.placeholders.description')"
                     wp-attachments-formattable>
      </wp-edit-field>
    </div>
  </div>

  <div ng-repeat="group in $ctrl.groupedFields track by group.name"
       ng-hide="$ctrl.shouldHideGroup(group)"
       data-group-name="{{ group.name }}"
       class="attributes-group">

    <div class="attributes-group--header">
      <div class="attributes-group--header-container">
        <h3 class="attributes-group--header-text"
            ng-bind="group.name"></h3>
      </div>
    </div>

    <div class="-columns-2">
      <div class="attributes-key-value"
           ng-class="{'-span-all-columns': descriptor.spanAll }"
           ng-repeat="descriptor in group.members track by descriptor.name"
           ng-if="!$ctrl.shouldHideField(descriptor)">
        <div
            class="attributes-key-value--key"
            ng-if="!descriptor.multiple"
            wp-replacement-label="descriptor.name">

          {{ descriptor.label }}
          <span class="required" ng-if="descriptor.field.required && descriptor.field.writable"> *</span>
          <attribute-help-text attribute="descriptor.name" attribute-scope="WorkPackage"></attribute-help-text>
        </div>
        <div ng-if="!descriptor.multiple"
             class="attributes-key-value--value-container">

          <wp-edit-field ng-if="descriptor.field.isFormattable"
                         class="wp-edit-formattable-field"
                         work-package-id="$ctrl.workPackage.id"
                         field-name="descriptor.name"
                         wp-attachments-formattable>
          </wp-edit-field>
          <wp-edit-field ng-if="!descriptor.field.isFormattable"
                         work-package-id="$ctrl.workPackage.id"
                         field-name="descriptor.name">
          </wp-edit-field>
        </div>
        <div
            class="attributes-key-value--key"
            ng-if="descriptor.multiple"
            wp-replacement-label="descriptor.label">
          {{ descriptor.label }}
          <attribute-help-text attribute="descriptor.name" attribute-scope="WorkPackage"></attribute-help-text>
        </div>
        <div
            ng-if="descriptor.multiple"
            class="attributes-key-value--value-container -minimal">
          <wp-edit-field field-name="descriptor.fields[0].name"
                         work-package-id="$ctrl.workPackage.id"
                         wrapper-classes="'-small -shrink'"
                         display-placeholder="::$ctrl.text[descriptor.name][descriptor.fields[0].name]">
          </wp-edit-field>

          <span class="attributes-key-value--value-separator"></span>

          <wp-edit-field field-name="descriptor.fields[1].name"
                         work-package-id="$ctrl.workPackage.id"
                         wrapper-classes="'-small -shrink'"
                         display-placeholder="::$ctrl.text[descriptor.name][descriptor.fields[1].name]">
          </wp-edit-field>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="work-packages--attachments attributes-group">
  <div class="work-packages--atachments-container">
    <div class="attributes-group--header"
         ng-if="$ctrl.workPackage.attachments.elements.length">
      <div class="attributes-group--header-container">
        <h3 class="attributes-group--header-text">
          {{ ::$ctrl.I18n.t('js.label_attachments') }}
        </h3>
      </div>
    </div>

    <wp-attachment-list work-package="$ctrl.workPackage"></wp-attachment-list>
    <wp-attachments-upload work-package="$ctrl.workPackage" class="hide-when-print">
      <div class="work-package--attachments--drop-box">
        <div class="work-package--attachments--label">
          <op-icon icon-classes="icon-attachment"></op-icon>
          <p>
            {{ ::$ctrl.text.dropFiles }} <br>
            {{ ::$ctrl.text.dropFilesHint }}
          </p>
        </div>
      </div>
    </wp-attachments-upload>
  </div>
</div>