openproject/frontend/app/components/context-menus/settings-menu/settings-menu.service.html

<div class="dropdown dropdown-relative dropdown-anchor-right dropdownToolbar" id="settingsDropdown">
  <!-- The hrefs with empty URLs are necessary for IE10 to focus these links
  properly. Thus, don't remove the hrefs or the empty URLs! -->
  <ul class="dropdown-menu">
    <li>
      <a class="menu-item" href="" ng-click="showColumnsModal($event)"><i class="icon-action-menu icon-columns"></i>{{ I18n.t('js.toolbar.settings.columns') }}</a>
    </li>
    <li><a class="menu-item" href="" ng-click="showSortingModal($event)"><i class="icon-action-menu icon-sort-by"></i>{{ I18n.t('js.toolbar.settings.sort_by') }}</a></li>
    <li>
       <a class="menu-item"
          href
          ng-disabled="displayHierarchies"
          ng-class="{'inactive': displayHierarchies}"
          ng-click="showGroupingModal($event)">
          <i class="icon-action-menu icon-group-by"></i>
          {{ I18n.t('js.toolbar.settings.group_by') }}
       </a>
    </li>
    <li>
      <a class="menu-item" href="" ng-click="toggleDisplaySums($event)">
        <i ng-if="query.displaySums" class="icon-action-menu icon-checkmark"></i><i ng-if="!query.displaySums" class="icon-action-menu no-icon"></i>
        <accessible-element visible-text="I18n.t('js.toolbar.settings.display_sums')"
                            readable-text="displaySumsLabel">
        </accessible-element>
      </a>
    </li>
    <li>
      <a ng-if="displayHierarchies" class="menu-item" href ng-click="toggleHierarchies($event)">
        <i ng-if="displayHierarchies" class="icon-action-menu icon-checkmark"></i>
        <span ng-bind="::I18n.t('js.toolbar.settings.hide_hierarchy')"></span>
      </a>
      <a ng-disabled="query.groupBy"
         ng-class="{'inactive': !!query.groupBy}"
         ng-if="!displayHierarchies"
         class="menu-item"
         href
         ng-click="toggleHierarchies($event)">
        <i ng-if="!displayHierarchies" class="icon-action-menu no-icon"></i>
        <span ng-bind="::I18n.t('js.toolbar.settings.display_hierarchy')"></span>
    </li>
    <li class="dropdown-divider"></li>
    <li><a class="menu-item" href="" ng-click="saveQuery($event)"
           inaccessible-by-tab="saveQueryInvalid()"
           ng-class="{'inactive': saveQueryInvalid()}">
        <i class="icon-action-menu icon-save"></i>{{ I18n.t('js.toolbar.settings.save') }}</a>
    </li>
    <li><a class="menu-item" href="" ng-click="showSaveAsModal($event)"
           inaccessible-by-tab="showSaveModalInvalid()"
           ng-class="{'inactive': showSaveModalInvalid()}">
      <i class="icon-action-menu icon-save"></i>{{ I18n.t('js.toolbar.settings.save_as') }}</a>
    </li>
    <li><a class="menu-item" href="" ng-click="deleteQuery($event)"
           inaccessible-by-tab="deleteQueryInvalid()"
           ng-class="{'inactive': deleteQueryInvalid()}">
      <i class="icon-action-menu icon-delete"></i>{{ I18n.t('js.toolbar.settings.delete') }}</a>
    </li>
    <li><a class="menu-item" href="" ng-click="showExportModal($event)"
           inaccessible-by-tab="showExportModalInvalid()"
           ng-class="{'inactive': showExportModalInvalid()}">
      <i class="icon-action-menu icon-export"></i>{{ I18n.t('js.toolbar.settings.export') }}</a>
    </li>
    <li><a class="menu-item" href="" ng-click="showShareModal($event)"
           inaccessible-by-tab="showShareModalInvalid()"
           ng-class="{'inactive': showShareModalInvalid()}">
      <i class="icon-action-menu icon-publish"></i>{{ I18n.t('js.toolbar.settings.share') }}</a>
    </li>
    <li><a class="menu-item" href="" ng-click="showSettingsModal($event)"
           inaccessible-by-tab="showSettingsModalInvalid()"
           ng-class="{'inactive': showSettingsModalInvalid()}">
      <i class="icon-action-menu icon-settings"></i>{{ I18n.t('js.toolbar.settings.page_settings') }}</a>
    </li>
  </ul>
</div>