Tiny improvements as requested in review.

config/locales/js-en.yml

@@ -630,6 +630,7 @@ en:
         text_select_hint: "Select boxes should be opened with 'ALT' and arrow keys."
       table_configuration:
         button: 'Configure this work package table'
+        choose_display_mode: 'Display work packages as'
         modal_title: 'Work package table configuration'
         embedded_tab_disabled: "This configuration tab is not available for the embedded view you're editing."
         default: "default"

frontend/src/app/components/wp-table/configuration-modal/tabs/display-settings-tab.component.html

@@ -1,6 +1,6 @@
 <div>
   <form>
-    <p>Display work packages as</p>
+    <p [textContent]="text.choose_mode"></p>
     <div class="form--field -full-width">
       <div class="form--field-container">
         <label class="option-label">
@@ -8,8 +8,7 @@
                  [(ngModel)]="displayMode"
                  value="default"
                  name="display_mode_switch">
-          <op-icon icon-classes="icon-no-hierarchy"
-                   icon-title="{{ text.display_mode.default }}"></op-icon>
+          <op-icon icon-classes="icon-no-hierarchy" [attr.icon-title]="text.display_mode.default"></op-icon>
           {{ text.display_mode.default }}
           <span class="form--inline-instructions" [textContent]="text.default"></span>
         </label>
@@ -22,8 +21,7 @@
                  [(ngModel)]="displayMode"
                  value="hierarchy"
                  name="display_mode_switch">
-          <op-icon icon-classes="icon-hierarchy"
-                   icon-title="{{ text.display_mode.hierarchy }}"></op-icon>
+          <op-icon icon-classes="icon-hierarchy" [attr.icon-title]="text.display_mode.hierarchy"></op-icon>
           {{ text.display_mode.hierarchy }}
           <span *ngIf="displayMode === 'hierarchy'"
                 class="form--inline-instructions"
@@ -38,8 +36,7 @@
                  [(ngModel)]="displayMode"
                  value="grouped"
                  name="display_mode_switch">
-          <op-icon icon-classes="icon-group-by"
-                   icon-title="{{ text.label_group_by }}"></op-icon>
+          <op-icon icon-classes="icon-group-by" [attr.icon-title]="text.label_group_by"></op-icon>
           {{ text.label_group_by }}
           <select *ngIf="displayMode === 'grouped'"
                   (change)="updateGroup($event.target.value)"

frontend/src/app/components/wp-table/configuration-modal/tabs/display-settings-tab.component.ts

@@ -22,13 +22,14 @@ export class WpTableConfigurationDisplaySettingsTab implements TabComponent {
   public displaySums:boolean = false;
 
   public text = {
+    choose_mode: this.I18n.t('js.work_packages.table_configuration.choose_display_mode'),
     label_group_by: this.I18n.t('js.label_group_by'),
     title: this.I18n.t('js.label_group_by'),
     placeholder: this.I18n.t('js.placeholders.default'),
     please_select: this.I18n.t('js.placeholders.selection'),
     default: '— ' + this.I18n.t('js.work_packages.table_configuration.default'),
     display_sums: this.I18n.t('js.work_packages.query.display_sums'),
-    display_sums_hint: '- ' + this.I18n.t('js.work_packages.table_configuration.display_sums_hint'),
+    display_sums_hint: '— ' + this.I18n.t('js.work_packages.table_configuration.display_sums_hint'),
     display_mode: {
       default: this.I18n.t('js.work_packages.table_configuration.default_mode'),
       grouped: this.I18n.t('js.work_packages.table_configuration.grouped_mode'),