From 0a88c262c4279bc2b883501bd73d346141ff7519 Mon Sep 17 00:00:00 2001 From: mkpaz Date: Tue, 13 Sep 2022 16:02:17 +0400 Subject: [PATCH] Add support of rounded style for TextField and Button --- .../java/atlantafx/base/theme/Styles.java | 1 + .../sampler/page/components/ButtonPage.java | 26 ++++++++++++++++--- .../page/components/TextFieldPage.java | 8 +++++- styles/src/components/_button.scss | 5 ++++ styles/src/components/_text-input.scss | 5 ++++ styles/src/settings/_config.scss | 7 ++--- 6 files changed, 45 insertions(+), 7 deletions(-) diff --git a/base/src/main/java/atlantafx/base/theme/Styles.java b/base/src/main/java/atlantafx/base/theme/Styles.java index dec8a8c..9bf5ee2 100644 --- a/base/src/main/java/atlantafx/base/theme/Styles.java +++ b/base/src/main/java/atlantafx/base/theme/Styles.java @@ -54,6 +54,7 @@ public final class Styles { public static final String ELEVATED_3 = "elevated-3"; public static final String ELEVATED_4 = "elevated-4"; public static final String INTERACTIVE = "interactive"; + public static final String ROUNDED = "rounded"; public static final String STRIPED = "striped"; // Text diff --git a/sampler/src/main/java/atlantafx/sampler/page/components/ButtonPage.java b/sampler/src/main/java/atlantafx/sampler/page/components/ButtonPage.java index bab1bee..463e8ed 100755 --- a/sampler/src/main/java/atlantafx/sampler/page/components/ButtonPage.java +++ b/sampler/src/main/java/atlantafx/sampler/page/components/ButtonPage.java @@ -36,7 +36,8 @@ public class ButtonPage extends AbstractPage { grid.add(coloredSamples().getRoot(), 0, 1); grid.add(circularButtons().getRoot(), 1, 1); grid.add(outlinedSamples().getRoot(), 0, 2); - grid.add(disabledSample().getRoot(), 1, 2); + grid.add(roundedSamples().getRoot(), 1, 2); + grid.add(disabledSample().getRoot(), 0, 3); userContent.getChildren().addAll(grid); } @@ -108,7 +109,7 @@ public class ButtonPage extends AbstractPage { var content = new HBox(10); content.getChildren().addAll(basicBtn, accentBtn, successBtn, dangerBtn, - flatAccentBtn, flatSuccessBtn, flatDangerBtn + flatAccentBtn, flatSuccessBtn, flatDangerBtn ); return new SampleBlock("Icon only", content); @@ -145,7 +146,7 @@ public class ButtonPage extends AbstractPage { var content = new HBox(10); content.getChildren().addAll(basicBtn, accentBtn, successBtn, dangerBtn, - flatAccentBtn, flatSuccessBtn, flatDangerBtn + flatAccentBtn, flatSuccessBtn, flatDangerBtn ); return new SampleBlock("Circular", content); @@ -174,6 +175,25 @@ public class ButtonPage extends AbstractPage { return new SampleBlock("Outlined", content); } + private SampleBlock roundedSamples() { + var basicBtn = new Button("Basic"); + basicBtn.getStyleClass().add(ROUNDED); + basicBtn.setOnAction(PRINT_SOURCE); + + var accentBtn = new Button("Accent"); + accentBtn.getStyleClass().addAll(ROUNDED, ACCENT); + accentBtn.setOnAction(PRINT_SOURCE); + + var successBtn = new Button("Success", new FontIcon(Feather.CHECK)); + successBtn.getStyleClass().addAll(ROUNDED, BUTTON_OUTLINED, SUCCESS); + successBtn.setOnAction(PRINT_SOURCE); + + var content = new HBox(10); + content.getChildren().addAll(basicBtn, accentBtn, successBtn); + + return new SampleBlock("Rounded", content); + } + private SampleBlock disabledSample() { var basicBtn = new Button("Basic"); basicBtn.setDisable(true); diff --git a/sampler/src/main/java/atlantafx/sampler/page/components/TextFieldPage.java b/sampler/src/main/java/atlantafx/sampler/page/components/TextFieldPage.java index ce10836..a34f4f3 100644 --- a/sampler/src/main/java/atlantafx/sampler/page/components/TextFieldPage.java +++ b/sampler/src/main/java/atlantafx/sampler/page/components/TextFieldPage.java @@ -1,6 +1,7 @@ /* SPDX-License-Identifier: MIT */ package atlantafx.sampler.page.components; +import atlantafx.base.theme.Styles; import atlantafx.sampler.page.AbstractPage; import atlantafx.sampler.page.SampleBlock; import javafx.scene.control.PasswordField; @@ -54,6 +55,10 @@ public class TextFieldPage extends AbstractPage { dangerField.pseudoClassStateChanged(STATE_DANGER, true); var dangerBlock = new SampleBlock("Danger", dangerField); + var roundedField = new TextField("Text"); + roundedField.getStyleClass().add(Styles.ROUNDED); + var roundedBlock = new SampleBlock("Rounded", roundedField); + var flowPane = new FlowPane(20, 20); flowPane.getChildren().setAll( basicBlock.getRoot(), @@ -62,7 +67,8 @@ public class TextFieldPage extends AbstractPage { readonlyBlock.getRoot(), disabledBlock.getRoot(), successBlock.getRoot(), - dangerBlock.getRoot() + dangerBlock.getRoot(), + roundedBlock.getRoot() ); return flowPane; diff --git a/styles/src/components/_button.scss b/styles/src/components/_button.scss index 7c53084..0daffb1 100755 --- a/styles/src/components/_button.scss +++ b/styles/src/components/_button.scss @@ -366,4 +366,9 @@ $color-danger-outlined-bg-hover: $color-danger-bg-hover !default; -fx-underline: true; } } + + &.rounded { + -fx-padding: cfg.$padding-y cfg.$padding-x-large cfg.$padding-y cfg.$padding-x-large; + -fx-background-radius: 10em; + } } \ No newline at end of file diff --git a/styles/src/components/_text-input.scss b/styles/src/components/_text-input.scss index 05694f3..ff88da6 100755 --- a/styles/src/components/_text-input.scss +++ b/styles/src/components/_text-input.scss @@ -76,6 +76,11 @@ $color-fg-password: -color-fg-muted !default; -color-input-border-focused: $color-border-danger; } + &.rounded { + -fx-padding: cfg.$padding-y cfg.$padding-x-large cfg.$padding-y cfg.$padding-x-large; + -fx-background-radius: 10em; + } + // input group &.left-pill { -fx-background-radius: cfg.$border-radius 0 0 cfg.$border-radius; diff --git a/styles/src/settings/_config.scss b/styles/src/settings/_config.scss index e0b3904..5c575fe 100644 --- a/styles/src/settings/_config.scss +++ b/styles/src/settings/_config.scss @@ -12,9 +12,10 @@ $font-title-3: 1.5em !default; $font-title-4: 1.25em !default; $font-small: 0.8em !default; -$padding-x: 12px !default; -$padding-y: 8px !default; -$graphic-gap: 6px !default; +$padding-x: 12px !default; +$padding-x-large: calc($padding-x * 1.4) !default; +$padding-y: 8px !default; +$graphic-gap: 6px !default; // Most components use background insets to draw its borders due to // performance reasons. On border radius > 2px corners may look rather ugly.