Skip to content

GitLab

T
tangled
Commit 8607f136 authored by Denis Kuznetsov's avatar Denis Kuznetsov Committed by Commit Bot
Browse files
Options

Migrate OOBE Enrollment to polymer 

Get rid of enterprise-card / enterprise-header, switch existing screens
to oobe-dialog.

This cl simplify existing code before migrating enrollment flow to polymer
completely.

Bug: 811556
Change-Id: I5035707ba57c4281a293a616225a8171a8e552dc
Reviewed-on: https://chromium-review.googlesource.com/1225698
Commit-Queue: Denis Kuznetsov <antrim@chromium.org>
Reviewed-by: default avatarAlexander Alekseev <alemate@chromium.org>
Cr-Commit-Position: refs/heads/master@{#591343}
parent 8d71f6f5
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 141 additions and 374 deletions
chrome/browser/resources/chromeos/login/custom_elements_login.html
View file @ 8607f136
......@@ -21,13 +21,12 @@
<include src="oobe_buttons.html">
<include src="oobe_change_picture.html">
<include src="oobe_dialog.html">
<include src="oobe_enrollment.html">
<include src="oobe_reset.html">
<include src="oobe_reset_confirmation_overlay.html">
<include src="oobe_voice_interaction_value_prop.html">
<include src="oobe_wait_for_container_ready.html">
<include src="encryption_migration.html">
<include src="enterprise_card.html">
<include src="enterprise_header.html">
<include src="enrollment_license_card.html">
<include src="sync_consent.html">
<include src="fingerprint_setup.html">
......
chrome/browser/resources/chromeos/login/custom_elements_login.js
View file @ 8607f136
......@@ -31,8 +31,6 @@
// <include src="encryption_migration.js">
// <include src="oobe_voice_interaction_value_prop.js">
// <include src="oobe_wait_for_container_ready.js">
// <include src="enterprise_card.js">
// <include src="enterprise_header.js">
// <include src="enrollment_license_card.js">
// <include src="sync_consent.js">
// <include src="fingerprint_setup.js">
......
chrome/browser/resources/chromeos/login/custom_elements_oobe.html
View file @ 8607f136
......@@ -20,6 +20,7 @@
<include src="oobe_buttons.html">
<include src="oobe_change_picture.html">
<include src="oobe_dialog.html">
<include src="oobe_enrollment.html">
<include src="oobe_eula.html">
<include src="oobe_hid_detection.html">
<include src="oobe_reset.html">
......@@ -35,8 +36,6 @@
<include src="offline_ad_login.html">
<include src="active_directory_password_change.html">
<include src="arc_terms_of_service.html">
<include src="enterprise_card.html">
<include src="enterprise_header.html">
<include src="enrollment_license_card.html">
<include src="sync_consent.html">
<include src="fingerprint_setup.html">
......
chrome/browser/resources/chromeos/login/custom_elements_oobe.js
View file @ 8607f136
......@@ -45,8 +45,6 @@
// <include src="arc_terms_of_service.js">
// <include src="oobe_voice_interaction_value_prop.js">
// <include src="oobe_wait_for_container_ready.js">
// <include src="enterprise_card.js">
// <include src="enterprise_header.js">
// <include src="enrollment_license_card.js">
// <include src="sync_consent.js">
// <include src="fingerprint_setup.js">
......
chrome/browser/resources/chromeos/login/enrollment_license_card.html
View file @ 8607f136
......@@ -4,10 +4,10 @@
<link rel="import" href="chrome://resources/html/polymer.html">
<link rel="import" href="chrome://oobe/custom_elements.html">
<link rel="import" href="chrome://resources/cr_elements/cr_radio_button/cr_radio_button.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/paper-radio-group/paper-radio-group.html">
<!--
UI for the Enrollment license type selection.
......@@ -25,43 +25,36 @@
<dom-module id="enrollment-license-card">
<template>
<link rel="stylesheet" href="gaia_input_form.css">
<link rel="stylesheet" href="enterprise_card.css">
<link rel="stylesheet" href="enterprise_card_footer.css">
<link rel="stylesheet" href="enrollment_license_card.css">
<style
include="shared-style iron-flex iron-flex-alignment iron-positioning">
</style>
<enterprise-card id="license-selection-prompt-card" class="fit">
<enterprise-header slot="header"
i18n-values="header-title:oauthEnrollScreenTitle">
<hd-iron-icon slot="enterprise-icon"
icon1x="enterprise-header-32:briefcase"
icon2x="enterprise-header-64:briefcase"></hd-iron-icon>
<div slot="header-comment" class="header-comment">
[[i18nDynamic(locale, 'licenseSelectionCardExplanation')]]
</div>
</enterprise-header>
<div slot="content" class="content flex vertical layout justified">
<div>
<paper-radio-group selected="{{selected}}"
selectable="cr-radio-button">
<template is="dom-repeat" items="[[licenses]]"
id="repeatTemplate">
<cr-radio-button class="license-radio-button"
disabled$="[[or_(item.disabled, disabled)]]"
hidden$="[[item.hidden]]" name="[[item.id]]">
[[formatTitle_(item)]]
</cr-radio-button>
</template>
</paper-radio-group>
</div>
<oobe-dialog id="license-selection-prompt-card" has-buttons>
<hd-iron-icon slot="oobe-icon"
icon1x="oobe-enrollment-32:briefcase"
icon2x="oobe-enrollment-64:briefcase"></hd-iron-icon>
<h1 slot="title" i18n-content="oauthEnrollScreenTitle"></h1>
<div slot="subtitle">
[[i18nDynamic(locale, 'licenseSelectionCardExplanation')]]
</div>
<div slot="footer" class="flex layout vertical justified">
<paper-radio-group selected="{{selected}}"
selectable="cr-radio-button">
<template is="dom-repeat" items="[[licenses]]"
id="repeatTemplate">
<cr-radio-button class="license-radio-button"
disabled$="[[or_(item.disabled, disabled)]]"
hidden$="[[item.hidden]]" name="[[item.id]]">
[[formatTitle_(item)]]
</cr-radio-button>
</template>
</paper-radio-group>
</div>
<div slot="footer" class="footer">
<div class="horizontal-reverse justified layout center">
<oobe-next-button disabled="[[disabled]]"
on-tap="buttonClicked_"
id="submitButton" class="self-start">
</oobe-next-button>
</div>
<div slot="bottom-buttons" class="flex layout horizontal end-justified">
<oobe-next-button disabled="[[disabled]]" on-tap="buttonClicked_"
class="focus-on-show"></oobe-next-button>
</div>
</enterprise-card>
</oobe-dialog>
</template>
</dom-module>
chrome/browser/resources/chromeos/login/enrollment_license_card.js
View file @ 8607f136
......@@ -10,7 +10,7 @@
Polymer({
is: 'enrollment-license-card',
behaviors: [I18nBehavior],
behaviors: [I18nBehavior, OobeDialogHostBehavior],
properties: {
/**
......@@ -49,8 +49,12 @@ Polymer({
},
},
get submitButton() {
return this.$.submitButton;
show: function() {
this.behaviors.forEach((behavior) => {
if (behavior.onBeforeShow)
behavior.onBeforeShow.call(this);
});
this.$['license-selection-prompt-card'].show();
},
buttonClicked_: function() {
......
chrome/browser/resources/chromeos/login/enterprise_card.css deleted 100644 → 0
View file @ 8d71f6f5
/* Copyright 2018 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. */
:host {
display: flex;
flex-direction: column;
height: 100%;
position: relative;
width: 100%;
}
.enterprise-header {
background-color: white;
}
.enterprise-footer {
background-color: white;
}
:host(:not(.disabled)) :host(:not(.no-footer)) {
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.17);
/* z-index is needed to make shadow visible. */
z-index: 1;
}
.header-container {
padding: 64px 64px 0 64px;
}
.header-comment {
color: #333;
font-size: 13px;
line-height: 20px;
min-height: 40px;
}
.content-container {
padding: 0 64px 0 64px;
z-index: 1;
}
.footer-container {
height: 44px;
padding: 18px;
}
.overlay {
background-color: rgba(0, 0, 0, 0.5);
display: none;
height: 100%;
position: absolute;
right: 0;
top: 0;
width: 100%;
z-index: 11;
}
paper-progress#progress-bar {
--paper-progress-active-color: var(--google-blue-500);
--paper-progress-container-color: var(--google-blue-100);
display: none;
height: 3px;
padding-top: 16px;
width: 100%;
}
:host(.full-disabled) #full-overlay,
:host(.disabled) #actionable-overlay,
:host(.disabled) #progress-bar,
:host(.with-progress) #progress-bar {
display: block;
}
chrome/browser/resources/chromeos/login/enterprise_card.html deleted 100644 → 0
View file @ 8d71f6f5
<!-- Copyright 2018 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. -->
<link rel="import" href="chrome://resources/html/polymer.html">
<link rel="import" href="chrome://resources/polymer/v1_0/paper-progress/paper-progress.html">
<link rel="import" href="chrome://resources/polymer/v1_0/paper-styles/color.html">
<!--
Simple Gaia v2 looking card which should be used for local OOBE UI elements
that look like Gaia v2 card (large white dialog with buttons in footer).
This is usually used in Enterprise Enrollment flow.
Example:
<enterprise-card>
<enterprise-header class="header" icon="enterprise"
i18n-values="header-title:...;
header-comment:...">
</enterprise-header >
<div class="content">
...
</div
<div class="footer">
<oobe-next-button class="autofocus main-button"> /
<gaia-button> / <oobe-back-button>
</div>
</enterprise-card>
Add class |header| to all which you want to go inside header. Similar
with classes |content| and |footer|.
-->
<dom-module id="enterprise-card">
<template>
<link rel="stylesheet" href="enterprise_card.css">
<link rel="stylesheet" href="oobe_flex_layout.css">
<div class="enterprise-header vertical layout justified layout-start">
<div class="header-container flex vertical layout relative">
<slot name="header"></slot>
</div>
<paper-progress class="self-end" id="progress-bar" indeterminate>
</paper-progress>
</div>
<div class="flex vertical layout">
<div class="content-container flex vertical layout">
<slot name="content"></slot>
</div>
<div class="footer-container horizontal layout center"
hidden="[[noFooter]]">
<slot name="footer"></slot>
</div>
<div id="actionable-overlay" class="overlay"></div>
</div>
<div id="full-overlay" class="overlay"></div>
</template>
</dom-module>
chrome/browser/resources/chromeos/login/enterprise_card.js deleted 100644 → 0
View file @ 8d71f6f5
// Copyright 2015 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.
Polymer({
is: 'enterprise-card',
properties: {
/**
* Control visibility of the footer container.
*/
noFooter: {
type: Boolean,
value: false,
},
},
/** @override */
focus: function() {
if (this.autofocus) {
this.autofocus.focus();
}
},
/** @override */
ready: function() {
this.autofocus = this.querySelector('.autofocus');
},
});
chrome/browser/resources/chromeos/login/enterprise_header.css deleted 100644 → 0
View file @ 8d71f6f5
/* Copyright 2015 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. */
:host {
display: flex;
flex-direction: column;
position: relative;
}
.header-title {
color: #333;
display: flex;
flex-direction: column-reverse;
font-size: 28px;
height: 64px;
}
chrome/browser/resources/chromeos/login/enterprise_header.js deleted 100644 → 0
View file @ 8d71f6f5
// Copyright 2015 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.
Polymer({
is: 'enterprise-header',
behaviors: [I18nBehavior],
properties: {
/**
* Title of the header
* @type {String}
*/
headerTitle: {type: String, value: ''},
},
});
chrome/browser/resources/chromeos/login/oobe_dialog.css
View file @ 8607f136
......@@ -47,6 +47,13 @@
+ var(--subtitle-font-distance-to-baseline)) 0 0 0;
}
#oobe-progress ::slotted(paper-progress) {
--paper-progress-active-color: var(--google-blue-500);
--paper-progress-container-color: var(--google-blue-100);
height: 3px;
width: 100%;
}
#footer-container {
padding: 0 64px;
}
......
chrome/browser/resources/chromeos/login/oobe_dialog.html
View file @ 8607f136
......@@ -67,6 +67,9 @@
<div id="oobe-subtitle" class="layout vertical">
<slot name="subtitle"></slot>
</div>
<div id="oobe-progress" class="layout vertical">
<slot name="progress"></slot>
</div>
</div>
<div id="footer-container" noFooterPadding$="[[noFooterPadding]]"
class="flex layout vertical">
......
chrome/browser/resources/chromeos/login/enterprise_header.html → chrome/browser/resources/chromeos/login/oobe_enrollment.html
View file @ 8607f136
<!-- Copyright 2015 The Chromium Authors. All rights reserved.
<!-- Copyright 2018 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. -->
<link rel="import" href="chrome://resources/html/polymer.html">
<link rel="import" href="chrome://resources/polymer/v1_0/iron-iconset-svg/iron-iconset-svg.html">
<!-- Icons to use in enterprise-header -->
<!-- Icons to use during enterprise enrollment -->
<iron-iconset-svg name="enterprise-header-32" size="32">
<iron-iconset-svg name="oobe-enrollment-32" size="32">
<svg>
<defs>
<g id="briefcase" fill="none" fill-rule="evenodd">
......@@ -20,7 +20,7 @@
</svg>
</iron-iconset-svg>
<iron-iconset-svg name="enterprise-header-64" size="64">
<iron-iconset-svg name="oobe-enrollment-64" size="64">
<svg>
<defs>
<g id="briefcase" fill="none" fill-rule="evenodd">
......@@ -32,24 +32,3 @@
</defs>
</svg>
</iron-iconset-svg>
<!--
Header for enterprise-card.
-->
<dom-module id="enterprise-header">
<link rel="stylesheet" href="enterprise_header.css">
<link rel="stylesheet" href="oobe_flex_layout.css">
<template>
<div class="flex vertical layout start start-justified">
<div id="icon-container" class="vertical layout center">
<slot name="enterprise-icon"></slot>
</div>
<div class="header-title" hidden$="{{!headerTitle}}">
<span>[[headerTitle]]</span>
</div>
<slot name="header-comment"></slot>
</div>
</template>
</dom-module>
chrome/browser/resources/chromeos/login/oobe_screen_oauth_enrollment.css
View file @ 8607f136
......@@ -127,3 +127,4 @@
#oauth-enrollment.saml #oauth-enroll-navigation {
color: rgba(0, 0, 0, .54);
}
chrome/browser/resources/chromeos/login/oobe_screen_oauth_enrollment.js
View file @ 8607f136
......@@ -387,15 +387,15 @@ login.createScreen('OAuthEnrollmentScreen', 'oauth-enrollment', function() {
if (step == STEP_SIGNIN) {
$('oauth-enroll-auth-view').focus();
} else if (step == STEP_LICENSE_TYPE) {
$('oauth-enroll-license-ui').submitButton.focus();
$('oauth-enroll-license-ui').show();
} else if (step == STEP_ERROR) {
$('oauth-enroll-error-card').submitButton.focus();
} else if (step == STEP_SUCCESS) {
$('oauth-enroll-success-card').focus();
$('oauth-enroll-success-card').show();
} else if (step == STEP_ABE_SUCCESS) {
$('oauth-enroll-abe-success-card').focus();
$('oauth-enroll-abe-success-card').show();
} else if (step == STEP_ATTRIBUTE_PROMPT) {
$('oauth-enroll-step-attribute-prompt').focus();
$('oauth-enroll-attribute-prompt-card').show();
} else if (step == STEP_ATTRIBUTE_PROMPT_ERROR) {
$('oauth-enroll-attribute-prompt-error-card').submitButton.focus();
} else if (step == STEP_ACTIVE_DIRECTORY_JOIN_ERROR) {
......
chrome/browser/resources/chromeos/login/oobe_update.css
View file @ 8607f136
......@@ -26,11 +26,3 @@
.update-illustration {
padding-bottom: 82px;
}
paper-progress {
--paper-progress-active-color: var(--google-blue-500);
--paper-progress-secondary-color: var(--google-blue-100);
bottom: 0;
height: 3px;
width: 100%;
}
chrome/browser/resources/chromeos/login/oobe_update.html
View file @ 8607f136
......@@ -33,10 +33,10 @@
<div slot="subtitle" class="update-subtitle" id="checkingForUpdateCancelHint"
i18n-content="cancelUpdateHint" hidden="[[!cancelAllowed]]">
</div>
<div slot="footer" class="flex layout vertical">
<paper-progress id="checking-progress" hidden="[[!checkingForUpdate]]">
</paper-progress>
<div class="flex"></div>
<paper-progress slot="progress" id="checking-progress"
hidden="[[!checkingForUpdate]]">
</paper-progress>
<div slot="footer" class="flex layout vertical end-justified">
<img class="update-illustration"
srcset="images/1x/updating_1x.png 1x,
images/2x/updating_2x.png 2x">
......@@ -56,10 +56,10 @@
</div>
<div slot="subtitle" class="update-subtitle" i18n-content="updateCompeletedMsg"
hidden="[[!updateCompleted]]"></div>
<paper-progress slot="progress" min="0" max="100"
value="[[progressValue]]" hidden="[[updateCompleted]]">
</paper-progress>
<div slot="footer" class="flex layout vertical">
<paper-progress min="0" max="100" value="[[progressValue]]"
hidden="[[updateCompleted]]">
</paper-progress>
<div id="estimated-time-left" class="progress-message text"
hidden="[[isNotAllowedOrUpdateCompleted_(estimatedTimeLeftShown,
updateCompleted)]]">
......
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