diff options
| author | estade@chromium.org <estade@chromium.org@0039d316-1c4b-4281-b951-d872f2087c98> | 2011-09-10 05:24:44 +0000 |
|---|---|---|
| committer | estade@chromium.org <estade@chromium.org@0039d316-1c4b-4281-b951-d872f2087c98> | 2011-09-10 05:24:44 +0000 |
| commit | 819c4a7a8aee24595e8700933a261e99fa0a956f (patch) | |
| tree | 550f728d406275b516ff9db9aa2f46d10a6a1c79 /chrome/browser | |
| parent | d927a7ede41e9cbea95a0c3750ca981402f358ee (diff) | |
| download | chromium_src-819c4a7a8aee24595e8700933a261e99fa0a956f.zip chromium_src-819c4a7a8aee24595e8700933a261e99fa0a956f.tar.gz chromium_src-819c4a7a8aee24595e8700933a261e99fa0a956f.tar.bz2 | |
ntp4: fix positioning of notification bar
also, make it so you can't tab to or click on it when it's not showing
BUG=95930
TEST=manual
Review URL: http://codereview.chromium.org/7787014
git-svn-id: svn://svn.chromium.org/chrome/trunk/src@100568 0039d316-1c4b-4281-b951-d872f2087c98
Diffstat (limited to 'chrome/browser')
| -rw-r--r-- | chrome/browser/resources/ntp4/new_tab.css | 25 | ||||
| -rw-r--r-- | chrome/browser/resources/ntp4/new_tab.html | 10 | ||||
| -rw-r--r-- | chrome/browser/resources/ntp4/new_tab.js | 24 |
3 files changed, 42 insertions, 17 deletions
diff --git a/chrome/browser/resources/ntp4/new_tab.css b/chrome/browser/resources/ntp4/new_tab.css index ab32b6e..2d1bc27 100644 --- a/chrome/browser/resources/ntp4/new_tab.css +++ b/chrome/browser/resources/ntp4/new_tab.css @@ -27,28 +27,31 @@ body { display: none !important; } -#notification { - background-color: #FFF199; - border: 1px solid lightGrey; - border-radius: 6px; - color: black; - display: inline-block; - font-weight: bold; +#notification-container { + display: block; margin-top: 2px; - opacity: 100%; - padding: 7px 15px; position: relative; + text-align: center; z-index: 100; -webkit-transition-duration: 0.1s; -webkit-transition-property: opacity; } -#notification.inactive { - display: inline-block; +#notification-container.inactive { opacity: 0; -webkit-transition-duration: 0.2s; } +#notification { + background-color: #FFF199; + border: 1px solid lightGrey; + border-radius: 6px; + color: black; + display: inline-block; + font-weight: bold; + padding: 7px 15px; +} + #notification > div > div, #notification > div { display: inline-block; diff --git a/chrome/browser/resources/ntp4/new_tab.html b/chrome/browser/resources/ntp4/new_tab.html index 24e7973..600fa96 100644 --- a/chrome/browser/resources/ntp4/new_tab.html +++ b/chrome/browser/resources/ntp4/new_tab.html @@ -68,10 +68,12 @@ document.documentElement.setAttribute('touchui', true); </head> <body> - <div id="notification" class="inactive"> - <span></span> - <div id="notificationLinks"></div> - <button class="close-button"></button> + <div id="notification-container" class="inactive" hidden> + <div id="notification"> + <span></span> + <div id="notificationLinks"></div> + <button class="close-button"></button> + </div> </div> <div id="card-slider-frame"> diff --git a/chrome/browser/resources/ntp4/new_tab.js b/chrome/browser/resources/ntp4/new_tab.js index 8662374..f98b15e 100644 --- a/chrome/browser/resources/ntp4/new_tab.js +++ b/chrome/browser/resources/ntp4/new_tab.js @@ -56,6 +56,12 @@ cr.define('ntp4', function() { var dotList; /** + * The 'notification-container' element. + * @type {!Element|undefined} + */ + var notificationContainer; + + /** * The left and right paging buttons. * @type {!Element|undefined} */ @@ -155,6 +161,10 @@ cr.define('ntp4', function() { pageSwitcherEnd = getRequiredElement('page-switcher-end'); ntp4.initializePageSwitcher(pageSwitcherEnd); + notificationContainer = getRequiredElement('notification-container'); + notificationContainer.addEventListener( + 'webkitTransitionEnd', onNotificationTransitionEnd); + // Initialize the cardSlider without any cards at the moment var sliderFrame = getRequiredElement('card-slider-frame'); cardSlider = new CardSlider(sliderFrame, pageList, sliderFrame.offsetWidth); @@ -711,7 +721,8 @@ cr.define('ntp4', function() { }; var timeout = opt_timeout || 10000; - $('notification').classList.remove('inactive'); + notificationContainer.hidden = false; + notificationContainer.classList.remove('inactive'); notificationTimeout_ = window.setTimeout(hideNotification, timeout); } @@ -719,7 +730,16 @@ cr.define('ntp4', function() { * Hide the notification bubble. */ function hideNotification() { - $('notification').classList.add('inactive'); + notificationContainer.classList.add('inactive'); + } + + /** + * When done fading out, set hidden to true so the notification can't be + * tabbed to or clicked. + */ + function onNotificationTransitionEnd(e) { + if (notificationContainer.classList.contains('inactive')); + notificationContainer.hidden = true; } function setRecentlyClosedTabs(dataItems) { |