OpenSlides/openslides/core/static/templates/config-form-field.html

<div class="form-group">
  <label>{{ label | translate }}</label>

  <div class="input-group">
    <!-- text/number input -->
    <input ng-if="type === 'text' || type === 'number'"
           ng-model="$parent.value"
           ng-model-options="{debounce: 1000}"
           ng-change="save(configOption, $parent.value)"
           ng-class="{ 'form-control': type != 'checkbox' }"
           id="{{ key }}"
           type="{{ type }}">

    <!-- checkbox -->
    <div ng-if="type === 'checkbox'" class="config-checkbox">
      <i class="fa" id="{{ key }}"
        ng-click="$parent.value = !$parent.value; save(configOption, $parent.value)"
        ng-class="$parent.value ? 'fa-check-square-o' : 'fa-square-o'"></i>
    </div>

    <!-- comments -->
    <div class="input-comments" ng-if="type === 'comments'">
      <div ng-repeat="entry in $parent.value | excludeSpecialComments" class="input-group">
        <input ng-model="entry.name"
               ng-model-options="{debounce: 1000}"
               ng-change="save(configOption, $parent.value)"
               class="form-control"
               id="{{ key }}"
               type="text">
        <span class="input-group-btn">
          <button type=button" class="btn btn-default"
            ng-click="entry.public = !entry.public; save(configOption, $parent.value);">
            <i class="fa" ng-class="entry.public ? 'fa-unlock' : 'fa-lock'"></i>
            {{ (entry.public ? 'Public' : 'Private') | translate }}
          </button>
          <button type="button" class="btn btn-default"
            ng-click="removeComment(configOption, $parent, $index)">
            <i class="fa fa-minus"></i>
            <translate>Remove</translate>
          </button>
        </span>
      </div>
      <div>
        <button type="button" ng-click="addComment(configOption, $parent)"
          class="btn btn-default btn-sm">
          <i class="fa fa-plus"></i>
          <translate>Add new comment field</translate>
        </button>
      </div>
    </div>

    <!-- colorpicker -->
    <input ng-if="type === 'colorpicker'"
           colorpicker
           class="form-control"
           ng-model="$parent.value"
           ng-model-options="{debounce: 1000}"
           ng-change="save(configOption, $parent.value)"
           type="text">

    <!-- datetimepicker -->
    <input ng-if="type === 'datetimepicker'"
           class="form-control"
           datetime-picker="dd.MM.yyyy HH:mm"
           ng-model="$parent.value"
           ng-change="save(configOption, $parent.value)"
           is-open="datetimeOpen[key]"
           ng-focus="datetimeOpen[key]=true;"
           save-as="'number'"
           button-bar="dateTimePickerTranslatedButtons"
           default-time="10:00:00">

    <!-- textarea -->
    <textarea ng-if="type === 'textarea'"
              ng-model="$parent.value"
              ng-model-options="{debounce: 1000}"
              ng-change="save(configOption, $parent.value)"
              id="{{ key }}" class="form-control">
    </textarea>

    <!-- editor -->
    <textarea ng-if="type === 'editor'"
              id="{{ configOption.key }}"
              ckeditor="ckeditorOptions"
              ng-model="$parent.value" class="form-control"
              ng-model-options="{debounce: 1000}">
    </textarea>

    <!-- select -->
    <select ng-if="type === 'choice'"
            ng-model="$parent.value"
            ng-model-options="{debounce: 500}"
            ng-change="save(configOption, $parent.value)"
            id="{{ key }}" class="form-control"
            ng-options="option.value as option.display_name | translate for option in choices">
    </select>

    <!-- custom trnaslations -->
    <div class="config-translations" ng-if="type === 'translations'">
      <div ng-repeat="entry in $parent.value" class="input-group">
        <div class="inputs">
          <input ng-model="entry.original"
                 ng-model-options="{debounce: 1000}"
                 ng-change="save(configOption, $parent.value)"
                 class="form-control"
                 id="{{ key }}_original"
                 type="text">
          <span class="arrow form-control"><i class="fa fa-arrow-right"></i></span>
          <input ng-model="entry.translation"
                 ng-model-options="{debounce: 1000}"
                 ng-change="save(configOption, $parent.value)"
                 class="form-control"
                 id="{{ key }}_translated"
                 type="text">
        </div>
        <span class="input-group-btn">
          <button type="button" class="btn btn-default"
            ng-click="removeTranslation(configOption, $parent, $index)">
            <i class="fa fa-minus"></i>
            <translate>Remove</translate>
          </button>
        </span>
      </div>
      <div>
        <button type="button" ng-click="addTranslation(configOption, $parent)"
          class="btn btn-default btn-sm">
          <i class="fa fa-plus"></i>
          <translate>Add new custom translation</translate>
        </button>
      </div>
    </div>

    <span id="success-{{ key }}" class="input-group-addon" ng-if="configOption.success !== undefined">
      <i class="fa fa-lg fa-check-circle text-success"
        ng-if="configOption.success === true"></i>
      <i class="fa fa-lg fa-exclamation-triangle text-danger"
        ng-if="configOption.success === false"
        uib-tooltip="{{ configOption.errorMessage | translate }}"></i>
    </span>

    <span class="input-group-btn">
      <button ng-click="reset()" class="btn btn-default" title="{{ default_value | translate }}">
        <i class="fa fa-undo"></i>
        <translate>Reset</translate>
      </button>
    </span>
  </div>
  <p ng-if="help_text" class="help-block">{{ help_text | translate }}</p>
</div>