OpenProject is the leading open source project management software.
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
openproject/frontend/app/components/wp-relations/wp-relation-row/wp-relation-row.template.html

92 lines
5.0 KiB

<div class="relation-row"
ng-class="['relation-row-{{ $ctrl.relatedWorkPackage.id }}']"
ng-mouseover="$ctrl.userInputs.showRelationControls = true"
ng-mouseleave="$ctrl.userInputs.showRelationControls = false">
<div class="grid-block hierarchy-item">
<div class="grid-content medium-3 collapse" aria-hidden="true">
<span class="relation-row--type"
ng-click="$ctrl.userInputs.showRelationTypesForm = true"
ng-if="!$ctrl.userInputs.showRelationTypesForm">
<span ng-if="$ctrl.groupByWorkPackageType"
ng-bind="$ctrl.normalizedRelationType"></span>
<span ng-if="!$ctrl.groupByWorkPackageType"
ng-bind="$ctrl.relatedWorkPackage.type.name"></span>
</span>
<div class="wp-edit-field inplace-edit" ng-if="$ctrl.userInputs.showRelationTypesForm">
<select class="wp-inline-edit--field form--select"
ng-model="$ctrl.selectedRelationType"
ng-options="relationType.name for relationType in $ctrl.availableRelationTypes"
ng-change="$ctrl.saveRelationType()"></select>
</div>
</div>
<div class="grid-content medium-5 collapse" wp-single-relation
ng-if="$ctrl.relatedWorkPackage">
<a ui-sref=".({ workPackageId: $ctrl.relatedWorkPackage.id})"
class="wp-relations--subject-field"
aria-label="{{ $ctrl.normalizedRelationType + ' ' + singleRelationCtrl.getFullIdentifier($ctrl.relatedWorkPackage, true) }}">
{{ singleRelationCtrl.getFullIdentifier($ctrl.relatedWorkPackage, true) }}
</a>
</div>
<div class="grid-content medium-2 collapse wp-relations-status-field">
<div wp-edit-form="$ctrl.relatedWorkPackage" ng-if="$ctrl.relatedWorkPackage">
<div wp-edit-field="'status'"></div>
</div>
</div>
<div class="grid-content medium-2 collapse wp-relations-controls-section"
ng-class="{ '-visible': $ctrl.userInputs.showRelationControls, '-expanded': $ctrl.userInputs.showRelationInfo }">
<accessible-by-keyboard ng-show="$ctrl.showDescriptionInfo"
aria-label="{{ ::$ctrl.text.description_label }}"
link-title="{{ ::$ctrl.text.description_label }}"
8 years ago
link-class="wp-relations--description-btn"
execute="$ctrl.userInputs.showRelationInfo = !$ctrl.userInputs.showRelationInfo">
<icon-wrapper icon-name="info1"
css-class="wp-relations--icon wp-relations--description-icon"
icon-title="Info for related workpackage">
</icon-wrapper>
</accessible-by-keyboard>
<accessible-by-keyboard ng-if="$ctrl.relation.delete"
execute="$ctrl.removeRelation($ctrl.relation)"
aria-hidden="false"
aria-label="{{ ::$ctrl.text.remove }}"
link-title="{{ ::$ctrl.text.remove }}"
link-class="relation-row--remove-btn"
class="-shown-in-accessibility-mode">
<icon-wrapper icon-name="remove"
css-class="wp-relations--icon"
icon-title="{{ ::$ctrl.text.removeButton }}">
</icon-wrapper>
</accessible-by-keyboard>
</div>
</div>
<div class="grid-block hierarchy-item description-container" ng-show="$ctrl.userInputs.showRelationInfo" ng-init="editDescription = false">
<div class="wp-relation--description-read-value"
ng-class="{'-placeholder': !$ctrl.relation.description }"
ng-click="$ctrl.startDescriptionEdit()"
ng-hide="$ctrl.userInputs.showDescriptionEditForm"
ng-bind="$ctrl.relation.description || $ctrl.text.placeholder.description">
</div>
<div class="wp-relation--description-wrapper textarea-wrapper"
ng-show="$ctrl.userInputs.showDescriptionEditForm">
<textarea
msd-elastic="\n"
autofocus
class="wp-relation--description-textarea"
name="description"
ng-keyup="$ctrl.handleDescriptionKey($event)"
ng-model="$ctrl.userInputs.newRelationText"></textarea>
<wp-edit-field-controls field-controller="$ctrl.fieldController"
on-save="$ctrl.saveDescription()"
on-cancel="$ctrl.cancelDescriptionEdit()"
save-title="{{ vm.field.text.save }}"
cancel-title="{{ vm.field.text.cancel }}">
</wp-edit-field-controls>
</div>
</div>
</div>