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

<div ng-if="$ctrl.workPackage && $ctrl.formCtrl" class="work-package--single-view">
  <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>

  <div class="attributes-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
        wp-edit-field="'description'"
        wp-attachments-formattable
        wp-edit-field-wrapper-classes="'-no-label'"
        display-placeholder="$ctrl.I18n.t('js.work_packages.placeholders.description')"
        class="single-attribute wiki work-packages--details--description">
    </div>
  </div>

  <div ng-repeat="group in $ctrl.groupedFields" ng-hide="$ctrl.shouldHideGroup(group.groupName)"
       class="attributes-group">

    <div class="attributes-group--header">
      <div class="attributes-group--header-container">
        <h3 class="attributes-group--header-text"
            ng-bind="$ctrl.I18n.t('js.work_packages.property_groups.' + group.groupName)"></h3>
      </div>
      <div class="attributes-group--header-toggle">
        <panel-expander tabindex="-1" ng-if="$first"
                        collapsed="$ctrl.hideEmptyFields"
                        expand-text="{{ $ctrl.I18n.t('js.label_show_attributes') }}"
                        collapse-text="{{ $ctrl.I18n.t('js.label_hide_attributes') }}">
        </panel-expander>
      </div>
    </div>

    <div class="-columns-2">
      <div
          class="attributes-key-value"
          ng-repeat="field in group.attributes">
        <div
            class="attributes-key-value--key"
            ng-hide="$ctrl.shouldHideField(field)"
            ng-if="$ctrl.singleViewWp.isSingleField(field) && $ctrl.singleViewWp.isSpecified(field)"
            wp-replacement-label="field">

          {{$ctrl.singleViewWp.getLabel(field)}}

          <span class="required" ng-if="$ctrl.singleViewWp.hasNiceStar(field)"> *</span>
        </div>
        <div
            ng-hide="$ctrl.shouldHideField(field)"
            ng-if="$ctrl.singleViewWp.isSingleField(field) && $ctrl.singleViewWp.isSpecified(field)"
            wp-edit-field="field"
            wp-edit-field-label="$ctrl.singleViewWp.getLabel(field)"
            wp-edit-field-wrapper-classes="'-small'"
            class="attributes-key-value--value-container">
        </div>

        <div
            class="attributes-key-value--key"
            ng-hide="$ctrl.shouldHideField(field.fields[0]) &&
                     $ctrl.shouldHideField(field.fields[1])"
            ng-if="!$ctrl.singleViewWp.isSingleField(field) &&
                   $ctrl.singleViewWp.isSpecified(field.fields[0]) &&
                   $ctrl.singleViewWp.isSpecified(field.fields[1]) "
            wp-replacement-label="field.label">

          {{$ctrl.singleViewWp.getLabel(field.label)}}

          <span class="required" ng-if="$ctrl.singleViewWp.hasNiceStar(field.label)"> *</span>
        </div>
        <div
            ng-hide="$ctrl.shouldHideField(field.fields[0]) &&
                     $ctrl.shouldHideField(field.fields[1])"
            ng-if="!$ctrl.singleViewWp.isSingleField(field) &&
                   $ctrl.singleViewWp.isSpecified(field.fields[0]) &&
                   $ctrl.singleViewWp.isSpecified(field.fields[1]) "
            class="attributes-key-value--value-container -minimal">

          <div
              wp-edit-field="field.fields[0]"
              wp-edit-field-label="$ctrl.singleViewWp.getLabel(field.fields[0])"
              wp-edit-field-wrapper-classes="'-small -shrink'"
              display-placeholder="::$ctrl.text.fields[field.label][field.fields[0]]">
          </div>

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

          <div
              wp-edit-field="field.fields[1]"
              wp-edit-field-label="$ctrl.singleViewWp.getLabel(field.fields[1])"
              wp-edit-field-wrapper-classes="'-small -shrink'"
              display-placeholder="::$ctrl.text.fields[field.label][field.fields[1]]">
          </div>
        </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">
      <div class="work-package--attachments--drop-box">
        <div class="work-package--attachments--label">
          <i class="icon-attachment"></i>
          <p>
            {{ ::$ctrl.text.dropFiles }} <br>
            {{ ::$ctrl.text.dropFilesHint }}
          </p>
        </div>
      </div>
    </wp-attachments-upload>
  </div>
</div>