From 52035d62eaabd4e03f573d24b60c2d69689e431c Mon Sep 17 00:00:00 2001 From: crschnick Date: Wed, 30 Oct 2024 09:59:35 +0000 Subject: [PATCH] Style fixes --- .../browser/session/BrowserSessionComp.java | 21 ++++++++++++++-- .../session/BrowserSessionTabsComp.java | 12 +++++++-- .../app/comp/store/StoreSidebarComp.java | 1 + .../main/java/io/xpipe/app/fxcomps/Comp.java | 4 +-- .../io/xpipe/app/resources/style/bookmark.css | 2 +- .../io/xpipe/app/resources/style/browser.css | 25 +++++-------------- .../xpipe/app/resources/style/color-box.css | 4 +-- .../io/xpipe/app/resources/style/prefs.css | 2 +- .../io/xpipe/app/resources/style/style.css | 4 +-- .../app/resources/theme/cupertinoDark.css | 4 +-- .../app/resources/theme/cupertinoLight.css | 4 +-- .../io/xpipe/app/resources/theme/dark.css | 4 +-- .../io/xpipe/app/resources/theme/dracula.css | 4 +-- .../io/xpipe/app/resources/theme/light.css | 4 +-- .../io/xpipe/app/resources/theme/mocha.css | 6 +++-- .../io/xpipe/app/resources/theme/nordDark.css | 4 +-- .../xpipe/app/resources/theme/nordLight.css | 4 +-- 17 files changed, 62 insertions(+), 47 deletions(-) diff --git a/app/src/main/java/io/xpipe/app/browser/session/BrowserSessionComp.java b/app/src/main/java/io/xpipe/app/browser/session/BrowserSessionComp.java index 7a0386c8a..f86a82175 100644 --- a/app/src/main/java/io/xpipe/app/browser/session/BrowserSessionComp.java +++ b/app/src/main/java/io/xpipe/app/browser/session/BrowserSessionComp.java @@ -20,7 +20,10 @@ import io.xpipe.app.util.ThreadHelper; import javafx.application.Platform; import javafx.beans.binding.Bindings; import javafx.beans.property.BooleanProperty; +import javafx.beans.property.SimpleBooleanProperty; import javafx.beans.property.SimpleDoubleProperty; +import javafx.geometry.Insets; +import javafx.geometry.Pos; import javafx.scene.layout.AnchorPane; import javafx.scene.layout.Region; import javafx.scene.shape.Rectangle; @@ -100,7 +103,8 @@ public class BrowserSessionComp extends SimpleComp { new VerticalComp(List.of(bookmarkTopBar, bookmarksContainer, localDownloadStage)).styleClass("left"); var split = new SimpleDoubleProperty(); - var tabs = new BrowserSessionTabsComp(model, split).apply(struc -> { + var tabs = new BrowserSessionTabsComp(model, split); + tabs.apply(struc -> { struc.get().setViewOrder(1); struc.get().setPickOnBounds(false); AnchorPane.setTopAnchor(struc.get(), 0.0); @@ -108,6 +112,10 @@ public class BrowserSessionComp extends SimpleComp { AnchorPane.setLeftAnchor(struc.get(), 0.0); AnchorPane.setRightAnchor(struc.get(), 0.0); }); + vertical.apply(struc -> { + struc.get().paddingProperty().bind(Bindings.createObjectBinding( + () -> new Insets(tabs.getHeaderHeight().get(), 0, 0, 0), tabs.getHeaderHeight())); + }); var loadingIndicator = LoadingOverlayComp.noProgress(Comp.empty(), model.getBusy()) .apply(struc -> { AnchorPane.setTopAnchor(struc.get(), 0.0); @@ -141,7 +149,16 @@ public class BrowserSessionComp extends SimpleComp { }); }); - var r = splitPane.createRegion(); + var topBackground = Comp.hspacer().styleClass("top-spacer"); + var stack = new StackComp(List.of(topBackground, splitPane)); + stack.apply(struc -> { + struc.get().setAlignment(Pos.TOP_CENTER); + var spacer = (Region) struc.get().lookup(".top-spacer"); + spacer.prefHeightProperty().bind(tabs.getHeaderHeight()); + spacer.minHeightProperty().bind(spacer.prefHeightProperty()); + spacer.maxHeightProperty().bind(spacer.prefHeightProperty()); + }); + var r = stack.createRegion(); r.getStyleClass().add("browser"); return r; } diff --git a/app/src/main/java/io/xpipe/app/browser/session/BrowserSessionTabsComp.java b/app/src/main/java/io/xpipe/app/browser/session/BrowserSessionTabsComp.java index e4cb2ef1a..baf469a4b 100644 --- a/app/src/main/java/io/xpipe/app/browser/session/BrowserSessionTabsComp.java +++ b/app/src/main/java/io/xpipe/app/browser/session/BrowserSessionTabsComp.java @@ -16,7 +16,9 @@ import io.xpipe.app.util.ContextMenuHelper; import javafx.application.Platform; import javafx.beans.binding.Bindings; +import javafx.beans.property.DoubleProperty; import javafx.beans.property.SimpleBooleanProperty; +import javafx.beans.property.SimpleDoubleProperty; import javafx.beans.property.SimpleStringProperty; import javafx.beans.value.ObservableDoubleValue; import javafx.beans.value.ObservableValue; @@ -24,12 +26,14 @@ import javafx.collections.ListChangeListener; import javafx.geometry.Insets; import javafx.geometry.Pos; import javafx.scene.control.*; +import javafx.scene.control.skin.TabPaneSkin; import javafx.scene.input.*; import javafx.scene.layout.Region; import javafx.scene.layout.StackPane; import atlantafx.base.controls.RingProgressIndicator; import atlantafx.base.theme.Styles; +import lombok.Getter; import java.util.*; @@ -41,16 +45,18 @@ public class BrowserSessionTabsComp extends SimpleComp { private final BrowserSessionModel model; private final ObservableDoubleValue leftPadding; + @Getter + private final DoubleProperty headerHeight; public BrowserSessionTabsComp(BrowserSessionModel model, ObservableDoubleValue leftPadding) { this.model = model; this.leftPadding = leftPadding; + this.headerHeight = new SimpleDoubleProperty(); } public Region createSimple() { var map = new LinkedHashMap, ObservableValue>(); - map.put(Comp.hspacer().styleClass("top-spacer"), new SimpleBooleanProperty(true)); - map.put(Comp.of(() -> createTabPane()), Bindings.isNotEmpty(model.getSessionEntries())); + map.put(Comp.of(() -> createTabPane()), new SimpleBooleanProperty(true)); map.put( new BrowserWelcomeComp(model).apply(struc -> StackPane.setAlignment(struc.get(), Pos.CENTER_LEFT)), Bindings.createBooleanBinding( @@ -69,6 +75,7 @@ public class BrowserSessionTabsComp extends SimpleComp { tabs.setTabMinWidth(Region.USE_PREF_SIZE); tabs.setTabMaxWidth(400); tabs.setTabClosingPolicy(ALL_TABS); + tabs.setSkin(new TabPaneSkin(tabs)); Styles.toggleStyleClass(tabs, TabPane.STYLE_CLASS_FLOATING); toggleStyleClass(tabs, DENSE); @@ -91,6 +98,7 @@ public class BrowserSessionTabsComp extends SimpleComp { .paddingProperty() .bind(Bindings.createObjectBinding( () -> new Insets(0, 0, 0, -leftPadding.get() + 2), leftPadding)); + headerHeight.bind(headerArea.heightProperty()); }); } }); diff --git a/app/src/main/java/io/xpipe/app/comp/store/StoreSidebarComp.java b/app/src/main/java/io/xpipe/app/comp/store/StoreSidebarComp.java index 78787f909..c82656ab4 100644 --- a/app/src/main/java/io/xpipe/app/comp/store/StoreSidebarComp.java +++ b/app/src/main/java/io/xpipe/app/comp/store/StoreSidebarComp.java @@ -31,6 +31,7 @@ public class StoreSidebarComp extends SimpleComp { .styleClass("gray") .styleClass("bar") .styleClass("filler-bar") + .minHeight(10) .vgrow())); sideBar.apply(struc -> struc.get().setFillWidth(true)); sideBar.styleClass("sidebar"); diff --git a/app/src/main/java/io/xpipe/app/fxcomps/Comp.java b/app/src/main/java/io/xpipe/app/fxcomps/Comp.java index 090a52d68..9cd68e6f1 100644 --- a/app/src/main/java/io/xpipe/app/fxcomps/Comp.java +++ b/app/src/main/java/io/xpipe/app/fxcomps/Comp.java @@ -97,8 +97,8 @@ public abstract class Comp> { return apply(struc -> struc.get().setMinWidth(width)); } - public Comp minHeight(double width) { - return apply(struc -> struc.get().setMinHeight(width)); + public Comp minHeight(double height) { + return apply(struc -> struc.get().setMinHeight(height)); } public Comp maxWidth(int width) { diff --git a/app/src/main/resources/io/xpipe/app/resources/style/bookmark.css b/app/src/main/resources/io/xpipe/app/resources/style/bookmark.css index 0b80ba9c4..279ccd67e 100644 --- a/app/src/main/resources/io/xpipe/app/resources/style/bookmark.css +++ b/app/src/main/resources/io/xpipe/app/resources/style/bookmark.css @@ -29,7 +29,7 @@ -fx-background-radius: 4 0 0 4; -fx-background-insets: 0 7 8 8, 1 8 9 9; -fx-padding: 1 0 9 9; - -fx-background-color: -color-border-default, -fx-foreground-base; + -fx-background-color: -color-border-default, -color-foreground-base; } .bookmarks-header { diff --git a/app/src/main/resources/io/xpipe/app/resources/style/browser.css b/app/src/main/resources/io/xpipe/app/resources/style/browser.css index 240394c69..19b78dd11 100644 --- a/app/src/main/resources/io/xpipe/app/resources/style/browser.css +++ b/app/src/main/resources/io/xpipe/app/resources/style/browser.css @@ -20,7 +20,7 @@ -fx-background-radius: 4; -fx-border-color: -color-border-default; -fx-border-width: 1; - -fx-background-color: -fx-foreground-base; + -fx-background-color: -color-foreground-base; } .transfer:highlighted > .download-background { @@ -48,9 +48,7 @@ } .browser .top-spacer { - -fx-background-color: transparent; - -fx-pref-height: 2.65em; - -fx-max-height: 2.65em; + -fx-background-color: -color-bg-inset; } .root:seamless-frame .browser .top-spacer { @@ -130,7 +128,7 @@ -fx-background-radius: 0 0 4 4; -fx-border-width: 1 0 0 0; -fx-border-color: -color-border-default; - -fx-background-color: -fx-foreground-base; + -fx-background-color: -color-foreground-base; -fx-padding: 5 8; } @@ -196,9 +194,6 @@ } .browser .tab-header-area, .browser .headers-region { - -fx-min-height: 2.65em; - -fx-pref-height: 2.65em; - -fx-max-height: 2.65em; } @@ -216,12 +211,6 @@ -fx-background-color: transparent; } -.browser .left { - -fx-border-color: transparent, transparent; - -fx-border-width: 2.7em 0 0 0, 2.65em 0 0 0; - -fx-background-color: transparent; -} - .browser.chooser .left { -fx-border-width: 0; } @@ -241,7 +230,7 @@ -fx-background-insets: 0, 7 0 0 0; -fx-border-width: 1; -fx-border-color: -color-border-default; - -fx-background-color: -fx-foreground-base, -fx-foreground-base; + -fx-background-color: -color-foreground-base, -color-foreground-base; } .browser .browser-content-container { @@ -259,9 +248,7 @@ } .browser .split-pane-divider { - -fx-border-color: transparent, transparent; -fx-padding: 0 2 0 3; - -fx-border-width: 2.7em 0 0 0, 2.65em 0 0 0; -fx-opacity: 1.0; -fx-background-color: transparent; } @@ -272,11 +259,11 @@ .table-view .column-header { -fx-pref-height: 2em; - -fx-background-color: -fx-foreground-base; + -fx-background-color: -color-foreground-base; } .table-view .column-header-background { - -fx-background-color: -fx-foreground-base; + -fx-background-color: -color-foreground-base; } .table-view .column-header-background .label { diff --git a/app/src/main/resources/io/xpipe/app/resources/style/color-box.css b/app/src/main/resources/io/xpipe/app/resources/style/color-box.css index dad290e7e..b1426a3c8 100644 --- a/app/src/main/resources/io/xpipe/app/resources/style/color-box.css +++ b/app/src/main/resources/io/xpipe/app/resources/style/color-box.css @@ -19,12 +19,12 @@ } .root:dark .color-box.gray { - -fx-background-color: derive(-color-bg-default, 13%); + -fx-background-color: -color-foreground-base; -fx-border-color: -color-border-default; } .root:light .color-box.gray { - -fx-background-color: derive(-color-bg-default, -3%); + -fx-background-color: -color-foreground-base; -fx-border-color: derive(-color-border-default, -10%); } diff --git a/app/src/main/resources/io/xpipe/app/resources/style/prefs.css b/app/src/main/resources/io/xpipe/app/resources/style/prefs.css index 70761192d..b420ad78e 100644 --- a/app/src/main/resources/io/xpipe/app/resources/style/prefs.css +++ b/app/src/main/resources/io/xpipe/app/resources/style/prefs.css @@ -33,7 +33,7 @@ .prefs .sidebar { -fx-spacing: 0; - -fx-background-color: -fx-foreground-base; + -fx-background-color: -color-foreground-base; -fx-border-color: -color-border-default; -fx-padding: 0.2em 0 0 0; -fx-border-width: 1; diff --git a/app/src/main/resources/io/xpipe/app/resources/style/style.css b/app/src/main/resources/io/xpipe/app/resources/style/style.css index 2589645da..ef0b124b9 100644 --- a/app/src/main/resources/io/xpipe/app/resources/style/style.css +++ b/app/src/main/resources/io/xpipe/app/resources/style/style.css @@ -14,7 +14,7 @@ } .root:dark:separate-frame .background { - -fx-background-color: derive(-color-bg-default, 1%); + -fx-background-color: derive(-color-bg-default, -3%); } .root:light:separate-frame .background { @@ -22,7 +22,7 @@ } .root:dark:separate-frame.background { - -fx-background-color: derive(-color-bg-default, 1%); + -fx-background-color: derive(-color-bg-default, -3%); } .root:light:separate-frame.background { diff --git a/app/src/main/resources/io/xpipe/app/resources/theme/cupertinoDark.css b/app/src/main/resources/io/xpipe/app/resources/theme/cupertinoDark.css index 80eec7d36..f676247c8 100644 --- a/app/src/main/resources/io/xpipe/app/resources/theme/cupertinoDark.css +++ b/app/src/main/resources/io/xpipe/app/resources/theme/cupertinoDark.css @@ -10,9 +10,9 @@ } .root:dark * { - -fx-foreground-base: derive(-color-bg-default, 13%); + -color-foreground-base: derive(-color-bg-default, 9%); } .root:light * { - -fx-foreground-base: derive(-color-bg-default, -3%); + -color-foreground-base: derive(-color-bg-default, -3%); } diff --git a/app/src/main/resources/io/xpipe/app/resources/theme/cupertinoLight.css b/app/src/main/resources/io/xpipe/app/resources/theme/cupertinoLight.css index bf18e71be..e915e11b0 100644 --- a/app/src/main/resources/io/xpipe/app/resources/theme/cupertinoLight.css +++ b/app/src/main/resources/io/xpipe/app/resources/theme/cupertinoLight.css @@ -9,9 +9,9 @@ } .root:dark * { - -fx-foreground-base: derive(-color-bg-default, 13%); + -color-foreground-base: derive(-color-bg-default, 13%); } .root:light * { - -fx-foreground-base: derive(-color-bg-default, -3%); + -color-foreground-base: derive(-color-bg-default, -3%); } \ No newline at end of file diff --git a/app/src/main/resources/io/xpipe/app/resources/theme/dark.css b/app/src/main/resources/io/xpipe/app/resources/theme/dark.css index d932221f2..2a7f7e156 100644 --- a/app/src/main/resources/io/xpipe/app/resources/theme/dark.css +++ b/app/src/main/resources/io/xpipe/app/resources/theme/dark.css @@ -7,9 +7,9 @@ } .root:dark * { - -fx-foreground-base: derive(-color-bg-default, 13%); + -color-foreground-base: derive(-color-bg-default, 10%); } .root:light * { - -fx-foreground-base: derive(-color-bg-default, -3%); + -color-foreground-base: derive(-color-bg-default, -3%); } \ No newline at end of file diff --git a/app/src/main/resources/io/xpipe/app/resources/theme/dracula.css b/app/src/main/resources/io/xpipe/app/resources/theme/dracula.css index 68fac38db..3fd42a7e9 100644 --- a/app/src/main/resources/io/xpipe/app/resources/theme/dracula.css +++ b/app/src/main/resources/io/xpipe/app/resources/theme/dracula.css @@ -7,9 +7,9 @@ } .root:dark * { - -fx-foreground-base: derive(-color-bg-default, 13%); + -color-foreground-base: derive(-color-bg-default, 9%); } .root:light * { - -fx-foreground-base: derive(-color-bg-default, -3%); + -color-foreground-base: derive(-color-bg-default, -3%); } \ No newline at end of file diff --git a/app/src/main/resources/io/xpipe/app/resources/theme/light.css b/app/src/main/resources/io/xpipe/app/resources/theme/light.css index 5328d82c6..ef427ce67 100644 --- a/app/src/main/resources/io/xpipe/app/resources/theme/light.css +++ b/app/src/main/resources/io/xpipe/app/resources/theme/light.css @@ -5,9 +5,9 @@ } .root:dark * { - -fx-foreground-base: derive(-color-bg-default, 13%); + -color-foreground-base: derive(-color-bg-default, 13%); } .root:light * { - -fx-foreground-base: derive(-color-bg-default, -3%); + -color-foreground-base: derive(-color-bg-default, -3%); } \ No newline at end of file diff --git a/app/src/main/resources/io/xpipe/app/resources/theme/mocha.css b/app/src/main/resources/io/xpipe/app/resources/theme/mocha.css index 2d17a091b..be49b0f2f 100644 --- a/app/src/main/resources/io/xpipe/app/resources/theme/mocha.css +++ b/app/src/main/resources/io/xpipe/app/resources/theme/mocha.css @@ -115,15 +115,17 @@ -fx-padding: inherit; } +.root { -color-bg-default-transparent: #0d1117d2; } + .root .table-view { -color-cell-bg-odd: derive(-color-bg-subtle, -35%); -color-cell-bg: derive(-color-bg-subtle, -30%); } .root:dark * { - -fx-foreground-base: derive(-color-bg-default, 13%); + -color-foreground-base: derive(-color-bg-default, 9%); } .root:light * { - -fx-foreground-base: derive(-color-bg-default, -3%); + -color-foreground-base: derive(-color-bg-default, -3%); } \ No newline at end of file diff --git a/app/src/main/resources/io/xpipe/app/resources/theme/nordDark.css b/app/src/main/resources/io/xpipe/app/resources/theme/nordDark.css index c5827a571..f18fa410f 100644 --- a/app/src/main/resources/io/xpipe/app/resources/theme/nordDark.css +++ b/app/src/main/resources/io/xpipe/app/resources/theme/nordDark.css @@ -6,9 +6,9 @@ } .root:dark * { - -fx-foreground-base: derive(-color-bg-default, 13%); + -color-foreground-base: derive(-color-bg-default, 9%); } .root:light * { - -fx-foreground-base: derive(-color-bg-default, -3%); + -color-foreground-base: derive(-color-bg-default, -3%); } \ No newline at end of file diff --git a/app/src/main/resources/io/xpipe/app/resources/theme/nordLight.css b/app/src/main/resources/io/xpipe/app/resources/theme/nordLight.css index 5b480ab3d..0fdfccbd3 100644 --- a/app/src/main/resources/io/xpipe/app/resources/theme/nordLight.css +++ b/app/src/main/resources/io/xpipe/app/resources/theme/nordLight.css @@ -5,9 +5,9 @@ } .root:dark * { - -fx-foreground-base: derive(-color-bg-default, 13%); + -color-foreground-base: derive(-color-bg-default, 13%); } .root:light * { - -fx-foreground-base: derive(-color-bg-default, -3%); + -color-foreground-base: derive(-color-bg-default, -3%); } \ No newline at end of file