public/cordova-plugin-inappbrowser
public/cordova-plugin-inappbrowser
9
0
Fork 1
forked from github/cordova-plugin-inappbrowser
Code Pull Requests Activity

CB-10009 Improve InAppBrowser toolbar look and feel on Windows

Browse Source 
github close #129
This commit is contained in:
sgrebnov 2015-12-17 16:10:47 +03:00
parent 9540f11fcc
commit f326121590
2 changed files with 99 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

60
src/windows/InAppBrowserProxy.js
View File

@ -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);

74
www/inappbrowser.css
View File

@ -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";
}