Add dummy UI for popup.
This commit is contained in:
parent
597e56ba7f
commit
0cd2961719
|
|
@ -31,5 +31,8 @@
|
|||
"last 1 firefox version",
|
||||
"last 1 safari version"
|
||||
]
|
||||
},
|
||||
"devDependencies": {
|
||||
"eslint-plugin-react": "^7.20.6"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
125
popup/src/App.js
125
popup/src/App.js
|
|
@ -1,14 +1,123 @@
|
|||
import React from 'react';
|
||||
/* global browser */
|
||||
import React, { useState } from 'react';
|
||||
|
||||
function App() {
|
||||
const [ advanced, setAdvanced ] = useState(false);
|
||||
const [ words, setWords ] = useState([]);
|
||||
const [ word, setWord ] = useState("");
|
||||
const [ regex, setRegex ] = useState("");
|
||||
const [ flags, setFlags ] = useState("");
|
||||
function removeWord(idx) {
|
||||
setWords([...words.slice(0, idx), ...words.slice(idx+1)]);
|
||||
}
|
||||
return (
|
||||
<div className="App">
|
||||
<header className="App-header">
|
||||
<p>
|
||||
Edit <code>src/App.js</code> and save to reload.
|
||||
</p>
|
||||
</header>
|
||||
</div>
|
||||
<>
|
||||
<input
|
||||
type="checkbox"
|
||||
id="toggle"
|
||||
onChange={e => setAdvanced(e.target.checked)}
|
||||
checked={advanced}
|
||||
/>
|
||||
<label for="toggle">Advanced Mode</label>
|
||||
<div class="simple"
|
||||
style={{
|
||||
display: advanced ? "none": "block"
|
||||
}}
|
||||
>
|
||||
<div
|
||||
class="words"
|
||||
style={{
|
||||
display: "flex",
|
||||
flexWrap: "wrap",
|
||||
margin: "0.3em",
|
||||
width: "100%"
|
||||
}}
|
||||
>
|
||||
{words.map((word, idx) =>
|
||||
<span
|
||||
class="word"
|
||||
key={idx}
|
||||
style={{
|
||||
backgroundColor: "#B4FFEF",
|
||||
borderRadius: "1em",
|
||||
padding: "0.25em 0.5em",
|
||||
margin: "0.1em"
|
||||
}}
|
||||
>
|
||||
{word}
|
||||
<span
|
||||
onClick={() => (removeWord(idx))}
|
||||
role="img"
|
||||
aria-label="Delete word"
|
||||
style={{
|
||||
cursor: "pointer"
|
||||
}}
|
||||
>
|
||||
✗
|
||||
</span>
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<form>
|
||||
<div
|
||||
style={{
|
||||
width: "100%",
|
||||
display: "flex",
|
||||
justifyItems: "stretch"
|
||||
}}
|
||||
>
|
||||
<input
|
||||
id="add-word"
|
||||
type="text"
|
||||
value={word}
|
||||
onInput={e => setWord(e.target.value)}
|
||||
placeholder="Word"
|
||||
style={{
|
||||
flexGrow: 1,
|
||||
}}
|
||||
/>
|
||||
<button
|
||||
id="add-word-button"
|
||||
onClick={e => {setWords([...words, word]); setWord(""); e.preventDefault();}}
|
||||
type="submit"
|
||||
enabled={word !== ""}
|
||||
>
|
||||
+
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="advanced"
|
||||
style={{
|
||||
display: advanced ? "flex": "none",
|
||||
alignItems: "baseline",
|
||||
justifyItems: "space-between"
|
||||
}}
|
||||
>
|
||||
/
|
||||
<input
|
||||
id="add-regex"
|
||||
type="text"
|
||||
value={regex}
|
||||
onInput={e => setRegex(e.target.value)}
|
||||
placeholder="RegEx"
|
||||
style={{
|
||||
width: "85%"
|
||||
}}
|
||||
/>
|
||||
/
|
||||
<input
|
||||
id="add-flags"
|
||||
type="text"
|
||||
value={flags}
|
||||
onInput={e => setFlags(e.target.value)}
|
||||
placeholder="Flags"
|
||||
style={{
|
||||
width: "13%"
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,3 +1,6 @@
|
|||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
|
||||
|
|
@ -5,6 +8,8 @@ body {
|
|||
sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
width: 500px;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
code {
|
||||
|
|
|
|||
|
|
@ -2187,6 +2187,15 @@ array.prototype.flat@^1.2.1:
|
|||
define-properties "^1.1.3"
|
||||
es-abstract "^1.17.0-next.1"
|
||||
|
||||
array.prototype.flatmap@^1.2.3:
|
||||
version "1.2.3"
|
||||
resolved "https://registry.npmjs.org/array.prototype.flatmap/-/array.prototype.flatmap-1.2.3.tgz#1c13f84a178566042dd63de4414440db9222e443"
|
||||
integrity sha512-OOEk+lkePcg+ODXIpvuU9PAryCikCJyo7GlDG1upleEpQRx6mzL9puEBkozQ5iAx20KV0l3DbyQwqciJtqe5Pg==
|
||||
dependencies:
|
||||
define-properties "^1.1.3"
|
||||
es-abstract "^1.17.0-next.1"
|
||||
function-bind "^1.1.1"
|
||||
|
||||
arrify@^1.0.1:
|
||||
version "1.0.1"
|
||||
resolved "https://registry.npmjs.org/arrify/-/arrify-1.0.1.tgz#898508da2226f380df904728456849c1501a4b0d"
|
||||
|
|
@ -4243,6 +4252,23 @@ eslint-plugin-react@7.19.0:
|
|||
string.prototype.matchall "^4.0.2"
|
||||
xregexp "^4.3.0"
|
||||
|
||||
eslint-plugin-react@^7.20.6:
|
||||
version "7.20.6"
|
||||
resolved "https://registry.npmjs.org/eslint-plugin-react/-/eslint-plugin-react-7.20.6.tgz#4d7845311a93c463493ccfa0a19c9c5d0fd69f60"
|
||||
integrity sha512-kidMTE5HAEBSLu23CUDvj8dc3LdBU0ri1scwHBZjI41oDv4tjsWZKU7MQccFzH1QYPYhsnTF2ovh7JlcIcmxgg==
|
||||
dependencies:
|
||||
array-includes "^3.1.1"
|
||||
array.prototype.flatmap "^1.2.3"
|
||||
doctrine "^2.1.0"
|
||||
has "^1.0.3"
|
||||
jsx-ast-utils "^2.4.1"
|
||||
object.entries "^1.1.2"
|
||||
object.fromentries "^2.0.2"
|
||||
object.values "^1.1.1"
|
||||
prop-types "^15.7.2"
|
||||
resolve "^1.17.0"
|
||||
string.prototype.matchall "^4.0.2"
|
||||
|
||||
eslint-scope@^4.0.3:
|
||||
version "4.0.3"
|
||||
resolved "https://registry.npmjs.org/eslint-scope/-/eslint-scope-4.0.3.tgz#ca03833310f6889a3264781aa82e63eb9cfe7848"
|
||||
|
|
@ -6447,7 +6473,7 @@ jsprim@^1.2.2:
|
|||
json-schema "0.2.3"
|
||||
verror "1.10.0"
|
||||
|
||||
jsx-ast-utils@^2.2.1, jsx-ast-utils@^2.2.3:
|
||||
jsx-ast-utils@^2.2.1, jsx-ast-utils@^2.2.3, jsx-ast-utils@^2.4.1:
|
||||
version "2.4.1"
|
||||
resolved "https://registry.npmjs.org/jsx-ast-utils/-/jsx-ast-utils-2.4.1.tgz#1114a4c1209481db06c690c2b4f488cc665f657e"
|
||||
integrity sha512-z1xSldJ6imESSzOjd3NNkieVJKRlKYSOtMG8SFyCj2FIrvSaSuli/WjpBkEzCBoR9bYYYFgqJw61Xhu7Lcgk+w==
|
||||
|
|
@ -7245,7 +7271,7 @@ object.assign@^4.1.0:
|
|||
has-symbols "^1.0.0"
|
||||
object-keys "^1.0.11"
|
||||
|
||||
object.entries@^1.1.0, object.entries@^1.1.1:
|
||||
object.entries@^1.1.0, object.entries@^1.1.1, object.entries@^1.1.2:
|
||||
version "1.1.2"
|
||||
resolved "https://registry.npmjs.org/object.entries/-/object.entries-1.1.2.tgz#bc73f00acb6b6bb16c203434b10f9a7e797d3add"
|
||||
integrity sha512-BQdB9qKmb/HyNdMNWVr7O3+z5MUIx3aiegEIJqjMBbBf0YT9RRxTJSim4mzFqtyr7PDAHigq0N9dO0m0tRakQA==
|
||||
|
|
@ -9088,7 +9114,7 @@ resolve@1.15.0:
|
|||
dependencies:
|
||||
path-parse "^1.0.6"
|
||||
|
||||
resolve@^1.10.0, resolve@^1.12.0, resolve@^1.13.1, resolve@^1.15.1, resolve@^1.3.2, resolve@^1.8.1:
|
||||
resolve@^1.10.0, resolve@^1.12.0, resolve@^1.13.1, resolve@^1.15.1, resolve@^1.17.0, resolve@^1.3.2, resolve@^1.8.1:
|
||||
version "1.17.0"
|
||||
resolved "https://registry.npmjs.org/resolve/-/resolve-1.17.0.tgz#b25941b54968231cc2d1bb76a79cb7f2c0bf8444"
|
||||
integrity sha512-ic+7JYiV8Vi2yzQGFWOkiZD5Z9z7O2Zhm9XMaTxdJExKasieFCr+yXZ/WmXsckHiKl12ar0y6XiXDx3m4RHn1w==
|
||||
|
|
|
|||
Loading…
Reference in New Issue