diff --git a/css/app.css b/css/app.css
index 54aa3ecaa..a8b33767b 100644
--- a/css/app.css
+++ b/css/app.css
@@ -29,7 +29,6 @@ body {
.id-container {
height: 100%;
width: 100%;
- position: fixed;
min-width: 768px;
}
@@ -58,14 +57,12 @@ body {
.spinner {
opacity: .5;
+ float: right;
}
.spinner img {
- position: absolute;
height: 40px;
width: 40px;
- right: 10px;
- top: 10px;
border-radius: 4px;
margin-right: 10px;
background: black;
@@ -555,6 +552,9 @@ button.save.has-count .count::before {
.icon.back.blue { background-position: -420px -20px;}
.icon.forward.blue { background-position: -440px -20px;}
+.icon.full-screen { background-position: -620px -20px;}
+.active .icon.full-screen { background-position: -640px -20px;}
+
button[disabled] .icon.alert { background-position: 0 -40px;}
button[disabled] .icon.add-point { background-position: -20px -40px;}
button[disabled] .icon.add-line { background-position: -40px -40px;}
@@ -1740,6 +1740,27 @@ img.wiki-image {
background: rgba(0,0,0,.8);
}
+/* Fullscreen button */
+div.full-screen {
+ float: right;
+ width: 40px;
+ margin-right: 10px;
+}
+
+div.full-screen .tooltip {
+ min-width: 160px;
+}
+
+div.full-screen > button, div.full-screen > button.active {
+ width: 40px;
+ height: 40px;
+ background: transparent;
+}
+
+div.full-screen > button:hover {
+ background-color: rgba(0, 0, 0, .8);
+}
+
/* Map Controls */
.map-controls {
diff --git a/dist/img/sprite.svg b/dist/img/sprite.svg
index b47a50a64..7aec0cc11 100644
--- a/dist/img/sprite.svg
+++ b/dist/img/sprite.svg
@@ -13,7 +13,7 @@
width="800"
height="560"
id="svg12393"
- inkscape:version="0.48.5 r10040"
+ inkscape:version="0.48.4 r9939"
sodipodi:docname="sprite.svg">
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/dist/locales/en.json b/dist/locales/en.json
index 4bcd52986..96f58b475 100644
--- a/dist/locales/en.json
+++ b/dist/locales/en.json
@@ -430,6 +430,7 @@
"help": "Another user changed some of the same map features you changed.\nClick on each item below for more details about the conflict, and choose whether to keep\nyour changes or the other user's changes.\n"
}
},
+ "full_screen": "Toggle Fullscreen",
"merge_remote_changes": {
"conflict": {
"deleted": "This object has been deleted by {user}.",
diff --git a/index.html b/index.html
index cf71e0b9e..b54c337c6 100644
--- a/index.html
+++ b/index.html
@@ -99,6 +99,7 @@
+
diff --git a/js/id/ui.js b/js/id/ui.js
index 6d8534501..1fb7d0a2a 100644
--- a/js/id/ui.js
+++ b/js/id/ui.js
@@ -60,6 +60,10 @@ iD.ui = function(context) {
.attr('class', 'button-wrap col1')
.call(iD.ui.Save(context));
+ bar.append('div')
+ .attr('class', 'full-screen')
+ .call(iD.ui.FullScreen(context));
+
bar.append('div')
.attr('class', 'spinner')
.call(iD.ui.Spinner(context));
diff --git a/js/id/ui/full_screen.js b/js/id/ui/full_screen.js
new file mode 100644
index 000000000..1e00f63b2
--- /dev/null
+++ b/js/id/ui/full_screen.js
@@ -0,0 +1,64 @@
+iD.ui.FullScreen = function(context) {
+ var element = context.container().node(), button;
+
+ function getFullScreenFn() {
+ if (element.requestFullscreen) {
+ return element.requestFullscreen;
+ } else if (element.msRequestFullscreen) {
+ return element.msRequestFullscreen;
+ } else if (element.mozRequestFullScreen) {
+ return element.mozRequestFullScreen;
+ } else if (element.webkitRequestFullscreen) {
+ return element.webkitRequestFullscreen;
+ }
+ }
+
+ function getExitFullScreenFn() {
+ if (document.exitFullscreen) {
+ return document.exitFullscreen;
+ } else if (document.msExitFullscreen) {
+ return document.msExitFullscreen;
+ } else if (document.mozCancelFullScreen) {
+ return document.mozCancelFullScreen;
+ } else if (document.webkitExitFullscreen) {
+ return document.webkitExitFullscreen;
+ }
+ }
+
+ function isFullScreen() {
+ return document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement ||
+ document.msFullscreenElement;
+ }
+
+ function is_supported() {
+ return !!getFullScreenFn();
+ }
+
+ function fullScreen() {
+ d3.event.preventDefault();
+ if (!isFullScreen()) {
+ button.classed('active', true);
+ getFullScreenFn().apply(element);
+ } else {
+ button.classed('active', false);
+ getExitFullScreenFn().apply(document);
+ }
+ }
+
+ return function(selection) {
+ if (!is_supported())
+ return;
+
+ var tooltip = bootstrap.tooltip()
+ .placement('left');
+
+ button = selection.append('button')
+ .attr('title', t('full_screen'))
+ .attr('tabindex', -1)
+ .on('click', fullScreen)
+ .call(tooltip);
+
+ button.append('span')
+ .attr('class', 'icon full-screen');
+ };
+};