openproject/frontend/app/components/modals/settings-modal/settings-modal.service.html

<div class="ng-modal-window">
  <div class="ng-modal-inner">
    <div class="modal-header">
      <a>
        <i
            class="icon-close"
            ng-click="$ctrl.closeMe()"
            title="{{ ::I18n.t('js.close_popup_title') }}">
        </i>
      </a>
    </div>

    <h3>{{ ::I18n.t('js.modals.label_settings') }}</h3>

    <form name="modalSettingsForm" class="form">
      <div class="form--field -required">
        <label class="form--label" for="query_name">
          {{ ::I18n.t('js.modals.label_name') }}
        </label>
        <div class="form--field-container">
          <div class="form--text-field-container">
            <input
                id="query_name"
                class="form--text-field"
                type="text"
                name="query_name"
                ng-model="queryName"
                focus
                required />
          </div>
        </div>
      </div>
      <div class="form--space">
        <button
            class="button -highlight"
            ng-click="updateQuery()"
            ng-disabled="modalSettingsForm.$invalid">
          {{ ::I18n.t('js.modals.button_submit') }}
        </button>
        <button class="button" ng-click="$ctrl.closeMe()">
          {{ ::I18n.t('js.modals.button_cancel') }}
        </button>
      </div>
    </form>
  </div>
</div>