diff --git a/package-lock.json b/package-lock.json index 4064866..65d68ef 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2375,6 +2375,11 @@ } } }, + "classnames": { + "version": "2.2.6", + "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.2.6.tgz", + "integrity": "sha512-JR/iSQOSt+LQIWwrwEzJ9uk0xfN3mTVYMwt1Ir5mUcSN6pU+V4zQFFaJsclJbPuAUQH+yfWef6tm7l1quW3C8Q==" + }, "clean-css": { "version": "4.2.1", "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-4.2.1.tgz", @@ -8546,6 +8551,14 @@ "react-svg-core": "^2.1.0" } }, + "react-toggle": { + "version": "4.0.2", + "resolved": "https://registry.npmjs.org/react-toggle/-/react-toggle-4.0.2.tgz", + "integrity": "sha512-EPTWnN7gQHgEAUEmjheanZXNzY5TPnQeyyHfEs3YshaiWZf5WNjfYDrglO5F1Hl/dNveX18i4l0grTEsYH2Ccw==", + "requires": { + "classnames": "^2.2.5" + } + }, "read-pkg": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-1.1.0.tgz", diff --git a/package.json b/package.json index c37cb3f..5dac85a 100644 --- a/package.json +++ b/package.json @@ -9,7 +9,8 @@ "react-copy-to-clipboard": "^5.0.1", "react-dom": "^16.4.0", "react-router": "^4.3.1", - "react-router-dom": "^4.3.1" + "react-router-dom": "^4.3.1", + "react-toggle": "^4.0.2" }, "devDependencies": { "@babel/core": "^7.0.0-beta.49", diff --git a/src/_locales/en/messages.json b/src/_locales/en/messages.json index 32b6a8f..a7ca9b2 100644 --- a/src/_locales/en/messages.json +++ b/src/_locales/en/messages.json @@ -9,6 +9,12 @@ "donateWithPaypalLabel": { "message": "Donate with PayPal" }, + "enableOnThisPage": { + "message": "Enable on this page" + }, + "disableOnThisPage": { + "message": "Disable on this page" + }, "initialTextArea": { "message": "Enter text" }, diff --git a/src/popup/components/Header.js b/src/popup/components/Header.js index 44a219d..47d0bb4 100644 --- a/src/popup/components/Header.js +++ b/src/popup/components/Header.js @@ -4,6 +4,8 @@ import openUrl from "src/common/openUrl"; import { paypalLink } from "src/common/personalUrls"; import HeartIcon from "../icons/heart.svg"; import SettingsIcon from "../icons/settings.svg"; +import Toggle from "react-toggle"; +import "react-toggle/style.css"; import "../styles/header.scss"; const openPayPal = () => { @@ -14,10 +16,24 @@ const openSettings = () => { openUrl(url); }; -export default () => ( +const getToggleButtonTitle = isEnabled => { + return isEnabled + ? browser.i18n.getMessage("disableOnThisPage") + : browser.i18n.getMessage("enableOnThisPage"); +}; + +export default props => (