From 455dad1076ff5bf98209d307e565ec5b32a6519b Mon Sep 17 00:00:00 2001 From: mkpaz Date: Wed, 28 Sep 2022 14:51:04 +0400 Subject: [PATCH] Add text field size support --- .../page/components/TextFieldPage.java | 49 +++++++++++------ styles/src/components/_text-input.scss | 53 +++++++++++-------- 2 files changed, 66 insertions(+), 36 deletions(-) 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 06c12af..1d1a9fc 100644 --- a/sampler/src/main/java/atlantafx/sampler/page/components/TextFieldPage.java +++ b/sampler/src/main/java/atlantafx/sampler/page/components/TextFieldPage.java @@ -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; } } diff --git a/styles/src/components/_text-input.scss b/styles/src/components/_text-input.scss index 3a00144..05cf715 100755 --- a/styles/src/components/_text-input.scss +++ b/styles/src/components/_text-input.scss @@ -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;