Add folder border to preset category icons (close #6085)

openstreetmap · Dec 3, 2020 · 9f6aaf2 · 9f6aaf2
1 parent 07a59ba
commit 9f6aaf2
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 6 deletions.
diff --git a/css/80_app.css b/css/80_app.css
@@ -1094,6 +1094,14 @@ a.hide-toggle {
     fill: transparent;
 }
 
+.preset-icon-category-border path {
+    stroke: #999;
+    stroke-width: 1px;
+    fill: transparent;
+    backface-visibility: hidden;
+    vector-effect: non-scaling-stroke;
+}
+
 .preset-icon-line {
     margin: auto;
     position: absolute;
@@ -1169,7 +1177,7 @@ a.hide-toggle {
 .preset-icon.framed .icon {
     transform: scale(0.4);
 }
-.preset-icon.framed.line-geom .icon,
+.preset-icon.framed.line-geom:not(.category) .icon,
 .preset-icon.framed.route-geom .icon {
     top: 20%;
     transform: translateY(-30%) scale(0.4);
@@ -1180,7 +1188,7 @@ a.hide-toggle {
 .preset-icon-iD.framed .icon {
     transform: scale(0.74);
 }
-.preset-icon-iD.framed.line-geom .icon,
+.preset-icon-iD.framed.line-geom:not(.category) .icon,
 .preset-icon-iD.framed.route-geom .icon {
     transform: translateY(-30%) scale(0.74);
 }

diff --git a/modules/ui/preset_icon.js b/modules/ui/preset_icon.js
@@ -59,6 +59,30 @@ export function uiPresetIcon() {
   }
 
 
+  function renderCategoryBorder(container, drawBorder) {
+    let categoryBorder = container.selectAll('.preset-icon-category-border')
+      .data(drawBorder ? [0] : []);
+
+    categoryBorder.exit()
+      .remove();
+
+    let categoryBorderEnter = categoryBorder.enter();
+
+    const d = 60;
+
+    categoryBorderEnter
+      .append('svg')
+      .attr('class', 'preset-icon-fill preset-icon-category-border')
+      .attr('width', d)
+      .attr('height', d)
+      .attr('viewBox', `0 0 ${d} ${d}`)
+      .append('path')
+      .attr('d', 'M9.5,7.5 L25.5,7.5 L28.5,12.5 L49.5,12.5 C51.709139,12.5 53.5,14.290861 53.5,16.5 L53.5,43.5 C53.5,45.709139 51.709139,47.5 49.5,47.5 L10.5,47.5 C8.290861,47.5 6.5,45.709139 6.5,43.5 L6.5,12.5 L9.5,7.5 Z');
+
+    categoryBorder = categoryBorderEnter.merge(categoryBorder);
+ }
+
+
   function renderCircleFill(container, drawVertex) {
     let vertexFill = container.selectAll('.preset-icon-fill-vertex')
       .data(drawVertex ? [0] : []);
@@ -271,7 +295,7 @@ export function uiPresetIcon() {
     }
   }
 
-  function renderSvgIcon(container, picon, geom, isFramed, tagClasses) {
+  function renderSvgIcon(container, picon, geom, isFramed, category, tagClasses) {
     const isMaki = picon && /^maki-/.test(picon);
     const isTemaki = picon && /^temaki-/.test(picon);
     const isFa = picon && /^fa[srb]-/.test(picon);
@@ -291,6 +315,7 @@ export function uiPresetIcon() {
 
     icon
       .attr('class', 'preset-icon ' + (geom ? geom + '-geom' : ''))
+      .classed('category', category)
       .classed('framed', isFramed)
       .classed('preset-icon-iD', isiDIcon);
 
@@ -367,9 +392,9 @@ export function uiPresetIcon() {
     const drawPoint = picon && geom === 'point' && isSmall() && !isFallback;
     const drawVertex = picon !== null && geom === 'vertex' && (!isSmall() || !isFallback);
     const drawLine = picon && geom === 'line' && !isFallback && !isCategory;
-    const drawArea = picon && geom === 'area' && !isFallback;
+    const drawArea = picon && geom === 'area' && !isFallback && !isCategory;
     const drawRoute = picon && geom === 'route';
-    const isFramed = (drawVertex || drawArea || drawLine || drawRoute);
+    const isFramed = drawVertex || drawArea || drawLine || drawRoute || isCategory;
 
     let tags = !isCategory ? p.setTags({}, geom) : {};
     for (let k in tags) {
@@ -393,12 +418,13 @@ export function uiPresetIcon() {
       .classed('showing-img', !!imageURL)
       .classed('fallback', isFallback);
 
+    renderCategoryBorder(container, isCategory);
     renderPointBorder(container, drawPoint);
     renderCircleFill(container, drawVertex);
     renderSquareFill(container, drawArea, tagClasses);
     renderLine(container, drawLine, tagClasses);
     renderRoute(container, drawRoute, p);
-    renderSvgIcon(container, picon, geom, isFramed, tagClasses);
+    renderSvgIcon(container, picon, geom, isFramed, isCategory, tagClasses);
     renderImageIcon(container, imageURL);
   }