| <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/html/action_link.html"> |
| <link rel="import" href="chrome://resources/html/action_link_css.html"> |
| <link rel="import" href="chrome://resources/html/assert.html"> |
| <link rel="import" href="chrome://resources/html/cr.html"> |
| <link rel="import" href="chrome://resources/html/cr/ui/focus_without_ink.html"> |
| <link rel="import" href="chrome://resources/polymer/v1_0/iron-collapse/iron-collapse.html"> |
| <link rel="import" href="chrome://resources/polymer/v1_0/iron-icon/iron-icon.html"> |
| <link rel="import" href="chrome://resources/polymer/v1_0/iron-icons/iron-icons.html"> |
| <link rel="import" href="chrome://resources/polymer/v1_0/neon-animation/neon-animatable.html"> |
| <link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper-icon-button-light.html"> |
| <link rel="import" href="chrome://resources/cr_elements/cr_action_menu/cr_action_menu.html"> |
| <link rel="import" href="chrome://resources/cr_elements/cr_expand_button/cr_expand_button.html"> |
| <link rel="import" href="chrome://resources/cr_elements/cr_lazy_render/cr_lazy_render.html"> |
| <link rel="import" href="chrome://resources/cr_elements/cr_toggle/cr_toggle.html"> |
| <link rel="import" href="chrome://resources/cr_elements/policy/cr_policy_pref_indicator.html"> |
| <link rel="import" href="chrome://resources/cr_elements/icons.html"> |
| <link rel="import" href="add_languages_dialog.html"> |
| <link rel="import" href="languages.html"> |
| <link rel="import" href="../controls/settings_toggle_button.html"> |
| <link rel="import" href="../lifetime_browser_proxy.html"> |
| <link rel="import" href="../route.html"> |
| <link rel="import" href="../settings_page/settings_animated_pages.html"> |
| <link rel="import" href="../settings_page/settings_subpage.html"> |
| <link rel="import" href="../settings_shared_css.html"> |
| |
| <if expr="not is_macosx"> |
| <link rel="import" href="edit_dictionary_page.html"> |
| </if> |
| |
| <if expr="chromeos"> |
| <link rel="import" href="manage_input_methods_page.html"> |
| </if> |
| |
| <dom-module id="settings-languages-page"> |
| <template> |
| <style include="settings-shared action-link"> |
| #languagesCollapse .list-item.selected { |
| min-height: var(--settings-row-two-line-min-height); |
| } |
| |
| .explain-selected { |
| color: var(--google-green-700); |
| font-weight: initial; |
| margin-top: 4px; |
| } |
| |
| cr-action-menu.complex .dropdown-item { |
| min-height: 36px; |
| } |
| |
| cr-action-menu:not(.complex) hr { |
| display: none; |
| } |
| |
| cr-action-menu.complex hr { |
| /* Override user-agent border and margin. */ |
| border: none; |
| /* TODO(michaelpg): Update to whatever variable is used for the darker, |
| * full-width separators: crbug.com/649547. */ |
| border-top: var(--settings-separator-line); |
| margin: 6px 0 0 0; |
| } |
| |
| cr-checkbox.dropdown-item { |
| --cr-action-menu-disabled-item-opacity: 0.38; |
| -webkit-margin-start: 0; |
| } |
| |
| .icon-external { |
| /* The negative margin messes up the outline border. These are in an |
| indented list so this looks fine until moved: crbug.com/708286. */ |
| -webkit-margin-end: 0; |
| } |
| |
| #uiLanguageItem:focus, |
| #offerTranslations:focus { |
| background-color: transparent; |
| } |
| |
| #uiLanguageItem span { |
| line-height: 20px; |
| } |
| |
| #uiLanguageItem cr-policy-indicator { |
| float: right; |
| margin-left: 20px; |
| } |
| |
| .name-with-error-list { |
| padding: 14px 0; |
| } |
| |
| .name-with-error-list div { |
| color: var(--google-red-500); |
| margin-top: 8px; |
| } |
| |
| .error-icon { |
| @apply --cr-icon-height-width; |
| --iron-icon-fill-color: var(--google-red-700); |
| -webkit-margin-end: 8px; |
| } |
| |
| .name-with-error-list[disabled] { |
| pointer-events: none; |
| } |
| </style> |
| <settings-languages languages="{{languages}}" prefs="{{prefs}}" |
| language-helper="{{languageHelper}}"> |
| </settings-languages> |
| <settings-animated-pages id="pages" section="languages" |
| focus-config="[[focusConfig_]]"> |
| <neon-animatable route-path="default"> |
| <div class$="settings-box first [[getLanguageListTwoLine_()]]" |
| actionable on-click="toggleExpandButton_"> |
| <div class="start"> |
| <div>$i18n{languagesListTitle}</div> |
| <if expr="chromeos or is_win"> |
| <div class="secondary"> |
| [[getProspectiveUILanguageName_(languages.prospectiveUILanguage)]] |
| </div> |
| </if> |
| </div> |
| <cr-expand-button expanded="{{languagesOpened_}}" |
| alt="$i18n{languagesExpandA11yLabel}"> |
| </cr-expand-button> |
| </div> |
| <iron-collapse id="languagesCollapse" opened="[[languagesOpened_]]"> |
| <span class="settings-box first" |
| hidden="[[isHelpTextHidden_(languages.enabled.*)]]"> |
| <span>$i18n{orderLanguagesInstructions}</span> |
| <if expr="chromeos"> |
| <a href="$i18n{languagesLearnMoreURL}" target="_blank"> |
| $i18n{learnMore} |
| </a> |
| </if> |
| </span> |
| <div class="list-frame vertical-list"> |
| <template is="dom-repeat" items="[[languages.enabled]]"> |
| <div class$="list-item [[getLanguageItemClass_( |
| item.language.code, language.prospectiveUILanguage)]]"> |
| <div class="start"> |
| <div title="[[item.language.nativeDisplayName]]"> |
| [[item.language.displayName]] |
| </div> |
| <if expr="chromeos or is_win"> |
| <div class="explain-selected" |
| hidden="[[!isProspectiveUILanguage_( |
| item.language.code, |
| languages.prospectiveUILanguage)]]"> |
| $i18n{isDisplayedInThisLanguage} |
| </div> |
| </if> |
| </div> |
| <if expr="chromeos or is_win"> |
| <template is="dom-if" if="[[isRestartRequired_( |
| item.language.code, languages.prospectiveUILanguage)]]"> |
| <paper-button on-click="onRestartTap_"> |
| $i18n{restart} |
| </paper-button> |
| </template> |
| </if> |
| <paper-icon-button-light class="icon-more-vert"> |
| <button title="$i18n{moreActions}" |
| id="more-[[item.language.code]]" on-click="onDotsTap_"> |
| </button> |
| </paper-icon-button-light> |
| </div> |
| </template> |
| <div class="list-item"> |
| <a is="action-link" class="list-button" id="addLanguages" |
| on-click="onAddLanguagesTap_"> |
| $i18n{addLanguages} |
| </a> |
| </div> |
| </div> |
| <settings-toggle-button id="offerTranslateOtherLanguages" |
| class="first" pref="{{prefs.translate.enabled}}" |
| label="$i18n{offerToEnableTranslate}"> |
| </settings-toggle-button> |
| </iron-collapse> |
| <if expr="chromeos"> |
| <div id="manageInputMethodsSubpageTrigger" |
| class="settings-box two-line" actionable |
| on-click="toggleExpandButton_"> |
| <div class="start"> |
| <div>$i18n{inputMethodsListTitle}</div> |
| <div class="secondary"> |
| [[getInputMethodName_(languages.inputMethods.currentId)]] |
| </div> |
| </div> |
| <cr-expand-button expanded="{{inputMethodsOpened_}}" |
| alt="$i18n{inputMethodsExpandA11yLabel}"> |
| </cr-expand-button> |
| </div> |
| <iron-collapse id="inputMethodsCollapse" |
| opened="[[inputMethodsOpened_]]"> |
| <div class="list-frame vertical-list"> |
| <template is="dom-repeat" |
| items="[[languages.inputMethods.enabled]]"> |
| <div class$="list-item [[getInputMethodItemClass_( |
| item.id, languages.inputMethods.currentId)]]" |
| on-click="onInputMethodTap_" on-keypress="onInputMethodTap_" |
| actionable tabindex="0"> |
| <div class="start"> |
| <div>[[item.displayName]]</div> |
| <div class="explain-selected" |
| hidden="[[!isCurrentInputMethod_( |
| item.id, languages.inputMethods.currentId)]]"> |
| $i18n{inputMethodEnabled} |
| </div> |
| </div> |
| <paper-icon-button-light class="icon-external" |
| hidden="[[!item.hasOptionsPage]]"> |
| <button on-click="onInputMethodOptionsTap_"></button> |
| </paper-icon-button-light> |
| </div> |
| </template> |
| <div class="list-item" on-click="onManageInputMethodsTap_" |
| actionable> |
| <div class="start" id="manageInputMethods"> |
| $i18n{manageInputMethods} |
| </div> |
| <paper-icon-button-light class="subpage-arrow"> |
| <button aria-label="$i18n{manageInputMethods}" |
| aria-describedby="customSpelling"></button> |
| </paper-icon-button-light> |
| </div> |
| </div> |
| <settings-toggle-button |
| pref="{{prefs.settings.language.ime_menu_activated}}" |
| label="$i18n{showImeMenu}"> |
| </settings-toggle-button> |
| </iron-collapse> |
| </if> |
| <if expr="not is_macosx"> |
| <div id="spellCheckSubpageTrigger" |
| class$="settings-box [[getSpellCheckListTwoLine_( |
| spellCheckSecondaryText_)]]" |
| actionable$="[[!spellCheckDisabled_]]" |
| on-click="toggleExpandButton_"> |
| <div class="start"> |
| <div>$i18n{spellCheckListTitle}</div> |
| <div class="secondary">[[spellCheckSecondaryText_]]</div> |
| </div> |
| <!-- |enable_spellchecking| may be set by policy, but if it's enabled, |
| we shouldn't display the policy indicator. --> |
| <template is="dom-if" if="[[spellCheckDisabled_]]" restamp> |
| <cr-policy-pref-indicator |
| pref="[[prefs.browser.enable_spellchecking]]"> |
| </cr-policy-pref-indicator> |
| </template> |
| <template is="dom-if" if="[[!spellCheckDisabled_]]" restamp> |
| <cr-expand-button expanded="{{spellCheckOpened_}}" |
| alt="$i18n{spellCheckExpandA11yLabel}"> |
| </cr-expand-button> |
| </template> |
| </div> |
| <iron-collapse id="spellCheckCollapse" opened="[[spellCheckOpened_]]"> |
| <div class="list-frame vertical-list"> |
| <template is="dom-repeat" items="[[spellCheckLanguages_]]"> |
| <div class="list-item"> |
| <div class="start name-with-error-list" |
| on-click="onSpellCheckNameClick_" actionable |
| disabled$="[[isSpellCheckNameClickDisabled_(item, |
| item.*)]]"> |
| [[item.language.displayName]] |
| <div hidden="[[!errorsGreaterThan_( |
| item.downloadDictionaryFailureCount, 0)]]"> |
| <iron-icon class="error-icon" icon="error"> |
| </iron-icon> |
| $i18n{languagesDictionaryDownloadError} |
| </div> |
| <div hidden="[[!errorsGreaterThan_( |
| item.downloadDictionaryFailureCount, 1)]]"> |
| $i18n{languagesDictionaryDownloadErrorHelp} |
| </div> |
| </div> |
| <paper-button on-click="onRetryDictionaryDownloadClick_" |
| hidden="[[!errorsGreaterThan_( |
| item.downloadDictionaryFailureCount, 0)]]"> |
| $i18n{retry} |
| </paper-button> |
| <template is="dom-if" if="[[!item.isManaged]]"> |
| <cr-toggle on-change="onSpellCheckChange_" |
| disabled="[[!item.language.supportsSpellcheck]]" |
| checked="[[item.spellCheckEnabled]]" |
| aria-label$="[[item.language.displayName]]" |
| hidden="[[errorsGreaterThan_( |
| item.downloadDictionaryFailureCount, 0)]]"> |
| </cr-toggle> |
| </template> |
| <template is="dom-if" if="[[item.isManaged]]"> |
| <cr-policy-pref-indicator |
| pref="[[prefs.spellcheck.forced_dictionaries]]" |
| hidden="[[errorsGreaterThan_( |
| item.downloadDictionaryFailureCount, 0)]]"> |
| </cr-policy-pref-indicator> |
| </template> |
| </div> |
| </template> |
| <div class="list-item" on-click="onEditDictionaryTap_" actionable> |
| <div class="start" id="customSpelling"> |
| $i18n{manageSpellCheck} |
| </div> |
| <paper-icon-button-light class="subpage-arrow"> |
| <button aria-label="$i18n{manageSpellCheck}" |
| aria-describedby="customSpelling"></button> |
| </paper-icon-button-light> |
| </div> |
| </div> |
| </iron-collapse> |
| </if> |
| <cr-lazy-render id="menu"> |
| <template> |
| <cr-action-menu |
| class$="[[getMenuClass_(prefs.translate.enabled.value)]]"> |
| <if expr="chromeos or is_win"> |
| <cr-checkbox id="uiLanguageItem" slot="item" |
| class="dropdown-item" |
| checked="[[isProspectiveUILanguage_( |
| detailLanguage_.language.code, |
| languages.prospectiveUILanguage)]]" |
| on-change="onUILanguageChange_" |
| disabled="[[disableUILanguageCheckbox_( |
| detailLanguage_, languages.prospectiveUILanguage)]]"> |
| <span>$i18n{displayInThisLanguage}</span> |
| <cr-policy-indicator indicator-type="[[ |
| getPolicyIndicatorStatus_( |
| detailLanguage_.language)]]"> |
| </cr-policy-indicator> |
| </cr-checkbox> |
| </if> |
| <cr-checkbox id="offerTranslations" slot="item" |
| class="dropdown-item" |
| checked="[[detailLanguage_.translateEnabled]]" |
| on-change="onTranslateCheckboxChange_" |
| hidden="[[!prefs.translate.enabled.value]]" |
| disabled="[[disableTranslateCheckbox_( |
| detailLanguage_.language, languages.translateTarget)]]"> |
| $i18n{offerToTranslateInThisLanguage} |
| </cr-checkbox> |
| <hr slot="item"> |
| <button slot="item" class="dropdown-item" role="menuitem" |
| on-click="onMoveToTopTap_" |
| hidden="[[isNthLanguage_( |
| 0, detailLanguage_, languages.enabled.*)]]"> |
| $i18n{moveToTop} |
| </button> |
| <button slot="item" class="dropdown-item" role="menuitem" |
| on-click="onMoveUpTap_" |
| hidden="[[!showMoveUp_(detailLanguage_, |
| languages.enabled.*)]]"> |
| $i18n{moveUp} |
| </button> |
| <button slot="item" class="dropdown-item" role="menuitem" |
| on-click="onMoveDownTap_" |
| hidden="[[!showMoveDown_( |
| detailLanguage_, languages.enabled.*)]]"> |
| $i18n{moveDown} |
| </button> |
| <button slot="item" class="dropdown-item" role="menuitem" |
| on-click="onRemoveLanguageTap_" |
| hidden="[[!detailLanguage_.removable]]"> |
| $i18n{removeLanguage} |
| </button> |
| </cr-action-menu> |
| </template> |
| </cr-lazy-render> |
| </neon-animatable> |
| <if expr="chromeos"> |
| <template is="dom-if" route-path="/inputMethods"> |
| <settings-subpage |
| associated-control="[[$$('#manageInputMethodsSubpageTrigger')]]" |
| page-title="$i18n{manageInputMethodsPageTitle}"> |
| <settings-manage-input-methods-page languages="{{languages}}" |
| language-helper="[[languageHelper]]"> |
| </settings-manage-input-methods-page> |
| </settings-subpage> |
| </template> |
| </if> |
| <if expr="not is_macosx"> |
| <template is="dom-if" route-path="/editDictionary"> |
| <settings-subpage |
| associated-control="[[$$('#spellCheckSubpageTrigger')]]" |
| page-title="$i18n{editDictionaryPageTitle}"> |
| <settings-edit-dictionary-page></settings-edit-dictionary-page> |
| </settings-subpage> |
| </template> |
| </if> |
| </settings-animated-pages> |
| <template is="dom-if" if="[[showAddLanguagesDialog_]]" restamp> |
| <settings-add-languages-dialog languages="{{languages}}" |
| language-helper="[[languageHelper]]"> |
| </settings-add-languages-dialog> |
| </template> |
| </template> |
| <script src="languages_page.js"></script> |
| </dom-module> |
