diff --git a/css/app.css b/css/app.css index 2b956888b..a9d14b1b5 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; } @@ -411,7 +413,7 @@ button.minor { top: 0; right: 0; height: 100%; - width: 20px; + width: 10%; opacity: .5; border-radius: 0; } @@ -521,8 +523,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;} @@ -531,10 +531,15 @@ 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;} +.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;} @@ -603,6 +608,7 @@ a:hover .icon.out-link { background-position: -500px -14px;} } .header h3 { + text-align: center; margin-right: 40px; margin-bottom: 0; white-space: nowrap; @@ -614,7 +620,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; @@ -658,7 +663,6 @@ a:hover .icon.out-link { background-position: -500px -14px;} } .inspector-wrap .header button.preset-reset { - border-right: 1px solid #CCC; position: relative; } @@ -929,7 +933,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 { @@ -952,12 +956,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 { @@ -1005,11 +1003,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; } @@ -1048,15 +1046,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; } @@ -1182,75 +1180,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 { @@ -1276,14 +1222,72 @@ 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; + 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; +} + +.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 { border: 0; + border-radius: 0; } .form-field .addr-number { - width: 33%; + width: 33.3333%; border-left: 0; border-right: 0; border-bottom: 0; @@ -1291,14 +1295,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; @@ -1306,7 +1310,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; @@ -1359,10 +1363,6 @@ div.combobox { border-top: 1px solid #ccc; } -.tag-list { - margin-right: 40px; -} - .tag-row { width: 100%; position: relative; @@ -1376,6 +1376,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; } @@ -1396,7 +1402,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; @@ -1425,7 +1431,7 @@ div.combobox { } .tag-row button.tag-help-button { - right: -40px; + right: 0; } /* Adding form fields to tag editor */ @@ -1478,8 +1484,6 @@ div.combobox { .additional-tags div.tag-help { float: left; width: 100%; - width: -webkit-calc(100% + 40px); - width: calc(100% + 40px); } img.wiki-image { @@ -1855,7 +1859,6 @@ img.wiki-image { position: absolute; right:0px; bottom:0px; - overflow: hidden; white-space: nowrap; text-overflow: ellipsis; border-radius: 0; @@ -2148,7 +2151,8 @@ img.wiki-image { ------------------------------------------------------- */ .tooltip { - width: 200px; + max-width: 200px; + min-width: 120px; position: absolute; display: none; color:#333; @@ -2182,7 +2186,6 @@ img.wiki-image { } .tooltip-inner { - display: inline-block; padding: 10px; font-weight: normal; background-color: white; @@ -2287,11 +2290,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; @@ -2304,10 +2311,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..555d9bcd8 100644 --- a/data/core.yaml +++ b/data/core.yaml @@ -122,9 +122,15 @@ 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" + 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/img/sprite.svg b/dist/img/sprite.svg index 7c4d05738..a9e242241 100644 --- a/dist/img/sprite.svg +++ b/dist/img/sprite.svg @@ -38,6 +38,23 @@ borderopacity="1.0" inkscape:pageopacity="0.0" inkscape:pageshadow="2" +<<<<<<< HEAD + inkscape:zoom="2.8284271" + inkscape:cx="388.17355" + inkscape:cy="526.44457" +======= +<<<<<<< HEAD + inkscape:zoom="9.3884297" + inkscape:cx="235.04931" + inkscape:cy="525.74069" +>>>>>>> master + inkscape:document-units="px" + inkscape:current-layer="layer12" + showgrid="false" + inkscape:window-width="1280" + inkscape:window-height="756" + inkscape:window-x="35" +======= inkscape:zoom="16" inkscape:cx="471.57386" inkscape:cy="545.41375" @@ -47,6 +64,7 @@ inkscape:window-width="1280" inkscape:window-height="756" inkscape:window-x="56" +>>>>>>> 4de0eada5fb19a83c198473774bbda001c6166f6 inkscape:window-y="0" inkscape:window-maximized="0" fit-margin-top="0" @@ -377,6 +395,16 @@ id="path3769" inkscape:connector-curvature="0" sodipodi:nodetypes="ccccccccc" /> +<<<<<<< HEAD + +======= +>>>>>>> 4de0eada5fb19a83c198473774bbda001c6166f6 + inkscape:connector-curvature="0" + sodipodi:nodetypes="cccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccsscsssssccssccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccsssssssssscccccccccccccccccccccsssssccccccccccccccccccccccccccccsccssssssssssssss" /> + sodipodi:nodetypes="cccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccsscsssssccssccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccsssssssssssssssccccccccccccccccccccccccccccsccssssssssssssss" /> + + +<<<<<<< HEAD + >>>>>> master id="rect14284" /> + +======= style="color:#000000;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:2.79999375000000006;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" inkscape:connector-curvature="0" /> +>>>>>>> 4de0eada5fb19a83c198473774bbda001c6166f6 +>>>>>>> master diff --git a/dist/locales/en.json b/dist/locales/en.json index b4354008b..cb78fa1e1 100644 --- a/dist/locales/en.json +++ b/dist/locales/en.json @@ -156,9 +156,17 @@ }, "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", + "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", "loading_auth": "Connecting to OpenStreetMap...", diff --git a/js/id/ui.js b/js/id/ui.js index ff72efeca..f8342ed5b 100644 --- a/js/id/ui.js +++ b/js/id/ui.js @@ -102,12 +102,19 @@ iD.ui = function(context) { .attr('href', 'http://github.com/systemed/iD') .text(iD.version); - linkList.append('li') + var bugReport = linkList.append('li') .append('a') .attr('target', '_blank') .attr('tabindex', -1) - .attr('href', 'https://github.com/systemed/iD/issues') - .text(t('report_a_bug')); + .attr('href', 'https://github.com/systemed/iD/issues'); + + bugReport.append('span') + .attr('class','icon bug light'); + + bugReport.call(bootstrap.tooltip() + .title(t('report_a_bug')) + .placement('top') + ); linkList.append('li') .attr('class', 'user-list') @@ -164,5 +171,5 @@ iD.ui = function(context) { }; iD.ui.tooltipHtml = function(text, key) { - return '' + text + '' + '
' + key + '
'; + return '' + text + '' + '
' + ' ' + (t('tooltip_keyhint')) + ' ' + ' ' + key + '
'; }; diff --git a/js/id/ui/preset/localized.js b/js/id/ui/preset/localized.js index d6dfc6991..2776795d1 100644 --- a/js/id/ui/preset/localized.js +++ b/js/id/ui/preset/localized.js @@ -15,11 +15,16 @@ 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'); + var translateButton = selection.append('button') + .attr('class', 'button-input-action localized-add minor') + .on('click', addBlank); + + translateButton.append('span') + .attr('class', 'icon plus'); + + translateButton.call(bootstrap.tooltip() + .title(t('translate.translate')) + .placement('top')); localizedInputs = selection.append('div') .attr('class', 'localized-wrap'); @@ -92,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(t('translate.localized_translation_label')) + .attr('for','localized-lang'); + wrap.append('input') .attr('class', 'localized-lang') .attr('type', 'text') + .attr('placeholder',t('translate.localized_translation_language')) .on('blur', changeLang) .on('change', changeLang) .call(langcombo); @@ -103,17 +114,18 @@ 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') - .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..d24063ad9 100644 --- a/js/id/ui/preset/wikipedia.js +++ b/js/id/ui/preset/wikipedia.js @@ -49,7 +49,7 @@ iD.ui.preset.wikipedia = function(field, context) { .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..e8abdf2a6 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') @@ -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')