From 119f13711c6ae354f0670038cf44241d87b3308a Mon Sep 17 00:00:00 2001 From: mkpaz Date: Tue, 30 May 2023 13:27:31 +0400 Subject: [PATCH] Support disabled state for Tile-based controls --- .../sampler/page/components/NotificationPage.java | 5 ++++- styles/src/components/_card.scss | 12 ++++++++++++ styles/src/components/_message.scss | 14 ++++++++++++++ styles/src/components/_tile.scss | 14 +++++++++++++- 4 files changed, 43 insertions(+), 2 deletions(-) diff --git a/sampler/src/main/java/atlantafx/sampler/page/components/NotificationPage.java b/sampler/src/main/java/atlantafx/sampler/page/components/NotificationPage.java index f5d7c20..dc24fd9 100644 --- a/sampler/src/main/java/atlantafx/sampler/page/components/NotificationPage.java +++ b/sampler/src/main/java/atlantafx/sampler/page/components/NotificationPage.java @@ -194,7 +194,10 @@ public class NotificationPage extends OutlinePage { you can easily implement it by using the [i]StackPane[/i] layout.""" ); - return new ExampleBox(box, new Snippet(getClass(), 4), description); + var example = new ExampleBox(box, new Snippet(getClass(), 4), description); + example.setAllowDisable(false); + + return example; } private Node elevationExample() { diff --git a/styles/src/components/_card.scss b/styles/src/components/_card.scss index dd1b942..c81337d 100644 --- a/styles/src/components/_card.scss +++ b/styles/src/components/_card.scss @@ -52,11 +52,23 @@ $title-font-size: cfg.$font-title-4; &.interactive:hover { @include effects.shadow(cfg.$elevation-color, cfg.$elevation-interactive); } + + TextFlow { + Text { + &:disabled { + -fx-opacity: cfg.$opacity-disabled; + } + } + } } &:has-image { >.container >.sub-header { -fx-padding: 0; + + &:disabled { + -fx-opacity: cfg.$opacity-disabled; + } } } diff --git a/styles/src/components/_message.scss b/styles/src/components/_message.scss index 9558472..1e9ec12 100644 --- a/styles/src/components/_message.scss +++ b/styles/src/components/_message.scss @@ -95,6 +95,12 @@ $close-button-padding: 0.5em; // private variable -fx-border-width: cfg.$border-width; -fx-border-radius: cfg.$border-radius; + >.graphic { + &:disabled { + -fx-opacity: cfg.$opacity-disabled; + } + } + >.header { >.title { -fx-text-fill: -color-message-fg-secondary; @@ -103,6 +109,10 @@ $close-button-padding: 0.5em; // private variable >.description { Text { -fx-fill: -color-message-fg-secondary; + + &:disabled { + -fx-opacity: cfg.$opacity-disabled; + } } } } @@ -153,6 +163,10 @@ $close-button-padding: 0.5em; // private variable -fx-background-color: -color-message-border, -color-message-button-hover; -fx-background-insets: 0, 1; } + + &:disabled { + -fx-opacity: cfg.$opacity-disabled; + } } &:closeable { diff --git a/styles/src/components/_tile.scss b/styles/src/components/_tile.scss index de7eab0..cfc3ab7 100644 --- a/styles/src/components/_tile.scss +++ b/styles/src/components/_tile.scss @@ -13,7 +13,11 @@ $title-font-size: 1.05em !default; // semibold would be much better, but it's Ja -fx-background-radius: cfg.$border-radius; -fx-spacing: 1em; - // >.graphic {} + >.graphic { + &:disabled { + -fx-opacity: cfg.$opacity-disabled; + } + } >.header { -fx-alignment: CENTER_LEFT; @@ -22,6 +26,14 @@ $title-font-size: 1.05em !default; // semibold would be much better, but it's Ja >.title { -fx-font-size: $title-font-size; } + + >.description { + Text { + &:disabled { + -fx-opacity: cfg.$opacity-disabled; + } + } + } } // >.action {}