Skip to content

Commit

Permalink
Update new note action button animation in lock screen UI
Browse files Browse the repository at this point in the history 
  * Smooth up animation by using scale transform.
  * Add fade-out animation even in case the note was not launched from
    the lock screen.
  * Wait until the fade out animation ends before showing version info.

Bug:762097

Cq-Include-Trybots: master.tryserver.chromium.linux:closure_compilation
Change-Id: Ie6cb4b733c1e09820644fd6ff406dcf4a66e5ade
Reviewed-on: https://chromium-review.googlesource.com/656607
Commit-Queue: Toni Barzic <tbarzic@chromium.org>
Reviewed-by: Jacob Dufault <jdufault@chromium.org>
Cr-Commit-Position: refs/heads/master@{#501147}
  • Loading branch information
Toni Barzic authored and Commit Bot committed Sep 12, 2017
1 parent b966618 commit e5f29c8
Show file tree
Hide file tree
Showing 3 changed files with 141 additions and 104 deletions.
64 changes: 32 additions & 32 deletions chrome/browser/resources/chromeos/login/md_top_header_bar.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,10 +4,13 @@
*/

#top-header-bar {
z-index: 1;
}

.top-header-bar-strip {
display: flex;
justify-content: flex-end;
width: 100%;
z-index: 1;
}

#top-header-bar.version-labels-unset #version-labels {
Expand All @@ -25,20 +28,6 @@
z-index: 1;
}

.new-note-action-container-activated {
bottom: 0;
height: 100%;
left: 0;
position: absolute;
right: 0;
top: 0;
width: 100%;
}

.new-note-action-above-login-header {
z-index: 5;
}

.new-note-action {
-webkit-tap-highlight-color: transparent;
background-color: rgba(0, 0, 0, 0.2);
Expand All @@ -47,20 +36,12 @@
display: flex;
height: 44px;
justify-content: flex-end;
transition: all 300ms ease-in;
transition-duration: 300ms;
transition-property: border-radius, height, width;
width: 44px;
z-index: 1;
}

.new-note-action.disabled {
cursor: default;
pointer-events: none;
}

.new-note-action {
transition: all 300ms;
}

html[dir=rtl] .new-note-action {
border-radius: 0 0 44px 0;
}
Expand All @@ -78,23 +59,42 @@ html[dir=rtl] .new-note-action:focus {
border-radius: 0 0 48px 0;
}

