From 2355dc228df1b77f355e187ba74ea2233b278ad4 Mon Sep 17 00:00:00 2001 From: Ansis Brammanis Date: Fri, 26 Apr 2013 12:17:16 -0400 Subject: [PATCH 1/3] switch from preset grid to preset list issue #1225 --- css/app.css | 60 +++++++++++++++++------------------------ js/id/ui/preset_grid.js | 9 +++---- 2 files changed, 29 insertions(+), 40 deletions(-) diff --git a/css/app.css b/css/app.css index 02b0431f8..5e5c6bf96 100644 --- a/css/app.css +++ b/css/app.css @@ -685,7 +685,7 @@ a:hover .icon.out-link { background-position: -500px -14px;} .grid-button-wrap { padding: 0 10px 10px 0; - height: 120px; + height: 70px; } .grid-entry { @@ -693,7 +693,6 @@ a:hover .icon.out-link { background-position: -500px -14px;} height: 100%; position: relative; border: 1px solid #ccc; - overflow: hidden; float: left; } @@ -707,16 +706,13 @@ a:hover .icon.out-link { background-position: -500px -14px;} .preset-icon { position: absolute; - top: 30px; - left: 0; - right: 0; + top: 18px; + left: 18px; margin: auto; } .preset-icon-line { - top: 15px; - left: -10px; - right: -10px; + top: 0; left: 0; } .grid-entry .label { @@ -724,23 +720,28 @@ a:hover .icon.out-link { background-position: -500px -14px;} text-align: left; position: absolute; padding: 5px 10px; - height: 30px; + height: 100%; bottom: 0; - left: 0; right: 0; + left: 60px; + right: 0; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; - border-top: 1px solid rgba(0, 0, 0, .1); + border-left: 1px solid rgba(0, 0, 0, .1); + line-height: 50px; } +.grid-entry:hover .label { + background: none; +} + .grid-button-wrap button.tag-reference-button { float: right; position: static; - margin-top: -30px; - margin-right: 1px; - height: 29px; - border-left: 1px solid #CCC; - border-radius: 0 0 3px 0; + margin-top: -60px; + height: 100%; + border: 1px solid #CCC; + border-radius: 0 3px 3px 0; } .current .grid-entry, @@ -752,15 +753,16 @@ a:hover .icon.out-link { background-position: -500px -14px;} .category .grid-entry:before { content: ""; position: absolute; - top: 7px; - left: 0; right: 0; - border-top: 1px solid #ccc; - border-radius: 6px; + top: -5px; + left: -1px; right: -1px; + border: 1px solid #ccc; + border-bottom: none; + border-radius: 6px 6px 0 0; height: 6px; } .category .grid-entry:before { - top: 3px; + top: -3px; } .preset-grid-search-wrap .icon { @@ -807,21 +809,9 @@ a:hover .icon.out-link { background-position: -500px -14px;} border-bottom-color: #CCC; width: 0; height: 0; - margin-left: 33.3333%; - margin-left: -webkit-calc(16.6666% - 10px); - margin-left: calc(16.6666% - 10px); - margin-top: -10px; -} -.subgrid.arrow-1 .arrow { margin-left: 50%; margin-left: -webkit-calc(50% - 10px); - margin-left: calc(50% - 10px); -} - -.subgrid.arrow-2 .arrow { - margin-left: 280px; - margin-left: -webkit-calc(84.4444% - 10px); - margin-left: calc(84.4444% - 10px); + margin-top: -10px; } .show-more { @@ -847,7 +837,7 @@ a:hover .icon.out-link { background-position: -500px -14px;} width: 45px; margin: auto; position: absolute; - left: 0; right: 0; top: 19px; + left: 8px; top: 7px; background:transparent url(img/sprite.svg) no-repeat -240px -80px; } diff --git a/js/id/ui/preset_grid.js b/js/id/ui/preset_grid.js index ca6218bd5..5f186219d 100644 --- a/js/id/ui/preset_grid.js +++ b/js/id/ui/preset_grid.js @@ -164,14 +164,13 @@ iD.ui.PresetGrid = function(context, entity) { if (d === entity) index = i; }); - var insertIndex = index + 3 - index % 3; - if (insertIndex > shownIndex) insertIndex ++; + if (index > shownIndex) index++; var elem = document.createElement('div'); - grid.node().insertBefore(elem, grid.node().childNodes[insertIndex]); + grid.node().insertBefore(elem, grid.node().childNodes[index + 1]); var newbox = d3.select(elem) - .attr('class', 'col12 box-insert ' + klass + ' arrow-' + (index % 3)) + .attr('class', 'col12 box-insert ' + klass + ' arrow') .datum(entity); return newbox; @@ -214,7 +213,7 @@ iD.ui.PresetGrid = function(context, entity) { var entered = entries.enter() .append('div') - .attr('class','grid-button-wrap col4 grid-entry-wrap') + .attr('class','grid-button-wrap col12 grid-entry-wrap') .classed('category', function(d) { return !!d.members; }) .classed('current', function(d) { return d === preset; }); From c02bafac2ee45e118ff4bb16e892690413dede71 Mon Sep 17 00:00:00 2001 From: Ansis Brammanis Date: Fri, 26 Apr 2013 15:35:27 -0400 Subject: [PATCH 2/3] fix display of preset description --- css/app.css | 1 + js/id/ui/preset_grid.js | 4 ++-- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/css/app.css b/css/app.css index 5e5c6bf96..046acb59b 100644 --- a/css/app.css +++ b/css/app.css @@ -1475,6 +1475,7 @@ img.wiki-image { width: -webkit-calc(33.3333% - 10px); width: calc(33.3333% - 10px); margin-left: 20px; + margin-right: 10px; border-radius: 4px; max-height: 200px; } diff --git a/js/id/ui/preset_grid.js b/js/id/ui/preset_grid.js index 5f186219d..5097004c1 100644 --- a/js/id/ui/preset_grid.js +++ b/js/id/ui/preset_grid.js @@ -126,7 +126,7 @@ iD.ui.PresetGrid = function(context, entity) { .transition() .duration(300) .style('padding-bottom', '20px') - .style('max-height', (d.members.collection.length / 3 * 150) + 200 + 'px'); + .style('max-height', (d.members.collection.length * 80) + 200 + 'px'); } // Preset @@ -170,7 +170,7 @@ iD.ui.PresetGrid = function(context, entity) { grid.node().insertBefore(elem, grid.node().childNodes[index + 1]); var newbox = d3.select(elem) - .attr('class', 'col12 box-insert ' + klass + ' arrow') + .attr('class', 'col12 box-insert ' + klass) .datum(entity); return newbox; From 13d7144298debe09ba57e241e4cad3220254e063 Mon Sep 17 00:00:00 2001 From: John Firebaugh Date: Mon, 29 Apr 2013 14:48:25 -0700 Subject: [PATCH 3/3] Remove preset list limit, fix insertBox --- css/app.css | 14 +++--------- js/id/ui/preset_grid.js | 50 ++++++++++++----------------------------- 2 files changed, 17 insertions(+), 47 deletions(-) diff --git a/css/app.css b/css/app.css index 046acb59b..1185ee2a3 100644 --- a/css/app.css +++ b/css/app.css @@ -679,12 +679,12 @@ a:hover .icon.out-link { background-position: -500px -14px;} .preset-grid { width:100%; - padding: 20px 10px 10px 20px; + padding: 20px 20px 10px 20px; border-bottom: 1px solid #ccc; } .grid-button-wrap { - padding: 0 10px 10px 0; + padding-bottom: 10px; height: 70px; } @@ -788,16 +788,8 @@ a:hover .icon.out-link { background-position: -500px -14px;} margin: 5px; } -.subgrid { - width: 100%; - width: -webkit-calc(100% + 10px); - width: calc(100% + 10px); - margin-left: -10px; - overflow: hidden; -} - .subgrid .preset-grid { - padding: 10px 0 0 10px; + padding: 10px 10px 0 10px; border: 1px solid #CCC; margin-top: 0; border-radius: 8px; diff --git a/js/id/ui/preset_grid.js b/js/id/ui/preset_grid.js index 5097004c1..905e58de6 100644 --- a/js/id/ui/preset_grid.js +++ b/js/id/ui/preset_grid.js @@ -1,7 +1,5 @@ iD.ui.PresetGrid = function(context, entity) { var event = d3.dispatch('choose', 'close'), - defaultLimit = 9, - currentlyDrawn = 9, presets, newFeature = false; @@ -37,16 +35,7 @@ iD.ui.PresetGrid = function(context, entity) { var grid = gridwrap.append('div') .attr('class', 'preset-grid fillL cf') - .data([context.presets().defaults(entity, 36).collection]); - - var showMore = gridwrap.append('button') - .attr('class', 'fillL show-more') - .text(t('inspector.show_more')) - .on('click', function() { - grid.call(drawGrid, (currentlyDrawn += defaultLimit)); - }); - - grid.call(drawGrid, defaultLimit); + .call(drawGrid, context.presets().defaults(entity, 36)); function keydown() { // hack to let delete shortcut work when search is autofocused @@ -73,7 +62,6 @@ iD.ui.PresetGrid = function(context, entity) { if (d3.event.keyCode === 13 && value.length) { choose(grid.selectAll('.grid-entry:first-child').datum()); } else { - currentlyDrawn = defaultLimit; grid.classed('filtered', value.length); if (value.length) { var results = presets.search(value); @@ -81,11 +69,9 @@ iD.ui.PresetGrid = function(context, entity) { n: results.collection.length, search: value })); - grid.data([results.collection]) - .call(drawGrid, defaultLimit); + grid.call(drawGrid, results); } else { - grid.data([context.presets().defaults(entity, 36).collection]) - .call(drawGrid, defaultLimit); + grid.call(drawGrid, context.presets().defaults(entity, 36)); } } } @@ -118,8 +104,7 @@ iD.ui.PresetGrid = function(context, entity) { subgrid.append('div') .attr('class', 'preset-grid fillL3 cf fl') - .data([d.members.collection]) - .call(drawGrid, 1000); + .call(drawGrid, d.members); subgrid.style('max-height', '0px') .style('padding-bottom', '0px') @@ -136,8 +121,6 @@ iD.ui.PresetGrid = function(context, entity) { } } - function name(d) { return d.name(); } - // Inserts a div inline after the entry for the provided entity // Used for preset descriptions, and for expanding categories function insertBox(grid, entity, klass) { @@ -164,7 +147,7 @@ iD.ui.PresetGrid = function(context, entity) { if (d === entity) index = i; }); - if (index > shownIndex) index++; + if (index >= shownIndex) index++; var elem = document.createElement('div'); grid.node().insertBefore(elem, grid.node().childNodes[index + 1]); @@ -176,12 +159,12 @@ iD.ui.PresetGrid = function(context, entity) { return newbox; } - function drawGrid(selection, limit) { + function drawGrid(grid, presets) { function helpClick(d) { d3.event.stopPropagation(); - var presetinspect = insertBox(selection, d, 'preset-inspect'); + var presetinspect = insertBox(grid, d, 'preset-inspect'); if (!presetinspect) return; @@ -197,16 +180,11 @@ iD.ui.PresetGrid = function(context, entity) { tagReference.show(); } - if (selection.node() === grid.node()) { - showMore - .style('display', (selection.data()[0].length > limit) ? 'block' : 'none'); - } + grid.selectAll('.preset-inspect, .subgrid').remove(); - selection.selectAll('.preset-inspect, .subgrid').remove(); - - var entries = selection - .selectAll('div.grid-entry-wrap') - .data(function(d) { return d.slice(0, limit); }, name); + var entries = grid + .selectAll('.grid-entry-wrap') + .data(presets.collection, function(d) { return d.id; }); entries.exit() .remove(); @@ -231,15 +209,15 @@ iD.ui.PresetGrid = function(context, entity) { var label = buttonInner.append('div') .attr('class','label') - .text(name); + .text(function(d) { return d.name(); }); entered.filter(function(d) { return !d.members; }) .append('button') .attr('tabindex', -1) .attr('class', 'tag-reference-button minor') - .on('click', helpClick, selection) + .on('click', helpClick) .append('span') - .attr('class', 'icon inspect'); + .attr('class', 'icon inspect'); entries.order(); }