robertabcd · tomchentw · Dec 5, 2017 · Dec 5, 2017 · Dec 5, 2017 · Dec 6, 2017
diff --git 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
@@ -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 }) => (
+  <Fade in>
+    <Alert bsStyle="danger" className="PageTopAlert" onDismiss={onDismiss}>
+      <h4>{i18n("alert_connectionHeader")}</h4>
+      <p>{i18n("alert_connectionText")}</p>
+      <p>
+        <Button bsStyle="danger" onClick={onDismiss}>
+          {i18n("alert_connectionReconnect")}
+        </Button>
+      </p>
+    </Alert>
+  </Fade>
+);
+
+export default enhance(ConnectionAlert);
diff --git a/src/components/DeveloperModeAlert.js 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 }) => (
+  <Fade in>
+    <Alert bsStyle="danger" className="PageTopAlert" onDismiss={onDismiss}>
+      <h4>{i18n("alert_developerModeHeader")}</h4>
+      <p>{i18n("alert_developerModeText")}</p>
+      <p>
+        <Button bsStyle="danger" onClick={onDismiss}>
+          {i18n("alert_developerModeDismiss")}
+        </Button>
+      </p>
+    </Alert>
+  </Fade>
+);
+
+export default DeveloperModeAlert;
diff --git a/src/components/PageTopAlert.css 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
@@ -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 }) => (
+  <Alert
+    bsStyle="info"
+    className="PageTopAlert"
+    tabIndex={-1}
+    onDismiss={onDismiss}
+  >
+    <h4>{i18n("alert_pasteShortcutHeader")}</h4>
+    <p>{i18n("alert_pasteShortcutText")}</p>
+    <p>
+      <Button bsStyle="primary" onClick={onDismiss}>
+        {i18n("alert_pasteShortcutClose")}
+      </Button>
+    </p>
+  </Alert>
+);
+
+export default PasteShortcutAlert;
diff --git 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
@@ -12,9 +12,6 @@
 
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
 
-    <script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
-    <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
-
     <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.min.js"></script>
@@ -36,7 +33,6 @@
       <li id="cmenu_divider2" class="divider contextQuickSearch"></li>
       <li id="cmenu_selectAll" class="cmenuItem contextNormal"><a></a></li>
       <li id="cmenu_mouseBrowsing" class="cmenuItem contextNormal"><a></a></li>
-      <li id="cmenu_goToOtherSite" class="cmenuItem contextNormal"><a></a></li>
       <li id="cmenu_showInputHelper" class="cmenuItem contextNormal"><a></a></li>
       <li id="cmenu_showLiveArticleHelper" class="cmenuItem contextNormal"><a></a></li>
       <li id="cmenu_divider3" class="divider contextNormal"></li>
@@ -54,16 +50,6 @@
     </div>
     <div id="flashcontent" style="width:1px; height:1px; left:-10000px; top:-10000px;position: absolute;overflow: hidden;"></div>
 
-    <div id="siteModal" class="modal fade" style="color:black;overflow-y:auto">
-      <div class="modal-dialog">
-        <div class="modal-content">
-          <div class="modal-body">
-            <input type="text" class="form-control" ></input>
-          </div>
-        </div>
-      </div>
-    </div>
-
     <!--Preferences Modal-->
     <div id="prefModal" class="modal fade" style="color:black;overflow-y:auto;z-index:2;">
       <div class="modal-dialog">
@@ -151,28 +137,8 @@ <h4 id="opt_mouseBrowsing" class="list-group-item-heading"></h4>
         </div>
       </div>
     </div>
-    <div id="developerModeAlert" class="alert alert-danger alert-dismissable fade in">
-      <h4 id="developerModeAlertHeader"></h4>
-      <p id="developerModeAlertText"></p>
-      <p>
-        <button id="developerModeAlertDismiss" type="button" class="btn btn-danger"></button>
-      </p>
-    </div>
-    <div id="connectionAlert" class="alert alert-danger alert-dismissable fade in">
-      <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
-      <h4 id="connectionAlertHeader"></h4>
-      <p id="connectionAlertText"></p>
-      <p>
-        <button id="connectionAlertReconnect" type="button" class="btn btn-danger"></button>
-      </p>
-    </div>
-    <div id="pasteShortcutAlert" class="alert alert-info alert-dismissible fade in" role="alert">
-      <h4 id="pasteShortcutHeader"></h4>
-      <p id="pasteShortcutText"></p>
-      <p>
-        <button id="pasteShortcutClose" type="button" class="btn btn-primary"></button>
-      </p>
-    </div>
+    <div id="reactAlert"></div>
+
     <div id="liveHelper" class="modal-dialog">
       <div class="modal-content">
         <div class="modal-body nomouse_command" style="height:60px;">

diff --git a/src/js/en_US_messages.js b/src/js/en_US_messages.js
@@ -56,9 +56,6 @@ export const en_US = {
   "cmenu_mouseBrowsing": {
     "message": "Mouse browsing"
   },
-  "cmenu_goToOtherSite": {
-    "message": "Go to other site ..."
-  },
   "cmenu_showInputHelper": {
     "message": "Input helper ..."
   },
@@ -237,10 +234,6 @@ export const en_US = {
     "message": "says:"
   },
 
-  "input_sitePlaceholder": {
-    "message": "input URL here and then press ENTER"
-  },
-
   // input helper
   "inputHelperTitle": {
     "message": "Input helper"