mirror of
https://github.com/xpipe-io/xpipe.git
synced 2024-11-22 07:30:24 +00:00
Style fixes
This commit is contained in:
parent
0448e0f813
commit
52035d62ea
17 changed files with 62 additions and 47 deletions
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -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<Comp<?>, ObservableValue<Boolean>>();
|
||||
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());
|
||||
});
|
||||
}
|
||||
});
|
||||
|
|
|
@ -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");
|
||||
|
|
|
@ -97,8 +97,8 @@ public abstract class Comp<S extends CompStructure<?>> {
|
|||
return apply(struc -> struc.get().setMinWidth(width));
|
||||
}
|
||||
|
||||
public Comp<S> minHeight(double width) {
|
||||
return apply(struc -> struc.get().setMinHeight(width));
|
||||
public Comp<S> minHeight(double height) {
|
||||
return apply(struc -> struc.get().setMinHeight(height));
|
||||
}
|
||||
|
||||
public Comp<S> maxWidth(int width) {
|
||||
|
|
|
@ -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 {
|
||||
|
|
|
@ -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 {
|
||||
|
|
|
@ -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%);
|
||||
}
|
||||
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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 {
|
||||
|
|
|
@ -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%);
|
||||
}
|
||||
|
|
|
@ -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%);
|
||||
}
|
|
@ -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%);
|
||||
}
|
|
@ -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%);
|
||||
}
|
|
@ -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%);
|
||||
}
|
|
@ -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%);
|
||||
}
|
|
@ -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%);
|
||||
}
|
|
@ -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%);
|
||||
}
|
Loading…
Reference in a new issue