diff --git a/package.json b/package.json index 87685b24..14a51aa5 100644 --- a/package.json +++ b/package.json @@ -3,11 +3,17 @@ "version": "1.2.0", "dependencies": { "base58": "^1.0.1", - "classnames": "^2.2.5" + "classnames": "^2.2.5", + "react": "^16.2.0", + "react-bootstrap": "^0.31.5", + "react-dom": "^16.2.0", + "react-overlays": "^0.7.4", + "recompose": "^0.26.0" }, "devDependencies": { "babel-core": "^6.26.0", "babel-loader": "^7.1.2", + "babel-plugin-syntax-dynamic-import": "^6.18.0", "babel-plugin-transform-class-properties": "^6.24.1", "babel-plugin-transform-object-rest-spread": "^6.26.0", "babel-preset-env": "^1.6.1", @@ -26,6 +32,7 @@ "uglifyjs-webpack-plugin": "^0.4.6", "url-loader": "^0.6.2", "webpack": "^3.7.1", + "webpack-cdn-plugin": "^1.6.6", "webpack-dev-server": "^2.9.3" }, "lint-staged": { @@ -45,6 +52,7 @@ ["react"] ], "plugins": [ + "syntax-dynamic-import", "transform-class-properties", "transform-object-rest-spread" ] @@ -60,6 +68,7 @@ ["react"] ], "plugins": [ + "syntax-dynamic-import", "transform-class-properties", "transform-object-rest-spread" ] diff --git a/src/components/ConnectionAlert.js b/src/components/ConnectionAlert.js new file mode 100644 index 00000000..53b73549 --- /dev/null +++ b/src/components/ConnectionAlert.js @@ -0,0 +1,40 @@ +import React from "react"; +import { compose, lifecycle } from "recompose"; +import { Alert, Button, Fade } from "react-bootstrap"; +import { i18n } from "../js/i18n"; +import "./PageTopAlert.css"; + +const enhance = compose( + lifecycle({ + componentDidMount() { + this.handler = e => { + if (e.keyCode == 13) { + this.props.onDismiss(); + } + // Kills everything becase we don't want any further action performed under ConnectionAlert status + event.preventDefault(); + event.stopImmediatePropagation(); + }; + window.addEventListener("keydown", this.handler, true); + }, + componentWillUnmount() { + window.removeEventListener("keydown", this.handler, true); + } + }) +); + +export const ConnectionAlert = ({ onDismiss }) => ( + + +

{i18n("alert_connectionHeader")}

+

{i18n("alert_connectionText")}

+

+ +

+
+
+); + +export default enhance(ConnectionAlert); diff --git a/src/components/DeveloperModeAlert.js b/src/components/DeveloperModeAlert.js new file mode 100644 index 00000000..a22e19ef --- /dev/null +++ b/src/components/DeveloperModeAlert.js @@ -0,0 +1,20 @@ +import React from "react"; +import { Alert, Button, Fade } from "react-bootstrap"; +import { i18n } from "../js/i18n"; +import "./PageTopAlert.css"; + +export const DeveloperModeAlert = ({ onDismiss }) => ( + + +

{i18n("alert_developerModeHeader")}

+

{i18n("alert_developerModeText")}

+

+ +

+
+
+); + +export default DeveloperModeAlert; diff --git a/src/components/PageTopAlert.css b/src/components/PageTopAlert.css new file mode 100644 index 00000000..9c3be5ec --- /dev/null +++ b/src/components/PageTopAlert.css @@ -0,0 +1,10 @@ +.PageTopAlert { + margin-top: 15px; + position: relative; + z-index: 2; + + width: 400px; + left: 50%; + margin-left: -200px; + box-shadow: 0px 0px 20px black; +} diff --git a/src/components/PasteShortcutAlert.js b/src/components/PasteShortcutAlert.js new file mode 100644 index 00000000..cbf9922b --- /dev/null +++ b/src/components/PasteShortcutAlert.js @@ -0,0 +1,23 @@ +import React from "react"; +import { Alert, Button } from "react-bootstrap"; +import { i18n } from "../js/i18n"; +import "./PageTopAlert.css"; + +export const PasteShortcutAlert = ({ onDismiss }) => ( + +

{i18n("alert_pasteShortcutHeader")}

+

{i18n("alert_pasteShortcutText")}

+

+ +

+
+); + +export default PasteShortcutAlert; diff --git a/src/css/main.css b/src/css/main.css index 4724b1f4..08b5184d 100644 --- a/src/css/main.css +++ b/src/css/main.css @@ -632,18 +632,6 @@ span { margin-bottom:2px; } -#developerModeAlert, #connectionAlert, #pasteShortcutAlert { - display: none; - margin-top: 15px; - position: relative; - z-index: 2; - - width: 400px; - left: 50%; - margin-left: -200px; - box-shadow: 0px 0px 20px black; -} - .main::-webkit-scrollbar { width: 10px; } diff --git a/src/dev.html b/src/dev.html index a672f57d..87507bfd 100644 --- a/src/dev.html +++ b/src/dev.html @@ -12,9 +12,6 @@ - - - @@ -36,7 +33,6 @@
  • -
  • @@ -54,16 +50,6 @@
    - - -
    -

    -

    -

    - -

    -
    -
    - -

    -

    -

    - -

    -
    - +
    +