From e97a957e0a2cc119c9cbfabeae1c6e976f7f829a Mon Sep 17 00:00:00 2001 From: Saman Bemel-Benrud Date: Wed, 15 May 2013 13:19:18 -0400 Subject: [PATCH 01/10] remove left border from modal header button. --- css/app.css | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/css/app.css b/css/app.css index d7ac60fb7..75711b084 100644 --- a/css/app.css +++ b/css/app.css @@ -601,7 +601,6 @@ a:hover .icon.out-link { background-position: -500px -14px;} .header button { height: 100%; border-radius: 0; - border-left: 1px solid #CCC; width: 40px; text-align: center; overflow: hidden; @@ -610,6 +609,11 @@ a:hover .icon.out-link { background-position: -500px -14px;} top: 0; } +.modal > button.fr, +.header button.fr { + border-left: 1px solid #CCC; +} + .modal > button { height: 59px; z-index: 3; From 0bdea49ffbe50a60aff2641d5498049123b8b038 Mon Sep 17 00:00:00 2001 From: Saman Bemel-Benrud Date: Wed, 15 May 2013 14:08:25 -0400 Subject: [PATCH 02/10] minor cosmetic + ui improvements. --- css/app.css | 43 ++++++++++++++----------------------------- data/core.yaml | 1 + dist/locales/en.json | 1 + js/id/ui.js | 2 +- 4 files changed, 17 insertions(+), 30 deletions(-) diff --git a/css/app.css b/css/app.css index 75711b084..e6eb4f96b 100644 --- a/css/app.css +++ b/css/app.css @@ -590,6 +590,7 @@ a:hover .icon.out-link { background-position: -500px -14px;} } .header h3 { + text-align: center; margin-right: 40px; margin-bottom: 0; white-space: nowrap; @@ -609,11 +610,6 @@ a:hover .icon.out-link { background-position: -500px -14px;} top: 0; } -.modal > button.fr, -.header button.fr { - border-left: 1px solid #CCC; -} - .modal > button { height: 59px; z-index: 3; @@ -649,7 +645,6 @@ a:hover .icon.out-link { background-position: -500px -14px;} } .inspector-wrap .header button.preset-reset { - border-right: 1px solid #CCC; position: relative; } @@ -1271,10 +1266,11 @@ input[type=number] { .form-field .addr-housename { border: 0; + border-radius: 0; } .form-field .addr-number { - width: 33%; + width: 33.3333%; border-left: 0; border-right: 0; border-bottom: 0; @@ -1282,14 +1278,14 @@ input[type=number] { } .form-field .addr-street { - width: 66%; + width: 66.6666%; border-right: 0; border-bottom: 0; border-radius: 0; } .form-field .addr-city { - width: 66%; + width: 66.6666%; border-left: 0; border-right: 0; border-bottom: 0; @@ -1297,7 +1293,7 @@ input[type=number] { } .form-field .addr-postcode { - width: 33%; + width: 33.3333%; border-right: 0; border-bottom: 0; border-radius: 0 0 4px 0; @@ -1748,13 +1744,9 @@ img.wiki-image { .help-wrap .toc li a, .help-wrap .nav a { display: block; - border: 1px solid #CCC; padding: 5px 10px; } -.help-wrap .toc li a { - border-bottom: 0; -} .help-wrap .toc li a:hover, .help-wrap .nav a:hover { @@ -1769,15 +1761,8 @@ img.wiki-image { border-radius: 4px 4px 0 0; } -.help-wrap .toc li:nth-last-child(2) a { - border-bottom: 1px solid #CCC; - border-radius: 0 0 4px 4px -} - .help-wrap .toc li.walkthrough a { overflow: hidden; - margin-top: 10px; - border-bottom: 1px solid #ccc; border-radius: 4px; } @@ -2139,7 +2124,8 @@ img.wiki-image { ------------------------------------------------------- */ .tooltip { - width: 200px; + max-width: 200px; + min-width: 120px; position: absolute; display: none; color:#333; @@ -2173,7 +2159,6 @@ img.wiki-image { } .tooltip-inner { - display: inline-block; padding: 10px; font-weight: normal; background-color: white; @@ -2278,11 +2263,15 @@ img.wiki-image { } .tooltip .keyhint-wrap { - padding: 5px 0 5px 0; + background: #f6f6f6; + padding: 10px; + left: 0; + right: 0; + bottom: -42px; + position: absolute; } .tooltip-inner .keyhint { - color: #222; font-size: 10px; padding: 0 7px; font-weight: bold; @@ -2295,10 +2284,6 @@ img.wiki-image { clear: both; } -.tooltip .keyhint .keyhint-label { - display: inline-block; -} - .tooltip-inner .keyhint::after { content: ""; position: absolute; diff --git a/data/core.yaml b/data/core.yaml index dc96f7862..c1e79ec08 100644 --- a/data/core.yaml +++ b/data/core.yaml @@ -122,6 +122,7 @@ en: multiple_ways: There are too many lines here to split. nothing_to_undo: Nothing to undo. nothing_to_redo: Nothing to redo. + tooltip_keyhint: "Shortcut:" just_edited: "You just edited OpenStreetMap!" browser_notice: "This editor is supported in Firefox, Chrome, Safari, Opera, and Internet Explorer 9 and above. Please upgrade your browser or use Potlatch 2 to edit the map." view_on_osm: "View on OSM" diff --git a/dist/locales/en.json b/dist/locales/en.json index b4354008b..59e15673a 100644 --- a/dist/locales/en.json +++ b/dist/locales/en.json @@ -156,6 +156,7 @@ }, "nothing_to_undo": "Nothing to undo.", "nothing_to_redo": "Nothing to redo.", + "tooltip_keyhint": "Shortcut: ", "just_edited": "You just edited OpenStreetMap!", "browser_notice": "This editor is supported in Firefox, Chrome, Safari, Opera, and Internet Explorer 9 and above. Please upgrade your browser or use Potlatch 2 to edit the map.", "view_on_osm": "View on OSM", diff --git a/js/id/ui.js b/js/id/ui.js index ff72efeca..3d942429b 100644 --- a/js/id/ui.js +++ b/js/id/ui.js @@ -164,5 +164,5 @@ iD.ui = function(context) { }; iD.ui.tooltipHtml = function(text, key) { - return '' + text + '' + '
' + key + '
'; + return '' + text + '' + '
' + ' ' + (t('tooltip_keyhint')) + ' ' + ' ' + key + '
'; }; From a88deef8399c177e9b934a6f41bdd433a42f6f0c Mon Sep 17 00:00:00 2001 From: Saman Bemel-Benrud Date: Wed, 15 May 2013 14:19:56 -0400 Subject: [PATCH 03/10] adding translate icon to sprite + css. --- css/app.css | 1 + dist/img/sprite.svg | 136 ++++++++++++++++++++++++-------------------- 2 files changed, 74 insertions(+), 63 deletions(-) diff --git a/css/app.css b/css/app.css index e6eb4f96b..df0051c27 100644 --- a/css/app.css +++ b/css/app.css @@ -521,6 +521,7 @@ button.save.has-count .count::before { .icon.back { background-position: -420px 0;} .icon.forward { background-position: -440px 0;} .icon.help { background-position: -460px 0;} +.icon.translate { background-position: -520px 0;} .icon.inspect.light { background-position: -220px -20px;} .icon.geocode.light { background-position: -280px -20px;} diff --git a/dist/img/sprite.svg b/dist/img/sprite.svg index 680ef2ce2..e79d0e8a8 100644 --- a/dist/img/sprite.svg +++ b/dist/img/sprite.svg @@ -38,14 +38,14 @@ borderopacity="1.0" inkscape:pageopacity="0.0" inkscape:pageshadow="2" - inkscape:zoom="18.189894" - inkscape:cx="263.82239" - inkscape:cy="300.42147" + inkscape:zoom="1" + inkscape:cx="258.5762" + inkscape:cy="479.73245" inkscape:document-units="px" inkscape:current-layer="layer12" showgrid="true" - inkscape:window-width="1483" - inkscape:window-height="804" + inkscape:window-width="1280" + inkscape:window-height="756" inkscape:window-x="35" inkscape:window-y="0" inkscape:window-maximized="0" @@ -53,7 +53,7 @@ fit-margin-left="0" fit-margin-right="0" fit-margin-bottom="0" - showguides="false" + showguides="true" inkscape:guide-bbox="true" inkscape:snap-bbox="true" inkscape:snap-nodes="true" @@ -800,7 +800,7 @@ sodipodi:cy="207" sodipodi:rx="1" sodipodi:ry="1" - d="m 11,207 a 1,1 0 1 1 -2,0 1,1 0 1 1 2,0 z" + d="m 11,207 c 0,0.55228 -0.447715,1 -1,1 -0.5522847,0 -1,-0.44772 -1,-1 0,-0.55228 0.4477153,-1 1,-1 0.552285,0 1,0.44772 1,1 z" transform="matrix(2,0,0,2,15,-207)" /> @@ -925,7 +925,7 @@ transform="translate(10.000004,-1.9999957)"> @@ -959,11 +959,11 @@ sodipodi:cy="-129.34375" sodipodi:rx="3.46875" sodipodi:ry="3.46875" - d="m 106.03125,-129.34375 a 3.46875,3.46875 0 1 1 -6.9375,0 3.46875,3.46875 0 1 1 6.9375,0 z" + d="m 106.03125,-129.34375 c 0,1.91574 -1.55301,3.46875 -3.46875,3.46875 -1.91574,0 -3.46875,-1.55301 -3.46875,-3.46875 0,-1.91574 1.55301,-3.46875 3.46875,-3.46875 1.91574,0 3.46875,1.55301 3.46875,3.46875 z" transform="matrix(1.009009,0,0,1.009009,-411.98649,15.371188)" /> @@ -1015,11 +1015,11 @@ sodipodi:cy="-129.34375" sodipodi:rx="3.46875" sodipodi:ry="3.46875" - d="m 106.03125,-129.34375 a 3.46875,3.46875 0 1 1 -6.9375,0 3.46875,3.46875 0 1 1 6.9375,0 z" + d="m 106.03125,-129.34375 c 0,1.91574 -1.55301,3.46875 -3.46875,3.46875 -1.91574,0 -3.46875,-1.55301 -3.46875,-3.46875 0,-1.91574 1.55301,-3.46875 3.46875,-3.46875 1.91574,0 3.46875,1.55301 3.46875,3.46875 z" transform="matrix(1.009009,0,0,1.009009,-410.98649,15.371188)" /> @@ -1099,11 +1099,11 @@ sodipodi:cy="-129.34375" sodipodi:rx="3.46875" sodipodi:ry="3.46875" - d="m 106.03125,-129.34375 a 3.46875,3.46875 0 1 1 -6.9375,0 3.46875,3.46875 0 1 1 6.9375,0 z" + d="m 106.03125,-129.34375 c 0,1.91574 -1.55301,3.46875 -3.46875,3.46875 -1.91574,0 -3.46875,-1.55301 -3.46875,-3.46875 0,-1.91574 1.55301,-3.46875 3.46875,-3.46875 1.91574,0 3.46875,1.55301 3.46875,3.46875 z" transform="matrix(1.009009,0,0,1.009009,-410.98649,14.371188)" /> @@ -1149,7 +1149,7 @@ transform="translate(10.000004,-1.9999957)"> @@ -1183,11 +1183,11 @@ sodipodi:cy="-129.34375" sodipodi:rx="3.46875" sodipodi:ry="3.46875" - d="m 106.03125,-129.34375 a 3.46875,3.46875 0 1 1 -6.9375,0 3.46875,3.46875 0 1 1 6.9375,0 z" + d="m 106.03125,-129.34375 c 0,1.91574 -1.55301,3.46875 -3.46875,3.46875 -1.91574,0 -3.46875,-1.55301 -3.46875,-3.46875 0,-1.91574 1.55301,-3.46875 3.46875,-3.46875 1.91574,0 3.46875,1.55301 3.46875,3.46875 z" transform="matrix(1.009009,0,0,1.009009,-411.98649,15.371188)" /> @@ -1239,11 +1239,11 @@ sodipodi:cy="-129.34375" sodipodi:rx="3.46875" sodipodi:ry="3.46875" - d="m 106.03125,-129.34375 a 3.46875,3.46875 0 1 1 -6.9375,0 3.46875,3.46875 0 1 1 6.9375,0 z" + d="m 106.03125,-129.34375 c 0,1.91574 -1.55301,3.46875 -3.46875,3.46875 -1.91574,0 -3.46875,-1.55301 -3.46875,-3.46875 0,-1.91574 1.55301,-3.46875 3.46875,-3.46875 1.91574,0 3.46875,1.55301 3.46875,3.46875 z" transform="matrix(1.009009,0,0,1.009009,-410.98649,15.371188)" /> @@ -1338,11 +1338,11 @@ sodipodi:cy="-129.34375" sodipodi:rx="3.46875" sodipodi:ry="3.46875" - d="m 106.03125,-129.34375 a 3.46875,3.46875 0 1 1 -6.9375,0 3.46875,3.46875 0 1 1 6.9375,0 z" + d="m 106.03125,-129.34375 c 0,1.91574 -1.55301,3.46875 -3.46875,3.46875 -1.91574,0 -3.46875,-1.55301 -3.46875,-3.46875 0,-1.91574 1.55301,-3.46875 3.46875,-3.46875 1.91574,0 3.46875,1.55301 3.46875,3.46875 z" transform="matrix(1.009009,0,0,1.009009,-410.98649,14.371188)" /> @@ -1388,7 +1388,7 @@ transform="translate(10.000004,-1.9999957)"> @@ -1422,11 +1422,11 @@ sodipodi:cy="-129.34375" sodipodi:rx="3.46875" sodipodi:ry="3.46875" - d="m 106.03125,-129.34375 a 3.46875,3.46875 0 1 1 -6.9375,0 3.46875,3.46875 0 1 1 6.9375,0 z" + d="m 106.03125,-129.34375 c 0,1.91574 -1.55301,3.46875 -3.46875,3.46875 -1.91574,0 -3.46875,-1.55301 -3.46875,-3.46875 0,-1.91574 1.55301,-3.46875 3.46875,-3.46875 1.91574,0 3.46875,1.55301 3.46875,3.46875 z" transform="matrix(1.009009,0,0,1.009009,-411.98649,15.371188)" /> + + From 6423455c66b450ee5ca6041c46c18be4be0bd9a0 Mon Sep 17 00:00:00 2001 From: Saman Bemel-Benrud Date: Wed, 15 May 2013 14:23:30 -0400 Subject: [PATCH 04/10] starting to add basic translate ui adjustments. --- data/core.yaml | 1 + dist/locales/en.json | 1 + js/id/ui/preset/localized.js | 17 +++++++++++------ 3 files changed, 13 insertions(+), 6 deletions(-) diff --git a/data/core.yaml b/data/core.yaml index c1e79ec08..be00c0506 100644 --- a/data/core.yaml +++ b/data/core.yaml @@ -126,6 +126,7 @@ en: just_edited: "You just edited OpenStreetMap!" browser_notice: "This editor is supported in Firefox, Chrome, Safari, Opera, and Internet Explorer 9 and above. Please upgrade your browser or use Potlatch 2 to edit the map." view_on_osm: "View on OSM" + translate: Translate zoom_in_edit: zoom in to edit the map logout: logout loading_auth: "Connecting to OpenStreetMap..." diff --git a/dist/locales/en.json b/dist/locales/en.json index 59e15673a..c80078437 100644 --- a/dist/locales/en.json +++ b/dist/locales/en.json @@ -160,6 +160,7 @@ "just_edited": "You just edited OpenStreetMap!", "browser_notice": "This editor is supported in Firefox, Chrome, Safari, Opera, and Internet Explorer 9 and above. Please upgrade your browser or use Potlatch 2 to edit the map.", "view_on_osm": "View on OSM", + "translate": "Translate", "zoom_in_edit": "zoom in to edit the map", "logout": "logout", "loading_auth": "Connecting to OpenStreetMap...", diff --git a/js/id/ui/preset/localized.js b/js/id/ui/preset/localized.js index d6dfc6991..b5af46888 100644 --- a/js/id/ui/preset/localized.js +++ b/js/id/ui/preset/localized.js @@ -15,15 +15,20 @@ iD.ui.preset.localized = function(field, context) { .on('change', change) .call(iD.behavior.accept().on('accept', event.close)); - selection.append('button') - .attr('class', 'localized-add') - .on('click', addBlank) - .append('span') - .attr('class', 'icon plus-dark'); - localizedInputs = selection.append('div') .attr('class', 'localized-wrap'); + var translateButton = selection.append('button') + .attr('class', 'localized-add') + .on('click', addBlank); + + translateButton.append('span') + .attr('class', 'icon translate'); + + translateButton.call(bootstrap.tooltip() + .title(t('translate')) + .placement('top')); + } function addBlank() { From be933a72cbb4dae3b3db8c07507cba914eb05291 Mon Sep 17 00:00:00 2001 From: Saman Bemel-Benrud Date: Wed, 15 May 2013 16:15:42 -0400 Subject: [PATCH 05/10] style cleanup + fleshed out translate UI --- css/app.css | 156 +++++++++++++++++------------------ dist/img/sprite.svg | 35 +++----- js/id/ui/preset/localized.js | 20 +++-- js/id/ui/preset/wikipedia.js | 3 +- js/id/ui/taglist.js | 2 +- 5 files changed, 107 insertions(+), 109 deletions(-) diff --git a/css/app.css b/css/app.css index df0051c27..2b61aef3f 100644 --- a/css/app.css +++ b/css/app.css @@ -160,9 +160,11 @@ input[type=email] { height:30px; width: 100%; border-radius:4px; + text-overflow: ellipsis; + overflow: hidden; -webkit-transition: all 100ms; -moz-transition: all 100ms; - -o-transition: all 100ms; + -o-transition: all 100ms; transition: all 100ms; } @@ -398,7 +400,7 @@ button.minor { top: 0; right: 0; height: 100%; - width: 20px; + width: 10%; opacity: .5; border-radius: 0; } @@ -508,8 +510,6 @@ button.save.has-count .count::before { .icon.delete { background-position: -180px 0;} .icon.remove { background-position: -200px 0;} .icon.inspect { background-position: -220px 0;} -.icon.zoom-in { background-position: -240px 0;} -.icon.zoom-out { background-position: -260px 0;} .icon.plus { background-position: -240px 0;} .icon.search { background-position: -280px 0;} .icon.geocode { background-position: -280px 0;} @@ -523,6 +523,9 @@ button.save.has-count .count::before { .icon.help { background-position: -460px 0;} .icon.translate { background-position: -520px 0;} +.icon.plus.light, +.icon.zoom-in { background-position: -240px -20px;} +.icon.zoom-out { background-position: -260px -20px;} .icon.inspect.light { background-position: -220px -20px;} .icon.geocode.light { background-position: -280px -20px;} .icon.help.light { background-position: -460px -20px;} @@ -916,7 +919,7 @@ a:hover .icon.out-link { background-position: -500px -14px;} .form-label .modified-icon { border-right: 0; opacity: 0; - right: 20px; + right: 10%; } .modified .form-label .modified-icon { @@ -939,12 +942,6 @@ a:hover .icon.out-link { background-position: -500px -14px;} height: 65px; } -.form-field-name input.localized-main { - height: 35px; - font-size: 18px; - font-weight: bold; -} - /* adding additional preset fields */ .more-buttons { @@ -992,11 +989,11 @@ button.preset-add-field:nth-last-child(8) ~ button.preset-add-field { width: 12.5%; } -.preset-add-field .tooltip.top .tooltip-arrow { +.tag-wrap .tooltip.top .tooltip-arrow { border-top-color: #000; } -.preset-add-field .tooltip-inner { +.tag-wrap .tooltip-inner { background: #000; color: #ccc; } @@ -1035,15 +1032,15 @@ button.preset-add-field:nth-last-child(8) ~ button.preset-add-field { input[type=number] { position: relative; - padding-right: 65px; + padding-right: 20%; } .spin-control { - width: 41px; + width: 20%; height: 29px; border-left: 1px solid #CCC; display: inline-block; - margin-left: -41px; + margin-left: -20%; margin-bottom: -11px; position: relative; } @@ -1169,75 +1166,23 @@ input[type=number] { content: none; } -.form-field .localized-main { - width: 90%; - border-radius: 0 0 0 4px; -} - -.form-field .localized-add { - width: 10%; - height: 35px; - border-radius: 0 0 4px 0; - border-bottom: 1px solid #ccc; - border-right: 1px solid #ccc; - vertical-align: top; -} - -.form-field .localized-wrap .entry .localized-lang { - border-top: none; - border-right: none; - border-radius: 0; - width: 30%; -} - -.form-field .localized-wrap .entry .localized-value { - border-top: none; - border-radius: 0; - width: 60%; -} - -.form-field .localized-wrap .entry .localized-remove { - height: 30px; - border-radius: 0; - border-bottom: 1px solid #ccc; - border-right: 1px solid #ccc; - vertical-align: top; - width: 10%; -} - -.form-field .localized-wrap .entry:last-child .localized-lang { - border-radius: 0 0 0 4px; -} - -.form-field .localized-wrap .entry:last-child .localized-remove { - border-radius: 0 0 4px 0; -} - .form-field .wiki-lang { - width: 30%; - border-right: none; - border-radius: 0 0 0 4px; + border-radius: 0; } .form-field .wiki-title { - width: 60%; - border-right: none; - border-radius: 0; + padding-right: 10%; +} + +.form-field .wiki-title ~ .combobox-carat { + margin-left: -20%; + margin-right: 10%; } .form-field .wiki-link { - border-radius: 0 0 4px 0; - border: 1px solid #ccc; - border-top: none; - height: 30px; - width: 10%; float: right; padding: 5px; text-align: center; - -webkit-transition: all 100ms; - -moz-transition: all 100ms; - -o-transition: all 100ms; - transition: all 100ms; } .form-field .wiki-link:hover { @@ -1263,6 +1208,61 @@ input[type=number] { font-weight: bold; } +/* Name + translate form */ + +.form-field-name input.localized-main { + font-weight: bold; +} + +.form-field .localized-main { + padding-right: 10%; +} + +.form-field .button-input-action { + position: relative; + width: 10%; + margin-left: -10%; + border: 1px solid #CCC; + border-top-width: 0; + border-radius: 0 0 4px 0; + height: 30px; + vertical-align: top; +} + +.form-field .localized-wrap .entry { + padding: 0; + padding-top: 10px; + position: relative; +} + +.form-field .localized-wrap .entry::before { + content: ""; + display: block; + position: absolute; + background:#ccc; + height: 10px; + width: 1px; + left: 0; + right: 0; + top: 0; + margin: auto; +} + +.form-field .localized-wrap .entry .localized-lang { + border-radius: 0; + border-top-width: 0; +} + +.form-field .localized-wrap .entry .localized-value { + padding-right: 10%; + border-top-width: 0; + border-radius: 0 0 4px 4px; +} + +.form-field .localized-wrap .entry .localized-remove { + border-radius: 0 0 4px 0; +} + /* Preset form address */ .form-field .addr-housename { @@ -1348,7 +1348,7 @@ div.combobox { } .tag-list { - margin-right: 40px; + margin-right: 20%; } .tag-row { @@ -1384,7 +1384,7 @@ div.combobox { .tag-row button { position: absolute; height: 30px; - right: -20px; + right: -10%; border: 1px solid #CCC; border-top-width: 0; border-left-width: 0; border-radius: 0; @@ -1413,7 +1413,7 @@ div.combobox { } .tag-row button.tag-help-button { - right: -40px; + right: -20%; } /* Adding form fields to tag editor */ diff --git a/dist/img/sprite.svg b/dist/img/sprite.svg index e79d0e8a8..279a60130 100644 --- a/dist/img/sprite.svg +++ b/dist/img/sprite.svg @@ -39,11 +39,11 @@ inkscape:pageopacity="0.0" inkscape:pageshadow="2" inkscape:zoom="1" - inkscape:cx="258.5762" - inkscape:cy="479.73245" + inkscape:cx="66.6258" + inkscape:cy="533.15512" inkscape:document-units="px" inkscape:current-layer="layer12" - showgrid="true" + showgrid="false" inkscape:window-width="1280" inkscape:window-height="756" inkscape:window-x="35" @@ -53,7 +53,7 @@ fit-margin-left="0" fit-margin-right="0" fit-margin-bottom="0" - showguides="true" + showguides="false" inkscape:guide-bbox="true" inkscape:snap-bbox="true" inkscape:snap-nodes="true" @@ -379,11 +379,11 @@ sodipodi:nodetypes="ccccccccc" /> + sodipodi:nodetypes="cccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccsscsssssccssccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccsssssssssssssssccccccccccccccccccccccccccccsccssssssssssssss" /> + inkscape:connector-curvature="0" + sodipodi:nodetypes="cccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccsscsssssccssccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccsssssssssscccccccccccccccccccccsssssccccccccccccccccccccccccccccsccssssssssssssss" /> + sodipodi:nodetypes="cccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccsscsssssccssccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccsssssssssssssssccccccccccccccccccccccccccccsccssssssssssssss" /> - - diff --git a/js/id/ui/preset/localized.js b/js/id/ui/preset/localized.js index b5af46888..70e26b5fb 100644 --- a/js/id/ui/preset/localized.js +++ b/js/id/ui/preset/localized.js @@ -15,20 +15,20 @@ iD.ui.preset.localized = function(field, context) { .on('change', change) .call(iD.behavior.accept().on('accept', event.close)); - localizedInputs = selection.append('div') - .attr('class', 'localized-wrap'); - var translateButton = selection.append('button') - .attr('class', 'localized-add') + .attr('class', 'button-input-action localized-add minor') .on('click', addBlank); translateButton.append('span') - .attr('class', 'icon translate'); + .attr('class', 'icon plus'); translateButton.call(bootstrap.tooltip() .title(t('translate')) .placement('top')); + localizedInputs = selection.append('div') + .attr('class', 'localized-wrap'); + } function addBlank() { @@ -97,9 +97,15 @@ iD.ui.preset.localized = function(field, context) { var wrap = d3.select(this); var langcombo = d3.combobox().fetcher(fetcher); + wrap.append('label') + .attr('class','form-label') + .text('Translation') + .attr('for','localized-lang'); + wrap.append('input') .attr('class', 'localized-lang') .attr('type', 'text') + .attr('placeholder','Choose language') .on('blur', changeLang) .on('change', changeLang) .call(langcombo); @@ -111,14 +117,14 @@ iD.ui.preset.localized = function(field, context) { .attr('class', 'localized-value'); wrap.append('button') - .attr('class', 'localized-remove') + .attr('class', 'minor button-input-action localized-remove') .on('click', function(d) { var t = {}; t[key(d.lang)] = ''; event.change(t); d3.select(this.parentNode).remove(); }) - .append('span').attr('class', 'icon remove'); + .append('span').attr('class', 'icon delete'); }); diff --git a/js/id/ui/preset/wikipedia.js b/js/id/ui/preset/wikipedia.js index fcda7077c..2ddd3ab77 100644 --- a/js/id/ui/preset/wikipedia.js +++ b/js/id/ui/preset/wikipedia.js @@ -43,13 +43,14 @@ iD.ui.preset.wikipedia = function(field, context) { title = selection.append('input') .attr('type', 'text') .attr('class', 'wiki-title') + .attr('plaeholder', 'URL to Wikipedia page') .attr('id', 'preset-input-' + field.id) .on('blur', change) .on('change', change) .call(titlecombo); link = selection.append('a') - .attr('class', 'wiki-link minor') + .attr('class', 'wiki-link button-input-action minor') .attr('target', '_blank'); link.append('span') .attr('class','icon out-link'); diff --git a/js/id/ui/taglist.js b/js/id/ui/taglist.js index 3b3442176..84e8cc177 100644 --- a/js/id/ui/taglist.js +++ b/js/id/ui/taglist.js @@ -29,7 +29,7 @@ iD.ui.Taglist = function(context, entity) { .on('click', addTag); newTag.append('span') - .attr('class', 'icon plus'); + .attr('class', 'icon plus light'); newTag.append('span') .attr('class', 'label') From 6ecbf3778fa46039cbdb0b42d17ec57adace5396 Mon Sep 17 00:00:00 2001 From: Saman Bemel-Benrud Date: Wed, 15 May 2013 16:57:04 -0400 Subject: [PATCH 06/10] cleanup / polish new changes --- css/app.css | 20 +++++++++++--------- data/core.yaml | 1 + dist/img/sprite.svg | 35 +++++++++++++++++++++++++---------- dist/locales/en.json | 1 + js/id/ui/preset/localized.js | 2 +- js/id/ui/preset/wikipedia.js | 1 - js/id/ui/taglist.js | 4 ++-- 7 files changed, 41 insertions(+), 23 deletions(-) diff --git a/css/app.css b/css/app.css index 2b61aef3f..41d43d680 100644 --- a/css/app.css +++ b/css/app.css @@ -1220,10 +1220,12 @@ input[type=number] { .form-field .button-input-action { position: relative; + right: 1px; width: 10%; margin-left: -10%; border: 1px solid #CCC; border-top-width: 0; + border-right-width: 0; border-radius: 0 0 4px 0; height: 30px; vertical-align: top; @@ -1347,10 +1349,6 @@ div.combobox { border-top: 1px solid #ccc; } -.tag-list { - margin-right: 20%; -} - .tag-row { width: 100%; position: relative; @@ -1364,6 +1362,12 @@ div.combobox { border-left: 1px solid #CCC; } +.tag-row .key-wrap, +.tag-row .input-wrap-position { + width: 40%; + float: left; +} + .tag-row input.key { background-color: #f6f6f6; } @@ -1384,7 +1388,7 @@ div.combobox { .tag-row button { position: absolute; height: 30px; - right: -10%; + right: 10%; border: 1px solid #CCC; border-top-width: 0; border-left-width: 0; border-radius: 0; @@ -1413,7 +1417,7 @@ div.combobox { } .tag-row button.tag-help-button { - right: -20%; + right: 0; } /* Adding form fields to tag editor */ @@ -1466,8 +1470,6 @@ div.combobox { .additional-tags div.tag-help { float: left; width: 100%; - width: -webkit-calc(100% + 40px); - width: calc(100% + 40px); } img.wiki-image { @@ -1764,7 +1766,7 @@ img.wiki-image { .help-wrap .toc li.walkthrough a { overflow: hidden; - border-radius: 4px; + border-radius: 0 0 4px 4px; } .help-wrap .nav { diff --git a/data/core.yaml b/data/core.yaml index be00c0506..2933770ca 100644 --- a/data/core.yaml +++ b/data/core.yaml @@ -127,6 +127,7 @@ en: browser_notice: "This editor is supported in Firefox, Chrome, Safari, Opera, and Internet Explorer 9 and above. Please upgrade your browser or use Potlatch 2 to edit the map." view_on_osm: "View on OSM" translate: Translate + localized_translation_label: Translation zoom_in_edit: zoom in to edit the map logout: logout loading_auth: "Connecting to OpenStreetMap..." diff --git a/dist/img/sprite.svg b/dist/img/sprite.svg index 279a60130..3d3b656ce 100644 --- a/dist/img/sprite.svg +++ b/dist/img/sprite.svg @@ -38,9 +38,9 @@ borderopacity="1.0" inkscape:pageopacity="0.0" inkscape:pageshadow="2" - inkscape:zoom="1" - inkscape:cx="66.6258" - inkscape:cy="533.15512" + inkscape:zoom="9.3884297" + inkscape:cx="235.04931" + inkscape:cy="525.74069" inkscape:document-units="px" inkscape:current-layer="layer12" showgrid="false" @@ -53,7 +53,7 @@ fit-margin-left="0" fit-margin-right="0" fit-margin-bottom="0" - showguides="false" + showguides="true" inkscape:guide-bbox="true" inkscape:snap-bbox="true" inkscape:snap-nodes="true" @@ -379,11 +379,11 @@ sodipodi:nodetypes="ccccccccc" /> + sodipodi:nodetypes="cccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccsscsssssccssccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccsssssssssssssssccccccccccccccccccccccccccccsccssssssssssssss" /> + sodipodi:nodetypes="cccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccsscsssssccssccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccsssssssssscccccccccccccccccccccsssssccccccccccccccccccccccccccccsccssssssssssssss" /> + sodipodi:nodetypes="cccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccsscsssssccssccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccsssssssssssssssccccccccccccccccccccccccccccsccssssssssssssss" /> + + + diff --git a/dist/locales/en.json b/dist/locales/en.json index c80078437..02c032568 100644 --- a/dist/locales/en.json +++ b/dist/locales/en.json @@ -161,6 +161,7 @@ "browser_notice": "This editor is supported in Firefox, Chrome, Safari, Opera, and Internet Explorer 9 and above. Please upgrade your browser or use Potlatch 2 to edit the map.", "view_on_osm": "View on OSM", "translate": "Translate", + "localized_translation_label": "Translation", "zoom_in_edit": "zoom in to edit the map", "logout": "logout", "loading_auth": "Connecting to OpenStreetMap...", diff --git a/js/id/ui/preset/localized.js b/js/id/ui/preset/localized.js index 70e26b5fb..9056afbff 100644 --- a/js/id/ui/preset/localized.js +++ b/js/id/ui/preset/localized.js @@ -99,7 +99,7 @@ iD.ui.preset.localized = function(field, context) { wrap.append('label') .attr('class','form-label') - .text('Translation') + .text(t('localized_translation_label')) .attr('for','localized-lang'); wrap.append('input') diff --git a/js/id/ui/preset/wikipedia.js b/js/id/ui/preset/wikipedia.js index 2ddd3ab77..d24063ad9 100644 --- a/js/id/ui/preset/wikipedia.js +++ b/js/id/ui/preset/wikipedia.js @@ -43,7 +43,6 @@ iD.ui.preset.wikipedia = function(field, context) { title = selection.append('input') .attr('type', 'text') .attr('class', 'wiki-title') - .attr('plaeholder', 'URL to Wikipedia page') .attr('id', 'preset-input-' + field.id) .on('blur', change) .on('change', change) diff --git a/js/id/ui/taglist.js b/js/id/ui/taglist.js index 84e8cc177..e8abdf2a6 100644 --- a/js/id/ui/taglist.js +++ b/js/id/ui/taglist.js @@ -58,10 +58,10 @@ iD.ui.Taglist = function(context, entity) { li.exit().remove(); var row = li.enter().append('li') - .attr('class', 'tag-row'); + .attr('class', 'tag-row cf'); row.append('div') - .attr('class', 'key-wrap col6') + .attr('class', 'key-wrap') .append('input') .property('type', 'text') .attr('class', 'key') From 8159f075e9dccf78e796f959803d0895bf02f7dc Mon Sep 17 00:00:00 2001 From: Saman Bemel-Benrud Date: Wed, 15 May 2013 17:08:04 -0400 Subject: [PATCH 07/10] backtracking on changes to about section. --- css/app.css | 13 ++++++++++++- 1 file changed, 12 insertions(+), 1 deletion(-) diff --git a/css/app.css b/css/app.css index 41d43d680..46259f552 100644 --- a/css/app.css +++ b/css/app.css @@ -1747,9 +1747,13 @@ img.wiki-image { .help-wrap .toc li a, .help-wrap .nav a { display: block; + border: 1px solid #CCC; padding: 5px 10px; } +.help-wrap .toc li a { + border-bottom: 0; +} .help-wrap .toc li a:hover, .help-wrap .nav a:hover { @@ -1764,9 +1768,16 @@ img.wiki-image { border-radius: 4px 4px 0 0; } +.help-wrap .toc li:nth-last-child(2) a { + border-bottom: 1px solid #CCC; + border-radius: 0 0 4px 4px +} + .help-wrap .toc li.walkthrough a { overflow: hidden; - border-radius: 0 0 4px 4px; + margin-top: 10px; + border-bottom: 1px solid #ccc; + border-radius: 4px; } .help-wrap .nav { From c1bee88d8a51e7ee62b12a05f859b5397a270420 Mon Sep 17 00:00:00 2001 From: Saman Bemel-Benrud Date: Wed, 15 May 2013 17:09:56 -0400 Subject: [PATCH 08/10] adding bug to sprite. --- dist/img/sprite.svg | 21 ++++++++++++++++++--- 1 file changed, 18 insertions(+), 3 deletions(-) diff --git a/dist/img/sprite.svg b/dist/img/sprite.svg index 3d3b656ce..8a93ce527 100644 --- a/dist/img/sprite.svg +++ b/dist/img/sprite.svg @@ -38,9 +38,9 @@ borderopacity="1.0" inkscape:pageopacity="0.0" inkscape:pageshadow="2" - inkscape:zoom="9.3884297" - inkscape:cx="235.04931" - inkscape:cy="525.74069" + inkscape:zoom="4" + inkscape:cx="364.7626" + inkscape:cy="528.14821" inkscape:document-units="px" inkscape:current-layer="layer12" showgrid="false" @@ -2294,5 +2294,20 @@ style="font-size:16.71258354000000068px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;text-indent:0;text-align:start;text-decoration:none;line-height:100%;letter-spacing:0px;word-spacing:normal;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;text-anchor:start;baseline-shift:baseline;opacity:1;color:#000000;fill:#ffffff;fill-rule:nonzero;enable-background:accumulate;font-family:Helvetica Neue" id="path5293" inkscape:connector-curvature="0" /> + + + From d8308cbb6cdc1b5215c3bdee7a1ca86d6a160622 Mon Sep 17 00:00:00 2001 From: Saman Bemel-Benrud Date: Wed, 15 May 2013 17:15:49 -0400 Subject: [PATCH 09/10] icon+tooltip for 'report a bug' link in footer --- css/app.css | 2 +- dist/img/sprite.svg | 8 ++++---- js/id/ui.js | 13 ++++++++++--- 3 files changed, 15 insertions(+), 8 deletions(-) diff --git a/css/app.css b/css/app.css index 46259f552..103fa0687 100644 --- a/css/app.css +++ b/css/app.css @@ -518,6 +518,7 @@ button.save.has-count .count::before { .icon.nearby { background-position: -340px 0;} .icon.geolocate { background-position: -360px 0;} .icon.warning { background-position: -380px 0;} +.icon.bug { background-position: -400px 0;} .icon.back { background-position: -420px 0;} .icon.forward { background-position: -440px 0;} .icon.help { background-position: -460px 0;} @@ -1845,7 +1846,6 @@ img.wiki-image { position: absolute; right:0px; bottom:0px; - overflow: hidden; white-space: nowrap; text-overflow: ellipsis; border-radius: 0; diff --git a/dist/img/sprite.svg b/dist/img/sprite.svg index 8a93ce527..fad721ac0 100644 --- a/dist/img/sprite.svg +++ b/dist/img/sprite.svg @@ -38,9 +38,9 @@ borderopacity="1.0" inkscape:pageopacity="0.0" inkscape:pageshadow="2" - inkscape:zoom="4" - inkscape:cx="364.7626" - inkscape:cy="528.14821" + inkscape:zoom="2.8284271" + inkscape:cx="388.17355" + inkscape:cy="526.44457" inkscape:document-units="px" inkscape:current-layer="layer12" showgrid="false" @@ -2296,7 +2296,7 @@ inkscape:connector-curvature="0" /> Date: Wed, 15 May 2013 17:31:16 -0400 Subject: [PATCH 10/10] better placeholder text / proper translation --- data/core.yaml | 7 +++++-- dist/locales/en.json | 7 ++++++- js/id/ui/preset/localized.js | 7 ++++--- 3 files changed, 15 insertions(+), 6 deletions(-) diff --git a/data/core.yaml b/data/core.yaml index 2933770ca..555d9bcd8 100644 --- a/data/core.yaml +++ b/data/core.yaml @@ -126,8 +126,11 @@ en: just_edited: "You just edited OpenStreetMap!" browser_notice: "This editor is supported in Firefox, Chrome, Safari, Opera, and Internet Explorer 9 and above. Please upgrade your browser or use Potlatch 2 to edit the map." view_on_osm: "View on OSM" - translate: Translate - localized_translation_label: Translation + translate: + translate: Translate + localized_translation_label: Translation + localized_translation_language: Choose language + localized_translation_name: Name zoom_in_edit: zoom in to edit the map logout: logout loading_auth: "Connecting to OpenStreetMap..." diff --git a/dist/locales/en.json b/dist/locales/en.json index 02c032568..cb78fa1e1 100644 --- a/dist/locales/en.json +++ b/dist/locales/en.json @@ -160,7 +160,12 @@ "just_edited": "You just edited OpenStreetMap!", "browser_notice": "This editor is supported in Firefox, Chrome, Safari, Opera, and Internet Explorer 9 and above. Please upgrade your browser or use Potlatch 2 to edit the map.", "view_on_osm": "View on OSM", - "translate": "Translate", + "translate": { + "translate": "Translate", + "localized_translation_label": "Translation", + "localized_translation_language": "Choose language", + "localized_translation_name": "Name" + }, "localized_translation_label": "Translation", "zoom_in_edit": "zoom in to edit the map", "logout": "logout", diff --git a/js/id/ui/preset/localized.js b/js/id/ui/preset/localized.js index 9056afbff..2776795d1 100644 --- a/js/id/ui/preset/localized.js +++ b/js/id/ui/preset/localized.js @@ -23,7 +23,7 @@ iD.ui.preset.localized = function(field, context) { .attr('class', 'icon plus'); translateButton.call(bootstrap.tooltip() - .title(t('translate')) + .title(t('translate.translate')) .placement('top')); localizedInputs = selection.append('div') @@ -99,13 +99,13 @@ iD.ui.preset.localized = function(field, context) { wrap.append('label') .attr('class','form-label') - .text(t('localized_translation_label')) + .text(t('translate.localized_translation_label')) .attr('for','localized-lang'); wrap.append('input') .attr('class', 'localized-lang') .attr('type', 'text') - .attr('placeholder','Choose language') + .attr('placeholder',t('translate.localized_translation_language')) .on('blur', changeLang) .on('change', changeLang) .call(langcombo); @@ -114,6 +114,7 @@ iD.ui.preset.localized = function(field, context) { .on('blur', changeValue) .on('change', changeValue) .attr('type', 'text') + .attr('placeholder', t('translate.localized_translation_name')) .attr('class', 'localized-value'); wrap.append('button')