Add setting to toggle display of ornaments, with hover to preview opposite state #11596
Conversation
Debating whether this shouldn't even be included and should just not swap icons at all when reduced-motion. |
FlaminSarge
force-pushed
the
ornaments
branch
from
18e47d0 to
c6f2b98
Compare
|
Also this does reduce the visual intensity of the masterwork glow for ornamented exotics since it draws behind the icon if it has an ornament, I believe (due to the whole background/foreground thing being skipped in the !animatedBackground && !altIcon block). Also tested on mobile, does work with the long-press, since that triggers hover and we don't have anything hooked up to long-press on DIM. |
FlaminSarge
force-pushed
the
ornaments
branch
from
c6f2b98 to
165bfdd
Compare
| (i) => i !== exampleArmor && i.bucket.inArmor && i.isExotic && i.ornamentIconDef, | ||
| ) || allItems.find((i) => i !== exampleArmor && i.ornamentIconDef); |
There was a problem hiding this comment.
Note that this prefers an ornamented exotic armor example before finding any example item.
In sheets like the pull item sheet, we do use long press to activate the item popup. I'm not worried about it. |
| display: none; | ||
| display: block; | ||
| transition: opacity 0.2s ease-out; | ||
| opacity: 0; |
There was a problem hiding this comment.
One thing to test would be whether all browsers correctly remove the layer (and stop the animation) when opacity is 0. My guess is they don't, and it actually might be incorrect to do so. If that's the case, the animated images may cost CPU even when hidden. To fix that you'd have to use an animation that flips display and then faded opacity.
There was a problem hiding this comment.
I'm hoping that the content-visibility setup handles this, let me know if it's being used correctly.
FlaminSarge
force-pushed
the
ornaments
branch
from
2331f89 to
76ec839
Compare
|
(Planning to rebase and squash this once it's ready) |
Hovering (or long-pressing on mobile) will flip the icon to whatever isn't being displayed (ornament if setting is off, base icon if setting is on).
Setting uses 'all'/'none' instead of boolean so that if in the future we want to expand the setting to only weapons/armor/exotics/etc. we can use the same setting.
This also adds a slight transition for the shiny background animation so it's not as abrupt when it is hovered.
Reduced motion setting is honored and does not include the 0.2s transition, just instantly changing the icon instead.
base_feature.mov
reduced_motion.mov
shiny_background.mov
Changelog: Add setting to toggle display of ornaments