progress on modals.

css/app.css

@@ -29,6 +29,10 @@ h2 {
     margin-bottom: 10px;
 }
 
+h3:last-child,
+h2:last-child,
+h4:last-child { margin-bottom: 0;}
+
 h3 {
     font-size: 18px;
     line-height: 1.3333;
@@ -409,9 +413,11 @@ button[disabled] .icon.layers     { background-position: -300px -40px;}
 button[disabled] .icon.avatar     { background-position: -320px -40px;}
 button[disabled] .icon.nearby     { background-position: -340px -40px;}
 
-.icon.big-line   { background-position: 0px -80px;}
-.icon.big-point  { background-position: -40px -80px;}
-.icon.big-area   { background-position: -80px -80px;}
+.icon.big-line    { background-position: 0px -80px;}
+.icon.big-point   { background-position: -40px -80px;}
+.icon.big-area    { background-position: -80px -80px;}
+.icon.big-inspect { background-position: -120px -80px;}
+
 
 /* Toggle Icon is special */
 .toggle.icon                   { background-position: 0px -180px;}
@@ -765,7 +771,6 @@ div.typeahead a:first-child {
 .modal .loader { margin-bottom: 10px;}
 
 .modal .content {
-    padding: 10px;
     margin-bottom: 40px;
 }
 
@@ -773,7 +778,8 @@ div.typeahead a:first-child {
     text-align: center;
 }
 
-.modal button { margin-top: 0;}
+.modal button { margin-bottom: 0;}
+.modal button:first-child { margin-left: 0;}
 
 .shaded {
     z-index: 2;
@@ -806,6 +812,12 @@ div.typeahead a:first-child {
     max-height: 160px;
 }
 
+.modal-section {
+    padding: 20px;
+    border-bottom: 1px solid #ccc;
+}
+.modal-section:last-child { border-bottom: 0;}
+
 .changeset-list li {
     border-top:1px solid #ccc;
     padding:5px 10px;
@@ -820,12 +832,6 @@ div.typeahead a:first-child {
     font:normal 12px/20px 'Helvetica Neue', Arial, sans-serif;
 }
 
-.commit-modal .buttons {
-    padding-bottom: 10px;
-    margin-bottom: 10px;
-    border-bottom: 1px solid #ccc;
-}
-
 .loading-modal {
     text-align: center;
 }

img/source/design.svg

@@ -481,12 +481,12 @@
      borderopacity="1.0"
      inkscape:pageopacity="1"
      inkscape:pageshadow="2"
-     inkscape:zoom="16"
-     inkscape:cx="1555.3951"
-     inkscape:cy="1076.4548"
+     inkscape:zoom="1"
+     inkscape:cx="413.87213"
+     inkscape:cy="499.14559"
      inkscape:document-units="px"
      inkscape:current-layer="layer1"
-     showgrid="true"
+     showgrid="false"
      inkscape:window-width="1543"
      inkscape:window-height="834"
      inkscape:window-x="246"
@@ -2868,7 +2868,8 @@
          transform="matrix(-0.70710678,0.70710678,-0.70710678,-0.70710678,0,0)" />
     </g>
     <g
-       id="g8385">
+       id="g8385"
+       transform="translate(-10,0)">
       <rect
          y="-37.637817"
          x="1530"
@@ -2958,12 +2959,13 @@
          style="color:#000000;fill:#737373;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:2;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" />
     </g>
     <g
-       id="g8396">
+       id="g8396"
+       transform="translate(-10,0)">
       <rect
          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"
          id="rect8398"
          width="32"
-         height="30"
+         height="32"
          x="1534"
          y="-32.637817" />
       <rect
@@ -3047,6 +3049,100 @@
          ry="2"
          transform="scale(-1,-1)" />
     </g>
+    <g
+       id="g8417"
+       inkscape:export-filename="/Users/saman/work_repos/iD/img/source/loader1.png"
+       inkscape:export-xdpi="90"
+       inkscape:export-ydpi="90"
+       transform="translate(-10,0)">
+      <rect
+         y="-32.637817"
+         x="1534"
+         height="32"
+         width="32"
+         id="rect8419"
+         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" />
+      <rect
+         transform="matrix(0.70710678,0.70710678,-0.70710678,0.70710678,0,0)"
+         ry="2"
+         rx="2"
+         y="-1123.7803"
+         x="1082.2507"
+         height="10"
+         width="4"
+         id="rect8421"
+         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" />
+      <rect
+         transform="matrix(0.70710678,0.70710678,-0.70710678,0.70710678,0,0)"
+         style="color:#000000;fill:#c1c1c1;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:2;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
+         id="rect8423"
+         width="4"
+         height="10"
+         x="1082.2507"
+         y="-1101.7803"
+         rx="2"
+         ry="2" />
+      <rect
+         transform="matrix(0,1,-1,0,0,0)"
+         style="color:#000000;fill:#c1c1c1;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:2;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
+         id="rect8425"
+         width="4"
+         height="10"
+         x="-18.637838"
+         y="-1566.0001"
+         rx="2"
+         ry="2" />
+      <rect
+         transform="matrix(0,1,-1,0,0,0)"
+         ry="2"
+         rx="2"
+         y="-1544.0001"
+         x="-18.637838"
+         height="10"
+         width="4"
+         id="rect8427"
+         style="color:#000000;fill:#c1c1c1;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:2;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" />
+      <rect
+         ry="2"
+         rx="2"
+         y="-1100.2509"
+         x="-1109.7803"
+         height="10"
+         width="4"
+         id="rect8429"
+         style="color:#000000;fill:#c1c1c1;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:2;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
+         transform="matrix(-0.70710678,0.70710678,-0.70710678,-0.70710678,0,0)" />
+      <rect
+         style="color:#000000;fill:#979797;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:2;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
+         id="rect8431"
+         width="4"
+         height="10"
+         x="-1109.7803"
+         y="-1078.2509"
+         rx="2"
+         ry="2"
+         transform="matrix(-0.70710678,0.70710678,-0.70710678,-0.70710678,0,0)" />
+      <rect
+         transform="scale(-1,-1)"
+         style="color:#000000;fill:#c1c1c1;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:2;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
+         id="rect8433"
+         width="4"
+         height="10"
+         x="-1552.0001"
+         y="0.63783795"
+         rx="2"
+         ry="2" />
+      <rect
+         transform="scale(-1,-1)"
+         ry="2"
+         rx="2"
+         y="22.637838"
+         x="-1552.0001"
+         height="10"
+         width="4"
+         id="rect8435"
+         style="color:#000000;fill:#737373;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:2;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" />
+    </g>
   </g>
   <g
      inkscape:groupmode="layer"

img/source/sprite.svg

@@ -38,12 +38,12 @@
      borderopacity="1.0"
      inkscape:pageopacity="0.0"
      inkscape:pageshadow="2"
-     inkscape:zoom="2.8284271"
-     inkscape:cx="29.5116"
-     inkscape:cy="98.899907"
+     inkscape:zoom="1"
+     inkscape:cx="123.17543"
+     inkscape:cy="55.423782"
      inkscape:document-units="px"
      inkscape:current-layer="layer12"
-     showgrid="true"
+     showgrid="false"
      inkscape:window-width="1560"
      inkscape:window-height="922"
      inkscape:window-x="308"
@@ -53,7 +53,7 @@
      fit-margin-left="0"
      fit-margin-right="0"
      fit-margin-bottom="0"
-     showguides="true"
+     showguides="false"
      inkscape:guide-bbox="true"
      inkscape:snap-bbox="true"
      inkscape:snap-nodes="false">
@@ -165,7 +165,7 @@
         <dc:format>image/svg+xml</dc:format>
         <dc:type
            rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-        <dc:title />
+        <dc:title></dc:title>
       </cc:Work>
     </rdf:RDF>
   </metadata>
@@ -1386,5 +1386,10 @@
        height="19.999998"
        x="-135"
        y="39.999996" />
+    <path
+       id="path46639"
+       d="m 168,87.999997 c -4.97056,0 -9,4.02944 -9,9 0,1.45311 0.35716,2.816163 0.96875,4.031253 L 153,108 l 0,2 c 0,1 1,2 2,2 l 2,0 6.96875,-6.96875 C 165.18384,105.64284 166.54689,106 168,106 c 4.97056,0 9,-4.02944 9,-9.000003 0,-4.97056 -4.02944,-9 -9,-9 z m 0,4 c 2.76142,0 5,2.23858 5,5 C 173,99.76142 170.76142,102 168,102 c -2.76142,0 -5,-2.23858 -5,-5.000003 0,-2.76142 2.23858,-5 5,-5 z"
+       style="color:#000000;fill:#cccccc;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:2;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
+       inkscape:connector-curvature="0" />
   </g>
 </svg>

js/id/ui/commit.js

@@ -3,43 +3,43 @@ iD.commit = function() {
 
     function commit(selection) {
         var changes = selection.datum(),
-            header = selection.append('div').attr('class', 'header pad1'),
+            header = selection.append('div').attr('class', 'header modal-section'),
             body = selection.append('div').attr('class', 'body');
 
         header.append('h2').text('Upload Changes to OpenStreetMap');
         header.append('p').text('The changes you upload will be visible on all maps that use OpenStreetMap data.');
 
-        body.append('div').attr('class','pad1')
-                .append('textarea')
-                .attr('class', 'changeset-comment pad1')
-                .attr('placeholder', 'Brief Description of your contributions');
+        var commit = body.append('div').attr('class','modal-section');
+                commit.append('textarea')
+                    .attr('class', 'changeset-comment')
+                    .attr('placeholder', 'Brief Description of your contributions');
 
-        var buttonwrap = body.append('div')
-                            .attr('class', 'buttons');
+            var buttonwrap = commit.append('div')
+                        .attr('class', 'buttons');
 
-        var savebutton = buttonwrap.append('button')
-            .attr('class', 'action wide')
-            .on('click.save', function() {
-                event.save({
-                    comment: d3.select('textarea.changeset-comment').node().value
-                });
-            });
-            savebutton.append('span').attr('class','icon save icon-pre-text')
-            savebutton.append('span').attr('class','label').text('Save')
-        var cancelbutton = buttonwrap.append('button')
-            .attr('class', 'cancel wide')
-            .on('click.cancel', function() {
-                event.cancel();
-            });
-            cancelbutton.append('span').attr('class','icon close icon-pre-text')
-            cancelbutton.append('span').attr('class','label').text('Cancel')
+                var savebutton = buttonwrap.append('button')
+                    .attr('class', 'action wide')
+                    .on('click.save', function() {
+                        event.save({
+                            comment: d3.select('textarea.changeset-comment').node().value
+                        });
+                    });
+                    savebutton.append('span').attr('class','icon save icon-pre-text')
+                    savebutton.append('span').attr('class','label').text('Save')
+                var cancelbutton = buttonwrap.append('button')
+                    .attr('class', 'cancel wide')
+                    .on('click.cancel', function() {
+                        event.cancel();
+                    });
+                    cancelbutton.append('span').attr('class','icon close icon-pre-text')
+                    cancelbutton.append('span').attr('class','label').text('Cancel')
 
         var section = body.selectAll('div.commit-section')
             .data(['modified', 'deleted', 'created'].filter(function(d) {
                 return changes[d].length;
             }))
             .enter()
-            .append('div').attr('class', 'commit-section pad1');
+            .append('div').attr('class', 'commit-section modal-section');
 
         section.append('h3').text(String)
             .append('small')

js/id/ui/confirm.js

@@ -2,8 +2,8 @@ iD.confirm = function(message) {
     var modal = iD.modal();
     modal.select('.modal').classed('modal-alert', true);
     modal.select('.content')
-        .classed('pad1', true)
-        .append('div').attr('class', 'description pad1');
+        .classed('modal-section', true)
+        .append('div').attr('class', 'description');
     var nochanges = modal.select('.content')
         .append('button')
         .attr('class','wide action centered')

js/id/ui/loading.js

@@ -3,7 +3,7 @@ iD.loading = function(message) {
 
     var loadertext = modal.select('.content')
         .classed('loading-modal', true)
-        .append('div').classed('pad1',true);
+        .append('div').classed('modal-section',true);
         loadertext.append('img').attr('class','loader').attr('src', '../img/loader.gif');
         loadertext.append('h3').text(message || '');
 

js/id/ui/tag_reference.js

@@ -2,11 +2,12 @@ iD.tagReference = function(selection) {
     selection.each(function() {
         function g(x) { return function(d) { return d[x]; }; }
         var selection = d3.select(this);
-        selection
-            .append('div')
-                .attr('class','header')
-                .append('h2')
-                    .text(g('title'));
+        var header = selection.append('div')
+                        .attr('class','modal-section')
+                        .append('h2');
+            header.append('span').attr('class','icon big icon-pre-text big-inspect');
+            header.append('span').text(g('title'));
+
         var icon_row = selection.append('div');
         var icons = icon_row.selectAll('span.icon')
             .data(g('types'))
@@ -30,4 +31,4 @@ iD.tagReference = function(selection) {
             .append('p')
             .text(g('description'));
     });
-};
+};