openproject/frontend/app/templates/work_packages/modals/columns.html

<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>

    <h3>{{ ::I18n.t('js.label_columns') }}</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>
        <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">
        <i class="icon icon-help1"></i>
      </span>
      <div class="hidden-for-sighted" id="column_multiselect_description">
        {{ ::I18n.t('js.work_packages.label_column_multiselect') }}
      </div>
    </div>

    <div>
      <button class="button -highlight" ng-click="updateSelectedColumns()">
        {{ ::I18n.t('js.modals.button_apply') }}
      </button>
      <button class="button" ng-click="modal.closeMe()">
        {{ ::I18n.t('js.modals.button_cancel') }}
      </button>
    </div>

  </div>
</div>