Style vertices in the preset list with circular frame

(closes #3569)
openstreetmap · Mar 8, 2017 · 52d37d9 · 52d37d9
1 parent 40f5aa7
commit 52d37d9
Show file tree

Hide file tree

Showing 5 changed files with 46 additions and 13 deletions.
diff --git a/css/20_map.css b/css/20_map.css
@@ -82,6 +82,18 @@ g.vertex.vertex-hover {
     display: none;
 }
 
+.preset-icon-fill-vertex {
+    height: 40px;
+    width: 40px;
+    margin: auto;
+    position: absolute;
+    left: 10px;
+    top: 10px;
+    border: 1.5px solid #333;
+    border-radius: 20px;
+    background-color: #efefef;
+}
+
 .mode-draw-area g.vertex.vertex-hover,
 .mode-draw-line g.vertex.vertex-hover,
 .mode-add-area  g.vertex.vertex-hover,

diff --git a/modules/ui/preset_icon.js b/modules/ui/preset_icon.js
@@ -13,13 +13,27 @@ export function uiPresetIcon() {
     }
 
 
+    function getIcon(p, geom) {
+        if (p.icon)
+            return p.icon;
+        else if (geom === 'line')
+            return 'other-line';
+        else if (geom === 'vertex')
+            return p.isFallback() ? '' : 'poi-vertex';
+        else
+            return 'marker-stroked';
+    }
+
+
     function render() {
         var selection = d3.select(this),
             p = preset.apply(this, arguments),
             geom = geometry.apply(this, arguments),
-            picon = p.icon || (geom === 'line' ? 'other-line' : 'marker-stroked'),
+            picon = getIcon(p, geom),
             isPoi = picon.match(/^poi-/) !== null,
-            isMaki = dataFeatureIcons.indexOf(picon) !== -1;
+            isMaki = dataFeatureIcons.indexOf(picon) !== -1,
+            isFramed = (geom === 'area' || geom === 'verex');
+
 
         function tag_classes(p) {
             var s = '';
@@ -32,6 +46,7 @@ export function uiPresetIcon() {
             return s;
         }
 
+
         var fill = selection.selectAll('.preset-icon-fill')
             .data([0]);
 
@@ -44,18 +59,17 @@ export function uiPresetIcon() {
                 return 'preset-icon-fill preset-icon-fill-' + geom + tag_classes(p);
             });
 
-        var frame = selection.selectAll('.preset-icon-frame')
-            .data([0]);
 
-        frame = frame.enter()
-            .append('div')
-            .call(svgIcon('#preset-icon-frame'))
-            .merge(frame);
+        var areaFrame = selection.selectAll('.preset-icon-frame')
+            .data((geom === 'area') ? [0] : []);
 
-        frame
-            .attr('class', function() {
-                return 'preset-icon-frame ' + (geom === 'area' ? '' : 'hide');
-            });
+        areaFrame.exit()
+            .remove();
+
+        areaFrame = areaFrame.enter()
+            .append('div')
+            .attr('class', 'preset-icon-frame')
+            .call(svgIcon('#preset-icon-frame'));
 
 
         var icon = selection.selectAll('.preset-icon')
@@ -69,7 +83,7 @@ export function uiPresetIcon() {
 
         icon
             .attr('class', 'preset-icon preset-icon-' +
-                ((isMaki || isPoi) ? (geom === 'area' ? '24' : '28') : (geom === 'area' ? '44' : '60'))
+                ((isMaki || isPoi) ? (isFramed ? '24' : '28') : (isFramed ? '44' : '60'))
             );
 
         icon.selectAll('svg')

diff --git a/svg/iD-sprite.json b/svg/iD-sprite.json
@@ -312,6 +312,10 @@
     "poi-bowling-shape":           { "fill": "currentColor" },
     "poi-binoculars-shape":        { "fill": "currentColor" },
 
+    "poi-vertex":               { "viewBox": "400 350 15 15" },
+
+    "poi-vertex-shape":         { "fill": "currentColor" },
+
     "turn-yes":                 { "viewBox": "200 320 44 24" },
     "turn-no":                  { "viewBox": "244 320 44 24" },
     "turn-only":                { "viewBox": "288 320 44 24" },

diff --git a/svg/iD-sprite.src.idraw b/svg/iD-sprite.src.idraw
diff --git a/svg/iD-sprite.src.svg b/svg/iD-sprite.src.svg