Skip to content

refactor: use snapshot for RnColorSetter and RnColorPad instead of css#1633

Draft
Doublonmousse wants to merge 13 commits into
flxzt:mainfrom
Doublonmousse:css_snapshot
Draft

refactor: use snapshot for RnColorSetter and RnColorPad instead of css#1633
Doublonmousse wants to merge 13 commits into
flxzt:mainfrom
Doublonmousse:css_snapshot

Conversation

@Doublonmousse

@Doublonmousse Doublonmousse commented Jan 16, 2026

Copy link
Copy Markdown
Collaborator

Screencast_20260120_202024

Uses only snapshot to render the colorsetter (or at least reduces the amount of css and makes the color render through a snapshot call, not a css color variable)

The animation is implemented with a TimedAnimation

For the colorpad, there is still some css left because of the icon light/dark mode switch (that I don't really know how to toggle programatically here)

Note that _some_ css is left because of the icon dark/light variants switch

For now color interpolation is done linearly in rgb space (do we have to do it in another space to be better ?)
@Doublonmousse Doublonmousse changed the title refactor: use snapshot for RnColorSetter instead of css refactor: use snapshot for RnColorSetter and RnColorPad instead of css Jan 17, 2026
@flxzt

flxzt commented Jan 30, 2026

Copy link
Copy Markdown
Owner

Noticing some visual differences, particularly:

  • the borders seem to be set to gray with some transparency. For comparison
    old:
    old-borders
    new:
    new-borders

  • the checkerboard in light mode:
    old:
    old-light-checkerboard
    new:
    new-light-checkerboard

Seems like you were able to re-implement everything in the snapshot function after all.
I think the css can be further reduced to the bare minimum setting the widget's size.

I don't see a difference when replacing the css with, or am I missing something?

.colorpad {
    min-width: 32px;
    min-height: 32px;
    padding: 0px;
    margin: 0px;
}


.colorsetter {
    min-width: 32px;
    min-height: 32px;
    padding: 0px;
    margin: 0px;
}

This way they stay visible even with light colors on light mode
@Doublonmousse

Copy link
Copy Markdown
Collaborator Author

I don't see a difference when replacing the css with, or am I missing something?

There still needs to be some css for the icon to switch between light/dark mode (otherwise they stay in light mode and invisible with white being selected)
Screencast_20260131_164142

Maybe there's still a little too much still there ? (I want the brightness change on hover/click to be there, transitions to register ...)

I've just tried to add some borders on the colorsetter for light mode (otherwise they aren't separated from the rest) though not necessarily happy with the results

image

And yes the checkboard pattern does not hold in light mode (not sure how to get this information from the snapshot function though to adapt things depending on the light/dark mode)

@Doublonmousse

Copy link
Copy Markdown
Collaborator Author

I can do a

            let checkboard_color = {
                match adw::StyleManager::default().color_scheme() {

to dispatch color depending on the light/dark mode but that won't update immediately, only on the next redraw ...

@Doublonmousse Doublonmousse marked this pull request as draft January 31, 2026 18:52
@Doublonmousse

Copy link
Copy Markdown
Collaborator Author
  • I've fixed the dark/light checkboard pattern (with the widget redrawing when the color scheme changes between dark/light mode)
  • WidgetExt::color seems to be able to replace the (deprecated) lookup_color("window_fg_color") call (though I've only changed it for the colorsetter/colorpad and not everywhere)

To match border radius between the internal node/border
To have rounded corners for the edges of the inside snapshot (matching the border ones)
Somehow, not doing this makes the borders disappear with the white theme.

The gtk frame recorder somehow still shows gray borders on individual nodes but not on the full overlay
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants