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

Improve TabPane styling

Browse Source 
* expose SASS variables
* prettier UI
* refactoring and code cleanup
This commit is contained in:
mkpaz 2022-08-30 16:26:02 +04:00
parent b553bb5b32
commit bb8ed84b64
2 changed files with 130 additions and 110 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
sampler/src/main/java/atlantafx/sampler/page/components/TabPanePage.java
View File

@ -132,14 +132,15 @@ public class TabPanePage extends AbstractPage {
togglesGrid.add(gridLabel("Closeable"), 0, 0);
togglesGrid.add(closeableToggle, 1, 0);
togglesGrid.add(gridLabel("Floating"), 0, 1);
togglesGrid.add(floatingToggle, 1, 1);
// not yet implemented
//togglesGrid.add(gridLabel("Floating"), 0, 1);
//togglesGrid.add(floatingToggle, 1, 1);
togglesGrid.add(gridLabel("Full width"), 0, 2);
togglesGrid.add(fullWidthToggle, 1, 2);
togglesGrid.add(gridLabel("Full width"), 0, 1);
togglesGrid.add(fullWidthToggle, 1, 1);
togglesGrid.add(gridLabel("Disable"), 0, 3);
togglesGrid.add(disableToggle, 1, 3);
togglesGrid.add(gridLabel("Disable"), 0, 2);
togglesGrid.add(disableToggle, 1, 2);
// == LAYOUT ==

123
styles/src/components/_tab-pane.scss
View File

@ -4,82 +4,101 @@
@use "../settings/effects";
@use "../settings/icons";
$tab-padding-x: cfg.$padding-x !default;
$tab-padding-y: 0.6em !default;
$color-bg: -color-bg-default !default;
$color-fg: -color-fg-default !default;
$color-border: -color-border-default !default;
// horizontal tabs (tb, top+bottom)
$color-tb-bg-hover: -color-bg-subtle !default;
$color-tb-fg-hover: -color-fg-default !default;
$color-tb-border-hover: -color-border-default !default;
$color-tb-bg-selected: -color-bg-default !default;
$color-tb-fg-selected: -color-fg-default !default;
$color-tb-border-selected: -color-accent-emphasis !default;
// vertical tabs (lr, left+right)
$color-lr-bg-hover: -color-bg-subtle !default;
$color-lr-fg-hover: -color-fg-default !default;
$color-lr-border-hover: -color-border-default !default;
$color-lr-bg-selected: if(cfg.$darkMode, -color-gray-7, -color-gray-1) !default;
$color-lr-fg-selected: -color-fg-default !default;
$color-lr-border-selected: -color-border-default !default;
$tab-padding-x: 0.6em !default;
$tab-padding-y: 0.3em !default;
$tab-tb-label-padding-x: 0.4em !default;
$tab-tb-label-padding-y: 0.4em !default;
$tab-lr-label-padding-x: 0.4em !default;
$tab-lr-label-padding-y: 0.2em !default;
$border-width: 2px !default;
.tab-pane {
>.tab-header-area {
-fx-background-insets: 0;
-fx-background-color: -color-bg-default;
-fx-background-color: $color-bg;
-fx-alignment: CENTER;
>.tab-header-background {
-fx-background-color: transparent;
-fx-background-insets: 0 0 0 0, 0 0 $border-width 0;
-fx-background-color: $color-border, $color-bg;
}
>.headers-region > .tab {
>.headers-region {
>.tab {
-fx-background-insets: 0 0 0 0, 0 0 $border-width 0;
-fx-background-color: transparent, transparent;
-fx-padding: $tab-padding-y $tab-padding-x $tab-padding-y $tab-padding-x;
&:top {
-fx-background-insets: 0 0 0 0, 0 0 $border-width 0;
-fx-background-color: -color-border-default, -color-bg-default;
}
&:bottom {
-fx-background-insets: 0 0 0 0, 0 0 $border-width 0;
-fx-background-color: -color-border-default, -color-bg-default;
>.control-buttons-tab > .container > .tab-down-button {
-fx-padding: -0.25em 0.25em 0.25em 0.25em;
}
}
>.tab-container {
>.tab-label {
-fx-alignment: CENTER;
-fx-text-fill: -color-fg-default;
-fx-padding: 0 5px 0 0; // close button padding
-fx-text-fill: $color-fg;
-fx-padding: $tab-tb-label-padding-y $tab-tb-label-padding-x $tab-tb-label-padding-y $tab-tb-label-padding-x;
>* {
-fx-fill: -color-fg-default;
-fx-icon-color: -color-fg-default;
-fx-fill: $color-fg;
-fx-icon-color: $color-fg;
}
}
>.tab-close-button {
-fx-background-color: -color-fg-default;
-fx-background-color: $color-fg;
-fx-shape: "M 0,0 H1 L 4,3 7,0 H8 V1 L 5,4 8,7 V8 H7 L 4,5 1,8 H0 V7 L 3,4 0,1 Z";
-fx-scale-shape: false;
&:hover {
@include effects.highlight(-color-fg-default, 1);
@include effects.highlight($color-fg, 1);
}
}
}
&:hover {
-fx-background-color: -color-border-default, -color-bg-subtle;
-fx-background-color: $color-tb-border-hover, $color-tb-bg-hover;
}
&:top:selected,
&:bottom:selected {
-fx-background-color: -color-accent-emphasis, -color-bg-default;
-fx-background-color: $color-tb-border-selected, $color-tb-bg-selected;
>.tab-container {
>.tab-label {
-fx-fill: -color-accent-fg;
-fx-text-fill: -color-accent-fg;
-fx-fill: $color-tb-fg-selected;
-fx-text-fill: $color-tb-fg-selected;
>* {
-fx-fill: -color-accent-fg;
-fx-icon-color: -color-accent-fg;
-fx-fill: $color-tb-fg-selected;
-fx-icon-color: $color-tb-fg-selected;
}
}
>.tab-close-button {
-fx-background-color: -color-accent-fg;
-fx-background-color: $color-tb-fg-selected;
}
}
}
@ -87,7 +106,7 @@ $border-width: 2px !default;
// order matters, as JavaFX CSS doesn't support not() selector,
// 'disabled' have to be applied after 'hover' and 'selected'
&:disabled {
-fx-background-color: -color-border-default, -color-bg-default;
-fx-background-color: $color-border, $color-bg;
>.tab-container {
-fx-opacity: cfg.$opacity-disabled;
@ -97,34 +116,36 @@ $border-width: 2px !default;
// vertical tabs
&:left,
&:right {
-fx-background-insets: 0;
-fx-background-color: transparent;
>.tab-container {
>.tab-label {
-fx-padding: $tab-lr-label-padding-y $tab-lr-label-padding-x $tab-lr-label-padding-y $tab-lr-label-padding-x;
}
}
&:hover {
-fx-background-color: -color-bg-default;
-fx-background-color: $color-lr-border-hover, $color-lr-bg-hover;
>.tab-container {
>.tab-label {
-fx-text-fill: -color-fg-default;
-fx-text-fill: $color-lr-fg-hover;
}
>.tab-close-button {
-fx-background-color: -color-fg-default;
-fx-background-color: $color-lr-fg-hover;
}
}
}
&:selected {
-fx-background-color: -color-bg-subtle;
-fx-background-color: $color-lr-border-selected, $color-lr-bg-selected;
>.tab-container {
>.tab-label {
-fx-text-fill: -color-fg-default;
-fx-underline: true;
-fx-text-fill: $color-lr-fg-selected;
}
>.tab-close-button {
-fx-background-color: -color-fg-default;
-fx-background-color: $color-lr-fg-selected;
}
}
}
@ -136,16 +157,19 @@ $border-width: 2px !default;
}
}
}
}
>.control-buttons-tab>.container {
-fx-padding: 0.25em 0 0 0;
>.tab-down-button {
-fx-padding: 0.25em 1em 1em 0.25em;
-fx-padding: 1em;
&:disabled {
-fx-opacity: cfg.$opacity-disabled;
}
>.arrow {
@include icons.get("arrow-drop-down", false);
-fx-background-color: -color-fg-default;
-fx-background-color: $color-fg;
}
}
}
@ -153,11 +177,6 @@ $border-width: 2px !default;
// TabPane.STYLE_CLASS_FLOATING
&.floating {
// NOTE: Don't use .floating with vertical tabs
// they are incompatible at the moment
>.tab-header-area {
-fx-background-insets: 0 0 0 0, 0 0 $border-width 0;
-fx-background-color: -color-border-default, -color-bg-default;
}
// not yet implemented
}
}