Improve edit control icons to make them clearer and more intuitive fa…

…rmOS#179 The button designs, while elegant, don't fit with users expectations. First, there's a sense that because the fields are perfectly square, that is a square line drawing tool. So there's hesitancy in using it, and rather people use the line tool instead. The problem is that the line tool does not create an area WKT object, and that produces non-obvious cascading user experience failures down the line (you save something that's should be an area as a line and in FarmOS it doesn't show the acreage... when you export to another service, it fails to render it as an area so the service doesn't work right, etc. etc.). I should also say this doesn't just happen sometimes... it happens a lot. So the design changes offer a few simple things to address these issues: - The main area icons (circle, poly) look filled, and poly icon is not square. All this helps inform the user that this is for creating general purpose areas, helping them not use inappropriate (ie line) solutions. - The 'modify' tool is just more obvious, showing a pointer dragging a corner. It's less elegant than the previous solution, but in our experience users need clarity over elegance in this situation. It's also very similar to the design of this type of function in other solutions, building on what users may have already seen. See previous/related issues; - farmOS#146 - farmOS#152
symbioquine · Sep 13, 2022 · f63f071 · f63f071
1 parent fbbdb4f
commit f63f071
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 5 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -6,6 +6,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+### Changed
+
+- Improve edit control icons to make them clearer and more intuitive #179 (ref: #146 #152)
+
 ## [v2.0.5] - 2022-08-29
 
 ### Changed

