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

Improve toolbar button styling

Browse Source 
- Use consistent button size
- Add hover effect for toggle buttons
This commit is contained in:
mkpaz 2023-05-17 11:09:53 +04:00
parent c49b6f6b1b
commit 4dda6bee0b
4 changed files with 33 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -340,9 +340,9 @@ public class ToolBarPage extends OutlinePage {
result.add(new Button("Undo")); result.add(new Button("Undo"));
result.add(new Button("Redo")); result.add(new Button("Redo"));
result.add(new Separator()); result.add(new Separator());
result.add(toggleIconButton(Feather.BOLD, true, Styles.LEFT_PILL)); result.add(toggleIconButton(Feather.BOLD, true));
result.add(toggleIconButton(Feather.ITALIC, Styles.CENTER_PILL)); result.add(toggleIconButton(Feather.ITALIC));
result.add(toggleIconButton(Feather.UNDERLINE, Styles.RIGHT_PILL)); result.add(toggleIconButton(Feather.UNDERLINE));
} }
if (orientation == Orientation.VERTICAL) { if (orientation == Orientation.VERTICAL) {

2
styles/src/components/_button.scss
View File

@ -157,7 +157,7 @@ $color-shadow: -color-shadow-default !default;
} }
// Button calculates its height based on the internal text font size. // Button calculates its height based on the internal text font size.
// So, button that has no text (or icon) will appear lower than regulat // So, button that has no text (or icon) will appear lower than regular
// buttons. There're no workarounds, but you can set escape char like // buttons. There're no workarounds, but you can set escape char like
// \s or \f as button text. // \s or \f as button text.
&.button-icon { &.button-icon {

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

@ -4,9 +4,11 @@
@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-selected: if(cfg.$darkMode, -color-base-6, -color-base-2) !default; $color-bg-hover: if(cfg.$darkMode, -color-base-6, -color-base-2) !default;
$color-separator: -color-border-muted !default; $color-border-hover: -color-accent-muted !default;
$color-bg-selected: $color-bg-hover !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;
@ -26,21 +28,38 @@ $border-width: cfg.$border-width !default;
>.menu-button, >.menu-button,
>.split-menu-button { >.split-menu-button {
-color-button-bg: $color-bg; -color-button-bg: $color-bg;
-color-button-bg-hover: $color-bg-hover;
-color-button-border-hover: $color-border-hover;
-color-button-border-focused: $color-border-hover;
-fx-background-insets: 0; -fx-background-insets: 0;
-fx-effect: none; -fx-effect: none;
&:hover {
-fx-background-insets: 0, cfg.$border-width;
}
&.button-icon {
// all toolbar buttons should have the same size
-fx-padding: cfg.$padding-y cfg.$padding-x cfg.$padding-y cfg.$padding-x;
}
} }
.toggle-button { .toggle-button {
-color-button-bg: $color-bg; -color-button-bg: $color-bg;
-color-button-bg-selected: $color-bg-selected; -color-button-border-hover: $color-border-hover;
-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-background-insets: 0;
-fx-effect: none; -fx-effect: none;
}
>.separator { &:hover {
-fx-orientation: vertical; -fx-background-insets: 0, cfg.$border-width;
-color-separator: $color-separator; -fx-background-color: -color-button-border-hover, $color-bg;
}
&:hover:selected {
-fx-background-color: -color-button-border-hover, $color-bg-selected;
}
} }
} }

1
styles/src/dracula.scss
View File

@ -261,6 +261,7 @@ $ui-yellowLight: hsla(60, 100%, 75%, 5%);
); );
@forward "components/toolbar" as toolbar-* with ( @forward "components/toolbar" as toolbar-* with (
$color-bg-hover: -color-base-5,
$color-bg-selected: -color-base-4, $color-bg-selected: -color-base-4,
$color-separator: -color-accent-8 $color-separator: -color-accent-8
); );