beenull/xpipe-mirror
1
0
Fork 0
mirror of https://github.com/xpipe-io/xpipe.git synced 2024-11-22 07:30:24 +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();
});
});
});
}, true);
var category = new DataStoreCategoryChoiceComp(
StoreViewState.get().getAllConnectionsCategory(),
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.scene.control.Button;
import javafx.scene.layout.VBox;
import lombok.Builder;
import java.util.ArrayList;
import java.util.Arrays;
import java.util.List;
import java.util.function.BiConsumer;
@Builder
public class StoreSectionMiniComp extends Comp<CompStructure<VBox>> {
public static final PseudoClass EXPANDED = PseudoClass.getPseudoClass("expanded");
private static final PseudoClass ODD = PseudoClass.getPseudoClass("odd-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 BiConsumer<StoreSection, Comp<CompStructure<Button>>> augment;
private final boolean condensedStyle;
@Builder.Default
private final BiConsumer<StoreSection, Comp<CompStructure<Button>>> augment = (section1, buttonComp) -> {};
public StoreSectionMiniComp(StoreSection section, BiConsumer<StoreSection, Comp<CompStructure<Button>>> augment, boolean condensedStyle) {
this.section = section;
this.augment = augment;
this.condensedStyle = condensedStyle;
}
public static Comp<?> createList(StoreSection top, BiConsumer<StoreSection, Comp<CompStructure<Button>>> augment) {
return new StoreSectionMiniComp(top, augment);
public static Comp<?> createList(StoreSection top, BiConsumer<StoreSection, Comp<CompStructure<Button>>> augment, boolean condensedStyle) {
return new StoreSectionMiniComp(top, augment, condensedStyle);
}
@Override
@ -104,10 +112,7 @@ public class StoreSectionMiniComp extends Comp<CompStructure<VBox>> {
section.getAllChildren())
: section.getShownChildren();
var content = new ListBoxViewComp<>(listSections, section.getAllChildren(), (StoreSection e) -> {
return StoreSectionMiniComp.builder()
.section(e)
.augment(this.augment)
.build();
return new StoreSectionMiniComp(e, this.augment, this.condensedStyle);
})
.minHeight(0)
.hgrow();
@ -119,9 +124,12 @@ public class StoreSectionMiniComp extends Comp<CompStructure<VBox>> {
Bindings.not(expanded),
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(section.getWrapper() != null ? "sub" : "top")
.apply(struc -> {
struc.get().setFillWidth(true);
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(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 -> {
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())) {
comp.disable(new SimpleBooleanProperty(true));
}
});
}, false);
var category = new DataStoreCategoryChoiceComp(
initialCategory != null ? initialCategory.getRoot() : null,
StoreViewState.get().getActiveCategory(),

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

@ -1,11 +1,13 @@
.bookmark-list > .categories {
-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 {
-fx-border-width: 0.05em;
-fx-border-width: 1;
-fx-border-radius: 0 4px 4px 0;
-fx-background-radius: 0 4px 4px 0;
-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-width: 1px 0 0 0;
-fx-padding: 1em;
-fx-background-color: -color-bg-subtle;
}
.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 {
-fx-padding: 0.5em 1em 0.5em 1em;
-fx-background-color: -color-neutral-subtle;
-fx-border-width: 1 0 1 0;
-fx-border-color: -color-border-default;
}
.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 {
-fx-pref-width: 0.3em;
-fx-padding: 0.3em 0 0.3em 0;
-fx-background-color: transparent;
}
.scroll-bar:horizontal {

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

@ -1,92 +1,107 @@
.popover {
-fx-background-radius: 0;
-fx-background-radius: 0;
}
.popover > .content {
-fx-padding: 10px 0 0 0;
-fx-background-radius: 4px;
-fx-padding: 10px 0 0 0;
-fx-background-radius: 4px;
}
.store-mini-list-comp > * > * > .content {
-fx-spacing: 0.5em;
-fx-spacing: 0.5em;
}
.store-mini-list-comp .top {
-fx-border-color: transparent;
-fx-background-color: transparent;
.store-mini-list-comp:root {
-fx-border-color: transparent;
-fx-background-color: transparent;
}
.store-section-mini-comp .item {
-fx-padding: 0.25em 0.4em 0.25em 0.4em;
-fx-border-color: transparent;
-fx-background-color: transparent;
-fx-padding: 0.25em 0.4em 0.25em 0.4em;
-fx-border-color: transparent;
-fx-background-color: transparent;
}
.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 {
-fx-background-color: #9991;
-fx-border-color: -color-border-subtle;
.root:light .store-section-mini-comp:sub:expanded:even-depth {
-fx-background-color: #9991;
-fx-border-color: -color-border-subtle;
}
.root:dark .store-section-mini-comp.sub:expanded:even-depth {
-fx-background-color: #0002;
-fx-border-color: -color-border-subtle;
.root:dark .store-section-mini-comp:sub:expanded:even-depth {
-fx-background-color: #0002;
-fx-border-color: -color-border-subtle;
}
.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 {
-fx-opacity: 0.2;
-fx-opacity: 0.2;
}
.store-section-mini-comp .separator {
-fx-padding: 0 0.75em 0 0.75em;
-fx-border-insets: 0px;
-fx-padding: 0 0.75em 0 0.75em;
-fx-border-insets: 0px;
}
.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;
}
.store-section-mini-comp .separator .line {
-fx-padding: 0;
-fx-border-insets: 0px;
-fx-background-color: -color-border-subtle;
-fx-opacity: 0.5;
-fx-pref-height: 1;
-fx-padding: 0;
-fx-border-insets: 0px;
-fx-background-color: -color-border-subtle;
-fx-opacity: 0.5;
-fx-pref-height: 1;
}
.root:light .top > .store-section-mini-comp {
-fx-background-color: #9991;
.root:light .store-section-mini-comp:top {
-fx-background-color: #9991;
}
.root:dark .top > .store-section-mini-comp {
-fx-background-color: #0001;
.root:dark .store-section-mini-comp:top {
-fx-background-color: #0001;
}
.store-section-mini-comp.sub:expanded {
-fx-border-radius: 2px;
-fx-border-width: 1px 0 1px 1px;
-fx-border-color: -color-border-default;
.store-section-mini-comp:sub:expanded {
-fx-border-radius: 4 0 0 4;
-fx-border-width: 1px 0 1px 1px;
-fx-border-color: -color-border-default;
}
.top > .store-section-mini-comp {
-fx-border-width: 1px 0 1px 0px;
-fx-border-color: -color-border-default;
.store-section-mini-comp:root {
-fx-border-width: 0;
}
.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 {
-fx-spacing: 0.4em;
-fx-spacing: 0.4em;
}