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

symbioquine commented 1 year ago

Motivation

Ref: https://github.com/farmOS/farmOS-map/pull/152#issuecomment-1111076643

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

Before:

After:

Build output before:

$ npm run build

> @farmos.org/farmos-map@2.0.5 build
> npm run lint && webpack --config webpack.config.js --mode production

> @farmos.org/farmos-map@2.0.5 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/farmos-map@2.0.5 build
> npm run lint && webpack --config webpack.config.js --mode production

> @farmos.org/farmos-map@2.0.5 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

symbioquine commented 1 year ago

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

symbioquine commented 1 year ago

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 commented 1 year ago

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.