Skip to content

GitLab

T
tangled
Commit 38e0418e authored by dzhioev's avatar dzhioev Committed by Commit bot
Browse files
Options

Unified icon-buttons used in the new GAIA flow. 

This CL introduces the 'gaia-icon-button' decorator, which can be applied to any
<button>.
All icon buttons introduced recently are <button is="gaia-icon-button">s now.

BUG=478545,472671
TEST=manual

Review URL: https://codereview.chromium.org/1133733003

Cr-Commit-Position: refs/heads/master@{#329284}
parent 61c7526b
Hide whitespace changes
Inline Side-by-side
Showing with 111 additions and 110 deletions
chrome/app/theme/theme_resources.grd
View file @ 38e0418e
......@@ -444,11 +444,6 @@
<if expr="chromeos">
<!-- TODO(nkostylev): This resource needs to be removed when cros login code is moved to ash. -->
<structure type="chrome_scaled_image" name="IDR_LAUNCHER_BACKGROUND" file="cros/launcher_background.png" />
<structure type="chrome_scaled_image" name="IDR_LOGIN_BACK_BUTTTON" file="cros/login_back_button.png" />
<structure type="chrome_scaled_image" name="IDR_LOGIN_BACK_BUTTTON_MASKED" file="cros/login_back_button_masked.png" />
<structure type="chrome_scaled_image" name="IDR_LOGIN_CLOSE_BUTTTON" file="cros/login_close_button.png" />
<structure type="chrome_scaled_image" name="IDR_LOGIN_CLOSE_BUTTTON_MASKED" file="cros/login_close_button_masked.png" />
<structure type="chrome_scaled_image" name="IDR_LOGIN_CLOSE_BUTTTON_ON_WHITE" file="cros/login_close_button_on_white.png" />
<structure type="chrome_scaled_image" name="IDR_LOGIN_PASSWORD_CAPS_LOCK" file="cros/login_password_capslock.png" />
</if>
<if expr="chromeos">
......
chrome/browser/resources/chromeos/login/gaia_buttons.html
View file @ 38e0418e
<link rel="import" href="chrome://resources/polymer/polymer/polymer.html">
<link rel="import" href="chrome://resources/polymer/core-icon-button/core-icon-button.html">
<link rel="import" href="chrome://resources/polymer/core-icon/core-icon.html">
<link rel="import" href="chrome://resources/polymer/core-icons/core-icons.html">
<link rel="import" href="chrome://resources/polymer/paper-button/paper-button.html">
<link rel="import" href="chrome://resources/polymer/polymer/polymer.html">
<!--
Simple paper- and core-icon- buttons which also triggers 'tap' event on keys
......@@ -13,11 +14,19 @@
</template>
</polymer-element>
<polymer-element name="gaia-core-icon-button" extends="core-icon-button"
on-keydown="onKeyDown" tabindex="0">
<!--
Decorator for a <button>. When applied to a <button>, the button looks like
an icon from a material-design icons set. Icon's name should be specified in
'icon' attribute.
Example:
<button is="gaia-icon-button" icon="close"></button>
-->
<polymer-element name="gaia-icon-button" extends="button" attributes="icon"
on-mousedown="{{onMouseDown}}">
<template>
<link rel="stylesheet" href="gaia_core_icon_button.css">
<shadow></shadow>
<link rel="stylesheet" href="gaia_icon_button.css">
<core-icon icon="{{icon}}" fit></core-icon>
</template>
</polymer-element>
......
chrome/browser/resources/chromeos/login/gaia_buttons.js
View file @ 38e0418e
......@@ -10,10 +10,14 @@ Polymer('gaia-paper-button', {
}
});
Polymer('gaia-core-icon-button', {
onKeyDown: function(e) {
if (!this.disabled && (e.keyCode == 13 || e.keyCode == 32))
this.fire('tap');
Polymer('gaia-icon-button', {
ready: function() {
this.classList.add('custom-appearance');
},
onMouseDown: function(e) {
/* Prevents button focusing after mouse click. */
e.preventDefault();
}
});
......
chrome/browser/resources/chromeos/login/gaia_core_icon_button.css → chrome/browser/resources/chromeos/login/gaia_icon_button.css
View file @ 38e0418e
......@@ -3,6 +3,29 @@
* found in the LICENSE file.
*/
:host(:hover:not([disabled])) {
box-shadow: none;
:host {
background: transparent;
border: none;
border-radius: 50%;
height: 24px;
margin: 0;
outline: none;
padding: 0;
width: 24px;
}
:host(:hover) {
cursor: pointer;
}
:host(:focus) {
background: rgba(0, 0, 0, .16);
border-color: transparent;
opacity: 0.75;
}
:host(:active) {
background: rgba(0, 0, 0, .12);
opacity: 1.0;
}
chrome/browser/resources/chromeos/login/gaia_password_changed.css
View file @ 38e0418e
......@@ -18,14 +18,14 @@ core-icon[icon='warning'] {
}
#closeButton {
color: rgb(255, 255, 255);
color: white;
position: absolute;
right: 0;
top: 0;
right: 10px;
top: 10px;
z-index: 1;
}
:host-context(html[dir=rtl]) #closeButton {
left: 0;
left: 10px;
right: auto;
}
chrome/browser/resources/chromeos/login/gaia_password_changed.html
View file @ 38e0418e
......@@ -35,8 +35,6 @@
attributes="email">
<template>
<link rel="stylesheet" href="gaia_password_changed.css">
<gaia-core-icon-button id="closeButton" icon="close" on-tap="{{onClose}}">
</gaia-core-icon-button>
<core-animated-pages id="animatedPages" transitions="cross-fade-all" flex
on-core-animated-pages-transition-end="{{onTransitionEnd}}">
<section flex>
......@@ -87,5 +85,8 @@
</throbber-notice>
</section>
</core-animated-pages>
<button id="closeButton" is="gaia-icon-button" icon="close"
i18n-values="aria-label:closeButton" on-click="{{onClose}}">
</button>
</template>
</polymer-element>
chrome/browser/resources/chromeos/login/offline_gaia.css
View file @ 38e0418e
......@@ -11,15 +11,15 @@
}
#backButton {
color: rgb(255, 255, 255);
left: 0;
color: white;
left: 10px;
position: absolute;
top: 0;
top: 10px;
z-index: 1;
}
:host-context(html[dir=rtl]) #backButton {
left: auto;
right: 0;
right: 10px;
transform: scaleX(-1);
}
chrome/browser/resources/chromeos/login/offline_gaia.html
View file @ 38e0418e
......@@ -37,9 +37,6 @@
attributes="enterpriseInfo emailDomain">
<template>
<link rel="stylesheet" href="offline_gaia.css">
<gaia-core-icon-button id="backButton" icon="arrow-back"
on-tap="{{onBack}}">
</gaia-core-icon-button>
<core-animated-pages id="animatedPages" transitions="slide-from-right"
valueattr="id"
on-core-animated-pages-transition-end="{{onTransitionEnd}}" flex>
......@@ -91,5 +88,8 @@
</gaia-card>
</section>
</core-animated-pages>
<button id="backButton" is="gaia-icon-button" icon="arrow-back"
i18n-values="aria-label:backButton" on-click="{{onBack}}">
</button>
</template>
</polymer-element>
chrome/browser/resources/chromeos/login/oobe_screen_oauth_enrollment_webview.css
View file @ 38e0418e
......@@ -122,8 +122,14 @@
margin: 0 auto;
}
#oauth-enroll-cancel-button,
#oauth-enroll-back-button {
position: absolute;
top: 10px;
}
#oauth-enroll-cancel-button {
background-image: url(chrome://theme/IDR_LOGIN_CLOSE_BUTTTON_ON_WHITE);
color: rgba(0, 0, 0, .54);
right: 10px;
}
......@@ -132,13 +138,17 @@ html[dir=rtl] #oauth-enroll-cancel-button {
right: auto;
}
#oauth-enrollment.saml #oauth-enroll-cancel-button {
color: rgba(0, 0, 0, .54);
}
.oauth-enroll-state-signin #oauth-enroll-cancel-button,
.oauth-enroll-state-working #oauth-enroll-cancel-button {
background-image: url(chrome://theme/IDR_LOGIN_CLOSE_BUTTTON);
color: white;
}
#oauth-enroll-back-button {
background-image: url(chrome://theme/IDR_LOGIN_BACK_BUTTTON);
color: white;
left: 10px;
}
......
chrome/browser/resources/chromeos/login/oobe_screen_oauth_enrollment_webview.html
View file @ 38e0418e
......@@ -63,10 +63,9 @@
<span id="oauth-saml-notice-message"></span>
</div>
<div id="oauth-enrollment-controls" class="step-controls"></div>
<button id="oauth-enroll-back-button"
class="custom-appearance custom-gaia-button" hidden
i18n-values="aria-label:backButton" tabindex="0"></button>
<button id="oauth-enroll-cancel-button"
class="custom-appearance custom-gaia-button oauth-enroll-button"
i18n-values="aria-label:closeButton" tabindex="0"></button>
<button id="oauth-enroll-back-button" is="gaia-icon-button" icon="arrow-back"
hidden i18n-values="aria-label:backButton" tabindex="0"></button>
<button id="oauth-enroll-cancel-button" is="gaia-icon-button" icon="close"
class="oauth-enroll-button" i18n-values="aria-label:closeButton"
tabindex="0"></button>
</div>
chrome/browser/resources/chromeos/login/oobe_screen_oauth_enrollment_webview.js
View file @ 38e0418e
......@@ -118,18 +118,9 @@ login.createScreen('OAuthEnrollmentScreen', 'oauth-enrollment', function() {
$('oauth-enroll-success-card').addEventListener(
'buttonclick', doneCallback);
$('oauth-enroll-cancel-button').addEventListener('mousedown',
function(e) {
e.preventDefault();
});
$('oauth-enroll-cancel-button').addEventListener('click',
this.cancel.bind(this));
$('oauth-enroll-back-button').addEventListener('mousedown', function(e) {
e.preventDefault();
});
$('oauth-enroll-back-button').addEventListener('click',
(function(e) {
$('oauth-enroll-back-button').hidden = true;
......
chrome/browser/resources/chromeos/login/screen_gaia_signin.css
View file @ 38e0418e
......@@ -65,67 +65,30 @@ throbber-notice {
display: none;
}
.custom-gaia-button {
background: transparent none;
background-position: center;
background-repeat: no-repeat;
border-radius: 50%;
height: 24px;
#close-button-item,
#back-button-item {
color: white;
position: absolute;
top: 10px;
width: 24px;
z-index: 1;
}
.custom-gaia-button:hover {
cursor: pointer;
}
.custom-gaia-button:focus {
background: rgba(0,0,0,.16);
background-position: center;
background-repeat: no-repeat;
opacity: 0.75;
}
/* Even more specificity than button.custom-appearance:focus:focus */
.custom-gaia-button:focus:focus:focus {
border-color: transparent;
}
.custom-gaia-button:active {
background: rgba(0,0,0,.12);
background-position: center;
background-repeat: no-repeat;
opacity: 1.0;
#close-button-item:disabled,
#back-button-item:disabled {
color: rgb(127, 127, 127);
}
#close-button-item {
background-image: url(chrome://theme/IDR_LOGIN_CLOSE_BUTTTON);
right: 10px;
}
html[dir=rtl] #close-button-item {
#back-button-item {
left: 10px;
right: auto;
}
.loading #close-button-item,
.new-gaia-flow .full-width #close-button-item {
background-image: url(chrome://theme/IDR_LOGIN_CLOSE_BUTTTON_ON_WHITE);
}
.loading.auth-completed #close-button-item {
display: none;
}
#close-button-item:disabled {
background-image: url(chrome://theme/IDR_LOGIN_CLOSE_BUTTTON_MASKED);
}
#back-button-item {
background-image: url(chrome://theme/IDR_LOGIN_BACK_BUTTTON);
html[dir=rtl] #close-button-item {
left: 10px;
right: auto;
}
html[dir=rtl] #back-button-item {
......@@ -134,12 +97,17 @@ html[dir=rtl] #back-button-item {
right: 10px;
}
.loading #close-button-item,
.new-gaia-flow .full-width #close-button-item {
color: rgba(0, 0, 0, .54);
}
.new-gaia-flow .full-width #back-button-item {
display: none;
}
#back-button-item:disabled {
background-image: url(chrome://theme/IDR_LOGIN_BACK_BUTTTON_MASKED);
.loading.auth-completed #close-button-item {
display: none;
}
.signin-text {
......@@ -248,7 +216,7 @@ webview#signin-frame.show {
}
#createSupervisedUserSeparator {
background-color: rgba(128,128,128,0.3);
background-color: rgba(128, 128, 128, 0.3);
height: 1px;
width: 200px;
}
......
chrome/browser/resources/chromeos/login/screen_gaia_signin.html
View file @ 38e0418e
......@@ -44,8 +44,8 @@
<div id="saml-notice-container" hidden>
<span id="saml-notice-message"></span>
</div>
<button id="back-button-item" class="custom-appearance custom-gaia-button"
hidden i18n-values="aria-label:backButton" tabindex="0"></button>
<button id="close-button-item" class="custom-appearance custom-gaia-button"
hidden i18n-values="aria-label:closeButton" tabindex="0"></button>
<button id="back-button-item" is="gaia-icon-button" icon="arrow-back" hidden
i18n-values="aria-label:backButton" tabindex="0"></button>
<button id="close-button-item" is="gaia-icon-button" icon="close" hidden
i18n-values="aria-label:closeButton" tabindex="0"></button>
</div>
chrome/browser/resources/chromeos/login/screen_gaia_signin.js
View file @ 38e0418e
......@@ -179,20 +179,12 @@ login.createScreen('GaiaSigninScreen', 'gaia-signin', function() {
e.preventDefault();
});
$('back-button-item').addEventListener('mousedown', function(e) {
e.preventDefault();
});
$('back-button-item').addEventListener('click', function(e) {
$('back-button-item').hidden = true;
$('signin-frame').back();
e.preventDefault();
});
$('close-button-item').addEventListener('mousedown', function(e) {
e.preventDefault();
});
$('close-button-item').addEventListener('click', function(e) {
this.cancel();
e.preventDefault();
......
ui/login/oobe.css
View file @ 38e0418e
......@@ -34,15 +34,16 @@ button {
/* Follow same focus coloring as in widgets.css */
/* Do not apply this style to restricted button state. */
button.custom-appearance:not(.button-restricted):not(.button-fancy) {
button.custom-appearance:not(.button-restricted):not(.button-fancy):not(
[is="gaia-icon-button"]) {
-webkit-transition: border-color 200ms;
border: 1px solid transparent;
/* Don't grey out disabled buttons. */
color: buttontext !important;
}
/* ':focus' used twice to increase specificity. */
button.custom-appearance:focus:focus {
/* ':focus' used three times to increase specificity. */
button.custom-appearance:focus:focus:focus {
border-color: rgb(77, 144, 254);
}
......
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