Ensure disabled buttons don't have interaction styles

Nate Butler created 2 years ago

Change summary

crates/theme2/src/one_themes.rs                 |  4 ++--
crates/ui2/src/components/button/button_like.rs | 16 ++++++++++++++--
2 files changed, 16 insertions(+), 4 deletions(-)

Detailed changes

crates/theme2/src/one_themes.rs

@@ -52,13 +52,13 @@ pub(crate) fn one_dark() -> Theme {
                 element_hover: hsla(225.0 / 360., 11.8 / 100., 26.7 / 100., 1.0),
                 element_active: hsla(220.0 / 360., 11.8 / 100., 20.0 / 100., 1.0),
                 element_selected: hsla(224.0 / 360., 11.3 / 100., 26.1 / 100., 1.0),
-                element_disabled: hsla(224.0 / 360., 11.3 / 100., 26.1 / 100., 1.0),
+                element_disabled: SystemColors::default().transparent,
                 drop_target_background: hsla(220.0 / 360., 8.3 / 100., 21.4 / 100., 1.0),
                 ghost_element_background: SystemColors::default().transparent,
                 ghost_element_hover: hsla(225.0 / 360., 11.8 / 100., 26.7 / 100., 1.0),
                 ghost_element_active: hsla(220.0 / 360., 11.8 / 100., 20.0 / 100., 1.0),
                 ghost_element_selected: hsla(224.0 / 360., 11.3 / 100., 26.1 / 100., 1.0),
-                ghost_element_disabled: hsla(224.0 / 360., 11.3 / 100., 26.1 / 100., 1.0),
+                ghost_element_disabled: SystemColors::default().transparent,
                 text: hsla(221. / 360., 11. / 100., 86. / 100., 1.0),
                 text_muted: hsla(218.0 / 360., 7. / 100., 46. / 100., 1.0),
                 text_placeholder: hsla(220.0 / 360., 6.6 / 100., 44.5 / 100., 1.0),

crates/ui2/src/components/button/button_like.rs

@@ -327,8 +327,20 @@ impl RenderOnce for ButtonLike {
             .gap_1()
             .px_1()
             .bg(self.style.enabled(cx).background)
-            .hover(|hover| hover.bg(self.style.hovered(cx).background))
-            .active(|active| active.bg(self.style.active(cx).background))
+            .hover(|hover| {
+                hover.bg(if self.disabled {
+                    self.style.disabled(cx).background
+                } else {
+                    self.style.hovered(cx).background
+                })
+            })
+            .active(|active| {
+                active.bg(if self.disabled {
+                    self.style.disabled(cx).background
+                } else {
+                    self.style.active(cx).background
+                })
+            })
             .when_some(
                 self.on_click.filter(|_| !self.disabled),
                 |this, on_click| {