tablet/atlantafx
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add support of rounded style for TextField and Button

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
base/src/main/java/atlantafx/base/theme/Styles.java
View File

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

26
sampler/src/main/java/atlantafx/sampler/page/components/ButtonPage.java
View File

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

8
sampler/src/main/java/atlantafx/sampler/page/components/TextFieldPage.java
View File

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

5
styles/src/components/_button.scss
View File

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

5
styles/src/components/_text-input.scss
View File

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

7
styles/src/settings/_config.scss
View File

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