From de0c1e13ea2c8866ea5cf6d7232d5f115d218499 Mon Sep 17 00:00:00 2001 From: achmizs Date: Fri, 1 Feb 2019 15:09:49 -0500 Subject: [PATCH] Added tooltips to popup --- popup.css | 53 +++++++++++++++++++++++++++++++++++++++++++++-------- popup.html | 13 ++++++++----- popup.js | 35 ++++++++++++++++++++++++++++++++++- 3 files changed, 87 insertions(+), 14 deletions(-) diff --git a/popup.css b/popup.css index 6d3c1e0..3082757 100644 --- a/popup.css +++ b/popup.css @@ -14,6 +14,7 @@ body { padding: 0; display: flex; flex-flow: column; + font-family: Inconsolata, sans-serif; } /***********/ @@ -26,6 +27,7 @@ button { background-color: #fff; border: none; cursor: pointer; + font-family: Font Awesome, Inconsolata, sans-serif; } button:active { transform: scale(0.95); @@ -55,7 +57,6 @@ button.main-button { height: 150px; width: 150px; color: #ccc; - font-family: Font Awesome; } button.main-button.active { color: #000; @@ -109,15 +110,16 @@ button.main-button.whitelist.active::after { } .aux-button-container button { - font-size: 1.25rem; - padding: 0; flex: 1 1 auto; - font-family: Font Awesome, Inconsolata, sans-serif; + padding: 0; + margin: 2px 10px; + min-width: 0; + display: flex; flex-flow: column; align-items: center; justify-content: center; - min-width: 0; + font-size: 1.25rem; } .aux-button-container button::before { padding: 4px 0 0 0; @@ -166,7 +168,6 @@ button.help-button::after { position: relative; display: flex; flex-flow: column; - font-family: Inconsolata, sans-serif; font-size: 1rem; padding: 10px 8px 6px 8px; line-height: 1; @@ -255,7 +256,6 @@ button.reload-button:hover { } button.reload-button::before { content: "\F2F1"; - font-family: Font Awesome; font-size: 2rem; font-weight: 900; } @@ -266,10 +266,47 @@ button.reload-button::before { .info-header { text-align: center; - font-family: Inconsolata, sans-serif; font-size: 0.75rem; padding: 2px; background-color: #444; color: #ccc; cursor: default; +} + +/************/ +/* TOOLTIPS */ +/************/ + +.tooltip-overlay { + position: fixed; + width: calc(100% - 20px); + left: 10px; + top: 0; + height: 100%; + pointer-events: none; +} + +.tooltip { + background-color: #ffe; + position: absolute; + left: 0; + right: 0; + margin: auto; + padding: 8px 12px; + border: 1px solid #777; + border-radius: 4px; + box-shadow: + 1px 1px 4px 0 #aaa; + text-align: center; + line-height: 1.3; + font-size: 0.75rem; + width: fit-content; + visibility: hidden; + opacity: 0.0; + transition: none; +} +.tooltip.active { + visibility: visible; + opacity: 1.0; + transition: opacity 0.1s ease 0.5s; } \ No newline at end of file diff --git a/popup.html b/popup.html index f4eb5f1..5ca0133 100644 --- a/popup.html +++ b/popup.html @@ -9,16 +9,19 @@ AlwaysKillSticky 0.0
- +
- Mode: + Mode: Killing stickies? - +
- - + + +
+
+

Lorem ipsum.

diff --git a/popup.js b/popup.js index bca1c4f..4f9af35 100644 --- a/popup.js +++ b/popup.js @@ -128,7 +128,7 @@ function recalculatePatternEffects() { } /* Updates the values of properties of the AKS object on the basis of the - provided result object. Called after a query to storage (to retrieve the + provided result object. Called after a document.querySelector to storage (to retrieve the result object). Updated properties are: the current mode, the matching and exclusion @@ -158,6 +158,8 @@ function updateUIState() { let info = document.querySelector(".info"); // The “Killing stickies?” label. let statusLabel = document.querySelector(".info .status-display"); + // The “Mode:” label. + let modeLabel = document.querySelector(".info .mode-display"); var active, whitelist; @@ -185,6 +187,22 @@ function updateUIState() { mainButton.classList.toggle("whitelist", (AKS.mode == "whitelist")); info.classList.toggle("whitelist", (AKS.mode == "whitelist")); + + mainButton.dataset["tooltip"] = active ? + "Click to stop killing stickies on this page" : + "Click to kill stickies on this page"; + modeLabel.dataset["tooltip"] = (AKS.mode == "whitelist") ? + "Stickies are killed *except* on sites you exclude" : + "Stickies are killed *only* on specified sites"; +} + +/* Updates the tooltip text and position, as specified by the given element + (in the element’s data-tooltip and data-tooltip-position-y attributes). + */ +function updateTooltip(element) { + let tooltip = document.querySelector(".tooltip"); + tooltip.innerHTML = element.dataset["tooltip"].replace(/\*(.+?)\*/, "$1"); + tooltip.style.top = element.dataset["tooltipPositionY"]; } /******************/ @@ -237,6 +255,9 @@ function initialize() { reloadButton.classList.toggle("active", true); } + // Update the tooltip for the main button. + updateTooltip(event.target); + // Update the page action (toolbar) icon. updateIcon(shouldKillSticky, AKS.activeTabID); }); @@ -257,6 +278,18 @@ function initialize() { chrome.tabs.update(null, { url: AKS.activeTabLocation }); window.close(); }); + + // Listeners to show/hide tooltips. + document.querySelectorAll("button, .mode-display").forEach(element => { + let tooltip = document.querySelector(".tooltip"); + element.addEventListener("mouseenter", (event) => { + tooltip.classList.toggle("active", true); + updateTooltip(event.target); + }); + element.addEventListener("mouseleave", (event) => { + tooltip.classList.toggle("active", false); + }); + }); } initialize(); \ No newline at end of file