Add toggle button to enable / disable elements on page in popup

This commit is contained in:
sienori 2019-05-02 23:31:11 +09:00
parent ce6f96454b
commit d7f56cab29
8 changed files with 104 additions and 12 deletions

13
package-lock.json generated
View file

@ -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",

View file

@ -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",

View file

@ -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"
},

View file

@ -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}

View file

@ -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

View file

@ -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);
}

View file

@ -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,

View file

@ -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,