From 739876de99c1bb1fbb00f71faba728342df85e03 Mon Sep 17 00:00:00 2001 From: Paul Annekov Date: Thu, 23 Jul 2015 22:30:14 +0300 Subject: [PATCH] Images to sprite, fixed tooltip position, fixed spinner position if fullscreen is not supported --- css/app.css | 54 +++++++++++----------- dist/img/fullscreen_exit.svg | 64 -------------------------- dist/img/fullscreen_request.svg | 64 -------------------------- dist/img/sprite.svg | 80 ++++++++++++++++++++++++++++++--- dist/locales/en.json | 4 +- js/id/ui.js | 8 ++-- js/id/ui/full_screen.js | 10 +++-- 7 files changed, 110 insertions(+), 174 deletions(-) delete mode 100644 dist/img/fullscreen_exit.svg delete mode 100644 dist/img/fullscreen_request.svg diff --git a/css/app.css b/css/app.css index 01134f272..ec6daa726 100644 --- a/css/app.css +++ b/css/app.css @@ -57,45 +57,17 @@ body { .spinner { opacity: .5; + float: right; } .spinner img { - position: absolute; height: 40px; width: 40px; - right: 50px; - top: 10px; border-radius: 4px; margin-right: 10px; background: black; } -div.full-screen { - position: absolute; - width: 40px; - right: 10px; - top: 10px; -} - -button.full-screen { - width: 100%; - position: relative; -} - -button.full-screen, button.full-screen.active { - width: 40px; - height: 40px; - background: transparent url(img/fullscreen_request.svg) no-repeat center; -} - -button.full-screen.active { - background-image: url(img/fullscreen_exit.svg); -} - -button.full-screen:hover, button.full-screen:focus { - background-color: rgba(0, 0, 0, .8); -} - div, textarea, label, input, form, span, ul, li, ol, a, button, h1, h2, h3, h4, h5, p, img { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; @@ -580,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;} @@ -1765,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/fullscreen_exit.svg b/dist/img/fullscreen_exit.svg deleted file mode 100644 index 8608ceb52..000000000 --- a/dist/img/fullscreen_exit.svg +++ /dev/null @@ -1,64 +0,0 @@ - -image/svg+xml \ No newline at end of file diff --git a/dist/img/fullscreen_request.svg b/dist/img/fullscreen_request.svg deleted file mode 100644 index fbdc9874c..000000000 --- a/dist/img/fullscreen_request.svg +++ /dev/null @@ -1,64 +0,0 @@ - -image/svg+xml \ No newline at end of file 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 6eefaada4..d237cf54a 100644 --- a/dist/locales/en.json +++ b/dist/locales/en.json @@ -430,9 +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": { - "tooltip": "Toggle Full Screen" - }, + "full_screen": "Toggle Fullscreen", "merge_remote_changes": { "conflict": { "deleted": "This object has been deleted by {user}.", diff --git a/js/id/ui.js b/js/id/ui.js index 4d4f80780..1fb7d0a2a 100644 --- a/js/id/ui.js +++ b/js/id/ui.js @@ -60,14 +60,14 @@ iD.ui = function(context) { .attr('class', 'button-wrap col1') .call(iD.ui.Save(context)); - bar.append('div') - .attr('class', 'spinner') - .call(iD.ui.Spinner(context)); - bar.append('div') .attr('class', 'full-screen') .call(iD.ui.FullScreen(context)); + bar.append('div') + .attr('class', 'spinner') + .call(iD.ui.Spinner(context)); + var controls = bar.append('div') .attr('class', 'map-controls'); diff --git a/js/id/ui/full_screen.js b/js/id/ui/full_screen.js index e2fec1347..1e00f63b2 100644 --- a/js/id/ui/full_screen.js +++ b/js/id/ui/full_screen.js @@ -26,8 +26,8 @@ iD.ui.FullScreen = function(context) { } function isFullScreen() { - return document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement - || document.msFullscreenElement; + return document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement || + document.msFullscreenElement; } function is_supported() { @@ -53,10 +53,12 @@ iD.ui.FullScreen = function(context) { .placement('left'); button = selection.append('button') - .attr('class', 'full-screen') - .attr('title', t('full_screen.tooltip')) + .attr('title', t('full_screen')) .attr('tabindex', -1) .on('click', fullScreen) .call(tooltip); + + button.append('span') + .attr('class', 'icon full-screen'); }; };