forward on preset ui work

Add maki icons

css/app.css

@@ -530,21 +530,39 @@ a.selected:hover .toggle.icon  { background-position: -40px -180px;}
 }
 
 .inspector-inner.type {
+    border: 1px solid #eee;
     z-index:1;
     position:relative;
 }
 
 .inspector-inner.type .preset-icon {
-    width: 50px;
+    width: 24px;
+    height: 24px;
+    padding: 13px;
+    background: #eee;
+}
+
+.inspector-inner.type .preset-label-wrap {
     height: 50px;
+    display: inline-block;
+    padding: 10px;
 }
 
 .inspector-inner.type .preset-name {
-    display: inline-block;
-    margin-left: 20px;
+  margin: 0;
+}
+
+.inspector-inner .info {
+    color: white;
+    border-radius: 3px;
+    text-align: center;
+    width: 20px;
+    height: 20px;
+    float: right;
 }
 
 .inspector-inner.head {
+    border: 1px solid #eee;
     z-index:1;
     position:relative;
 }
@@ -654,9 +672,17 @@ a.selected:hover .toggle.icon  { background-position: -40px -180px;}
   float: left;
   width: 100px;
   height: 100px;
-  background: red;
+  //background: red;
   color: black;
   margin: 10px;
+  text-align: center;
+}
+.preset-grid .grid-entry img {
+  width: 24px;
+  margin-left: 20px;
+  padding: 18px;
+  background: #eee;
+  display: block;
 }
 
 .preset-grid-search-wrap {
@@ -1459,6 +1485,7 @@ a.success-action {
 .inspector-preset.cf,
 .preset-section-input.cf {
     width: 100%;
+    margin: 5px 0;
 }
 
 .preset-search-input {

index.html

@@ -180,7 +180,7 @@
             var id = iD();
 
             d3.json('keys.json', function(err, keys) {
-                d3.json('presets/presets_josm.json', function(err, presets_data) {
+                d3.json('presets/presets.json', function(err, presets_data) {
 
                     id.connection()
                         .keys(keys)

js/id/presetdata.js

@@ -17,7 +17,7 @@ iD.presetData = function() {
     presets.match = function(entity) {
         var type = entity.type == 'node' ? 'node' : entity.geometry();
         return data.filter(function(d) {
-            return _.contains(d.type, type);
+            return _.contains(d.match.type, type);
         });
     };
 
@@ -28,8 +28,8 @@ iD.presetData = function() {
 
         for (var i = 0; i < data.length; i++) {
             count = 0;
-            tags = data[i].tags;
-            if (!_.contains(data[i].type, type)) continue;
+            tags = data[i].match.tags;
+            if (!_.contains(data[i].match.type, type)) continue;
             for (var k in tags) {
                 if (entity.tags[k] == tags[k]) count++;
             }

js/id/ui/preset.js

@@ -6,7 +6,7 @@ iD.ui.preset = function() {
         preset;
 
     function getTags() {
-        var tags = _.clone(preset.tags);
+        var tags = _.clone(preset.match.tags);
         sections.selectAll('input,select')
             .each(function(d) {
                 tags[d.key] = this.value;
@@ -79,7 +79,7 @@ iD.ui.preset = function() {
                 var w = this.append('span').attr('class', 'input-wrap-position');
                 i = w.append('input');
                 w.call(d3.combobox()
-                    .data([''].concat(d.values.slice()).map(function(o) {
+                    .data([''].concat(d.option.slice()).map(function(o) {
                         return { value: o, title: o };
                     })));
                 break;
@@ -92,7 +92,7 @@ iD.ui.preset = function() {
     function presets(selection) {
         selection.html('');
         sections = selection.selectAll('div.preset-section')
-            .data(preset.main)
+            .data(preset.form)
             .enter()
             .append('div')
             .attr('class', 'preset-section cf');
@@ -104,7 +104,7 @@ iD.ui.preset = function() {
                 .attr('class', 'col4 preset-label')
                 .append('label')
                 .attr('for', 'input-' + d.key)
-                .text(d.text);
+                .text(d.key);
             input.call(wrap.append('div')
                 .attr('class', 'col8 preset-input'), d);
         });

js/id/ui/presetgrid.js

@@ -47,14 +47,17 @@ iD.ui.PresetGrid = function() {
             .selectAll('div.grid-entry')
             .data(presets.slice(0, 12), name);
 
-        entries.enter()
+        var entered = entries.enter()
             .append('div')
             .attr('class', 'grid-entry')
-            .text(name)
             .on('click', function(d) {
                 event.choose(d);
             });
 
+        entered.append('img')
+            .attr('src', function(d) { return '/presets/maki/' + d.icon; });
+        entered.append('span').text(name);
+
         entries.exit().remove();
     }
 

js/id/ui/tageditor.js

@@ -30,19 +30,31 @@ iD.ui.TagEditor = function() {
             .text('Type');
 
         typewrap.append('img')
-            .attr('class', 'preset-icon');
+            .attr('class', 'preset-icon')
+            .attr('src', presetMatch ? '/presets/maki/' + presetMatch.icon : '');
 
-        typewrap.append('h3')
+        var typelabel = typewrap.append('div')
+            .attr('class', 'preset-label-wrap');
+
+        typelabel.append('h3')
             .attr('class', 'preset-name')
             .text(presetMatch ? presetMatch.name : '');
 
+        typelabel.append('span')
+            .attr('class', 'preset-geometry')
+            .text(entity.geometry(context.graph()));
+
+        typewrap.append('div')
+            .attr('class', 'info fillD');
 
         var namewrap = editorwrap.append('div')
                 .attr('class', 'head inspector-inner fillL'),
+            namelabel = namewrap.append('h4')
+                .text('Name'),
             h2 = namewrap.append('h2');
 
-        h2.append('span')
-            .attr('class', 'icon big icon-pre-text big-' + entity.geometry(context.graph()));
+        h2.append('div')
+            .attr('class', 'info fillD');
 
         var name = h2.append('input')
             .attr('placeholder', 'name')

presets/presets.json

@@ -1,22 +1,4 @@
 [
-    {
-        "title": "Highway",
-        "name": "highway",
-        "match": {
-            "type": ["line"],
-            "tags": {
-                "highway": "*"
-            }
-        },
-        "form": [
-            {
-                "tag": "highway",
-                "title": "Highway Type",
-                "type": "select",
-                "option": ["primary", "secondary", "tertiary"]
-            }
-        ]
-    },
     {
         "title": "Cafe",
         "name": "cafe",
@@ -26,31 +8,16 @@
                 "amenity": "cafe"
             }
         },
+        "icon": "cafe-24.png",
         "form": [
             {
-                "tag": "phone",
-                "type": "tel"
-            },
-            {
-                "tag": "fax",
-                "type": "tel"
-            },
-            {
-                "tag": "website",
-                "type": "url"
-            },
-            {
-                "tag": "email",
-                "type": "email"
-            },
-            {
-                "tag": "internet_access",
+                "key": "internet_access",
                 "title": "Internet Access",
                 "type": "select",
                 "option": ["yes", "wlan","wired","terminal","no"]
             },
             {
-                "tag": "internet_access:fee",
+                "key": "internet_access:fee",
                 "title": "Internet Access Fee",
                 "type": "select",
                 "option": ["yes", "no"]