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

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

<link rel="import" href="chrome://resources/cr_elements/icons.html">
<link rel="import" href="chrome://resources/polymer/v1_0/iron-a11y-keys/iron-a11y-keys.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="chrome://resources/polymer/v1_0/paper-icon-button/paper-icon-button-light.html">
<link rel="import" href="chrome://resources/polymer/v1_0/paper-input/paper-input.html">
<link rel="import" href="../global_scroll_target_behavior.html">
<link rel="import" href="../prefs/prefs.html">
<link rel="import" href="../prefs/prefs_behavior.html">
<link rel="import" href="../settings_shared_css.html">

<dom-module id="settings-edit-dictionary-page">
  <template>
    <style include="settings-shared">
      :host {
        display: flex;
        flex-direction: column;
      }

      #newWord {
        width: var(--paper-input-max-width);
      }

      iron-list .word {
        flex: 1;
      }

      paper-button {
        -webkit-margin-start: 16px;
      }
    </style>
    <div class="settings-box first">
      <iron-a11y-keys id="keys" keys="enter esc"
          on-keys-pressed="onKeysPress_"></iron-a11y-keys>
      <div class="start">
        <paper-input id="newWord" no-label-float value="{{newWordValue_}}"
            label="$i18n{addDictionaryWordLabel}"></paper-input>
      </div>
      <paper-button class="secondary-button" on-tap="onAddWordTap_"
          disabled="[[!validateWord_(newWordValue_)]]" id="addWord">
        $i18n{addDictionaryWordButton}
      </paper-button>
    </div>
    <div class="settings-box continuation block">
      <h2>$i18n{customDictionaryWords}</h2>
    </div>
    <div class="list-frame">
      <template is="dom-if" if="[[hasWords_(words_.length)]]">
        <iron-list id="list" items="[[words_]]" preserve-focus
            scroll-target="[[subpageScrollTarget]]">
          <template>
            <div class="list-item">
              <div class="word text-elide">[[item]]</div>
              <button is="paper-icon-button-light" class="icon-clear"
                  on-tap="onRemoveWordTap_" tabindex$="[[tabIndex]]">
              </button>
            </div>
          </template>
        </iron-list>
      </template>
      <template is="dom-if" if="[[!hasWords_(words_.length)]]">
        <div id="noWordsLabel" class="list-item">
          $i18n{noCustomDictionaryWordsFound}
        </div>
      </template>
    </div>
  </template>
  <script src="edit_dictionary_page.js"></script>
</dom-module>