Move I18n references to the modal controller

frontend/app/components/modals/columns-modal/columns-modal.controller.js

@@ -35,13 +35,23 @@ function ColumnsModalController($scope, columnsModal, QueryService, WorkPackageS
 
   this.name    = 'Columns';
   this.closeMe = columnsModal.deactivate;
-  var vm;
-  $scope.vm = vm = {};
+  var vm = {};
+  $scope.vm = vm;
+
   vm.selectedColumns = [];
   vm.oldSelectedColumns = [];
   vm.availableColumns = [];
   vm.unusedColumns = [];
 
+  vm.text = {
+    closePopup: I18n.t('js.close_popup_title'),
+    columnsLabel: I18n.t('js.label_columns'),
+    selectedColumns: I18n.t('js.description_selected_columns'),
+    multiSelectLabel: I18n.t('js.work_packages.label_column_multiselect'),
+    applyButton: I18n.t('js.modals.button_apply'),
+    cancelButton: I18n.t('js.modals.button_cancel')
+  };
+
   var selectedColumns = QueryService.getSelectedColumns();
 
   // Available selectable Columns

frontend/app/components/modals/columns-modal/columns-modal.template.html

@@ -1,36 +1,45 @@
 <div class="ng-modal-window">
   <div class="ng-modal-inner">
-    <div class="modal-header"><i class="icon-close" ng-click="modal.closeMe()" title="{{ ::I18n.t('js.close_popup_title') }}"></i></div>
+    <div class="modal-header">
+      <i class="icon-close" ng-click="modal.closeMe()" title="{{ ::vm.text.closePopup }}"></i>
+    </div>
 
-    <h3>{{ ::I18n.t('js.label_columns') }}</h3>
+    <h3>{{ ::vm.text.columnsLabel }}</h3>
 
     <div cg-busy="vm.promise" class="columns-modal-content select2-modal-content">
-      <label for="selected_columns" class="hidden-for-sighted">{{ ::I18n.t('js.description_selected_columns') }}</label>
-      <ui-select multiple sortable="true" ng-model="vm.selectedColumns" theme="select2" id="selected_columns" focus-on="columnsModalOpened" aria-labelledby="column_multiselect_description">
-        <ui-select-match>
-          {{$item.title}}
-        </ui-select-match>
+      <label for="selected_columns" class="hidden-for-sighted">{{ ::vm.text.selectedColumns }}</label>
+
+      <ui-select multiple sortable="true" ng-model="vm.selectedColumns" theme="select2"
+                 id="selected_columns" focus-on="columnsModalOpened"
+                 aria-labelledby="column_multiselect_description">
+
+        <ui-select-match>{{ $item.title }}</ui-select-match>
+
         <ui-select-choices repeat="column in vm.unusedColumns | filter: { title: $select.search } | orderBy:'title'"
                            refresh="updateUnusedColumns($select.selected)" refresh-delay="0">
+
           <div ng-bind-html="column.title | highlight: $select.search"></div>
         </ui-select-choices>
       </ui-select>
-      <span class="tooltip--right -multiline" tabindex="0" title data-tooltip="{{ ::I18n.t('js.work_packages.label_column_multiselect') }}" aria-labelledby="column_multiselect_description">
+
+      <span class="tooltip--right -multiline" tabindex="0" title
+            data-tooltip="{{ ::vm.text.multiSelectLabel }}"
+            aria-labelledby="column_multiselect_description">
+
         <i class="icon icon-help1"></i>
       </span>
       <div class="hidden-for-sighted" id="column_multiselect_description">
-        {{ ::I18n.t('js.work_packages.label_column_multiselect') }}
+        {{ ::vm.text.multiSelectLabel }}
       </div>
     </div>
 
     <div>
       <button class="button -highlight" ng-click="updateSelectedColumns()">
-        {{ ::I18n.t('js.modals.button_apply') }}
+        {{ ::vm.text.applyButton }}
       </button>
       <button class="button" ng-click="modal.closeMe()">
-        {{ ::I18n.t('js.modals.button_cancel') }}
+        {{ ::vm.text.cancelButton }}
       </button>
     </div>
-
   </div>
 </div>