Chrome OS: Fix layout of Offline Gaia screen.
This Cl fixes Offline Gaia layout to match new OOBE style from
https://chromium-review.googlesource.com/c/chromium/src/+/1111025 .
BUG: 863266, 852034
Cq-Include-Trybots: luci.chromium.try:closure_compilation
Change-Id: Ibef139a3a685b1be7f8dea52fb9c5f6a5ab73b76
Reviewed-on: https://chromium-review.googlesource.com/1136380
Commit-Queue: Alexander Alekseev <alemate@chromium.org>
Reviewed-by: Roman Sorokin <rsorokin@chromium.org>
Cr-Commit-Position: refs/heads/master@{#575511}diff --git a/chrome/browser/resources/chromeos/login/offline_ad_login.css b/chrome/browser/resources/chromeos/login/offline_ad_login.css
new file mode 100644
index 0000000..b4c9f83
--- /dev/null
+++ b/chrome/browser/resources/chromeos/login/offline_ad_login.css
@@ -0,0 +1,21 @@
+/* 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.
+ */
+
+/* Offline AD login page mostly uses styles from offline_gaia.css.
+ * Only changes to offline gaia style are defined here.
+ */
+
+.advanced-option-subtitle {
+ color: rgba(0, 0, 0, 0.54);
+ font: 13px Roboto, sans-serif;
+}
+
+iron-icon[icon='warning'] {
+ -webkit-margin-end: 15px;
+ -webkit-margin-start: 0;
+ color: var(--google-yellow-500);
+ margin-bottom: 0;
+ margin-top: 0;
+}
diff --git a/chrome/browser/resources/chromeos/login/offline_ad_login.html b/chrome/browser/resources/chromeos/login/offline_ad_login.html
index 2bed4df..1fbb55b 100644
--- a/chrome/browser/resources/chromeos/login/offline_ad_login.html
+++ b/chrome/browser/resources/chromeos/login/offline_ad_login.html
@@ -47,6 +47,7 @@
<link rel="stylesheet" href="offline_gaia.css">
<link rel="stylesheet" href="oobe_flex_layout.css">
<link rel="stylesheet" href="gaia_card_parameters.css">
+ <link rel="stylesheet" href="offline_ad_login.css">
<template>
<style include="md-select"></style>
<gaia-card id="gaiaCard" class="fit">
diff --git a/chrome/browser/resources/chromeos/login/offline_gaia.css b/chrome/browser/resources/chromeos/login/offline_gaia.css
index 7e65290..08c58858 100644
--- a/chrome/browser/resources/chromeos/login/offline_gaia.css
+++ b/chrome/browser/resources/chromeos/login/offline_gaia.css
@@ -3,6 +3,12 @@
* found in the LICENSE file. */
:host {
+ --title-font-size: 28px;
+ --title-font-distance-to-baseline: 7px;
+ --subtitle-font-size: 13px;
+ --subtitle-font-distance-to-baseline: 3px;
+ --subtitle-line-height: 18px;
+ --offline-gaia-dialog-width: 768px;
display: flex;
flex-direction: column;
font-size: 18px;
@@ -18,68 +24,72 @@
}
}
-/*
- * Due to |margin-right| of e-mail section required for animations, containers
- * store oversized items.
- */
-#headerContainer,
-#footerContainer {
- max-width: 640px;
- min-width: 640px;
+/* icon, title, subtitle styles must approximate current Gaia style. */
+
+#icon {
+ height: 32px;
+ margin: 60px 64px 0 64px;
}
-/*
- * e-mail and password section headers have slightly different size.
- * To make animations move same size objects, fix it here.
- */
-#headerContainer {
- min-height: 90px;
+#title-container {
+ min-height: calc(64px + var(--title-font-distance-to-baseline));
+}
+
+h1 {
+ color: var(--google-grey-900);
+ font-size: var(--title-font-size);
+ font-weight: normal;
+ margin: 0;
+}
+
+#subtitle-container {
+ min-height: calc(64px - var(--title-font-distance-to-baseline));
+}
+
+#subtitle-container * {
+ color: var(--google-grey-900);
+ font-size: var(--subtitle-font-size);
+ line-height: var(--subtitle-line-height);
+ /* margin 12px = 32 - line-height
+ - 5 (lihe height - font size)
+ + 3 (distance to baseline 13px)
+ = 32 + font size + distance to baseline 13px */
+ margin: calc(32 + var(--subtitle-font-size)
+ + var(--subtitle-font-distance-to-baseline)) 0 0 0;
}
/** ******** Animations ******* */
-
/*
* Normally, only e-mail section is animated, pushing password section to the
* right outside of visible area.
*/
-/*
- * Animation of e-mail parts (to the 'start' to hide, and to the 'end' to show)
- * allows password section to either slide-in (from the right) or slide-out
- * (to the right).
- *
- * --webkit-margin-start doesn't work with animations, so use conventional
- * left/right margins.
- */
-
-:host(:not([rtl])) .email-section {
- /*
- * OOBE dialog header/footer width is less than oobe-dialog width.
- * To make sure password section is completely shifted out of visible area,
- * we need right margin that matches dialog margins.
- */
- margin-left: 0;
- margin-right: 128px; /** double dialog margin = 2 * (768 - 640) / 2 */
+/* Fixed window over sliding content in #animation-inner-container. */
+#animation-outer-container {
+ overflow: hidden;
+ width: var(--offline-gaia-dialog-width);
}
-:host([rtl]) .email-section {
- margin-left: 128px; /** double dialog margin = 2 * (768 - 640) / 2 */
- margin-right: 0;
+#animation-inner-container {
+ width: calc(2 * var(--offline-gaia-dialog-width));
}
-
.section {
+ --section-padding: 64px;
+ --section-width: calc(var(--offline-gaia-dialog-width)
+ - 2 * var(--section-padding));
animation-duration: 700ms;
display: none;
/** For sliding to work correctly we need fixed size of moving objects. */
- max-width: 640px;
- min-width: 640px;
+ max-width: var(--section-width);
+ min-width: var(--section-width);
+ padding: 0 var(--section-padding);
}
@keyframes show-from-left {
from {
- margin-left: -768px; /** container width + double margin = 640 + 2 * 64 */
+ margin-left: -768px; /** Full dialog width negative. */
}
to {
margin-left: 0;
@@ -88,10 +98,10 @@
@keyframes show-from-right {
from {
- margin-right: -768px; /** container width + double margin = 640 + 2 * 64 */
+ margin-left: var(--offline-gaia-dialog-width);
}
to {
- margin-right: 0;
+ margin-left: 0;
}
}
@@ -100,21 +110,21 @@
margin-left: 0;
}
to {
- margin-left: -768px; /** container width + double margin = 640 + 2 * 64 */
+ margin-left: calc(-1 * var(--offline-gaia-dialog-width));
}
}
@keyframes hide-to-right {
from {
- margin-right: 0;
+ margin-left: 0;
}
to {
- margin-right: -768px; /** container width + double margin = 640 + 2 * 64 */
+ margin-left: var(--offline-gaia-dialog-width);
}
}
-oobe-dialog[selected='emailSection'] .email-section,
-oobe-dialog[selected='passwordSection'] .password-section {
+oobe-dialog[selected='emailSection'] #email-section,
+oobe-dialog[selected='passwordSection'] #password-section {
display: block;
}
@@ -123,19 +133,19 @@
* Dialog always starts with e-mail section visible, so only "show" animation
* depends on |animation-in-progress| attribute.
*/
-oobe-dialog[animation-in-progress] .email-section {
+oobe-dialog[animation-in-progress] #email-section {
animation-name: show-from-left;
}
-oobe-dialog[selected='passwordSection'] .email-section {
+oobe-dialog[selected='passwordSection'] #email-section {
animation-name: hide-to-left;
}
-:host([rtl]) oobe-dialog[animation-in-progress] .email-section {
+:host([rtl]) oobe-dialog[animation-in-progress] #email-section {
animation-name: show-from-right;
}
-:host([rtl]) oobe-dialog[selected='passwordSection'] .email-section {
+:host([rtl]) oobe-dialog[selected='passwordSection'] #email-section {
animation-name: hide-to-right;
}
@@ -143,16 +153,3 @@
oobe-dialog[animation-in-progress] .section {
display: block;
}
-
-.advanced-option-subtitle {
- color: rgba(0, 0, 0, 0.54);
- font: 13px Roboto, sans-serif;
-}
-
-iron-icon[icon='warning'] {
- -webkit-margin-end: 15px;
- -webkit-margin-start: 0;
- color: var(--google-yellow-500);
- margin-bottom: 0;
- margin-top: 0;
-}
diff --git a/chrome/browser/resources/chromeos/login/offline_gaia.html b/chrome/browser/resources/chromeos/login/offline_gaia.html
index 72b2ae09..2a5ea7c2 100644
--- a/chrome/browser/resources/chromeos/login/offline_gaia.html
+++ b/chrome/browser/resources/chromeos/login/offline_gaia.html
@@ -53,27 +53,25 @@
<link rel="stylesheet" href="oobe_flex_layout.css">
<link rel="stylesheet" href="oobe_dialog_host.css">
<link rel="stylesheet" href="gaia_card_parameters.css">
- <template is="dom-if" if="[[glifMode]]" restamp>
- <oobe-dialog role="dialog" has-buttons selected$="[[activeSection]]"
- animation-in-progress$="[[animationInProgress]]">
- <img src="chrome://theme/IDR_LOGO_GOOGLE_COLOR_90"
- slot="oobe-icon" alt="">
- <div id="headerContainer" slot="header" class="layout horizontal"
- on-animationend="onSlideAnimationEnd_">
- <div id="emailSectionHeader" class="section email-section">
- <h1 class="title">
- [[i18nDynamic(locale, 'loginWelcomeMessage')]]
- </h1>
- <p id="managedBy" class="enterprise-info"
- hidden$="[[!showEnterpriseMessage]]">
- </p>
- </div>
- <div id="passwordSectionHeader" class="section password-section">
- <gaia-header class="title" id="passwordHeader"></gaia-header>
- </div>
- </div>
- <div id="footerContainer" slot="footer" class="layout horizontal">
- <div id="emailSectionFooter" class="section email-section">
+ <oobe-dialog role="dialog" has-buttons selected$="[[activeSection]]"
+ animation-in-progress$="[[animationInProgress]]" no-header
+ no-footer-padding>
+ <div slot="footer">
+ <img id="icon" src="chrome://theme/IDR_LOGO_GOOGLE_COLOR_90" alt="">
+ </div>
+ <div id="animation-outer-container" slot="footer">
+ <div id="animation-inner-container" class="flex layout horizontal">
+ <div id="email-section" class="section"
+ on-animationend="onSlideAnimationEnd_">
+ <div id="title-container">
+ <h1>[[i18nDynamic(locale, 'loginWelcomeMessage')]]</h1>
+ </div>
+ <div id="subtitle-container">
+ <div id="managedBy" class="enterprise-info"
+ hidden$="[[!domain]]">
+ [[i18nDynamic(locale, 'enterpriseInfoMessage', domain)]]
+ </div>
+ </div>
<gaia-input-form on-submit="onEmailSubmitted_"
disabled="[[disabled]]"
button-text="[[i18nDynamic(locale, 'offlineLoginNextBtn')]]">
@@ -84,8 +82,13 @@
</gaia-input>
</gaia-input-form>
</div>
- <div id="passwordSectionFooter" class="section password-section">
- <gaia-input-form slot="footer" disabled="[[disabled]]"
+ <div id="password-section" class="section">
+ <div id="title-container">
+ <gaia-header id="passwordHeader"></gaia-header>
+ </div>
+ <div id="subtitle-container">
+ </div>
+ <gaia-input-form disabled="[[disabled]]"
on-submit="onPasswordSubmitted_"
button-text="[[i18nDynamic(locale, 'offlineLoginNextBtn')]]">
<gaia-input slot="inputs" id="passwordInput" type="password"
@@ -100,67 +103,14 @@
</gaia-input-form>
</div>
</div>
- <div slot="bottom-buttons" class="flex layout horizontal">
- <oobe-back-button id="offline-gaia-back-button"
- on-tap="onBackButtonClicked_"></oobe-back-button>
- <div class="flex">
- </div>
+ </div>
+ <div slot="bottom-buttons" class="flex layout horizontal">
+ <oobe-back-button id="offline-gaia-back-button"
+ on-tap="onBackButtonClicked_"></oobe-back-button>
+ <div class="flex">
</div>
- </oobe-dialog>
- </template>
-
- <template is="dom-if" if="[[!glifMode]]" restamp>
- <neon-animated-pages id="animatedPages" class="fit" attr-for-selected="id"
- entry-animation="slide-from-right-animation"
- exit-animation="slide-to-left-animation"
- on-neon-animation-finish="onAnimationFinish_" selected="emailSection">
-
- <neon-animatable id="emailSection" class="fit">
- <gaia-card class="fit">
- <div slot="header"
- class="flex vertical layout end-justified start">
- <h1 class="welcome-message" i18n-content="loginWelcomeMessage">
- </h1>
- <p id="managedBy" class="enterprise-info"
- hidden$="[[!showEnterpriseMessage]]">
- </p>
- </div>
- <div slot="footer" class="flex vertical layout justified">
- <gaia-input-form on-submit="onEmailSubmitted_"
- disabled="[[disabled]]"
- i18n-values="button-text:offlineLoginNextBtn">
- <gaia-input slot="inputs" id="emailInput" type="email"
- domain="[[emailDomain]]"
- i18n-values="error:offlineLoginInvalidEmail;
- label:offlineLoginEmail" required>
- </gaia-input>
- </gaia-input-form>
- <img src="chrome://theme/IDR_LOGO_GOOGLE_COLOR_90"
- class="self-center" alt="">
- </div>
- </gaia-card>
- </neon-animatable>
-
- <neon-animatable id="passwordSection" class="fit">
- <gaia-card id="passwordCard" class="fit">
- <gaia-header slot="header" class="flex" id="passwordHeader">
- </gaia-header>
- <gaia-input-form slot="footer" disabled="[[disabled]]"
- on-submit="onPasswordSubmitted_"
- i18n-values="button-text:offlineLoginNextBtn">
- <gaia-input slot="inputs" id="passwordInput" type="password"
- i18n-values="error:offlineLoginInvalidPassword;
- label:offlineLoginPassword" required>
- </gaia-input>
- <gaia-button type="link" on-tap="onForgotPasswordClicked_"
- i18n-content="offlineLoginForgotPasswordBtn">
- </gaia-button>
- </gaia-input-form>
- </gaia-card>
- </neon-animatable>
- </neon-animated-pages>
- </template>
-
+ </div>
+ </oobe-dialog>
<cr-dialog id="forgotPasswordDlg"
on-close="onDialogOverlayClosed_">
<div slot="body"
diff --git a/chrome/browser/resources/chromeos/login/offline_gaia.js b/chrome/browser/resources/chromeos/login/offline_gaia.js
index 372edd6..39b39eae 100644
--- a/chrome/browser/resources/chromeos/login/offline_gaia.js
+++ b/chrome/browser/resources/chromeos/login/offline_gaia.js
@@ -18,14 +18,8 @@
value: false,
},
- showEnterpriseMessage: {
- type: Boolean,
- value: false,
- },
-
domain: {
type: String,
- observer: 'onDomainChanged_',
},
emailDomain: String,
@@ -36,14 +30,6 @@
},
animationInProgress: Boolean,
-
- /**
- * Controls GLIF MM mode.
- */
- glifMode: {
- type: Boolean,
- value: false,
- },
},
attached: function() {
@@ -62,12 +48,6 @@
this.switchToEmailCard(true /* animated */);
},
- onDomainChanged_: function() {
- this.$$('#managedBy').textContent =
- loadTimeData.getStringF('enterpriseInfoMessage', this.domain);
- this.showEnterpriseMessage = !!this.domain.length;
- },
-
onAnimationFinish_: function() {
this.fire('backButton', !this.isEmailSectionActive_());
this.focus();
@@ -77,7 +57,6 @@
this.disabled = true;
this.fire('dialogShown');
this.$$('#forgotPasswordDlg').showModal();
- this.$$('#passwordCard').classList.add('full-disabled');
},
onForgotPasswordCloseTap_: function() {
@@ -87,7 +66,6 @@
onDialogOverlayClosed_: function() {
this.fire('dialogHidden');
this.disabled = false;
- this.$$('#passwordCard').classList.remove('full-disabled');
},
setEmail: function(email) {
diff --git a/chrome/browser/resources/chromeos/login/screen_gaia_signin.js b/chrome/browser/resources/chromeos/login/screen_gaia_signin.js
index 65b14d53..1611e5b 100644
--- a/chrome/browser/resources/chromeos/login/screen_gaia_signin.js
+++ b/chrome/browser/resources/chromeos/login/screen_gaia_signin.js
@@ -716,14 +716,12 @@
$('signin-frame-container-v2').appendChild($('signin-frame'));
$('gaia-signin')
.insertBefore($('offline-gaia'), $('gaia-step-contents'));
- $('offline-gaia').glifMode = true;
$('offline-gaia').removeAttribute('not-a-dialog');
$('offline-gaia').classList.toggle('fit', false);
} else {
$('gaia-signin-form-container').appendChild($('signin-frame'));
$('gaia-signin-form-container')
.appendChild($('offline-gaia'), $('gaia-step-contents'));
- $('offline-gaia').glifMode = false;
$('offline-gaia').setAttribute('not-a-dialog', true);
$('offline-gaia').classList.toggle('fit', true);
}
