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

Add text field size support

Browse Source
This commit is contained in:
mkpaz 2022-09-28 14:51:04 +04:00
parent 881aefcdb5
commit 455dad1076
2 changed files with 66 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,15 +1,16 @@
/* 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.geometry.Pos;
import javafx.scene.control.PasswordField;
import javafx.scene.control.TextField;
import javafx.scene.layout.FlowPane;
import javafx.scene.layout.HBox;
import javafx.scene.layout.VBox;
import static atlantafx.base.theme.Styles.STATE_DANGER;
import static atlantafx.base.theme.Styles.STATE_SUCCESS;
import static atlantafx.base.theme.Styles.*;
import static atlantafx.sampler.page.SampleBlock.BLOCK_HGAP;
public class TextFieldPage extends AbstractPage {
@ -20,15 +21,11 @@ public class TextFieldPage extends AbstractPage {
public TextFieldPage() {
super();
setUserContent(new FlowPane(
PAGE_HGAP, PAGE_VGAP,
basicSample(),
promptSample(),
passwordSample(),
readonlySample(),
successSample(),
dangerSample(),
roundedSample(),
setUserContent(new VBox(
PAGE_VGAP,
expandingHBox(basicSample(), promptSample(), passwordSample()),
expandingHBox(readonlySample(), successSample(), dangerSample()),
expandingHBox(sizeSample(), roundedSample()),
disabledSample()
));
}
@ -68,15 +65,37 @@ public class TextFieldPage extends AbstractPage {
return new SampleBlock("Danger", field);
}
private SampleBlock sizeSample() {
var smallField = new TextField("Small");
smallField.getStyleClass().add(SMALL);
smallField.setPrefWidth(70);
var normalField = new TextField("Normal");
normalField.setPrefWidth(120);
var largeField = new TextField("Large");
largeField.getStyleClass().add(LARGE);
largeField.setPrefWidth(200);
var content = new HBox(BLOCK_HGAP, smallField, normalField, largeField);
content.setAlignment(Pos.CENTER_LEFT);
return new SampleBlock("Size", content);
}
private SampleBlock roundedSample() {
var field = new TextField("Text");
field.getStyleClass().add(Styles.ROUNDED);
field.getStyleClass().add(ROUNDED);
return new SampleBlock("Rounded", field);
}
private SampleBlock disabledSample() {
var field = new TextField("Text");
field.setDisable(true);
return new SampleBlock("Disabled", field);
var block = new SampleBlock("Disabled", field);
block.setMaxWidth(250);
return block;
}
}

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

@ -2,35 +2,35 @@
@use "../settings/config" as cfg;
$color-bg: -color-bg-default !default;
$color-fg: -color-fg-default !default;
$color-bg: -color-bg-default !default;
$color-fg: -color-fg-default !default;
$color-border: -color-border-default !default;
$color-bg-focused: -color-bg-default !default;
$color-bg-focused: -color-bg-default !default;
$color-border-focused: -color-accent-emphasis !default;
$color-bg-highlight: -color-accent-subtle !default;
$color-fg-highlight: -color-fg-default !default;
$color-fg-highlight: -color-fg-default !default;
$color-bg-success: -color-bg-default !default;
$color-fg-success: -color-success-fg !default;
$color-bg-success: -color-bg-default !default;
$color-fg-success: -color-success-fg !default;
$color-border-success: -color-success-emphasis !default;
$color-bg-danger: -color-bg-default !default;
$color-fg-danger: -color-danger-fg !default;
$color-bg-danger: -color-bg-default !default;
$color-fg-danger: -color-danger-fg !default;
$color-border-danger: -color-danger-emphasis !default;
// not exposed as looked-up color variables
$color-fg-placeholder: -color-fg-subtle !default;
$color-fg-password: -color-fg-muted !default;
$color-fg-password: -color-fg-muted !default;
.text-input {
-color-input-bg: $color-bg;
-color-input-fg: $color-fg;
-color-input-bg: $color-bg;
-color-input-fg: $color-fg;
-color-input-border: $color-border;
-color-input-bg-focused: $color-bg-focused;
-color-input-bg-focused: $color-bg-focused;
-color-input-border-focused: $color-border-focused;
-color-input-bg-highlight: $color-bg-highlight;
@ -63,24 +63,19 @@ $color-fg-password: -color-fg-muted !default;
}
&:success {
-color-input-bg: $color-bg-success;
-color-input-fg: $color-fg-success;
-color-input-bg: $color-bg-success;
-color-input-fg: $color-fg-success;
-color-input-border: $color-border-success;
-color-input-border-focused: $color-border-success;
}
&:danger {
-color-input-bg: $color-bg-danger;
-color-input-fg: $color-fg-danger;
-color-input-bg: $color-bg-danger;
-color-input-fg: $color-fg-danger;
-color-input-border: $color-border-danger;
-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;
@ -110,6 +105,22 @@ $color-fg-password: -color-fg-muted !default;
}
}
.text-field {
&.small {
-fx-padding: cfg.$padding-y-small cfg.$padding-x-small cfg.$padding-y-small cfg.$padding-x-small;
-fx-font-size: cfg.$font-small;
}
&.large {
-fx-padding: cfg.$padding-y-large cfg.$padding-x-large cfg.$padding-y-large cfg.$padding-x-large;
-fx-font-size: cfg.$font-title-4;
}
&.rounded {
-fx-background-radius: 10em;
}
}
.text-area {
// scroll pane offset to avoid overlapping input borders
-fx-padding: 2px;