Commit df551f09 authored by Azeem Arshad's avatar Azeem Arshad Committed by Commit Bot

[CrOS Cellular] Add Basic navigation buttons for Cellular Setup.

This CL adds a button bar element containing navigation buttons that
drive the cellular activation flow.
See go/cros-cellular-activation-ui-design for UI design.

Bug: 962702
Change-Id: Iebbfddd1a6bb353b6f07f359923c3083a76e9f40
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1611077Reviewed-by: default avatarAvi Drissman <avi@chromium.org>
Reviewed-by: default avatarKyle Horimoto <khorimoto@chromium.org>
Commit-Queue: Azeem Arshad <azeemarshad@chromium.org>
Cr-Commit-Position: refs/heads/master@{#662456}
parent 938ced56
......@@ -203,6 +203,17 @@
Finalizing...
</message>
<!-- Cellular Setup UI Strings -->
<message name="IDS_CELLULAR_SETUP_BACK_LABEL" desc="Label for button to go to previous screen during cellular setup">
Back
</message>
<message name="IDS_CELLULAR_SETUP_FINISH_LABEL" desc="Label for button to finish and exit cellular setup">
Finish
</message>
<message name="IDS_CELLULAR_SETUP_TRY_AGAIN_LABEL" desc="Label for button to retry a step during cellular setup">
Try again
</message>
<!-- Chrome OS Strings -->
<message name="IDS_ECHO_CONSENT_DIALOG_TEXT" desc="Dialog text shown when user is asked to give consent to proceed with redeeming an ECHO offer.">
<ph name="SERVICE_NAME">$1<ex>Google Drive</ex></ph> wants to check if you are using an eligible Chrome OS device.
......
......@@ -16,6 +16,7 @@
</style>
</head>
<body>
<link rel="import" href="chrome://resources/css/text_defaults_md.css">
<link rel="import" href="i18n_setup.html">
<link rel="import" href="chrome://resources/cr_components/chromeos/cellular_setup/cellular_setup.html">
<cellular-setup></cellular-setup>
......
......@@ -6,6 +6,7 @@
#include "base/stl_util.h"
#include "chrome/browser/ui/webui/localized_string.h"
#include "chrome/grit/generated_resources.h"
#include "components/login/localized_values_builder.h"
#include "components/strings/grit/components_strings.h"
#include "content/public/browser/web_ui_data_source.h"
......@@ -16,10 +17,11 @@ namespace cellular_setup {
namespace {
// TODO(azeemarshad): Add localized strings for cellular setup flow.
constexpr LocalizedString kLocalizedStringsWithoutPlaceholders[] = {
{"cancel", IDS_CANCEL},
};
{"back", IDS_CELLULAR_SETUP_BACK_LABEL},
{"finish", IDS_CELLULAR_SETUP_FINISH_LABEL},
{"tryAgain", IDS_CELLULAR_SETUP_TRY_AGAIN_LABEL}};
} // namespace
......
......@@ -4,17 +4,25 @@
import("//third_party/closure_compiler/compile_js.gni")
assert(is_chromeos, "MultiDevice UI is Chrome OS only.")
assert(is_chromeos, "CellularSetup UI is Chrome OS only.")
js_type_check("closure_compile") {
deps = [
":button_bar",
":cellular_setup",
":mojo_interface_provider",
]
}
js_library("button_bar") {
deps = [
"//ui/webui/resources/js:i18n_behavior",
]
}
js_library("cellular_setup") {
deps = [
":button_bar",
":mojo_interface_provider",
"//ui/webui/resources/js:i18n_behavior",
]
......
<link rel="import" href="chrome://resources/html/polymer.html">
<link rel="import" href="chrome://resources/html/i18n_behavior.html">
<link rel="import" href="chrome://resources/cr_elements/paper_button_style_css.html">
<link rel="import" href="chrome://resources/cr_elements/shared_style_css.html">
<link rel="import" href="chrome://resources/cr_elements/shared_vars_css.html">
<link rel="import" href="chrome://resources/polymer/v1_0/paper-button/paper-button.html">
<link rel="import" href="chrome://resources/polymer/v1_0/iron-flex-layout/iron-flex-layout.html">
<dom-module id="button-bar">
<template>
<style include="paper-button-style iron-flex">
:host {
@apply --layout-horizontal;
@apply --layout-justified;
padding: 10px;
}
</style>
<paper-button id="backward"
class="cancel-button"
on-click="onBackwardButtonClicked_"
hidden$="[[showCancelButton]]">
[[i18n('back')]]
</paper-button>
<paper-button id="cancel"
class="cancel-button"
on-click="onBackwardButtonClicked_"
hidden$="[[!showCancelButton]]">
[[i18n('cancel')]]
</paper-button>
<paper-button id="tryAgain"
class="action-button"
on-click="onTryAgainButtonClicked_"
hidden$="[[!showTryAgainButton]]">
[[i18n('tryAgain')]]
</paper-button>
<paper-button id="finish"
class="action-button"
on-click="onFinishButtonClicked_"
hidden$="[[!showFinishButton]]">
[[i18n('finish')]]
</paper-button>
</template>
<script src="button_bar.js"></script>
</dom-module>
// Copyright 2019 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.
/** Element containing navigation buttons for the Cellular Setup flow. */
Polymer({
is: 'button-bar',
behaviors: [I18nBehavior],
properties: {
/** When set, displays the Try Again action button. */
showTryAgainButton: {
type: Boolean,
value: false,
},
/** When set, displays the Finish action button. */
showFinishButton: {
type: Boolean,
value: false,
},
/** When set, displays a cancel button instead of back. */
showCancelButton: {
type: Boolean,
value: false,
},
},
/** @private */
onBackwardButtonClicked_: function() {
this.fire('backward-nav-requested');
},
/** @private */
onTryAgainButtonClicked_: function() {
this.fire('retry-requested');
},
/** @private */
onFinishButtonClicked_: function() {
this.fire('complete-flow-requested');
},
});
......@@ -2,11 +2,18 @@
<link rel="import" href="chrome://resources/html/i18n_behavior.html">
<link rel="import" href="chrome://resources/cr_components/chromeos/cellular_setup/mojo_interface_provider.html">
<link rel="import" href="chrome://resources/cr_components/chromeos/cellular_setup/button_bar.html">
<link rel="import" href="chrome://resources/polymer/v1_0/iron-flex-layout/iron-flex-layout.html">
<dom-module id="cellular-setup">
<template>
<!-- TODO(azeemarshad): Replace button with actual content.-->
<button>[[i18n('cancel')]]</button>
<style include="iron-flex">
:host {
@apply --layout-flex-auto;
@apply --layout-vertical;
}
</style>
<button-bar></button-bar>
</template>
<script src="cellular_setup.js">
</script>
......
......@@ -2,12 +2,22 @@
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
// TODO(azeemarshad): Implement cellular setup UI.
/**
* Root element for the cellular setup flow. This element interacts with the
* CellularSetup service to carry out the activation flow. It contains
* navigation buttons and sub-pages corresponding to each step of the flow.
*/
Polymer({
is: 'cellular-setup',
behaviors: [I18nBehavior],
listeners: {
'backward-nav-requested': 'onBackwardNavRequested_',
'retry-requested': 'onRetryRequested_',
'complete-flow-requested': 'onCompleteFlowRequested_',
},
/**
* Provides an interface to the CellularSetup Mojo service.
* @private {?cellular_setup.MojoInterfaceProvider}
......@@ -19,4 +29,19 @@ Polymer({
this.mojoInterfaceProvider_ =
cellular_setup.MojoInterfaceProviderImpl.getInstance();
},
/** @private */
onBackwardNavRequested_: function() {
// TODO(azeemarshad): Add back navigation.
},
/** @private */
onRetryRequested_: function() {
// TODO(azeemarshad): Add try again logic.
},
/** @private */
onCompleteFlowRequested__: function() {
// TODO(azeemarshad): Add completion logic.
},
});
......@@ -276,6 +276,14 @@
file="cr_components/chromeos/cellular_setup/mojo_interface_provider.js"
type="chrome_html"
compress="gzip" />
<structure name="IDR_WEBUI_CHROMEOS_CELLULAR_SETUP_BUTTON_BAR_HTML"
file="cr_components/chromeos/cellular_setup/button_bar.html"
type="chrome_html"
compress="gzip" />
<structure name="IDR_WEBUI_CHROMEOS_CELLULAR_SETUP_BUTTON_BAR_JS"
file="cr_components/chromeos/cellular_setup/button_bar.js"
type="chrome_html"
compress="gzip" />
<!-- Shared between MultiDevice setup flow and OOBE. -->
<structure name="IDR_WEBUI_CHROMEOS_MULTIDEVICE_SETUP_MULTIDEVICE_SETUP_BROWSER_PROXY_HTML"
......
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