Yqnn / svg-path-editor

Online editor to create and manipulate SVG paths
https://yqnn.github.io/svg-path-editor/
Apache License 2.0
4.11k stars 335 forks source link

Minor UI fixes and improvements #93

Closed kuubeu closed 1 year ago

kuubeu commented 1 year ago

Optimized SVG icons

All SVG icons, excluding than the sword's path, have been optimized. In addition, the magnifier glass icons are now more legible (pixel-aligned on non-retina displays) and fit in better with other icons:

old zoom icons new zoom icons
old-zoom new-zoom

Fixed alignment issues in the PATH OPERATIONS panel

The third row now matches the previous two:

old layout (flex) new layout (grid)
old-layout new-layout

Responsive buttons in the PATH panel

Previously these buttons used text-align: center and a fixed margin for layout, so if the scrollbar was hidden, they would move towards center, increasing the margin on the sides. Now the left-aligned buttons stay in place, and only the right-aligned one moves when the scrollbar appears.

Additionally, the shadows cast by the buttons were clipped by overflow: hidden. Now this rule is only applied during animation, so the shadows are fully visible when the panel is expanded.

old buttons new buttons
old--scrollbar-visible new--scrollbar-visible
old--scrollbar-hidden new--scrollbar-hidden

Various Firefox fixes

old new
ff-old ff-new
ff-scrollbar-old ff-scrollbar-new