From 4c471ca255f21a3d889a27733311599da8760700 Mon Sep 17 00:00:00 2001 From: Saman Bemel-Benrud Date: Thu, 20 Jun 2013 13:06:12 -0400 Subject: [PATCH 1/4] restyling default list + toggle lists. --- css/app.css | 119 ++++++++++++++++----------------------- js/id/ui/background.js | 23 +++++--- js/id/ui/feature_list.js | 10 ++-- js/id/ui/preset/radio.js | 15 +++-- 4 files changed, 79 insertions(+), 88 deletions(-) diff --git a/css/app.css b/css/app.css index 118e4aaa9..537846cc5 100644 --- a/css/app.css +++ b/css/app.css @@ -182,6 +182,12 @@ input:focus { background-color: #F1F1F1; } +input[type="checkbox"], +input[type="radio"] { + width: 20px; + vertical-align: middle; +} + /* remove bottom border radius when combobox is open */ .combobox + * textarea:focus, .combobox + * input:focus { @@ -234,57 +240,42 @@ ul li { list-style: none;} border: 1px solid #CCC; } -.toggle-list > button { - font-weight: normal; - text-align: left; +.toggle-list > label { position: relative; - padding: 5px 10px 5px 30px; + padding: 5px 10px; display:block; - border-radius: 0; width: 100%; border-bottom: 1px solid #ccc; + background-color: white; height: 30px; color: #7092FF; + cursor: pointer; + -moz-transition: all 100ms; + -o-transition: all 100ms; + transition: all 100ms; } -.toggle-list > button:first-child { +.toggle-list > label:hover { + background-color: #ececec; +} + +.toggle-list > label:first-child { border-radius: 3px 3px 0 0; } -.toggle-list > button:last-child { +.toggle-list > label:last-child { border-radius: 0 0 3px 3px; border-bottom-width: 0; } -.toggle-list > button:only-child { +.toggle-list > label:only-child { border-radius: 3px; } -.toggle-list > button.active { +.toggle-list > label.active { background: #E8EBFF; } -.toggle-list > button::before { - content: ""; - display: inline-block; - border-radius: 50%; - height: 10px; - width: 10px; - margin-right: 10px; - background: #808080; - position: absolute; - left: 10px; - top: 10px; -} - -.toggle-list > button.active::before { - background: #7092ff; -} - -.toggle-list.check-list > button::before { - border-radius: 2px; -} - .link-list li { float: right; border-left: 1px solid rgba(255,255,255,.5); @@ -518,8 +509,11 @@ button.save.has-count .count::before { /* Definitions for every icon */ .icon.browse { background-position: 0 0;} +.icon.point, .icon.add-point { background-position: -20px 0;} +.icon.line, .icon.add-line { background-position: -40px 0;} +.icon.area, .icon.add-area { background-position: -60px 0;} .icon.undo { background-position: -80px 0;} .icon.redo { background-position: -100px 0;} @@ -741,28 +735,18 @@ a:hover .icon.out-link { background-position: -500px -14px;} .feature-list { width:100%; - padding: 20px 20px 10px 20px; - border-bottom: 1px solid #ccc; } .feature-list-item { width: 100%; - height: 60px; - margin-bottom: 10px; position: relative; - border: 1px solid #ccc; + border-bottom: 1px solid #ccc; + border-radius: 0; } .feature-list-item .label { - background-color: #f6f6f6; text-align: left; - position: absolute; - top: 0; - bottom: 0; - right: 0; padding: 5px 10px; - left: 60px; - line-height: 50px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; @@ -770,15 +754,27 @@ a:hover .icon.out-link { background-position: -500px -14px;} -moz-transition: all 100ms; -o-transition: all 100ms; transition: all 100ms; - border-radius: 0 3px 3px 0; +} + +.feature-list-item .label .icon { + opacity: .5; } .feature-list-item:hover .label { background-color: #ececec; } +.feature-list-item .entity-type { + color:#7092ff; +} + +.feature-list-item:hover .entity-type { + color:#597be7; +} + .feature-list-item .entity-name { font-weight: normal; + color: #666; padding-left: 10px; } @@ -1030,10 +1026,6 @@ a:hover .icon.out-link { background-position: -500px -14px;} } /* Preset form (hover mode) */ -.inspector-hover .header { - background-color: #f6f6f6; -} - .inspector-hover textarea, .inspector-hover input, .inspector-hover .form-label, @@ -1047,11 +1039,11 @@ a:hover .icon.out-link { background-position: -500px -14px;} /* hide and remove from layout */ .inspector-hidden, .inspector-hover .checkselect label input[type="checkbox"], -.inspector-hover .toggle-list button::before, -.inspector-hover .toggle-list button:not(.active), +.inspector-hover .checkselect label input[type="radio"], +.inspector-hover .toggle-list label:not(.active), .inspector-hover .inspector-inner .add-tag, .inspector-hover .inspector-inner .add-relation, -.inspector-hover .toggle-list button.remove .icon { +.inspector-hover .toggle-list label.remove .icon { height: 0; width: 0; overflow: hidden; @@ -1097,7 +1089,7 @@ a:hover .icon.out-link { background-position: -500px -14px;} } /* Unstyle button fields */ -.inspector-hover .toggle-list button.active, +.inspector-hover .toggle-list label.active, .inspector-hover .entity-editor-pane a.hide-toggle { opacity: 1; background-color: transparent; @@ -1120,7 +1112,7 @@ a:hover .icon.out-link { background-position: -500px -14px;} } /* Hide placeholder for radio buttons if another is active, or not in hover state */ -.toggle-list button.active ~ .placeholder, +.toggle-list label.active ~ .placeholder, .toggle-list .placeholder { padding: 0; opacity: 0; @@ -1135,14 +1127,7 @@ a:hover .icon.out-link { background-position: -500px -14px;} } /* first phase hover-to-active animations */ -.header { - -webkit-transition: background-color 200ms; - -moz-transition: background-color 200ms; - -o-transition: background-color 200ms; - transition: background-color 200ms; -} -header, textarea, .form-label, .preset-input-wrap, @@ -1171,8 +1156,8 @@ input, .more-buttons, .view-on-osm, .hide-toggle:before, -.entity-editor-pane .toggle-list button::before, -.entity-editor-pane .toggle-list button.remove .icon { +.entity-editor-pane .toggle-list label::before, +.entity-editor-pane .toggle-list label.remove .icon { -webkit-transition: opacity 200ms 200ms; -moz-transition: opacity 200ms 200ms; -o-transition: opacity 200ms 200ms; @@ -1186,14 +1171,14 @@ input, transition: padding-left 200ms 200ms, color 200ms 200ms; } -.entity-editor-pane .toggle-list button:not(.active) { +.entity-editor-pane .toggle-list label:not(.active) { -webkit-transition: height 200ms 200ms, padding 200ms 200ms, border-width 100ms 300ms; -moz-transition: height 200ms 200ms, padding 200ms 200ms, border-width 100ms 300ms; -o-transition: height 200ms 200ms, padding 200ms 200ms, border-width 100ms 300ms; transition: height 200ms 200ms, padding 200ms 200ms, border-width 100ms 300ms; } -.entity-editor-pane .toggle-list button { +.entity-editor-pane .toggle-list label { -webkit-transition: border-width 100ms 300ms, padding 200ms 200ms, background-color 200ms 200ms, color 200ms 200ms; -moz-transition: border-width 100ms 300ms, padding 200ms 200ms, background-color 200ms 200ms, color 200ms 200ms; -o-transition: border-width 100ms 300ms, padding 200ms 200ms, background-color 200ms 200ms, color 200ms 200ms; @@ -1361,12 +1346,6 @@ input[type=number] { color: inherit; } -.checkselect input[type="checkbox"] { - margin-right: 5px; - width: 20px; - vertical-align: middle; -} - .checkselect label:not(.set) input[type="checkbox"] { opacity: .5; } @@ -1605,7 +1584,7 @@ div.combobox { height: 31px; right: 10%; border: 1px solid #CCC; - border-top-width: 0; + border-top-width: 0; border-left-width: 0; } diff --git a/js/id/ui/background.js b/js/id/ui/background.js index 95d6334be..d62887fea 100644 --- a/js/id/ui/background.js +++ b/js/id/ui/background.js @@ -33,7 +33,7 @@ iD.ui.Background = function(context) { } function selectLayer() { - content.selectAll('button.layer') + content.selectAll('label.layer') .classed('active', function(d) { var overlay = context.map().layers[2].source(); return d.data.name === context.background().source().data.name || @@ -85,16 +85,15 @@ iD.ui.Background = function(context) { function drawList(layerList, click, filter) { - var layerLinks = layerList.selectAll('button.layer') + var layerLinks = layerList.selectAll('label.layer') .data(getSources().filter(filter), function(d) { return d.data.name; }); var layerInner = layerLinks.enter() - .append('button'); + .append('label'); layerInner - .attr('href', '#') .attr('class', 'layer') .on('click.set-source', click); @@ -106,6 +105,11 @@ iD.ui.Background = function(context) { .placement('right') ); + layerInner.insert('input') + .attr('type','radio') + .attr('name','layers') + .attr('value',function(d) { return d.data.name;}); + layerInner.insert('span').text(function(d) { return d.data.name; }); @@ -113,7 +117,7 @@ iD.ui.Background = function(context) { layerLinks.exit() .remove(); - layerList.style('display', layerList.selectAll('button.layer').data().length > 0 ? 'block' : 'none'); + layerList.style('display', layerList.selectAll('label.layer').data().length > 0 ? 'block' : 'none'); } function update() { @@ -165,11 +169,12 @@ iD.ui.Background = function(context) { .title(iD.ui.tooltipHtml(t('background.description'), key)); function hide() { setVisible(false); } + function toggle() { if (d3.event) d3.event.preventDefault(); tooltip.hide(button); setVisible(!button.classed('active')); - content.selectAll('.toggle-list button:first-child').node().focus(); + content.selectAll('.toggle-list label:first-child').node().focus(); } function setVisible(show) { @@ -239,13 +244,13 @@ iD.ui.Background = function(context) { var overlayList = content .append('div') - .attr('class', 'toggle-list layer-list check-list'); + .attr('class', 'toggle-list layer-list'); var gpxLayerItem = content .append('div') .style('display', iD.detect().filedrop ? 'block' : 'none') - .attr('class', 'toggle-list layer-list check-list') - .append('button') + .attr('class', 'toggle-list layer-list') + .append('label') .classed('layer-toggle-gpx', true) .on('click.set-gpx', clickGpx); diff --git a/js/id/ui/feature_list.js b/js/id/ui/feature_list.js index 7e4ec38e3..cc25062cf 100644 --- a/js/id/ui/feature_list.js +++ b/js/id/ui/feature_list.js @@ -1,7 +1,7 @@ iD.ui.FeatureList = function(context) { function featureList(selection) { var header = selection.append('div') - .attr('class', 'header fillL cf'); + .attr('class', 'header cf'); header.append('h3') .text(t('inspector.feature_list')); @@ -33,7 +33,7 @@ iD.ui.FeatureList = function(context) { .attr('class', 'inspector-body'); var list = listWrap.append('div') - .attr('class', 'feature-list fillL cf'); + .attr('class', 'feature-list cf'); context.map() .on('drawn.feature-list', mapDrawn); @@ -90,9 +90,6 @@ iD.ui.FeatureList = function(context) { var enter = items.enter().append('button') .attr('class', 'feature-list-item') - .call(iD.ui.PresetIcon() - .geometry(function(d) { return d.geometry }) - .preset(function(d) { return d.preset; })) .on('mouseover', function(d) { mouseover(d.entity); }) .on('mouseout', function(d) { mouseout(); }) .on('click', function(d) { click(d.entity); }); @@ -100,6 +97,9 @@ iD.ui.FeatureList = function(context) { var label = enter.append('div') .attr('class', 'label'); + label.append('span') + .attr('class', function(d) { return d.geometry + ' icon icon-pre-text'; }); + label.append('span') .attr('class', 'entity-type') .text(function(d) { return d.preset.name(); }); diff --git a/js/id/ui/preset/radio.js b/js/id/ui/preset/radio.js index 8d7c7c3db..f60efa718 100644 --- a/js/id/ui/preset/radio.js +++ b/js/id/ui/preset/radio.js @@ -12,10 +12,17 @@ iD.ui.preset.radio = function(field) { var buttonWrap = wrap.enter().append('div') .attr('class', 'preset-input-wrap toggle-list'); - buttons = wrap.selectAll('button') + buttons = wrap.selectAll('label') .data(field.options || field.keys); - buttons.enter().append('button') + var button = buttons.enter().append('label'); + + button.append('input') + .attr('type','radio') + .attr('name',field.label) + .attr('value', function(d) { return field.t('options.' + d, { 'default': d }); }); + + button.append('span') .text(function(d) { return field.t('options.' + d, { 'default': d }); }); buttons @@ -29,10 +36,10 @@ iD.ui.preset.radio = function(field) { .attr('class','placeholder') .text(field.placeholder()); - var remove = wrap.selectAll('button.remove') + var remove = wrap.selectAll('label.remove') .data([0]); - remove.enter().append('button') + remove.enter().append('label') .attr('class', 'remove') .text(t('inspector.remove')) .append('span') From 810f07d563a22b9708f4ea4940832ab1c517e6c1 Mon Sep 17 00:00:00 2001 From: Saman Bemel-Benrud Date: Thu, 20 Jun 2013 13:29:03 -0400 Subject: [PATCH 2/4] Adding relations icons. --- css/app.css | 4 +- dist/img/sprite.svg | 2175 +++++++++++++++----------------------- js/id/ui/feature_list.js | 2 +- 3 files changed, 827 insertions(+), 1354 deletions(-) diff --git a/css/app.css b/css/app.css index 537846cc5..e40fc4562 100644 --- a/css/app.css +++ b/css/app.css @@ -535,7 +535,9 @@ button.save.has-count .count::before { .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.relation { background-position: -520px 0;} +.icon.relation.route { background-position: -540px 0;} +.icon.relation.multipolygon { background-position: -560px 0;} .icon.plus.light, .icon.zoom-in { background-position: -240px -20px;} diff --git a/dist/img/sprite.svg b/dist/img/sprite.svg index 038cf1c3c..190bb4724 100644 --- a/dist/img/sprite.svg +++ b/dist/img/sprite.svg @@ -7,219 +7,20 @@ xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" - xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" - xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" + version="1.1" width="700" height="560" - id="svg12393" - version="1.1" - inkscape:version="0.48.2 r9819" - sodipodi:docname="sprite.svg" - inkscape:export-filename="/Users/saman/work_repos/iD/img/sprite.png" - inkscape:export-xdpi="90" - inkscape:export-ydpi="90"> + id="svg12393"> + id="path9143-8" + style="font-size:medium;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-indent:0;text-align:start;text-decoration:none;line-height:normal;letter-spacing:normal;word-spacing:normal;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;text-anchor:start;baseline-shift:baseline;color:#000000;fill:#ff00ff;fill-opacity:1;stroke:none;stroke-width:0.99999988;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate;font-family:Sans;-inkscape-font-specification:Sans" /> - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - @@ -228,29 +29,26 @@ image/svg+xml - + + style="color:#000000;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:3.99999905;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" /> + y="-3.0624999e-06" + id="rect4259" + style="color:#000000;fill:none;stroke:none;stroke-width:14;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" /> + id="g16215" + style="opacity:0.25;fill:#000000;fill-opacity:1;display:inline" /> + style="fill:#ffffff;fill-opacity:1;display:inline"> + style="fill:#ffffff;fill-opacity:1;display:inline" /> + style="fill:#1a1a1a;fill-opacity:1;display:inline"> + style="color:#000000;fill:#1a1a1a;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" /> + style="fill:#1a1a1a;fill-opacity:1"> + id="g9599" + style="fill:#1a1a1a;fill-opacity:1"> + style="opacity:0.2;color:#000000;fill:#1a1a1a;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" /> + style="opacity:0.1;color:#000000;fill:#1a1a1a;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" /> + id="path9605" + style="opacity:0.4;color:#000000;fill:#1a1a1a;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" /> + id="path9607" + style="opacity:0.6;color:#000000;fill:#1a1a1a;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" /> + id="path9609" + style="opacity:0.1;color:#000000;fill:#1a1a1a;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" /> - + id="path3767" + style="color:#000000;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" /> + + style="color:#000000;fill:#222222;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" /> + id="g44379" + style="opacity:0.5;color:#000000;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"> + style="color:#000000;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1.55555558;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"> + style="color:#000000;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1.55555558;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" /> + style="color:#000000;fill:#222222;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" /> + style="color:#000000;fill:#222222;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:2;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" /> + style="color:#000000;fill:#1a1a1a;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" /> + style="opacity:0.5;fill:#000000;fill-opacity:1;display:inline"> + style="color:#000000;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" /> + style="fill:#000000;fill-opacity:1"> + id="g9701" + style="fill:#000000;fill-opacity:1"> + style="opacity:0.2;color:#000000;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" /> + style="opacity:0.1;color:#000000;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" /> + id="path9707" + style="opacity:0.4;color:#000000;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" /> + id="path9709" + style="opacity:0.6;color:#000000;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" /> + id="path9711" + style="opacity:0.1;color:#000000;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" /> + style="color:#000000;fill:#1c1c1c;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:2.79999375;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" /> + id="path47763" + style="color:#000000;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" /> + style="color:#000000;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" /> + style="opacity:0.5;color:#000000;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:2;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" /> + style="opacity:0.5;color:#000000;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" /> + id="g33295" + style="fill:#ffffff;fill-opacity:1;display:inline"> + y="657.36218" + id="rect33301" + style="color:#000000;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" /> + transform="matrix(1.5714241,0,0,1.5714241,72.999423,-294.92081)" + id="path33305" + style="opacity:0.2;color:#000000;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" /> + id="path33309" + style="opacity:0.4;color:#000000;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" /> + id="path33311" + style="opacity:0.6;color:#000000;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" /> + style="opacity:0.1;color:#000000;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" /> + style="opacity:0.1;color:#000000;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" /> + style="color:#000000;fill:#222222;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:2;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" /> + style="color:#000000;fill:#222222;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:2.79999375;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" /> + style="color:#000000;fill:#222222;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:2.79999375;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" /> + style="color:#000000;fill:#222222;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:2.79999375;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" /> + style="color:#000000;fill:#222222;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:2.79999375;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" /> + style="color:#000000;fill:#222222;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:2.79999375;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" /> + style="color:#000000;fill:#222222;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:2.79999375;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" /> + style="color:#000000;fill:#222222;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:2.79999375;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" /> + style="color:#000000;fill:#222222;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:2.79999375;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" /> + style="color:#000000;fill:#222222;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:2.79999375;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" /> + style="color:#000000;fill:#222222;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:2.79999375;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" /> + style="color:#000000;fill:#222222;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:2.79999375;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" /> + style="color:#000000;fill:#7092ff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:2.79999375;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" /> + style="color:#000000;fill:#7092ff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:2.79999375;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" /> + style="color:#000000;fill:#7092ff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:2.79999375;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" /> + style="color:#000000;fill:#222222;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:2.79999375;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" /> + style="color:#000000;fill:#7092ff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:2.79999375;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" /> + style="color:#000000;fill:#222222;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:2.79999375;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" /> + style="color:#000000;fill:#222222;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:2.79999375;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" /> + style="color:#000000;fill:#222222;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:2.79999375;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" /> + style="color:#000000;fill:#222222;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:2.79999375;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" /> + style="color:#000000;fill:#222222;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:2.79999375;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" /> + style="font-size:medium;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-indent:0;text-align:start;text-decoration:none;line-height:normal;letter-spacing:normal;word-spacing:normal;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;text-anchor:start;baseline-shift:baseline;color:#000000;fill:#7092ff;fill-opacity:1;stroke:none;stroke-width:0.50000125;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate;font-family:Sans;-inkscape-font-specification:Sans" /> + style="color:#000000;fill:#7092ff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" /> + style="color:#000000;fill:#cccccc;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" /> + style="color:#000000;fill:#7092ff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:2.79999375;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" /> + style="font-size:medium;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-indent:0;text-align:start;text-decoration:none;line-height:normal;letter-spacing:normal;word-spacing:normal;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;text-anchor:start;baseline-shift:baseline;color:#000000;fill:#222222;fill-opacity:1;stroke:none;stroke-width:2;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate;font-family:Sans;-inkscape-font-specification:Sans" /> + style="font-size:medium;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-indent:0;text-align:start;text-decoration:none;line-height:normal;letter-spacing:normal;word-spacing:normal;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;text-anchor:start;baseline-shift:baseline;color:#000000;fill:#222222;fill-opacity:1;stroke:none;stroke-width:2;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate;font-family:Sans;-inkscape-font-specification:Sans" /> + style="color:#000000;fill:#1a1a1a;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" /> + style="color:#000000;fill:#a9a9a9;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" /> + style="color:#000000;fill:#a9a9a9;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" /> + style="color:#000000;fill:#a9a9a9;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" /> + style="color:#000000;fill:#a9a9a9;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" /> + style="color:#000000;fill:#a9a9a9;fill-opacity:1;stroke:none;stroke-width:1;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" /> + style="color:#000000;fill:#a9a9a9;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" /> + style="color:#000000;fill:#a9a9a9;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" /> + style="color:#000000;fill:#a9a9a9;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" /> + style="color:#000000;fill:#a9a9a9;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" /> + style="color:#000000;fill:#a9a9a9;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" /> + style="color:#000000;fill:#a9a9a9;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" /> + id="rect19454" + style="color:#000000;fill:#e06d5f;fill-opacity:0.15686275;stroke:#e06d5f;stroke-width:1;stroke-opacity:1;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" /> + id="rect20237" + style="color:#000000;fill:#8cd05f;fill-opacity:0.15686275;stroke:#8cd05f;stroke-width:1;stroke-opacity:1;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" /> + style="opacity:0.2;color:#000000;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" /> + style="color:#000000;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" /> + transform="translate(326,200.63781)" + id="g20283"> + transform="translate(10.000004,-1.9999957)" + id="g20285"> + style="opacity:0.2;color:#000000;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" /> + style="color:#000000;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" /> + transform="translate(365,239.63781)" + id="g20299"> + transform="translate(10.000004,-1.9999957)" + id="g20301"> + style="opacity:0.2;color:#000000;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" /> + style="color:#000000;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" /> + style="opacity:0.2;color:#000000;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" /> + style="color:#000000;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" /> + transform="translate(386,239.63781)" + id="g20315"> + transform="translate(10.000004,-1.9999957)" + id="g20317"> + style="opacity:0.2;color:#000000;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" /> + style="color:#000000;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" /> + style="opacity:0.2;color:#000000;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" /> + style="color:#000000;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" /> + style="opacity:0.2;color:#000000;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" /> + style="color:#000000;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" /> + transform="translate(425,200.63781)" + id="g20339"> + transform="translate(10.000004,-1.9999957)" + id="g20341"> + style="opacity:0.2;color:#000000;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" /> + style="color:#000000;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" /> + style="opacity:0.2;color:#000000;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" /> + style="color:#000000;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" /> + transform="translate(446,200.63781)" + id="g20355"> + transform="translate(10.000004,-1.9999957)" + id="g20357"> + style="opacity:0.2;color:#000000;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" /> + style="color:#000000;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" /> + transform="translate(485,239.63781)" + id="g20363"> + transform="translate(10.000004,-1.9999957)" + id="g20365"> + style="opacity:0.2;color:#000000;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" /> + style="color:#000000;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" /> + style="opacity:0.2;color:#000000;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" /> + style="color:#000000;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" /> + transform="translate(506,239.63781)" + id="g20379"> + transform="translate(10.000004,-1.9999957)" + id="g20381"> + style="opacity:0.2;color:#000000;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" /> + style="color:#000000;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" /> + style="opacity:0.2;color:#000000;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" /> + style="color:#000000;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" /> + style="opacity:0.2;color:#000000;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" /> + style="color:#000000;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" /> + transform="translate(545,200.63781)" + id="g20403"> + transform="translate(10.000004,-1.9999957)" + id="g20405"> + style="opacity:0.2;color:#000000;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" /> + style="color:#000000;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" /> + id="rect7068" + style="opacity:0.15;color:#000000;fill:#000000;fill-opacity:0.15686275;stroke:#000000;stroke-width:1;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" /> @@ -1331,81 +860,51 @@ transform="translate(10.000004,-1.9999957)" id="g7072"> + style="opacity:0.2;color:#000000;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" /> + style="color:#000000;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" /> + transform="translate(566,200.63781)" + id="g7078"> + transform="translate(10.000004,-1.9999957)" + id="g7080"> + style="opacity:0.2;color:#000000;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" /> + style="color:#000000;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" /> + transform="translate(605,239.63781)" + id="g7086"> + transform="translate(10.000004,-1.9999957)" + id="g7088"> + style="opacity:0.2;color:#000000;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" /> + style="color:#000000;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" /> + style="opacity:0.2;color:#000000;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" /> + style="color:#000000;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" /> + transform="translate(-781,47)" + id="g4494"> + style="color:#000000;fill:#7092ff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:10;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" /> + transform="translate(-810.00001,-19.000003)" + id="g8629"> + style="color:#000000;fill:#7092ff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" /> + style="color:#000000;fill:#1a1a1a;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:2;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" /> + transform="translate(25,-50.000003)" + id="path3824" + style="color:#000000;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:2;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" /> + transform="translate(-1,0)" + id="g3837" /> + y="220" + id="rect6623-9" + style="opacity:0.15;color:#000000;fill:none;stroke:none;stroke-width:1;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" /> + id="g7459-3" + style="display:inline"> + style="color:#000000;fill:#7092ff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" /> + y="220" + id="rect6623-9-2" + style="opacity:0.15;color:#000000;fill:none;stroke:none;stroke-width:1;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" /> + style="color:#000000;fill:#7092ff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" /> + style="color:#000000;fill:#7092ff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" /> + transform="translate(-28,28)" + id="g7663" /> + transform="translate(1.625,1.3749969)" + id="g7690" /> @@ -1559,759 +1036,753 @@ transform="translate(1.625,-25.625003)" id="g7700" /> + transform="translate(-25.375,-25.625003)" + id="g7706" /> - + + style="font-size:medium;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-indent:0;text-align:start;text-decoration:none;line-height:normal;letter-spacing:normal;word-spacing:normal;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;text-anchor:start;baseline-shift:baseline;color:#000000;fill:#e06d5f;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:12;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate;font-family:Sans;-inkscape-font-specification:Sans" /> + style="font-size:medium;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-indent:0;text-align:start;text-decoration:none;line-height:normal;letter-spacing:normal;word-spacing:normal;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;text-anchor:start;baseline-shift:baseline;color:#000000;fill:#7092ff;fill-opacity:1;stroke:none;stroke-width:11.66666508;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate;font-family:Sans;-inkscape-font-specification:Sans" /> + id="path8379" + style="color:#000000;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.055;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" /> - - - - - + + + + + + style="color:#000000;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:2;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" /> + style="color:#000000;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:2;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" /> + transform="translate(375,15)" + id="g10113"> + style="color:#000000;fill:#a9a9a9;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" /> - + - + + style="color:#000000;fill:#a9a9a9;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" /> + style="color:#000000;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" /> + style="color:#000000;fill:#a9a9a9;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" /> + style="color:#000000;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" /> + y="78.362183" + id="rect7157" + style="color:#000000;fill:#7092ff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" /> + style="color:#000000;fill:#a9a9a9;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" /> + style="color:#000000;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" /> + style="color:#000000;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" /> + style="color:#000000;fill:#7092ff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:2;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" /> - + + id="path10000" + style="color:#000000;fill:#8cd05f;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:2;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" /> + transform="translate(365,-200)" + id="g10052"> + style="color:#000000;fill:#c1c1c1;fill-opacity:1;fill-rule:nonzero;stroke:#ffffff;stroke-width:2;stroke-opacity:1;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" /> + id="path10050" + style="color:#000000;fill:#c1c1c1;fill-opacity:1;fill-rule:nonzero;stroke:#ffffff;stroke-width:2;stroke-opacity:1;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" /> + style="color:#000000;fill:#a9a9a9;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:2;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" /> + id="path9982" + style="color:#000000;fill:#a9a9a9;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:2;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" /> + transform="scale(-1,1)" + id="rect10169" + style="color:#000000;fill:none;stroke:none;stroke-width:2;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" /> + style="color:#000000;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:2;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" /> + style="color:#000000;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:2;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" /> + style="color:#000000;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:2;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" /> + transform="translate(-235,452.63781)" + id="waterway-river"> + style="opacity:0.5;color:#000000;fill:#60d4de;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" /> + style="opacity:0.5;color:#000000;fill:#60d4de;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" /> + style="opacity:0.5;color:#000000;fill:#60d4de;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" /> + style="opacity:0.5;color:#000000;fill:#60d4de;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" /> + style="color:#000000;fill:#60d4de;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" /> + style="color:#000000;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" /> + style="color:#000000;fill:#60d4de;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" /> - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + style="color:#000000;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" /> + id="path4669" + style="color:#000000;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0;marker:none;visibility:visible;display:inline;overflow:visible;filter:url(#filter8013-4);enable-background:accumulate" /> + transform="translate(25,-3.0624999e-6)" + id="rect4769" + style="color:#000000;fill:#7092ff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:3.99999905;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" /> + y="149" + id="rect4769-6" + style="color:#000000;fill:#7092ff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:3.99999905;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" /> + transform="translate(25,-3.0624999e-6)" + id="rect4789" + style="color:#000000;fill:#7092ff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:3.99999905;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" /> + style="opacity:0.25;color:#000000;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:2.79999375;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" /> + id="path4863-8" + style="opacity:0.25;color:#000000;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:2.79999375;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" /> + id="path3848" + style="opacity:0.5;color:#000000;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" /> + style="opacity:0.5;color:#000000;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" /> + id="path4802-1" + style="opacity:0.25;color:#000000;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:2.79999375;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" /> + id="path4861-8" + style="color:#000000;fill:#bfbfbf;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:2.79999375;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" /> + id="path4859-2" + style="color:#000000;fill:#bfbfbf;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:2.79999375;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" /> + id="path4857-6" + style="color:#000000;fill:#bfbfbf;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:2.79999375;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" /> + id="path4855-0" + style="color:#000000;fill:#bfbfbf;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:2.79999375;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" /> + id="path4804-3" + style="color:#000000;fill:#bfbfbf;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:2.79999375;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" /> + id="path5237" + style="color:#000000;fill:#7092ff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:2.79999375;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" /> + style="opacity:0.25;color:#000000;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:2.79999375;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" /> + style="color:#000000;fill:#7092ff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" /> + id="text3863" + style="font-size:17.49651146px;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-indent:0;text-align:start;text-decoration:none;line-height:120.00000477%;letter-spacing:normal;word-spacing:normal;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;text-anchor:start;baseline-shift:baseline;color:#000000;fill:#e4a4be;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.99999994;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate;font-family:Avenir;-inkscape-font-specification:Avenir" /> + style="font-size:16.71258354px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;text-indent:0;text-align:start;text-decoration:none;line-height:100%;letter-spacing:0px;word-spacing:normal;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;text-anchor:start;baseline-shift:baseline;color:#000000;fill:#222222;fill-rule:nonzero;enable-background:accumulate;font-family:Helvetica Neue" /> + style="font-size:16.71258354px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;text-indent:0;text-align:start;text-decoration:none;line-height:100%;letter-spacing:0px;word-spacing:normal;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;text-anchor:start;baseline-shift:baseline;opacity:0.5;color:#000000;fill:#000000;fill-rule:nonzero;enable-background:accumulate;font-family:Helvetica Neue" /> + style="font-size:16.71258354px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;text-indent:0;text-align:start;text-decoration:none;line-height:100%;letter-spacing:0px;word-spacing:normal;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;text-anchor:start;baseline-shift:baseline;color:#000000;fill:#ffffff;fill-rule:nonzero;enable-background:accumulate;font-family:Helvetica Neue" /> + id="rect14284" + style="color:#000000;fill:#7092ff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:2.79999375;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" /> + id="path14358" + style="color:#000000;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:2.79999375;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" /> + id="path14360" + style="opacity:0.5;color:#000000;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:2.79999375;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" /> + style="color:#000000;fill:#7092ff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:5;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" /> + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/js/id/ui/feature_list.js b/js/id/ui/feature_list.js index cc25062cf..17da77f09 100644 --- a/js/id/ui/feature_list.js +++ b/js/id/ui/feature_list.js @@ -1,7 +1,7 @@ iD.ui.FeatureList = function(context) { function featureList(selection) { var header = selection.append('div') - .attr('class', 'header cf'); + .attr('class', 'header fillL cf'); header.append('h3') .text(t('inspector.feature_list')); From f387cea0215f98d3536bf10641558372796a7c7f Mon Sep 17 00:00:00 2001 From: John Firebaugh Date: Thu, 20 Jun 2013 11:19:22 -0700 Subject: [PATCH 3/4] Hook up radio inputs --- js/id/ui/background.js | 41 ++++++++++++++++++++---------------- js/id/ui/preset/radio.js | 45 ++++++++++++++++++++-------------------- 2 files changed, 45 insertions(+), 41 deletions(-) diff --git a/js/id/ui/background.js b/js/id/ui/background.js index d62887fea..7f25f7c92 100644 --- a/js/id/ui/background.js +++ b/js/id/ui/background.js @@ -33,19 +33,26 @@ iD.ui.Background = function(context) { } function selectLayer() { + function active(d) { + var overlay = context.map().layers[2].source(); + return d.data.name === context.background().source().data.name || + (overlay.data && overlay.data.name === d.data.name); + } + content.selectAll('label.layer') - .classed('active', function(d) { - var overlay = context.map().layers[2].source(); - return d.data.name === context.background().source().data.name || - (overlay.data && overlay.data.name === d.data.name); - }); + .classed('active', active) + .selectAll('input') + .property('checked', active); } function clickSetSource(d) { d3.event.preventDefault(); if (d.data.name === 'Custom') { var configured = d(); - if (!configured) return; + if (!configured) { + selectLayer(); + return; + } d = configured; } context.background().source(d); @@ -83,7 +90,7 @@ iD.ui.Background = function(context) { } } - function drawList(layerList, click, filter) { + function drawList(layerList, type, change, filter) { var layerLinks = layerList.selectAll('label.layer') .data(getSources().filter(filter), function(d) { @@ -91,11 +98,8 @@ iD.ui.Background = function(context) { }); var layerInner = layerLinks.enter() - .append('label'); - - layerInner - .attr('class', 'layer') - .on('click.set-source', click); + .append('label') + .attr('class', 'layer'); // only set tooltips for layers with tooltips layerInner @@ -105,10 +109,11 @@ iD.ui.Background = function(context) { .placement('right') ); - layerInner.insert('input') - .attr('type','radio') - .attr('name','layers') - .attr('value',function(d) { return d.data.name;}); + layerInner.append('input') + .attr('type', type) + .attr('name', 'layers') + .attr('value', function(d) { return d.data.name; }) + .on('change', change); layerInner.insert('span').text(function(d) { return d.data.name; @@ -122,11 +127,11 @@ iD.ui.Background = function(context) { function update() { - backgroundList.call(drawList, clickSetSource, function(d) { + backgroundList.call(drawList, 'radio', clickSetSource, function(d) { return !d.data.overlay; }); - overlayList.call(drawList, clickSetOverlay, function(d) { + overlayList.call(drawList, 'checkbox', clickSetOverlay, function(d) { return d.data.overlay; }); diff --git a/js/id/ui/preset/radio.js b/js/id/ui/preset/radio.js index f60efa718..ee4c8ef90 100644 --- a/js/id/ui/preset/radio.js +++ b/js/id/ui/preset/radio.js @@ -1,7 +1,7 @@ iD.ui.preset.radio = function(field) { var event = d3.dispatch('change'), - buttons; + labels, radios; function radio(selection) { selection.classed('preset-radio', true); @@ -12,28 +12,25 @@ iD.ui.preset.radio = function(field) { var buttonWrap = wrap.enter().append('div') .attr('class', 'preset-input-wrap toggle-list'); - buttons = wrap.selectAll('label') + labels = wrap.selectAll('label') .data(field.options || field.keys); - var button = buttons.enter().append('label'); + var enter = labels.enter().append('label'); - button.append('input') - .attr('type','radio') - .attr('name',field.label) - .attr('value', function(d) { return field.t('options.' + d, { 'default': d }); }); + enter.append('input') + .attr('type', 'radio') + .attr('name', field.id) + .attr('value', function(d) { return field.t('options.' + d, { 'default': d }); }) + .attr('checked', false); - button.append('span') + enter.append('span') .text(function(d) { return field.t('options.' + d, { 'default': d }); }); - buttons - .on('click', function(d) { - d3.event.preventDefault(); - buttons.classed('active', function(e) { return d === e; }); - change(); - }); + radios = labels.selectAll('input') + .on('change', change); buttonWrap.append('span') - .attr('class','placeholder') + .attr('class', 'placeholder') .text(field.placeholder()); var remove = wrap.selectAll('label.remove') @@ -48,17 +45,16 @@ iD.ui.preset.radio = function(field) { remove .on('click', function() { d3.event.preventDefault(); - buttons.classed('active', false); + radios.property('checked', false); change(); }); - } function change() { var t = {}; if (field.key) t[field.key] = undefined; - buttons.each(function(d) { - var active = d3.select(this).classed('active'); + radios.each(function(d) { + var active = d3.select(this).property('checked'); if (field.key) { if (active) t[field.key] = d; } else { @@ -69,17 +65,20 @@ iD.ui.preset.radio = function(field) { } radio.tags = function(tags) { - buttons.classed('active', function(d) { + function checked(d) { if (field.key) { return tags[field.key] === d; } else { - return tags[d] && tags[d] !== 'no'; + return !!(tags[d] && tags[d] !== 'no'); } - }); + } + + labels.classed('active', checked); + radios.property('checked', checked); }; radio.focus = function() { - buttons.node().focus(); + radios.node().focus(); }; return d3.rebind(radio, event, 'on'); From b259187aaa34644e534b8cba2d384af99b2adebf Mon Sep 17 00:00:00 2001 From: John Firebaugh Date: Thu, 20 Jun 2013 11:55:58 -0700 Subject: [PATCH 4/4] Radio button for GPX layer --- js/id/ui/background.js | 37 +++++++++++++++++++------------------ 1 file changed, 19 insertions(+), 18 deletions(-) diff --git a/js/id/ui/background.js b/js/id/ui/background.js index 7f25f7c92..efb4b9fa5 100644 --- a/js/id/ui/background.js +++ b/js/id/ui/background.js @@ -79,15 +79,11 @@ iD.ui.Background = function(context) { selectLayer(); } - function clickGpx(d) { - d3.event.preventDefault(); - if (!_.isEmpty(context.map().layers[1].geojson())) { - context.map().layers[1] - .enable(!context.map().layers[1].enable()); - d3.select(this) - .classed('active', context.map().layers[1].enable()); - context.redraw(); - } + function clickGpx() { + context.map().layers[1] + .enable(!context.map().layers[1].enable()); + context.redraw(); + update(); } function drawList(layerList, type, change, filter) { @@ -126,7 +122,6 @@ iD.ui.Background = function(context) { } function update() { - backgroundList.call(drawList, 'radio', clickSetSource, function(d) { return !d.data.overlay; }); @@ -135,12 +130,15 @@ iD.ui.Background = function(context) { return d.data.overlay; }); + var gpxLayer = context.map().layers[1], + hasGpx = !_.isEmpty(gpxLayer.geojson()), + showsGpx = hasGpx && gpxLayer.enable(); + gpxLayerItem - .classed('active', function() { - var gpxLayer = context.map().layers[1]; - return !_.isEmpty(gpxLayer.geojson()) && - gpxLayer.enable(); - }); + .classed('active', hasGpx && gpxLayer.enable()) + .selectAll('input') + .property('disabled', !hasGpx) + .property('checked', showsGpx); selectLayer(); } @@ -256,13 +254,17 @@ iD.ui.Background = function(context) { .style('display', iD.detect().filedrop ? 'block' : 'none') .attr('class', 'toggle-list layer-list') .append('label') - .classed('layer-toggle-gpx', true) - .on('click.set-gpx', clickGpx); + .classed('layer-toggle-gpx', true); gpxLayerItem.call(bootstrap.tooltip() .title(t('gpx.drag_drop')) .placement('right')); + gpxLayerItem.append('input') + .attr('type', 'checkbox') + .property('disabled', true) + .on('change', clickGpx); + gpxLayerItem.append('span') .text(t('gpx.local_layer')); @@ -338,7 +340,6 @@ iD.ui.Background = function(context) { context.surface().on('mousedown.background-outside', hide); context.container().on('mousedown.background-outside', hide); - } return background;