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

<link rel="import" href="chrome://resources/cr_elements/icons.html">
<link rel="import" href="chrome://resources/html/polymer.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.html">
<link rel="import" href="chrome://resources/polymer/v1_0/paper-input/paper-input.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);
        --paper-input-container-label: {
          font-size: inherit;
        };
      }

      iron-list {
        /* TODO(michaelpg): Size to fit the viewport. */
        height: 300px;
      }

      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_)]]">
        $i18n{addDictionaryWordButton}
      </paper-button>
    </div>
    <div class="settings-box continuation block">
      <h2>$i18n{customDictionaryWords}</h2>
      <div class="list-frame">
        <iron-list id="list" items="{{words_}}">
          <template>
            <div class="list-item">
              <div class="word text-elide">[[item]]</div>
              <paper-icon-button icon="cr:clear" on-tap="onRemoveWordTap_"
                  tabindex$="[[tabIndex]]">
              </paper-icon-button>
            </div>
          </template>
        </iron-list>
      </div>
    </div>
  </template>
  <script src="edit_dictionary_page.js"></script>
</dom-module>