From 8accb1f34790233c6b82db1a76b031013d86dbda Mon Sep 17 00:00:00 2001 From: gorhill Date: Sun, 24 Aug 2014 10:04:22 -0400 Subject: [PATCH] this fixes #172 --- _locales/en/messages.json | 4 ++-- css/common.css | 45 ++++++++++++++++++++++++++++++++++++++- css/popup.css | 12 +++-------- js/i18n.js | 6 ++++++ popup.html | 10 ++++++--- 5 files changed, 62 insertions(+), 15 deletions(-) diff --git a/_locales/en/messages.json b/_locales/en/messages.json index 57b053d8d..91092fca2 100644 --- a/_locales/en/messages.json +++ b/_locales/en/messages.json @@ -32,8 +32,8 @@ "description":"appears as tab name in dashboard." }, "popupPowerSwitchInfo":{ - "message":"click the power button to
permanently disable or enable
µBlock for the current site", - "description":"English (mind the horizontal extent): click the power button to
permanently disable or enable
µBlock for the current site" + "message":"Click: permanently disable/enable µBlock for this site.\n\n-click: disable µBlock only on this page.", + "description":"English: Click: permanently disable/enable µBlock for this site.\n\n-click: disable µBlock only on this page." }, "popupBlockedRequestPrompt":{ "message":"requests blocked", diff --git a/css/common.css b/css/common.css index 39e82975c..3c28d3606 100644 --- a/css/common.css +++ b/css/common.css @@ -14,4 +14,47 @@ } #dashboard-nav-widgets { direction: __MSG_@@bidi_dir__; - } \ No newline at end of file + } + +/* https://developer.mozilla.org/en-US/docs/Web/CSS/::after#Tooltips */ +*[data-tip] { + cursor: pointer; + position: relative; + } +*[data-tip]:hover:after { + background-color: #ffffee; + border: 1px solid gray; + border-radius: 3px; + box-shadow: 1px 1px 3px gray; + color: black; + content: attr(data-tip); + direction: __MSG_@@bidi_dir__; + font: 11px sans-serif; + left: 0; + line-height: 130%; + min-width: 55vw; + padding: 4px 6px; + position: absolute; + text-align: __MSG_@@bidi_start_edge__; + top: 110%; + white-space: pre-line; + z-index: 20; + animation: tooltip 0.8s; + -webkit-animation: tooltip 0.8s; + } +*[data-tip][data-tip-anchor="top"]:hover:after { + bottom: 105%; + __MSG_@@bidi_start_edge__: auto; + __MSG_@@bidi_end_edge__: -10vw; + top: auto; + } +@keyframes tooltip { + 0% { opacity: 0; } + 85% { opacity: 0; } + 100% { opacity: 1; } + } +@-webkit-keyframes tooltip { + 0% { opacity: 0; } + 85% { opacity: 0; } + 100% { opacity: 1; } + } diff --git a/css/popup.css b/css/popup.css index 30d33bd14..d5e16c165 100644 --- a/css/popup.css +++ b/css/popup.css @@ -5,6 +5,7 @@ body { font: 13px sans-serif; background-color: white; direction: __MSG_@@bidi_dir__; + min-width: 160px; } h1,h2,h3,h4 { margin: 0; @@ -36,7 +37,8 @@ p { text-align: center; } #switch .fa { - font-size: 64px; + margin: 0; + font-size: 96px; color: green; cursor: pointer; } @@ -74,11 +76,3 @@ p { .tool:hover { color: #444; } -#options { - margin: 16px 0 0 0; - font-size: 12px; - } -.dim { - color: #888; - text-decoration: none; - } diff --git a/js/i18n.js b/js/i18n.js index 68a037d63..a16b63a48 100644 --- a/js/i18n.js +++ b/js/i18n.js @@ -31,4 +31,10 @@ uDom.onLoad(function() { this.setAttribute('title', title); } }); + uDom('[data-i18n-tip]').forEach(function() { + this.setAttribute( + 'data-tip', + chrome.i18n.getMessage(this.getAttribute('data-i18n-tip')).replace(/
/g, '') + ); + }); }); diff --git a/popup.html b/popup.html index 4d22b75d0..ca163e3fa 100644 --- a/popup.html +++ b/popup.html @@ -11,10 +11,14 @@

µBlock

-

-

+

+

-

  

+

+   +   + +

?

?