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

<div class="ng-modal-window columns-modal">
  <div class="ng-modal-inner">
    <div class="modal-header">
      <i class="icon-close" ng-click="vm.closeMe()" title="{{ ::vm.text.closePopup }}"></i>
    </div>

    <h3>{{ ::vm.text.columnsLabel }}</h3>

    <div cg-busy="vm.promise" class="columns-modal-content select2-modal-content" ng-if="!vm.impaired">
      <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" title="{{ ::vm.text.columnsLabel }}">

        <ui-select-match>{{ $item.title }}</ui-select-match>

        <ui-select-choices repeat="column in vm.unusedColumns | filter: { title: $select.search } | orderBy:'title'"
                           refresh="vm.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="{{ ::vm.text.multiSelectLabel }}"
            aria-labelledby="column_multiselect_description">

        <i class="icon icon-help1"></i>
      </span>
      <div class="hidden-for-sighted" id="column_multiselect_description">
        {{ ::vm.text.multiSelectLabel }}
      </div>
    </div>

    <div cg-busy="vm.promise" class="columns-modal-content select2-modal-content" ng-if="vm.impaired">
      <label for="selected_columns" class="hidden-for-sighted">{{ ::vm.text.selectedColumns }}</label>

      <div ng-repeat="column in vm.availableColumns | orderBy:'title'">
        <label class="form--label-with-check-box" for="column-{{column.title}}">
          <div class="form--check-box-container">
            <input id="column-{{column.title}}"
                   type="checkbox"
                   title="{{ column.title }}"
                   ng-attr-autofocus="{{ $first || undefined }}"
                   ng-model="vm.selectedColumnMap[column.name]"
                   ng-change="vm.setSelectedColumn(column)"/>
          </div>
          {{column.title}}
        </label>
      </div>
    </div>
    <div>
      <button class="button -highlight" ng-click="vm.updateSelectedColumns()">
        {{ ::vm.text.applyButton }}
      </button>
      <button class="button" ng-click="vm.closeMe()">
        {{ ::vm.text.cancelButton }}
      </button>
    </div>
  </div>
</div>