Add toggle button to enable / disable elements on page in popup
This commit is contained in:
parent
ce6f96454b
commit
d7f56cab29
13
package-lock.json
generated
13
package-lock.json
generated
|
@ -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",
|
||||
|
|
|
@ -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",
|
||||
|
|
|
@ -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"
|
||||
},
|
||||
|
|
|
@ -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 => (
|
||||
<div id="header">
|
||||
<div className="title">Simple Translate</div>
|
||||
<div className="rightButtons">
|
||||
<div className="toggleButton" title={getToggleButtonTitle(props.isEnabledOnPage)}>
|
||||
<Toggle
|
||||
checked={props.isEnabledOnPage}
|
||||
onChange={props.toggleEnabledOnPage}
|
||||
icons={false}
|
||||
disabled={!props.isConnected}
|
||||
/>
|
||||
</div>
|
||||
<button
|
||||
className="heartButton"
|
||||
onClick={openPayPal}
|
||||
|
|
|
@ -14,9 +14,15 @@ const getTabInfo = async () => {
|
|||
const tab = (await browser.tabs.query({ currentWindow: true, active: true }))[0];
|
||||
const tabUrl = await browser.tabs.sendMessage(tab.id, { message: "getTabUrl" });
|
||||
const selectedText = await browser.tabs.sendMessage(tab.id, { message: "getSelectedText" });
|
||||
return { url: tabUrl, selectedText: selectedText };
|
||||
const isEnabledOnPage = await browser.tabs.sendMessage(tab.id, { message: "getEnabled" });
|
||||
return {
|
||||
isConnected: true,
|
||||
url: tabUrl,
|
||||
selectedText: selectedText,
|
||||
isEnabledOnPage: isEnabledOnPage
|
||||
};
|
||||
} catch (e) {
|
||||
return { url: "", selectedText: "" };
|
||||
return { isConnected: false, url: "", selectedText: "", isEnabledOnPage: false };
|
||||
}
|
||||
};
|
||||
|
||||
|
@ -29,7 +35,9 @@ export default class PopupPage extends Component {
|
|||
resultText: "",
|
||||
candidateText: "",
|
||||
statusText: "OK",
|
||||
tabUrl: ""
|
||||
tabUrl: "",
|
||||
isConnected: true,
|
||||
isEnabledOnPage: true
|
||||
};
|
||||
this.isSwitchedSecondLang = false;
|
||||
this.init();
|
||||
|
@ -47,8 +55,10 @@ export default class PopupPage extends Component {
|
|||
|
||||
const tabInfo = await getTabInfo();
|
||||
this.setState({
|
||||
isConnected: tabInfo.isConnected,
|
||||
inputText: tabInfo.selectedText,
|
||||
tabUrl: tabInfo.url
|
||||
tabUrl: tabInfo.url,
|
||||
isEnabledOnPage: tabInfo.isEnabledOnPage
|
||||
});
|
||||
if (tabInfo.selectedText !== "") this.translateText(tabInfo.selectedText, targetLang);
|
||||
};
|
||||
|
@ -105,10 +115,24 @@ export default class PopupPage extends Component {
|
|||
}
|
||||
};
|
||||
|
||||
toggleEnabledOnPage = async e => {
|
||||
const isEnabled = e.target.checked;
|
||||
this.setState({ isEnabledOnPage: isEnabled });
|
||||
try {
|
||||
const tab = (await browser.tabs.query({ currentWindow: true, active: true }))[0];
|
||||
if (isEnabled) await browser.tabs.sendMessage(tab.id, { message: "enableExtension" });
|
||||
else await browser.tabs.sendMessage(tab.id, { message: "disableExtension" });
|
||||
} catch (e) {}
|
||||
};
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div>
|
||||
<Header />
|
||||
<Header
|
||||
toggleEnabledOnPage={this.toggleEnabledOnPage}
|
||||
isEnabledOnPage={this.state.isEnabledOnPage}
|
||||
isConnected={this.state.isConnected}
|
||||
/>
|
||||
<InputArea inputText={this.state.inputText} handleInputText={this.handleInputText} />
|
||||
<hr />
|
||||
<ResultArea
|
||||
|
|
|
@ -24,6 +24,38 @@
|
|||
justify-content: flex-end;
|
||||
height: 18px;
|
||||
|
||||
.toggleButton {
|
||||
height: 18px;
|
||||
.react-toggle {
|
||||
$offset-width: 15px;
|
||||
.react-toggle-track {
|
||||
height: 18px;
|
||||
width: 50px - $offset-width;
|
||||
background-color: var(--sub-text);
|
||||
}
|
||||
.react-toggle-thumb {
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
-webkit-box-shadow: none;
|
||||
-moz-box-shadow: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
&.react-toggle--checked {
|
||||
.react-toggle-track {
|
||||
background-color: var(--highlight);
|
||||
}
|
||||
.react-toggle-thumb {
|
||||
left: 33px - $offset-width;
|
||||
border-color: var(--highlight);
|
||||
}
|
||||
}
|
||||
&.react-toggle--disabled {
|
||||
cursor: unset;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
button {
|
||||
display: block;
|
||||
background-color: transparent;
|
||||
|
@ -36,7 +68,7 @@
|
|||
.heartButton {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-right: 10px;
|
||||
margin: 0px 10px;
|
||||
&:hover svg {
|
||||
fill: var(--confirm);
|
||||
}
|
||||
|
|
|
@ -48,7 +48,7 @@ const generalConfig = {
|
|||
}
|
||||
},
|
||||
{
|
||||
test: /\.scss$/,
|
||||
test: /\.(scss|css)$/,
|
||||
exclude: [path.resolve(__dirname, "src", "content")],
|
||||
use: [
|
||||
{
|
||||
|
@ -63,7 +63,7 @@ const generalConfig = {
|
|||
]
|
||||
},
|
||||
{
|
||||
test: /\.scss$/,
|
||||
test: /\.(scss|css)$/,
|
||||
include: [path.resolve(__dirname, "src", "content")],
|
||||
use: [
|
||||
MiniCssExtractPlugin.loader,
|
||||
|
|
|
@ -54,7 +54,7 @@ const generalConfig = {
|
|||
}
|
||||
},
|
||||
{
|
||||
test: /\.scss$/,
|
||||
test: /\.(scss|css)$/,
|
||||
exclude: [path.resolve(__dirname, "src", "content")],
|
||||
use: [
|
||||
{
|
||||
|
@ -69,7 +69,7 @@ const generalConfig = {
|
|||
]
|
||||
},
|
||||
{
|
||||
test: /\.scss$/,
|
||||
test: /\.(scss|css)$/,
|
||||
include: [path.resolve(__dirname, "src", "content")],
|
||||
use: [
|
||||
MiniCssExtractPlugin.loader,
|
||||
|
|
Loading…
Reference in a new issue