chrome/browser/resources/settings/languages_page/add_languages_dialog.html

<link rel="import" href="chrome://resources/html/polymer.html">

<link rel="import" href="chrome://resources/cr_elements/cr_checkbox/cr_checkbox.html">
<link rel="import" href="chrome://resources/cr_elements/cr_scrollable_behavior.html">
<link rel="import" href="chrome://resources/cr_elements/cr_search_field/cr_search_field.html">
<link rel="import" href="chrome://resources/cr_elements/cr_dialog/cr_dialog.html">
<link rel="import" href="chrome://resources/cr_elements/shared_vars_css.html">
<link rel="import" href="chrome://resources/polymer/v1_0/iron-list/iron-list.html">
<link rel="import" href="chrome://resources/polymer/v1_0/paper-button/paper-button.html">
<link rel="import" href="languages.html">
<link rel="import" href="../find_shortcut_behavior.html">
<link rel="import" href="../settings_shared_css.html">

<dom-module id="settings-add-languages-dialog">
  <template>
    <style include="settings-shared">
      cr-dialog {
        --cr-dialog-body: {
          padding-inline-end: 0;
          display: flex;
          flex-direction: column;
          height: 350px;
          overflow: auto;
        };
      }

      cr-search-field {
        padding-inline-end: 24px;
      }

      iron-list {
        flex: 1;
      }

      .ripple-padding {
        /* Create a little extra space for checkbox ink ripple to flow into. */
        padding-inline-start: 20px;
      }

      cr-checkbox {
        --cr-checkbox-label-container: {
          white-space: nowrap;
        };
      }
    </style>
    <cr-dialog id="dialog" close-text="$i18n{close}">
      <div slot="title">$i18n{addLanguagesDialogTitle}</div>
      <div slot="body" scrollable>
        <cr-search-field label="$i18n{searchLanguages}" id="search"
            on-search-changed="onSearchChanged_"
            on-keydown="onKeydown_" autofocus>
        </cr-search-field>
        <iron-list class="ripple-padding" scroll-target="[[$$('[slot=body]')]]"
            items="[[getLanguages_(
                languages.supported, languages.enabled.*, filterValue_)]]">
          <template>
            <cr-checkbox class="list-item no-outline"
                checked="[[willAdd_(item.code)]]" tabindex$="[[tabIndex]]"
                title$="[[item.nativeDisplayName]]"
                on-change="onLanguageCheckboxChange_">
              [[getDisplayText_(item)]]
            </cr-checkbox>
          </template>
        </iron-list>
      </div>
      <div slot="button-container">
        <paper-button class="cancel-button" on-click="onCancelButtonTap_">
          $i18n{cancel}
        </paper-button>
        <paper-button class="action-button" on-click="onActionButtonTap_"
            disabled="[[disableActionButton_]]">
          $i18n{add}
        </paper-button>
      </div>
    </cr-dialog>
  </template>
  <script src="add_languages_dialog.js"></script>
</dom-module>