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 82e9059..76dbb8b 100755 --- a/sampler/src/main/java/atlantafx/sampler/page/components/ButtonPage.java +++ b/sampler/src/main/java/atlantafx/sampler/page/components/ButtonPage.java @@ -4,6 +4,7 @@ package atlantafx.sampler.page.components; import atlantafx.sampler.page.AbstractPage; import atlantafx.sampler.page.Page; import atlantafx.sampler.page.SampleBlock; +import javafx.geometry.Pos; import javafx.scene.control.Button; import javafx.scene.control.ContentDisplay; import javafx.scene.layout.GridPane; @@ -33,18 +34,23 @@ public class ButtonPage extends AbstractPage { var grid = new GridPane(); grid.setHgap(Page.PAGE_HGAP); grid.setVgap(Page.PAGE_VGAP); - grid.add(basicSamples(), 0, 0); - grid.add(iconButtonSamples(), 1, 0); - grid.add(coloredSamples(), 0, 1); - grid.add(circularButtons(), 1, 1); - grid.add(outlinedSamples(), 0, 2); - grid.add(roundedSamples(), 1, 2); - grid.add(disabledSample(), 0, 3); + + grid.add(basicSample(), 0, 0); + grid.add(iconButtonSample(), 1, 0); + + grid.add(coloredSample(), 0, 1); + grid.add(circularSample(), 1, 1); + + grid.add(outlinedSample(), 0, 2); + grid.add(sizeSample(), 1, 2); + + grid.add(roundedSample(), 0, 3); + grid.add(disabledSample(), 1, 3); setUserContent(grid); } - private SampleBlock basicSamples() { + private SampleBlock basicSample() { var basicBtn = new Button("_Basic"); basicBtn.setMnemonicParsing(true); @@ -59,7 +65,7 @@ public class ButtonPage extends AbstractPage { return new SampleBlock("Basic", content); } - private SampleBlock coloredSamples() { + private SampleBlock coloredSample() { var accentBtn = new Button("_Accent"); accentBtn.getStyleClass().add(ACCENT); accentBtn.setMnemonicParsing(true); @@ -77,7 +83,7 @@ public class ButtonPage extends AbstractPage { return new SampleBlock("Colored", content); } - private SampleBlock iconButtonSamples() { + private SampleBlock iconButtonSample() { var basicBtn = new Button("", new FontIcon(Feather.MORE_HORIZONTAL)); basicBtn.getStyleClass().addAll(BUTTON_ICON); @@ -106,7 +112,7 @@ public class ButtonPage extends AbstractPage { return new SampleBlock("Icon", content); } - private SampleBlock circularButtons() { + private SampleBlock circularSample() { var basicBtn = new Button("", new FontIcon(Feather.MORE_HORIZONTAL)); basicBtn.getStyleClass().addAll(BUTTON_CIRCLE); basicBtn.setShape(new Circle(50)); @@ -142,7 +148,7 @@ public class ButtonPage extends AbstractPage { return new SampleBlock("Circular", content); } - private SampleBlock outlinedSamples() { + private SampleBlock outlinedSample() { var accentBtn = new Button("Accen_t"); accentBtn.getStyleClass().addAll(BUTTON_OUTLINED, ACCENT); accentBtn.setMnemonicParsing(true); @@ -161,20 +167,37 @@ public class ButtonPage extends AbstractPage { return new SampleBlock("Outlined", content); } - private SampleBlock roundedSamples() { + private SampleBlock roundedSample() { var basicBtn = new Button("Basic"); - basicBtn.getStyleClass().add(ROUNDED); + basicBtn.getStyleClass().addAll(SMALL, ROUNDED); var accentBtn = new Button("Accent"); accentBtn.getStyleClass().addAll(ROUNDED, ACCENT); var successBtn = new Button("Success", new FontIcon(Feather.CHECK)); - successBtn.getStyleClass().addAll(ROUNDED, BUTTON_OUTLINED, SUCCESS); + successBtn.getStyleClass().addAll(LARGE, ROUNDED, BUTTON_OUTLINED, SUCCESS); var content = new HBox(BLOCK_HGAP, basicBtn, accentBtn, successBtn); + content.setAlignment(Pos.CENTER_LEFT); + return new SampleBlock("Rounded", content); } + private SampleBlock sizeSample() { + var smallBtn = new Button("Small"); + smallBtn.getStyleClass().addAll(SMALL); + + var normalBtn = new Button("Normal"); + + var largeBtn = new Button("Large"); + largeBtn.getStyleClass().addAll(LARGE); + + var content = new HBox(BLOCK_HGAP, smallBtn, normalBtn, largeBtn); + content.setAlignment(Pos.CENTER_LEFT); + + return new SampleBlock("Size", content); + } + private SampleBlock disabledSample() { var basicBtn = new Button("Basic"); basicBtn.setDisable(true); diff --git a/styles/src/components/_button.scss b/styles/src/components/_button.scss index 0daffb1..9b3eb00 100755 --- a/styles/src/components/_button.scss +++ b/styles/src/components/_button.scss @@ -367,8 +367,17 @@ $color-danger-outlined-bg-hover: $color-danger-bg-hover !default; } } + &.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-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/settings/_config.scss b/styles/src/settings/_config.scss index b993834..1f469de 100644 --- a/styles/src/settings/_config.scss +++ b/styles/src/settings/_config.scss @@ -13,8 +13,11 @@ $font-title-4: 1.25em !default; $font-small: 0.8em !default; $padding-x: 12px !default; +$padding-x-small: calc($padding-x / 1.4) !default; $padding-x-large: calc($padding-x * 1.4) !default; $padding-y: 8px !default; +$padding-y-small: calc($padding-y / 1.4) !default; +$padding-y-large: calc($padding-y * 1.4) !default; $graphic-gap: 6px !default; // Most components use background insets to draw its borders due to