Skip to content

GitLab

T
tangled
Commit db0f0c91 authored by mathp@chromium.org's avatar mathp@chromium.org
Browse files
Options

[Search] Make the text swoosh away off the screen when the user taps the opt-in link. 

Previously, nothing would happen. Now there is a transition, everything slides away to the bottom of the screen and the rest is loaded.

BUG=402017
TEST=manual
R=huangs@chromium.org, pedrosimonetti@chromium.org

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

Cr-Commit-Position: refs/heads/master@{#288974}
git-svn-id: svn://svn.chromium.org/chrome/trunk/src@288974 0039d316-1c4b-4281-b951-d872f2087c98
parent 9952eb43
Hide whitespace changes
Inline Side-by-side
Showing with 24 additions and 6 deletions
chrome/browser/resources/contextual_search/promo.css
View file @ db0f0c91
...@@ -46,3 +46,10 @@ a { ...@@ -46,3 +46,10 @@ a {
top: calc(70% - 76px /* action bar */ - 69px /* height of content */); top: calc(70% - 76px /* action bar */ - 69px /* height of content */);
width: 100%; width: 100%;
} }
#container.hide {
-webkit-transform: scale(0.95);
-webkit-transition-property: opacity, -webkit-transform;
-webkit-transition-duration: 218ms;
opacity: 0;
}
chrome/browser/resources/contextual_search/promo.html
View file @ db0f0c91
...@@ -4,18 +4,20 @@ ...@@ -4,18 +4,20 @@
Use of this source code is governed by a BSD-style license that can be Use of this source code is governed by a BSD-style license that can be
found in the LICENSE file. --> found in the LICENSE file. -->
<head> <head>
<script src="promo.js"></script>
<script src="../../../../ui/webui/resources/js/util.js"></script> <script src="../../../../ui/webui/resources/js/util.js"></script>
<script src="../../../../ui/webui/resources/js/load_time_data.js"></script> <script src="../../../../ui/webui/resources/js/load_time_data.js"></script>
<script src="promo.js"></script>
<link rel="stylesheet" href="promo.css"> <link rel="stylesheet" href="promo.css">
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no"> <meta name="viewport" content="width=device-width, user-scalable=no">
</head> </head>
<body> <body>
<p i18n-content="description"></p> <div id="container">
<div id="button-container"> <p i18n-content="description"></p>
<span class="label"><a href="#optout" i18n-content="optOut"></a></span> <div id="button-container">
<span class="label"><a class="colored" href="#optin" i18n-content="optIn"></a></span> <span class="label"><a href="#optout" i18n-content="optOut"></a></span>
<span id="optin-label" class="label"><a class="colored" href="#optin" i18n-content="optIn"></a></span>
</div>
</div> </div>
</body> </body>
</html> </html>
chrome/browser/resources/contextual_search/promo.js
View file @ db0f0c91
/* Copyright 2014 The Chromium Authors. All rights reserved. /* Copyright 2014 The Chromium Authors. All rights reserved.
Use of this source code is governed by a BSD-style license that can be Use of this source code is governed by a BSD-style license that can be
found in the LICENSE file. found in the LICENSE file.
TODO(mathp): Add some JS here.
*/ */
/**
* On load, registers the handler to add the 'hide' class to the container
* element in order to hide it.
*/
window.onload = function() {
$('optin-label').addEventListener('click', function() {
$('container').classList.add('hide');
});
};
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