Fix minor theme styling issues

2023-05-30 15:49:01 +04:00 · 2023-05-30 15:49:01 +04:00 · 083ac8a0a7
commit 083ac8a0a7
parent 119f13711c
6 changed files with 37 additions and 27 deletions
--- a/sampler/src/main/java/atlantafx/sampler/page/showcase/OverviewPage.java
+++ b/sampler/src/main/java/atlantafx/sampler/page/showcase/OverviewPage.java
@ -4,6 +4,7 @@ package atlantafx.sampler.page.showcase;

 import static javafx.scene.control.ScrollPane.ScrollBarPolicy.AS_NEEDED;

+import atlantafx.base.controls.Breadcrumbs;
 import atlantafx.base.controls.MaskTextField;
 import atlantafx.base.theme.Styles;
 import atlantafx.sampler.Resources;
@ -13,6 +14,7 @@ import java.io.IOException;
 import java.net.URI;
 import java.net.URL;
 import java.util.ResourceBundle;
+import java.util.stream.Stream;
 import javafx.fxml.FXML;
 import javafx.fxml.FXMLLoader;
 import javafx.fxml.Initializable;
@ -89,10 +91,18 @@ public final class OverviewPage extends ScrollPane implements Page {

    public static class Controller implements Initializable {
        public @FXML MaskTextField phoneTf;
+        public @FXML Breadcrumbs<String> breadcrumbs;

        @Override
        public void initialize(URL url, ResourceBundle resourceBundle) {
            phoneTf.setText("(415) 273-91-64");
+            var items = Stream.generate(() -> FAKER.science().element())
+                .limit(3)
+                .toList();
+            Breadcrumbs.BreadCrumbItem<String> root = Breadcrumbs.buildTreeModel(
+                items.toArray(String[]::new)
+            );
+            breadcrumbs.setSelectedCrumb(root);
        }
    }
 }
--- a/sampler/src/main/resources/atlantafx/sampler/fxml/overview.fxml
+++ b/sampler/src/main/resources/atlantafx/sampler/fxml/overview.fxml
@ -1,5 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>

+<?import atlantafx.base.controls.Breadcrumbs?>
 <?import atlantafx.base.controls.Calendar?>
 <?import atlantafx.base.controls.CustomTextField?>
 <?import atlantafx.base.controls.MaskTextField?>
@ -210,6 +211,7 @@
                <RowConstraints vgrow="NEVER" />
                <RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="NEVER" />
            <RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="NEVER" />
+            <RowConstraints vgrow="ALWAYS" />
            </rowConstraints>
            <children>
                <TextField promptText="Prompt" GridPane.columnIndex="1" />
@ -223,9 +225,10 @@
                    </right>
                </CustomTextField>
                <PasswordTextField text="password" GridPane.rowIndex="2" />
-                <TextField editable="false" promptText="Readonly" GridPane.rowIndex="1" />
+                <TextField editable="false" text="Readonly" GridPane.rowIndex="1" />
                <TextField disable="true" promptText="Disabled" GridPane.columnIndex="1" GridPane.rowIndex="1" />
            <MaskTextField fx:id="phoneTf" mask="(NNN) NNN-NN-NN" GridPane.rowIndex="3" />
+            <Breadcrumbs fx:id="breadcrumbs" maxWidth="1.7976931348623157E308" GridPane.columnSpan="2" GridPane.rowIndex="4" />
            </children>
        </GridPane>
        <GridPane hgap="10.0" layoutX="30.0" layoutY="30.0" vgap="10.0" GridPane.rowIndex="2">
@ -583,7 +586,7 @@
                    <content>
                        <AnchorPane minHeight="0.0" minWidth="0.0" prefHeight="180.0" prefWidth="200.0">
                            <children>
-                                <Tile layoutX="-56.0" layoutY="44.0" description="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sagittis vehicula elit, ac dictum metus bibendum id. Integer elit purus, varius ac eros eu, convallis ultricies tellus." title="Title" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0" />
+                                <Tile description="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sagittis vehicula elit, ac dictum metus bibendum id. Integer elit purus, varius ac eros eu, convallis ultricies tellus." layoutX="-56.0" layoutY="44.0" title="Title" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0" />
                            </children>
                        </AnchorPane>
                    </content>
--- a/styles/src/components/_data.scss
+++ b/styles/src/components/_data.scss
@ -20,6 +20,10 @@ $color-resize-line:  -color-accent-emphasis !default;
 $color-drag-header:  -color-accent-muted    !default;
 $color-drag-overlay: -color-accent-muted    !default;

+// warning: setting header size in 'em' sometimes breaks borders
+$header-size-normal: 40px !default;
+$header-size-dense: 34px  !default;
+
 $cell-size-normal: 2.8em !default;
 $cell-size-dense:  2em   !default;
 $cell-padding-x:   0.5em !default;
@ -250,7 +254,7 @@ $tree-cell-indent: 1.2em !default; // default JavaFX values is 18px
    .column-header {
      -fx-background-color: transparent;
      -fx-background-insets: 0;
-      -fx-size: 2.2em;
+      -fx-size: $header-size-normal;
      -fx-padding: 0;
      -fx-font-weight: bold;
      -fx-border-color: -color-cell-border;
@ -358,6 +362,12 @@ $tree-cell-indent: 1.2em !default; // default JavaFX values is 18px
  }

  &.dense {
+    >.column-header-background {
+      .column-header {
+        -fx-size: $header-size-dense;
+      }
+    }
+
    .table-row-cell {
      -fx-cell-size: $cell-size-dense;
    }
@ -530,6 +540,12 @@ $tree-cell-indent: 1.2em !default; // default JavaFX values is 18px
  }

  &.dense {
+    >.column-header-background {
+      .column-header {
+        -fx-size: $header-size-dense;
+      }
+    }
+
    .tree-table-row-cell {
      -fx-cell-size: $cell-size-dense;

--- a/styles/src/cupertino-dark.scss
+++ b/styles/src/cupertino-dark.scss
@ -183,13 +183,7 @@ $opaqueSeparator: rgba(56.0, 56.0, 58.0, 1.0);     // #38383aff
 );

@forward "components/date-picker" as date-picker-* with (
-  $cell-padding-x: 2px,
-  $cell-padding-y: 2px,
-  $cell-size:      2.5em,
  $color-icon: -color-accent-fg,
-  $day-cell-font-size: 0.85em,
-  $day-name-font-size: 0.9em,
-  $month-year-font-size: 1em
 );

@forward "components/menu" as menu-* with (
--- a/styles/src/cupertino-light.scss
+++ b/styles/src/cupertino-light.scss
@ -184,13 +184,7 @@ $opaqueSeparator: rgba(198.0, 198.0, 200.0, 1.0); // #c6c6c8ff
 );

@forward "components/date-picker" as date-picker-* with (
-  $cell-padding-x: 2px,
-  $cell-padding-y: 2px,
-  $cell-size:      2.5em,
  $color-icon: -color-accent-fg,
-  $day-cell-font-size: 0.85em,
-  $day-name-font-size: 0.9em,
-  $month-year-font-size: 1em
 );

@forward "components/menu" as menu-* with (
--- a/styles/src/dracula.scss
+++ b/styles/src/dracula.scss
@ -187,19 +187,11 @@ $ui-yellowLight:     hsla(60, 100%, 75%, 5%);
 );

@forward "components/data" as data-* with (
-  $color-header-bg: -color-bg-default,
-  $color-header-fg: -color-fg-muted,
  $color-cell-bg-selected: -color-accent-subtle
 );

@forward "components/date-picker" as date-picker-* with (
-  $cell-padding-x: 2px,
-  $cell-padding-y: 2px,
-  $cell-size:      2.5em,
  $color-icon: -color-accent-fg,
-  $day-cell-font-size: 0.85em,
-  $day-name-font-size: 0.9em,
-  $month-year-font-size: 1em
 );

@forward "components/menu" as menu-* with (
@ -233,7 +225,8 @@ $ui-yellowLight:     hsla(60, 100%, 75%, 5%);
 );

@forward "components/tab-pane" as tab-pane-* with (
-  $color-lr-bg-selected: -color-base-6
+  $color-lr-bg-selected: -color-base-6,
+  $color-tb-border-selected: -color-warning-emphasis,
 );

@forward "components/text-input" as text-input-* with (