Commit 825c18d4 authored by dschuyler's avatar dschuyler Committed by Commit bot

[MD settings] Language settings layout closer to mocks

This CL changes the layout of the Language and Input
settings to more closely match the current mocks.
This CL also:
- makes .list-items 40px high at minimum
- removes languages_page.css

BUG=512479

Review URL: https://codereview.chromium.org/1691633002

Cr-Commit-Position: refs/heads/master@{#374845}
parent 64ec2081
/* Copyright 2015 The Chromium Authors. All rights reserved.
* Use of this source code is governed by a BSD-style license that can be
* found in the LICENSE file. */
.manage {
@apply(--layout);
@apply(--layout-horizontal-reverse);
margin-top: 20px;
}
<link rel="import" href="chrome://resources/polymer/v1_0/polymer/polymer.html"> <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-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-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/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/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-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/assert.html">
<link rel="import" href="chrome://resources/html/cr.html"> <link rel="import" href="chrome://resources/html/cr.html">
<link rel="import" href="chrome://md-settings/settings_page/settings_animated_pages.html"> <link rel="import" href="chrome://md-settings/settings_page/settings_animated_pages.html">
...@@ -21,56 +21,85 @@ ...@@ -21,56 +21,85 @@
<dom-module id="settings-languages-page"> <dom-module id="settings-languages-page">
<link rel="import" type="css" <link rel="import" type="css"
href="chrome://md-settings/settings_shared.css"> href="chrome://md-settings/settings_shared.css">
<link rel="import" type="css" href="languages_page.css">
<template> <template>
<div class="settings-card">
<settings-languages languages="{{languages}}"></settings-languages> <settings-languages languages="{{languages}}"></settings-languages>
<settings-animated-pages id="pages" current-route="{{currentRoute}}" <settings-animated-pages id="pages" current-route="{{currentRoute}}"
section="languages"> section="languages">
<neon-animatable id="main"> <neon-animatable id="main">
<div class="settings-box block first"> <div class="settings-box first two-line">
<h2 i18n-content="languagesListTitle"></h2> <div class="start">
<div> <div i18n-content="languagesListTitle"></div>
<array-selector id="languageSelector" selected="{{detailLanguage}}" <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> items="{{languages.enabledLanguages}}"></array-selector>
<template is="dom-repeat" items="{{languages.enabledLanguages}}"> <template is="dom-repeat" items="{{languages.enabledLanguages}}">
<paper-item on-tap="onLanguageTap_"> <div class="list-item" on-tap="onLanguageTap_">
<div class="flex" title="[[item.language.nativeDisplayName]]" <div class="start">
>[[item.language.displayName]]</div> <div title="[[item.language.nativeDisplayName]]">
[[item.language.displayName]]
<if expr="chromeos or is_win"> <if expr="chromeos or is_win">
<iron-icon icon="done" <iron-icon icon="done"
hidden$="[[!isProspectiveUILanguage_(item.language.code, prefs.intl.app_locale.value)]]"> hidden$="[[!isProspectiveUILanguage_(item.language.code, prefs.intl.app_locale.value)]]">
</iron-icon> </iron-icon>
</if> </if>
</div>
</div>
<paper-icon-button icon="settings" <paper-icon-button icon="settings"
on-tap="onShowLanguageDetailTap_"></paper-icon-button> on-tap="onShowLanguageDetailTap_"></paper-icon-button>
</paper-item> </div>
</template> </template>
<div class="list-item list-button" i18n-content="manageLanguages"
on-tap="onManageLanguagesTap_">
</div> </div>
<div class="manage">
<paper-button i18n-content="manageLanguages"
on-tap="onManageLanguagesTap_"></paper-button>
</div> </div>
</iron-collapse>
<if expr="chromeos"> <if expr="chromeos">
<h2 i18n-content="inputMethodsListTitle"></h2> <div class="settings-box two-line">
<div> <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}}"> <template is="dom-repeat" items="{{languages.inputMethods}}">
<paper-item> <div class="list-item">
<div class="flex">[[item.name]]</div> <div class="start">
<div>[[item.name]]</div>
<iron-icon icon="done" <iron-icon icon="done"
hidden$="[[!isCurrentInputMethod_(item.id, languages.currentInputMethod)]]"> hidden$="[[!isCurrentInputMethod_(item.id, languages.currentInputMethod)]]">
</iron-icon> </iron-icon>
</div>
<paper-icon-button icon="settings"></paper-icon-button> <paper-icon-button icon="settings"></paper-icon-button>
</paper-item> </div>
</template> </template>
<div class="list-item list-button"
i18n-content="manageInputMethods">
</div> </div>
<div class="manage">
<paper-button i18n-content="manageInputMethods"></paper-button>
</div> </div>
</iron-collapse>
</if> </if>
<if expr="not is_macosx"> <if expr="not is_macosx">
<h2 i18n-content="spellCheckListTitle"></h2> <div class="settings-box two-line">
<div class="layout vertical"> <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}}"> <template is="dom-repeat" items="{{languages.enabledLanguages}}">
<paper-checkbox hidden="[[!item.language.supportsSpellcheck]]" <paper-checkbox hidden="[[!item.language.supportsSpellcheck]]"
checked="[[item.state.spellCheckEnabled]]" checked="[[item.state.spellCheckEnabled]]"
...@@ -78,12 +107,12 @@ ...@@ -78,12 +107,12 @@
>[[item.language.displayName]]</paper-checkbox> >[[item.language.displayName]]</paper-checkbox>
</template> </template>
</div> </div>
<div class="manage"> <div class="list-item list-button" i18n-content="manageSpellCheck"
<paper-button i18n-content="manageSpellCheck" on-tap="onEditDictionaryTap_">
on-tap="onEditDictionaryTap_"></paper-button>
</div> </div>
</if>
</div> </div>
</iron-collapse>
</if>
</neon-animatable> </neon-animatable>
<neon-animatable id="manage-languages"> <neon-animatable id="manage-languages">
<settings-subheader i18n-values="page-title:manageLanguagesPageTitle"> <settings-subheader i18n-values="page-title:manageLanguagesPageTitle">
...@@ -108,7 +137,6 @@ ...@@ -108,7 +137,6 @@
</neon-animatable> </neon-animatable>
</if> </if>
</settings-animated-pages> </settings-animated-pages>
</div>
</template> </template>
<script src="languages_page.js"></script> <script src="languages_page.js"></script>
</dom-module> </dom-module>
...@@ -41,6 +41,24 @@ Polymer({ ...@@ -41,6 +41,24 @@ Polymer({
type: Object, type: Object,
notify: true, notify: true,
}, },
/** @private */
languagesSecondary_: {
type: String,
value: 'Placeholder, e.g. English (United States)',
},
/** @private */
inputMethodsSecondary_: {
type: String,
value: 'Placeholder, e.g. US keyboard',
},
/** @private */
spellCheckSecondary_: {
type: String,
value: 'Placeholder, e.g. English (United States)',
},
}, },
/** @private {!LanguageHelper} */ /** @private {!LanguageHelper} */
......
...@@ -270,9 +270,6 @@ ...@@ -270,9 +270,6 @@
type="chrome_html" type="chrome_html"
flattenhtml="true" flattenhtml="true"
allowexternalscript="true" /> allowexternalscript="true" />
<structure name="IDR_SETTINGS_LANGUAGES_PAGE_CSS"
file="languages_page/languages_page.css"
type="chrome_html" />
<structure name="IDR_SETTINGS_LANGUAGES_PAGE_HTML" <structure name="IDR_SETTINGS_LANGUAGES_PAGE_HTML"
file="languages_page/languages_page.html" file="languages_page/languages_page.html"
type="chrome_html" type="chrome_html"
......
...@@ -19,6 +19,10 @@ iron-icon { ...@@ -19,6 +19,10 @@ iron-icon {
color: #969696; color: #969696;
} }
iron-icon[icon=done] {
color: rgb(0, 128, 0);
}
paper-button { paper-button {
margin: 0; margin: 0;
min-width: auto; min-width: auto;
...@@ -64,6 +68,7 @@ span ~ a { ...@@ -64,6 +68,7 @@ span ~ a {
.list-item { .list-item {
@apply(--layout-center); @apply(--layout-center);
display: flex; display: flex;
min-height: 40px;
padding: 0; padding: 0;
} }
...@@ -84,6 +89,16 @@ span ~ a { ...@@ -84,6 +89,16 @@ span ~ a {
padding: 0; padding: 0;
} }
/* This button has no ink ripple. */
.list-item.list-button {
@apply(--layout-center);
color: rgb(66, 133, 244);
font-weight: 500;
padding: 0;
text-decoration: none;
text-transform: none;
}
.link-button { .link-button {
color: rgb(61, 130, 243); color: rgb(61, 130, 243);
padding-bottom: 6px; padding-bottom: 6px;
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment