Commit 517e76b7 authored by Nnamdi Theodore Johnson-Kanu's avatar Nnamdi Theodore Johnson-Kanu Committed by Commit Bot

[CrOS cellular] Update sim detect page ui

- current UI https://imgur.com/97DpSem
- UI spec https://docs.google.com/presentation/d/1Mfk5ZMEmeHwSbadUbyRU0Si5k6XDIvw-j4u7TUaCIGY/edit#slide=id.g6db8b414e1_4_32

Bug: 1093185
Change-Id: I751590c8a6868fe2bfb6ad8f367ec886729e3694
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2389231
Commit-Queue: Nnamdi Theodore Johnson-kanu <tjohnsonkanu@google.com>
Reviewed-by: default avatarAzeem Arshad <azeemarshad@chromium.org>
Reviewed-by: default avatarKyle Horimoto <khorimoto@chromium.org>
Cr-Commit-Position: refs/heads/master@{#804497}
parent c02e4d7a
...@@ -315,6 +315,12 @@ ...@@ -315,6 +315,12 @@
<message name="IDS_CELLULAR_SETUP_ESIM_PAGE_SCAN_QR_CODE" desc="Label for informing the user on ways to retrieve an eSim profile"> <message name="IDS_CELLULAR_SETUP_ESIM_PAGE_SCAN_QR_CODE" desc="Label for informing the user on ways to retrieve an eSim profile">
Scan QR code using device camera or enter activation code provided by your carrier Scan QR code using device camera or enter activation code provided by your carrier
</message> </message>
<message name="IDS_CELLULAR_SETUP_BASE_PAGE_TITLE" desc="Title for cellular setup flow dialog in ChromeOS settings">
Set up new network
</message>
<message name="IDS_CELLULAR_SETUP_ESTABLISH_NETWORK_CONNECTION" desc="Message, informing user that a network connection is being established during cellular setup">
Establishing network connection ...
</message>
<!-- Upgrade notifications --> <!-- Upgrade notifications -->
<message name="IDS_RELAUNCH_REQUIRED_TITLE_DAYS" desc="The title of a dialog that tells users the device must be restarted within two or more days."> <message name="IDS_RELAUNCH_REQUIRED_TITLE_DAYS" desc="The title of a dialog that tells users the device must be restarted within two or more days.">
......
21cdf48ff054f2e8ce89531da8f52cd8c80725cd
\ No newline at end of file
21cdf48ff054f2e8ce89531da8f52cd8c80725cd
\ No newline at end of file
...@@ -21,9 +21,12 @@ constexpr webui::LocalizedString kLocalizedStringsWithoutPlaceholders[] = { ...@@ -21,9 +21,12 @@ constexpr webui::LocalizedString kLocalizedStringsWithoutPlaceholders[] = {
{"activationCode", IDS_CELLULAR_SETUP_ESIM_PAGE_ACTIVATION_CODE}, {"activationCode", IDS_CELLULAR_SETUP_ESIM_PAGE_ACTIVATION_CODE},
{"cancel", IDS_CANCEL}, {"cancel", IDS_CANCEL},
{"back", IDS_CELLULAR_SETUP_BACK_LABEL}, {"back", IDS_CELLULAR_SETUP_BACK_LABEL},
{"basePageTitle", IDS_CELLULAR_SETUP_BASE_PAGE_TITLE},
{"eSimFlowSetup", IDS_CELLULAR_SETUP_CELLULAR_SETUP_PAGE_ESIM_LABEL}, {"eSimFlowSetup", IDS_CELLULAR_SETUP_CELLULAR_SETUP_PAGE_ESIM_LABEL},
{"eSimFlowSetupMessage", {"eSimFlowSetupMessage",
IDS_CELLULAR_SETUP_CELLULAR_SETUP_PAGE_ESIM_MESSAGE}, IDS_CELLULAR_SETUP_CELLULAR_SETUP_PAGE_ESIM_MESSAGE},
{"establishNetworkConnectionMessage",
IDS_CELLULAR_SETUP_ESTABLISH_NETWORK_CONNECTION},
{"next", IDS_CELLULAR_SETUP_NEXT_LABEL}, {"next", IDS_CELLULAR_SETUP_NEXT_LABEL},
{"finish", IDS_CELLULAR_SETUP_FINISH_LABEL}, {"finish", IDS_CELLULAR_SETUP_FINISH_LABEL},
{"tryAgain", IDS_CELLULAR_SETUP_TRY_AGAIN_LABEL}, {"tryAgain", IDS_CELLULAR_SETUP_TRY_AGAIN_LABEL},
......
...@@ -3,6 +3,7 @@ ...@@ -3,6 +3,7 @@
// found in the LICENSE file. // found in the LICENSE file.
// clang-format off // clang-format off
// #import 'chrome://os-settings/strings.m.js';
// #import 'chrome://resources/cr_components/chromeos/cellular_setup/sim_detect_page.m.js'; // #import 'chrome://resources/cr_components/chromeos/cellular_setup/sim_detect_page.m.js';
// #import {flush, Polymer} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js'; // #import {flush, Polymer} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
......
...@@ -32,6 +32,7 @@ js_library("button_bar") { ...@@ -32,6 +32,7 @@ js_library("button_bar") {
} }
js_library("base_page") { js_library("base_page") {
deps = [ "//ui/webui/resources/js:i18n_behavior" ]
} }
js_library("sim_detect_page") { js_library("sim_detect_page") {
...@@ -127,16 +128,16 @@ js_type_check("closure_compile_module") { ...@@ -127,16 +128,16 @@ js_type_check("closure_compile_module") {
deps = [ deps = [
":base_page.m", ":base_page.m",
":button_bar.m", ":button_bar.m",
":cellular_types.m",
":cellular_setup.m", ":cellular_setup.m",
":cellular_types.m",
":esim_flow_ui.m", ":esim_flow_ui.m",
":final_page.m", ":final_page.m",
":mojo_interface_provider.m", ":mojo_interface_provider.m",
":provisioning_page.m", ":provisioning_page.m",
":psim_flow_ui.m", ":psim_flow_ui.m",
":setup_selection_flow.m",
":sim_detect_page.m", ":sim_detect_page.m",
":subflow_behavior.m", ":subflow_behavior.m",
":setup_selection_flow.m",
":webview_post_util.m", ":webview_post_util.m",
] ]
} }
...@@ -256,7 +257,7 @@ js_library("setup_selection_flow.m") { ...@@ -256,7 +257,7 @@ js_library("setup_selection_flow.m") {
":subflow_behavior.m", ":subflow_behavior.m",
"//ui/webui/resources/js:i18n_behavior.m", "//ui/webui/resources/js:i18n_behavior.m",
] ]
extra_deps = [ ":setup_selection_flow_module" ] extra_deps = [ ":setup_selection_flow_module" ]
} }
js_library("cellular_setup.m") { js_library("cellular_setup.m") {
...@@ -269,14 +270,14 @@ js_library("cellular_setup.m") { ...@@ -269,14 +270,14 @@ js_library("cellular_setup.m") {
":setup_selection_flow.m", ":setup_selection_flow.m",
"//ui/webui/resources/js:i18n_behavior.m", "//ui/webui/resources/js:i18n_behavior.m",
] ]
extra_deps = [ ":cellular_setup_module" ] extra_deps = [ ":cellular_setup_module" ]
} }
group("polymer3_elements") { group("polymer3_elements") {
public_deps = [ public_deps = [
":cellular_setup_module",
":base_page_module", ":base_page_module",
":button_bar_module", ":button_bar_module",
":cellular_setup_module",
":esim_flow_ui_module", ":esim_flow_ui_module",
":final_page_module", ":final_page_module",
":modulize", ":modulize",
......
<link rel="import" href="../../../html/polymer.html"> <link rel="import" href="../../../html/polymer.html">
<link rel="import" href="../../../cr_elements/shared_vars_css.html"> <link rel="import" href="../../../cr_elements/shared_vars_css.html">
<link rel="import" href="../../../html/i18n_behavior.html">
<dom-module id="base-page"> <dom-module id="base-page">
<template> <template>
...@@ -23,7 +24,7 @@ ...@@ -23,7 +24,7 @@
width: 100%; width: 100%;
} }
</style> </style>
<h1 id="title">[[title]]</h1> <h1 id="title">[[getTitle_(title)]]</h1>
<div id="message">[[message]]</div> <div id="message">[[message]]</div>
<slot name="page-body"></slot> <slot name="page-body"></slot>
</template> </template>
......
...@@ -6,6 +6,8 @@ ...@@ -6,6 +6,8 @@
Polymer({ Polymer({
is: 'base-page', is: 'base-page',
behaviors: [I18nBehavior],
properties: { properties: {
/** /**
* Main title for the page. * Main title for the page.
...@@ -21,4 +23,12 @@ Polymer({ ...@@ -21,4 +23,12 @@ Polymer({
*/ */
message: String, message: String,
}, },
/**
* @returns {string}
* @private
*/
getTitle_() {
return this.title || this.i18n('basePageTitle');
}
}); });
...@@ -13,9 +13,14 @@ ...@@ -13,9 +13,14 @@
<style include="iron-flex"> <style include="iron-flex">
:host { :host {
display: flex; display: flex;
justify-content: space-between; justify-content: flex-end;
padding: 10px 0; padding: 10px 0;
} }
#flex {
flex: 1;
}
</style> </style>
<cr-button id="backward" <cr-button id="backward"
class="cancel-button" class="cancel-button"
...@@ -24,13 +29,7 @@ ...@@ -24,13 +29,7 @@
hidden$="[[isButtonHidden_(Button.BACKWARD, buttonState.*)]]"> hidden$="[[isButtonHidden_(Button.BACKWARD, buttonState.*)]]">
[[i18n('back')]] [[i18n('back')]]
</cr-button> </cr-button>
<cr-button id="cancel" <div id="flex"></div>
class="cancel-button"
on-click="onBackwardButtonClicked_"
disabled="[[isButtonDisabled_(Button.CANCEL, buttonState.*)]]"
hidden$="[[isButtonHidden_(Button.CANCEL, buttonState.*)]]">
[[i18n('cancel')]]
</cr-button>
<cr-button id="tryAgain" <cr-button id="tryAgain"
class="action-button" class="action-button"
on-click="onTryAgainButtonClicked_" on-click="onTryAgainButtonClicked_"
...@@ -45,6 +44,13 @@ ...@@ -45,6 +44,13 @@
hidden$="[[isButtonHidden_(Button.FINISH, buttonState.*)]]"> hidden$="[[isButtonHidden_(Button.FINISH, buttonState.*)]]">
[[i18n('finish')]] [[i18n('finish')]]
</cr-button> </cr-button>
<cr-button id="cancel"
class="cancel-button"
on-click="onBackwardButtonClicked_"
disabled="[[isButtonDisabled_(Button.CANCEL, buttonState.*)]]"
hidden$="[[isButtonHidden_(Button.CANCEL, buttonState.*)]]">
[[i18n('cancel')]]
</cr-button>
<cr-button id="next" <cr-button id="next"
class="action-button" class="action-button"
on-click="onNextButtonClicked_" on-click="onNextButtonClicked_"
......
...@@ -181,10 +181,10 @@ cr.define('cellularSetup', function() { ...@@ -181,10 +181,10 @@ cr.define('cellularSetup', function() {
initSubflow() { initSubflow() {
this.state_ = PSimUIState.STARTING_ACTIVATION; this.state_ = PSimUIState.STARTING_ACTIVATION;
this.set('buttonState', { this.set('buttonState', {
backward: cellularSetup.ButtonState.HIDDEN, backward: cellularSetup.ButtonState.SHOWN_AND_ENABLED,
cancel: cellularSetup.ButtonState.SHOWN_AND_ENABLED, cancel: cellularSetup.ButtonState.SHOWN_AND_ENABLED,
finish: cellularSetup.ButtonState.HIDDEN, finish: cellularSetup.ButtonState.HIDDEN,
next: cellularSetup.ButtonState.SHOWN_AND_ENABLED, next: cellularSetup.ButtonState.SHOWN_BUT_DISABLED,
tryAgain: cellularSetup.ButtonState.HIDDEN tryAgain: cellularSetup.ButtonState.HIDDEN
}); });
}, },
......
...@@ -9,11 +9,6 @@ ...@@ -9,11 +9,6 @@
<dom-module id="sim-detect-page"> <dom-module id="sim-detect-page">
<template> <template>
<style include="iron-flex cr-hidden-style"> <style include="iron-flex cr-hidden-style">
paper-spinner-lite {
height: 200px;
width: 200px;
}
#error-icon-container { #error-icon-container {
background-image: -webkit-image-set( background-image: -webkit-image-set(
url(error_1x.png) 1x, url(error_1x.png) 1x,
...@@ -23,11 +18,18 @@ ...@@ -23,11 +18,18 @@
height: 100%; height: 100%;
width: 100%; width: 100%;
} }
#network-connection-message {
text-align: center;
}
</style> </style>
<base-page title="[[getTitle_(showError)]]" <base-page title="[[getTitle_(showError)]]"
message="[[getMessage_(showError)]]"> message="[[getMessage_(showError)]]">
<div slot="page-body" class="layout horizontal center-center"> <div slot="page-body" class="layout horizontal center-center">
<paper-spinner-lite active hidden$="[[showError]]"></paper-spinner-lite> <!-- TODO(crbug.com/1093185): Conditionally show spinner when setup is added in OOBE -->
<div id="network-connection-message" hidden$="[[showError]]">
[[i18n('establishNetworkConnectionMessage')]]
</div>
<div id="error-icon-container" hidden$="[[!showError]]"></div> <div id="error-icon-container" hidden$="[[!showError]]"></div>
</div> </div>
</base-page> </base-page>
......
...@@ -27,8 +27,7 @@ Polymer({ ...@@ -27,8 +27,7 @@ Polymer({
* @private * @private
*/ */
getTitle_(showError) { getTitle_(showError) {
return this.i18n( return showError ? this.i18n('simDetectPageErrorTitle') : '';
showError ? 'simDetectPageErrorTitle' : 'simDetectPageTitle');
}, },
/** /**
......
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