| <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_dialog/cr_dialog.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="../settings_page/settings_subpage_search.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: { |
| -webkit-padding-end: 0; |
| display: flex; |
| flex-direction: column; |
| height: 350px; |
| overflow: auto; |
| } |
| } |
| |
| settings-subpage-search { |
| -webkit-padding-end: 24px; |
| } |
| |
| iron-list { |
| flex: 1; |
| } |
| |
| .ripple-padding { |
| /* Create a little extra space for checkbox ink ripple to flow into. */ |
| -webkit-padding-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> |
| <settings-subpage-search label="$i18n{searchLanguages}" id="search" |
| on-search-changed="onSearchChanged_" autofocus> |
| </settings-subpage-search> |
| <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> |
