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

Add support for breadcrumbs in the toolbar

Browse Source
This commit is contained in:
mkpaz 2023-05-17 13:39:00 +04:00
parent c2d0b998e5
commit b58d9332a9
2 changed files with 59 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
sampler/src/main/java/atlantafx/sampler/page/components/ToolBarPage.java
View File

@ -2,6 +2,7 @@
package atlantafx.sampler.page.components; package atlantafx.sampler.page.components;
import atlantafx.base.controls.Breadcrumbs;
import atlantafx.base.controls.CaptionMenuItem; import atlantafx.base.controls.CaptionMenuItem;
import atlantafx.base.controls.CustomTextField; import atlantafx.base.controls.CustomTextField;
import atlantafx.base.controls.Spacer; import atlantafx.base.controls.Spacer;
@ -54,6 +55,7 @@ import org.kordamp.ikonli.Ikon;
import org.kordamp.ikonli.feather.Feather; import org.kordamp.ikonli.feather.Feather;
import org.kordamp.ikonli.javafx.FontIcon; import org.kordamp.ikonli.javafx.FontIcon;
import org.kordamp.ikonli.material2.Material2OutlinedAL; import org.kordamp.ikonli.material2.Material2OutlinedAL;
import org.kordamp.ikonli.material2.Material2OutlinedMZ;
public class ToolBarPage extends OutlinePage { public class ToolBarPage extends OutlinePage {
@ -140,9 +142,32 @@ public class ToolBarPage extends OutlinePage {
iconButton(Feather.USER), iconButton(Feather.USER),
dropdown 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 //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(""" var description = BBCodeParser.createFormattedText("""
The most common items to place within a toolbar are [i]Button[/i], [i]ToggleButtons[/i] \ The most common items to place within a toolbar are [i]Button[/i], [i]ToggleButtons[/i] \

40
styles/src/components/_toolbar.scss
View File

@ -4,16 +4,19 @@
@use "../settings/icons"; @use "../settings/icons";
@use "../settings/utils"; @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-bg-hover: if(cfg.$darkMode, -color-base-6, -color-base-2) !default;
$color-border-hover: -color-accent-muted !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; $color-separator: -color-border-muted !default;
$padding-x: 0.3em !default; $padding-x: 0.3em !default;
$padding-y: 4px !default; $padding-y: 4px !default;
$spacing: 4px !default; $spacing: 4px !default;
$border-width: cfg.$border-width !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 { .tool-bar {
-fx-background-color: -color-border-muted, $color-bg; -fx-background-color: -color-border-muted, $color-bg;
@ -47,8 +50,8 @@ $border-width: cfg.$border-width !default;
.toggle-button { .toggle-button {
-color-button-bg: $color-bg; -color-button-bg: $color-bg;
-color-button-border-hover: $color-border-hover; -color-button-border-hover: $color-border-hover;
-color-button-bg-selected: $color-bg-selected; -color-button-bg-selected: $color-bg-selected;
-color-button-fg-selected: -color-fg-default; -color-button-fg-selected: -color-fg-default;
-fx-background-insets: 0; -fx-background-insets: 0;
-fx-effect: none; -fx-effect: none;
@ -61,6 +64,29 @@ $border-width: cfg.$border-width !default;
-fx-background-color: -color-button-border-hover, $color-bg-selected; -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 // When toolbar doesn't have enough size to place all elements, it creates additional