CalvinBackup/iD
1
0
Fork 0
mirror of https://github.com/FoggedLens/iD.git synced 2026-03-31 01:09:22 +02:00
Code Issues Packages Projects Releases Wiki Activity

implementing flexible grid.

Browse Source
This commit is contained in:
Saman Bemel-Benrud
2013-01-15 20:11:05 -05:00
parent 7a347d832f
commit b9a2914b35
4 changed files with 74 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files

70
css/app.css
View File

@@ -14,6 +14,11 @@ body {
height: 100%;
width: 100%;
position: fixed;
min-width: 760px;
}
.limiter {
max-width: 1400px;
}
div, textarea, input, span, ul, li, ol, a, button {
@@ -230,7 +235,7 @@ button {
color:#222;
background: white;
font-weight:bold;
font-size:14px;
font-size:12px;
display: inline-block;
height:40px;
cursor:url(../img/cursor-pointer.png) 6 1, auto;
@@ -255,20 +260,6 @@ button.narrow {
border-radius:4px;
}
button.wide {
margin: 10px;
width: 100px;
}
button.add-button {
width: 80px;
}
button.narrow,
button.Browse {
width:40px;
}
button.minor {
border-radius:4px;
height: 20px;
@@ -289,22 +280,24 @@ button.centered {
margin-right: auto;
}
.buttons-joined {
.button-wrap {
display: inline-block;
margin:10px;
}
.buttons-joined button {
border-right-width: 0;
border-radius:0;
padding:10px 0 10px 10px;
margin: 0;
}
.buttons-joined button:first-child {
.button-wrap button:only-child { width: 100%;}
.joined button {
border-right-width: 0;
border-radius:0;
}
.joined button:first-child {
border-radius:4px 0 0 4px;
}
.buttons-joined button:last-child {
.joined button:last-child {
border-right-width: 1px;
border-radius:0 4px 4px 0;
}
@@ -324,8 +317,6 @@ button.delete:hover {
}
button.save {
min-width: 120px;
width: auto;
}
button.save.has-count {
@@ -482,12 +473,6 @@ a.selected:hover .toggle.icon { background-position: -40px -180px;}
height:60px;
}
/* Special rules for toolbar icons */
button.Browse .label {
display: none;
}
/* Status box */
.messages {
@@ -497,18 +482,21 @@ button.Browse .label {
/* Inspector */
.inspector-wrap {
position:absolute;
right: 0;
opacity:0;
display:none;
padding-left: 10px;
max-width: 600px;
}
.inspector {
border-left: 1px solid #ccc;
border-bottom: 1px solid #ccc;
min-height: 60px;
opacity:0;
display:none;
position: relative;
}
.inspector-inner {
padding: 10px;
min-width:400px;
}
.inspector-inner.head {
@@ -596,6 +584,10 @@ button.Browse .label {
border-top: 1px solid #ccc;
}
.inspector-buttons .button-wrap {
width: 20%;
}
.inspector-inner .add-tag-row {
width: 100%;
padding-right: 70px;
@@ -616,6 +608,10 @@ button.Browse .label {
position:absolute;
}
.map-control button {
width: 40px;
}
.map-overlay {
width: 150px;
position:absolute;

33
js/id/id.js
View File

@@ -24,13 +24,16 @@ window.iD = function(container) {
var bar = container.append('div')
.attr('id', 'bar').attr('class', 'fillL2');
var buttons_joined = bar.append('div')
.attr('class', 'buttons-joined');
var limiter = bar.append('div')
.attr('class', 'limiter');
var buttons_joined = limiter.append('div')
.attr('class', 'button-wrap joined col4');
var buttons = buttons_joined.selectAll('button.add-button')
.data([iD.modes.Browse(), iD.modes.AddPoint(), iD.modes.AddLine(), iD.modes.AddArea()])
.enter().append('button')
.attr('class', function (mode) { return mode.title + ' add-button'; })
.attr('class', function (mode) { return mode.title + ' add-button col3'; })
.attr('data-original-title', function (mode) { return mode.description; })
.call(bootstrap.tooltip().placement('bottom'))
.on('click', function (mode) { controller.enter(mode); });
@@ -46,7 +49,7 @@ window.iD = function(container) {
}
}
notice = iD.ui.notice(bar
notice = iD.ui.notice(limiter
.append('div')
.attr('class', 'notice'));
@@ -71,19 +74,19 @@ window.iD = function(container) {
container.classed("mode-" + exited.id, false);
});
var undo_buttons = bar.append('div')
.attr('class', 'buttons-joined'),
var undo_buttons = limiter.append('div')
.attr('class', 'button-wrap joined col1'),
undo_tooltip = bootstrap.tooltip().placement('bottom');
undo_buttons.append('button')
.attr({ id: 'undo', 'class': 'narrow' })
.attr({ id: 'undo', 'class': 'col6 narrow' })
.property('disabled', true)
.html("<span class='undo icon'></span><small></small>")
.on('click', history.undo)
.call(undo_tooltip);
undo_buttons.append('button')
.attr({ id: 'redo', 'class': 'narrow' })
.attr({ id: 'redo', 'class': 'col6 narrow' })
.property('disabled', true)
.html("<span class='redo icon'><small></small>")
.on('click', history.redo)
@@ -94,8 +97,8 @@ window.iD = function(container) {
.append('div')
.attr('class', 'hello');
var save_button = bar.append('button')
.attr('class', 'save action wide')
var save_button = limiter.append('div').attr('class','button-wrap col1').append('button')
.attr('class', 'save action wide col12')
.call(iD.ui.save().map(map));
history.on('change.warn-unload', function() {
@@ -110,7 +113,7 @@ window.iD = function(container) {
} : null;
});
bar.append('div')
limiter.append('div')
.attr('class', 'messages');
var zoom = container.append('div')
@@ -139,8 +142,8 @@ window.iD = function(container) {
.call(iD.ui.layerswitcher(map));
container.append('div')
.attr('class', 'inspector-wrap fillL')
.style('display', 'none');
.style('display', 'none')
.attr('class', 'inspector-wrap fr col5');
var about = container.append('div').attr('id', 'attrib-container');
@@ -169,12 +172,12 @@ window.iD = function(container) {
}
}
bar.select('#undo')
limiter.select('#undo')
.property('disabled', !undo)
.attr('data-original-title', undo)
.call(undo ? refreshTooltip : undo_tooltip.hide);
bar.select('#redo')
limiter.select('#redo')
.property('disabled', !redo)
.attr('data-original-title', redo)
.call(redo ? refreshTooltip : undo_tooltip.hide);

2
js/id/modes/browse.js
View File

@@ -2,7 +2,7 @@ iD.modes.Browse = function() {
var mode = {
button: 'browse',
id: 'browse',
title: 'Browse',
title: 'Move',
description: 'Pan and zoom the map'
};

32
js/id/ui/inspector.js
View File

@@ -14,11 +14,15 @@ iD.ui.inspector = function() {
event.close(entity);
});
selection.append('div')
var inspector = selection.append('div')
.attr('class','inspector fillL');
inspector.append('div')
.attr('class', 'head inspector-inner')
.call(drawHead);
var inspectorbody = selection.append('div')
var inspectorbody = inspector.append('div')
.attr('class', 'inspector-body');
var inspectorwrap = inspectorbody.append('div')
@@ -79,15 +83,23 @@ iD.ui.inspector = function() {
}
function drawButtons(selection) {
selection.append('button')
.attr('class', 'apply wide action')
.html("<span class='icon icon-pre-text apply'></span><span class='label'>Apply</span>")
.on('click', apply);
var inspectorButton1 = selection.append('div')
.attr('class', 'button-wrap')
.append('button')
.attr('class', 'apply wide action')
.on('click', apply);
selection.append('button')
.attr('class', 'delete wide action')
.html("<span class='icon icon-pre-text delete'></span><span class='label'>Delete</span>")
.on('click', function(entity) { event.remove(entity); });
inspectorButton1.append('span').attr('class','icon icon-pre-text apply');
inspectorButton1.append('span').attr('class','label').text('Apply');
var inspectorButton2 = selection.append('div')
.attr('class', 'button-wrap')
.append('button')
.attr('class', 'delete wide action')
.on('click', function(entity) { event.remove(entity); });
inspectorButton2.append('span').attr('class','icon icon-pre-text delete');
inspectorButton2.append('span').attr('class','label').text('Delete');
}
function drawTags(tags) {