.new-note-action-container-activated > .new-note-action {
.new-note-action-icon {
-webkit-padding-end: 11px;
height: 16px;
padding-top: 12px;
width: 16px;
}

.new-note-background {
background-color: black;
border-radius: 0 0 0 100%;
bottom: auto;
display: none;
left: auto;
position: absolute;
right: 0;
top: 0;
transform-origin: top right;
z-index: 1;
}

html[dir=rtl] .new-note-action-container-activated > .new-note-action {
.new-note-background.new-note-action-above-login-header {
z-index: 5;
}

html[dir=rtl] .new-note-background {
border-radius: 0 0 100% 0;
left: 0;
right: auto;
transform-origin: top left;
}

.new-note-action-icon {
-webkit-padding-end: 11px;
height: 16px;
padding-top: 12px;
width: 16px;
#top-header-bar.new-note-activated .new-note-background {
display: block;
}

.new-note-background-animated {
transition-duration: 300ms;
transition-property: opacity, transform;
}
26 changes: 15 additions & 11 deletions chrome/browser/resources/chromeos/login/md_top_header_bar.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,17 +10,21 @@
</iron-iconset-svg>

<div id="top-header-bar">
<div id="version-labels" hidden>
<div id="version"></div>
<div id="asset-id"></div>
<div id="bluetooth-name" hidden></div>
</div>
<div hidden id="new-note-action-container" class="new-note-action-container">
<div role="button" id="new-note-action" class="new-note-action"
tabindex="0" i18n-values="aria-label:newLockScreenNoteButton">
<iron-icon icon="new-note-action:action-icon"
id="new-note-action-icon" class="new-note-action-icon">
</iron-icon>
<div class="top-header-bar-strip">
<div id="version-labels" hidden>
<div id="version"></div>
<div id="asset-id"></div>
<div id="bluetooth-name" hidden></div>
</div>
<div hidden id="new-note-action-container"
class="new-note-action-container">
<div role="button" id="new-note-action" class="new-note-action"
tabindex="0" i18n-values="aria-label:newLockScreenNoteButton">
<iron-icon icon="new-note-action:action-icon"
id="new-note-action-icon" class="new-note-action-icon">
</iron-icon>
</div>
</div>
</div>
<div id="new-note-background" class="new-note-background"></div>
</div>
155 changes: 94 additions & 61 deletions chrome/browser/resources/chromeos/login/md_top_header_bar.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,12 @@ cr.define('login', function() {
KEYBOARD: 'NEW_NOTE_REQUEST.KEYBOARD'
};

/**
* The size of new note action element.
* @const {number}
*/
var NEW_NOTE_ACTION_ELEMENT_SIZE = 44;

/**
* Calculates diagonal length of a rectangle with the provided sides.
* @param {!number} x The rectangle width.
Expand Down Expand Up @@ -347,6 +353,12 @@ cr.define('login', function() {
/** @private {SwipeDetector} */
swipeDetector_: null,

/**
* Expected size of fully expanded new note action background.
* @private {number}
*/
fullBackgroundSize_: 0,

set lockScreenAppsState(state) {
if (this.lockScreenAppsState_ == state)
return;
Expand Down Expand Up @@ -386,38 +398,26 @@ cr.define('login', function() {
this.lockScreenAppsState_ != LOCK_SCREEN_APPS_STATE.AVAILABLE &&
this.lockScreenAppsState_ != LOCK_SCREEN_APPS_STATE.FOREGROUND;

var newNoteActionEnabled =
this.lockScreenAppsState_ == LOCK_SCREEN_APPS_STATE.AVAILABLE;
$('new-note-action').classList.toggle('disabled', !newNoteActionEnabled);
$('new-note-action')
.setAttribute('tabIndex', newNoteActionEnabled ? '0' : '-1');
$('new-note-action-icon').hidden = !newNoteActionEnabled;

// This might get set when the action is activated - reset it when the
// lock screen action is updated.
$('new-note-action-container')
$('new-note-background')
.classList.toggle('new-note-action-above-login-header', false);

if (this.lockScreenAppsState_ != LOCK_SCREEN_APPS_STATE.FOREGROUND) {
var transitionOut =
previousState == LOCK_SCREEN_APPS_STATE.FOREGROUND &&
this.lockScreenAppsState_ == LOCK_SCREEN_APPS_STATE.AVAILABLE;
$('new-note-action-container')
.classList.toggle(
'new-note-action-container-activated', transitionOut);
if (transitionOut) {
this.runOnNoteActionTransitionEnd_(function() {
$('new-note-action-container')
.classList.toggle('new-note-action-container-activated', false);
});
}
var animate = previousState == LOCK_SCREEN_APPS_STATE.FOREGROUND &&
this.lockScreenAppsState_ == LOCK_SCREEN_APPS_STATE.AVAILABLE;

$('new-note-action').style.removeProperty('border-bottom-left-radius');
$('new-note-action').style.removeProperty('border-bottom-right-radius');
$('new-note-action').style.removeProperty('height');
$('new-note-action').style.removeProperty('width');
$('new-note-action').style.removeProperty('background-color');
}
this.setBackgroundActive_(
this.lockScreenAppsState_ == LOCK_SCREEN_APPS_STATE.FOREGROUND,
animate, this.updateNewNoteActionVisibility_.bind(this));
},

/**
* Updates new note action element visibility state.
* @private
*/
updateNewNoteActionVisibility_: function() {
$('new-note-action').hidden =
this.lockScreenAppsState_ != LOCK_SCREEN_APPS_STATE.AVAILABLE;
},

/**
Expand Down Expand Up @@ -464,37 +464,68 @@ cr.define('login', function() {
* @private
*/
activateNoteAction_: function(requestType) {
$('new-note-action').classList.toggle('disabled', true);
$('new-note-action-icon').hidden = true;
$('new-note-action').hidden = true;
$('top-header-bar').classList.toggle('version-labels-unset', true);
$('new-note-background')
.classList.toggle('new-note-action-above-login-header', true);

this.runOnNoteActionTransitionEnd_(
(function() {
if (this.lockScreenAppsState_ != LOCK_SCREEN_APPS_STATE.AVAILABLE)
return;
chrome.send('requestNewLockScreenNote', [requestType]);
}).bind(this));

var container = $('new-note-action-container');
container.classList.toggle('new-note-action-container-activated', true);
container.classList.toggle('new-note-action-above-login-header', true);

var newNoteAction = $('new-note-action');
// Update new-note-action size to cover full screen - the element is a
// circle quadrant, intent is for the whole quadrant to cover the screen
// area, which means that the element size (radius) has to be set to the
// container diagonal. Note that, even though the final new-note-action
// element UI state is full-screen, the element is kept as circle quadrant
// for purpose of transition animation (to get the effect of the element
// radius increasing until it covers the whole screen).
var targetSize =
'' + diag(container.clientWidth, container.clientHeight) + 'px';
newNoteAction.style.setProperty('width', targetSize);
newNoteAction.style.setProperty('height', targetSize);
newNoteAction.style.setProperty(
isRTL() ? 'border-bottom-right-radius' : 'border-bottom-left-radius',
targetSize);
newNoteAction.style.setProperty('background-color', '#000');
this.setBackgroundActive_(true /*active*/, true /*animate*/, function() {
chrome.send('requestNewLockScreenNote', [requestType]);
});
},

/**
* Updates the new note action element style for active note taking.
* @param {boolean} active Whether the note action is in active state.
* @param {boolean} animate Whether the UI state changes should be animated.
* For example, whether the note background should be expanded or scaled
* down with an animation.
* @param {function()=} callback Called when the UI state change is
* complete.
* @private
*/
setBackgroundActive_: function(active, animate, callback) {
// Cache full background size - it will be used to calculate scale
// transform for animating new note action background.
var targetSize = diag(
$('scroll-container').clientWidth,
$('scroll-container').clientHeight);
if (this.fullBackgroundSize_ != targetSize) {
$('new-note-background').style.setProperty('height', targetSize + 'px');
$('new-note-background').style.setProperty('width', targetSize + 'px');
this.fullBackgroundSize_ = targetSize;
}

if (active || !animate)
$('top-header-bar').classList.toggle('new-note-activated', active);

if (animate) {
$('new-note-background')
.style.setProperty(
'transition-timing-function', active ? 'ease-in' : 'ease-out');
$('new-note-background')
.classList.toggle('new-note-background-animated', true);

this.runOnNoteActionTransitionEnd_(function() {
$('new-note-background')
.classList.toggle('new-note-background-animated', false);
$('top-header-bar').classList.toggle('new-note-activated', active);

if (callback)
callback();
});
}

var newNoteBackground = $('new-note-background');
var scale =
active ? 1 : NEW_NOTE_ACTION_ELEMENT_SIZE / this.fullBackgroundSize_;
newNoteBackground.style.setProperty('transform', 'scale(' + scale + ')');
newNoteBackground.style.setProperty('opacity', active ? '1' : '0.2');

// If background is updated with animation, callback will be run when
// the animation finishes.
if (!animate && callback)
callback();
},

/**
Expand All @@ -505,11 +536,13 @@ cr.define('login', function() {
* @param {!function()} callback Closure to run on transition end.
*/
runOnNoteActionTransitionEnd_: function(callback) {
$('new-note-action').addEventListener('transitionend', function listen() {
$('new-note-action').removeEventListener('transitionend', listen);
callback();
});
ensureTransitionEndEvent($('new-note-action'));
$('new-note-background')
.addEventListener('transitionend', function listen() {
$('new-note-background')
.removeEventListener('transitionend', listen);
callback();
});
ensureTransitionEndEvent($('new-note-background'));
}
};

Expand Down

0 comments on commit e5f29c8

Please sign in to comment.