From f63f07113651ae02309b7bec997d3bce080a47b6 Mon Sep 17 00:00:00 2001 From: gbathree Date: Sun, 27 Mar 2022 12:41:46 -0400 Subject: [PATCH] Improve edit control icons to make them clearer and more intuitive #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; - #146 - #152 --- CHANGELOG.md | 4 ++++ src/control/Edit/Edit.js | 10 +++++----- 2 files changed, 9 insertions(+), 5 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index c43a9f7..5d5d88a 100644 --- 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 index a1b5086..e1b7c28 100644 --- 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: '', + label: '', tooltip: 'Draw a Polygon', draw: 'Polygon', element: drawButtonsDiv, }, { name: 'line', - label: '', + label: '', tooltip: 'Draw a Line', draw: 'LineString', element: drawButtonsDiv, }, { name: 'point', - label: '\u2022', + label: '', tooltip: 'Draw a Point', draw: 'Point', element: drawButtonsDiv, }, { name: 'circle', - label: '', + label: '', tooltip: 'Draw a Circle', draw: 'Circle', element: drawButtonsDiv, }, { name: 'modify', - label: '', + label: '', tooltip: 'Modify features', element: actionButtonsDiv, },