Adding ▶/▼ to category presets to make it more clear

(closes openstreetmap#2972)
kepta · Feb 12, 2016 · 174c5d1 · 174c5d1
1 parent 8a3314e
commit 174c5d1
Show file tree

Hide file tree

Showing 14 changed files with 55 additions and 47 deletions.
diff --git a/data/presets.yaml b/data/presets.yaml
@@ -2,25 +2,25 @@ en:
   presets:
     categories:
       category-building:
-        name: Building
+        name: Building features
       category-golf:
-        name: Golf
+        name: Golf features
       category-landuse:
-        name: Land Use
+        name: Land Use features
       category-path:
-        name: Path
+        name: Path features
       category-rail:
-        name: Rail
+        name: Rail features
       category-restriction:
-        name: Restriction
+        name: Restriction features
       category-road:
-        name: Road
+        name: Road features
       category-route:
-        name: Route
+        name: Route features
       category-water-area:
-        name: Water
+        name: Water features
       category-water-line:
-        name: Water
+        name: Water features
     fields:
       access:
         # 'access=*, foot=*, motor_vehicle=*, bicycle=*, horse=*'

diff --git a/data/presets/categories.json b/data/presets/categories.json
@@ -1,7 +1,7 @@
 {
     "category-building": {
         "geometry": "area",
-        "name": "Building",
+        "name": "Building features",
         "icon": "building",
         "members": [
             "building/house",
@@ -14,7 +14,7 @@
     },
     "category-golf": {
         "geometry": "area",
-        "name": "Golf",
+        "name": "Golf features",
         "icon": "golf",
         "members": [
             "golf/fairway",
@@ -28,7 +28,7 @@
     },
     "category-landuse": {
         "geometry": "area",
-        "name": "Land Use",
+        "name": "Land Use features",
         "icon": "land-use",
         "members": [
             "landuse/residential",
@@ -45,7 +45,7 @@
     },
     "category-path": {
         "geometry": "line",
-        "name": "Path",
+        "name": "Path features",
         "icon": "category-path",
         "members": [
             "highway/pedestrian",
@@ -58,7 +58,7 @@
     },
     "category-rail": {
         "geometry": "line",
-        "name": "Rail",
+        "name": "Rail features",
         "icon": "category-rail",
         "members": [
             "railway/rail",
@@ -71,7 +71,7 @@
     },
     "category-restriction": {
         "geometry": "relation",
-        "name": "Restriction",
+        "name": "Restriction features",
         "icon": "restriction",
         "members": [
             "type/restriction/no_left_turn",
@@ -86,7 +86,7 @@
     },
     "category-road": {
         "geometry": "line",
-        "name": "Road",
+        "name": "Road features",
         "icon": "category-roads",
         "members": [
             "highway/residential",
@@ -108,7 +108,7 @@
     },
     "category-route": {
         "geometry": "relation",
-        "name": "Route",
+        "name": "Route features",
         "icon": "route",
         "members": [
             "type/route/road",
@@ -128,7 +128,7 @@
     },
     "category-water-area": {
         "geometry": "area",
-        "name": "Water",
+        "name": "Water features",
         "icon": "water",
         "members": [
             "natural/water/lake",
@@ -139,7 +139,7 @@
     },
     "category-water-line": {
         "geometry": "line",
-        "name": "Water",
+        "name": "Water features",
         "icon": "category-water",
         "members": [
             "waterway/river",

diff --git a/data/presets/categories/building.json b/data/presets/categories/building.json
@@ -1,6 +1,6 @@
 {
     "geometry": "area",
-    "name": "Building",
+    "name": "Building Features",
     "icon": "building",
     "members": [
         "building/house",
@@ -10,4 +10,4 @@
         "building/residential",
         "building"
     ]
-}
+}
diff --git a/data/presets/categories/golf.json b/data/presets/categories/golf.json
@@ -1,6 +1,6 @@
 {
     "geometry": "area",
-    "name": "Golf",
+    "name": "Golf Features",
     "icon": "golf",
     "members": [
         "golf/fairway",
@@ -11,4 +11,4 @@
         "golf/tee",
         "golf/water_hazard"
     ]
-}
+}
diff --git a/data/presets/categories/landuse.json b/data/presets/categories/landuse.json
@@ -1,6 +1,6 @@
 {
     "geometry": "area",
-    "name": "Land Use",
+    "name": "Land Use Features",
     "icon": "land-use",
     "members": [
         "landuse/residential",

diff --git a/data/presets/categories/path.json b/data/presets/categories/path.json
@@ -1,6 +1,6 @@
 {
     "geometry": "line",
-    "name": "Path",
+    "name": "Path Features",
     "icon": "category-path",
     "members": [
         "highway/pedestrian",

diff --git a/data/presets/categories/rail.json b/data/presets/categories/rail.json
@@ -1,6 +1,6 @@
 {
     "geometry": "line",
-    "name": "Rail",
+    "name": "Rail Features",
     "icon": "category-rail",
     "members": [
         "railway/rail",

diff --git a/data/presets/categories/restriction.json b/data/presets/categories/restriction.json
@@ -1,6 +1,6 @@
 {
     "geometry": "relation",
-    "name": "Restriction",
+    "name": "Restriction Features",
     "icon": "restriction",
     "members": [
         "type/restriction/no_left_turn",

diff --git a/data/presets/categories/road.json b/data/presets/categories/road.json
@@ -1,6 +1,6 @@
 {
     "geometry": "line",
-    "name": "Road",
+    "name": "Road Features",
     "icon": "category-roads",
     "members": [
         "highway/residential",
@@ -19,4 +19,4 @@
         "highway/track",
         "highway/road"
     ]
-}
+}
diff --git a/data/presets/categories/route.json b/data/presets/categories/route.json
@@ -1,6 +1,6 @@
 {
     "geometry": "relation",
-    "name": "Route",
+    "name": "Route Features",
     "icon": "route",
     "members": [
         "type/route/road",

diff --git a/data/presets/categories/water-area.json b/data/presets/categories/water-area.json
@@ -1,11 +1,11 @@
 {
     "geometry": "area",
-    "name": "Water",
+    "name": "Water Features",
     "icon": "water",
     "members": [
         "natural/water/lake",
         "natural/water/pond",
         "natural/water/reservoir",
         "natural/water"
     ]
-}
+}
diff --git a/data/presets/categories/water-line.json b/data/presets/categories/water-line.json
@@ -1,6 +1,6 @@
 {
     "geometry": "line",
-    "name": "Water",
+    "name": "Water Features",
     "icon": "category-water",
     "members": [
         "waterway/river",

diff --git a/dist/locales/en.json b/dist/locales/en.json
@@ -602,34 +602,34 @@
     "presets": {
         "categories": {
             "category-building": {
-                "name": "Building"
+                "name": "Building features"
             },
             "category-golf": {
-                "name": "Golf"
+                "name": "Golf features"
             },
             "category-landuse": {
-                "name": "Land Use"
+                "name": "Land Use features"
             },
             "category-path": {
-                "name": "Path"
+                "name": "Path features"
             },
             "category-rail": {
-                "name": "Rail"
+                "name": "Rail features"
             },
             "category-restriction": {
-                "name": "Restriction"
+                "name": "Restriction features"
             },
             "category-road": {
-                "name": "Road"
+                "name": "Road features"
             },
             "category-route": {
-                "name": "Route"
+                "name": "Route features"
             },
             "category-water-area": {
-                "name": "Water"
+                "name": "Water features"
             },
             "category-water-line": {
-                "name": "Water"
+                "name": "Water features"
             }
         },
         "fields": {

diff --git a/js/id/ui/preset_list.js b/js/id/ui/preset_list.js
@@ -126,20 +126,28 @@ iD.ui.PresetList = function(context) {
 
     function CategoryItem(preset) {
         var box, sublist, shown = false;
-
         function item(selection) {
             var wrap = selection.append('div')
                 .attr('class', 'preset-list-button-wrap category col12');
 
             wrap.append('button')
                 .attr('class', 'preset-list-button')
+                .classed('expanded', false)
                 .call(iD.ui.PresetIcon()
                     .geometry(context.geometry(id))
                     .preset(preset))
-                .on('click', item.choose)
+                .on('click', function() {
+                    var isExpanded = d3.select(this).classed('expanded');
+                    var triangle = isExpanded ? '▶ ' :  '▼ ';
+                    d3.select(this).classed('expanded', !isExpanded);
+                    d3.select(this).selectAll('.label').text(triangle + preset.name());
+                    item.choose();
+                })
                 .append('div')
                 .attr('class', 'label')
-                .text(preset.name());
+                .text(function() {
+                  return '▶ ' + preset.name();
+                });
 
             box = selection.append('div')
                 .attr('class', 'subgrid col12')