Add support of rounded style for TextField and Button

This commit is contained in:
mkpaz 2022-09-13 16:02:17 +04:00
parent 592b5ffe77
commit 0a88c262c4
6 changed files with 45 additions and 7 deletions

@ -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

@ -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);
}
@ -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);

@ -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;

@ -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;
}
}

@ -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;

@ -13,6 +13,7 @@ $font-title-4: 1.25em !default;
$font-small: 0.8em !default;
$padding-x: 12px !default;
$padding-x-large: calc($padding-x * 1.4) !default;
$padding-y: 8px !default;
$graphic-gap: 6px !default;