From 9c4f1ec086bd001409a9e47f359c27b8c71e9acb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?H=C3=A9ctor=20Ram=C3=B3n=20Jim=C3=A9nez?= Date: Mon, 1 Dec 2025 21:19:44 +0100 Subject: [PATCH] Add `padding_ratio` to `toggler::Style` Co-authored-by: B0ney <40839054+B0ney@users.noreply.github.com> --- .../catppuccin_frappé-tiny-skia.sha256 | 2 +- .../catppuccin_latte-tiny-skia.sha256 | 2 +- .../catppuccin_macchiato-tiny-skia.sha256 | 2 +- .../catppuccin_mocha-tiny-skia.sha256 | 2 +- .../styling/snapshots/dark-tiny-skia.sha256 | 2 +- .../snapshots/dracula-tiny-skia.sha256 | 2 +- .../styling/snapshots/ferra-tiny-skia.sha256 | 2 +- .../snapshots/gruvbox_dark-tiny-skia.sha256 | 2 +- .../snapshots/gruvbox_light-tiny-skia.sha256 | 2 +- .../kanagawa_dragon-tiny-skia.sha256 | 2 +- .../snapshots/kanagawa_lotus-tiny-skia.sha256 | 2 +- .../snapshots/kanagawa_wave-tiny-skia.sha256 | 2 +- .../styling/snapshots/light-tiny-skia.sha256 | 2 +- .../snapshots/moonfly-tiny-skia.sha256 | 2 +- .../snapshots/nightfly-tiny-skia.sha256 | 2 +- .../styling/snapshots/nord-tiny-skia.sha256 | 2 +- .../snapshots/oxocarbon-tiny-skia.sha256 | 2 +- .../snapshots/solarized_dark-tiny-skia.sha256 | 2 +- .../solarized_light-tiny-skia.sha256 | 2 +- .../snapshots/tokyo_night-tiny-skia.sha256 | 2 +- .../tokyo_night_light-tiny-skia.sha256 | 2 +- .../tokyo_night_storm-tiny-skia.sha256 | 2 +- widget/src/toggler.rs | 28 +++++++------------ 23 files changed, 32 insertions(+), 40 deletions(-) diff --git a/examples/styling/snapshots/catppuccin_frappé-tiny-skia.sha256 b/examples/styling/snapshots/catppuccin_frappé-tiny-skia.sha256 index c7a8077d..4f934e9b 100644 --- a/examples/styling/snapshots/catppuccin_frappé-tiny-skia.sha256 +++ b/examples/styling/snapshots/catppuccin_frappé-tiny-skia.sha256 @@ -1 +1 @@ -129523830df064908cfa911214ba61dadc31d8975425ba3efaae69da9514a3d0 \ No newline at end of file +7cf23dfdb87c64e236f8d91fc7dbe67a246461ab777faa1818870d092f90bfe4 \ No newline at end of file diff --git a/examples/styling/snapshots/catppuccin_latte-tiny-skia.sha256 b/examples/styling/snapshots/catppuccin_latte-tiny-skia.sha256 index f7b72157..41a04c56 100644 --- a/examples/styling/snapshots/catppuccin_latte-tiny-skia.sha256 +++ b/examples/styling/snapshots/catppuccin_latte-tiny-skia.sha256 @@ -1 +1 @@ -ae1da92064373838152ac163072ee68135f530e0fef8146a01aea1df5cfdb494 \ No newline at end of file +7918dd40bdc65fb6e76026a4c1bd0f687ae3e14f01ce00788f0b8d8d54d166e9 \ No newline at end of file diff --git a/examples/styling/snapshots/catppuccin_macchiato-tiny-skia.sha256 b/examples/styling/snapshots/catppuccin_macchiato-tiny-skia.sha256 index e5900859..5c7dff29 100644 --- a/examples/styling/snapshots/catppuccin_macchiato-tiny-skia.sha256 +++ b/examples/styling/snapshots/catppuccin_macchiato-tiny-skia.sha256 @@ -1 +1 @@ -8466dc0975c0bc7c06ed3c45df51e99b9d384394f8c3689b15231a872ba1262f \ No newline at end of file +195df7439f1c8349ed38e05c887f887d71c8a0ea75d7c8a067470f2c46e4ad2f \ No newline at end of file diff --git a/examples/styling/snapshots/catppuccin_mocha-tiny-skia.sha256 b/examples/styling/snapshots/catppuccin_mocha-tiny-skia.sha256 index c20f8b1a..815ce2bb 100644 --- a/examples/styling/snapshots/catppuccin_mocha-tiny-skia.sha256 +++ b/examples/styling/snapshots/catppuccin_mocha-tiny-skia.sha256 @@ -1 +1 @@ -1c8f13cfb5d0bbbeb24b80ed35671e8a93d208d79ac4dbd069fe65c4a53c50c2 \ No newline at end of file +83e4858c50f6b16511b500135fece1b5006a83d9686b3cda81a46750dc89a606 \ No newline at end of file diff --git a/examples/styling/snapshots/dark-tiny-skia.sha256 b/examples/styling/snapshots/dark-tiny-skia.sha256 index e5fc3bc2..1737899a 100644 --- a/examples/styling/snapshots/dark-tiny-skia.sha256 +++ b/examples/styling/snapshots/dark-tiny-skia.sha256 @@ -1 +1 @@ -a1d30652db2cce98b5b86e8e29d776e2fc9091056aff8861cd54fa061161ed47 \ No newline at end of file +851e394c1b844c1e884cfa576a9b3d6f4c8b2678b8f3923043ed7a987353214b \ No newline at end of file diff --git a/examples/styling/snapshots/dracula-tiny-skia.sha256 b/examples/styling/snapshots/dracula-tiny-skia.sha256 index e55502f3..8a74eb63 100644 --- a/examples/styling/snapshots/dracula-tiny-skia.sha256 +++ b/examples/styling/snapshots/dracula-tiny-skia.sha256 @@ -1 +1 @@ -8c01615169803510f1cd4d051721b415adc7147672238aff1275fa3741edb507 \ No newline at end of file +3f8c0cd293df84b50a578a556c8e6e96fa0cf5d110cd7872ae911305cb29e985 \ No newline at end of file diff --git a/examples/styling/snapshots/ferra-tiny-skia.sha256 b/examples/styling/snapshots/ferra-tiny-skia.sha256 index 611cf302..58b3759f 100644 --- a/examples/styling/snapshots/ferra-tiny-skia.sha256 +++ b/examples/styling/snapshots/ferra-tiny-skia.sha256 @@ -1 +1 @@ -0b10823a1d218c145214ff2dcf751584669a3ca1d3e777a2cd618479a809523e \ No newline at end of file +5e0e2655abcc348bb15106ad9100e096c81a316cbf41c39ba04b3f34fb1bcf63 \ No newline at end of file diff --git a/examples/styling/snapshots/gruvbox_dark-tiny-skia.sha256 b/examples/styling/snapshots/gruvbox_dark-tiny-skia.sha256 index 11614eea..9f1aeb9e 100644 --- a/examples/styling/snapshots/gruvbox_dark-tiny-skia.sha256 +++ b/examples/styling/snapshots/gruvbox_dark-tiny-skia.sha256 @@ -1 +1 @@ -26bc668c55650c6c25a14f76feeb1d1f78a96835aaac7a5f57b48b838cb28b14 \ No newline at end of file +13e629c56135397d5b3c7a0b3286de76907e04a8ee68c85767f9aa02bd16d550 \ No newline at end of file diff --git a/examples/styling/snapshots/gruvbox_light-tiny-skia.sha256 b/examples/styling/snapshots/gruvbox_light-tiny-skia.sha256 index a4ed62b2..d77246b7 100644 --- a/examples/styling/snapshots/gruvbox_light-tiny-skia.sha256 +++ b/examples/styling/snapshots/gruvbox_light-tiny-skia.sha256 @@ -1 +1 @@ -228eb8d64eed2f3726d27490b88a4519e36979a0ccfb0db8e164c5e5296b0739 \ No newline at end of file +448621d2599ee2bc17df4cfc59f276af511b698ea9b06a895328215572462a28 \ No newline at end of file diff --git a/examples/styling/snapshots/kanagawa_dragon-tiny-skia.sha256 b/examples/styling/snapshots/kanagawa_dragon-tiny-skia.sha256 index 94daa9f4..68196620 100644 --- a/examples/styling/snapshots/kanagawa_dragon-tiny-skia.sha256 +++ b/examples/styling/snapshots/kanagawa_dragon-tiny-skia.sha256 @@ -1 +1 @@ -d579b14db1650e907f925302f23c53ebaba370aef6410cfa48fef70ab3138d1f \ No newline at end of file +72c0c197d921536d05674bed1558f669c6780b5bd3b9229185e72f823d2b96d0 \ No newline at end of file diff --git a/examples/styling/snapshots/kanagawa_lotus-tiny-skia.sha256 b/examples/styling/snapshots/kanagawa_lotus-tiny-skia.sha256 index d17b3745..60406a70 100644 --- a/examples/styling/snapshots/kanagawa_lotus-tiny-skia.sha256 +++ b/examples/styling/snapshots/kanagawa_lotus-tiny-skia.sha256 @@ -1 +1 @@ -896072b46221f83e1edaa37574436af6474969625f5c1a41cc5ddc2e20823cee \ No newline at end of file +3d083a21b0e9e0c2776639b5f54b532b55f5ec0da5798597541f300fd0e66ff6 \ No newline at end of file diff --git a/examples/styling/snapshots/kanagawa_wave-tiny-skia.sha256 b/examples/styling/snapshots/kanagawa_wave-tiny-skia.sha256 index b7530850..fe485a5a 100644 --- a/examples/styling/snapshots/kanagawa_wave-tiny-skia.sha256 +++ b/examples/styling/snapshots/kanagawa_wave-tiny-skia.sha256 @@ -1 +1 @@ -60e1c95159caddb8bd7b8360e32ffd75472be37c4fcbd8ad23dabd0d000a4ec1 \ No newline at end of file +b65edbd879d7dc8a31392e49ea5dc98332c321d581155d3d6365c5cdc24a00cb \ No newline at end of file diff --git a/examples/styling/snapshots/light-tiny-skia.sha256 b/examples/styling/snapshots/light-tiny-skia.sha256 index aea0e467..320ec898 100644 --- a/examples/styling/snapshots/light-tiny-skia.sha256 +++ b/examples/styling/snapshots/light-tiny-skia.sha256 @@ -1 +1 @@ -2e3c4ea86b5bd968b8ec77a7ec7b5b7ae29d5ee8e4b68a216c1fa11d92c015bc \ No newline at end of file +efb40f7991b2c661cd275d178cfe98c5a6cc38aba2470e15e61f23946dcf3297 \ No newline at end of file diff --git a/examples/styling/snapshots/moonfly-tiny-skia.sha256 b/examples/styling/snapshots/moonfly-tiny-skia.sha256 index c67427a3..f59c05bf 100644 --- a/examples/styling/snapshots/moonfly-tiny-skia.sha256 +++ b/examples/styling/snapshots/moonfly-tiny-skia.sha256 @@ -1 +1 @@ -79ffced2a78689bac1a40ab154a478b4fff87154ee4a8bbf023d922c86b7d53b \ No newline at end of file +6c51c21eaad4f2ede0d8d59b9783941f6a60e8c46a65c87c9ddd685665a76d70 \ No newline at end of file diff --git a/examples/styling/snapshots/nightfly-tiny-skia.sha256 b/examples/styling/snapshots/nightfly-tiny-skia.sha256 index ad8fc9cb..3141035d 100644 --- a/examples/styling/snapshots/nightfly-tiny-skia.sha256 +++ b/examples/styling/snapshots/nightfly-tiny-skia.sha256 @@ -1 +1 @@ -17c632cbef607502ed2c438f409a1c9bee382d9084c38772021f1f2a4ad3908c \ No newline at end of file +f8325c2018c3e0090d06c6728715172776a3b99fb19687c946c05a8ab0cac063 \ No newline at end of file diff --git a/examples/styling/snapshots/nord-tiny-skia.sha256 b/examples/styling/snapshots/nord-tiny-skia.sha256 index 9e373c8e..6b138c00 100644 --- a/examples/styling/snapshots/nord-tiny-skia.sha256 +++ b/examples/styling/snapshots/nord-tiny-skia.sha256 @@ -1 +1 @@ -359f7f2c1d7f87e6e0eb80a9a28f70f033d6321ba028d32bc372030b718ed481 \ No newline at end of file +d5fdefd04dd2df542979f2c5b97cf5ce391f8425e78f0404c19d2030eebd7cce \ No newline at end of file diff --git a/examples/styling/snapshots/oxocarbon-tiny-skia.sha256 b/examples/styling/snapshots/oxocarbon-tiny-skia.sha256 index b2afc484..b4bf237c 100644 --- a/examples/styling/snapshots/oxocarbon-tiny-skia.sha256 +++ b/examples/styling/snapshots/oxocarbon-tiny-skia.sha256 @@ -1 +1 @@ -a908d8f154f2baf67455380b5d8b39003c08ba0c80f39e71d4bcd2377bc784fc \ No newline at end of file +bd793d25333dac020156f134bb6083dc90a75b9d35e3f2f1a89de8d2cc2f041c \ No newline at end of file diff --git a/examples/styling/snapshots/solarized_dark-tiny-skia.sha256 b/examples/styling/snapshots/solarized_dark-tiny-skia.sha256 index 6075ad58..6ac958ed 100644 --- a/examples/styling/snapshots/solarized_dark-tiny-skia.sha256 +++ b/examples/styling/snapshots/solarized_dark-tiny-skia.sha256 @@ -1 +1 @@ -8d6c2bab1f6e9a8db1e2acc8eb76334170e046b709a36dd4ad4d86f8d47346a4 \ No newline at end of file +b248bf0e9c9aab25d195d6bca8e562ee404b8e523a8276a3aa7fcf0bbc9568d5 \ No newline at end of file diff --git a/examples/styling/snapshots/solarized_light-tiny-skia.sha256 b/examples/styling/snapshots/solarized_light-tiny-skia.sha256 index 5862204a..19f1ca19 100644 --- a/examples/styling/snapshots/solarized_light-tiny-skia.sha256 +++ b/examples/styling/snapshots/solarized_light-tiny-skia.sha256 @@ -1 +1 @@ -2010df2e80bfc72e7e9274de07b77dc4843485f6be38266fdfb7a4f129d75da1 \ No newline at end of file +3a5bccf7e3af21411abb97ee286f7b489d26b1a3bf97a274fdc8cc8931584c12 \ No newline at end of file diff --git a/examples/styling/snapshots/tokyo_night-tiny-skia.sha256 b/examples/styling/snapshots/tokyo_night-tiny-skia.sha256 index e3bab4b1..25231514 100644 --- a/examples/styling/snapshots/tokyo_night-tiny-skia.sha256 +++ b/examples/styling/snapshots/tokyo_night-tiny-skia.sha256 @@ -1 +1 @@ -74812d50467787ce39a33ad6bc89411d7b8bc0b13e1bbd45838fcc27c75aee98 \ No newline at end of file +b58b131746a626f2394b8c250b43240519822303147971bcdcb96f9613e68604 \ No newline at end of file diff --git a/examples/styling/snapshots/tokyo_night_light-tiny-skia.sha256 b/examples/styling/snapshots/tokyo_night_light-tiny-skia.sha256 index d533a94c..0bb3b9c9 100644 --- a/examples/styling/snapshots/tokyo_night_light-tiny-skia.sha256 +++ b/examples/styling/snapshots/tokyo_night_light-tiny-skia.sha256 @@ -1 +1 @@ -b04218ee65cd446b142596a2cd9ff69d5267969af86026a4ff394f3c13a4d842 \ No newline at end of file +3e9e66a4aceb32e0eee7b731183af8dd581aebf3d01b62fdb7ed6df9092b33fd \ No newline at end of file diff --git a/examples/styling/snapshots/tokyo_night_storm-tiny-skia.sha256 b/examples/styling/snapshots/tokyo_night_storm-tiny-skia.sha256 index 84c3f058..a614fe00 100644 --- a/examples/styling/snapshots/tokyo_night_storm-tiny-skia.sha256 +++ b/examples/styling/snapshots/tokyo_night_storm-tiny-skia.sha256 @@ -1 +1 @@ -e1cbe8742f000921c86924056e9a45f95ee2a2a973743bf9f37fee65baccfb9b \ No newline at end of file +e8d4f1c2569cdc4a14ba20b774e2a19fab716b3e4e39dd4e08b4c3ac572389f1 \ No newline at end of file diff --git a/widget/src/toggler.rs b/widget/src/toggler.rs index 33406a50..29ce9184 100644 --- a/widget/src/toggler.rs +++ b/widget/src/toggler.rs @@ -396,10 +396,6 @@ where _cursor: mouse::Cursor, viewport: &Rectangle, ) { - /// The space ratio between the background Quad and the Toggler bounds, and - /// between the background Quad and foreground Quad. - const SPACE_RATIO: f32 = 0.05; - let mut children = layout.children(); let toggler_layout = children.next().unwrap(); @@ -431,18 +427,10 @@ where let border_radius = style .border_radius .unwrap_or_else(|| border::Radius::new(bounds.height / 2.0)); - let space = (SPACE_RATIO * bounds.height).round(); - - let toggler_background_bounds = Rectangle { - x: bounds.x + space, - y: bounds.y + space, - width: bounds.width - (2.0 * space), - height: bounds.height - (2.0 * space), - }; renderer.fill_quad( renderer::Quad { - bounds: toggler_background_bounds, + bounds, border: Border { radius: border_radius, width: style.background_border_width, @@ -453,16 +441,17 @@ where style.background, ); + let padding = (style.padding_ratio * bounds.height).round(); let toggler_foreground_bounds = Rectangle { x: bounds.x + if self.is_toggled { - bounds.width - 2.0 * space - (bounds.height - (4.0 * space)) + bounds.width - bounds.height + padding } else { - 2.0 * space + padding }, - y: bounds.y + (2.0 * space), - width: bounds.height - (4.0 * space), - height: bounds.height - (4.0 * space), + y: bounds.y + padding, + width: bounds.height - (2.0 * padding), + height: bounds.height - (2.0 * padding), }; renderer.fill_quad( @@ -535,6 +524,8 @@ pub struct Style { /// /// If `None`, the toggler will be perfectly round. pub border_radius: Option, + /// The ratio of separation between the background and the toggle in relative height. + pub padding_ratio: f32, } /// The theme catalog of a [`Toggler`]. @@ -617,5 +608,6 @@ pub fn default(theme: &Theme, status: Status) -> Style { background_border_color: Color::TRANSPARENT, text_color: None, border_radius: None, + padding_ratio: 0.1, } }