Improve edit control icons to make them clearer and more intuitive #179

[symbioquine]

Motivation

Ref: #152 (comment)

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;

• Improve the map icon svgs #146
• Update map button SVGs #152

Before:

After:

Build output before:

$ npm run build

> @farmos.org/[email protected] build
> npm run lint && webpack --config webpack.config.js --mode production


> @farmos.org/[email protected] lint
> eslint src && stylelint 'src/**/*.css'

assets by status 86.8 KiB [cached] 17 assets
assets by status 463 KiB [compared for emit]
  assets by path *.js 441 KiB
    asset farmOS-map.js 429 KiB [compared for emit] [minimized] [big] (name: main) 1 related asset
    asset mapbox.js 12.7 KiB [compared for emit] [from: examples/simple-html-consumer/static/mapbox.js] [copied] [minimized]
  asset farmOS-map.css 19.9 KiB [compared for emit] (name: main)
  asset index.html 1.42 KiB [compared for emit] [from: examples/simple-html-consumer/static/index.html] [copied]
Entrypoint main [big] 449 KiB = farmOS-map.css 19.9 KiB farmOS-map.js 429 KiB
orphan modules 1.07 MiB [orphan] 141 modules
runtime modules 9.96 KiB 12 modules
code generated modules 1.87 MiB (javascript) 30.3 KiB (css/mini-extract) [code generated]
  modules by path ./node_modules/ol/ 1.12 MiB (javascript) 5.08 KiB (css/mini-extract) 107 modules
  modules by path ./src/ 691 KiB (javascript) 4.43 KiB (css/mini-extract) 22 modules
  modules by path ./node_modules/ol-layerswitcher/dist/ 26.6 KiB (javascript) 5.06 KiB (css/mini-extract) 2 modules
  modules by path ./node_modules/ol-geocoder/dist/ 16.8 KiB (javascript) 6.99 KiB (css/mini-extract) 2 modules
  modules by path ./node_modules/ol-popup/ 6.18 KiB (javascript) 1.09 KiB (css/mini-extract) 2 modules
  modules by path ./node_modules/ol-side-panel/ 7.65 KiB
    css ./node_modules/css-loader/dist/cjs.js!./node_modules/ol-side-panel/dist/ol-side-panel.css 3.82 KiB [code generated]
    css ./node_modules/css-loader/dist/cjs.js!./node_modules/ol-side-panel/src/SidePanel.css 3.82 KiB [code generated]
  ./node_modules/bootstrap-icons/icons/layers-half.svg 386 bytes [built] [code generated]
  ./node_modules/rbush/rbush.min.js 6.31 KiB [built] [code generated]
  ./node_modules/ol-grid/dist/ol-grid.cjs.js 14.6 KiB [built] [code generated]
webpack 5.38.1 compiled successfully in 5033 ms

Build output after:

$ npm run build

> @farmos.org/[email protected] build
> npm run lint && webpack --config webpack.config.js --mode production


> @farmos.org/[email protected] lint
> eslint src && stylelint 'src/**/*.css'

assets by status 78 KiB [cached] 16 assets
assets by path . 473 KiB
  assets by path *.js 452 KiB
    asset farmOS-map.js 429 KiB [emitted] [compared for emit] [minimized] [big] (name: main) 1 related asset
    asset mapbox.js 12.7 KiB [compared for emit] [from: examples/simple-html-consumer/static/mapbox.js] [copied] [minimized]
    asset farmOS-map-chunk-4667dd4e1cfaec78d846.js 10.7 KiB [emitted] [immutable] [minimized] (name: farmOS-map-behavior-edit)
  asset farmOS-map.css 19.9 KiB [compared for emit] (name: main)
  asset index.html 1.42 KiB [compared for emit] [from: examples/simple-html-consumer/static/index.html] [copied]
Entrypoint main [big] 449 KiB = farmOS-map.css 19.9 KiB farmOS-map.js 429 KiB
orphan modules 1.07 MiB [orphan] 141 modules
runtime modules 9.96 KiB 12 modules
code generated modules 1.87 MiB (javascript) 30.3 KiB (css/mini-extract) [code generated]
  modules by path ./node_modules/ol/ 1.12 MiB (javascript) 5.08 KiB (css/mini-extract) 107 modules
  modules by path ./src/ 693 KiB (javascript) 4.43 KiB (css/mini-extract) 22 modules
  modules by path ./node_modules/ol-layerswitcher/dist/ 26.6 KiB (javascript) 5.06 KiB (css/mini-extract) 2 modules
  modules by path ./node_modules/ol-geocoder/dist/ 16.8 KiB (javascript) 6.99 KiB (css/mini-extract) 2 modules
  modules by path ./node_modules/ol-popup/ 6.18 KiB (javascript) 1.09 KiB (css/mini-extract) 2 modules
  modules by path ./node_modules/ol-side-panel/ 7.65 KiB
    css ./node_modules/css-loader/dist/cjs.js!./node_modules/ol-side-panel/dist/ol-side-panel.css 3.82 KiB [code generated]
    css ./node_modules/css-loader/dist/cjs.js!./node_modules/ol-side-panel/src/SidePanel.css 3.82 KiB [code generated]
  ./node_modules/bootstrap-icons/icons/layers-half.svg 386 bytes [built] [code generated]
  ./node_modules/rbush/rbush.min.js 6.31 KiB [built] [code generated]
  ./node_modules/ol-grid/dist/ol-grid.cjs.js 14.6 KiB [built] [code generated]
webpack 5.38.1 compiled successfully in 4833 ms

[mstenta]

Super excited to see this coming together!! Thanks @symbioquine and @gbathree for working on it!

Just a few questions/concerns... see my inline comments below...

[symbioquine]

For future reference my process for standardizing/minifying the svg icons @gbathree provided was as follows;

• Save the svg as a file
• Open with Inkscape
• Set the document size to 24x24 px
• Scale the vectors so they look good within that document size
• Remove any visually irrelevant extra paths
• Group the paths as much as possible by selecting them with the path tool and choosing path -> union from the menus
• Use Extensions -> Modify Path -> To Absolute on each path (not sure how much this was necessary)
• Use Extensions -> Modify Path -> Apply Transform on each path
• Export as plain svg to a new file
• Copy the markup from that file into SVGOMG
• In SVGOMG zoom in play with options until computed filesize is as small as possible without affecting visual quality too much
• Copy svg markup back to source as a single line
• Replace opening svg tag with <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
• Replace path fill/stroke color that we want to be green (by default) with stroke="currentColor" (only needed when a different fill color is also used)
• Manually remove unnecessary svg markup that SVGOMG didn't know it could remove - e.g. stroke-linecap="round" stroke-linejoin="round", style="-inkscape-stroke:none", unused fill colors and stroke widths, etc

[paul121]

Great improvement! I think @mstenta caught more than I would have noticed 😁

Assuming the colors work when in farmOS/gin theme then I think this is good to go. Just make sure to change the Gin accent color and see that it updates the map. I think our green colors are similar so it might be hard to notice this otherwise.

[symbioquine]

Just make sure to change the Gin accent color and see that it updates the map. I think our green colors are similar so it might be hard to notice this otherwise.

Good point! Thanks!

[symbioquine]

The force-pushed changes do the following;

• The first commit now only updates the polygon, circle, and edit icons - line and point are left unchanged.
• The first commit is updated such that the polygon icon uses fill="currentColor" on the border path so that it will use the page color scheme like the other new icons.
• The new second commit fixes the line, move and delete icons to use fill="currentColor" so they too will use the page color scheme.

Current HEAD (without these changes):

New Version:

[mstenta]

LGTM! Thanks @symbioquine!!