diff --git a/css/app.css b/css/app.css index d7d35fb00..3c2e250d6 100644 --- a/css/app.css +++ b/css/app.css @@ -399,10 +399,15 @@ button.Browse .label { .inspector-inner { padding: 10px; + min-width:400px; } .inspector-inner.head { border-bottom: 1px solid #ccc; + background:#fff; + height:80px; + z-index:99; + position:relative; } .inspector-wrap a.permalink { @@ -415,6 +420,19 @@ button.Browse .label { overflow: auto; } +.inspector-toggle { + padding:10px; + text-shadow: 0 -1px 0 rgba(0,0,0,0.25); + text-align:center; + color:#fff; + cursor:pointer; + background:#7092ff; +} + +.inspector-body { + position:relative; +} + .tag-row { width: 100%; padding-right: 70px; diff --git a/js/id/ui/inspector.js b/js/id/ui/inspector.js index 0b6d23a5c..ec4e30cd8 100644 --- a/js/id/ui/inspector.js +++ b/js/id/ui/inspector.js @@ -177,20 +177,40 @@ iD.Inspector = function() { }); selection.append('div') - .attr('class', 'head inspector-inner').call(drawhead); + .attr('class', 'head inspector-inner') + .call(drawhead); - var inspectorwrap = selection + var inspectorbody = selection.append('div') + .attr('class', 'inspector-body'); + + var inspectorwrap = inspectorbody .append('ul').attr('class', 'inspector-inner tag-wrap fillL2'); inspectorwrap.append('h4').text('Edit tags'); var formsel = draw(inspectorwrap); - formsel.select('input').node().focus(); - - selection.append('div') + inspectorbody.append('div') .attr('class', 'inspector-buttons').call(drawbuttons); + var inHeight = inspectorbody.node().offsetHeight; + + inspectorbody.style('display', 'none') + .style('margin-top', (-inHeight) + 'px'); + + var inspectortoggle = selection.append('div') + .attr('class', 'inspector-toggle') + .text('Details') + .on('click', function() { + inspectortoggle.style('display', 'none'); + inspectorbody + .style('display', 'block') + .transition() + .style('margin-top', '0px'); + }); + + formsel.select('input').node().focus(); + }); }