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.FilterComp;
import io.xpipe.app.fxcomps.impl.IconButtonComp; import io.xpipe.app.fxcomps.impl.IconButtonComp;
import io.xpipe.app.fxcomps.util.BindingsHelper; import io.xpipe.app.fxcomps.util.BindingsHelper;
import io.xpipe.app.fxcomps.util.LabelGraphic;
import io.xpipe.app.util.ThreadHelper; import io.xpipe.app.util.ThreadHelper;
import io.xpipe.core.process.OsType; import io.xpipe.core.process.OsType;
@ -148,15 +149,15 @@ public class StoreEntryListOverviewComp extends SimpleComp {
} }
private Comp<?> createAlphabeticalSortButton() { private Comp<?> createAlphabeticalSortButton() {
var icon = Bindings.createStringBinding( var icon = Bindings.createObjectBinding(
() -> { () -> {
if (sortMode.getValue() == StoreSortMode.ALPHABETICAL_ASC) { 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) { 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); sortMode);
var alphabetical = new IconButtonComp(icon, () -> { var alphabetical = new IconButtonComp(icon, () -> {
@ -189,15 +190,15 @@ public class StoreEntryListOverviewComp extends SimpleComp {
} }
private Comp<?> createDateSortButton() { private Comp<?> createDateSortButton() {
var icon = Bindings.createStringBinding( var icon = Bindings.createObjectBinding(
() -> { () -> {
if (sortMode.getValue() == StoreSortMode.DATE_ASC) { 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) { 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); sortMode);
var date = new IconButtonComp(icon, () -> { 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.HorizontalComp;
import io.xpipe.app.fxcomps.impl.IconButtonComp; import io.xpipe.app.fxcomps.impl.IconButtonComp;
import io.xpipe.app.fxcomps.impl.VerticalComp; import io.xpipe.app.fxcomps.impl.VerticalComp;
import io.xpipe.app.fxcomps.util.LabelGraphic;
import io.xpipe.app.storage.DataColor; import io.xpipe.app.storage.DataColor;
import io.xpipe.app.util.ThreadHelper; import io.xpipe.app.util.ThreadHelper;
@ -68,11 +69,11 @@ public class StoreSectionComp extends Comp<CompStructure<VBox>> {
private Comp<CompStructure<Button>> createExpandButton() { private Comp<CompStructure<Button>> createExpandButton() {
var expandButton = new IconButtonComp( var expandButton = new IconButtonComp(
Bindings.createStringBinding( Bindings.createObjectBinding(
() -> section.getWrapper().getExpanded().get() () -> new LabelGraphic.IconGraphic(section.getWrapper().getExpanded().get()
&& section.getShownChildren().getList().size() > 0 && section.getShownChildren().getList().size() > 0
? "mdal-keyboard_arrow_down" ? "mdal-keyboard_arrow_down"
: "mdal-keyboard_arrow_right", : "mdal-keyboard_arrow_right"),
section.getWrapper().getExpanded(), section.getWrapper().getExpanded(),
section.getShownChildren().getList()), 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.IconButtonComp;
import io.xpipe.app.fxcomps.impl.PrettyImageHelper; import io.xpipe.app.fxcomps.impl.PrettyImageHelper;
import io.xpipe.app.fxcomps.impl.VerticalComp; import io.xpipe.app.fxcomps.impl.VerticalComp;
import io.xpipe.app.fxcomps.util.LabelGraphic;
import io.xpipe.app.storage.DataColor; import io.xpipe.app.storage.DataColor;
import javafx.beans.binding.Bindings; import javafx.beans.binding.Bindings;
@ -81,8 +82,8 @@ public class StoreSectionMiniComp extends Comp<CompStructure<VBox>> {
new SimpleBooleanProperty(section.getWrapper().getExpanded().get() new SimpleBooleanProperty(section.getWrapper().getExpanded().get()
&& section.getShownChildren().getList().size() > 0); && section.getShownChildren().getList().size() > 0);
var button = new IconButtonComp( var button = new IconButtonComp(
Bindings.createStringBinding( Bindings.createObjectBinding(
() -> expanded.get() ? "mdal-keyboard_arrow_down" : "mdal-keyboard_arrow_right", () -> new LabelGraphic.IconGraphic(expanded.get() ? "mdal-keyboard_arrow_down" : "mdal-keyboard_arrow_right"),
expanded), expanded),
() -> { () -> {
expanded.set(!expanded.get()); 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.browser.session.BrowserSessionModel;
import io.xpipe.app.comp.store.StoreLayoutComp; import io.xpipe.app.comp.store.StoreLayoutComp;
import io.xpipe.app.fxcomps.Comp; import io.xpipe.app.fxcomps.Comp;
import io.xpipe.app.fxcomps.util.LabelGraphic;
import io.xpipe.app.prefs.AppPrefsComp; import io.xpipe.app.prefs.AppPrefsComp;
import io.xpipe.app.util.Hyperlinks; import io.xpipe.app.util.Hyperlinks;
import io.xpipe.app.util.LicenseProvider; import io.xpipe.app.util.LicenseProvider;
import javafx.beans.property.Property; import javafx.beans.property.Property;
import javafx.beans.property.SimpleObjectProperty; import javafx.beans.property.SimpleObjectProperty;
import javafx.beans.value.ObservableValue; import javafx.beans.value.ObservableValue;
import javafx.scene.input.KeyCode; import javafx.scene.input.KeyCode;
import javafx.scene.input.KeyCodeCombination; import javafx.scene.input.KeyCodeCombination;
import javafx.scene.input.KeyCombination; import javafx.scene.input.KeyCombination;
import lombok.Builder; import lombok.Builder;
import lombok.Data; import lombok.Data;
import lombok.Getter; import lombok.Getter;
import lombok.extern.jackson.Jacksonized; import lombok.extern.jackson.Jacksonized;
import java.time.*;
import java.util.ArrayList; import java.util.ArrayList;
import java.util.List; import java.util.List;
@ -75,43 +75,43 @@ public class AppLayoutModel {
var l = new ArrayList<>(List.of( var l = new ArrayList<>(List.of(
new Entry( new Entry(
AppI18n.observable("browser"), AppI18n.observable("browser"),
"mdi2f-file-cabinet", new LabelGraphic.IconGraphic("mdi2f-file-cabinet"),
new BrowserSessionComp(BrowserSessionModel.DEFAULT), new BrowserSessionComp(BrowserSessionModel.DEFAULT),
null, null,
new KeyCodeCombination(KeyCode.DIGIT1, KeyCombination.SHORTCUT_DOWN)), new KeyCodeCombination(KeyCode.DIGIT1, KeyCombination.SHORTCUT_DOWN)),
new Entry( new Entry(
AppI18n.observable("connections"), AppI18n.observable("connections"),
"mdi2c-connection", new LabelGraphic.IconGraphic("mdi2c-connection"),
new StoreLayoutComp(), new StoreLayoutComp(),
null, null,
new KeyCodeCombination(KeyCode.DIGIT2, KeyCombination.SHORTCUT_DOWN)), new KeyCodeCombination(KeyCode.DIGIT2, KeyCombination.SHORTCUT_DOWN)),
new Entry( new Entry(
AppI18n.observable("settings"), AppI18n.observable("settings"),
"mdsmz-miscellaneous_services", new LabelGraphic.IconGraphic("mdsmz-miscellaneous_services"),
new AppPrefsComp(), new AppPrefsComp(),
null, null,
new KeyCodeCombination(KeyCode.DIGIT3, KeyCombination.SHORTCUT_DOWN)), new KeyCodeCombination(KeyCode.DIGIT3, KeyCombination.SHORTCUT_DOWN)),
new Entry( new Entry(
AppI18n.observable("explorePlans"), AppI18n.observable("explorePlans"),
"mdi2p-professional-hexagon", new LabelGraphic.IconGraphic("mdi2p-professional-hexagon"),
LicenseProvider.get().overviewPage(), LicenseProvider.get().overviewPage(),
null, null,
null), null),
new Entry( new Entry(
AppI18n.observable("visitGithubRepository"), AppI18n.observable("visitGithubRepository"),
"mdi2g-github", new LabelGraphic.IconGraphic("mdi2g-github"),
null, null,
() -> Hyperlinks.open(Hyperlinks.GITHUB), () -> Hyperlinks.open(Hyperlinks.GITHUB),
null), null),
new Entry( new Entry(
AppI18n.observable("discord"), AppI18n.observable("discord"),
"mdi2d-discord", new LabelGraphic.IconGraphic("mdi2d-discord"),
null, null,
() -> Hyperlinks.open(Hyperlinks.DISCORD), () -> Hyperlinks.open(Hyperlinks.DISCORD),
null), null),
new Entry( new Entry(
AppI18n.observable("api"), AppI18n.observable("api"),
"mdi2c-code-json", new LabelGraphic.IconGraphic("mdi2c-code-json"),
null, null,
() -> Hyperlinks.open( () -> Hyperlinks.open(
"http://localhost:" + AppBeaconServer.get().getPort()), "http://localhost:" + AppBeaconServer.get().getPort()),
@ -123,6 +123,20 @@ public class AppLayoutModel {
// () -> Hyperlinks.open(Hyperlinks.GITHUB_WEBTOP), // () -> Hyperlinks.open(Hyperlinks.GITHUB_WEBTOP),
// null) // 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; return l;
} }
@ -135,6 +149,5 @@ public class AppLayoutModel {
double browserConnectionsWidth; double browserConnectionsWidth;
} }
public record Entry( public record Entry(ObservableValue<String> name, LabelGraphic icon, Comp<?> comp, Runnable action, KeyCombination combination) {}
ObservableValue<String> name, String icon, Comp<?> comp, Runnable action, KeyCombination combination) {}
} }

View file

@ -1,38 +1,45 @@
package io.xpipe.app.fxcomps.impl; package io.xpipe.app.fxcomps.impl;
import atlantafx.base.theme.Styles;
import io.xpipe.app.fxcomps.Comp; import io.xpipe.app.fxcomps.Comp;
import io.xpipe.app.fxcomps.CompStructure; import io.xpipe.app.fxcomps.CompStructure;
import io.xpipe.app.fxcomps.SimpleCompStructure; import io.xpipe.app.fxcomps.SimpleCompStructure;
import io.xpipe.app.fxcomps.util.LabelGraphic;
import io.xpipe.app.fxcomps.util.PlatformThread; import io.xpipe.app.fxcomps.util.PlatformThread;
import javafx.beans.property.SimpleObjectProperty; import javafx.beans.property.SimpleObjectProperty;
import javafx.beans.value.ObservableValue; import javafx.beans.value.ObservableValue;
import javafx.css.Size; import javafx.css.Size;
import javafx.css.SizeUnits; import javafx.css.SizeUnits;
import javafx.scene.control.Button; import javafx.scene.control.Button;
import atlantafx.base.theme.Styles;
import org.kordamp.ikonli.javafx.FontIcon; import org.kordamp.ikonli.javafx.FontIcon;
public class IconButtonComp extends Comp<CompStructure<Button>> { public class IconButtonComp extends Comp<CompStructure<Button>> {
private final ObservableValue<String> icon; private final ObservableValue<? extends LabelGraphic> icon;
private final Runnable listener; private final Runnable listener;
public IconButtonComp(String defaultVal) { 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); this(new SimpleObjectProperty<>(defaultVal), null);
} }
public IconButtonComp(ObservableValue<String> icon) { public IconButtonComp(ObservableValue<? extends LabelGraphic> icon) {
this.icon = icon; this.icon = icon;
this.listener = null; this.listener = null;
} }
public IconButtonComp(String defaultVal, Runnable listener) { public IconButtonComp(LabelGraphic defaultVal, Runnable listener) {
this(new SimpleObjectProperty<>(defaultVal), 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.icon = PlatformThread.sync(icon);
this.listener = listener; this.listener = listener;
} }
@ -41,18 +48,17 @@ public class IconButtonComp extends Comp<CompStructure<Button>> {
public CompStructure<Button> createBase() { public CompStructure<Button> createBase() {
var button = new Button(); var button = new Button();
button.getStyleClass().add(Styles.FLAT); button.getStyleClass().add(Styles.FLAT);
icon.subscribe(labelGraphic -> {
var fi = new FontIcon(icon.getValue()); button.setGraphic(labelGraphic.createGraphicNode());
fi.setFocusTraversable(false); if (button.getGraphic() instanceof FontIcon fi) {
icon.addListener((c, o, n) -> { fi.setIconSize((int) new Size(button.getFont().getSize(), SizeUnits.PT).pixels());
fi.setIconLiteral(n); }
}); });
fi.setIconSize((int) new Size(fi.getFont().getSize(), SizeUnits.PT).pixels()); button.fontProperty().subscribe((n) -> {
button.fontProperty().addListener((c, o, n) -> { if (button.getGraphic() instanceof FontIcon fi) {
fi.setIconSize((int) new Size(n.getSize(), SizeUnits.PT).pixels()); fi.setIconSize((int) new Size(n.getSize(), SizeUnits.PT).pixels());
}
}); });
// fi.iconColorProperty().bind(button.textFillProperty());
button.setGraphic(fi);
if (listener != null) { if (listener != null) {
button.setOnAction(e -> { button.setOnAction(e -> {
listener.run(); 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.SimpleComp;
import io.xpipe.app.fxcomps.augment.ContextMenuAugment; import io.xpipe.app.fxcomps.augment.ContextMenuAugment;
import io.xpipe.app.fxcomps.util.DerivedObservableList; 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.DataColor;
import io.xpipe.app.storage.DataStorage; import io.xpipe.app.storage.DataStorage;
import io.xpipe.app.storage.DataStoreCategory; import io.xpipe.app.storage.DataStoreCategory;
@ -57,11 +58,11 @@ public class StoreCategoryComp extends SimpleComp {
.createRegion(); .createRegion();
var showing = new SimpleBooleanProperty(); var showing = new SimpleBooleanProperty();
var expandIcon = Bindings.createStringBinding( var expandIcon = Bindings.createObjectBinding(
() -> { () -> {
var exp = category.getExpanded().get() var exp = category.getExpanded().get()
&& category.getChildren().size() > 0; && 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.getExpanded(),
category.getChildren()); category.getChildren());
@ -78,18 +79,18 @@ public class StoreCategoryComp extends SimpleComp {
.tooltipKey("expand", new KeyCodeCombination(KeyCode.SPACE)); .tooltipKey("expand", new KeyCodeCombination(KeyCode.SPACE));
var hover = new SimpleBooleanProperty(); var hover = new SimpleBooleanProperty();
var statusIcon = Bindings.createStringBinding( var statusIcon = Bindings.createObjectBinding(
() -> { () -> {
if (hover.get()) { if (hover.get()) {
return "mdomz-settings"; return new LabelGraphic.IconGraphic("mdomz-settings");
} }
if (!DataStorage.get().supportsSharing() if (!DataStorage.get().supportsSharing()
|| !category.getCategory().canShare()) { || !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(), category.getSync(),
hover); hover);

View file

@ -14,8 +14,8 @@ public class Hyperlinks {
public static final String DISCORD = "https://discord.gg/8y89vS8cRb"; 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 GITHUB_WEBTOP = "https://github.com/xpipe-io/xpipe-webtop";
public static final String SELFHST_ICONS = "https://github.com/selfhst/icons"; public static final String SELFHST_ICONS = "https://github.com/selfhst/icons";
public static final String SLACK = public static final String SLACK = "https://join.slack.com/t/XPipe/shared_invite/zt-1awjq0t5j-5i4UjNJfNe1VN4b_auu6Cg";
"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 = { static final String[] browsers = {
"xdg-open", "google-chrome", "firefox", "opera", "konqueror", "mozilla", "gnome-open", "open" "xdg-open", "google-chrome", "firefox", "opera", "konqueror", "mozilla", "gnome-open", "open"

Binary file not shown.

After

Width:  |  Height:  |  Size: 764 B