From b58d9332a93c5deada16386bf52ef46846cf7303 Mon Sep 17 00:00:00 2001
From: mkpaz <quizynox@gmail.com>
Date: Wed, 17 May 2023 13:39:00 +0400
Subject: [PATCH] Add support for breadcrumbs in the toolbar

---
 .../sampler/page/components/ToolBarPage.java  | 27 ++++++++++++-
 styles/src/components/_toolbar.scss           | 40 +++++++++++++++----
 2 files changed, 59 insertions(+), 8 deletions(-)

diff --git a/sampler/src/main/java/atlantafx/sampler/page/components/ToolBarPage.java b/sampler/src/main/java/atlantafx/sampler/page/components/ToolBarPage.java
index 26d1d6a..3e8ccf0 100644
--- a/sampler/src/main/java/atlantafx/sampler/page/components/ToolBarPage.java
+++ b/sampler/src/main/java/atlantafx/sampler/page/components/ToolBarPage.java
@@ -2,6 +2,7 @@
 
 package atlantafx.sampler.page.components;
 
+import atlantafx.base.controls.Breadcrumbs;
 import atlantafx.base.controls.CaptionMenuItem;
 import atlantafx.base.controls.CustomTextField;
 import atlantafx.base.controls.Spacer;
@@ -54,6 +55,7 @@ import org.kordamp.ikonli.Ikon;
 import org.kordamp.ikonli.feather.Feather;
 import org.kordamp.ikonli.javafx.FontIcon;
 import org.kordamp.ikonli.material2.Material2OutlinedAL;
+import org.kordamp.ikonli.material2.Material2OutlinedMZ;
 
 public class ToolBarPage extends OutlinePage {
 
@@ -140,9 +142,32 @@ public class ToolBarPage extends OutlinePage {
             iconButton(Feather.USER),
             dropdown
         );
+
+        // ~
+        var root = new Breadcrumbs.BreadCrumbItem<>("Home");
+        var l1Item = new Breadcrumbs.BreadCrumbItem<>("Documents");
+        var l2Item = new Breadcrumbs.BreadCrumbItem<>("Bills");
+        root.getChildren().add(l1Item);
+        l1Item.getChildren().add(l2Item);
+
+        var crumbs = new Breadcrumbs<>(root);
+        crumbs.setSelectedCrumb(l2Item);
+        crumbs.setMaxWidth(Double.MAX_VALUE);
+        HBox.setHgrow(crumbs, Priority.ALWAYS);
+
+        var toolbar4 = new ToolBar(
+            iconButton(Feather.CHEVRON_LEFT),
+            iconButton(Feather.CHEVRON_RIGHT),
+            new Spacer(10),
+            crumbs,
+            new Spacer(10),
+            iconButton(Feather.SEARCH),
+            iconButton(Material2OutlinedAL.FORMAT_LIST_NUMBERED),
+            iconButton(Material2OutlinedMZ.SETTINGS)
+        );
         //snippet_1:end
 
-        var box = new VBox(VGAP_20, toolbar1, toolbar2, toolbar3);
+        var box = new VBox(VGAP_20, toolbar1, toolbar2, toolbar3, toolbar4);
 
         var description = BBCodeParser.createFormattedText("""
             The most common items to place within a toolbar are [i]Button[/i], [i]ToggleButtons[/i] \
diff --git a/styles/src/components/_toolbar.scss b/styles/src/components/_toolbar.scss
index 5a13899..f02a6f5 100755
--- a/styles/src/components/_toolbar.scss
+++ b/styles/src/components/_toolbar.scss
@@ -4,16 +4,19 @@
 @use "../settings/icons";
 @use "../settings/utils";
 
-$color-bg:           -color-bg-subtle    !default;
+$color-bg:           -color-bg-subtle !default;
 $color-bg-hover:     if(cfg.$darkMode, -color-base-6, -color-base-2) !default;
 $color-border-hover: -color-accent-muted !default;
-$color-bg-selected:  $color-bg-hover     !default;
+$color-bg-selected:  $color-bg-hover !default;
 $color-separator:    -color-border-muted !default;
 
-$padding-x:    0.3em !default;
-$padding-y:    4px   !default;
-$spacing:      4px   !default;
+$padding-x: 0.3em !default;
+$padding-y: 4px !default;
+$spacing:   4px !default;
 $border-width: cfg.$border-width !default;
+$breadcrumbs-padding-x:      1em   !default;
+$breadcrumbs-link-padding-x: 0.5em !default;
+$breadcrumbs-link-padding-y: 2px   !default;
 
 .tool-bar {
   -fx-background-color: -color-border-muted, $color-bg;
@@ -47,8 +50,8 @@ $border-width: cfg.$border-width !default;
     .toggle-button {
       -color-button-bg: $color-bg;
       -color-button-border-hover: $color-border-hover;
-      -color-button-bg-selected:  $color-bg-selected;
-      -color-button-fg-selected:  -color-fg-default;
+      -color-button-bg-selected: $color-bg-selected;
+      -color-button-fg-selected: -color-fg-default;
       -fx-background-insets: 0;
       -fx-effect: none;
 
@@ -61,6 +64,29 @@ $border-width: cfg.$border-width !default;
         -fx-background-color: -color-button-border-hover, $color-bg-selected;
       }
     }
+
+    .breadcrumbs {
+      -fx-background-color: -color-border-default, -color-bg-default;
+      -fx-background-insets: 0, cfg.$border-width;
+      -fx-background-radius: cfg.$border-radius, cfg.$inner-border-radius;
+      -fx-padding: (cfg.$padding-y - $breadcrumbs-link-padding-y) $breadcrumbs-padding-x
+                   (cfg.$padding-y - $breadcrumbs-link-padding-y) $breadcrumbs-padding-x;
+
+      >.hyperlink {
+        -color-link-fg: -color-fg-default;
+        -color-link-fg-visited: -color-fg-default;
+        -color-link-fg-armed: -color-fg-default;
+        -fx-padding: $breadcrumbs-link-padding-y $breadcrumbs-link-padding-x
+                     $breadcrumbs-link-padding-y $breadcrumbs-link-padding-x;
+        -fx-underline: false;
+        -fx-cursor: default;
+
+        &:hover {
+          -fx-background-color: $color-bg-hover;
+          -fx-background-radius: cfg.$border-radius, cfg.$inner-border-radius;
+        }
+      }
+    }
   }
 
   // When toolbar doesn't have enough size to place all elements, it creates additional