Repository: cordova-plugin-inappbrowser Updated Branches: refs/heads/master 9540f11fc -> f32612159
CB-10009 Improve InAppBrowser toolbar look and feel on Windows github close #129 Project: http://git-wip-us.apache.org/repos/asf/cordova-plugin-inappbrowser/repo Commit: http://git-wip-us.apache.org/repos/asf/cordova-plugin-inappbrowser/commit/f3261215 Tree: http://git-wip-us.apache.org/repos/asf/cordova-plugin-inappbrowser/tree/f3261215 Diff: http://git-wip-us.apache.org/repos/asf/cordova-plugin-inappbrowser/diff/f3261215 Branch: refs/heads/master Commit: f326121590412532e8aee6d43e87825e86376153 Parents: 9540f11 Author: sgrebnov <v-seg...@microsoft.com> Authored: Thu Dec 17 16:10:47 2015 +0300 Committer: sgrebnov <v-seg...@microsoft.com> Committed: Mon Jan 11 14:25:11 2016 +0300 ---------------------------------------------------------------------- src/windows/InAppBrowserProxy.js | 60 ++++++++++++---------------- www/inappbrowser.css | 74 +++++++++++++++++++++++++++++++++++ 2 files changed, 99 insertions(+), 35 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/cordova-plugin-inappbrowser/blob/f3261215/src/windows/InAppBrowserProxy.js ---------------------------------------------------------------------- diff --git a/src/windows/InAppBrowserProxy.js b/src/windows/InAppBrowserProxy.js index fc037bd..962c05e 100644 --- a/src/windows/InAppBrowserProxy.js +++ b/src/windows/InAppBrowserProxy.js @@ -59,8 +59,17 @@ function attachNavigationEvents(element, callback) { element.addEventListener("MSWebViewContentLoading", function (e) { if (navigationButtonsDiv) { - backButton.disabled = !popup.canGoBack; - forwardButton.disabled = !popup.canGoForward; + if (popup.canGoBack) { + 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.style.backgroundColor = "#404040"; - navigationButtonsDiv.style.zIndex = "999"; + navigationButtonsDiv.className = "inappbrowser-app-bar"; navigationButtonsDiv.onclick = function (e) { e.cancelBubble = true; }; navigationButtonsDivInner = document.createElement("div"); - navigationButtonsDivInner.style.paddingTop = "10px"; - navigationButtonsDivInner.style.height = "50px"; - navigationButtonsDivInner.style.width = "160px"; - navigationButtonsDivInner.style.margin = "0 auto"; - navigationButtonsDivInner.style.backgroundColor = "#404040"; - navigationButtonsDivInner.style.zIndex = "999"; + navigationButtonsDivInner.className = "inappbrowser-app-bar-inner" navigationButtonsDivInner.onclick = function (e) { e.cancelBubble = true; }; - - backButton = document.createElement("button"); - backButton.style.width = "40px"; - backButton.style.height = "40px"; - backButton.style.borderRadius = "40px"; - - backButton.innerText = "<-"; + backButton = document.createElement("div"); + backButton.innerText = "back"; + backButton.className = "app-bar-action action-back"; backButton.addEventListener("click", function (e) { if (popup.canGoBack) popup.goBack(); }); - forwardButton = document.createElement("button"); - forwardButton.style.marginLeft = "20px"; - forwardButton.style.width = "40px"; - forwardButton.style.height = "40px"; - forwardButton.style.borderRadius = "40px"; - - forwardButton.innerText = "->"; + forwardButton = document.createElement("div"); + forwardButton.innerText = "forward"; + forwardButton.className = "app-bar-action action-forward"; forwardButton.addEventListener("click", function (e) { if (popup.canGoForward) popup.goForward(); }); - closeButton = document.createElement("button"); - closeButton.style.marginLeft = "20px"; - closeButton.style.width = "40px"; - closeButton.style.height = "40px"; - closeButton.style.borderRadius = "40px"; - - closeButton.innerText = "x"; + closeButton = document.createElement("div"); + closeButton.innerText = "close"; + closeButton.className = "app-bar-action action-close"; 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; - forwardButton.disabled = true; + backButton.setAttribute("disabled", "true"); + forwardButton.setAttribute("disabled", "true"); } navigationButtonsDivInner.appendChild(backButton); http://git-wip-us.apache.org/repos/asf/cordova-plugin-inappbrowser/blob/f3261215/www/inappbrowser.css ---------------------------------------------------------------------- diff --git a/www/inappbrowser.css b/www/inappbrowser.css index bd1526d..5762c74 100644 --- a/www/inappbrowser.css +++ b/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"; +} --------------------------------------------------------------------- To unsubscribe, e-mail: commits-unsubscr...@cordova.apache.org For additional commands, e-mail: commits-h...@cordova.apache.org
