[28316] Add some padding between action icons in relations tab

https://community.openproject.com/wp/28316

[ci skip]

app/assets/stylesheets/fonts/_openproject_icon_font.sass

@@ -199,6 +199,9 @@
 .no-icon
   margin-left: 15px
 
+[class^=icon].-padded
+  padding: 0 5px
+
 // used for icons in the content area, which appear in context (menus)
 .action-menu .icon:before,
 .icon-context:before

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

@@ -54,7 +54,7 @@
                               linkClass="wp-relations--description-btn"
                               [ngClass]="{'-visible': showDescriptionInfo }"
                               (execute)="userInputs.showRelationInfo = !userInputs.showRelationInfo">
-        <op-icon icon-classes="icon-info1 wp-relations--icon wp-relations--description-icon"
+        <op-icon icon-classes="icon-info1 -padded wp-relations--icon wp-relations--description-icon"
                  icon-title="text.toggleDescription"></op-icon>
       </accessible-by-keyboard>
       <accessible-by-keyboard *ngIf="relation.delete"
@@ -63,7 +63,7 @@
                               [linkAriaLabel]="text.removeButton"
                               [linkTitle]="text.removeButton"
                               linkClass="relation-row--remove-btn">
-        <op-icon icon-classes="icon-remove wp-relations--icon" [icon-title]="text.removeButton"></op-icon>
+        <op-icon icon-classes="icon-remove -padded wp-relations--icon" [icon-title]="text.removeButton"></op-icon>
       </accessible-by-keyboard>
     </div>
   </div>

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

@@ -46,13 +46,13 @@
             [isDisabled]="isDisabled || !selectedWpId"
             linkClass="wp-create-relation--save"
             aria-hidden="false">
-          <op-icon icon-classes="icon-checkmark" [icon-title]="text.save"></op-icon>
+          <op-icon icon-classes="icon-checkmark -padded" [icon-title]="text.save"></op-icon>
         </accessible-by-keyboard>
         <accessible-by-keyboard
             (execute)="toggleRelationsCreateForm()"
             linkClass="wp-create-relation--cancel"
             aria-hidden="false">
-          <op-icon icon-classes="icon-remove" [icon-title]="text.abort"></op-icon>
+          <op-icon icon-classes="icon-remove -padded" [icon-title]="text.abort"></op-icon>
         </accessible-by-keyboard>
       </div>
     </div>

frontend/src/app/components/wp-relations/wp-relations-parent/wp-relations-parent.html

@@ -27,13 +27,13 @@
           <accessible-by-keyboard *ngIf="canModifyHierarchy"
                                   (execute)="showEditForm = true"
                                   linkClass="wp-relation--edit">
-              <op-icon icon-classes="icon-edit" [icon-title]="text.change_parent"></op-icon>
+              <op-icon icon-classes="icon-edit -padded" [icon-title]="text.change_parent"></op-icon>
           </accessible-by-keyboard>
 
           <accessible-by-keyboard *ngIf="canModifyHierarchy"
                                   (execute)="removeParent()"
                                   linkClass="wp-relation--remove">
-              <op-icon icon-classes="icon-remove"
+              <op-icon icon-classes="icon-remove -padded"
                        [icon-title]="text.remove_parent"></op-icon>
           </accessible-by-keyboard>
         </div>
@@ -72,13 +72,13 @@
               [isDisabled]="!selectedWpId || isSaving"
               (execute)="changeParent()"
               aria-hidden="false">
-              <op-icon icon-classes="icon-checkmark" [icon-title]="text.save"></op-icon>
+              <op-icon icon-classes="icon-checkmark -padded" [icon-title]="text.save"></op-icon>
             </accessible-by-keyboard>
             <accessible-by-keyboard
               linkClass="wp-create-relation--cancel"
               (execute)="showEditForm = false"
               aria-hidden="false">
-              <op-icon icon-classes="icon-remove" [icon-title]="text.abort"></op-icon>
+              <op-icon icon-classes="icon-remove -padded" [icon-title]="text.abort"></op-icon>
             </accessible-by-keyboard>
           </div>
         </div>