diff --git a/src/control/Edit/Edit.js b/src/control/Edit/Edit.js
@@ -65,35 +65,35 @@ class Edit extends Control {
     const buttons = [
       {
         name: 'polygon',
-        label: '<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"/></svg>',
+        label: '<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><g><path d="m3.5 18.47 2.65-6.74 3.65.03 2.46-6.23h8.25l-5.1 12.93z" fill="#dcdcdc" /><path d="M12.25 4c-.4 0-.77.16-1.05.45a1.55 1.55 0 0 0-.08 2.07l-1.47 3.72c-.5.05-.94.36-1.17.8h-1a1.47 1.47 0 0 0-2.38-.38 1.54 1.54 0 0 0-.08 2.06l-1.67 4.23c-.35.04-.67.2-.91.44a1.54 1.54 0 0 0 0 2.16 1.48 1.48 0 0 0 2.38-.38l9.26-.01a1.47 1.47 0 0 0 2.38.38 1.55 1.55 0 0 0 .08-2.07l4.12-10.42c.34-.04.66-.2.9-.44a1.55 1.55 0 0 0 0-2.16 1.48 1.48 0 0 0-2.38.37h-5.6A1.49 1.49 0 0 0 12.25 4zm1.33 2.23h5.6c.06.1.12.2.2.3l-4.12 10.4a1.48 1.48 0 0 0-1.18.82l-9.27.01c-.05-.1-.11-.2-.18-.28l1.67-4.23a1.5 1.5 0 0 0 1.17-.8h1c.25.5.75.84 1.33.84a1.52 1.52 0 0 0 1.13-2.53l1.47-3.71a1.5 1.5 0 0 0 1.18-.82z"/></g></svg>',
         tooltip: 'Draw a Polygon',
         draw: 'Polygon',
         element: drawButtonsDiv,
       },
       {
         name: 'line',
-        label: '<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24" viewBox="0 0 24 24" width="24"><path d="M23,8c0,1.1-0.9,2-2,2c-0.18,0-0.35-0.02-0.51-0.07l-3.56,3.55C16.98,13.64,17,13.82,17,14c0,1.1-0.9,2-2,2s-2-0.9-2-2 c0-0.18,0.02-0.36,0.07-0.52l-2.55-2.55C10.36,10.98,10.18,11,10,11s-0.36-0.02-0.52-0.07l-4.55,4.56C4.98,15.65,5,15.82,5,16 c0,1.1-0.9,2-2,2s-2-0.9-2-2s0.9-2,2-2c0.18,0,0.35,0.02,0.51,0.07l4.56-4.55C8.02,9.36,8,9.18,8,9c0-1.1,0.9-2,2-2s2,0.9,2,2 c0,0.18-0.02,0.36-0.07,0.52l2.55,2.55C14.64,12.02,14.82,12,15,12s0.36,0.02,0.52,0.07l3.55-3.56C19.02,8.35,19,8.18,19,8 c0-1.1,0.9-2,2-2S23,6.9,23,8z"/></svg>',
+        label: '<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="m20 6.0c-1.1 0-1.9 0.9-1.9 2 0 0.2 0 0.4 0.1 0.6l-3.45 3.66c-0.19-0.06-0.4-0.1-0.6-0.1s-0.39 0.03-0.6 0.1l-2.43-2.583c0.059-0.198 0.089-0.404 0.089-0.612 0-1.1266-0.861-2.04-1.923-2.04-0.51 0-0.999 0.2149-1.359 0.5975-0.361 0.3826-0.564 0.9015-0.564 1.4425 0 0.208 0.031 0.414 0.089 0.612l-4.036 4.282c-0.187-0.062-0.381-0.094-0.577-0.094-0.51 0-0.999 0.215-1.36 0.597-0.36 0.383-0.563 0.902-0.563 1.443 0 1.127 0.861 2.04 1.923 2.04s1.92-0.913 1.923-2.04c0-0.208-0.03-0.414-0.09-0.612l4.036-4.282c0.187 0.062 0.381 0.094 0.577 0.094s0.391-0.032 0.58-0.09l2.433 2.58c-0.06 0.2-0.089 0.4-0.09 0.61 0 0.541 0.203 1.06 0.56 1.44 0.36 0.383 0.85 0.6 1.36 0.6 1.062 0 1.923-0.913 1.923-2.04 0-0.21-0.03-0.414-0.09-0.6l3.45-3.66c0.187 0.062 0.381 0.093 0.576 0.093 1.06 0 1.92-0.913 1.92-2.04 0-1.127-0.9-2.04-1.92-2.04z" fill="currentColor"/></svg>',
         tooltip: 'Draw a Line',
         draw: 'LineString',
         element: drawButtonsDiv,
       },
       {
         name: 'point',
-        label: '\u2022',
+        label: '<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><circle cx="12" cy="12" r="3" stroke-width="2"/></svg>',
         tooltip: 'Draw a Point',
         draw: 'Point',
         element: drawButtonsDiv,
       },
       {
         name: 'circle',
-        label: '<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"/></svg>',
+        label: '<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><circle cx="12" cy="12" r="10" stroke-width="2.5" stroke-opacity="1" fill="#dcdcdc" stroke="currentColor" /></svg>',
         tooltip: 'Draw a Circle',
         draw: 'Circle',
         element: drawButtonsDiv,
       },
       {
         name: 'modify',
-        label: '<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24" viewBox="0 0 24 24" width="24"><path d="M 23,7 V 1 H 17 V 3 H 7 V 1 H 1 V 7 H 3 V 17 H 1 v 6 h 6 v -2 h 10 v 2 h 6 V 17 H 21 V 7 Z M 3,3 H 5 V 5 H 3 Z M 5,21 H 3 V 19 H 5 Z M 17,19 H 7 V 17 H 5 V 7 H 7 V 5 h 10 v 2 h 2 v 10 h -2 z m 4,2 h -2 v -2 h 2 z M 19,5 V 3 h 2 v 2 z"/></svg>',
+        label: '<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="m4.37 19.35 2.4-13.11 13.01-2.15v15.26Z" fill="#dcdcdc" style="stroke-width:1.5"/><g fill="currentColor"><path d="M116.96 93.6a1.09 1.09 0 0 0-.93.74l-1.4.23.16.99 1.4-.23a1.09 1.09 0 0 0 .27.27v8.07c-.2.1-.35.27-.46.46h-8.23a1.09 1.09 0 0 0-.21-.28l.2-1.09-.98-.18-.19 1.02a1.08 1.08 0 0 0 .32 2.12 1.09 1.09 0 0 0 .87-.59h8.27a1.08 1.08 0 1 0 1.41-1.4v-8.08a1.08 1.08 0 0 0-.5-2.04zm-3.32 1.13-1.97.33.16.98 1.97-.32zm-5.16.26V95c-.6 0-1.1.5-1.1 1.1 0 .34.17.65.43.86l-.31 1.68.99.18.3-1.68c.35-.1.62-.37.73-.7l1.32-.23-.16-.98-1.32.2a1.1 1.1 0 0 0-.88-.44zm-1.16 4.63-.36 1.97.98.18.37-1.96z" transform="translate(-159.58 -141.1) scale(1.5335)"/><path d="m11.6 17.79-1.19-2.14c-.05-.06-.05-.06-1.12 1l-1.07 1.03c-.03 0-.97-10.55-.97-10.63 0-.01 8.56 6.35 8.59 6.4l-1.46.38-1.48.38 1.2 2.12.05.12-1.25.68-1.26.69c-.02 0-.03 0-.05-.03zm.82-1.5.4-.22-.68-1.23-.69-1.26 1.08-.27 1.07-.3a231.68 231.68 0 0 0-5.18-3.89L9 15.6l.81-.76.8-.77.67 1.16c.76 1.37.73 1.3.74 1.3l.42-.2z"/></g><path d="M11.99 16.47a89.39 89.39 0 0 1-1.38-2.43l-.72.65a880.95 880.95 0 0 1-.87.81c-.04-.02-.07-.38-.37-3.83a101.06 101.06 0 0 1-.2-2.38v-.12l1.65 1.22c1.77 1.32 3.13 2.33 3.35 2.52l.14.1-1.08.28-1.07.3.86 1.56c.26.46.46.89.46.9 0 .03-.66.42-.72.43z" fill="#FFF"/></svg>',
         tooltip: 'Modify features',
         element: actionButtonsDiv,
       },