[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/+/2436969
Reviewed-by: Regan Hsu <hsuregan@chromium.org>
Reviewed-by: Kyle Horimoto <khorimoto@chromium.org>
Commit-Queue: My Nguyen <myy@chromium.org>
Cr-Commit-Position: refs/heads/master@{#811608}
diff --git a/chrome/browser/resources/settings/chromeos/os_languages_page/BUILD.gn b/chrome/browser/resources/settings/chromeos/os_languages_page/BUILD.gn
index 786172c9..12a0d76 100644
--- a/chrome/browser/resources/settings/chromeos/os_languages_page/BUILD.gn
+++ b/chrome/browser/resources/settings/chromeos/os_languages_page/BUILD.gn
@@ -371,6 +371,7 @@
":os_languages_page_module",
":os_languages_page_v2_module",
":os_languages_section_module",
+ ":shared_style_module",
":smart_inputs_page_module",
"../../languages_page:languages_module",
"../../languages_page:modulize",
@@ -467,6 +468,12 @@
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") {
js_file = "smart_inputs_page.js"
html_file = "smart_inputs_page.html"
diff --git a/chrome/browser/resources/settings/chromeos/os_languages_page/add_input_methods_dialog.html b/chrome/browser/resources/settings/chromeos/os_languages_page/add_input_methods_dialog.html
index 42fd0fb..86ca8b04 100644
--- a/chrome/browser/resources/settings/chromeos/os_languages_page/add_input_methods_dialog.html
+++ b/chrome/browser/resources/settings/chromeos/os_languages_page/add_input_methods_dialog.html
@@ -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-list/iron-list.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="../../settings_shared_css.html">
<dom-module id="os-settings-add-input-methods-dialog">
<template>
- <style include="settings-shared iron-flex">
+ <style include="settings-shared iron-flex shared-style">
#dialogBody {
display: flex;
flex-direction: column;
@@ -22,9 +23,7 @@
}
cr-search-field {
- --cr-search-field-search-input-width: 100%;
- padding-bottom: 8px;
- padding-inline-end: 20px;
+ margin-bottom: 8px;
}
.label {
diff --git a/chrome/browser/resources/settings/chromeos/os_languages_page/change_device_language_dialog.html b/chrome/browser/resources/settings/chromeos/os_languages_page/change_device_language_dialog.html
index bfe7d76f..5ed12e2 100644
--- a/chrome/browser/resources/settings/chromeos/os_languages_page/change_device_language_dialog.html
+++ b/chrome/browser/resources/settings/chromeos/os_languages_page/change_device_language_dialog.html
@@ -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/paper-ripple/paper-ripple.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="../metrics_recorder.html">
<link rel="import" href="../../languages_page/languages.html">
@@ -18,7 +19,7 @@
<dom-module id="os-settings-change-device-language-dialog">
<template>
- <style include="settings-shared iron-flex">
+ <style include="settings-shared iron-flex shared-style">
#dialogBody {
display: flex;
flex-direction: column;
@@ -30,6 +31,7 @@
cr-search-field {
margin-bottom: 16px;
+ margin-inline-start: 20px;
margin-top: 16px;
}
@@ -71,7 +73,7 @@
localized-string="[[i18nAdvanced(
'changeDeviceLanguageDialogDescription')]]">
</settings-localized-link>
- <cr-search-field class="padded" label="$i18n{searchLanguages}"
+ <cr-search-field label="$i18n{searchLanguages}"
id="search" on-search-changed="onSearchChanged_"
clear-label="$i18n{clearSearch}" on-keydown="onKeydown_" autofocus>
</cr-search-field>
diff --git a/chrome/browser/resources/settings/chromeos/os_languages_page/os_add_languages_dialog.html b/chrome/browser/resources/settings/chromeos/os_languages_page/os_add_languages_dialog.html
index 61d14f5..9ad3af03b 100644
--- a/chrome/browser/resources/settings/chromeos/os_languages_page/os_add_languages_dialog.html
+++ b/chrome/browser/resources/settings/chromeos/os_languages_page/os_add_languages_dialog.html
@@ -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/shared_vars_css.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="shared_style.html">
<link rel="import" href="../../languages_page/languages.html">
<link rel="import" href="../../settings_shared_css.html">
<dom-module id="os-settings-add-languages-dialog">
<template>
- <style include="settings-shared">
+ <style include="settings-shared shared-style">
#dialog-body {
display: flex;
flex-direction: column;
@@ -23,21 +25,20 @@
}
cr-search-field {
- padding-inline-end: 24px;
+ margin-bottom: 16px;
}
iron-list {
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) {
white-space: nowrap;
}
+
+ .list-item {
+ min-height: 36px;
+ }
</style>
<cr-dialog id="dialog" close-text="$i18n{close}">
<div slot="title">$i18n{addLanguagesDialogTitle}</div>
@@ -46,7 +47,7 @@
on-search-changed="onSearchChanged_" on-keydown="onKeydown_"
clear-label="$i18n{clearSearch}" autofocus>
</cr-search-field>
- <iron-list class="ripple-padding" scroll-target="[[$$('[slot=body]')]]"
+ <iron-list scroll-target="[[$$('[slot=body]')]]"
items="[[getLanguages_(
languages.supported, languages.enabled.*, filterValue_)]]">
<template>
diff --git a/chrome/browser/resources/settings/chromeos/os_languages_page/shared_style.html b/chrome/browser/resources/settings/chromeos/os_languages_page/shared_style.html
new file mode 100644
index 0000000..4955abf
--- /dev/null
+++ b/chrome/browser/resources/settings/chromeos/os_languages_page/shared_style.html
@@ -0,0 +1,26 @@
+
+<!-- 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
diff --git a/chrome/browser/resources/settings/chromeos/os_settings_resources_v3.grdp b/chrome/browser/resources/settings/chromeos/os_settings_resources_v3.grdp
index de2f3d8e4..bc2d741 100644
--- a/chrome/browser/resources/settings/chromeos/os_settings_resources_v3.grdp
+++ b/chrome/browser/resources/settings/chromeos/os_settings_resources_v3.grdp
@@ -209,6 +209,11 @@
use_base_dir="false"
compress="false"
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"
file="${root_gen_dir}/chrome/browser/resources/settings/chromeos/os_languages_page/smart_inputs_page.m.js"
use_base_dir="false"
diff --git a/chrome/browser/resources/settings/os_settings_resources.grd b/chrome/browser/resources/settings/os_settings_resources.grd
index 0e5d673d..f83bf32 100644
--- a/chrome/browser/resources/settings/os_settings_resources.grd
+++ b/chrome/browser/resources/settings/os_settings_resources.grd
@@ -779,6 +779,9 @@
<structure name="IDR_OS_SETTINGS_LANGUAGES_INPUT_METHOD_UTIL_JS"
file="chromeos/os_languages_page/input_method_util.js"
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"
file="chromeos/os_languages_page/smart_inputs_page.html"
compress="false" type="chrome_html" />
diff --git a/ui/webui/resources/cr_elements/cr_search_field/cr_search_field.html b/ui/webui/resources/cr_elements/cr_search_field/cr_search_field.html
index 11763c5..373e581 100644
--- a/ui/webui/resources/cr_elements/cr_search_field/cr_search_field.html
+++ b/ui/webui/resources/cr_elements/cr_search_field/cr_search_field.html
@@ -14,31 +14,39 @@
:host {
display: flex;
user-select: none;
+ --cr-search-field-input-border-bottom: 1px solid var(--cr-secondary-text-color);
}
#searchIcon {
align-self: center;
+ display: var(--cr-search-field-search-icon-display, inherit);
height: 16px;
padding: 4px;
vertical-align: middle;
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 {
--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-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-start: 0;
- --cr-input-padding-bottom: 2px;
- --cr-input-padding-top: 2px;
+ --cr-input-padding-start: var(--cr-search-field-input-padding-start, 0);
+ --cr-input-padding-bottom: var(--cr-search-field-input-padding-bottom, 2px);
+ --cr-input-padding-top: var(--cr-search-field-input-padding-top, 2px);
align-self: stretch;
color: var(--cr-primary-text-color);
display: block;
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 {
@@ -47,9 +55,10 @@
#clearSearch {
/* 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;
- margin-inline-end: -4px;
+ margin-inline-end: var(--cr-search-field-clear-icon-margin-end, -4px);
margin-inline-start: 4px;
position: absolute;
right: 0;
@@ -64,6 +73,7 @@
<cr-input id="searchInput" on-search="onSearchTermSearch"
on-input="onSearchTermInput" aria-label$="[[label]]" type="search"
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"
hidden$="[[!hasSearchText]]" slot="suffix" on-click="onTapClear_"
title="[[clearLabel]]">
