Rework icons

This commit is contained in:
crschnick 2024-09-25 16:21:15 +00:00
parent 3372d77e0d
commit 72785ade3e
8 changed files with 72 additions and 49 deletions

View file

@ -8,6 +8,7 @@ import io.xpipe.app.fxcomps.SimpleComp;
import io.xpipe.app.fxcomps.impl.FilterComp;
import io.xpipe.app.fxcomps.impl.IconButtonComp;
import io.xpipe.app.fxcomps.util.BindingsHelper;
import io.xpipe.app.fxcomps.util.LabelGraphic;
import io.xpipe.app.util.ThreadHelper;
import io.xpipe.core.process.OsType;
@ -148,15 +149,15 @@ public class StoreEntryListOverviewComp extends SimpleComp {
}
private Comp<?> createAlphabeticalSortButton() {
var icon = Bindings.createStringBinding(
var icon = Bindings.createObjectBinding(
() -> {
if (sortMode.getValue() == StoreSortMode.ALPHABETICAL_ASC) {
return "mdi2s-sort-alphabetical-descending";
return new LabelGraphic.IconGraphic("mdi2s-sort-alphabetical-descending");
}
if (sortMode.getValue() == StoreSortMode.ALPHABETICAL_DESC) {
return "mdi2s-sort-alphabetical-ascending";
return new LabelGraphic.IconGraphic("mdi2s-sort-alphabetical-ascending");
}
return "mdi2s-sort-alphabetical-descending";
return new LabelGraphic.IconGraphic("mdi2s-sort-alphabetical-descending");
},
sortMode);
var alphabetical = new IconButtonComp(icon, () -> {
@ -189,15 +190,15 @@ public class StoreEntryListOverviewComp extends SimpleComp {
}
private Comp<?> createDateSortButton() {
var icon = Bindings.createStringBinding(
var icon = Bindings.createObjectBinding(
() -> {
if (sortMode.getValue() == StoreSortMode.DATE_ASC) {
return "mdi2s-sort-clock-ascending-outline";
return new LabelGraphic.IconGraphic("mdi2s-sort-clock-ascending-outline");
}
if (sortMode.getValue() == StoreSortMode.DATE_DESC) {
return "mdi2s-sort-clock-descending-outline";
return new LabelGraphic.IconGraphic("mdi2s-sort-clock-descending-outline");
}
return "mdi2s-sort-clock-ascending-outline";
return new LabelGraphic.IconGraphic("mdi2s-sort-clock-ascending-outline");
},
sortMode);
var date = new IconButtonComp(icon, () -> {

View file

@ -7,6 +7,7 @@ import io.xpipe.app.fxcomps.augment.GrowAugment;
import io.xpipe.app.fxcomps.impl.HorizontalComp;
import io.xpipe.app.fxcomps.impl.IconButtonComp;
import io.xpipe.app.fxcomps.impl.VerticalComp;
import io.xpipe.app.fxcomps.util.LabelGraphic;
import io.xpipe.app.storage.DataColor;
import io.xpipe.app.util.ThreadHelper;
@ -68,11 +69,11 @@ public class StoreSectionComp extends Comp<CompStructure<VBox>> {
private Comp<CompStructure<Button>> createExpandButton() {
var expandButton = new IconButtonComp(
Bindings.createStringBinding(
() -> section.getWrapper().getExpanded().get()
Bindings.createObjectBinding(
() -> new LabelGraphic.IconGraphic(section.getWrapper().getExpanded().get()
&& section.getShownChildren().getList().size() > 0
? "mdal-keyboard_arrow_down"
: "mdal-keyboard_arrow_right",
: "mdal-keyboard_arrow_right"),
section.getWrapper().getExpanded(),
section.getShownChildren().getList()),
() -> {

View file

@ -8,6 +8,7 @@ import io.xpipe.app.fxcomps.impl.HorizontalComp;
import io.xpipe.app.fxcomps.impl.IconButtonComp;
import io.xpipe.app.fxcomps.impl.PrettyImageHelper;
import io.xpipe.app.fxcomps.impl.VerticalComp;
import io.xpipe.app.fxcomps.util.LabelGraphic;
import io.xpipe.app.storage.DataColor;
import javafx.beans.binding.Bindings;
@ -81,8 +82,8 @@ public class StoreSectionMiniComp extends Comp<CompStructure<VBox>> {
new SimpleBooleanProperty(section.getWrapper().getExpanded().get()
&& section.getShownChildren().getList().size() > 0);
var button = new IconButtonComp(
Bindings.createStringBinding(
() -> expanded.get() ? "mdal-keyboard_arrow_down" : "mdal-keyboard_arrow_right",
Bindings.createObjectBinding(
() -> new LabelGraphic.IconGraphic(expanded.get() ? "mdal-keyboard_arrow_down" : "mdal-keyboard_arrow_right"),
expanded),
() -> {
expanded.set(!expanded.get());

View file

@ -5,22 +5,22 @@ import io.xpipe.app.browser.session.BrowserSessionComp;
import io.xpipe.app.browser.session.BrowserSessionModel;
import io.xpipe.app.comp.store.StoreLayoutComp;
import io.xpipe.app.fxcomps.Comp;
import io.xpipe.app.fxcomps.util.LabelGraphic;
import io.xpipe.app.prefs.AppPrefsComp;
import io.xpipe.app.util.Hyperlinks;
import io.xpipe.app.util.LicenseProvider;
import javafx.beans.property.Property;
import javafx.beans.property.SimpleObjectProperty;
import javafx.beans.value.ObservableValue;
import javafx.scene.input.KeyCode;
import javafx.scene.input.KeyCodeCombination;
import javafx.scene.input.KeyCombination;
import lombok.Builder;
import lombok.Data;
import lombok.Getter;
import lombok.extern.jackson.Jacksonized;
import java.time.*;
import java.util.ArrayList;
import java.util.List;
@ -75,43 +75,43 @@ public class AppLayoutModel {
var l = new ArrayList<>(List.of(
new Entry(
AppI18n.observable("browser"),
"mdi2f-file-cabinet",
new LabelGraphic.IconGraphic("mdi2f-file-cabinet"),
new BrowserSessionComp(BrowserSessionModel.DEFAULT),
null,
new KeyCodeCombination(KeyCode.DIGIT1, KeyCombination.SHORTCUT_DOWN)),
new Entry(
AppI18n.observable("connections"),
"mdi2c-connection",
new LabelGraphic.IconGraphic("mdi2c-connection"),
new StoreLayoutComp(),
null,
new KeyCodeCombination(KeyCode.DIGIT2, KeyCombination.SHORTCUT_DOWN)),
new Entry(
AppI18n.observable("settings"),
"mdsmz-miscellaneous_services",
new LabelGraphic.IconGraphic("mdsmz-miscellaneous_services"),
new AppPrefsComp(),
null,
new KeyCodeCombination(KeyCode.DIGIT3, KeyCombination.SHORTCUT_DOWN)),
new Entry(
AppI18n.observable("explorePlans"),
"mdi2p-professional-hexagon",
new LabelGraphic.IconGraphic("mdi2p-professional-hexagon"),
LicenseProvider.get().overviewPage(),
null,
null),
new Entry(
AppI18n.observable("visitGithubRepository"),
"mdi2g-github",
new LabelGraphic.IconGraphic("mdi2g-github"),
null,
() -> Hyperlinks.open(Hyperlinks.GITHUB),
null),
new Entry(
AppI18n.observable("discord"),
"mdi2d-discord",
new LabelGraphic.IconGraphic("mdi2d-discord"),
null,
() -> Hyperlinks.open(Hyperlinks.DISCORD),
null),
new Entry(
AppI18n.observable("api"),
"mdi2c-code-json",
new LabelGraphic.IconGraphic("mdi2c-code-json"),
null,
() -> Hyperlinks.open(
"http://localhost:" + AppBeaconServer.get().getPort()),
@ -123,6 +123,20 @@ public class AppLayoutModel {
// () -> Hyperlinks.open(Hyperlinks.GITHUB_WEBTOP),
// null)
));
var now = Instant.now();
var zone = ZoneId.of(ZoneId.SHORT_IDS.get("PST"));
var phStart = ZonedDateTime.of(2024,10,22,0,1, 0, 0, zone).toInstant();
var phEnd = ZonedDateTime.of(2024,10,22,23,59, 0, 0, zone).toInstant();
var phShow = now.isAfter(phStart) && now.isBefore(phEnd);
if (phShow) {
l.add(new Entry(
AppI18n.observable("api"),
new LabelGraphic.ImageGraphic("app:producthunt-color.png", 24),
null,
() -> Hyperlinks.open(Hyperlinks.PRODUCT_HUNT),
null));
}
return l;
}
@ -135,6 +149,5 @@ public class AppLayoutModel {
double browserConnectionsWidth;
}
public record Entry(
ObservableValue<String> name, String icon, Comp<?> comp, Runnable action, KeyCombination combination) {}
public record Entry(ObservableValue<String> name, LabelGraphic icon, Comp<?> comp, Runnable action, KeyCombination combination) {}
}

View file

@ -1,38 +1,45 @@
package io.xpipe.app.fxcomps.impl;
import atlantafx.base.theme.Styles;
import io.xpipe.app.fxcomps.Comp;
import io.xpipe.app.fxcomps.CompStructure;
import io.xpipe.app.fxcomps.SimpleCompStructure;
import io.xpipe.app.fxcomps.util.LabelGraphic;
import io.xpipe.app.fxcomps.util.PlatformThread;
import javafx.beans.property.SimpleObjectProperty;
import javafx.beans.value.ObservableValue;
import javafx.css.Size;
import javafx.css.SizeUnits;
import javafx.scene.control.Button;
import atlantafx.base.theme.Styles;
import org.kordamp.ikonli.javafx.FontIcon;
public class IconButtonComp extends Comp<CompStructure<Button>> {
private final ObservableValue<String> icon;
private final ObservableValue<? extends LabelGraphic> icon;
private final Runnable listener;
public IconButtonComp(String defaultVal) {
this(new SimpleObjectProperty<>(new LabelGraphic.IconGraphic(defaultVal)), null);
}
public IconButtonComp(String defaultVal, Runnable listener) {
this(new SimpleObjectProperty<>(new LabelGraphic.IconGraphic(defaultVal)), listener);
}
public IconButtonComp(LabelGraphic defaultVal) {
this(new SimpleObjectProperty<>(defaultVal), null);
}
public IconButtonComp(ObservableValue<String> icon) {
public IconButtonComp(ObservableValue<? extends LabelGraphic> icon) {
this.icon = icon;
this.listener = null;
}
public IconButtonComp(String defaultVal, Runnable listener) {
public IconButtonComp(LabelGraphic defaultVal, Runnable listener) {
this(new SimpleObjectProperty<>(defaultVal), listener);
}
public IconButtonComp(ObservableValue<String> icon, Runnable listener) {
public IconButtonComp(ObservableValue<? extends LabelGraphic> icon, Runnable listener) {
this.icon = PlatformThread.sync(icon);
this.listener = listener;
}
@ -41,18 +48,17 @@ public class IconButtonComp extends Comp<CompStructure<Button>> {
public CompStructure<Button> createBase() {
var button = new Button();
button.getStyleClass().add(Styles.FLAT);
var fi = new FontIcon(icon.getValue());
fi.setFocusTraversable(false);
icon.addListener((c, o, n) -> {
fi.setIconLiteral(n);
icon.subscribe(labelGraphic -> {
button.setGraphic(labelGraphic.createGraphicNode());
if (button.getGraphic() instanceof FontIcon fi) {
fi.setIconSize((int) new Size(button.getFont().getSize(), SizeUnits.PT).pixels());
}
});
fi.setIconSize((int) new Size(fi.getFont().getSize(), SizeUnits.PT).pixels());
button.fontProperty().addListener((c, o, n) -> {
button.fontProperty().subscribe((n) -> {
if (button.getGraphic() instanceof FontIcon fi) {
fi.setIconSize((int) new Size(n.getSize(), SizeUnits.PT).pixels());
}
});
// fi.iconColorProperty().bind(button.textFillProperty());
button.setGraphic(fi);
if (listener != null) {
button.setOnAction(e -> {
listener.run();

View file

@ -12,6 +12,7 @@ import io.xpipe.app.fxcomps.Comp;
import io.xpipe.app.fxcomps.SimpleComp;
import io.xpipe.app.fxcomps.augment.ContextMenuAugment;
import io.xpipe.app.fxcomps.util.DerivedObservableList;
import io.xpipe.app.fxcomps.util.LabelGraphic;
import io.xpipe.app.storage.DataColor;
import io.xpipe.app.storage.DataStorage;
import io.xpipe.app.storage.DataStoreCategory;
@ -57,11 +58,11 @@ public class StoreCategoryComp extends SimpleComp {
.createRegion();
var showing = new SimpleBooleanProperty();
var expandIcon = Bindings.createStringBinding(
var expandIcon = Bindings.createObjectBinding(
() -> {
var exp = category.getExpanded().get()
&& category.getChildren().size() > 0;
return exp ? "mdal-keyboard_arrow_down" : "mdal-keyboard_arrow_right";
return new LabelGraphic.IconGraphic(exp ? "mdal-keyboard_arrow_down" : "mdal-keyboard_arrow_right");
},
category.getExpanded(),
category.getChildren());
@ -78,18 +79,18 @@ public class StoreCategoryComp extends SimpleComp {
.tooltipKey("expand", new KeyCodeCombination(KeyCode.SPACE));
var hover = new SimpleBooleanProperty();
var statusIcon = Bindings.createStringBinding(
var statusIcon = Bindings.createObjectBinding(
() -> {
if (hover.get()) {
return "mdomz-settings";
return new LabelGraphic.IconGraphic("mdomz-settings");
}
if (!DataStorage.get().supportsSharing()
|| !category.getCategory().canShare()) {
return "mdi2g-git";
return new LabelGraphic.IconGraphic("mdi2g-git");
}
return category.getSync().getValue() ? "mdi2g-git" : "mdi2c-cancel";
return new LabelGraphic.IconGraphic(category.getSync().getValue() ? "mdi2g-git" : "mdi2c-cancel");
},
category.getSync(),
hover);

View file

@ -14,8 +14,8 @@ public class Hyperlinks {
public static final String DISCORD = "https://discord.gg/8y89vS8cRb";
public static final String GITHUB_WEBTOP = "https://github.com/xpipe-io/xpipe-webtop";
public static final String SELFHST_ICONS = "https://github.com/selfhst/icons";
public static final String SLACK =
"https://join.slack.com/t/XPipe/shared_invite/zt-1awjq0t5j-5i4UjNJfNe1VN4b_auu6Cg";
public static final String SLACK = "https://join.slack.com/t/XPipe/shared_invite/zt-1awjq0t5j-5i4UjNJfNe1VN4b_auu6Cg";
public static final String PRODUCT_HUNT = "https://www.producthunt.com/posts/xpipe?embed=true&utm_source=badge-featured&utm_medium=badge&utm_souce=badge-xpipe";
static final String[] browsers = {
"xdg-open", "google-chrome", "firefox", "opera", "konqueror", "mozilla", "gnome-open", "open"

Binary file not shown.

After

Width:  |  Height:  |  Size: 764 B