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 @@
<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
</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 -->
<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[] = {
{"activationCode", IDS_CELLULAR_SETUP_ESIM_PAGE_ACTIVATION_CODE},
{"cancel", IDS_CANCEL},
{"back", IDS_CELLULAR_SETUP_BACK_LABEL},
{"basePageTitle", IDS_CELLULAR_SETUP_BASE_PAGE_TITLE},
{"eSimFlowSetup", IDS_CELLULAR_SETUP_CELLULAR_SETUP_PAGE_ESIM_LABEL},
{"eSimFlowSetupMessage",
IDS_CELLULAR_SETUP_CELLULAR_SETUP_PAGE_ESIM_MESSAGE},
{"establishNetworkConnectionMessage",
IDS_CELLULAR_SETUP_ESTABLISH_NETWORK_CONNECTION},
{"next", IDS_CELLULAR_SETUP_NEXT_LABEL},
{"finish", IDS_CELLULAR_SETUP_FINISH_LABEL},
{"tryAgain", IDS_CELLULAR_SETUP_TRY_AGAIN_LABEL},
......
......@@ -3,6 +3,7 @@
// found in the LICENSE file.
// clang-format off
// #import 'chrome://os-settings/strings.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';
......
......@@ -32,6 +32,7 @@ js_library("button_bar") {
}
js_library("base_page") {
deps = [ "//ui/webui/resources/js:i18n_behavior" ]
}
js_library("sim_detect_page") {
......@@ -127,16 +128,16 @@ js_type_check("closure_compile_module") {
deps = [
":base_page.m",
":button_bar.m",
":cellular_types.m",
":cellular_setup.m",
":cellular_types.m",
":esim_flow_ui.m",
":final_page.m",
":mojo_interface_provider.m",
":provisioning_page.m",
":psim_flow_ui.m",
":setup_selection_flow.m",
":sim_detect_page.m",
":subflow_behavior.m",
":setup_selection_flow.m",
":webview_post_util.m",
]
}
......@@ -274,9 +275,9 @@ js_library("cellular_setup.m") {
group("polymer3_elements") {
public_deps = [
":cellular_setup_module",
":base_page_module",
":button_bar_module",
":cellular_setup_module",
":esim_flow_ui_module",
":final_page_module",
":modulize",
......
<link rel="import" href="../../../html/polymer.html">
<link rel="import" href="../../../cr_elements/shared_vars_css.html">
<link rel="import" href="../../../html/i18n_behavior.html">
<dom-module id="base-page">
<template>
......@@ -23,7 +24,7 @@
width: 100%;
}
</style>
<h1 id="title">[[title]]</h1>
<h1 id="title">[[getTitle_(title)]]</h1>
<div id="message">[[message]]</div>
<slot name="page-body"></slot>
</template>
......
......@@ -6,6 +6,8 @@
Polymer({
is: 'base-page',
behaviors: [I18nBehavior],
properties: {
/**
* Main title for the page.
......@@ -21,4 +23,12 @@ Polymer({
*/
message: String,
},
/**
* @returns {string}
* @private
*/
getTitle_() {
return this.title || this.i18n('basePageTitle');
}
});
......@@ -13,9 +13,14 @@
<style include="iron-flex">
:host {
display: flex;
justify-content: space-between;
justify-content: flex-end;
padding: 10px 0;
}
#flex {
flex: 1;
}
</style>
<cr-button id="backward"
class="cancel-button"
......@@ -24,13 +29,7 @@
hidden$="[[isButtonHidden_(Button.BACKWARD, buttonState.*)]]">
[[i18n('back')]]
</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>
<div id="flex"></div>
<cr-button id="tryAgain"
class="action-button"
on-click="onTryAgainButtonClicked_"
......@@ -45,6 +44,13 @@
hidden$="[[isButtonHidden_(Button.FINISH, buttonState.*)]]">
[[i18n('finish')]]
</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"
class="action-button"
on-click="onNextButtonClicked_"
......
......@@ -181,10 +181,10 @@ cr.define('cellularSetup', function() {
initSubflow() {
this.state_ = PSimUIState.STARTING_ACTIVATION;
this.set('buttonState', {
backward: cellularSetup.ButtonState.HIDDEN,
backward: cellularSetup.ButtonState.SHOWN_AND_ENABLED,
cancel: cellularSetup.ButtonState.SHOWN_AND_ENABLED,
finish: cellularSetup.ButtonState.HIDDEN,
next: cellularSetup.ButtonState.SHOWN_AND_ENABLED,
next: cellularSetup.ButtonState.SHOWN_BUT_DISABLED,
tryAgain: cellularSetup.ButtonState.HIDDEN
});
},
......
......@@ -9,11 +9,6 @@
<dom-module id="sim-detect-page">
<template>
<style include="iron-flex cr-hidden-style">
paper-spinner-lite {
height: 200px;
width: 200px;
}
#error-icon-container {
background-image: -webkit-image-set(
url(error_1x.png) 1x,
......@@ -23,11 +18,18 @@
height: 100%;
width: 100%;
}
#network-connection-message {
text-align: center;
}
</style>
<base-page title="[[getTitle_(showError)]]"
message="[[getMessage_(showError)]]">
<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>
</base-page>
......
......@@ -27,8 +27,7 @@ Polymer({
* @private
*/
getTitle_(showError) {
return this.i18n(
showError ? 'simDetectPageErrorTitle' : 'simDetectPageTitle');
return showError ? this.i18n('simDetectPageErrorTitle') : '';
},
/**
......
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