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

Add dense style support for TabPane

Browse Source
This commit is contained in:
mkpaz 2022-10-05 15:03:08 +04:00
parent 7faefdb6da
commit 71ea3aac8b
2 changed files with 64 additions and 12 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

@ -15,8 +15,7 @@ import javafx.scene.layout.*;
import org.kordamp.ikonli.feather.Feather;
import org.kordamp.ikonli.javafx.FontIcon;
import static atlantafx.base.theme.Styles.ACCENT;
import static atlantafx.base.theme.Styles.BUTTON_ICON;
import static atlantafx.base.theme.Styles.*;
import static javafx.scene.control.TabPane.TabClosingPolicy.ALL_TABS;
import static javafx.scene.control.TabPane.TabClosingPolicy.UNAVAILABLE;
@ -131,6 +130,9 @@ public class TabPanePage extends AbstractPage {
}
});
var denseToggle = new ToggleSwitch();
denseToggle.selectedProperty().addListener((obs, old, val) -> toggleStyleClass(tabs, DENSE));
var disableToggle = new ToggleSwitch();
disableToggle.selectedProperty().addListener((obs, old, val) -> {
if (val != null) { tabs.setDisable(val); }
@ -152,8 +154,11 @@ public class TabPanePage extends AbstractPage {
togglesGrid.add(createGridLabel("Full width"), 0, 3);
togglesGrid.add(fullWidthToggle, 1, 3);
togglesGrid.add(createGridLabel("Disable"), 0, 4);
togglesGrid.add(disableToggle, 1, 4);
togglesGrid.add(createGridLabel("Dense"), 0, 4);
togglesGrid.add(denseToggle, 1, 4);
togglesGrid.add(createGridLabel("Disable"), 0, 5);
togglesGrid.add(disableToggle, 1, 5);
// == LAYOUT ==

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

@ -26,14 +26,20 @@ $color-lr-bg-selected: if(cfg.$darkMode, -color-base-7, -color-base-1) !defa
$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-padding-x: 0.6em !default;
$tab-padding-x-dense: 0.3em !default;
$tab-padding-y: 0.3em !default;
$tab-padding-y-dense: 0.2em !default;
$tab-tb-label-padding-x: 0.4em !default;
$tab-tb-label-padding-y: 0.4em !default;
$tab-tb-label-padding-x: 0.4em !default;
$tab-tb-label-padding-x-dense: 0.2em !default;
$tab-tb-label-padding-y: 0.4em !default;
$tab-tb-label-padding-y-dense: 0.2em !default;
$tab-lr-label-padding-x: 0.4em !default;
$tab-lr-label-padding-y: 0.2em !default;
$tab-lr-label-padding-x: 0.4em !default;
$tab-lr-label-padding-x-dense: 0.3em !default;
$tab-lr-label-padding-y: 0.2em !default;
$tab-lr-label-padding-y-dense: 0.15em !default;
$header-border-width: 2px !default;
@ -44,8 +50,10 @@ $color-float-border: -color-border-default !default;
$color-float-bg-selected: -color-bg-default !default;
$color-float-border-selected: -color-border-default !default;
$tab-float-label-padding-x: 0.55em !default;
$tab-float-label-padding-y: 0.55em !default;
$tab-float-label-padding-x: 0.55em !default;
$tab-float-label-padding-x-dense: 0.35em !default;
$tab-float-label-padding-y: 0.55em !default;
$tab-float-label-padding-y-dense: 0.35em !default;
$header-float-border-width: 1px !default;
$tab-float-spacing: 3px !default;
@ -185,6 +193,29 @@ $tab-float-width: 150px !default;
}
}
&.dense {
>.tab-header-area >.headers-region {
>.tab {
-fx-padding: $tab-padding-y-dense $tab-padding-x-dense $tab-padding-y-dense $tab-padding-x-dense;
>.tab-container {
>.tab-label {
-fx-padding: $tab-tb-label-padding-y-dense $tab-tb-label-padding-x-dense $tab-tb-label-padding-y-dense $tab-tb-label-padding-x-dense;
}
}
&:left,
&:right {
>.tab-container {
>.tab-label {
-fx-padding: $tab-lr-label-padding-y-dense $tab-lr-label-padding-x-dense $tab-lr-label-padding-y-dense $tab-lr-label-padding-x-dense;
}
}
}
}
}
}
// TabPane.STYLE_CLASS_FLOATING
&.floating {
@ -229,4 +260,20 @@ $tab-float-width: 150px !default;
}
}
}
&.floating.dense {
>.tab-header-area {
>.headers-region {
>.tab {
-fx-padding: $tab-padding-y-dense 0 $tab-padding-y-dense $tab-float-spacing;
>.tab-container {
>.tab-label {
-fx-padding: $tab-float-label-padding-y-dense $tab-float-label-padding-x-dense $tab-float-label-padding-y-dense $tab-float-label-padding-x-dense;
}
}
}
}
}
}
}