Restyle sidebar

This commit is contained in:
crschnick 2023-07-15 14:39:09 +00:00
parent b02ac3139f
commit 4631fc88ba
2 changed files with 22 additions and 13 deletions

View file

@ -1,11 +1,14 @@
package io.xpipe.app.comp.base;
import io.xpipe.app.core.AppFont;
import io.xpipe.app.core.AppI18n;
import io.xpipe.app.core.AppLayoutModel;
import io.xpipe.app.fxcomps.Comp;
import io.xpipe.app.fxcomps.CompStructure;
import io.xpipe.app.fxcomps.SimpleCompStructure;
import io.xpipe.app.fxcomps.augment.GrowAugment;
import io.xpipe.app.fxcomps.impl.FancyTooltipAugment;
import io.xpipe.app.fxcomps.impl.IconButtonComp;
import io.xpipe.app.fxcomps.util.PlatformThread;
import io.xpipe.app.update.UpdateAvailableAlert;
import io.xpipe.app.update.XPipeDistributionType;
@ -37,9 +40,9 @@ public class SideMenuBarComp extends Comp<CompStructure<VBox>> {
var selected = PseudoClass.getPseudoClass("selected");
entries.forEach(e -> {
var fi = new FontIcon(e.icon());
var b = new BigIconButton(e.name(), fi, () -> value.setValue(e));
b.apply(GrowAugment.create(true, false));
var b = new IconButtonComp(e.icon(), () -> value.setValue(e)).apply(new FancyTooltipAugment<>(e.name()));
b.apply(struc -> {
AppFont.setSize(struc.get(), 2);
struc.get().pseudoClassStateChanged(selected, value.getValue().equals(e));
value.addListener((c, o, n) -> {
PlatformThread.runLaterIfNeeded(() -> {
@ -53,7 +56,6 @@ public class SideMenuBarComp extends Comp<CompStructure<VBox>> {
{
var fi = new FontIcon("mdi2u-update");
var b = new BigIconButton(AppI18n.observable("update"), fi, () -> UpdateAvailableAlert.showIfNeeded());
b.apply(GrowAugment.create(true, false));
b.hide(PlatformThread.sync(Bindings.createBooleanBinding(
() -> {
return XPipeDistributionType.get()
@ -71,7 +73,7 @@ public class SideMenuBarComp extends Comp<CompStructure<VBox>> {
filler.setMaxHeight(3000);
vbox.getChildren().add(filler);
VBox.setVgrow(filler, Priority.ALWAYS);
filler.prefWidthProperty().bind(vbox.widthProperty());
GrowAugment.create(true, false).augment(filler);
vbox.getStyleClass().add("sidebar-comp");
return new SimpleCompStructure<>(vbox);

View file

@ -1,32 +1,39 @@
.sidebar-comp {
-fx-pref-width: 8em;
-fx-border-width: 0 0 0 1px;
-fx-border-color: -color-neutral-emphasis;
-fx-padding: 0;
-fx-background-insets: 0;
}
.sidebar-comp .big-icon-button-comp, .sidebar-comp .button {
.sidebar-comp .icon-button-comp {
-fx-border-width: 0 3px 0 0;
-fx-border-color: -color-neutral-muted;
}
.sidebar-comp .icon-button-comp, .sidebar-comp .button {
-fx-background-radius: 0;
-fx-background-insets: 0;
-fx-background-color: -color-neutral-subtle;
}
.sidebar-comp .button:disabled {
-fx-opacity: 1.0;
}
.sidebar-comp .big-icon-button-comp:selected {
-fx-background-color: -color-accent-subtle;
.sidebar-comp .icon-button-comp:hover {
-fx-border-color: -color-accent-muted;
-fx-background-color: -color-neutral-muted;
}
.sidebar-comp .big-icon-button-comp .icon {
-fx-font-size: 1.4em;
.sidebar-comp .icon-button-comp:selected {
-fx-border-color: -color-accent-emphasis;
-fx-background-color: -color-neutral-muted;
}
.sidebar-comp .big-icon-button-comp {
-fx-padding: 1.1em 0.6em 1.1em 0.6em;
.sidebar-comp .icon-button-comp {
-fx-padding: 1.1em;
}
.sidebar-comp .big-icon-button-comp .vbox {
.sidebar-comp .icon-button-comp .vbox {
-fx-spacing: 0.5em;
}