diff options
| author | mdjones <mdjones@chromium.org> | 2015-04-13 13:10:56 -0700 |
|---|---|---|
| committer | Commit bot <commit-bot@chromium.org> | 2015-04-13 20:11:29 +0000 |
| commit | 1877ede1bc9f7b24685b940a1af96bc339c9f329 (patch) | |
| tree | 26e278a34329a0d4d94db01f47111db1ee9d23bf /components | |
| parent | 1936b6818a7fdc3d5d1f1b142ebb7d7c2180e983 (diff) | |
| download | chromium_src-1877ede1bc9f7b24685b940a1af96bc339c9f329.zip chromium_src-1877ede1bc9f7b24685b940a1af96bc339c9f329.tar.gz chromium_src-1877ede1bc9f7b24685b940a1af96bc339c9f329.tar.bz2 | |
Better distiller feedback animation
This change makes the feedback form that sits at the bottom
of a distilled page swipe left and close the gap it leaves
as opposed to just fading out.
BUG=472890
Review URL: https://codereview.chromium.org/1075663002
Cr-Commit-Position: refs/heads/master@{#324905}
Diffstat (limited to 'components')
3 files changed, 14 insertions, 7 deletions
diff --git a/components/dom_distiller/core/css/distilledpage.css b/components/dom_distiller/core/css/distilledpage.css index 13a3967..adfb682 100644 --- a/components/dom_distiller/core/css/distilledpage.css +++ b/components/dom_distiller/core/css/distilledpage.css @@ -308,19 +308,20 @@ pre { } /* Footer feedback form. */ -.contentWrap { +#contentWrap { min-height: 100%; overflow: auto; padding-bottom: 120px; } .footerFeedback { + background-color: #4285F4; clear: both; + color: #fff; display: none; height: 120px; margin-top: -120px; - background-color: #4285F4; - color: #fff; + width: 100%; } .feedbackContent { @@ -363,15 +364,17 @@ pre { /* Feedback fade out */ .fadeOut { animation-duration: 0.5s; - animation-name: fadeOutAnimation; + animation-name: fadeOutAndSwipeAnimation; } -@keyframes fadeOutAnimation { +@keyframes fadeOutAndSwipeAnimation { from { + margin-left: 0%; opacity: 1; } to { + margin-left: -100%; opacity: 0; } } diff --git a/components/dom_distiller/core/html/dom_distiller_viewer.html b/components/dom_distiller/core/html/dom_distiller_viewer.html index 02704ea..962df6a 100644 --- a/components/dom_distiller/core/html/dom_distiller_viewer.html +++ b/components/dom_distiller/core/html/dom_distiller_viewer.html @@ -13,7 +13,7 @@ found in the LICENSE file. <link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'> </head> <body dir="$8" class="$4"> - <div class="contentWrap"> + <div id="contentWrap"> <div id="mainContent"> <article> <header id="articleHeader"> diff --git a/components/dom_distiller/core/javascript/dom_distiller_viewer.js b/components/dom_distiller/core/javascript/dom_distiller_viewer.js index 39d7f5c..78b6749 100644 --- a/components/dom_distiller/core/javascript/dom_distiller_viewer.js +++ b/components/dom_distiller/core/javascript/dom_distiller_viewer.js @@ -156,6 +156,10 @@ document.getElementById('feedbackNo').addEventListener('click', function(e) { document.getElementById('feedbackContainer').addEventListener('animationend', function(e) { - document.getElementById('feedbackContainer').style.display = "none"; + document.getElementById('feedbackContainer').style.display = 'none'; + // Close the gap where the feedback form was. + var contentWrap = document.getElementById('contentWrap'); + contentWrap.style.transition = '0.5s'; + contentWrap.style.paddingBottom = '0px'; }, true); |