iD/svg/iD-sprite at f356c6ac49c19980d5a8a16ba4eaa6de2e2ed4fa - iD

mirror of https://github.com/FoggedLens/iD.git synced 2026-05-23 16:49:40 +02:00

Files

T

Quincy Morgan a0b0337ab4 - The sidebar can be now be resized by dragging the divider (closes #3447 )

- Dragging the sidebar below a minimum size collapses it
- A button in the top toolbar lets you uncollapse the sidebar, complete with icon and tooltip
- Double-clicking the divider toggles the sidebar collapse
- Collapse-toggling is animated
- Selecting a feature or ending an add-feature mode auto-opens the sidebar
- Photoviewer UI has been moved from init.js to photoviewer.js
- The photoviewer now has a slight margin to set it away from the sidebar
- The undo/redo, save, and progress indicator controls are now floated to the right
- The save count has been redesigned to visually integrate with the save button
- When the sidebar is collapsed, the mode buttons are centered
- Full right-to-left layout support for all of the above

2018-10-27 17:05:50 -07:00

graphics

Fix fills for preset icons, remove iD sprite and idraw files

2018-06-08 23:10:07 -04:00

icons

- The sidebar can be now be resized by dragging the divider (closes #3447 )

2018-10-27 17:05:50 -07:00

operations

Cleanups to Detach Node feature

2018-07-23 13:36:34 -04:00

presets

Adds the Underground Power Cable Preset (closes #5380 )

2018-10-07 11:05:31 -07:00

turns

Fix shadow colors on restriction editor help svgs

2018-08-25 21:23:27 -04:00

README.md

Extract all graphics from iD sprite, reassemble with svg-sprite

2018-06-08 16:06:46 -04:00

README.md

These folders contain graphics used by iD.

Overview

To add a graphic, create a .svg file and save it anywhere under here.

Some guidelines:

icons/: 20x20px solid fill-only, used throughout iD
operations/: 20x20px solid fill-only, used as commands
presets/: 60x60px large preset icons
turns/: various sizes, graphics for turn restrictions
graphics/: miscellaneous stuff

Controlling colors with CSS

We often use CSS to override the fill colors of the graphics. In your SVG graphics, you can allow up to two override-able colors by using the following magic color values:

fill="currentColor"
fill="inherit"

For example, in operation-reflect-long.svg:

<svg version="1.1" x="0" y="0" width="20" height="20" viewBox="0 0 20 20">
    <path d="M9,18 L11,18 L11,2 L9,2 L9,18 z" fill="currentColor"/>
    <path d="M13,14 L13,6 L18,6 L18,8 L15,8 L15,14 M5,14 L5,8 L2,8 L2,6 L7,6 L7,14" fill="inherit"/>
</svg>

Elsewhere, in CSS:

.flash-icon.operation use {
    fill: #222;     /* overrides the `inherit` */
    color: #79f;    /* overrides the `currentColor` */
}
.flash-icon.operation.disabled use {
    fill: rgba(32,32,32,0.7);       /* overrides the `inherit` */
    color: rgba(40,40,40,0.7);      /* overrides the `currentColor` */
}

This gives iD a lot of flexibility to control the runtime styling of the graphics.

The above example means that classing a button as .disabled will automatically grey out the colors (you don't need to make separate grey versions of every button).