diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 944facffd..d7e2fb0bc 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -37,6 +37,16 @@ The words in brackets, for example `{name}`, should not be translated into a new Translations are licensed under [WTFPL](https://raw.github.com/systemed/iD/master/LICENSE), the same license as iD. +## Adding New Strings for Translation + +iD translates strings with a `t` function - `t('foo.bar')` translate the key +`foo.bar` into the current language. If you introduce new translatable strings +to iD, only display them in the interface through the `t()` function. + +Then, add the new string to `data/core.yaml` or `data/presets.yaml` (depending +on whether it pertains to core code or presets). The translation system, +Transiflex, will automatically detect the change. + ## Javascript We use the [Airbnb style for Javascript](https://github.com/airbnb/javascript) with diff --git a/css/app.css b/css/app.css index 1cf3ba871..12112a78c 100644 --- a/css/app.css +++ b/css/app.css @@ -668,6 +668,7 @@ a.selected:hover .toggle.icon { background-position: -40px -180px;} /* Preset grid */ .preset-grid { + width:100%; margin-top: 60px; padding: 20px 10px 20px 20px; } @@ -783,6 +784,17 @@ a.selected:hover .toggle.icon { background-position: -40px -180px;} margin: 5px; } +.show-more { + text-align: center; + padding: 5px; + margin-top:4px; + border-top: 1px solid #ccc; +} + +.show-more a { + color: #222; +} + /* Preset icon colors */ .preset-icon-fill.tag-shop, @@ -2078,3 +2090,22 @@ a.success-action { ::-webkit-scrollbar-corner { background: transparent } + +/* clearfix */ +.clearfix:after { + content: "."; + display: block; + clear: both; + visibility: hidden; + line-height: 0; + height: 0; +} +.clearfix { + display: inline-block; +} +html[xmlns] .clearfix { + display: block; +} +* html .clearfix { + height: 1%; +} diff --git a/data/core.yaml b/data/core.yaml index 85ded3438..41faa5d89 100644 --- a/data/core.yaml +++ b/data/core.yaml @@ -133,6 +133,7 @@ en: inspector: no_documentation_combination: There is no documentation available for this tag combination no_documentation_key: There is no documentation available for this key + show_more: Show More new_tag: New tag edit_tags: Edit tags okay: Okay diff --git a/js/id/ui/preset_grid.js b/js/id/ui/preset_grid.js index 482364e8c..dd17f756e 100644 --- a/js/id/ui/preset_grid.js +++ b/js/id/ui/preset_grid.js @@ -1,6 +1,8 @@ iD.ui.PresetGrid = function(context) { var event = d3.dispatch('choose', 'close'), entity, + default_limit = 9, + currently_drawn = 9, presets = context.presets(), taginfo = iD.taginfo(); @@ -16,13 +18,27 @@ iD.ui.PresetGrid = function(context) { var message = messagewrap.append('h3') .text(t('inspector.choose')); + var gridwrap = selection.append('div') + .attr('class', 'fillL inspector-body inspector-body-' + entity.geometry(context.graph())); + + var grid = gridwrap.append('div') + .attr('class', 'preset-grid fillL clearfix') + .data([context.presets().defaults(entity, 36).collection]); + + var show_more = gridwrap.append('div') + .attr('class', 'fillL show-more'); + + show_more.append('a') + .text(t('inspector.show_more')) + .on('click', function() { + grid.call(drawGrid, (currently_drawn += default_limit)); + }); + + grid.call(drawGrid, default_limit); + var searchwrap = selection.append('div') .attr('class', 'preset-grid-search-wrap inspector-inner'); - var grid = selection.append('div') - .attr('class', 'preset-grid inspector-body fillL inspector-body-' + entity.geometry(context.graph())) - .call(drawGrid, context.presets().defaults(entity, 12)); - function keydown() { // hack to let delete shortcut work when search is autofocused if (search.property('value').length === 0 && @@ -48,6 +64,7 @@ iD.ui.PresetGrid = function(context) { if (d3.event.keyCode === 13 && value.length) { choose(grid.selectAll('.grid-entry:first-child').datum()); } else { + currently_drawn = default_limit; grid.classed('filtered', value.length); if (value.length) { var results = presets.search(value); @@ -55,9 +72,11 @@ iD.ui.PresetGrid = function(context) { n: results.collection.length, search: value })); - grid.call(drawGrid, results); + grid.data([results.collection]) + .call(drawGrid, default_limit); } else { - grid.call(drawGrid, context.presets().defaults(entity, 12)); + grid.data([context.presets().defaults(entity, 36).collection]) + .call(drawGrid, default_limit); } } } @@ -81,11 +100,12 @@ iD.ui.PresetGrid = function(context) { } function choose(d) { + currently_drawn = default_limit; // Category if (d.members) { search.property('value', ''); presets = d.members; - drawGrid(grid, presets); + grid.data([presets]).call(drawGrid, preset_limit); // Preset } else { @@ -110,7 +130,7 @@ iD.ui.PresetGrid = function(context) { var presetinspect; - function drawGrid(selection, presets) { + function drawGrid(selection, limit) { function helpClick(d) { // Display description box inline @@ -162,9 +182,12 @@ iD.ui.PresetGrid = function(context) { }); } + show_more + .style('display', (selection.data()[0].length > limit) ? 'block' : 'none'); + var entries = selection .selectAll('div.grid-entry-wrap') - .data(presets.collection.slice(0, 12), name); + .data(function(d) { return d.slice(0, limit); }, name); entries.exit() .style('opacity', 1)