merge HDinger-relations-tab stylings

app/assets/stylesheets/_work_packages_show_view_overwrite.scss

@@ -28,8 +28,18 @@
 
 body.controller-work_packages.action-show {
   overflow-x: auto;
+
+  #content {
+    padding-left: 15px;
+
+    .work-packages--split-view {
+      margin-left: -5px;
+      width: calc(100% + 5px);
+    }
+  }
 }
 
+
 .work-packages--show-view {
   display: flex;
   flex-direction: column;
@@ -116,7 +126,7 @@ body.controller-work_packages.action-show {
     padding-left: 0.375rem;
 
     .work-packages--panel-inner {
-      padding: 5px 20px 20px 0px;
+      padding: 5px 15px 20px 0px;
 
       // These styles were taken over from the details tab styling.
       // Thus the header and the details tab can be aligned on the same line.
@@ -147,7 +157,7 @@ body.controller-work_packages.action-show {
     width: 40%;
 
     .work-packages--panel-inner {
-      padding: 2px 20px 20px 20px;
+      padding: 2px 15px 20px 15px;
     }
   }
 

app/assets/stylesheets/content/_attributes_group.sass

@@ -31,7 +31,7 @@
 
 .attributes-group--header
   @include grid-block
-  margin:  0 0 1rem 0
+  margin:  0 0 0.5rem 0
   border-bottom: 1px solid #eee
   align-items: flex-end
 

app/assets/stylesheets/content/work_packages/tabs/_relations.sass

@@ -60,8 +60,6 @@
   .description-section
     border: 1px dotted lightblue
     padding: 4px
-.relation-create
-  font-size: 0.8em
 
 .wp-relations-hierarchy-section
   margin-top: 35px
@@ -78,10 +76,14 @@
     position: absolute
     right: 0
 
+  a:hover
+    text-decoration: none
+
 .wp-relations-create
   margin-top: 1.5em
 
 .wp-relations-create-button
+  margin: 0.25rem 0
   .-create-button-full-width
     margin-top: 1.5em
     width: 100%

app/assets/stylesheets/layout/_work_package.sass

@@ -163,7 +163,7 @@
   bottom:     55px
   width:      100%
   +allow-vertical-scrolling
-  padding:    0 25px 0 25px
+  padding:    0 20px 0 20px
   &.-create-mode
     top: 0
     h2

config/locales/js-en.yml

@@ -277,9 +277,9 @@ en:
     relation_buttons:
       change_parent: "Change parent"
       remove_parent: "Remove parent"
-      add_parent: "Add existing parent work package"
+      add_parent: "Add existing parent"
-      add_new_child: "Create new child work package"
+      add_new_child: "Create new child"
-      add_existing_child: "Add existing child work package"
+      add_existing_child: "Add existing child"
       remove_child: "Remove child work package"
       add_new_relation: "Create new relation"
       remove: "Remove relation"

frontend/app/components/wp-relations/wp-relation-row/wp-relation-row.template.html

@@ -7,7 +7,7 @@
             {{ $ctrl.relationType }}
         </div>
 
-        <div class="grid-content medium-4 collapse" wp-single-relation
+        <div class="grid-content medium-5 collapse" wp-single-relation
              ng-if="$ctrl.relatedWorkPackage">
             <a href="{{ singleRelationCtrl.workPackagePath($ctrl.relatedWorkPackage.id) }}"
                title="{{ singleRelationCtrl.getFullIdentifier($ctrl.relatedWorkPackage, true) }}">
@@ -21,7 +21,7 @@
             </div>
         </div>
 
-        <div class="grid-content medium-2 collapse wp-relations-controls-section">
+        <div class="grid-content medium-1 collapse wp-relations-controls-section">
             <accessible-by-keyboard ng-show="$ctrl.showRelationControls"
                                     ng-if="$ctrl.relation.remove"
                     execute="$ctrl.removeRelation($ctrl.relation)">

frontend/app/components/wp-relations/wp-relations-create/dynamic-relation-types.template.html

@@ -2,7 +2,7 @@
     <div class="wp-inline-create-button wp-relations-create-button"
          ng-if="!$ctrl.showRelationsCreateForm">
         <div class="grid-block">
-            <div class="grid-content collapse">
+            <div class="grid-content collapse wp-inline-create-button">
                 <a class="wp-inline-create--add-link relation-create"
                    ng-click="$ctrl.toggleRelationsCreateForm()">
                     <i class="icon icon-add"></i>

frontend/app/components/wp-relations/wp-relations-create/empty-parents.template.html

@@ -2,7 +2,7 @@
     <div class="wp-inline-create-button wp-relations-create-button -full-width"
          ng-if="!$ctrl.showRelationsCreateForm">
         <div class="grid-block">
-            <div class="grid-content collapse">
+            <div class="grid-content collapse wp-inline-create-button">
                 <a class="wp-inline-create--add-link relation-create"
                    ng-click="$ctrl.toggleRelationsCreateForm()">
                     <i class="icon icon-add"></i>

frontend/app/components/wp-relations/wp-relations-hierarchy-row/wp-relations-hierarchy-row.directive.ts

@@ -37,6 +37,12 @@ class WpRelationsHierarchyRowDirectiveController {
     }
   }
 
+  public isCurrentElement() {
+    if (this.relationType !== 'child' && this.relationType !== 'parent') {
+      return true;
+    }
+  }
+
   protected removeChild() {
       this.wpRelationsHierarchyService.removeChild(this.relatedWorkPackage).then(exChildWp => {
         this.$scope.$emit('wp-relations.removedChild', exChildWp);

frontend/app/components/wp-relations/wp-relations-hierarchy-row/wp-relations-hierarchy-row.template.html

@@ -3,16 +3,21 @@
      ng-mouseleave="$ctrl.showRelationControls = false">
     <div class="grid-block v-align hierarchy-item"
          ng-if="!$ctrl.showEditForm && $ctrl.relatedWorkPackage">
-        <div class="grid-content medium-6 collapse" wp-single-relation>
+        <div class="grid-content medium-7 collapse" wp-single-relation>
             <span ng-style="{'padding-left': $ctrl.indentBy + 'px'}"
                   class="wp-relations-hierarchy-subject">
                 <a href="{{ singleRelationCtrl.workPackagePath($ctrl.relatedWorkPackage.id) }}"
-                   title="{{ singleRelationCtrl.getFullIdentifier($ctrl.relatedWorkPackage) }}">
+                   title="{{ singleRelationCtrl.getFullIdentifier($ctrl.relatedWorkPackage) }}"
+                   ng-if="!$ctrl.isCurrentElement()">
                     {{ singleRelationCtrl.getFullIdentifier($ctrl.relatedWorkPackage) }}
                 </a>
+                <span ng-if="$ctrl.isCurrentElement()"
+                      title="{{$singleRelation.getFullIdentifier($ctrl.relatedWorkPackage)}}">
+                        {{ singleRelationCtrl.getFullIdentifier($ctrl.relatedWorkPackage) }}
+                </span>
             </span>
         </div>
-        <div class="grid-content medium-4 collapse wp-relations-status-field">
+        <div class="grid-content medium-3 collapse wp-relations-status-field">
             <div wp-edit-form="$ctrl.relatedWorkPackage" ng-if="$ctrl.relatedWorkPackage">
                 <div wp-edit-field="'status'">
                 </div>

frontend/app/components/wp-relations/wp-relations-hierarchy/wp-relations-hierarchy.template.html

@@ -13,7 +13,8 @@
             relation-type="parent"></wp-relations-hierarchy-row>
     <wp-relations-hierarchy-row
             work-package="$ctrl.workPackage"
-            indent-by="20"></wp-relations-hierarchy-row>
+            indent-by="20"
+            ng-if="$ctrl.parent || $ctrl.children.length"></wp-relations-hierarchy-row>
     <wp-relations-hierarchy-row
             work-package="$ctrl.workPackage"
             related-work-package="relatedWorkPackage"