Commit d8f29d5b authored by My Nguyen's avatar My Nguyen Committed by Commit Bot

[OsSettingsLanguages] Update search field look

Spec: http://go/cros-lang-settings-figma

Change device language: http://screen/5tJTJeKbQqqPLBb
Add languages: http://screen/A4KkBzEiSFdTzJM
Add input methods: http://screen/7ukfaWuZv4fJMpv

Border-radius of the underline is not yet updated.

Bug: 1113437
Change-Id: Ie4c9828a2ed71ba3b67aef89bbe848c2c5237756
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2436969Reviewed-by: default avatarRegan Hsu <hsuregan@chromium.org>
Reviewed-by: default avatarKyle Horimoto <khorimoto@chromium.org>
Commit-Queue: My Nguyen <myy@chromium.org>
Cr-Commit-Position: refs/heads/master@{#811608}
parent 82e79a8a
...@@ -371,6 +371,7 @@ group("polymer3_elements") { ...@@ -371,6 +371,7 @@ group("polymer3_elements") {
":os_languages_page_module", ":os_languages_page_module",
":os_languages_page_v2_module", ":os_languages_page_v2_module",
":os_languages_section_module", ":os_languages_section_module",
":shared_style_module",
":smart_inputs_page_module", ":smart_inputs_page_module",
"../../languages_page:languages_module", "../../languages_page:languages_module",
"../../languages_page:modulize", "../../languages_page:modulize",
...@@ -467,6 +468,12 @@ polymer_modulizer("input_page") { ...@@ -467,6 +468,12 @@ polymer_modulizer("input_page") {
auto_imports = os_settings_auto_imports auto_imports = os_settings_auto_imports
} }
polymer_modulizer("shared_style") {
js_file = "shared_style.m.js"
html_file = "shared_style.html"
html_type = "style-module"
}
polymer_modulizer("smart_inputs_page") { polymer_modulizer("smart_inputs_page") {
js_file = "smart_inputs_page.js" js_file = "smart_inputs_page.js"
html_file = "smart_inputs_page.html" html_file = "smart_inputs_page.html"
......
...@@ -7,12 +7,13 @@ ...@@ -7,12 +7,13 @@
<link rel="import" href="chrome://resources/polymer/v1_0/iron-flex-layout/iron-flex-layout-classes.html"> <link rel="import" href="chrome://resources/polymer/v1_0/iron-flex-layout/iron-flex-layout-classes.html">
<link rel="import" href="chrome://resources/polymer/v1_0/iron-list/iron-list.html"> <link rel="import" href="chrome://resources/polymer/v1_0/iron-list/iron-list.html">
<link rel="import" href="../metrics_recorder.html"> <link rel="import" href="../metrics_recorder.html">
<link rel="import" href="shared_style.html">
<link rel="import" href="../../languages_page/languages.html"> <link rel="import" href="../../languages_page/languages.html">
<link rel="import" href="../../settings_shared_css.html"> <link rel="import" href="../../settings_shared_css.html">
<dom-module id="os-settings-add-input-methods-dialog"> <dom-module id="os-settings-add-input-methods-dialog">
<template> <template>
<style include="settings-shared iron-flex"> <style include="settings-shared iron-flex shared-style">
#dialogBody { #dialogBody {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
...@@ -22,9 +23,7 @@ ...@@ -22,9 +23,7 @@
} }
cr-search-field { cr-search-field {
--cr-search-field-search-input-width: 100%; margin-bottom: 8px;
padding-bottom: 8px;
padding-inline-end: 20px;
} }
.label { .label {
......
...@@ -10,6 +10,7 @@ ...@@ -10,6 +10,7 @@
<link rel="import" href="chrome://resources/polymer/v1_0/iron-list/iron-list.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-ripple/paper-ripple.html"> <link rel="import" href="chrome://resources/polymer/v1_0/paper-ripple/paper-ripple.html">
<link rel="import" href="languages_metrics_proxy.html"> <link rel="import" href="languages_metrics_proxy.html">
<link rel="import" href="shared_style.html">
<link rel="import" href="../localized_link/localized_link.html"> <link rel="import" href="../localized_link/localized_link.html">
<link rel="import" href="../metrics_recorder.html"> <link rel="import" href="../metrics_recorder.html">
<link rel="import" href="../../languages_page/languages.html"> <link rel="import" href="../../languages_page/languages.html">
...@@ -18,7 +19,7 @@ ...@@ -18,7 +19,7 @@
<dom-module id="os-settings-change-device-language-dialog"> <dom-module id="os-settings-change-device-language-dialog">
<template> <template>
<style include="settings-shared iron-flex"> <style include="settings-shared iron-flex shared-style">
#dialogBody { #dialogBody {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
...@@ -30,6 +31,7 @@ ...@@ -30,6 +31,7 @@
cr-search-field { cr-search-field {
margin-bottom: 16px; margin-bottom: 16px;
margin-inline-start: 20px;
margin-top: 16px; margin-top: 16px;
} }
...@@ -71,7 +73,7 @@ ...@@ -71,7 +73,7 @@
localized-string="[[i18nAdvanced( localized-string="[[i18nAdvanced(
'changeDeviceLanguageDialogDescription')]]"> 'changeDeviceLanguageDialogDescription')]]">
</settings-localized-link> </settings-localized-link>
<cr-search-field class="padded" label="$i18n{searchLanguages}" <cr-search-field label="$i18n{searchLanguages}"
id="search" on-search-changed="onSearchChanged_" id="search" on-search-changed="onSearchChanged_"
clear-label="$i18n{clearSearch}" on-keydown="onKeydown_" autofocus> clear-label="$i18n{clearSearch}" on-keydown="onKeydown_" autofocus>
</cr-search-field> </cr-search-field>
......
...@@ -7,13 +7,15 @@ ...@@ -7,13 +7,15 @@
<link rel="import" href="chrome://resources/cr_elements/cr_dialog/cr_dialog.html"> <link rel="import" href="chrome://resources/cr_elements/cr_dialog/cr_dialog.html">
<link rel="import" href="chrome://resources/cr_elements/shared_vars_css.html"> <link rel="import" href="chrome://resources/cr_elements/shared_vars_css.html">
<link rel="import" href="chrome://resources/html/find_shortcut_behavior.html"> <link rel="import" href="chrome://resources/html/find_shortcut_behavior.html">
<link rel="import" href="chrome://resources/html/load_time_data.html">
<link rel="import" href="chrome://resources/polymer/v1_0/iron-list/iron-list.html"> <link rel="import" href="chrome://resources/polymer/v1_0/iron-list/iron-list.html">
<link rel="import" href="shared_style.html">
<link rel="import" href="../../languages_page/languages.html"> <link rel="import" href="../../languages_page/languages.html">
<link rel="import" href="../../settings_shared_css.html"> <link rel="import" href="../../settings_shared_css.html">
<dom-module id="os-settings-add-languages-dialog"> <dom-module id="os-settings-add-languages-dialog">
<template> <template>
<style include="settings-shared"> <style include="settings-shared shared-style">
#dialog-body { #dialog-body {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
...@@ -23,21 +25,20 @@ ...@@ -23,21 +25,20 @@
} }
cr-search-field { cr-search-field {
padding-inline-end: 24px; margin-bottom: 16px;
} }
iron-list { iron-list {
flex: 1; flex: 1;
} }
.ripple-padding {
/* Create a little extra space for checkbox ink ripple to flow into. */
padding-inline-start: 20px;
}
cr-checkbox::part(label-container) { cr-checkbox::part(label-container) {
white-space: nowrap; white-space: nowrap;
} }
.list-item {
min-height: 36px;
}
</style> </style>
<cr-dialog id="dialog" close-text="$i18n{close}"> <cr-dialog id="dialog" close-text="$i18n{close}">
<div slot="title">$i18n{addLanguagesDialogTitle}</div> <div slot="title">$i18n{addLanguagesDialogTitle}</div>
...@@ -46,7 +47,7 @@ ...@@ -46,7 +47,7 @@
on-search-changed="onSearchChanged_" on-keydown="onKeydown_" on-search-changed="onSearchChanged_" on-keydown="onKeydown_"
clear-label="$i18n{clearSearch}" autofocus> clear-label="$i18n{clearSearch}" autofocus>
</cr-search-field> </cr-search-field>
<iron-list class="ripple-padding" scroll-target="[[$$('[slot=body]')]]" <iron-list scroll-target="[[$$('[slot=body]')]]"
items="[[getLanguages_( items="[[getLanguages_(
languages.supported, languages.enabled.*, filterValue_)]]"> languages.supported, languages.enabled.*, filterValue_)]]">
<template> <template>
......
<!-- Common styles for 'Languages and inputs' section. -->
<dom-module id="shared-style">
<template>
<style>
cr-search-field {
--cr-search-field-clear-icon-fill: var(--cros-icon-color-secondary);
--cr-search-field-clear-icon-margin-end: 8px;
--cr-search-field-clear-icon-size: 18px;
--cr-search-field-input-border-bottom: none;
--cr-search-field-input-min-height: 32px;
--cr-search-field-input-padding-bottom: 0;
--cr-search-field-input-padding-start: 8px;
--cr-search-field-input-padding-top: 0;
--cr-search-field-input-width: 100%;
--cr-search-field-search-icon-display: none;
--cr-search-field-search-icon-fill: var(--cros-icon-color-secondary);
--cr-search-field-search-icon-inline-display: block;
--cr-search-field-search-icon-inline-margin-start: 6px;
background-color: var(--google-grey-100);
border-radius: 4px;
margin-inline-end: 20px;
}
</style>
</template>
</dom-module>
\ No newline at end of file
...@@ -209,6 +209,11 @@ ...@@ -209,6 +209,11 @@
use_base_dir="false" use_base_dir="false"
compress="false" compress="false"
type="BINDATA" /> type="BINDATA" />
<include name="IDR_OS_SETTINGS_LANGUAGES_PAGE_SHARED_STYLE_M_JS"
file="${root_gen_dir}/chrome/browser/resources/settings/chromeos/os_languages_page/shared_style.m.js"
use_base_dir="false"
compress="false"
type="BINDATA" />
<include name="IDR_OS_SETTINGS_LANGUAGES_PAGE_SMART_INPUTS_PAGE_M_JS" <include name="IDR_OS_SETTINGS_LANGUAGES_PAGE_SMART_INPUTS_PAGE_M_JS"
file="${root_gen_dir}/chrome/browser/resources/settings/chromeos/os_languages_page/smart_inputs_page.m.js" file="${root_gen_dir}/chrome/browser/resources/settings/chromeos/os_languages_page/smart_inputs_page.m.js"
use_base_dir="false" use_base_dir="false"
......
...@@ -779,6 +779,9 @@ ...@@ -779,6 +779,9 @@
<structure name="IDR_OS_SETTINGS_LANGUAGES_INPUT_METHOD_UTIL_JS" <structure name="IDR_OS_SETTINGS_LANGUAGES_INPUT_METHOD_UTIL_JS"
file="chromeos/os_languages_page/input_method_util.js" file="chromeos/os_languages_page/input_method_util.js"
compress="false" type="chrome_html" /> compress="false" type="chrome_html" />
<structure name="IDR_OS_SETTINGS_LANGUAGES_SHARED_STYLE_HTML"
file="chromeos/os_languages_page/shared_style.html"
compress="false" type="chrome_html" />
<structure name="IDR_OS_SETTINGS_LANGUAGES_SMART_INPUTS_PAGE_HTML" <structure name="IDR_OS_SETTINGS_LANGUAGES_SMART_INPUTS_PAGE_HTML"
file="chromeos/os_languages_page/smart_inputs_page.html" file="chromeos/os_languages_page/smart_inputs_page.html"
compress="false" type="chrome_html" /> compress="false" type="chrome_html" />
......
...@@ -14,31 +14,39 @@ ...@@ -14,31 +14,39 @@
:host { :host {
display: flex; display: flex;
user-select: none; user-select: none;
--cr-search-field-input-border-bottom: 1px solid var(--cr-secondary-text-color);
} }
#searchIcon { #searchIcon {
align-self: center; align-self: center;
display: var(--cr-search-field-search-icon-display, inherit);
height: 16px; height: 16px;
padding: 4px; padding: 4px;
vertical-align: middle; vertical-align: middle;
width: 16px; width: 16px;
} }
#searchIconInline {
--iron-icon-fill-color: var(--cr-search-field-search-icon-fill, inherit);
display: var(--cr-search-field-search-icon-inline-display, none);
margin-inline-start: var(--cr-search-field-search-icon-inline-margin-start, 0);
}
#searchInput { #searchInput {
--cr-input-background-color: transparent; --cr-input-background-color: transparent;
--cr-input-border-bottom: 1px solid var(--cr-secondary-text-color); --cr-input-border-bottom: var(--cr-search-field-input-border-bottom);
--cr-input-border-radius: 0; --cr-input-border-radius: 0;
--cr-input-error-display: none; --cr-input-error-display: none;
--cr-input-min-height: 24px; --cr-input-min-height: var(--cr-search-field-input-min-height, 24px);
--cr-input-padding-end: 0; --cr-input-padding-end: 0;
--cr-input-padding-start: 0; --cr-input-padding-start: var(--cr-search-field-input-padding-start, 0);
--cr-input-padding-bottom: 2px; --cr-input-padding-bottom: var(--cr-search-field-input-padding-bottom, 2px);
--cr-input-padding-top: 2px; --cr-input-padding-top: var(--cr-search-field-input-padding-top, 2px);
align-self: stretch; align-self: stretch;
color: var(--cr-primary-text-color); color: var(--cr-primary-text-color);
display: block; display: block;
font-size: 92.3076923%; /* To 12px from 13px. */ font-size: 92.3076923%; /* To 12px from 13px. */
width: var(--cr-search-field-search-input-width, 160px); width: var(--cr-search-field-input-width, 160px);
} }
:host([has-search-text]) #searchInput { :host([has-search-text]) #searchInput {
...@@ -47,9 +55,10 @@ ...@@ -47,9 +55,10 @@
#clearSearch { #clearSearch {
/* A 16px icon that fits on the input line. */ /* A 16px icon that fits on the input line. */
--cr-icon-button-icon-size: 16px; --cr-icon-button-fill-color: var(--cr-search-field-clear-icon-fill, inherit);
--cr-icon-button-icon-size: var(--cr-search-field-clear-icon-size, 16px);
--cr-icon-button-size: 24px; --cr-icon-button-size: 24px;
margin-inline-end: -4px; margin-inline-end: var(--cr-search-field-clear-icon-margin-end, -4px);
margin-inline-start: 4px; margin-inline-start: 4px;
position: absolute; position: absolute;
right: 0; right: 0;
...@@ -64,6 +73,7 @@ ...@@ -64,6 +73,7 @@
<cr-input id="searchInput" on-search="onSearchTermSearch" <cr-input id="searchInput" on-search="onSearchTermSearch"
on-input="onSearchTermInput" aria-label$="[[label]]" type="search" on-input="onSearchTermInput" aria-label$="[[label]]" type="search"
autofocus="[[autofocus]]" placeholder="[[label]]" spellcheck="false"> autofocus="[[autofocus]]" placeholder="[[label]]" spellcheck="false">
<iron-icon id="searchIconInline" slot="inline-prefix" icon="cr:search"></iron-icon>
<cr-icon-button id="clearSearch" class="icon-cancel" <cr-icon-button id="clearSearch" class="icon-cancel"
hidden$="[[!hasSearchText]]" slot="suffix" on-click="onTapClear_" hidden$="[[!hasSearchText]]" slot="suffix" on-click="onTapClear_"
title="[[clearLabel]]"> title="[[clearLabel]]">
......
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