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)">
        <op-icon icon-classes="icon-action-menu icon-columns"></op-icon>
        {{ I18n.t('js.toolbar.settings.columns') }}</a>
    </li>
    <li><a class="menu-item" href="" ng-click="showSortingModal($event)">
      <op-icon icon-classes="icon-action-menu icon-sort-by"></op-icon>
      {{ I18n.t('js.toolbar.settings.sort_by') }}</a></li>
    <li>
       <a class="menu-item"
          href
          ng-disabled="displayHierarchies"
          ng-class="{'inactive': displayHierarchies}"
          ng-attr-title="{{ text.group_by_title() }}"
          ng-click="showGroupingModal($event)">
         <op-icon icon-classes="icon-action-menu icon-group-by"></op-icon>
          {{ I18n.t('js.toolbar.settings.group_by') }}
       </a>
    </li>
    <li>
      <a class="menu-item" href="" ng-click="toggleDisplaySums($event)">
        <op-icon ng-if="displaySums" icon-classes="icon-action-menu icon-checkmark"></op-icon>
        <op-icon ng-if="!displaySums" icon-classes="icon-action-menu no-icon"></op-icon>
        <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)">
        <op-icon ng-if="displayHierarchies" icon-classes="icon-action-menu icon-checkmark"></op-icon>
        <span ng-bind="::I18n.t('js.toolbar.settings.hide_hierarchy')"></span>
      </a>
      <a ng-disabled="isGrouped"
         ng-class="{'inactive': !!isGrouped}"
         ng-if="!displayHierarchies"
         ng-attr-title="{{ text.hierarchy_title() }}"
         class="menu-item"
         href
         ng-click="toggleHierarchies($event)">
        <op-icon ng-if="!displayHierarchies" icon-classes="icon-action-menu no-icon"></op-icon>
        <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()}">
      <op-icon icon-classes="icon-action-menu icon-save"></op-icon>
      {{ 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()}">
      <op-icon icon-classes="icon-action-menu icon-save"></op-icon>
      {{ 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()}">
      <op-icon icon-classes="icon-action-menu icon-delete"></op-icon>
      {{ 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()}">
      <op-icon icon-classes="icon-action-menu icon-export"></op-icon>
      {{ 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()}">
      <op-icon icon-classes="icon-action-menu icon-publish"></op-icon>
      {{ 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()}">
      <op-icon icon-classes="icon-action-menu icon-settings"></op-icon>
      {{ I18n.t('js.toolbar.settings.page_settings') }}</a>
    </li>
    <li class="dropdown-divider" ng-if="queryCustomFields || configureFormLink"></li>
    <li ng-if="queryCustomFields"><a class="menu-item" href="{{queryCustomFields.href}}">
      <i class="icon-action-menu icon-custom-fields"></i>{{ queryCustomFields.name }}</a>
    </li>
    <li ng-if="configureFormLink"><a class="menu-item" href="{{configureFormLink.href}}">
      <i class="icon-action-menu icon-settings3"></i>{{ configureFormLink.name }}</a>
    </li>
  </ul>
</div>