CB-10009 Improve InAppBrowser toolbar look and feel on Windows

github close #129

src/windows/InAppBrowserProxy.js

@@ -59,8 +59,17 @@ function attachNavigationEvents(element, callback) {
 
         element.addEventListener("MSWebViewContentLoading", function (e) {
             if (navigationButtonsDiv) {
-                backButton.disabled = !popup.canGoBack;
+                if (popup.canGoBack) {
-                forwardButton.disabled = !popup.canGoForward;
+                    backButton.removeAttribute("disabled");
+                } else {
+                    backButton.setAttribute("disabled", "true");
+                }
+
+                if (popup.canGoForward) {
+                    forwardButton.removeAttribute("disabled");
+                } else {
+                    forwardButton.setAttribute("disabled", "true");
+                }
             }
         });
     } else {
@@ -156,58 +165,39 @@ var IAB = {
             browserWrap.appendChild(popup);
 
             if (features.indexOf("location=yes") !== -1 || features.indexOf("location") === -1) {
-                popup.style.height = "calc(100% - 60px)";
+                popup.style.height = "calc(100% - 70px)";
 
                 navigationButtonsDiv = document.createElement("div");
-                navigationButtonsDiv.style.height = "60px";
+                navigationButtonsDiv.className = "inappbrowser-app-bar";
-                navigationButtonsDiv.style.backgroundColor = "#404040";
-                navigationButtonsDiv.style.zIndex = "999";
                 navigationButtonsDiv.onclick = function (e) {
                     e.cancelBubble = true;
                 };
 
                 navigationButtonsDivInner = document.createElement("div");
-                navigationButtonsDivInner.style.paddingTop = "10px";
+                navigationButtonsDivInner.className = "inappbrowser-app-bar-inner"
-                navigationButtonsDivInner.style.height = "50px";
-                navigationButtonsDivInner.style.width = "160px";
-                navigationButtonsDivInner.style.margin = "0 auto";
-                navigationButtonsDivInner.style.backgroundColor = "#404040";
-                navigationButtonsDivInner.style.zIndex = "999";
                 navigationButtonsDivInner.onclick = function (e) {
                     e.cancelBubble = true;
                 };
 
-
+                backButton = document.createElement("div");
-                backButton = document.createElement("button");
+                backButton.innerText = "back";
-                backButton.style.width = "40px";
+                backButton.className = "app-bar-action action-back";
-                backButton.style.height = "40px";
-                backButton.style.borderRadius = "40px";
-
-                backButton.innerText = "<-";
                 backButton.addEventListener("click", function (e) {
                     if (popup.canGoBack)
                         popup.goBack();
                 });
 
-                forwardButton = document.createElement("button");
+                forwardButton = document.createElement("div");
-                forwardButton.style.marginLeft = "20px";
+                forwardButton.innerText = "forward";
-                forwardButton.style.width = "40px";
+                forwardButton.className = "app-bar-action action-forward";
-                forwardButton.style.height = "40px";
-                forwardButton.style.borderRadius = "40px";
-
-                forwardButton.innerText = "->";
                 forwardButton.addEventListener("click", function (e) {
                     if (popup.canGoForward)
                         popup.goForward();
                 });
 
-                closeButton = document.createElement("button");
+                closeButton = document.createElement("div");
-                closeButton.style.marginLeft = "20px";
+                closeButton.innerText = "close";
-                closeButton.style.width = "40px";
+                closeButton.className = "app-bar-action action-close";
-                closeButton.style.height = "40px";
-                closeButton.style.borderRadius = "40px";
-
-                closeButton.innerText = "x";
                 closeButton.addEventListener("click", function (e) {
                     setTimeout(function () {
                         IAB.close(win);
@@ -216,8 +206,8 @@ var IAB = {
 
                 if (!isWebViewAvailable) {
                     // iframe navigation is not yet supported
-                    backButton.disabled = true;
+                    backButton.setAttribute("disabled", "true");
-                    forwardButton.disabled = true;
+                    forwardButton.setAttribute("disabled", "true");
                 }
 
                 navigationButtonsDivInner.appendChild(backButton);

www/inappbrowser.css

@@ -38,3 +38,77 @@
 .inAppBrowserWrapFullscreen {
     border: 0;
 }
+
+.inappbrowser-app-bar {
+    height: 70px;
+    background-color: #404040;
+    z-index: 9999999;
+}
+
+.inappbrowser-app-bar-inner {
+    padding-top: 10px;
+    height: 60px;
+    width: 155px;
+    margin: 0 auto;
+    background-color: #404040;
+    z-index: 9999999;
+}
+
+.app-bar-action {
+    width: auto;
+    height: 40px;
+    margin-left: 20px;
+    font-family: "Segoe UI Symbol";
+    float: left;
+    color: white;
+    font-size: 12px;
+    text-transform: lowercase;
+    text-align: center;
+    cursor: default;
+}
+
+.app-bar-action[disabled] {
+    color: gray;
+    /*disable click*/
+    pointer-events: none;
+}
+
+.app-bar-action::before {
+    font-size: 28px;
+    display: block;
+    height: 36px;
+}
+
+/* Back */
+.action-back { 
+    margin-left: 0px;
+}
+
+.action-back::before {
+    content: "\E0BA";
+}
+
+.action-back:not([disabled]):hover::before {
+    content: "\E0B3";
+}
+
+/* Forward */
+.action-forward::before {
+    content: "\E0AC";
+}
+
+.action-forward:not([disabled]):hover::before {
+    content: "\E0AF";
+}
+
+/* Close */
+.action-close::before {
+    content: "\E0C7";
+    /* close icon is larger so we re-size it to fit other icons */
+    font-size: 20px;
+    line-height: 40px;
+}
+
+.action-close:not([disabled]):hover::before {
+    content: "\E0CA";
+}