Skip to content

GitLab

T
tangled
Commit 825c18d4 authored by dschuyler's avatar dschuyler Committed by Commit bot
Browse files
Options

[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
Hide whitespace changes
Inline Side-by-side
Showing with 129 additions and 80 deletions
chrome/browser/resources/settings/languages_page/languages_page.css deleted 100644 → 0
View file @ 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;
}
chrome/browser/resources/settings/languages_page/languages_page.html
View file @ 825c18d4
<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,85 @@
<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"
hidden$="[[!isProspectiveUILanguage_(item.language.code, prefs.intl.app_locale.value)]]">
</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" 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)]]">
</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">
</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">
<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 +107,36 @@
>[[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"
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>
chrome/browser/resources/settings/languages_page/languages_page.js
View file @ 825c18d4
......@@ -41,6 +41,24 @@ Polymer({
type: Object,
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} */
......
chrome/browser/resources/settings/settings_resources.grd
View file @ 825c18d4
......@@ -270,9 +270,6 @@
type="chrome_html"
flattenhtml="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"
file="languages_page/languages_page.html"
type="chrome_html"
......
chrome/browser/resources/settings/settings_shared.css
View file @ 825c18d4
......@@ -19,6 +19,10 @@ iron-icon {
color: #969696;
}
iron-icon[icon=done] {
color: rgb(0, 128, 0);
}
paper-button {
margin: 0;
min-width: auto;
......@@ -64,6 +68,7 @@ span ~ a {
.list-item {
@apply(--layout-center);
display: flex;
min-height: 40px;
padding: 0;
}
......@@ -84,6 +89,16 @@ span ~ a {
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 {
color: rgb(61, 130, 243);
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