beenull/xpipe-mirror
1
0
Fork 0
mirror of https://github.com/xpipe-io/xpipe.git synced 2024-11-25 17:10:27 +00:00
Code Issues Projects Releases Packages Wiki Activity

Rework styling

Browse source
This commit is contained in:
crschnick 2024-03-03 12:50:43 +00:00
parent 09faef52ba
commit 38377361b2
8 changed files with 88 additions and 56 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
app/src/main/java/io/xpipe/app/browser/BrowserBookmarkComp.java
View file

@ -94,7 +94,7 @@ final class BrowserBookmarkComp extends SimpleComp {
event.consume(); event.consume();
}); });
}); });
}); }, true);
var category = new DataStoreCategoryChoiceComp( var category = new DataStoreCategoryChoiceComp(
StoreViewState.get().getAllConnectionsCategory(), StoreViewState.get().getAllConnectionsCategory(),
StoreViewState.get().getActiveCategory(), StoreViewState.get().getActiveCategory(),

35
app/src/main/java/io/xpipe/app/comp/store/StoreSectionMiniComp.java
View file

@ -18,26 +18,34 @@ import javafx.css.PseudoClass;
import javafx.geometry.Pos; import javafx.geometry.Pos;
import javafx.scene.control.Button; import javafx.scene.control.Button;
import javafx.scene.layout.VBox; import javafx.scene.layout.VBox;
import lombok.Builder;
import java.util.ArrayList; import java.util.ArrayList;
import java.util.Arrays; import java.util.Arrays;
import java.util.List; import java.util.List;
import java.util.function.BiConsumer; import java.util.function.BiConsumer;
@Builder
public class StoreSectionMiniComp extends Comp<CompStructure<VBox>> { public class StoreSectionMiniComp extends Comp<CompStructure<VBox>> {
public static final PseudoClass EXPANDED = PseudoClass.getPseudoClass("expanded"); public static final PseudoClass EXPANDED = PseudoClass.getPseudoClass("expanded");
private static final PseudoClass ODD = PseudoClass.getPseudoClass("odd-depth"); private static final PseudoClass ODD = PseudoClass.getPseudoClass("odd-depth");
private static final PseudoClass EVEN = PseudoClass.getPseudoClass("even-depth"); private static final PseudoClass EVEN = PseudoClass.getPseudoClass("even-depth");
private static final PseudoClass ROOT = PseudoClass.getPseudoClass("root");
private static final PseudoClass TOP = PseudoClass.getPseudoClass("top");
private static final PseudoClass SUB = PseudoClass.getPseudoClass("sub");
private final StoreSection section; private final StoreSection section;
private final BiConsumer<StoreSection, Comp<CompStructure<Button>>> augment;
private final boolean condensedStyle;
@Builder.Default public StoreSectionMiniComp(StoreSection section, BiConsumer<StoreSection, Comp<CompStructure<Button>>> augment, boolean condensedStyle) {
private final BiConsumer<StoreSection, Comp<CompStructure<Button>>> augment = (section1, buttonComp) -> {}; this.section = section;
this.augment = augment;
this.condensedStyle = condensedStyle;
}
public static Comp<?> createList(StoreSection top, BiConsumer<StoreSection, Comp<CompStructure<Button>>> augment) { public static Comp<?> createList(StoreSection top, BiConsumer<StoreSection, Comp<CompStructure<Button>>> augment, boolean condensedStyle) {
return new StoreSectionMiniComp(top, augment); return new StoreSectionMiniComp(top, augment, condensedStyle);
} }
@Override @Override
@ -104,10 +112,7 @@ public class StoreSectionMiniComp extends Comp<CompStructure<VBox>> {
section.getAllChildren()) section.getAllChildren())
: section.getShownChildren(); : section.getShownChildren();
var content = new ListBoxViewComp<>(listSections, section.getAllChildren(), (StoreSection e) -> { var content = new ListBoxViewComp<>(listSections, section.getAllChildren(), (StoreSection e) -> {
return StoreSectionMiniComp.builder() return new StoreSectionMiniComp(e, this.augment, this.condensedStyle);
.section(e)
.augment(this.augment)
.build();
}) })
.minHeight(0) .minHeight(0)
.hgrow(); .hgrow();
@ -119,9 +124,12 @@ public class StoreSectionMiniComp extends Comp<CompStructure<VBox>> {
Bindings.not(expanded), Bindings.not(expanded),
Bindings.size(section.getAllChildren()).isEqualTo(0))))); Bindings.size(section.getAllChildren()).isEqualTo(0)))));
return new VerticalComp(list) var vert = new VerticalComp(list);
if (condensedStyle) {
vert.styleClass("condensed");
}
return vert
.styleClass("store-section-mini-comp") .styleClass("store-section-mini-comp")
.styleClass(section.getWrapper() != null ? "sub" : "top")
.apply(struc -> { .apply(struc -> {
struc.get().setFillWidth(true); struc.get().setFillWidth(true);
SimpleChangeListener.apply(expanded, val -> { SimpleChangeListener.apply(expanded, val -> {
@ -129,6 +137,9 @@ public class StoreSectionMiniComp extends Comp<CompStructure<VBox>> {
}); });
struc.get().pseudoClassStateChanged(EVEN, section.getDepth() % 2 == 0); struc.get().pseudoClassStateChanged(EVEN, section.getDepth() % 2 == 0);
struc.get().pseudoClassStateChanged(ODD, section.getDepth() % 2 != 0); struc.get().pseudoClassStateChanged(ODD, section.getDepth() % 2 != 0);
struc.get().pseudoClassStateChanged(ROOT, section.getDepth() == 0);
struc.get().pseudoClassStateChanged(TOP, section.getDepth() == 1);
struc.get().pseudoClassStateChanged(SUB, section.getDepth() > 1);
}) })
.apply(struc -> { .apply(struc -> {
if (section.getWrapper() != null) { if (section.getWrapper() != null) {

2
app/src/main/java/io/xpipe/app/fxcomps/impl/DataStoreChoiceComp.java
View file

@ -100,7 +100,7 @@ public class DataStoreChoiceComp<T extends DataStore> extends SimpleComp {
if (!applicable.test(s.getWrapper())) { if (!applicable.test(s.getWrapper())) {
comp.disable(new SimpleBooleanProperty(true)); comp.disable(new SimpleBooleanProperty(true));
} }
}); }, false);
var category = new DataStoreCategoryChoiceComp( var category = new DataStoreCategoryChoiceComp(
initialCategory != null ? initialCategory.getRoot() : null, initialCategory != null ? initialCategory.getRoot() : null,
StoreViewState.get().getActiveCategory(), StoreViewState.get().getActiveCategory(),

6
app/src/main/resources/io/xpipe/app/resources/style/bookmark.css
View file

@ -1,11 +1,13 @@
.bookmark-list > .categories { .bookmark-list > .categories {
-fx-padding: 0.7em 1em 0.7em 1em; -fx-padding: 0.7em 1em 0.7em 1em;
-fx-background-color: -color-neutral-subtle; -fx-background-color: -color-bg-subtle;
-fx-border-color: -color-border-default;
-fx-border-width: 0 0 1 0;
} }
.bookmark-list .filter-comp { .bookmark-list .filter-comp {
-fx-border-width: 0.05em; -fx-border-width: 1;
-fx-border-radius: 0 4px 4px 0; -fx-border-radius: 0 4px 4px 0;
-fx-background-radius: 0 4px 4px 0; -fx-background-radius: 0 4px 4px 0;
-fx-background-color: -color-bg-default; -fx-background-color: -color-bg-default;

1
app/src/main/resources/io/xpipe/app/resources/style/browser.css
View file

@ -2,6 +2,7 @@
-fx-border-color: -color-border-default; -fx-border-color: -color-border-default;
-fx-border-width: 1px 0 0 0; -fx-border-width: 1px 0 0 0;
-fx-padding: 1em; -fx-padding: 1em;
-fx-background-color: -color-bg-subtle;
} }
.transfer .button { .transfer .button {

2
app/src/main/resources/io/xpipe/app/resources/style/choice-comp.css
View file

@ -5,6 +5,8 @@
.choice-comp-content > .top { .choice-comp-content > .top {
-fx-padding: 0.5em 1em 0.5em 1em; -fx-padding: 0.5em 1em 0.5em 1em;
-fx-background-color: -color-neutral-subtle; -fx-background-color: -color-neutral-subtle;
-fx-border-width: 1 0 1 0;
-fx-border-color: -color-border-default;
} }
.choice-comp .filter-comp { .choice-comp .filter-comp {

1
app/src/main/resources/io/xpipe/app/resources/style/scrollbar.css
View file

@ -1,6 +1,7 @@
.scroll-bar:vertical { .scroll-bar:vertical {
-fx-pref-width: 0.3em; -fx-pref-width: 0.3em;
-fx-padding: 0.3em 0 0.3em 0; -fx-padding: 0.3em 0 0.3em 0;
-fx-background-color: transparent;
} }
.scroll-bar:horizontal { .scroll-bar:horizontal {

95
app/src/main/resources/io/xpipe/app/resources/style/store-mini-section.css
View file

@ -1,92 +1,107 @@
.popover { .popover {
-fx-background-radius: 0; -fx-background-radius: 0;
} }
.popover > .content { .popover > .content {
-fx-padding: 10px 0 0 0; -fx-padding: 10px 0 0 0;
-fx-background-radius: 4px; -fx-background-radius: 4px;
} }
.store-mini-list-comp > * > * > .content { .store-mini-list-comp > * > * > .content {
-fx-spacing: 0.5em; -fx-spacing: 0.5em;
} }
.store-mini-list-comp .top { .store-mini-list-comp:root {
-fx-border-color: transparent; -fx-border-color: transparent;
-fx-background-color: transparent; -fx-background-color: transparent;
} }
.store-section-mini-comp .item { .store-section-mini-comp .item {
-fx-padding: 0.25em 0.4em 0.25em 0.4em; -fx-padding: 0.25em 0.4em 0.25em 0.4em;
-fx-border-color: transparent; -fx-border-color: transparent;
-fx-background-color: transparent; -fx-background-color: transparent;
} }
.store-section-mini-comp .item:hover, .store-section-mini-comp .item:focused { .store-section-mini-comp .item:hover, .store-section-mini-comp .item:focused {
-fx-background-color: -color-accent-subtle; -fx-background-color: -color-accent-subtle;
} }
.root:light .store-section-mini-comp.sub:expanded:even-depth { .root:light .store-section-mini-comp:sub:expanded:even-depth {
-fx-background-color: #9991; -fx-background-color: #9991;
-fx-border-color: -color-border-subtle; -fx-border-color: -color-border-subtle;
} }
.root:dark .store-section-mini-comp.sub:expanded:even-depth { .root:dark .store-section-mini-comp:sub:expanded:even-depth {
-fx-background-color: #0002; -fx-background-color: #0002;
-fx-border-color: -color-border-subtle; -fx-border-color: -color-border-subtle;
} }
.store-section-mini-comp .expand-button:hover, .store-section-mini-comp .expand-button:focused { .store-section-mini-comp .expand-button:hover, .store-section-mini-comp .expand-button:focused {
-fx-background-color: -color-neutral-muted; -fx-background-color: -color-neutral-muted;
} }
.store-section-mini-comp .expand-button:disabled { .store-section-mini-comp .expand-button:disabled {
-fx-opacity: 0.2; -fx-opacity: 0.2;
} }
.store-section-mini-comp .separator { .store-section-mini-comp .separator {
-fx-padding: 0 0.75em 0 0.75em; -fx-padding: 0 0.75em 0 0.75em;
-fx-border-insets: 0px; -fx-border-insets: 0px;
} }
.store-section-mini-comp > .content { .store-section-mini-comp > .content {
-fx-padding: 5px 0 5px 15px; -fx-padding: 5px 0 5px 15px;
} }
.store-section-mini-comp.top > .content { .store-section-mini-comp:root > .content {
-fx-padding: 0.5em 1em 0.5em 1em;
}
.store-section-mini-comp.condensed:root > .content {
-fx-padding: 0; -fx-padding: 0;
} }
.store-section-mini-comp .separator .line { .store-section-mini-comp .separator .line {
-fx-padding: 0; -fx-padding: 0;
-fx-border-insets: 0px; -fx-border-insets: 0px;
-fx-background-color: -color-border-subtle; -fx-background-color: -color-border-subtle;
-fx-opacity: 0.5; -fx-opacity: 0.5;
-fx-pref-height: 1; -fx-pref-height: 1;
} }
.root:light .top > .store-section-mini-comp { .root:light .store-section-mini-comp:top {
-fx-background-color: #9991; -fx-background-color: #9991;
} }
.root:dark .top > .store-section-mini-comp { .root:dark .store-section-mini-comp:top {
-fx-background-color: #0001; -fx-background-color: #0001;
} }
.store-section-mini-comp.sub:expanded { .store-section-mini-comp:sub:expanded {
-fx-border-radius: 2px; -fx-border-radius: 4 0 0 4;
-fx-border-width: 1px 0 1px 1px; -fx-border-width: 1px 0 1px 1px;
-fx-border-color: -color-border-default; -fx-border-color: -color-border-default;
} }
.top > .store-section-mini-comp { .store-section-mini-comp:root {
-fx-border-width: 1px 0 1px 0px; -fx-border-width: 0;
-fx-border-color: -color-border-default; }
.store-section-mini-comp.condensed:top {
-fx-border-radius: 0;
-fx-border-width: 1px 1 1px 0px;
-fx-border-color: -color-border-default;
}
.store-section-mini-comp:top {
-fx-border-radius: 4 0 0 4;
-fx-border-width: 1 1 1 1;
-fx-border-color: -color-border-default;
} }
.store-section-mini-comp .list-box-view-comp .content { .store-section-mini-comp .list-box-view-comp .content {
-fx-spacing: 0.4em; -fx-spacing: 0.4em;
} }