mirror of
https://github.com/gorhill/uBlock.git
synced 2024-09-02 09:09:38 +02:00
better tooltips for popup UI
This commit is contained in:
parent
2dde6f15de
commit
eaa3ac53d5
@ -13,65 +13,6 @@
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
/* https://developer.mozilla.org/en-US/docs/Web/CSS/::after#Tooltips */
|
||||
[data-tip] {
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
}
|
||||
body:not(.advancedUser) [data-tip]:after {
|
||||
background-color: #ffffee;
|
||||
border: 1px solid gray;
|
||||
border-radius: 3px;
|
||||
box-shadow: 1px 1px 3px gray;
|
||||
box-sizing: border-box;
|
||||
color: black;
|
||||
content: attr(data-tip);
|
||||
font: 12px sans-serif;
|
||||
left: 0.5em;
|
||||
line-height: 130%;
|
||||
opacity: 0;
|
||||
padding: 4px 6px;
|
||||
pointer-events: none;
|
||||
position: fixed;
|
||||
right: 0.5em;
|
||||
text-align: left;
|
||||
top: 110%;
|
||||
visibility: hidden;
|
||||
white-space: pre-line;
|
||||
z-index: 20;
|
||||
}
|
||||
body [data-tip]:hover:after {
|
||||
opacity: 1;
|
||||
position: absolute;
|
||||
transition: visibility 0s 0.6s, opacity 0.2s 0.7s;
|
||||
-webkit-transition: visibility 0s 0.6s, opacity 0.2s 0.7s;
|
||||
visibility: visible;
|
||||
}
|
||||
body[dir=rtl] [data-tip]:hover:after {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
body [data-tip][data-tip-anchor="top"]:hover:after {
|
||||
bottom: 140%;
|
||||
left: initial;
|
||||
top: auto;
|
||||
width: 8.5em;
|
||||
}
|
||||
body[dir=ltr] [data-tip][data-tip-anchor="top"]:hover:after {
|
||||
right: 0;
|
||||
}
|
||||
body[dir=rtl] [data-tip][data-tip-anchor="top"]:hover:after {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
body [data-tip][data-tip-anchor="topcenter"]:hover:after {
|
||||
bottom: 140%;
|
||||
left: -225%;
|
||||
right: initial;
|
||||
top: auto;
|
||||
width: 8.5em;
|
||||
}
|
||||
|
||||
.hiddenFileInput {
|
||||
visibility: hidden;
|
||||
width: 0;
|
||||
|
@ -103,10 +103,6 @@ p {
|
||||
body.off #switch .fa {
|
||||
color: #ccc;
|
||||
}
|
||||
#switch-hint {
|
||||
color: #888;
|
||||
font-size: 11px;
|
||||
}
|
||||
#page-blocked {
|
||||
font-size: 20px;
|
||||
}
|
||||
@ -150,11 +146,16 @@ body.off #switch .fa {
|
||||
}
|
||||
#extraTools > span > span.badge {
|
||||
color: #000;
|
||||
bottom: -2px;
|
||||
bottom: 0;
|
||||
font: 10px sans-serif;
|
||||
left: 100%;
|
||||
position: absolute;
|
||||
}
|
||||
body[dir="ltr"] #extraTools > span > span.badge {
|
||||
left: 100%;
|
||||
}
|
||||
body[dir="rtl"] #extraTools > span > span.badge {
|
||||
right: 100%;
|
||||
}
|
||||
#extraTools > span.on > span:last-of-type {
|
||||
color: #e00;
|
||||
font-size: 20px;
|
||||
@ -202,6 +203,36 @@ body.dirty #refresh:hover {
|
||||
color: black;
|
||||
}
|
||||
|
||||
#tooltip {
|
||||
background-color: #ffffee;
|
||||
border: 1px solid gray;
|
||||
border-radius: 3px;
|
||||
box-shadow: 1px 1px 3px gray;
|
||||
box-sizing: border-box;
|
||||
color: black;
|
||||
cursor: pointer;
|
||||
font: 12px sans-serif;
|
||||
left: 5%;
|
||||
line-height: 130%;
|
||||
margin: 0.5em 0;
|
||||
opacity: 0;
|
||||
padding: 4px 6px;
|
||||
pointer-events: none;
|
||||
position: fixed;
|
||||
text-align: center;
|
||||
visibility: hidden;
|
||||
white-space: pre-line;
|
||||
width: 90%;
|
||||
z-index: 100;
|
||||
}
|
||||
#tooltip.show {
|
||||
transition: opacity 0.2s 0.7s;
|
||||
-webkit-transition: opacity 0.2s 0.7s;
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
|
||||
#firewallContainer {
|
||||
border: 0;
|
||||
font-size: 12px;
|
||||
|
@ -462,7 +462,10 @@ var renderPopup = function() {
|
||||
|
||||
var renderPopupLazy = function() {
|
||||
var onDataReady = function(data) {
|
||||
uDom('#noCosmeticFiltering > span.badge').text(data.hiddenElementCount);
|
||||
var v = data.hiddenElementCount;
|
||||
uDom('#noCosmeticFiltering > span.badge').text(
|
||||
typeof v === 'number' ? v.toLocaleString() : v
|
||||
);
|
||||
};
|
||||
|
||||
messager.send({
|
||||
@ -756,6 +759,39 @@ var getPopupData = function(tabId) {
|
||||
|
||||
/******************************************************************************/
|
||||
|
||||
var onShowTooltip = function() {
|
||||
if ( popupData.advancedUserEnabled ) {
|
||||
return;
|
||||
}
|
||||
|
||||
var tip = document.getElementById('tooltip');
|
||||
var target = this;
|
||||
|
||||
tip.textContent = target.getAttribute('data-tip');
|
||||
tip.style.removeProperty('top');
|
||||
tip.style.removeProperty('bottom');
|
||||
|
||||
// Default is "over"
|
||||
var pos;
|
||||
var over = target.getAttribute('data-tip-position') !== 'under';
|
||||
if ( over ) {
|
||||
pos = document.body.getBoundingClientRect().height -
|
||||
target.getBoundingClientRect().top;
|
||||
tip.style.setProperty('bottom', pos + 'px');
|
||||
} else {
|
||||
pos = target.getBoundingClientRect().bottom;
|
||||
tip.style.setProperty('top', pos + 'px');
|
||||
}
|
||||
|
||||
uDom(tip).addClass('show');
|
||||
};
|
||||
|
||||
var onHideTooltip = function() {
|
||||
uDom('#tooltip').removeClass('show');
|
||||
};
|
||||
|
||||
/******************************************************************************/
|
||||
|
||||
// Make menu only when popup html is fully loaded
|
||||
|
||||
uDom.onLoad(function () {
|
||||
@ -776,6 +812,9 @@ uDom.onLoad(function () {
|
||||
uDom('.hnSwitch').on('click', toggleHostnameSwitch);
|
||||
uDom('#saveRules').on('click', saveFirewallRules);
|
||||
uDom('[data-i18n="popupAnyRulePrompt"]').on('click', toggleMinimize);
|
||||
|
||||
uDom('body').on('mouseenter', '[data-tip]', onShowTooltip)
|
||||
.on('mouseleave', '[data-tip]', onHideTooltip);
|
||||
});
|
||||
|
||||
/******************************************************************************/
|
||||
|
@ -13,13 +13,12 @@
|
||||
<a href="dashboard.html" target="_blank" id="gotoPrefs" title="popupTipDashboard"><span id="appname"> </span><span id="version"> </span></a>
|
||||
<div id="panes">
|
||||
<div>
|
||||
<p id="switch" data-i18n-tip="popupPowerSwitchInfo"><span class="fa"></span></p>
|
||||
<p id="switch-hint"></p>
|
||||
<p id="switch" data-i18n-tip="popupPowerSwitchInfo" data-tip-position="under"><span class="fa"></span></p>
|
||||
<h2 id="dfToggler" data-i18n="popupBlockedRequestPrompt"> </h2>
|
||||
<p class="statName">
|
||||
<span data-i18n="popupBlockedOnThisPagePrompt"> </span> 
|
||||
<span id="gotoPick" class="fa tool" data-i18n-tip="popupTipPicker" data-tip-anchor="top"></span> 
|
||||
<a href="#" target="_blank" id="gotoLog" class="fa tool" data-i18n-tip="popupTipLog" data-tip-anchor="top"></a>
|
||||
<span id="gotoPick" class="fa tool" data-i18n-tip="popupTipPicker"></span> 
|
||||
<a href="#" target="_blank" id="gotoLog" class="fa tool" data-i18n-tip="popupTipLog"></a>
|
||||
</p>
|
||||
<p class="statValue" id="page-blocked">?</p>
|
||||
<p class="statName" data-i18n="popupBlockedSinceInstallPrompt"> </p>
|
||||
@ -27,12 +26,13 @@
|
||||
<h2 data-i18n="popupHitDomainCountPrompt"> </h2>
|
||||
<p class="statValue" id="popupHitDomainCount"> </p>
|
||||
<div id="extraTools">
|
||||
<span id="noPopups" class="hnSwitch fa" data-i18n-tip="popupTipNoPopups" data-tip-anchor="topcenter"><span></span></span>
|
||||
<span id="noStrictBlocking" class="hnSwitch fa" data-i18n-tip="popupTipNoStrictBlocking" data-tip-anchor="topcenter"><span></span></span>
|
||||
<span id="noCosmeticFiltering" class="hnSwitch fa" data-i18n-tip="popupTipNoCosmeticFiltering" data-tip-anchor="topcenter"><span class="badge"></span><span></span></span>
|
||||
</div>
|
||||
<span id="noPopups" class="hnSwitch fa" data-i18n-tip="popupTipNoPopups"><span></span></span>
|
||||
<span id="noStrictBlocking" class="hnSwitch fa" data-i18n-tip="popupTipNoStrictBlocking"><span></span></span>
|
||||
<span id="noCosmeticFiltering" class="hnSwitch fa" data-i18n-tip="popupTipNoCosmeticFiltering"><span class="badge"></span><span></span></span>
|
||||
</div>
|
||||
<div id="refresh" class="fa"></div>
|
||||
</div><!-- DO NOT REMOVE --><div>
|
||||
<div id="tooltip"></div>
|
||||
</div><!-- DO NOT REMOVE --><div>
|
||||
<div id="firewallContainer">
|
||||
<div><span data-i18n="popupAnyRulePrompt"></span><span data-src="/" data-des="*" data-type="*"> </span><span data-src="." data-des="*" data-type="*"> </span></div>
|
||||
<div><span data-i18n="popupImageRulePrompt"></span><span data-src="/" data-des="*" data-type="image"> </span><span data-src="." data-des="*" data-type="image"> </span></div>
|
||||
@ -41,15 +41,15 @@
|
||||
<div><span data-i18n="popup1pScriptRulePrompt"></span><span data-src="/" data-des="*" data-type="1p-script"> </span><span data-src="." data-des="*" data-type="1p-script"> </span></div>
|
||||
<div><span data-i18n="popup3pScriptRulePrompt"></span><span data-src="/" data-des="*" data-type="3p-script"> </span><span data-src="." data-des="*" data-type="3p-script"> </span></div>
|
||||
<div><span data-i18n="popup3pFrameRulePrompt"></span><span data-src="/" data-des="*" data-type="3p-frame"> </span><span data-src="." data-des="*" data-type="3p-frame"> </span></div>
|
||||
</div><div id="saveRules" class="fa"></div>
|
||||
</div>
|
||||
</div><div id="saveRules" class="fa"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="templates" style="display: none">
|
||||
<div><span></span><span data-src="/" data-des="" data-type="*"> </span><span data-src="." data-des="" data-type="*"> </span><span data-src="." data-des="" data-type="*"> </span></div>
|
||||
<div id="actionSelector"><span id="dynaAllow"></span><span id="dynaNoop"></span><span id="dynaBlock"></span></div>
|
||||
<div id="hotspotTip"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="lib/punycode.js"></script>
|
||||
<script src="js/vapi-common.js"></script>
|
||||
|
Loading…
Reference in New Issue
Block a user