Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(5482)

Issues Search
    My Issues | Starred     Open | Closed | All

Unified Diff: chrome/browser/resources/settings/languages_page/languages_page.html

Issue 1691633002: [MD settings] Language settings layout closer to mocks (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: Created 4 years, 10 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View side-by-side diff with in-line comments
Download patch
« no previous file with comments | « chrome/browser/resources/settings/languages_page/languages_page.css ('k') | chrome/browser/resources/settings/languages_page/languages_page.js » ('j') | chrome/browser/resources/settings/settings_shared.css » ('J')
Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
Index: chrome/browser/resources/settings/languages_page/languages_page.html
diff --git a/chrome/browser/resources/settings/languages_page/languages_page.html b/chrome/browser/resources/settings/languages_page/languages_page.html
index 15a6bbe404f5e9a93d92de19c61f190e1f92f197..3272fbb2afa3c2adb504a9f64e97335c9a55e693 100644
--- a/chrome/browser/resources/settings/languages_page/languages_page.html
+++ b/chrome/browser/resources/settings/languages_page/languages_page.html
@@ -1,11 +1,11 @@
<link rel="import" href="chrome://resources/polymer/v1_0/polymer/polymer.html">
<link rel="import" href="chrome://resources/polymer/v1_0/iron-flex-layout/iron-flex-layout.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-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-item/paper-item.html">
+<link rel="import" href="chrome://resources/cr_elements/cr_expand_button/cr_expand_button.html">
<link rel="import" href="chrome://resources/html/assert.html">
<link rel="import" href="chrome://resources/html/cr.html">
<link rel="import" href="chrome://md-settings/settings_page/settings_animated_pages.html">
@@ -21,56 +21,88 @@
<dom-module id="settings-languages-page">
<link rel="import" type="css"
href="chrome://md-settings/settings_shared.css">
- <link rel="import" type="css" href="languages_page.css">
<template>
- <div class="settings-card">
- <settings-languages languages="{{languages}}"></settings-languages>
- <settings-animated-pages id="pages" current-route="{{currentRoute}}"
- section="languages">
- <neon-animatable id="main">
- <div class="settings-box block first">
- <h2 i18n-content="languagesListTitle"></h2>
- <div>
- <array-selector id="languageSelector" selected="{{detailLanguage}}"
- items="{{languages.enabledLanguages}}"></array-selector>
- <template is="dom-repeat" items="{{languages.enabledLanguages}}">
- <paper-item on-tap="onLanguageTap_">
- <div class="flex" title="[[item.language.nativeDisplayName]]"
- >[[item.language.displayName]]</div>
+ <settings-languages languages="{{languages}}"></settings-languages>
+ <settings-animated-pages id="pages" current-route="{{currentRoute}}"
+ section="languages">
+ <neon-animatable id="main">
+ <div class="settings-box first two-line">
+ <div class="start">
+ <div i18n-content="languagesListTitle"></div>
+ <div class="secondary">[[languagesSecondary_]]</div>
+ </div>
+ <cr-expand-button expanded="{{languagesOpened_}}">
+ </cr-expand-button>
+ </div>
+ <iron-collapse id="collapse" opened="[[languagesOpened_]]">
+ <div class="list-frame vertical-list">
+ <array-selector id="languageSelector"
+ selected="{{detailLanguage}}"
+ items="{{languages.enabledLanguages}}"></array-selector>
+ <template is="dom-repeat" items="{{languages.enabledLanguages}}">
+ <div class="list-item" on-tap="onLanguageTap_">
+ <div class="start">
+ <div title="[[item.language.nativeDisplayName]]">
+ [[item.language.displayName]]
<if expr="chromeos or is_win">
- <iron-icon icon="done"
- hidden$="[[!isProspectiveUILanguage_(item.language.code, prefs.intl.app_locale.value)]]">
- </iron-icon>
+ <iron-icon icon="done"
michaelpg 2016/02/11 01:06:44 nit: don't indent inside <if>
michaelpg 2016/02/11 01:23:21 nvm, this is correct
dschuyler 2016/02/11 01:30:08 I was trying to keep the indent as if the <if> wer
dschuyler 2016/02/11 01:30:08 Acknowledged.
+ hidden$="[[!isProspectiveUILanguage_(
+ item.language.code, prefs.intl.app_locale.value)]]">
michaelpg 2016/02/11 01:06:44 The fix for this probably hasn't landed yet. https
dschuyler 2016/02/11 01:30:07 Acknowledged.
+ </iron-icon>
</if>
- <paper-icon-button icon="settings"
- on-tap="onShowLanguageDetailTap_"></paper-icon-button>
- </paper-item>
- </template>
- </div>
- <div class="manage">
- <paper-button i18n-content="manageLanguages"
- on-tap="onManageLanguagesTap_"></paper-button>
+ </div>
+ </div>
+ <paper-icon-button icon="settings"
+ on-tap="onShowLanguageDetailTap_"></paper-icon-button>
+ </div>
+ </template>
+ <div class="list-item list-button"
michaelpg 2016/02/11 01:06:44 nit: no newline needed after (i think)
dschuyler 2016/02/11 01:30:08 Done.
+ i18n-content="manageLanguages"
+ on-tap="onManageLanguagesTap_">
</div>
+ </div>
+ </iron-collapse>
<if expr="chromeos">
- <h2 i18n-content="inputMethodsListTitle"></h2>
- <div>
- <template is="dom-repeat" items="{{languages.inputMethods}}">
- <paper-item>
- <div class="flex">[[item.name]]</div>
+ <div class="settings-box two-line">
+ <div class="start">
+ <div i18n-content="inputMethodsListTitle"></div>
+ <div class="secondary">[[inputMethodsSecondary_]]</div>
+ </div>
+ <cr-expand-button expanded="{{inputMethodsOpened_}}">
+ </cr-expand-button>
+ </div>
+ <iron-collapse id="collapse" opened="[[inputMethodsOpened_]]">
+ <div class="list-frame vertical-list">
+ <template is="dom-repeat" items="{{languages.inputMethods}}">
+ <div class="list-item">
+ <div class="start">
+ <div>[[item.name]]</div>
<iron-icon icon="done"
- hidden$="[[!isCurrentInputMethod_(item.id, languages.currentInputMethod)]]">
+ hidden$="[[!isCurrentInputMethod_(
+ item.id, languages.currentInputMethod)]]">
michaelpg 2016/02/11 01:06:44 same issue
dschuyler 2016/02/11 01:30:08 Done.
</iron-icon>
- <paper-icon-button icon="settings"></paper-icon-button>
- </paper-item>
- </template>
- </div>
- <div class="manage">
- <paper-button i18n-content="manageInputMethods"></paper-button>
+ </div>
+ <paper-icon-button icon="settings"></paper-icon-button>
+ </div>
+ </template>
+ <div class="list-item list-button"
+ i18n-content="manageInputMethods">
michaelpg 2016/02/11 01:06:43 nit: 4-space indent
dschuyler 2016/02/11 01:30:08 Done.
</div>
+ </div>
+ </iron-collapse>
</if>
<if expr="not is_macosx">
- <h2 i18n-content="spellCheckListTitle"></h2>
- <div class="layout vertical">
+ <div class="settings-box two-line">
michaelpg 2016/02/11 01:06:44 no indent inside if
michaelpg 2016/02/11 01:23:21 nvm
dschuyler 2016/02/11 01:30:08 Acknowledged.
dschuyler 2016/02/11 01:30:08 Acknowledged.
+ <div class="start">
+ <div i18n-content="spellCheckListTitle"></div>
+ <div class="secondary">[[spellCheckSecondary_]]</div>
+ </div>
+ <cr-expand-button expanded="{{spellCheckOpened_}}">
+ </cr-expand-button>
+ </div>
+ <iron-collapse id="collapse" opened="[[spellCheckOpened_]]">
+ <div class="list-frame vertical-list">
+ <div class="list-item">
<template is="dom-repeat" items="{{languages.enabledLanguages}}">
<paper-checkbox hidden="[[!item.language.supportsSpellcheck]]"
checked="[[item.state.spellCheckEnabled]]"
@@ -78,37 +110,37 @@
>[[item.language.displayName]]</paper-checkbox>
</template>
</div>
- <div class="manage">
- <paper-button i18n-content="manageSpellCheck"
- on-tap="onEditDictionaryTap_"></paper-button>
+ <div class="list-item list-button"
+ i18n-content="manageSpellCheck"
michaelpg 2016/02/11 01:06:44 it looks like you are using line breaks aggressive
dschuyler 2016/02/11 01:30:08 Done.
+ on-tap="onEditDictionaryTap_">
</div>
-</if>
</div>
- </neon-animatable>
- <neon-animatable id="manage-languages">
- <settings-subheader i18n-values="page-title:manageLanguagesPageTitle">
- </settings-subheader>
- <settings-manage-languages-page
- prefs="{{prefs}}"></settings-manage-languages-page>
- </neon-animatable>
- <neon-animatable id="language-detail">
- <settings-subheader id="language-detail-subheader"
- page-title="[[detailLanguage.language.displayName]]">
- </settings-subheader>
- <settings-language-detail-page id="languageDetailPage"
- prefs="{{prefs}}" detail="[[detailLanguage]]">
- </settings-language-detail-page>
- </neon-animatable>
+ </iron-collapse>
+</if>
+ </neon-animatable>
+ <neon-animatable id="manage-languages">
+ <settings-subheader i18n-values="page-title:manageLanguagesPageTitle">
+ </settings-subheader>
+ <settings-manage-languages-page
+ prefs="{{prefs}}"></settings-manage-languages-page>
+ </neon-animatable>
+ <neon-animatable id="language-detail">
+ <settings-subheader id="language-detail-subheader"
+ page-title="[[detailLanguage.language.displayName]]">
+ </settings-subheader>
+ <settings-language-detail-page id="languageDetailPage"
+ prefs="{{prefs}}" detail="[[detailLanguage]]">
+ </settings-language-detail-page>
+ </neon-animatable>
<if expr="not is_macosx">
- <neon-animatable id="edit-dictionary">
- <settings-subheader id="edit-dictionary-subheader"
- i18n-values="page-title:editDictionaryPageTitle">
- </settings-subheader>
- <settings-edit-dictionary-page></settings-edit-dictionary-page>
- </neon-animatable>
+ <neon-animatable id="edit-dictionary">
+ <settings-subheader id="edit-dictionary-subheader"
+ i18n-values="page-title:editDictionaryPageTitle">
+ </settings-subheader>
+ <settings-edit-dictionary-page></settings-edit-dictionary-page>
+ </neon-animatable>
</if>
- </settings-animated-pages>
- </div>
+ </settings-animated-pages>
</template>
<script src="languages_page.js"></script>
</dom-module>
« no previous file with comments | « chrome/browser/resources/settings/languages_page/languages_page.css ('k') | chrome/browser/resources/settings/languages_page/languages_page.js » ('j') | chrome/browser/resources/settings/settings_shared.css » ('J')

Powered by Google App Engine
This is Rietveld 408576698